@font-face{
  font-family:'Holtzman Textured';
  src:url('fonts/Holtzman-Textured.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
/* fallback only — Holtzman has no arrow/dash glyphs, those fall through to this */
@font-face{
  font-family:'Holtwood One SC';
  src:url('fonts/HoltwoodOneSC.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --cream:#FBF5D5;
  --bark:#4A4133;
  --rust:#A8412A;
  --ink:#14110C;
  --flame:#E0883C;
  --holt:'Holtzman Textured', 'Holtwood One SC', 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--ink);
  color:var(--cream);
  /* Georgia first, not 'Iowan Old Style' — that's Mac-only and forces every
     other OS into a substitution fallback that isn't guaranteed consistent
     from one browser paint to the next. Georgia ships on effectively every
     platform, so every section's body copy resolves the same way. */
  font-family:Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------- LOADER ---------------- */
.loader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.done{opacity:0; visibility:hidden}
.loader__inner{text-align:center; width:min(360px,72vw)}
.loader__mark{
  font-family:var(--holt); font-size:clamp(22px,4vw,34px);
  letter-spacing:.22em; color:var(--cream); opacity:.9;
}
.loader__bar{
  margin:22px 0 26px; height:2px; background:rgba(251,245,213,.18); overflow:hidden;
}
.loader__bar span{display:block; height:100%; width:0%; background:var(--rust); transition:width .3s linear}
.loader__count{
  font-family:var(--holt); font-size:9px; letter-spacing:.28em;
  opacity:.45; margin:-14px 0 22px;
}
.loader__btn{
  font-family:var(--holt); font-size:12px; letter-spacing:.3em;
  background:none; border:1px solid rgba(251,245,213,.35); color:var(--cream);
  padding:14px 30px; cursor:pointer; opacity:.35; pointer-events:none;
  transition:opacity .4s, background .4s, color .4s;
}
.loader__btn.ready{opacity:1; pointer-events:auto}
.loader__btn.ready:hover{background:var(--cream); color:var(--ink)}

/* ---------------- STAGE ---------------- */
.stage{
  position:fixed; inset:0; z-index:1;
  overflow:hidden; background:#000;
}
#gl{position:absolute; inset:0; width:100%; height:100%; display:block}
.sources{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden}
.sources video{width:1px; height:1px}

.stage__grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.055; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-2%)}}

