/* ============================================================================
 * AURORA — the /products/ router skin
 * ============================================================================
 * A second skin layered over the .lp-page marketing shell in ui.css, applied by
 * adding `lp-aurora` to the body class. Two things make it a separate file
 * rather than edits to ui.css:
 *
 *   1. .lp-page is shared with the four product landing pages and the solar
 *      demo. Repainting it here would repaint those, which is not the ask.
 *   2. Everything below is paint and rhythm on top of the SAME markup classes,
 *      so the router page keeps working if this file is dropped.
 *
 * The look: cream and white grounds alternating with a full-bleed mesh-gradient
 * band, near-black ink, square edges, and monospaced uppercase labels — the
 * small-caps mono is what carries the aesthetic at label size, the way the
 * gradient carries it at band size.
 *
 * SCOPE: every token override is bound to `.lp-aurora .site-main`, never to the
 * body. The primary navbar lives in <header>, outside .site-main, so it keeps
 * resolving --ink/--brand/--border from the .lp-page block in ui.css and is
 * untouched by this file. Do not hoist these onto `.lp-aurora` itself.
 * ========================================================================== */

/* The palette lives on the body so the page ground can use it too; only the
 * ALIASES (--ink, --text, --border …) are scoped to <main>, because those are
 * the names the navbar reads. */
