/* ═══════════════════════════════════════════════════════════════════════
   VERSO — built against lassie.ai, measured rather than guessed

   hero      Lassie's hero measures 1440×900 at left:0 with border-radius:0
             and no transform at every scroll position — dead full bleed.
             Ours starts the same and then draws itself in as you leave it:
             scale down a few per cent, radius out to 30px. No side margins.
   type      Fraunces (variable optical size) for display, Switzer for UI,
             DM Mono for labels — the register ABC Marist + DM Sans holds.
             H1 ~86px at 1440 · H2 ~58px on every section · H3 ~25px.
   motion    Everything scroll-driven is SCRUBBED, never switched. Sampled
             off Lassie: layers ride translateY +30 → -30 across their slice
             while opacity ramps, so two layers are always mid-handover.
   pictures  One register: intentional camera movement over nature, the way
             lassie-pg-1/2/3 are shot. Sampled at 0.20–0.40 saturation, none
             blue-dominant, so the page holds one light the whole way down.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F7F5F0;
  --card:#FFFFFF;
  --sand:#EBE5D8;
  --ink:#191712;
  --soft:rgba(25,23,18,.6);
  --faint:rgba(25,23,18,.38);
  --hair:rgba(25,23,18,.12);
  --clay:#A9542F;
  --deep:#20231C;
  --r:22px;
  --e:cubic-bezier(.22,1,.36,1);
  --gut:clamp(18px,2.6vw,46px);
  --sp:clamp(96px,11vw,210px);
  --p:0;                      /* hero scroll progress, written from JS */
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:Switzer,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}

/* ── type ── */
h1,h2,h3{margin:0;font-family:Fraunces,Georgia,serif;font-weight:300;font-variation-settings:"opsz" 120}
h1{font-size:clamp(2.9rem,6vw,5.4rem);line-height:.96;letter-spacing:-.025em}
h2{font-size:clamp(2.2rem,4.05vw,3.65rem);line-height:1.04;letter-spacing:-.018em}
h3{font-size:clamp(1.35rem,1.74vw,1.56rem);line-height:1.14;letter-spacing:-.012em;font-weight:400}
em{font-style:italic}
p{margin:0}
.ser{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.018em}
.lead{font-size:clamp(1.02rem,1.08vw,1.16rem);line-height:1.52;color:var(--soft);max-width:46ch}
.body{font-size:1rem;line-height:1.56;color:var(--soft);max-width:40ch}
.mono{font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
section{padding:var(--sp) 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-size:.97rem;font-weight:500;padding:.88rem 1.55rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;background:var(--ink);color:var(--paper);
  transition:transform .35s var(--e),background .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn.light{background:#fff;color:var(--ink)}

/* ── nav ── */
.navrow{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:center;
  padding:clamp(14px,1.6vw,22px);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:3px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:padding .5s var(--e),background .5s var(--e),border-color .5s var(--e),box-shadow .5s var(--e)}
body.past-hero .nav{padding:3px;background:rgba(255,255,255,.92);border-color:rgba(25,23,18,.07);
  box-shadow:0 18px 40px -30px rgba(25,23,18,.8)}
.nav .brand,.nav a.l,.nav .go{transition:padding .5s var(--e),font-size .5s var(--e),
  background .3s var(--e),color .3s var(--e),transform .3s var(--e)}
body.past-hero .nav .brand{font-size:1rem;padding:.4rem .82rem}
body.past-hero .nav .brand svg{width:14px;height:14px}
body.past-hero .nav a.l{font-size:.83rem;padding:.42rem .76rem}
body.past-hero .nav .go{font-size:.83rem;padding:.42rem .9rem}
.navrow{transition:padding .5s var(--e)}
body.past-hero .navrow{padding:clamp(10px,1vw,14px)}
.nav .brand{display:flex;align-items:center;gap:9px;padding:.5rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--ink);font-family:Fraunces,serif;font-weight:400;
  font-size:1.14rem;line-height:1;letter-spacing:-.02em}
.nav .brand svg{width:16px;height:16px}
.nav a.l{padding:.52rem 1rem;border-radius:999px;color:rgba(255,255,255,.88);font-size:.9rem;
  transition:background .3s var(--e),color .3s var(--e)}
.nav a.l:hover{background:rgba(255,255,255,.18)}
body.past-hero .nav a.l{color:var(--soft)}
body.past-hero .nav a.l:hover{color:var(--ink);background:rgba(25,23,18,.05)}
.nav .go{padding:.52rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);
  font-size:.9rem;font-weight:500;transition:transform .3s var(--e)}
.nav .go:hover{transform:translateY(-1px)}
@media(max-width:880px){.nav a.l{display:none}}

/* ── 01 hero — full bleed, then it draws itself in ─────────────────── */
.hero{position:relative;height:100svh;overflow:clip}
.stage{position:absolute;inset:0;overflow:hidden;background:#211D18;
  border-radius:calc(var(--p) * 30px);
  transform:scale(calc(1 - var(--p) * .05));
  transform-origin:50% 42%;
  will-change:transform,border-radius}
.film{position:absolute;inset:0;overflow:hidden;z-index:0}
.film img{width:100%;height:100%;object-fit:cover;object-position:50% 31%;
  filter:saturate(.95);will-change:transform}
.shade{position:absolute;inset:0;z-index:1;
  background:radial-gradient(116% 76% at 50% 50%,rgba(18,15,11,.36) 0%,rgba(18,15,11,.06) 70%,transparent 100%),
             linear-gradient(180deg,rgba(18,15,11,.42) 0%,rgba(18,15,11,.07) 34%,rgba(18,15,11,.58) 100%)}
.hero-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.hero-in h1{color:#fff;max-width:17ch;text-shadow:0 2px 44px rgba(0,0,0,.3)}
.hero-in .sub{margin-top:20px;color:rgba(255,255,255,.86);font-size:1.04rem}
.live{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:.46rem 1rem;
  border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);font-family:"DM Mono",monospace;font-size:.73rem;letter-spacing:.05em;color:#fff}
.live i{width:6px;height:6px;border-radius:50%;background:#A7D98B;display:block;animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.capture-row{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,60px);z-index:3;
  display:flex;justify-content:center;padding:0 var(--gut)}
.capture{display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;width:min(430px,100%);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px)}
.capture input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font-family:inherit;font-size:.98rem;padding:.6rem .95rem}
.capture input::placeholder{color:rgba(255,255,255,.58)}