/* ---------------- SCENE OVERLAYS ---------------- */
.scene{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(22px,4.5vh,52px) clamp(20px,4vw,64px);
  padding-bottom:clamp(60px,9vh,90px);
  pointer-events:none;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.scene--center{justify-content:space-between}

.row{display:flex; justify-content:space-between; align-items:baseline; gap:clamp(10px,3vw,40px); width:100%}
.row--top{padding-top:clamp(6px,2vh,18px)}
.row--bottom{align-items:flex-end}
.scene--center .row--bottom{justify-content:center}
.scene--center .row--top{justify-content:center; gap:clamp(18px,6vw,80px)}

/* ---------------- TOP NAV — persistent chrome, same layer as .hud ---------------- */
.topnav{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(18px,3.4vh,30px) clamp(20px,4vw,64px);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
/* persistent warm scrim behind the header — always visible (not tied to
   any scene's [data-win]) since the nav sits above every scene at z-index:5 */
.topnav::before{
  content:''; position:absolute; top:-4vh; left:-6vw; right:-6vw; height:20vh;
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(74,65,51,.5) 0%, rgba(74,65,51,.22) 55%, rgba(74,65,51,0) 100%);
}
.topnav__mark{
  font-family:var(--holt); font-size:clamp(14px,1.35vw,19px);
  letter-spacing:.14em; color:var(--cream);
}
.topnav__links{display:flex; gap:clamp(14px,2.6vw,36px)}
.topnav__links a{
  font-family:var(--holt); font-size:clamp(9px,.82vw,11px);
  letter-spacing:.2em; color:var(--cream); opacity:.85;
  text-decoration:none; transition:opacity .3s;
}
.topnav__links a:hover{opacity:1}

/* scene 1: everything — headline, tagline, subcopy, cta — in one left-aligned
   block that enters as a single beat, no sequential scroll reveal.
   .hero itself only positions the block within the frame; .hero-card
   (below) is the actual dark, blurred backdrop that sits behind the text
   so it stays legible over busy/bright footage. */
.hero{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:clamp(84px,13vh,124px) clamp(20px,4vw,64px);
}
/* only the scene-1 hero beat has a trust bar sibling to clear at the bottom.
   Bottom padding is intentionally smaller than top so the centered block
   sits a bit lower in the frame, not dead-center. */
.hero--trust{padding-top:clamp(64px,9vh,96px); padding-bottom:clamp(110px,15vh,150px)}
/* soft dark pool behind the text, not a visible card — fades edge to
   transparent so there's no hard rectangle, and fades in/out with its
   beat exactly like every other element (bug fixed: previously this had
   no opacity gating at all, so every scene's card rendered at once) */
.hero-card{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(4px,.8vh,10px);
  text-align:left; line-height:.86;
  max-width:min(640px,88vw);
  padding:clamp(20px,3.2vw,32px);
}
.hero-card::before{
  content:''; position:absolute; inset:-10% -12%; z-index:-1;
  background:radial-gradient(ellipse 75% 70% at 25% 45%, rgba(10,8,6,.22) 0%, rgba(10,8,6,.11) 45%, rgba(10,8,6,0) 74%);
  opacity:0; transition:opacity 1.1s var(--ease);
}
.grp.in .hero-card::before{opacity:1}
.grp.out .hero-card::before{opacity:0; transition-duration:.5s}
/* scene 1 only — darker scrim behind the hero text than every other scene */
.scene[data-scene="0"] .hero-card::before{
  background:radial-gradient(ellipse 75% 70% at 25% 45%, rgba(10,8,6,.5) 0%, rgba(10,8,6,.28) 45%, rgba(10,8,6,0) 74%);
}
/* the extra margin here (on top of .hero's own gap) is what separates the
   big display headline from the smaller body copy below it — the headline's
   own lines stay tight on .hero's base gap alone */
.hero-tag{display:block; margin-top:clamp(16px,2.2vh,26px); line-height:1.6}
.hero-sub{
  font-size:clamp(14px,1.4vw,19px); line-height:1.4; opacity:.88;
  max-width:46ch;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:.55em;
  margin-top:clamp(10px,1.4vh,18px);
  padding:.9em 1.7em;
  background:transparent; color:var(--flame);
  font-family:var(--holt); font-size:clamp(11px,1vw,13px);
  letter-spacing:.14em; text-decoration:none;
  border:1.5px solid var(--flame); border-radius:999px; pointer-events:auto; cursor:pointer;
  transition:background .3s, color .3s, transform .3s, border-color .3s;
}
.hero-cta:hover{background:var(--flame); color:var(--ink); transform:translateY(-1px)}
.hero-cta .arw{margin-left:0}
/* non-interactive variant — "EXPLORE ↓" is a scroll cue, not a link */
.hero-cta--cue{pointer-events:none; cursor:default}
.hero-cta--cue:hover{background:var(--cream); color:var(--ink); transform:none}

/* scene 1: credibility row, pinned to the very bottom of the frame */
.trust{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2vw,28px);
  padding:clamp(14px,2.4vh,22px) clamp(20px,4vw,64px);
  border-top:1px solid rgba(251,245,213,.18);
  background:linear-gradient(180deg, rgba(20,17,12,0), rgba(20,17,12,.55) 60%);
}
.trust__item{display:flex; align-items:center; gap:clamp(8px,1.2vw,14px)}
.trust__icon{width:clamp(20px,2.2vw,26px); height:clamp(20px,2.2vw,26px); flex:none; color:var(--flame); opacity:.95}
.trust__text{display:flex; flex-direction:column}
.trust__num{font-family:var(--holt); font-size:clamp(12px,1.15vw,16px); letter-spacing:.03em; color:var(--cream)}
.trust__label{font-size:clamp(8.5px,.78vw,10.5px); letter-spacing:.14em; opacity:.65; margin-top:2px}