.lp-aurora {
  --aurora-ink:        #12110f;
  --aurora-ink-muted:  #4c4a45;
  --aurora-ink-subtle: #767269;

  --aurora-cream: #fdfaf4;
  --aurora-sand:  #f6f1e7;
  --aurora-card:  #ffffff;

  --aurora-line:        #e7e1d5;
  --aurora-line-strong: #cec6b6;

  /* Ink over the gradient band. The mesh bottoms out in mid-orange, so the
   * hairlines and fills that work on cream vanish there — these are the two
   * that track the band instead. */
  --aurora-line-onmesh: rgba(18, 17, 15, .12);
  --aurora-veil:        rgba(255, 255, 255, .72);

  /* The band. Five radial washes over a vertical base: pale blue top-left,
   * magenta and violet through the right, amber and orange along the bottom.
   *
   * Each stop fades to its OWN colour at zero alpha, never to `transparent`:
   * `transparent` is rgba(0,0,0,0) and premultiplied interpolation drags the
   * midpoint through grey, which is what makes a hand-rolled mesh look dirty. */
  --aurora-mesh:
    radial-gradient(76% 62% at 4% 2%,    #b9d7f4 0%, rgba(185, 215, 244, 0) 62%),
    radial-gradient(56% 52% at 88% 14%,  #f5abdd 0%, rgba(245, 171, 221, 0) 66%),
    radial-gradient(62% 56% at 100% 56%, #caa0f2 0%, rgba(202, 160, 242, 0) 62%),
    radial-gradient(82% 60% at 58% 108%, #f79a45 0%, rgba(247, 154, 69, 0) 64%),
    radial-gradient(66% 56% at 0% 100%,  #fbcf8c 0%, rgba(251, 207, 140, 0) 66%),
    linear-gradient(178deg, #ecf3fc 0%, #fdf6ee 48%, #fbdcb8 100%);

  /* Not a webfont: the label style is a system mono everywhere, so it costs no
   * request and cannot FOUT on the one thing that is 11px and uppercase. */
  --aurora-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  background: var(--aurora-cream);
}

.lp-aurora .site-main {
  --ink:         var(--aurora-ink);
  --text:        var(--aurora-ink);
  --text-muted:  var(--aurora-ink-muted);
  --text-subtle: var(--aurora-ink-subtle);

  --border:        var(--aurora-line);
  --border-strong: var(--aurora-line-strong);

  --surface:        var(--aurora-cream);
  --surface-raised: var(--aurora-card);
  --surface-sunken: var(--aurora-sand);

  /* Square, not round. ui.css sets 12/20/30px for the blue shell; this one is
   * built on rectangles and a 30px card corner reads as a different page. */
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;

  color: var(--aurora-ink);
  background: var(--aurora-cream);
}

/* ── Section rhythm: cream, band, cream, band … ──────────────────────────── */
/* Alternation is done with :nth-of-type rather than a modifier class per
 * section, because the samples section is behind `{% if samples %}`. Hand-
 * assigned classes would put two cream sections back to back on every install
 * with no featured samples; counting elements is correct in both cases. */

.lp-aurora .site-main > section {
  position: relative;
  padding: 96px 0;
  background: var(--aurora-cream);
  border: 0;
  overflow: hidden;
}

.lp-aurora .site-main > section:nth-of-type(even) {
  background-color: #f7f0e6;
  background-image: var(--aurora-mesh);
}

/* On the band, the one-step-off fill and the hairline both have to flip: the
 * cream tokens are tuned for a light ground and disappear over the orange. */
.lp-aurora .site-main > section:nth-of-type(even) {
  --surface-sunken: var(--aurora-veil);
  --border: var(--aurora-line-onmesh);
}

/* Both selectors are needed: the hero and the router set their own padding at a
 * higher specificity than the generic section rule, so a single mobile override
 * on `> section` would leave those two at desktop rhythm. */
@media (max-width: 767.98px) {
  .lp-aurora .site-main > section,
  .lp-aurora .site-main > section.lp-hero,
  .lp-aurora .site-main > section.lp-router,
  .lp-aurora .site-main > section.lp-cta { padding: 64px 0; }
}

/* ── Type ────────────────────────────────────────────────────────────────── */
/* Medium weight and tight tracking at display size. The blue shell sets
 * headings at 400, which at this scale reads thin rather than quiet. */

.lp-aurora .site-main h1,
.lp-aurora .site-main h2,
.lp-aurora .site-main h3,
.lp-aurora .site-main .lp-hero__title,
.lp-aurora .site-main .lp-section-title {
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--aurora-ink);
}

/* Sized for the column it actually occupies. The display scale this shell uses
 * on a full-width hero (4.5rem) is meant for a headline across the container;
 * in a half-width column it produces four short lines of very large type. */
.lp-aurora .site-main .lp-hero__title {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  max-width: 16ch;
  margin: 0;
}

.lp-aurora .site-main .lp-section-title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.06;
  text-align: left;
  max-width: 20ch;
  margin: 0;
}

.lp-aurora .site-main .lp-hero__sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--aurora-ink-muted);
  max-width: 40ch;
  margin: 0;
}

/* The two-tone headline. A blue ink in the base shell; here it is the band's
 * own pink→violet, clipped to the glyphs — the page's one flash of the
 * gradient outside the band itself.
 *
 * The flat colour is declared first and unconditionally: background-clip:text
 * with a transparent fill leaves the words invisible wherever the clip is
 * unsupported, so the fallback has to be the thing that is overridden, not the
 * thing that is added. */
.lp-aurora .site-main .lp-hero__accent { color: #b5479c; }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lp-aurora .site-main .lp-hero__accent {
    background-image: linear-gradient(96deg, #e26fb2 0%, #b667e0 52%, #f0913f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ── Mono labels ─────────────────────────────────────────────────────────── */
/* One rule for every small uppercase label on the page — eyebrow, section
 * kicker, card meta. Keeping them literally the same declaration is what stops
 * three near-identical label styles appearing over the next three edits. */

.lp-aurora .site-main .lp-hero__eyebrow,
.lp-aurora .site-main .aurora-eyebrow,
.lp-aurora .site-main .lp-product__time,
.lp-aurora .site-main .aurora-cta__label,
.lp-aurora .site-main .lp-sample__detail {
  font-family: var(--aurora-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aurora-ink-subtle);
}

/* The gap comes from .aurora-head's grid — a margin here would be added to it. */
.lp-aurora .site-main .aurora-eyebrow { margin: 0; }

/* The eyebrow's dot carries the gradient rather than the flat brand blue. */
.lp-aurora .site-main .lp-hero__eyebrow::before {
  border-radius: 1px;
  background: linear-gradient(135deg, #e26fb2, #f0913f);
}

/* ── Buttons: square, mono, near-black ───────────────────────────────────── */

.lp-aurora .site-main .btn {
  border-radius: 2px;
  font-family: var(--aurora-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 24px;
  gap: 0;
  border-width: 1px;
}

.lp-aurora .site-main .btn-lg { padding: 16px 28px; font-size: .78rem; }

/* The circular arrow badge is the blue shell's signature and reads as a
 * borrowed detail on a square button — dropped rather than restyled. */
.lp-aurora .site-main .btn::after { content: none; }

.lp-aurora .site-main .btn-primary {
  --bs-btn-bg: var(--aurora-ink);
  --bs-btn-border-color: var(--aurora-ink);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #33302b;
  --bs-btn-hover-border-color: #33302b;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #33302b;
  --bs-btn-active-border-color: #33302b;
  box-shadow: none;
}

.lp-aurora .site-main .btn-ghost,
.lp-aurora .site-main .lp-hero__actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--aurora-ink);
  color: var(--aurora-ink);
  box-shadow: none;
}

.lp-aurora .site-main .btn-ghost:hover {
  background: var(--aurora-ink);
  border-color: var(--aurora-ink);
  color: #ffffff;
}

/* ── 1. Hero — copy left, artwork right ──────────────────────────────────── */
/* The whole argument stacks in the left column (headline, then subhead, CTAs
 * and ticks) so it reads top to bottom as one thing; the artwork holds the
 * right column on its own. */

.lp-aurora .site-main > section.lp-hero {
  padding: 80px 0 88px;
  text-align: left;
}

.lp-aurora .site-main .lp-hero__grid { gap: var(--space-8); align-items: center; }

.lp-aurora .site-main .lp-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
  min-width: 0;
}

.lp-aurora .site-main .lp-hero__actions { gap: 12px; margin: var(--space-1) 0 0; }

/* A row, not a stack: three short items under a pair of buttons read as a
 * footnote to them, and stacked they compete with the buttons for height.
 *
 * A grid rather than a wrapping flex row. Flex drops whatever no longer fits
 * onto a second line starting at the left margin — three items become a ragged
 * 2 + 1. Auto-fit columns re-flow to 3, 2 or 1 and stay aligned in every one of
 * those states, which reads as a decision instead of an overflow. */
.lp-aurora .site-main .lp-hero__ticks {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .5rem 1.35rem;
  font-size: .85rem;
  color: var(--aurora-ink-muted);
}

.lp-aurora .site-main .lp-hero__ticks i { color: var(--aurora-ink); }

/* The artwork carries its own near-white ground, so it needs no card wrapper —
 * only a soft cast to lift it off the cream, and a corner to match it. */
.lp-aurora .site-main .lp-hero__figure img {
  border-radius: 8px;
  box-shadow: 0 24px 60px -34px rgba(18, 17, 15, .45);
}

@media (min-width: 992px) {
  .lp-aurora .site-main .lp-hero__grid {
    grid-template-columns: 1fr 1.02fr;
    gap: var(--space-10);
  }
}

/* ── 2. The band: the router ─────────────────────────────────────────────── */

.lp-aurora .site-main > section.lp-router { padding: 88px 0 96px; }

.lp-aurora .site-main .aurora-head {
  max-width: 46rem;
  margin: 0 0 var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.lp-aurora .site-main .aurora-head p {
  margin: 0;
  color: var(--aurora-ink-muted);
  font-size: 1rem;
  max-width: 52ch;
}

/* ── The router rows: photograph left, detail panel right ────────────────── */
/* One product per row in a single column. The four-up this replaced gave each
 * product 15rem and a visitor choosing between four different jobs is reading,
 * not scanning — the row buys the width for a photograph, which says "houses"
 * or "solar" before a word of the copy is read.
 *
 * Photograph and panel are separate blocks with a gap between them, not two
 * halves of one card: the picture is evidence, the panel is the offer, and the
 * gap is what stops the photo reading as a card header. */

.lp-aurora .site-main .lp-products {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.lp-aurora .site-main .lp-product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .lp-aurora .site-main .lp-product { grid-template-columns: 1.08fr .92fr; }
}

/* The row's palette. Each card already carries its product's .product-* class
 * (tokens.css), so the tint and the chip are read from the product's own hue
 * rather than from a second colour list that would drift from it. The values
 * are tints of it: the panel sits on the mesh band, and four saturated slabs
 * there would fight the ground they are on. */
.lp-aurora .site-main .lp-product { --lp-row-tint: #ffffff; --lp-row-chip: var(--aurora-ink); }
.lp-aurora .site-main .product-sme      { --lp-row-tint: #e9f0fd; --lp-row-chip: #2563eb; }
.lp-aurora .site-main .product-house    { --lp-row-tint: #e8eef4; --lp-row-chip: #1a3c5e; }
.lp-aurora .site-main .product-solar    { --lp-row-tint: #fcefda; --lp-row-chip: #b45309; }
.lp-aurora .site-main .product-strategy { --lp-row-tint: #f0eafd; --lp-row-chip: #7c3aed; }

.lp-aurora .site-main .lp-product__media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--aurora-sand);
}

.lp-aurora .site-main .lp-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slower than --dur-base on purpose: a 200ms zoom on a photograph reads as a
   * jolt, and there is no token for this length. */
  transition: transform 400ms ease;
}

.lp-aurora .site-main .lp-product:hover .lp-product__media img { transform: scale(1.035); }

/* A fixed ratio at every width, not just when stacked.
 *
 * Without it the media takes its height from the photograph's own proportions
 * — 3:2 for the property shot, 1.9:1 for the studio one — and the panel beside
 * it stretches to match, so four rows built from the same markup came out four
 * different heights. The crop is the price of a consistent rhythm. */
.lp-aurora .site-main .lp-product__media { aspect-ratio: 16 / 10; }

@media (max-width: 767.98px) {
  .lp-aurora .site-main .lp-product__media { aspect-ratio: 16 / 9; }
}

.lp-aurora .site-main .lp-product__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  padding: 40px 36px;
  border-radius: 10px;
  background: var(--lp-row-tint);
}

@media (max-width: 575.98px) {
  .lp-aurora .site-main .lp-product__panel { padding: 28px 22px; }
}

.lp-aurora .site-main .lp-product__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--lp-row-chip);
  color: #ffffff;
  font-size: 1.2rem;
}

.lp-aurora .site-main .lp-product__name {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 500;
  margin: var(--space-1) 0 0;
}

.lp-aurora .site-main .lp-product__job {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--aurora-ink-muted);
  flex-grow: 0;
}

.lp-aurora .site-main .lp-product__deliverable {
  display: block;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--aurora-ink-muted);
}

.lp-aurora .site-main .lp-product__deliverable strong { color: var(--aurora-ink); font-weight: 600; }

/* The row's button. A pill with a circular arrow badge — the one rounded thing
 * on a square page, which is what makes it read as the control rather than as
 * another line of text. It is a <span> inside the row's own <a>, so it cannot
 * be a nested link; the whole row is the click target and this shows where. */
.lp-aurora .site-main .lp-product__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-2);
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--aurora-ink);
  color: #ffffff;
  font-family: var(--aurora-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background var(--dur-base) ease;
}

