/* ============================================================
   PROJECT ARK ONE — Styles (v2)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.68;
  color:var(--bone);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
.narrow{max-width:760px;}
.section{padding-block:var(--sec-y);position:relative;}
.center{text-align:center;}

/* ---------- Type ---------- */
.display{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:var(--disp-ls);line-height:var(--disp-lh);}
.mega{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:var(--disp-ls);line-height:var(--disp-lh);font-size:var(--fs-mega);}
.h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:var(--disp-ls);line-height:.95;font-size:var(--fs-h1);margin:0 0 1.3rem;}
.h2{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:var(--disp-ls);line-height:.98;font-size:var(--fs-h2);margin:0 0 1rem;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--bone-dim);}
.muted{color:var(--bone-dim);}
p{margin:0 0 1.1rem;}p:last-child{margin-bottom:0;}

.eyebrow{
  font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.3em;
  font-size:var(--fs-eyebrow);color:var(--olive);margin:0 0 1.5rem;display:inline-flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--olive);opacity:.8;}
.eyebrow.plain{margin-left:0;}
.eyebrow.plain::before{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-body);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;padding:1.05rem 1.9rem;border-radius:100px;
  border:1px solid transparent;background:transparent;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn-primary{background:var(--bone);color:var(--ink);}
.btn-primary:hover{background:#fff;transform:translateY(-2px);}
.btn-ghost{border-color:var(--line);color:var(--bone);}
.btn-ghost:hover{border-color:var(--bone);transform:translateY(-2px);}
.btn-lg{padding:1.2rem 2.3rem;font-size:.9rem;}
.textlink{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--bone-dim);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s;
}
.textlink:hover{color:var(--olive);border-color:var(--olive);}

/* ---------- Wordmark ---------- */
/* ---------- Brand lockup ----------
   The full inline lockup (cheetah + arc + wordmark). Its legibility floor is a
   DEVICE-pixel floor, not a CSS one: below roughly 280 device px wide the cheetah's
   spots merge into a smudge. So on a 2x screen 150px CSS is already crisp, while the
   same CSS width on a 1x screen has half the pixels and goes muddy — hence the
   resolution query below rather than one fixed size. Width is driven by --brand-w so
   the nav can set its own value per state and transition between them. */
.brand{display:block;line-height:0;}
.brand img{display:block;width:var(--brand-w);height:auto;transition:width .45s var(--ease);}

/* ---------- Nav ----------
   Tall and generous over the hero, condensing on scroll. The hero's own scrim already
   darkens the left third, which is what lets the fine ivory linework read at rest. */
.nav{--brand-w:248px;position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gut);transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);}
.nav.scrolled{--brand-w:186px;background:rgba(10,22,16,.9);backdrop-filter:blur(12px);padding-block:.55rem;box-shadow:0 1px 0 var(--line);}
.nav-cta{font-size:.78rem;padding:.75rem 1.4rem;flex:0 0 auto;}
@media(max-width:900px){.nav{--brand-w:214px;}.nav.scrolled{--brand-w:170px;}}
@media(max-width:640px){.nav{--brand-w:184px;}.nav.scrolled{--brand-w:152px;}.nav-cta{display:none;}}
/* 1x displays: the same CSS width carries half the pixels, so give the lockup more
   room. Desktop only — phones are effectively all 2x or better. */
@media(min-width:901px) and (max-resolution:1.5dppx){
  .nav{--brand-w:296px;}
  /* The scrolled bar is solid forest — far more forgiving than the hero photo — so the
     lockup can sit nearer its floor here and keep the sticky bar from eating the viewport. */
  .nav.scrolled{--brand-w:238px;}
}
/* Reduced motion: don't animate the resize on scroll. */
@media(prefers-reduced-motion:reduce){.brand img{transition:none;}}

/* ---------- Full-bleed media band ---------- */
.band{position:relative;overflow:clip;}
.band-media{position:absolute;inset:0;z-index:0;}
.band-media img{width:100%;height:100%;object-fit:cover;}
.band-media::after{content:"";position:absolute;inset:0;}
.band-inner{position:relative;z-index:2;}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:clip;}
.hero-media{position:absolute;inset:-8% 0 0 0;z-index:0;}
.hero-media img{width:100%;height:116%;object-fit:cover;object-position:65% 50%;animation:kb 26s ease-out infinite alternate;}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.14)}}
/* Left scrim only. The vertical layer that used to darken the bottom of the hero has been
   removed deliberately: it was costing the bottom 42% of the photograph. The hero now runs
   to its last row at full brightness and meets the stakes band on a hard edge, which is an
   accepted trade rather than an oversight. Re-add a 0deg layer here to soften it again. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,15,10,.88),rgba(7,15,10,.5) 44%,rgba(7,15,10,0) 74%);}
/* Same 1280px wrap as every other section so the hero copy aligns with them;
   the text block itself is constrained by .hero-sub / .hero h1 instead. */