/* scene 3 beat 1: how it works — three columns on their own layer */
.steps{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  align-content:center; gap:clamp(16px,3.4vw,72px);
  padding:0 clamp(20px,4vw,64px);
}
.steps::before{                      /* scrim: body copy has to beat a bright plate */
  content:''; position:absolute; inset:-20vh -10vw; z-index:-1;
  background:linear-gradient(180deg, rgba(20,17,12,.10), rgba(20,17,12,.66) 55%, rgba(20,17,12,.72));
  opacity:0; transition:opacity 1s var(--ease);
}
.steps.in::before{opacity:1}

.step__num{
  display:grid; place-items:center;
  width:clamp(38px,3.6vw,60px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(251,245,213,.45); background:rgba(251,245,213,.10);
  backdrop-filter:blur(3px);
  font-family:var(--holt); font-size:clamp(12px,1.05vw,17px);
  letter-spacing:.06em; color:var(--cream);
}
.step__title{
  font-family:var(--holt); font-weight:400;
  font-size:clamp(15px,1.75vw,28px); letter-spacing:.03em; line-height:1.05;
  margin:clamp(14px,1.8vh,26px) 0 clamp(8px,1vh,14px);
}
.step__body{
  font-size:clamp(12px,1.02vw,17px); line-height:1.5;
  max-width:32ch; opacity:.88;
}

.head{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(8px,1.6vw,22px); text-align:center;
}
/* staggered three-line lockup: centre / flush left / flush right.
   width:fit-content shrinks the block to its longest line, so the three
   lines rag against each other instead of against the viewport edges. */
.head--lines{
  flex-direction:column; align-items:stretch; flex-wrap:nowrap;
  gap:0; width:fit-content; max-width:100%; margin-inline:auto;
}
.ln--c{text-align:center}
.ln--l{text-align:left}
.ln--r{text-align:right}

/* type */
.w{
  font-family:var(--holt);
  font-size:clamp(12px,1.15vw,17px);   /* textured face needs a little size to read */
  letter-spacing:.34em;
  color:var(--cream); opacity:.92;
}
.n{
  font-family:var(--holt);
  font-size:clamp(30px,6.6vw,104px);
  line-height:.86;
  letter-spacing:.01em;
  color:var(--cream);
}
.n--sm{font-size:clamp(16px,2.6vw,40px); letter-spacing:.12em}
.h{
  font-family:var(--holt);
  font-size:clamp(34px,7.4vw,120px);
  line-height:.9; letter-spacing:.005em;
  color:var(--cream);
}
/* must stay after .h — same specificity, later rule wins */
/* slim companion lines around the bold .h--xl headline — a light sans
   instead of the textured display face, for the thin/heavy contrast */
.h--sm{
  font-family:'Saira Extra Condensed', 'Arial Narrow', var(--sans);
  font-weight:100;
  font-size:max(26px, min(7vw, 8vh));
  letter-spacing:0; line-height:1.15;
}
.h--xl{
  font-size:max(92px, min(22vw, 18.5vh));
  line-height:.78; letter-spacing:.01em;
  /* Holtzman's tight line-height leaves most of its leading above the
     glyphs, not below — pull the block up so the gap to the line above
     matches the gap to the line below */
  margin-top:-.09em;
}
/* FIRE's own bottom leading is nearly zero, so the line right after it
   (scene 1's third headline) needs its own extra breathing room */
.h--xl + .h--sm{margin-top:.5em}
@media (min-width:761px){
  .h--xl{font-size:max(90px, min(20vw, 23vh))}
  /* the mobile floor above is tuned for narrow viewports — on wide desktop
     windows the same vw/vh mix balloons past one line, so cap it back down */
  .h--sm{font-size:max(20px, min(4.5vw, 5.2vh))}
}
.head--lines .ln{
  font-size:max(26px, min(6.6vw, 12vh));
  line-height:.84; letter-spacing:.015em;
  white-space:nowrap;
}
.cta{
  pointer-events:auto; color:var(--cream); text-decoration:none;
  border-bottom:2px solid var(--rust); padding-bottom:.12em;
  transition:color .3s, border-color .3s;
}
.cta:hover{color:var(--rust)}
/* Holtzman has no arrow glyph — set it in the body serif on purpose */
.arw{font-family:Georgia,serif; font-size:.8em; margin-left:.45em; vertical-align:.04em}

/* reveal animations: left / right / middle — driven by --reveal (0..1),
   set every frame straight off scroll position in app.js. No CSS timer:
   the text tracks the scrollbar exactly, so it reveals or unreveals along
   the same path whichever way the user is scrolling. */
.w,.n,.h,.step,.card,.hero-sub,.trust__item,.hero-cta{
  display:inline-block;
  opacity:var(--reveal, 0); will-change:transform,opacity,filter;
  filter:blur(calc((1 - var(--reveal, 0)) * 9px));
}
/* .trust__item and .hero-cta need their own internal flex row (icon beside
   text) — the shared rule above only needs them for opacity/transform/filter */
.trust__item{display:flex}
.hero-cta{display:inline-flex}
.from-left {transform:translate3d(calc((var(--reveal, 0) - 1) * 14vw),0,0) skewX(calc((1 - var(--reveal, 0)) * 6deg))}
.from-right{transform:translate3d(calc((1 - var(--reveal, 0)) * 14vw),0,0) skewX(calc((var(--reveal, 0) - 1) * 6deg))}
.from-mid  {transform:translate3d(0,calc((1 - var(--reveal, 0)) * 42px),0) scale(calc(.86 + var(--reveal, 0) * .14))}
/* big display lines travel less, so they never fly off the edge mid-entry */
.ln.from-left {transform:translate3d(calc((var(--reveal, 0) - 1) * 5vw),0,0) skewX(calc((1 - var(--reveal, 0)) * 4deg))}
.ln.from-right{transform:translate3d(calc((1 - var(--reveal, 0)) * 5vw),0,0) skewX(calc((var(--reveal, 0) - 1) * 4deg))}

/* ---------------- SCENE 7: PROOF ---------------- */
/* this plate runs brighter than the rest of the site — scrim it dark-to-clear,
   bottom-to-top, same gradient-scrim technique as .steps::before, just spanning
   the whole act via its own [data-win] instead of one beat's ::before */
.proof-scrim{
  position:absolute; inset:-20vh -10vw; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,17,12,0) 0%, rgba(20,17,12,.36) 48%, rgba(20,17,12,.84) 100%);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.proof-scrim.in{opacity:1}