/* ── 02 marks, on a rail that creeps with the scroll ── */
.marks{padding:clamp(54px,6vw,104px) 0 clamp(30px,3vw,56px);overflow:clip}
.marks p{text-align:center}
.rail{display:flex;gap:clamp(34px,4.4vw,78px);margin-top:30px;width:max-content;will-change:transform}
.rail span{font-family:Fraunces,serif;font-weight:300;font-size:clamp(1.3rem,1.9vw,1.95rem);
  color:rgba(25,23,18,.3);white-space:nowrap;transition:color .4s var(--e)}
.rail span:hover{color:var(--ink)}

/* ── 03 what it does — editorial rows, not a card grid ─────────────── */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,110px);
  align-items:center;padding:clamp(44px,5.4vw,96px) 0;border-top:1px solid var(--hair)}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .txt{max-width:30rem}
.row .n{display:block;margin-bottom:clamp(18px,2vw,30px)}
.row h3{margin-top:0;max-width:16ch}
.row .body{margin-top:14px}
.row .shot{overflow:hidden;border-radius:var(--r);background:var(--sand)}
.row .shot img{width:100%;aspect-ratio:7/5;object-fit:cover;will-change:transform}
.row:nth-child(even) .txt{order:2}
.row:nth-child(even) .shot{order:1}
@media(max-width:860px){
  .row{grid-template-columns:1fr;gap:26px;padding:clamp(40px,8vw,64px) 0}
  .row:nth-child(even) .txt{order:2}.row:nth-child(even) .shot{order:1}
}

/* ── 04 how it works — the pinned scene ── */
.scene{padding:0}
.scene-track{position:relative}
.scene-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.scene-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7fr);
  gap:clamp(26px,4vw,84px);align-items:center;width:100%}
