/* ==========================================================================
   Horizon — product page
   Loads on top of app.css purely for the reset, the face and the navbar; the
   nav's own --light token is what this page drives to flip it dark.
   One scalar runs the whole page: --d (0 = day, 1 = night). Every surface,
   rule and ink colour is mixed off it, so the light→dark hand-off is a single
   continuous move rather than a set of separate transitions.
   ========================================================================== */

:root{
  --d:0;            /* day → night */
  --light:1;        /* navbar (app.css): 1 = white pill. Kept as 1 - d. */

  --page : color-mix(in srgb, #0c0b10 calc(var(--d) * 100%), #fdf5ec);
  --surf : color-mix(in srgb, #17161f calc(var(--d) * 100%), #fffdfb);
  --surf2: color-mix(in srgb, #201f2a calc(var(--d) * 100%), #f6efe6);
  --ink  : color-mix(in srgb, #f5f2ef calc(var(--d) * 100%), #1c1512);
  --ink2 : color-mix(in srgb, #9c98a6 calc(var(--d) * 100%), #857a70);
  --line : color-mix(in srgb, rgba(255,255,255,.11) calc(var(--d) * 100%), rgba(28,21,18,.11));
  --accent:#e8641c;
  --accSoft: color-mix(in srgb, rgba(232,100,28,.22) calc(var(--d) * 100%), rgba(232,100,28,.13));

  --pad: clamp(22px, 5.4vw, 104px);
  --winR: clamp(14px, 1.35vw, 22px);
}

.hbody{
  background:var(--page);
  color:var(--ink);
  overflow-x:hidden;
}
/* the field sits behind everything and is the thing that actually darkens */
.hpage{position:fixed;inset:0;z-index:-1;background:var(--page)}
.hdefs{position:absolute;width:0;height:0;overflow:hidden}

/* ── Type ────────────────────────────────────────────────────────────────── */

.heyebrow{
  margin:0 0 clamp(14px,1.5vw,22px);
  font-size:clamp(11px,.82vw,13px);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,#fff calc(var(--d) * 100%),rgba(28,21,18,.62));
}
.hh1{
  margin:0;font-weight:400;
  font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:1.04;letter-spacing:-.04em;
  color:var(--ink);
}
.hh2{
  margin:0;font-weight:400;
  font-size:clamp(1.95rem,4vw,3.9rem);line-height:1.06;letter-spacing:-.038em;
  color:var(--ink);
}
.hh2--c{text-align:center}
.hlede{
  margin:clamp(18px,1.9vw,30px) 0 0;max-width:34ch;
  font-size:clamp(.95rem,1.12vw,1.2rem);line-height:1.55;
  color:var(--ink2);
}
.hh2--c + .hlede{margin-inline:auto;text-align:center}

.hbtn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(28px,3vw,46px);
  height:clamp(46px,3.3vw,56px);padding-inline:clamp(24px,2.1vw,36px);
  border-radius:var(--pill);
  background:color-mix(in srgb,#fff calc(var(--d) * 100%),#1c1512);
  color:color-mix(in srgb,#14121a calc(var(--d) * 100%),#fff);
  font-size:clamp(.86rem,.98vw,1rem);font-weight:500;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.hbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.hbtn--lg{height:clamp(52px,3.8vw,62px);padding-inline:clamp(30px,2.6vw,44px)}

/* ── Geometry ─────────────────────────────────────────────────────────────
   The same cube everywhere, only ever re-scaled and re-placed. Each instance
   is anchored by its own centre so --x/--y read as a position, not an offset,
   and every one sits clear of the copy column.                              */

/* NOT clipped: an overflow:hidden here cuts any cube that straddles a
   section edge dead flat, and those hard horizontal lines were the seams
   showing between the dark bands. The page's own overflow-x holds the
   sides; vertically a cube is now free to cross a join. */
.hgeo{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the two places that genuinely must clip: distinct backgrounds meet */
.hhero .hgeo,.sp__face .hgeo{overflow:hidden}
.cube{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:calc(var(--s) * 1.1);
  translate:-50% -50%;
  rotate:var(--r,0deg);
  opacity:calc(var(--o,.5) * (1 - var(--d) * .52));
  /* one treatment for all three fields: translucent white reads as a lit
     facet on the orange and on the dark, and the shadow is what gives it
     presence where the background is too pale for translucency alone */
  filter:drop-shadow(0 22px 44px rgba(140,58,12,calc(.13 * (1 - var(--d)))));
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hhero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex}
/* deep red in the top-left, resolving to cream at the right: the reference's
   diagonal, plus one soft bloom so the middle never reads as a flat band */
.hhero__field{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(58% 70% at 74% 52%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(101deg,
      #b62f16 0%, #ca3f16 9%, #de5a18 19%, #ea711e 28%,
      #f0904a 39%, #f5b578 51%, #f9d7ad 63%, #fbe8d1 74%,
      #fdf2e6 85%, #fdf7f1 100%);
}

.hhero__in{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,70px);
  padding:clamp(120px,11vw,170px) var(--pad) clamp(70px,7vw,110px);
}
/* the copy was being read across a cube edge and a moving gradient. This
   blurs whatever is behind it and lifts the field a little, feathered to
   nothing so it never reads as a panel. */
.hhero__scrim{
  position:absolute;z-index:1;pointer-events:none;
  left:calc(var(--pad) * -.55);top:50%;translate:0 -50%;
  width:min(66%,860px);height:min(86%,700px);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  background:radial-gradient(56% 52% at 34% 50%, rgba(255,244,234,.34), rgba(255,244,234,0) 72%);
  -webkit-mask-image:radial-gradient(56% 52% at 34% 50%, #000 34%, transparent 74%);
  mask-image:radial-gradient(56% 52% at 34% 50%, #000 34%, transparent 74%);
}
.hhero__copy{max-width:min(100%,620px)}
.hhero .hh1,.hhero .heyebrow{color:#22150e}
.hhero .hlede{color:rgba(30,17,10,.82);max-width:30ch}
.hhero .hbtn{background:#22150e;color:#fff}

.hhero__ui{justify-self:end;width:min(100%,660px)}

/* ── Window chrome ────────────────────────────────────────────────────────
   Deliberately plain: a bar, three dots, a name. The product is the content,
   not the frame. The traffic lights keep their own colours in both modes.   */

.win{
  position:relative;border-radius:var(--winR);
  background:var(--surf);
  border:1px solid var(--line);
  box-shadow:
    0 44px 100px -46px rgba(92,38,6,calc(.5 * (1 - var(--d)))),
    0 44px 110px -50px rgba(0,0,0,calc(.9 * var(--d)));
  overflow:hidden;
}
.win__bar{
  display:flex;align-items:center;gap:clamp(10px,1vw,14px);
  padding:clamp(12px,1.05vw,16px) clamp(14px,1.2vw,20px);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,rgba(255,255,255,.03) calc(var(--d) * 100%),rgba(28,21,18,.022));
}
.win__dots{display:flex;gap:7px;flex:0 0 auto}
.win__dots i{display:block;width:11px;height:11px;border-radius:50%}
.win__dots i:nth-child(1){background:#ff5f57}
.win__dots i:nth-child(2){background:#febc2e}
.win__dots i:nth-child(3){background:#28c840}
.win__name{font-size:clamp(11px,.8vw,13px);color:var(--ink2);letter-spacing:.01em}
.win__body{padding:clamp(20px,2vw,34px)}

/* ── Today window ─────────────────────────────────────────────────────────── */

.tw__greet{margin:0;font-size:clamp(.82rem,.9vw,.95rem);color:var(--ink2)}
.tw__day{margin:2px 0 clamp(18px,1.8vw,26px);font-size:clamp(1.35rem,2vw,1.95rem);letter-spacing:-.03em;color:var(--ink)}
.tw__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,.85vw,12px)}
.tw__list li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,1.1vw,16px);
  padding:clamp(13px,1.25vw,19px) clamp(14px,1.3vw,20px);
  border-radius:calc(var(--winR) * .62);
  background:var(--surf2);
}
.tw__sub{
  font-size:clamp(11px,.78vw,12.5px);font-weight:500;
  padding:5px 10px;border-radius:var(--pill);
  background:var(--accSoft);color:color-mix(in srgb,#ffb27a calc(var(--d) * 100%),#b8460f);
  white-space:nowrap;
}
.tw__foc{font-size:clamp(.85rem,.98vw,1.02rem);color:var(--ink);letter-spacing:-.01em}
.tw__min{font-size:clamp(11px,.8vw,13px);color:var(--ink2);font-variant-numeric:tabular-nums}
.tw__foot{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,1.8vw,26px)}
.tw__bar{flex:1;height:6px;border-radius:99px;background:var(--surf2);overflow:hidden}
.tw__bar span{display:block;height:100%;border-radius:99px;background:var(--accent)}
.tw__meta{margin:0;font-size:clamp(10.5px,.76vw,12px);color:var(--ink2);white-space:nowrap}

/* the locked screen has to fit a short laptop too */
@media (max-height:780px){
  .sp__ttl2{font-size:clamp(1.4rem,2.5vw,2.3rem);margin-bottom:clamp(16px,2vw,26px)}
  .sp__inner{padding-top:clamp(64px,8vh,88px)}
  .win--split .win__body{padding:clamp(14px,2vh,22px)}
  .sp__row{padding-block:clamp(8px,1.1vh,12px)}
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.hsec{position:relative;isolation:isolate;padding-block:clamp(96px,13vw,210px)}
.hsec__in{
  position:relative;z-index:2;
  display:grid;align-items:center;gap:clamp(34px,5vw,86px);
  padding-inline:var(--pad);
}
.hsec__in--left  {grid-template-columns:minmax(0,1.24fr) minmax(0,.86fr)}
.hsec__in--right {grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr)}
.hsec__in--centre{grid-template-columns:minmax(0,1fr);justify-items:center;max-width:1180px;margin-inline:auto}
.win--split{width:100%}

/* ── Week reflow ──────────────────────────────────────────────────────────
   --p is the section's own scroll progress. Each chip carries the column it
   starts in and the column it lands in, and its `left` is interpolated
   between them, so the reflow is scrubbed rather than played.               */

.wk{--p:0}
.wk__days{
  display:grid;grid-template-columns:repeat(7,1fr);
  font-size:clamp(10px,.74vw,12px);color:var(--ink2);text-align:center;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.wk__track{position:relative;height:clamp(196px,17vw,250px);margin-top:14px}
/* seven faint columns, so a chip reads as sitting ON a day rather than
   floating somewhere near one */
.wk__track::before{
  content:'';position:absolute;inset:0;border-radius:calc(var(--winR) * .5);
  background:repeating-linear-gradient(to right,
    color-mix(in srgb, rgba(255,255,255,.035) calc(var(--d) * 100%), rgba(28,21,18,.028))
      0 calc(100% / 7 - 6px),
    transparent calc(100% / 7 - 6px) calc(100% / 7));
}
.wk__chip{
  position:absolute;top:0;z-index:1;
  /* --snap is 0 or 1, never between: a chip that travels laterally reads
     as sliding through its neighbours, so it re-lays out instead */
  left:calc((var(--c0) + (var(--c1) - var(--c0)) * var(--snap,0)) * (100% / 7));
  width:calc(100% / 7);padding-right:6px;
  transform:translateY(calc(var(--row, 0) * 1px));
}
.wk__chip b{
  display:block;font-weight:400;
  font-size:clamp(10px,.74vw,11.5px);line-height:1.3;
  padding:clamp(10px,.95vw,15px) clamp(8px,.7vw,11px);
  border-radius:calc(var(--winR) * .5);
  background:var(--accSoft);
  color:color-mix(in srgb,#ffbe8e calc(var(--d) * 100%),#a83f0c);
  min-height:clamp(52px,4.6vw,66px);
}
/* stack them so five chips in seven columns never collide */
.wk__chip:nth-child(1){top:0}
.wk__chip:nth-child(2){top:calc(1 * clamp(58px,5.1vw,74px))}
.wk__chip:nth-child(3){top:0}
.wk__chip:nth-child(4){top:calc(1 * clamp(58px,5.1vw,74px))}
.wk__chip:nth-child(5){top:calc(2 * clamp(58px,5.1vw,74px))}

/* the missed one greys out and strikes through as the reflow runs */
.wk__chip.is-missed b{
  background:color-mix(in srgb,rgba(255,255,255,.06) calc(var(--d) * 100%),rgba(28,21,18,.05));
  color:var(--ink2);
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,rgba(255,255,255,.4) calc(var(--d) * 100%),rgba(28,21,18,.35));
  opacity:calc(1 - var(--snap,0) * .45);
}
.wk__note{
  margin:clamp(14px,1.4vw,20px) 0 0;
  font-size:clamp(10.5px,.76vw,12.5px);color:var(--ink2);
  opacity:var(--newIn,0);
}
/* what actually took Wednesday — arrives after the plan has re-laid out */
.wk__chip--new{opacity:var(--newIn,0)}
.wk__chip--new b{
  background:color-mix(in srgb,rgba(52,168,101,.20) calc(var(--d) * 100%),rgba(38,150,86,.15));
  color:color-mix(in srgb,#7fd6a4 calc(var(--d) * 100%),#1f7346);
}
.wk__chip:nth-child(6){top:calc(2 * clamp(58px,5.1vw,74px))}

/* ── Deadlines : the locked screen ────────────────────────────────────────
   The pin holds headline and window together on one viewport for the whole
   passage. Two full-bleed faces are stacked inside it — identical content,
   one in daylight and one at night — and the night face is clipped by a
   single moving edge. That edge is what carries the mode change: the window
   is genuinely a dark window behind it, not a lit one under a veil.        */

.hsec--split{padding-block:0;height:calc(100svh + 230svh)}
.sp__pin{position:sticky;top:0;height:100svh;overflow:hidden}
/* -1px of bleed at the bottom: the pin's edge is where this meets the next
   section, and a subpixel gap there shows as a hairline */
.sp__face{position:absolute;inset:0 0 -1px 0;display:grid;place-items:center;isolation:isolate}
/* Both faces are EXACTLY the flat colour of what follows them — cream above,
   page-night below. Any gradient lives in .sp__glow, which is inset and
   feathered to nothing, so the section join can never show a tonal step. */
.sp__face--light{background:#fdf5ec}
.sp__face--dark{
  background:#0c0b10;
  clip-path:inset(0 calc((1 - var(--wipe,0)) * 100%) 0 0);
}
.sp__glow{
  position:absolute;left:0;right:0;top:8%;bottom:14%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 42%, rgba(58,56,84,.5) 0%, rgba(30,29,45,.22) 46%, rgba(12,11,16,0) 78%);
}
/* each face carries its own mode outright — the tokens are resolved on :root
   against the page-wide --d, so a face has to restate them, not re-scale it */
.sp__face--light{
  --surf:#fffdfb;--surf2:#f6efe6;--ink:#1c1512;--ink2:#857a70;
  --line:rgba(28,21,18,.11);--accSoft:rgba(232,100,28,.13);
}
.sp__face--dark{
  --surf:#17161f;--surf2:#201f2a;--ink:#f5f2ef;--ink2:#9c98a6;
  --line:rgba(255,255,255,.11);--accSoft:rgba(232,100,28,.22);
}
.sp__face--light .win{box-shadow:0 44px 100px -46px rgba(92,38,6,.42)}
.sp__face--dark  .win{box-shadow:0 44px 110px -50px rgba(0,0,0,.9)}
.sp__face--light .cube{opacity:calc(var(--o,.5) * .9)}
.sp__face--dark  .cube{opacity:calc(var(--o,.5) * .5)}

.sp__inner{
  position:relative;z-index:2;
  width:min(100%,940px);padding-inline:var(--pad);
  padding-top:clamp(74px,7vw,104px);
}
/* held in place for the whole passage — it never scrolls away from the window */
.sp__ttl2{
  font-size:clamp(1.6rem,3.15vw,3.05rem);
  margin-bottom:clamp(24px,2.6vw,42px);
}

/* ── Deadline → sessions ─────────────────────────────────────────────────── */

.sp__head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,1.7vw,26px)}
.sp__pill{
  font-size:clamp(10.5px,.76vw,12.5px);font-weight:500;
  padding:6px 12px;border-radius:var(--pill);
  background:var(--accent);color:#fff;white-space:nowrap;
}
.sp__ttl{margin:0;font-size:clamp(1.05rem,1.5vw,1.5rem);letter-spacing:-.028em;color:var(--ink)}
.sp__fan{display:grid;gap:clamp(6px,.6vw,9px);--p:0}
.sp__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,1.3vw,20px);
  padding:clamp(10px,1.02vw,15px) clamp(15px,1.4vw,22px);
  border-radius:calc(var(--winR) * .62);
  background:var(--surf2);
  /* each row lifts out of the deadline above it, one after the next */
  --lag:clamp(0, calc((var(--p) - var(--i) * .13) * 4.2), 1);
  opacity:var(--lag);
  translate:0 calc((1 - var(--lag)) * -22px);
  scale:calc(.965 + var(--lag) * .035);
}
.sp__d{
  font-size:clamp(10.5px,.76vw,12.5px);color:var(--ink2);
  width:3.1em;font-variant-numeric:tabular-nums;
}
.sp__row b{font-weight:400;font-size:clamp(.88rem,1.02vw,1.08rem);color:var(--ink);letter-spacing:-.012em}
.sp__m{font-size:clamp(10.5px,.76vw,12.5px);color:var(--ink2);font-variant-numeric:tabular-nums}

/* ── Focus ────────────────────────────────────────────────────────────────── */

.hsec--focus .hsec__ui{justify-self:end;width:min(100%,600px)}
.fz{display:grid;justify-items:center}
.fz__dial{position:relative;width:min(100%,clamp(210px,20vw,290px));aspect-ratio:1}
.fz__dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.fz__trk{fill:none;stroke:var(--surf2);stroke-width:9}
.fz__arc{
  fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:540.35;stroke-dashoffset:540.35;
  transition:stroke-dashoffset .3s linear;
}
.fz__read{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fz__time{
  margin:0;font-size:clamp(2.1rem,3.4vw,3.1rem);font-weight:400;
  letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.fz__foc{margin:4px 0 0;font-size:clamp(10.5px,.78vw,12.5px);color:var(--ink2)}

.fz__ctl{display:flex;gap:10px;margin-top:clamp(20px,2vw,30px)}
.fz__go,.fz__rs{
  height:clamp(42px,3.1vw,50px);padding-inline:clamp(22px,2vw,34px);
  border:0;border-radius:var(--pill);cursor:pointer;
  font-family:inherit;font-size:clamp(.82rem,.94vw,.96rem);font-weight:500;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.fz__go{background:var(--accent);color:#fff}
.fz__rs{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.fz__go:hover,.fz__rs:hover{transform:translateY(-1px)}
.fz__rs:hover{color:var(--ink)}

.fz__dur{display:flex;gap:6px;margin-top:clamp(16px,1.6vw,24px)}
.fz__dur button{
  border:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:inherit;font-size:clamp(10.5px,.76vw,12.5px);color:var(--ink2);
  padding:7px 14px;border-radius:var(--pill);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.fz__dur button.is-on{color:var(--ink);border-color:color-mix(in srgb,rgba(255,255,255,.34) calc(var(--d) * 100%),rgba(28,21,18,.3))}

.fz__grow{display:flex;align-items:center;gap:12px;width:100%;margin-top:clamp(22px,2.2vw,32px)}
.fz__bar{flex:1;height:6px;border-radius:99px;background:var(--surf2);overflow:hidden}
.fz__bar span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s linear}
.fz__meta{margin:0;font-size:clamp(10.5px,.76vw,12px);color:var(--ink2)}

/* ── Close ────────────────────────────────────────────────────────────────── */

.hsec--end{padding-block:clamp(120px,16vw,240px)}
.hend__in{position:relative;z-index:2;display:grid;justify-items:center;padding-inline:var(--pad)}

/* ── Hero arrival ─────────────────────────────────────────────────────────
   Same cadence as the homepage settle: the field, the geometry, then the copy
   line by line, then the window. Gated on .js-h so that if the script never
   runs the hero is simply already there. */

.js-h .hhero__field,
.js-h .hgeo--hero,
.js-h .hhero__scrim,
.js-h .hhero__copy > *,
.js-h .hhero__ui{opacity:0}
.js-h .hhero__copy > *{translate:0 20px}
.js-h .hhero__ui{translate:0 34px}
.js-h .hgeo--hero{scale:1.035}

.hhero__field,.hgeo--hero,.hhero__scrim,.hhero__copy > *,.hhero__ui{
  transition:opacity 1.05s var(--ease-out),translate 1.05s var(--ease-out),scale 1.6s var(--ease-out);
}
.hz-run .hhero__field{opacity:1}
.hz-run .hgeo--hero{opacity:1;scale:1;transition-delay:.14s}
.hz-run .hhero__scrim{opacity:1;transition-delay:.30s}
.hz-run .hhero__copy > *,
.hz-run .hhero__ui{opacity:1;translate:0 0}
.hz-run .hhero__copy > *:nth-child(1){transition-delay:.30s}
.hz-run .hhero__copy > *:nth-child(2){transition-delay:.38s}
.hz-run .hhero__copy > *:nth-child(3){transition-delay:.48s}
.hz-run .hhero__copy > *:nth-child(4){transition-delay:.58s}
.hz-run .hhero__ui{transition-delay:.46s}

/* ── Entrance ─────────────────────────────────────────────────────────────
   Only ever applied when the script is alive: without .js-h everything is
   already in its finished state, so a stale or failed script cannot leave a
   section blank.                                                            */

.js-h .hreveal{opacity:0;translate:0 18px}
.hreveal{transition:opacity .9s var(--ease-out),translate .9s var(--ease-out)}
.hreveal.is-in{opacity:1;translate:0 0}

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width:940px){
  .hhero__in,
  .hsec__in--left,.hsec__in--right{grid-template-columns:minmax(0,1fr)}
  .hhero__in{padding-top:clamp(108px,24vw,150px);gap:clamp(38px,7vw,60px)}
  .hhero__copy{max-width:none}
  .hhero__ui,.hsec--focus .hsec__ui{justify-self:stretch;width:100%}
  /* copy first in every band, regardless of which side the window takes on
     desktop — the alternation is a wide-screen idea only */
  .hsec__in--left .hsec__copy {order:-1}
  .hsec--focus .hsec__in{gap:clamp(30px,6vw,48px)}
}

/* A seventh of a phone is ~37px, which no horizontal label survives. Turning
   the chip into its column keeps every word intact and the sideways reflow
   still reads as a step to the right. */
@media (max-width:700px){
  .wk__chip b{
    writing-mode:vertical-rl;
    min-height:clamp(98px,27vw,124px);
    padding:10px 6px;
  }
  .wk__track{height:clamp(320px,88vw,392px)}
  .wk__chip:nth-child(2),.wk__chip:nth-child(4){top:clamp(106px,29vw,132px)}
  .wk__chip:nth-child(5){top:calc(2 * clamp(106px,29vw,132px))}
}

@media (max-width:560px){
  .tw__list li{grid-template-columns:auto 1fr;row-gap:6px}
  .tw__min{grid-column:2;justify-self:start}
  .sp__row{grid-template-columns:auto 1fr;row-gap:4px}
  .sp__m{grid-column:2}
}

@media (prefers-reduced-motion:reduce){
  .js-h .hreveal{opacity:1;translate:none}
  .js-h .hhero__field,.js-h .hgeo--hero,.js-h .hhero__scrim,
  .js-h .hhero__copy > *,.js-h .hhero__ui{opacity:1;translate:none;scale:none}
  .fz__arc{transition:none}
}

/* ══ 05 · FOREST / PROGRESS ═══════════════════════════════════════════════
   A pinned 100vh sequence. --g (0…1) is the growth of the whole scene and is
   a pure function of scroll: the canvas reads it, the copy reads it, and the
   page's own --d is driven from it, which is how the section hands over to
   the cream theme the closing section already renders in.                  */

.fr{
  position:relative;z-index:5;
  height:calc(100svh + 340svh);
  --g:0;
}
.fr__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
/* the sun's light leaving the window and spilling over the page itself —
   it climbs and swells with the disc inside the scene */
.fr__spill{
  position:absolute;left:50%;z-index:0;pointer-events:none;
  top:calc(78% - var(--g,0) * 34%);
  width:calc(120% + var(--g,0) * 60%);aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(closest-side,
    rgba(255,226,168,calc(.20 + var(--g,0) * .34)) 0%,
    rgba(255,220,170,calc(.07 + var(--g,0) * .16)) 42%,
    rgba(255,220,170,0) 72%);
}

.fr__in{
  position:relative;z-index:2;width:min(100%,1140px);
  padding:clamp(76px,7.5vw,112px) var(--pad) clamp(22px,3vw,44px);
  display:grid;justify-items:center;
}
.fr__eyebrow{
  margin:0 0 clamp(10px,1.1vw,16px);
  font-size:clamp(10px,.76vw,12px);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:#6f95e2;
}

/* every line occupies the same grid cell, so the swap never nudges the window */
.fr__lines{display:grid;margin-bottom:clamp(22px,2.6vw,40px)}
.fr__line{
  grid-area:1/1;margin:0;text-align:center;white-space:nowrap;
  font-size:clamp(1.5rem,3.05vw,2.95rem);line-height:1.1;
  letter-spacing:-.035em;font-weight:400;
  /* white while the forest is dark, ink once the day arrives */
  color:color-mix(in srgb,#131a2c calc(var(--g,0) * 100%),#f4f6fb);
  opacity:var(--o,0);
  translate:0 calc((1 - var(--o,0)) * 9px);
}
.fr__line em{font-style:normal;color:#6f95e2}

.win--forest{width:min(100%,1080px)}
.win__body--flush{padding:0;line-height:0}
/* the frames' own ratio (1400×780), so the canvas fills the window body
   exactly — nothing letterboxed, cropped or stretched */
#frCanvas{display:block;width:100%;aspect-ratio:1400/780;border-radius:0;background:#0f1524}

/* the window chrome follows the light with everything else */
.fr .win{
  --surf : color-mix(in srgb, #17161f calc((1 - var(--g,0)) * 100%), #fffdfb);
  --line : color-mix(in srgb, rgba(255,255,255,.11) calc((1 - var(--g,0)) * 100%), rgba(28,21,18,.12));
  --ink2 : color-mix(in srgb, #9c98a6 calc((1 - var(--g,0)) * 100%), #857a70);
  box-shadow:
    0 46px 110px -46px rgba(0,0,0,calc(.9 * (1 - var(--g,0)))),
    0 46px 100px -46px rgba(120,88,30,calc(.34 * var(--g,0)));
}

@media (max-width:940px){
  .fr{height:calc(100svh + 300svh)}
  .fr__line{font-size:clamp(1.15rem,5vw,1.9rem);white-space:normal}
  .fr__in{padding-top:clamp(70px,15vw,104px)}
}
@media (max-height:760px){
  .fr__in{padding-top:clamp(62px,8vh,86px)}
  .fr__lines{margin-bottom:clamp(14px,2.4vh,26px)}
  .fr__line{font-size:clamp(1.2rem,2.5vw,2.1rem)}
}
@media (prefers-reduced-motion:reduce){
  .fr{height:100svh}
  .fr__pin{position:relative}
}