/* four stats across, extra room for "CAL FIRE" — same treatment as scene 1 */
.scene[data-scene="6"] .row{
  display:grid; grid-template-columns:1fr 1fr 1.5fr 1fr;
  gap:clamp(8px,2vw,28px);
}
.scene[data-scene="6"] .n{font-size:max(22px, min(5.4vw, 9.5vh))}
.scene[data-scene="6"] .row--top{align-items:baseline}
.scene[data-scene="6"] .row--bottom{align-items:end}

/* stats stay on screen at reduced opacity once the testimonials start,
   instead of clearing the frame like every other beat's exit */
.proof-stats.out .w,.proof-stats.out .n,.proof-stats.out .h{
  transition-delay:0ms; transition-duration:1s;
  opacity:.4; filter:none; transform:none;
}

/* the beat wrapper carries [data-win]/.grp but must not add a box of its
   own — .quote-card is what actually occupies the layer */
.quote-beat{display:contents}

/* quote beats occupy their own layer so all three sit in the exact same
   spot and simply cross-fade — same technique as .hero / .steps */
.quote-card{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  text-align:left; gap:clamp(10px,1.6vh,16px);
  padding:0 clamp(20px,4vw,64px) clamp(74px,10.5vh,104px);
  max-width:min(620px,88vw);
}
/* the whole-scene scrim is a vertical gradient only — it can't guarantee
   contrast against a moving, brightly-lit plate at the specific spot the
   quote sits. A local backdrop anchored under the text closes that gap. */