.lp-aurora .site-main .lp-product__cta i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--aurora-ink);
  font-size: .95rem;
  transition: transform var(--dur-base) ease;
}

.lp-aurora .site-main .lp-product:hover .lp-product__cta { background: var(--lp-row-chip); }
.lp-aurora .site-main .lp-product:hover .lp-product__cta i { transform: translateX(2px); }

.lp-aurora .site-main .lp-product__time { padding-top: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  .lp-aurora .site-main .lp-product__media img,
  .lp-aurora .site-main .lp-product__cta i { transition: none; transform: none; }
  .lp-aurora .site-main .lp-product:hover .lp-product__media img { transform: none; }
}

/* ── 3. Proof strip ──────────────────────────────────────────────────────── */
/* The reference runs a row of client marks under its hero. There are no client
 * marks to run, so the same slot carries the four things a visitor is actually
 * checking for — same rhythm, honest content. */

.lp-aurora .site-main > section.lp-proof { padding: 56px 0; }

.lp-aurora .site-main .lp-proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--border);
  color: var(--aurora-ink-muted);
}

.lp-aurora .site-main .lp-proof__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 22px var(--space-4);
  font-size: .88rem;
  text-align: start;
}

.lp-aurora .site-main .lp-proof__list li + li { border-inline-start: 1px solid var(--border); }
.lp-aurora .site-main .lp-proof__list i { color: var(--aurora-ink); }