.scene-copy{position:relative;min-height:clamp(250px,21vw,300px)}
.scene-copy .step{position:absolute;inset:0;opacity:0;will-change:opacity,transform;pointer-events:none}
.scene-copy .step.on{pointer-events:auto}
.scene-copy .n{color:var(--clay);display:block;margin-bottom:18px}
.scene-copy h3{max-width:17ch}
.scene-copy .body{margin-top:16px}
.step .shot{display:none}
.scene-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--sand)}
.scene-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity,transform}
.scene-rail{display:flex;gap:7px;margin-top:34px;max-width:300px}
.scene-rail i{flex:1;height:2px;background:var(--hair);border-radius:2px;overflow:hidden;display:block}
.scene-rail i b{display:block;height:100%;width:0;background:var(--ink)}
@media(max-width:900px){
  .scene-pin{position:static;height:auto;padding:var(--sp) 0}
  .scene-grid{grid-template-columns:1fr;gap:26px}
  .scene-copy{min-height:0;display:grid;gap:clamp(44px,9vw,64px)}
  .scene-copy .step{position:static;opacity:1!important;transform:none!important}
  .scene-media,.scene-rail{display:none}
  .step .shot{display:block;border-radius:var(--r);overflow:hidden;margin-bottom:22px}
  .step .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
}

/* ── 05 search — a dark full-bleed moment ── */
.find{background:var(--deep);color:#F2F0EA}
.find h2,.find .mono{color:#F2F0EA}
.find .mono{opacity:.42}
.find .lead{color:rgba(242,240,234,.6)}
.field{display:flex;align-items:center;gap:14px;margin-top:clamp(34px,4vw,60px);
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);border-radius:999px;
  background:rgba(242,240,234,.07);border:1px solid rgba(242,240,234,.16)}
.field svg{width:17px;height:17px;flex:none;opacity:.5}
.field .q{flex:1;min-width:0;font-family:Fraunces,serif;font-weight:300;
  font-size:clamp(1.1rem,1.9vw,1.75rem);letter-spacing:-.018em;white-space:nowrap;overflow:hidden}
.caret{display:inline-block;width:2px;height:1em;background:var(--clay);vertical-align:-.14em;
  animation:bl 1.05s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.hits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,20px);margin-top:clamp(20px,2.4vw,34px)}
.hit{opacity:.26;transition:opacity .6s var(--e),transform .6s var(--e)}
.hit img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;filter:grayscale(1);
  transition:filter .6s var(--e)}
.hit.on{opacity:1;transform:translateY(-6px)}
.hit.on img{filter:none}
.hit .m{display:flex;justify-content:space-between;gap:8px;margin-top:12px;
  font-family:"DM Mono",monospace;font-size:.72rem;color:rgba(242,240,234,.42)}
.hit.on .m b{color:#F2F0EA;font-weight:500}
@media(max-width:760px){.hits{grid-template-columns:repeat(2,1fr)}}

/* ── 06 what it wrote — the one idea, made literal ── */
.wrote{background:var(--sand)}
.wrote-head{max-width:820px}
.wrote-head .mono{display:block;margin-bottom:22px}
.wrote-head h2 em{font-family:"DM Mono",ui-monospace,monospace;font-style:normal;
  font-size:.56em;letter-spacing:-.01em;color:var(--faint);vertical-align:.14em}
.wrote-head .lead{margin-top:26px}
.wrote-list{margin-top:clamp(42px,5vw,84px);border-top:1px solid rgba(25,23,18,.15)}
.wr{display:grid;grid-template-columns:clamp(52px,4.6vw,70px) minmax(132px,190px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,44px);align-items:center;
  padding:clamp(17px,1.9vw,26px) 0;border-bottom:1px solid rgba(25,23,18,.15)}
.wr .t{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover}
.wr .f{font-family:"DM Mono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.02em;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr .s{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.015em;
  font-size:clamp(1.02rem,1.5vw,1.46rem);line-height:1.28;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--e) .12s}
.wr.in .s{clip-path:inset(0 -2px 0 0)}
.wr.wr-live .s{clip-path:none;transition:none}
.wr.wr-live .f{color:var(--clay)}
@media(max-width:720px){
  .wr{grid-template-columns:clamp(46px,12vw,58px) minmax(0,1fr);gap:14px 16px;align-items:start}
  .wr .f{align-self:center}
  .wr .s{grid-column:1 / -1}
}

/* ── 07 the figure, with the work drifting past ── */
.figure-scene{position:relative;overflow:clip;text-align:center;min-height:100svh;
  display:grid;align-items:center}