.quote-card::before{
  content:''; position:absolute; inset:-8vh -8vw -6vh -8vw; z-index:-1;
  background:radial-gradient(ellipse 68% 72% at 12% 100%, rgba(15,12,8,.86) 0%, rgba(15,12,8,.52) 42%, rgba(15,12,8,0) 74%);
}
.quote{font-size:clamp(17px,2vw,29px); line-height:1.44; max-width:100%}
.quote-attr{display:flex; flex-direction:column; gap:7px}
.quote-name{font-family:var(--holt); font-size:clamp(13px,1.1vw,16px); letter-spacing:.05em}
.quote-role{font-size:clamp(12px,.95vw,14px); opacity:.72}

.tag{
  align-self:flex-start; margin-top:2px;
  font-family:var(--holt); font-size:9.5px; letter-spacing:.6px; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px; line-height:1;
}
.tag--rust{color:#a05035; background:rgba(160,80,53,.14)}
.tag--sage{color:#737b4c; background:rgba(115,123,76,.14)}

/* ---------------- HUD ---------------- */
.hud{
  position:absolute; left:clamp(20px,4vw,64px); bottom:clamp(84px,12vh,118px);
  right:clamp(20px,4vw,64px); z-index:5;
  display:flex; align-items:center; gap:16px;
  font-family:var(--holt); font-size:10px; letter-spacing:.3em; color:var(--cream);
  opacity:.75; mix-blend-mode:difference;
}
.hud__track{flex:1; height:1px; background:rgba(251,245,213,.28); position:relative}
.hud__track i{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--cream)}
.hud__sound{
  background:none; border:0; padding:6px 0; cursor:pointer;
  font:inherit; letter-spacing:inherit; color:inherit; white-space:nowrap;
}
.hint{
  position:absolute; left:50%; bottom:clamp(118px,15.6vh,152px); transform:translateX(-50%);
  z-index:5; font-family:var(--holt); font-size:10px; letter-spacing:.42em;
  color:var(--cream); opacity:.7; animation:bob 2.4s ease-in-out infinite;
  transition:opacity .5s;
}
.hint.gone{opacity:0}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------------- TRACK + FOOTER ---------------- */
.track{position:relative; z-index:0}
/* liquid-glass panel: no static image here — .stage (the WebGL canvas)
   is position:fixed behind the whole page, so once scroll passes the
   last scene it's already sitting frozen on that scene's final frame.
   .footer__glass is just a translucent tint over that live canvas, so
   the footer always matches whatever the last scene actually is. */
.footer{
  position:relative; z-index:6; overflow:hidden;
  color:var(--bark);
  padding:clamp(48px,9vh,110px) clamp(20px,4vw,64px) clamp(24px,4vh,44px);
  border-top:1px solid rgba(255,255,255,.4);
  box-shadow:0 -8px 40px rgba(20,17,12,.15);
}
.footer__glass{
  position:absolute; inset:0; z-index:1;
  background:rgba(251,245,213,.28);
  backdrop-filter:blur(5px) saturate(120%);
  -webkit-backdrop-filter:blur(5px) saturate(120%);
}
.footer__grid{position:relative; z-index:2}
/* left column sits directly over the busy photo — cream text (set on
   the h2/statement/eyebrow/p rules below) plus a dark shadow for
   contrast. The quote form keeps its own dark-on-light-card colors,
   untouched. */
.footer h2,.footer p.footer__statement,p.footer__eyebrow,.footer__grid > div > p{
  text-shadow:0 2px 14px rgba(20,17,12,.55);
}
.footer__grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,80px);
  max-width:1240px; margin:0 auto; align-items:center;
}
.footer h2{font-family:var(--holt); font-size:clamp(30px,5vw,62px); letter-spacing:.02em; color:var(--cream)}
.footer p{margin-top:18px; max-width:46ch; font-size:clamp(15px,1.3vw,19px); line-height:1.55; color:var(--cream)}
p.footer__eyebrow{
  font-family:var(--holt); font-size:clamp(14px,1.6vw,19px);
  letter-spacing:.08em; color:var(--cream); opacity:.85;
  margin-top:0;
}
p.footer__statement{
  font-family:var(--holt); font-weight:400;
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.02em;
  color:var(--cream); margin-top:clamp(10px,1.6vh,16px);
}
/* menu + socials buttons side by side; top spacing lives on the row only */
.footer__ctas{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(18px,2.6vh,28px);
}
.footer-cta{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.9em 1.7em;
  background:var(--bark); color:var(--cream);
  font-family:var(--holt); font-size:clamp(11px,1vw,13px);
  letter-spacing:.14em; text-decoration:none;
  border-radius:999px;
  transition:background .3s, color .3s, transform .3s;
}
.footer-cta:hover{background:var(--rust); color:var(--cream); transform:translateY(-1px)}
.footer-cta .arw{margin-left:0}
/* brighter flame pill so the socials button pops against the dark menu one */
.footer-cta--social{
  background:var(--flame); color:var(--ink);
  box-shadow:0 4px 22px rgba(224,136,60,.45);
}
.footer-cta--social:hover{background:var(--cream); color:var(--ink)}
.footer__bar{
  max-width:1240px; margin:clamp(34px,6vh,70px) auto 0; padding-top:18px;
  border-top:1px solid rgba(74,65,51,.25);
  display:flex; justify-content:space-between; font-size:13px; letter-spacing:.05em;
}
.footer__bar a{color:var(--rust); text-decoration:none}