.hero-inner{position:relative;z-index:3;padding-block:8rem 6rem;}
.hero-credit{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:.62rem;color:var(--bone-faint);margin:0 0 1.5rem;}
.hero h1{margin:0 0 1.35rem;}
.hero .l1{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--disp-ls);color:var(--bone-dim);font-size:clamp(1.4rem,3.4vw,2.7rem);line-height:1.02;margin:0 0 .16em .11em;}
.hero .l2{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--disp-ls);font-size:clamp(3rem,9.5vw,8.2rem);line-height:.86;}
.hero-sub{max-width:30em;margin:0 0 2.5rem;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;}
.scrollcue{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.3em;font-size:.6rem;color:var(--bone-faint);}
.scrollcue .dot{width:1px;height:46px;background:linear-gradient(var(--olive),transparent);animation:cue 2.2s var(--ease) infinite;transform-origin:top;}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============================================================ FILM (framed, inside the stakes band) */
/* No background of its own: it shares the stakes band so there is no seam between them. */
.filmstrip{position:relative;z-index:2;width:100%;padding-block:clamp(5rem,9vw,8rem) clamp(3rem,6vw,5.5rem);}
/* Dim the band image to near-black behind the film, then release it so the leopard
   reads normally by the time the copy starts. One continuous background, no hard edge. */
.filmstrip::before{
  content:"";position:absolute;left:0;right:0;top:-1px;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#050b08 0%,#050b08 58%,rgba(5,11,8,0) 100%);
}
/* The frame is the positioning context, so the sound pill sits inside the video, not the section. */
.film-frame{position:relative;line-height:0;border:1px solid var(--line);overflow:clip;}
/* aspect-ratio holds the 16:9 box before the source is attached, so the poster shows and nothing shifts */
.filmstrip-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink);}
.film-sound{
  position:absolute;left:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.4rem);z-index:3;
  display:inline-flex;align-items:center;gap:.6rem;line-height:1;
  padding:.72rem 1.15rem;border-radius:100px;
  background:rgba(10,22,16,.6);backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--bone);
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  transition:background .3s var(--ease),border-color .3s var(--ease),opacity .45s var(--ease),transform .3s var(--ease);
}
.film-sound:hover{background:rgba(10,22,16,.8);border-color:rgba(174,185,129,.5);transform:translateY(-1px);}
.film-sound .film-sound-ico{width:18px;height:18px;color:var(--olive);display:inline-flex;flex:0 0 auto;}
.film-sound .film-sound-ico svg{width:100%;height:100%;}
.film-sound::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--olive);opacity:.55;animation:filmpulse 2.6s var(--ease) infinite;}
@keyframes filmpulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
.filmstrip.engaged .film-sound{opacity:0;visibility:hidden;pointer-events:none;}
/* the 16:9 band is short on phones — keep the pill in proportion to it */
@media(max-width:560px){
  .film-sound{padding:.55rem .85rem;font-size:.62rem;gap:.45rem;}
  .film-sound .film-sound-ico{width:15px;height:15px;}
}
@media(prefers-reduced-motion:reduce){.film-sound::after{display:none;}}

/* ============================================================ STAKES */
/* The film sits inside this band, so stack film over copy rather than centring one child. */
.stakes{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:0 clamp(4rem,8vw,7rem);}
/* The film sits over the top half of this band, so the photograph is framed with the
   leopard low and right and only X is tuned here. Y is inert: the photo is 1.79:1 and the
   band is roughly 0.9:1, so cover always pins the height exactly and crops the width, at
   every viewport. X picks the horizontal slice, and the slice narrows sharply as the
   viewport does (~45% of the file at 1440, ~19% at 390), hence a separate phone value to
   keep the animal's head on frame. */
.stakes .band-media img{object-position:66% 50%;}
.stakes .band-media::after{background:linear-gradient(90deg,rgba(5,11,8,.93),rgba(5,11,8,.42) 60%,rgba(5,11,8,.72));}
/* On phones the copy spans the full width, so it sits over the animal rather than beside it
   and the horizontal falloff above stops earning its keep. Flatten and lift the scrim so the
   leopard still reads as texture but the copy never crosses his lit muzzle at low contrast. */