@media (max-width: 767.98px) {
  .lp-aurora .site-main .lp-proof__list { grid-template-columns: 1fr; }
  .lp-aurora .site-main .lp-proof__list li { padding: 16px 0; }
  .lp-aurora .site-main .lp-proof__list li + li {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

/* ── 5 & 6. How it works / Who it's for ──────────────────────────────────── */
/* The blue shell paints the "who" band full-accent with white type. Here the
 * band grounds come from the alternation above, so both rows are ink on a light
 * ground and the accent-band inversion has to be undone explicitly. */

.lp-aurora .site-main .lp-how__steps,
.lp-aurora .site-main .lp-who__grid { gap: 1px; }

.lp-aurora .site-main .lp-how__steps > li,
.lp-aurora .site-main .lp-who__grid > * {
  padding: 32px 28px;
  border-radius: 0;
  border: 0;
  outline: 1px solid var(--border);
  background: var(--surface-sunken);
}

.lp-aurora .site-main .lp-how__steps h3,
.lp-aurora .site-main .lp-who__grid h3 {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--aurora-ink);
}

.lp-aurora .site-main .lp-how__steps p,
.lp-aurora .site-main .lp-who__grid p {
  color: var(--aurora-ink-muted);
  font-size: .95rem;
}

.lp-aurora .site-main .lp-who .lp-section-title { color: var(--aurora-ink); }

.lp-aurora .site-main .lp-how__num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 2px;
  background: var(--aurora-ink);
  color: #ffffff;
  font-family: var(--aurora-mono);
  font-weight: 500;
  box-shadow: none;
}