.footer__form{
  background:rgba(251,245,213,.6);
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  padding:clamp(24px,3.6vw,40px);
}
.footer__form h3{
  font-family:var(--holt); font-weight:400;
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.02em; color:var(--bark);
  margin-bottom:clamp(18px,3vh,26px);
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,20px)}
.form__field{display:flex; flex-direction:column; gap:7px; margin-bottom:clamp(16px,2.6vh,24px)}
.form__field--date{max-width:220px}
.footer__form label{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.65;
}
.footer__form input,.footer__form textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--bark); background:transparent;
  border:none; border-bottom:1px solid rgba(74,65,51,.35);
  padding:8px 0; outline:none; resize:vertical;
  transition:border-color .3s;
}
.footer__form input:focus,.footer__form textarea:focus{border-color:var(--rust)}
.hp{position:absolute; left:-9999px; top:-9999px}
.form__submit{
  margin-top:8px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:16px; color:var(--bark);
  border-bottom:2px solid var(--rust); padding-bottom:.12em;
  transition:color .3s, border-color .3s;
}
.form__submit:hover{color:var(--rust)}

@media (max-width:640px){
  .form__row{grid-template-columns:1fr}
  .form__field--date{max-width:none}
}

@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr}
  .row{gap:8px}
  .w{font-size:13px; letter-spacing:.16em}
  .n{font-size:clamp(21px,7.6vw,40px)}
  .topnav__links{display:none}
  .hero--trust{padding-bottom:clamp(200px,30vh,260px)}
  .trust{grid-template-columns:repeat(2,1fr); row-gap:14px}
  .steps{grid-template-columns:1fr; gap:clamp(14px,2.4vh,26px); align-content:center}
  .step__body{font-size:13px; line-height:1.42; max-width:38ch}
  .step__num{width:32px; font-size:11px}
  .step__title{font-size:16px; margin:10px 0 6px}
  .scene[data-scene="6"] .row{grid-template-columns:repeat(2,1fr)}
  .quote-card{max-width:100%; padding-bottom:clamp(84px,13vh,110px)}
  .quote{font-size:clamp(15px,4.4vw,20px); line-height:1.42}
}
@media (prefers-reduced-motion:reduce){
  .stage__grain,.hint{animation:none}
  .w,.n,.h{transition-duration:.4s}
}