@media(max-width:640px){.stakes .band-media::after{background:linear-gradient(90deg,rgba(5,11,8,.9),rgba(5,11,8,.78));}}
.stakes-copy{max-width:800px;}
.stakes .big{font-family:var(--font-body);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.14;max-width:17em;margin:0 0 1.5rem;}
.stakes-list{display:grid;gap:.55rem;margin:2rem 0 0;padding:0;list-style:none;max-width:44em;}
.stakes-list li{padding-left:1.5rem;position:relative;color:var(--bone-dim);}
.stakes-list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border:1px solid var(--olive);border-radius:50%;}
.stakes-kicker{margin-top:2.4rem;font-family:var(--font-body);font-weight:600;font-size:var(--fs-lead);color:var(--bone);}

/* ============================================================ REFRAME */
.reframe{position:relative;overflow:clip;text-align:center;min-height:100svh;display:flex;align-items:center;}
.reframe .band-media img{opacity:.18;}
.reframe .band-media::after{background:radial-gradient(120% 120% at 50% 34%,rgba(10,22,16,.35),var(--ink) 78%);}
.reframe-inner{max-width:1100px;margin-inline:auto;}
.reframe .statement{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--disp-ls);font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:1.0;margin:0 auto;max-width:16em;}
.reframe .statement em{font-style:normal;color:var(--olive);}
.reframe .lead{margin:2rem auto 0;max-width:40em;}
/* The mid-page conversion catch, folded in from the old #nudge band so the question and
   its CTA land on the same centred axis as the statement instead of interrupting it with
   a separate green band. Keeps the old .nudge-line type scale: display type, but well
   below the statement's, so it reads as the turn to the ask rather than a second claim. */
.reframe-ask{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--disp-ls);font-size:clamp(1.35rem,2.7vw,2.3rem);line-height:1.03;margin:clamp(2.6rem,5vw,4rem) auto 0;max-width:24em;}
.reframe-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.5rem;margin-top:clamp(1.6rem,3vw,2.2rem);}

/* ============================================================ THE PLAN */
.plan{background:var(--forest);}
/* Editorial rows: oversized numeral beside the copy, alternating page side. */
.plan-list{list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;display:grid;gap:clamp(2.2rem,4.5vw,3.6rem);}
.plan-item{display:flex;align-items:flex-start;gap:clamp(1.2rem,3vw,2.6rem);max-width:50em;}
.plan-item .n{
  flex:0 0 auto;font-family:var(--font-display);font-weight:400;letter-spacing:.01em;
  line-height:.78;margin-top:-.05em;font-size:clamp(3rem,7vw,5.8rem);color:var(--olive);
}
.plan-body{max-width:38em;}
.plan-item h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.02em;font-size:clamp(1.3rem,2.3vw,2rem);line-height:1;margin:0 0 .55rem;}
.plan-item p{font-size:.98rem;color:var(--bone-dim);margin:0;}
.plan-item:nth-child(even){flex-direction:row-reverse;margin-left:auto;text-align:right;}
@media(max-width:760px){
  .plan-item,.plan-item:nth-child(even){flex-direction:row;text-align:left;margin-left:0;max-width:none;}
}
.plan-close{margin:clamp(2.6rem,5vw,4rem) 0 0;font-family:var(--font-body);font-weight:600;font-size:var(--fs-lead);color:var(--bone);max-width:46em;}

/* ============================================================ VISION (scrollytelling) */
.vision-head{max-width:var(--maxw);margin-bottom:clamp(2rem,4vw,3.5rem);}
.vision-head .intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;}
@media(max-width:860px){.vision-head .intro{grid-template-columns:1fr;align-items:start;gap:1.2rem;}}

/* Slanted overlapping panels. Collapsed panels show a vertical label; the open
   one expands and crossfades to a horizontal block. Hover drives it on pointer
   devices, tap drives it on touch (JS moves .active). */
.vision-panels{
  display:flex;height:min(78svh,680px);margin-bottom:clamp(2.6rem,5vw,4.2rem);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
}
/* Padding on the section, not margin on the <p>: the base p:last-child rule
   outranks .vision-kicker and would zero a bottom margin here. */