/* ── 4. Samples ──────────────────────────────────────────────────────────── */

.lp-aurora .site-main .lp-sample {
  border-radius: 0;
  border: 1px solid var(--border);
  background: #ffffff;
}

.lp-aurora .site-main .lp-sample:hover { border-color: var(--aurora-ink); }
.lp-aurora .site-main .lp-sample__title { font-weight: 500; }

.lp-aurora .site-main .lp-sample__cta {
  font-family: var(--aurora-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--aurora-ink);
}

/* ── 7. Close — the panel the reference ends on ──────────────────────────── */
/* Heading, the list of what is included, and one button, in three columns
 * inside a single flat panel. White whichever ground it lands on, because the
 * alternation above can put it on either. */

.lp-aurora .site-main > section.lp-cta { padding: 96px 0; border: 0; }

.lp-aurora .site-main .aurora-cta {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: 56px 44px;
  background: #ffffff;
  border: 1px solid var(--aurora-line);
}

@media (min-width: 992px) {
  .lp-aurora .site-main .aurora-cta {
    grid-template-columns: 1.1fr 1fr auto;
    gap: var(--space-8);
  }
}

.lp-aurora .site-main .aurora-cta .lp-section-title { max-width: 14ch; }

.lp-aurora .site-main .aurora-cta__label { margin: 0 0 var(--space-3); }

.lp-aurora .site-main .aurora-cta__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  font-size: .95rem;
  color: var(--aurora-ink-muted);
}

.lp-aurora .site-main .aurora-cta__list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.lp-aurora .site-main .aurora-cta__list i { color: var(--aurora-ink); margin-top: .2rem; }

@media (max-width: 575.98px) {
  .lp-aurora .site-main .aurora-cta { padding: 36px 24px; }
  .lp-aurora .site-main .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-aurora .site-main .lp-product { transition: none; }
}