.fig-h{position:relative;z-index:2}
.fig-h b{display:block;font-family:Fraunces,serif;font-weight:300;font-variation-settings:"opsz" 144;
  font-size:clamp(4.6rem,12vw,11rem);line-height:.86;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fig-h span{display:block;margin:22px auto 0;font-family:Fraunces,serif;font-weight:300;
  font-size:clamp(1.4rem,2.8vw,2.5rem);line-height:1.14;letter-spacing:-.018em;max-width:20ch}
.drift{position:absolute;inset:-4% 0;z-index:1;pointer-events:none}
.drift .d{position:absolute;will-change:transform,opacity}
.drift .shot{display:block;border-radius:14px;overflow:hidden;background:#fff;padding:5px;
  box-shadow:0 30px 56px -36px rgba(25,23,18,.62)}
.drift .shot img{border-radius:10px;width:100%;object-fit:cover}
.drift .chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--hair);
  border-radius:12px;padding:10px 15px;font-family:"DM Mono",monospace;font-size:.71rem;color:var(--soft);
  box-shadow:0 22px 44px -32px rgba(25,23,18,.7);white-space:nowrap}
.drift .chip i{width:7px;height:7px;border-radius:50%;background:var(--clay);flex:none}
.drift .chip.ok i{background:#7FA96B}
.drift .d1{left:3%;top:11%;width:clamp(104px,11vw,176px)}
.drift .d1 .shot img{aspect-ratio:4/5}
.drift .d2{left:10%;top:57%}
.drift .d3{left:5%;top:73%;width:clamp(92px,9vw,144px)}
.drift .d3 .shot img{aspect-ratio:1/1}
.drift .d4{right:3%;top:13%;width:clamp(108px,11.4vw,182px)}
.drift .d4 .shot img{aspect-ratio:3/4}
.drift .d5{right:9%;top:61%}
.drift .d6{right:5%;top:71%;width:clamp(96px,9.4vw,152px)}
.drift .d6 .shot img{aspect-ratio:4/3}
@media(max-width:1040px){.drift .d2,.drift .d5{display:none}}
@media(max-width:640px){.drift .d3,.drift .d6{display:none}}

/* ── 07 the quote, full bleed ── */
.plate{position:relative;height:min(960px,86svh);overflow:hidden;display:flex;align-items:flex-end}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:transform}
.plate::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(18,15,11,.78),rgba(18,15,11,.02) 62%)}
.plate .in{position:relative;z-index:2;color:#fff;max-width:min(760px,52vw);
  padding:0 var(--gut) clamp(34px,4.4vw,78px)}
@media(max-width:860px){.plate .in{max-width:none;padding-right:clamp(40px,12vw,90px)}}
.plate .who{margin-top:22px;color:rgba(255,255,255,.72)}

/* ── 08 faq ── */
.faq{max-width:920px;margin:clamp(36px,4vw,64px) auto 0}
.qa{border-bottom:1px solid var(--hair)}
.qa:first-child{border-top:1px solid var(--hair)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:none;border:0;cursor:pointer;text-align:left;padding:30px 0;
  font-family:Fraunces,serif;font-weight:300;font-size:clamp(1.2rem,1.62vw,1.66rem);
  letter-spacing:-.018em;transition:color .3s var(--e)}
.qa button:hover{color:var(--soft)}
.qa .ico{position:relative;width:15px;height:15px;flex:none}
.qa .ico::before,.qa .ico::after{content:"";position:absolute;left:0;top:7px;width:15px;height:1.5px;
  background:currentColor;transition:transform .45s var(--e)}
.qa .ico::after{transform:rotate(90deg)}
.qa.open .ico::after{transform:rotate(0)}
.qa .a{height:0;overflow:hidden;transition:height .55s var(--e)}
.qa .a p{padding:0 56px 32px 0;color:var(--soft);max-width:64ch}

/* ── 09 the close + footer ─────────────────────────────────────────
   The closing section is the product doing its job once more rather than a
   pitch: a real drop target that describes a frame when you give it one. */
.end{position:relative;overflow:clip;background:var(--paper);color:var(--ink);
  text-align:center;padding:clamp(96px,11vw,200px) 0 clamp(60px,6vw,96px)}
.end-in{position:relative;z-index:1}
.end .mono{display:block;color:var(--faint);margin-bottom:26px}
.end h2{color:var(--ink);max-width:17ch;margin:0 auto}
.end .lead{margin:24px auto 0;text-align:center;max-width:46ch}

.drop{position:relative;display:grid;place-items:center;isolation:isolate;
  width:min(680px,100%);min-height:clamp(168px,17vw,208px);margin:clamp(38px,4.2vw,58px) auto 0;
  border:1px dashed rgba(25,23,18,.26);border-radius:var(--r);background:var(--card);cursor:pointer;
  transition:border-color .4s var(--e),background .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e)}