.vision{padding-bottom:var(--sec-y);}
/* The montage line, rehomed here as the payoff to the seven pillars. */
.vision-kicker{
  margin:0 auto;max-width:26em;text-align:center;text-wrap:balance;
  font-family:var(--font-body);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.18;color:var(--bone);
}
.v-panel{
  position:relative;flex:1 1 0;min-width:0;padding:0;border:0;background:var(--forest);
  overflow:hidden;cursor:pointer;text-align:left;appearance:none;
  clip-path:polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  margin-left:calc(var(--slant) * -1);
  transition:flex-grow .7s var(--ease-out);
  /* --slant-half is declared explicitly rather than divided in calc(), because
     dividing a clamp() inside calc() invalidates the declaration.
     --slant-angle is atan(slant / panel height), the tilt the labels use so they
     run parallel to the diagonal edges instead of dead vertical. */
  --slant:clamp(18px,2.6vw,44px);
  --slant-half:clamp(9px,1.3vw,22px);
  --slant-angle:3.2deg;
}
.v-panel:first-child{margin-left:0;clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);}
.v-panel:last-child{clip-path:polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);}
.v-panel img{
  position:absolute;inset:0;height:100%;width:100%;min-width:420px;object-fit:cover;
  left:50%;transform:translateX(-50%) scale(1.02);
  transition:transform 1.2s var(--ease-out);
}
/* Collapsed panels sit under a heavy scrim so the vertical label always reads;
   the open panel lifts it so the photograph carries. */
.v-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,14,9,.94) 10%,rgba(6,14,9,.72) 55%,rgba(6,14,9,.8));transition:background .6s var(--ease);}
.v-panel .n{font-family:var(--font-body);font-weight:700;font-size:.7rem;letter-spacing:.2em;color:var(--olive);}
.v-panel .t{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.04em;line-height:1;color:var(--bone);}

/* collapsed state: vertical label reading bottom-to-top */
/* Nudged left by half the slant so it stays inside the parallelogram's
   bottom edge, which the clip-path shortens on the right. */
.v-vert{
  position:absolute;left:calc(50% - var(--slant-half));bottom:2.2rem;transform:translateX(-50%);
  display:flex;flex-direction:column-reverse;align-items:center;gap:1rem;
  writing-mode:vertical-rl;rotate:calc(180deg + var(--slant-angle));
  opacity:1;transition:opacity .4s var(--ease);
}
/* Set vertically these read tighter than they measure, so they carry more
   tracking than the rest of the display type. */
.v-vert .t{font-size:clamp(.95rem,1.15vw,1.2rem);white-space:nowrap;letter-spacing:.13em;}

/* open state: horizontal block */
.v-horz{
  position:absolute;left:0;right:0;bottom:0;padding:0 clamp(1.4rem,2.2vw,2.4rem) clamp(1.5rem,2.4vw,2.2rem);
  display:flex;flex-direction:column;gap:.5rem;min-width:280px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease) .1s,transform .55s var(--ease-out) .1s;
}
.v-horz .t{font-size:clamp(1.5rem,2.2vw,2.1rem);}
.v-horz .d{color:var(--bone-dim);font-size:.95rem;line-height:1.5;max-width:30em;}

.v-panel.active{flex-grow:4.2;}
.v-panel.active .v-vert{opacity:0;}
.v-panel.active .v-horz{opacity:1;transform:none;}
.v-panel.active img{transform:translateX(-50%) scale(1);}
.v-panel.active .v-scrim{background:linear-gradient(0deg,rgba(6,14,9,.94) 12%,rgba(6,14,9,.24) 62%,rgba(6,14,9,.38));}

/* On pointer devices hover wins over the pinned panel. */
@media(hover:hover){
  .vision-panels:hover .v-panel{flex-grow:1;}
  .vision-panels:hover .v-panel .v-vert{opacity:1;}
  .vision-panels:hover .v-panel .v-horz{opacity:0;transform:translateY(14px);}
  .vision-panels:hover .v-panel .v-scrim{background:linear-gradient(0deg,rgba(6,14,9,.94) 10%,rgba(6,14,9,.72) 55%,rgba(6,14,9,.8));}
  .vision-panels:hover .v-panel:hover{flex-grow:4.2;}
  .vision-panels:hover .v-panel:hover .v-vert{opacity:0;}
  .vision-panels:hover .v-panel:hover .v-horz{opacity:1;transform:none;}
  .vision-panels:hover .v-panel:hover .v-scrim{background:linear-gradient(0deg,rgba(6,14,9,.94) 12%,rgba(6,14,9,.24) 62%,rgba(6,14,9,.38));}
  .vision-panels:hover .v-panel:hover img{transform:translateX(-50%) scale(1);}
}
.v-panel:focus-visible{outline:2px solid var(--olive);outline-offset:-4px;}