/* ---------------- MENU MODAL ---------------- */
.menu-modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(16px,4vh,48px) clamp(16px,4vw,48px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.menu-modal.open{opacity:1; pointer-events:auto}
.menu-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(20,17,12,.86);
  backdrop-filter:blur(4px);
}
.menu-modal__panel{
  position:relative; z-index:1;
  max-width:min(560px,92vw); max-height:92vh;
  transform:scale(.96) translateY(10px);
  transition:transform .3s var(--ease);
}
.menu-modal.open .menu-modal__panel{transform:scale(1) translateY(0)}
.menu-modal__img{
  display:block; width:100%; height:100%;
  max-height:92vh; object-fit:contain;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.menu-modal__close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--cream); color:var(--ink);
  border:none; border-radius:999px;
  font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:background .3s, transform .3s;
}
.menu-modal__close:hover{background:var(--rust); color:var(--cream); transform:scale(1.06)}

/* ---------------- DESKTOP READABILITY ----------------
   Everything above was sized for phones first, so on a laptop/desktop the
   chrome (nav, HUD, trust bar) and body copy read tiny. Desktop-only bumps,
   kept last in the file so they win over the base rules. Display headlines
   (.h--sm / .h--xl) are already sized by their own block and stay as-is. */
@media (min-width:761px){
  /* header */
  .topnav__mark{font-size:clamp(22px,2.1vw,40px)}
  .topnav__links{gap:clamp(14px,1.9vw,34px)}
  .topnav__links a{font-size:clamp(13px,1.35vw,25px); letter-spacing:.16em}
  /* the last scene's SEE OUR MENU pill sits top-centre, right under the
     header — the wider nav links now reach it, so drop it clear of them */
  .scene--center .row--bottom{margin-top:clamp(48px,6.5vh,80px)}

  /* bottom of the frame */
  .hud{font-size:clamp(13px,1.05vw,18px)}
  .hint{font-size:clamp(13px,1.05vw,18px)}
  .trust__icon{width:clamp(24px,2.3vw,36px); height:clamp(24px,2.3vw,36px)}
  .trust__num{font-size:clamp(15px,1.3vw,23px)}
  .trust__label{font-size:clamp(11px,.85vw,15px); margin-top:4px}

  /* scene copy */
  .hero-card{max-width:min(780px,62vw)}
  .w{font-size:clamp(14px,1.15vw,21px); letter-spacing:.28em}
  .hero-sub{font-size:clamp(17px,1.45vw,26px)}
  .hero-cta{font-size:clamp(13px,1.05vw,18px)}
  .step__num{font-size:clamp(14px,1.15vw,20px)}
  .step__title{font-size:clamp(20px,2vw,36px)}
  .step__body{font-size:clamp(16px,1.3vw,23px)}

  /* footer + form */
  .footer p{font-size:clamp(17px,1.4vw,24px)}
  p.footer__eyebrow{font-size:clamp(16px,1.6vw,26px)}
  p.footer__statement{font-size:clamp(22px,2.6vw,40px)}
  .footer-cta{font-size:clamp(13px,1.05vw,18px)}
  .footer__bar{font-size:clamp(14px,1vw,17px)}
  .footer__form h3{font-size:clamp(24px,2.4vw,40px)}
  .footer__form label{font-size:clamp(13px,.9vw,15px)}
  .footer__form input,.footer__form textarea,.form__submit{font-size:clamp(16px,1.15vw,20px)}

  /* loader */
  .loader__count{font-size:12px}
  .loader__btn{font-size:14px}
}