.drop:hover,.drop:focus-visible,.drop.reading{border-color:transparent;background:var(--card);
  transform:translateY(-3px);box-shadow:0 34px 64px -44px rgba(25,23,18,.6)}
.drop.reading{border-style:solid;border-color:var(--hair)}
.drop>*{grid-area:1/1;transition:opacity .45s var(--e),transform .45s var(--e)}

.drop-idle{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 24px}
.drop-idle svg{width:30px;height:30px;color:var(--faint);transition:color .4s var(--e)}
.drop:hover .drop-idle svg{color:var(--clay)}
.drop-say{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.6vw,1.5rem)}
.drop-hint{color:var(--faint)}
.drop.reading .drop-idle{opacity:0;transform:translateY(-10px);pointer-events:none}

.drop-live{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,22px);
  padding:0 clamp(24px,3vw,40px);opacity:0;transform:translateY(10px);pointer-events:none;
  text-align:left;width:100%}
.drop.reading .drop-live{opacity:1;transform:none}
.drop-live img{width:clamp(66px,7vw,92px);aspect-ratio:1;border-radius:13px;object-fit:cover;flex:none}
.drop-meta{display:flex;flex-direction:column;gap:9px;min-width:0;max-width:30ch}
.drop-meta b{color:var(--clay);font-weight:400}
.drop-meta s{text-decoration:none;font-family:Fraunces,Georgia,serif;font-weight:300;
  letter-spacing:-.015em;font-size:clamp(1rem,1.45vw,1.34rem);line-height:1.26}
.drop-live .caret{margin-left:-6px;vertical-align:-.1em}

.bigfield{display:flex;align-items:center;gap:14px;margin:clamp(30px,3.4vw,46px) auto 0;
  width:min(520px,100%);border-bottom:1px solid rgba(25,23,18,.24);padding:0 2px 13px;
  transition:border-color .35s var(--e)}
.bigfield:focus-within{border-color:var(--ink)}
.bigfield input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font-family:inherit;font-size:clamp(1rem,1.3vw,1.2rem);padding:6px 0}
.bigfield input::placeholder{color:var(--faint)}
.bigfield button{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:var(--ink);font-size:clamp(.95rem,1.2vw,1.08rem);font-weight:500;white-space:nowrap;
  transition:transform .3s var(--e)}
.bigfield button:hover{transform:translateX(3px)}
.bigfield button svg{width:16px;height:16px}
.end-note{margin-top:26px;color:var(--faint)}
@media(max-width:620px){
  .drop-live{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
  .drop-meta s{font-size:1rem}
}
footer{padding:clamp(56px,6vw,104px) 0 38px}
.fg{display:grid;grid-template-columns:2.2fr repeat(3,1fr);gap:clamp(26px,3vw,48px)}
.fg h4{margin:0 0 16px}
.fg ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fg li a{color:var(--soft);display:inline-block;transition:color .3s var(--e),transform .3s var(--e)}
.fg li a:hover{color:var(--ink);transform:translateX(3px)}
.fmark{display:inline-flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:400;
  font-size:1.45rem;letter-spacing:-.02em;margin-bottom:16px}
.fmark svg{width:18px;height:18px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--hair);
  padding-top:26px;margin-top:clamp(48px,5vw,84px)}
@media(max-width:780px){.fg{grid-template-columns:1fr 1fr}}

/* ── reveals ── */
.rise{display:block;overflow:hidden}
.rise>span{display:block;transform:translateY(108%);transition:transform 1.05s var(--e)}
.rise.in>span{transform:none}
.rise.late>span{transition-delay:.11s}
.up{opacity:0;transform:translateY(26px);transition:opacity .95s var(--e),transform .95s var(--e)}
.up.in{opacity:1;transform:none}
.up.l1{transition-delay:.1s}.up.l2{transition-delay:.2s}.up.l3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .up{opacity:1;transform:none;transition:none}
  .rise>span{transform:none;transition:none}
  .caret,.live i{animation:none}
  .stage{transform:none;border-radius:0}
  .scene-pin{position:static;height:auto;padding:var(--sp) 0}
  .scene-copy{min-height:0;display:grid;gap:54px}
  .scene-copy .step{position:static;opacity:1!important;transform:none!important}
  .scene-media,.scene-rail{display:none}
  .step .shot{display:block;border-radius:var(--r);overflow:hidden;margin-bottom:22px}
  .step .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .drift .d{opacity:1!important;transform:none!important}
}