/* Mobile: same language, stacked and slanted on the other axis, tap to open. */
@media(max-width:860px){
  .vision-panels{
    flex-direction:column;height:auto;border-radius:var(--radius);
    box-shadow:none;overflow:visible;gap:0;
  }
  .v-panel{
    --slant:16px;--slant-half:8px;--slant-angle:2.6deg;
    flex:0 0 auto;height:84px;margin-left:0;margin-top:calc(var(--slant) * -1);
    clip-path:polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    transition:height .6s var(--ease-out);
  }
  .v-panel:first-child{margin-top:0;clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);}
  .v-panel:last-child{clip-path:polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);}
  .v-panel img{min-width:0;}
  .v-vert{
    /* stacked panels slant the other way, so the label rises to the right */
    writing-mode:horizontal-tb;rotate:calc(var(--slant-angle) * -1);
    left:clamp(1.1rem,4vw,1.6rem);right:auto;bottom:auto;top:50%;transform:translateY(-50%);
    flex-direction:row;align-items:baseline;gap:.85rem;
  }
  .v-vert .t{font-size:1.15rem;}
  .v-panel.active{height:300px;}
  .v-horz{padding:0 1.3rem 1.4rem;min-width:0;}
  .v-horz .t{font-size:1.5rem;}
}

@media(prefers-reduced-motion:reduce){
  .v-panel,.v-panel img,.v-horz,.v-vert{transition:none;}
}

/* ============================================================ PROOF (light) */
.proof{background:var(--paper);color:var(--paper-ink);}
.proof .eyebrow{color:var(--olive-deep);}
.proof .eyebrow::before{background:var(--olive-deep);}
.proof .lead{color:var(--paper-mut);}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk);}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{padding:1.9rem .5rem;border-right:1px solid var(--line-dk);}
.stat:last-child{border-right:0;}
@media(max-width:820px){.stat{border-right:0;border-bottom:1px solid var(--line-dk);}}
.stat .num{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1;color:var(--paper-ink);letter-spacing:.01em;}
.stat .num .suf{color:var(--olive-deep);}
.stat .lbl{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--paper-mut);margin-top:.65rem;}
.proven{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-top:1rem;}
@media(max-width:820px){.proven{grid-template-columns:1fr;}}
.proven h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;color:var(--paper-ink);}
.proven-list{display:flex;flex-wrap:wrap;gap:.6rem;}
.chip{border:1px solid var(--line-dk);border-radius:100px;padding:.55rem 1.1rem;font-size:.85rem;color:var(--paper-mut);background:#fff;}
.chip b{color:var(--olive-deep);font-weight:700;}

/* ============================================================ INVITATION */
.invite{background:var(--forest);}
.invite-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin-top:clamp(2.5rem,5vw,3.5rem);}
@media(max-width:720px){.invite-grid{grid-template-columns:1fr;}}
.benefit{display:flex;gap:1rem;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(243,237,223,.02);transition:background .4s var(--ease),border-color .4s var(--ease);}
.benefit:hover{background:rgba(243,237,223,.045);border-color:rgba(174,185,129,.4);}
.benefit .b-ico{flex:0 0 auto;width:26px;height:26px;color:var(--olive);margin-top:.15rem;}
.benefit .b-ico svg{width:100%;height:100%;}
.benefit h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.02em;font-size:1.15rem;line-height:1;margin:.1rem 0 .4rem;}
.benefit p{font-size:.92rem;color:var(--bone-dim);margin:0;}
.pullquote{margin:clamp(3rem,6vw,5rem) auto 0;max-width:900px;text-align:center;font-family:var(--font-body);font-weight:500;font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.32;}
.pullquote .accent{color:var(--olive);}

/* ============================================================ THIS IS JUST THE BEGINNING */
.road{background:var(--ink);}

/* ============================================================ WHO WE ARE (extra breathing room) */
.who{min-height:88svh;display:flex;align-items:center;padding-block:clamp(5rem,9vw,9rem);}
.who .band-media img{object-position:50% 42%;}
.who .band-media::after{background:linear-gradient(90deg,rgba(5,11,8,.9),rgba(5,11,8,.35) 72%);}
.who-copy{max-width:660px;}
.who-lines span{display:block;}

