/* ==========================================================================
   Lumen hero — Before / After field, WebGL fog, layered parallax.
   Everything is scoped under .lumen so none of it leaks into the rest of the
   site. The original used global resets (*, html, body, a, button, h1),
   a .hero class and an --ink variable, all of which clash with style.css.
   --k: 0 = Before (diesel, dust)  ·  1 = After (solar, mist)

   NAMING: any class added inside .lumen needs a hero-specific name. style.css
   carries generic utilities (.lead is one) that will match a bare span in here
   and override it — and because Lumen type scales off --u while those
   utilities use rem/vw, the mismatch grows as the window narrows.
   ========================================================================== */

:root{
  /* hero box height: viewport minus the sticky header, clamped sensibly */
  --lm-h: clamp(560px, calc(100vh - 118px), 940px);
  /* the design is authored against 1600x900 — scale every value off that */
  --u: min(calc(100vw / 1600), calc(var(--lm-h) / 900));
  --k: 1; --k2: 1; --dip: 0; --sink: 0px;
}
@supports (height: 100svh){
  :root{ --lm-h: clamp(560px, calc(100svh - 118px), 940px); }
}

.lumen{
  /* "Before" keeps its diesel/dust browns — that is the problem state.
     "After" now resolves to the site's own brand colours. */
  --earth:#3a2a17;          /* before: dust brown */
  --navy: #08113C;          /* after:  site --ink (logo navy) */
  --crop: #F2A33C;          /* after accent: site --gold (used as a solid rule, not text) */
  --dust: #8a7660;          /* before accent */
  --lm-ink: color-mix(in srgb, var(--earth) calc((1 - var(--k)) * 100%), var(--navy));
  --lm-soft:color-mix(in srgb, #33261a calc((1 - var(--k)) * 100%), #14224A);

  position: relative;
  height: var(--lm-h);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: #d9cdb5;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lumen *, .lumen *::before, .lumen *::after{ box-sizing: border-box; }
.lumen picture{ display: contents; }
.lumen button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- image stack ---------- */
.lumen .layer,
.lumen .layer img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.lumen .layer img{ display: block; object-fit: cover; object-position: 50% 100%; }
.lumen .sky img{ filter: blur(calc(7 * var(--u))); transform: scale(1.05); }
.lumen #skyA{ opacity: var(--k); }

.lumen .home{ will-change: transform; transform: translate3d(0, var(--sink, 0px), 0); }
.lumen .home .set{ position: absolute; inset: 0; visibility: hidden; }
.lumen .home .set.is-on{ visibility: visible; }
.lumen .home .cut{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
}
.lumen .ground{
  -webkit-mask-image: linear-gradient(transparent 54%, #000 64%);
          mask-image: linear-gradient(transparent 54%, #000 64%);
}
.lumen .tilt{
  position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(calc(9 * var(--u)));
          backdrop-filter: blur(calc(9 * var(--u)));
  -webkit-mask-image: linear-gradient(transparent 84%, #000 100%);
          mask-image: linear-gradient(transparent 84%, #000 100%);
}
.lumen #fog{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- content ---------- */
.lumen .ui{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.lumen .ui a, .lumen .ui button{ pointer-events: auto; }

.lumen h1{
  margin: calc(126 * var(--u)) 0 0;   /* +50% */
  text-align: center;
  font-size: calc(80 * var(--u));   /* +25% */
  line-height: 1.09;
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--lm-ink);
  text-wrap: balance;
  /* lifts the type off a busy sky so the navy reads crisp instead of flat */
  text-shadow: 0 0 calc(34 * var(--u)) rgba(255,255,255,.62),
               0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.4);
}
.lumen h1 span{ display: block; }
.lumen h1 .l1, .lumen h1 .y{ opacity: calc(1 - var(--dip) * .8); }
/* "under" is a connector — let weight and size carry the hierarchy, NOT opacity.
   A transparent ink over the sky just reads as grey. */
.lumen h1 i{
  font-style: normal;
  font-weight: 400;
  font-size: .88em;
  color: var(--lm-ink);
}
/* "PM-KUSUM" is the term that matters: crisp navy, with the gold carried by a
   solid rule underneath. Colour on a shape keeps full saturation without the
   contrast penalty coloured text pays against a bright sky. */
.lumen h1 .y{
  display: inline-block; position: relative;
  font-weight: 600; white-space: nowrap;
  padding-bottom: calc(10 * var(--u));
}
.lumen h1 .y::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(7 * var(--u)); border-radius: calc(4 * var(--u));
  background: color-mix(in srgb, var(--dust) calc((1 - var(--k2)) * 100%), var(--crop));
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(120,70,0,.22);
}

.lumen .dock{
  /* the caption used to sit below this and supply the gap to the frame edge;
     with it gone the toggle carries its own */
  margin-top: auto; padding-bottom: calc(56 * var(--u));
  display: flex; flex-direction: column; align-items: center;
}
.lumen .toggle{
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: calc(524 * var(--u)); height: calc(86 * var(--u));
  padding: calc(2 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden;
  background: rgba(60,56,44,.34); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(calc(14 * var(--u)));
          backdrop-filter: blur(calc(14 * var(--u)));
}
.lumen .toggle button{
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(3 * var(--u));
  border-radius: calc(13 * var(--u)); color: #fff; overflow: hidden;
}
.lumen .toggle button::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad);
  box-shadow: inset 0 0 calc(18 * var(--u)) rgba(255,255,255,.65);
  opacity: var(--on);
}
.lumen .toggle b, .lumen .toggle small{
  position: relative;
  color: color-mix(in srgb, #08113C calc(var(--on) * 100%), #fff);
}
.lumen .toggle b{ font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.012em; }
.lumen .toggle small{ font-size: calc(15 * var(--u)); opacity: .72; }
.lumen .toggle button:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; }
.lumen #bb{ --on: calc(1 - var(--k)); --grad: linear-gradient(160deg, #EFE7D7, #CDBC9E 90%); }
.lumen #ba{ --on: var(--k);           --grad: linear-gradient(160deg, #FFD9A1, #F2A33C 90%); }

/* PHONE ONLY. On desktop this sat at the foot of the frame, over wet soil and
   shadowed crops: median contrast 1.66:1, with 78% of the pixels behind it
   under 4.5:1 — it read as mud. Scrimming the foreground to rescue it would
   have cost the water, which is the whole point of the "after" state, so the
   line comes out instead. The phone layout keeps it, up in the sky at 7:1+. */
.lumen .cap{
  display: none; text-align: center;
  line-height: 1.35; color: var(--lm-soft);
  text-shadow: 0 0 calc(14 * var(--u)) rgba(255,255,255,.55);
}

/* --------------------------------------------------------------------------
   Phones. The desktop stack is three 16:9 plates; a portrait viewport crops a
   16:9 frame down to ~31% of its width, which is what made every CSS-only fix
   fail. Here the markup has already swapped in one 9:16 plate per state
   (941x1672, horizon at 55.6% in BOTH, so the two states register exactly).
   That gives us a clean brief: sky from 0-55% for the copy, machinery in the
   middle band, foreground from ~72% down for the dock. So the layout goes back
   to the desktop shape — headline up top, dock pinned to the bottom.
   -------------------------------------------------------------------------- */
@media (max-width: 820px){
  /* Shorter than it was: at 700px the plate simply reads as too tall a strip.
     620px is also the height at which the top-cropped plate's 0.625 aspect
     matches the box, so the crop stays purely vertical — the water channel and
     the furrow both run to the frame edges, so there is no side crop to spend. */
  :root{ --u: 1px; --lm-h: clamp(520px, calc(100svh - 116px), 620px); }

  /* the mobile plate IS the whole frame, so sky and ground paint nothing —
     drop them rather than leave a masked, composited empty layer behind */
  .lumen .sky, .lumen .home .ground{ display: none; }

  /* The desktop sink drops an alpha cutout behind a ground plate; the mobile
     plate is opaque and full-bleed, so the same downward travel would expose
     the backdrop at the top. Swap it for a scale that only ever grows — it can
     never open a gap — driven by --dip, which peaks exactly as the fog does. */
  .lumen .home{ transform: scale(calc(1 + var(--dip, 0) * .035)); }

  /* anchor to the foot: what little vertical overflow there is comes off the
     sky, which is the part with nothing in it */
  .lumen .home .cut{ object-position: 50% 100%; }

  .lumen h1{
    margin-top: 48px; padding: 0 18px;
    font-size: clamp(30px, 9.6vw, 48px);
  }

  /* Headline and the one stat read as a single block up in the clear sky; the
     toggle drops to the foot on its own, over bare ground.
     Source order is h1 / dock / cap, so `order` lifts the caption past the dock. */
  .lumen .cap{
    display: block; order: 2; margin: 16px 0 0; padding: 0 14px;
    font-size: 14px; font-weight: 600;
  }

  .lumen .dock{ order: 3; width: 100%; padding: 0 16px 26px; }
  .lumen .toggle{ width: 100%; max-width: 344px; height: 66px; }
  .lumen .toggle b{ font-size: 17px; }
  .lumen .toggle small{ font-size: 12px; }

  /* a taller, softer blur bed so the glass toggle has something to sit on
     without smothering the water channel it sits over */
  .lumen .tilt{
    -webkit-mask-image: linear-gradient(transparent 72%, #000 95%);
            mask-image: linear-gradient(transparent 72%, #000 95%);
  }
}

/* Short phones (iPhone SE and friends). The hero floors at 520px there, which
   leaves only ~220px of sky above the treeline — not enough for the headline at
   its full size plus the larger top margin. Give some of both back, so the copy
   still clears the horizon instead of sitting on it. */
@media (max-width: 820px) and (max-height: 640px){
  .lumen h1{ margin-top: 30px; font-size: clamp(28px, 8.4vw, 40px); }
  .lumen .cap{ margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .lumen .home{ transform: none !important; }
}