/* ============================================================ THE OPPORTUNITY */
.opp{min-height:92svh;display:flex;align-items:center;padding-block:clamp(5rem,9vw,9rem);}
/* The asset is pre-flipped so the giraffes clear the copy column. Do not mirror
   here with a transform: [data-parallax] rewrites this element's transform. */
.opp .band-media img{object-position:50% 58%;}
.opp .band-media::after{background:linear-gradient(90deg,rgba(5,11,8,.95),rgba(5,11,8,.5) 66%,rgba(5,11,8,.74));}
.opp-copy{max-width:720px;}
.opp .h1{max-width:15em;}
.opp .lead{max-width:41em;}
.opp .lead + .lead{margin-top:1.2rem;}

/* ============================================================ LEGACY + CONNECT (extra breathing room) */
.legacy{position:relative;overflow:clip;display:flex;align-items:center;padding-block:clamp(6rem,11vw,11rem);}
.legacy .band-media img{object-position:50% 45%;}
.legacy .band-media::after{background:linear-gradient(0deg,rgba(5,11,8,.92) 8%,rgba(5,11,8,.5) 55%,rgba(5,11,8,.78));}
.legacy-inner{width:100%;}
.legacy-quote{text-align:center;max-width:900px;margin:0 auto clamp(3rem,6vw,5rem);}
.legacy-quote .big{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--disp-ls);font-size:clamp(2rem,5vw,4.2rem);line-height:1.0;}
.convert{display:grid;grid-template-columns:1.05fr .95fr;gap:1.3rem;max-width:1020px;margin-inline:auto;}
@media(max-width:780px){.convert{grid-template-columns:1fr;}}
/* After the proposal form is submitted, collapse to a single centred card. */
.convert.submitted{grid-template-columns:minmax(0,560px);justify-content:center;}
.card{background:rgba(10,22,16,.74);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.5rem);}
.card.primary{border-color:rgba(174,185,129,.42);box-shadow:var(--shadow);}
.card .k{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--olive);margin-bottom:1rem;}
.card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.01em;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;margin-bottom:.8rem;}
.card p{font-size:.95rem;color:var(--bone-dim);}
.card .btn{margin-top:1.4rem;width:100%;justify-content:center;}

/* Direct contact: Cameron and Ryan, call or email */
.contacts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.2rem;}
.contact{padding-top:1.2rem;border-top:1px solid var(--line);}
.contact:first-child{padding-top:0;border-top:0;}
.contact-name{font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.3;color:var(--bone);}
.contact-role{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--olive);margin-top:.18rem;}
.contact-links{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem;}
.contact-link{
  display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:100px;
  padding:.62rem 1.05rem;font-size:.82rem;color:var(--bone-dim);overflow-wrap:break-word;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.contact-link:hover{border-color:var(--bone);color:var(--bone);transform:translateY(-2px);}
.contact-link svg{width:15px;height:15px;flex:0 0 auto;color:var(--olive);}
/* The shared address closes the card, so it spans the full width. */
.contact-shared .contact-link{flex:1 1 100%;justify-content:center;}
@media(max-width:460px){
  .contact-links{flex-direction:column;align-items:stretch;}
  .contact-link{justify-content:center;text-align:center;font-size:.76rem;padding:.62rem .9rem;line-height:1.4;}
}
.form-row{display:grid;gap:.8rem;margin-top:1.3rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--bone-dim);}
.field input{background:rgba(243,237,223,.05);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;color:var(--bone);font-family:var(--font-body);font-size:.98rem;transition:border-color .3s;}
.field input:focus{outline:none;border-color:var(--olive);}
.field input::placeholder{color:rgba(243,237,223,.4);}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.5rem;font-size:.78rem;color:var(--bone-dim);}
.consent input{margin-top:.2rem;accent-color:var(--olive);}
.reassure{font-size:.76rem;color:var(--bone-faint);margin-top:1rem;}

/* ============================================================ FOOTER */
.footer{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem);}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:center;}
.brand-footer{--brand-w:300px;}
@media(max-width:640px){.brand-footer{--brand-w:230px;}}
.footer .tag{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.28em;font-size:.66rem;color:var(--bone-dim);}
.footer-meta{margin-top:2.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.74rem;color:var(--bone-faint);}

/* ============================================================ Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-media img{animation:none;}
  .v-visual img{transition:opacity .3s;}
}