/* ============================================================
   HOLE IN 1 — sipaholeinone.com
   Design system. Country club, modernized.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Course palette */
  --pine:#0C3520;          /* deepest green — ink for dark sections */
  --pine-2:#124429;
  --fairway:#1E7A3C;       /* the can green */
  --fairway-lt:#2F9A50;
  --fairway-deep:#134F27;  /* section background — cream@70% clears 5:1 here */
  --cream:#F4EFE3;         /* clubhouse cream */
  --bone:#FCFAF4;
  --paper:#FFFFFF;
  --honey:#D8A23D;         /* tupelo honey */
  --honey-lt:#E9BE58;
  --lemon:#E9D24A;
  --ink:#0E1A12;
  --ink-60:rgba(14,26,18,.70);   /* 6.2:1 on cream */
  --ink-40:rgba(14,26,18,.62);   /* 4.8:1 on cream — small print still has to pass */
  --ink-14:rgba(14,26,18,.14);
  --ink-08:rgba(14,26,18,.08);
  --cream-70:rgba(244,239,227,.70);
  --cream-45:rgba(244,239,227,.62); /* 5.5:1 on pine */
  --cream-18:rgba(244,239,227,.18);
  --cream-10:rgba(244,239,227,.10);

  /* Type */
  --display:"Archivo Black",Impact,system-ui,sans-serif;
  --sans:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;

  /* Fluid scale */
  --t-micro:clamp(.62rem,.58rem + .18vw,.72rem);
  --t-small:clamp(.78rem,.74rem + .2vw,.88rem);
  --t-body:clamp(1rem,.96rem + .26vw,1.125rem);
  --t-lead:clamp(1.18rem,1.05rem + .62vw,1.5rem);
  --t-h3:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);
  --t-h2:clamp(2.1rem,1.4rem + 3.1vw,4.25rem);
  --t-h1:clamp(2.5rem,1.5rem + 4.4vw,5.2rem);
  --t-mega:clamp(4rem,1rem + 14vw,16rem);

  /* Space */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --sec:clamp(4.5rem,10vw,9.5rem);
  --max:1360px;
  --max-narrow:760px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.72s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.gated{overflow:hidden;height:100vh}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:2px}
::selection{background:var(--fairway);color:var(--cream)}

/* ---------- 3. TEXTURES ---------- */
/* Golf-ball dimples, lifted straight off the can */
.dimples{position:relative}
.dimples::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(14,26,18,.055) 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, rgba(14,26,18,.055) 38%, transparent 39%);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
  opacity:.9;
}
.dimples--light::before{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(244,239,227,.07) 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, rgba(244,239,227,.07) 38%, transparent 39%);
}
.dimples--fine::before{background-size:16px 16px,16px 16px;background-position:0 0,8px 8px}
.dimples > *{position:relative;z-index:1}

/* Mown-turf stripes */
.turf-stripes{
  background-image:repeating-linear-gradient(105deg,
    rgba(255,255,255,.035) 0 42px, transparent 42px 84px);
}

/* Scorecard rule */
.rule{height:1px;background:var(--ink-14);border:0}
.rule--light{background:var(--cream-18)}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--max-narrow)}
.wrap--wide{max-width:1620px}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--dark{background:var(--pine);color:var(--cream)}
.section--fairway{background:var(--fairway-deep);color:var(--cream)}
.section--bone{background:var(--bone)}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-split{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,6rem)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}.g-split{grid-template-columns:1fr}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 5. TYPE ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:var(--t-h1);text-transform:uppercase}
.h2{font-size:var(--t-h2);text-transform:uppercase}
.h3{font-size:var(--t-h3);text-transform:uppercase;line-height:1.02}
.mega{font-size:var(--t-mega);line-height:.82;text-transform:uppercase;letter-spacing:-.035em}
.script{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1.02}
.lead{font-size:var(--t-lead);line-height:1.42;max-width:56ch;color:var(--ink-60)}
.section--dark .lead,.section--fairway .lead{color:var(--cream-70)}
.body-lg{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.65;max-width:62ch}
.muted{color:var(--ink-60)}
.section--dark .muted,.section--fairway .muted{color:var(--cream-70)}

/* Eyebrow — scorecard micro-label */
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;color:var(--fairway);
}
.section--dark .eyebrow,.section--fairway .eyebrow{color:var(--honey-lt)}
.eyebrow::before{content:"";width:1.8em;height:1px;background:currentColor;opacity:.6}
.eyebrow--plain::before{display:none}

/* Hole number — chapter marker, like a scorecard */
.hole-no{
  font-family:var(--display);font-size:var(--t-micro);letter-spacing:.1em;
  display:inline-grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;
  border:1.5px solid currentColor;opacity:.55;flex:none;
}

/* Highlighted words */
.hl{color:var(--fairway)}
.section--dark .hl,.section--fairway .hl{color:var(--honey-lt)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --bg:var(--fairway);--fg:var(--cream);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.9em;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:700;font-size:var(--t-small);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  will-change:transform;
}
.btn::after{ /* ball-drop wipe */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--ink);transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{box-shadow:0 14px 34px -12px rgba(12,53,32,.55)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--honey{--bg:var(--honey);--fg:var(--pine)}
.btn--honey:hover{color:var(--cream)}
.btn--cream{--bg:var(--cream);--fg:var(--pine)}
.btn--cream:hover{color:var(--cream)}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{color:var(--cream)}
.btn--ghost::after{background:var(--fairway)}
.btn--lg{padding:1.25em 2.4em;font-size:var(--t-body);letter-spacing:.1em}
.btn--sm{padding:.75em 1.3em;font-size:var(--t-micro)}

/* Text link with putting-line underline */
.tlink{
  position:relative;display:inline-block;font-weight:600;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease);
  padding-bottom:2px;
}
.tlink:hover{background-size:100% 1.5px}
.tlink--on{background-size:100% 1.5px}
.tlink--on:hover{background-size:0% 1.5px;background-position:100% 100%}

/* ---------- 7. AGE GATE ---------- */
/* Dressed as the can label: white golf-ball dimples, the full-colour lockup
   flattened off the can, and the green base band. The logo is inline SVG so the
   ball can drop into the 1 on entry. */
.gate{
  --can-green:#146C32;
  position:fixed;inset:0;z-index:1000;
  display:grid;grid-template-rows:1fr auto;
  background:#fff;color:var(--ink);text-align:center;overflow:hidden;
}
.gate[hidden]{display:none}
.gate__dimples{
  position:absolute;inset:-60px;z-index:0;pointer-events:none;
  /* fixed-radius discs, shaded toward the lower edge like the printed dimples */
  background-image:
    radial-gradient(circle 15px at 50% 42%, rgba(0,0,0,.012) 0 45%, rgba(0,0,0,.05) 80%, rgba(0,0,0,.075) 94%, transparent 100%),
    radial-gradient(circle 15px at 50% 42%, rgba(0,0,0,.012) 0 45%, rgba(0,0,0,.05) 80%, rgba(0,0,0,.075) 94%, transparent 100%);
  background-size:40px 40px;background-position:0 0,20px 20px;
  animation:dimple-drift 48s linear infinite;
}
@keyframes dimple-drift{to{transform:translate3d(40px,40px,0)}}
.gate::before{ /* a soft highlight, like light across the can */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 44%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.6) 55%,rgba(255,255,255,0) 100%);
}
.gate__inner{
  position:relative;z-index:2;align-self:center;justify-self:center;
  width:100%;max-width:640px;padding:clamp(1.5rem,5vh,3rem) var(--gutter);
}
.gate__logo{
  display:block;overflow:visible;height:auto;
  width:clamp(170px,min(34vw,36vh),330px);
  margin:0 auto clamp(1.1rem,3.2vh,2rem);
}

/* entrance: the 1 rises, the letters close in on it, the ball drops into place */
.gate__logo .lg-1,.gate__logo .lg-l,.gate__logo .lg-b{transform-box:fill-box}
.gate__logo .lg-1{transform-origin:50% 100%;animation:lg-rise .9s .05s var(--ease) both}
.gate__logo .lg-l{transform-origin:50% 50%;animation:lg-close .8s .3s var(--ease) both}
.gate__logo .lg-b{transform-origin:50% 50%;animation:lg-drop 1.05s .45s both}
@keyframes lg-rise{from{transform:translateY(22%);opacity:0}to{transform:none;opacity:1}}
@keyframes lg-close{from{transform:scaleX(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes lg-drop{
  0%  {transform:translateY(-320%) scale(.85);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  12% {opacity:1}
  46% {transform:translateY(0) scale(1.08,.88);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  63% {transform:translateY(-16%) scale(.97,1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  78% {transform:translateY(0) scale(1.03,.96);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  89% {transform:translateY(-4%)}
  100%{transform:none;opacity:1}
}

.gate__title{
  font-family:var(--display);text-transform:uppercase;color:var(--can-green);
  font-size:clamp(1.45rem,1rem + 2.3vw,2.5rem);line-height:1;letter-spacing:-.02em;
  animation:gate-in .8s .75s var(--ease) both;
}
.gate__title .script{display:block;color:var(--ink);text-transform:none;font-size:1.14em;margin-top:.06em}
.gate__sub{
  margin-top:.9rem;color:var(--ink-60);font-size:var(--t-small);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  animation:gate-in .8s .82s var(--ease) both;
}
.gate__actions{
  display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(1.3rem,3.4vh,2.1rem);
  animation:gate-in .8s .9s var(--ease) both;
}
.gate__actions .btn{min-width:170px;justify-content:center}
.gate__legal{
  margin:clamp(1.3rem,3vh,1.9rem) auto 0;font-size:var(--t-micro);line-height:1.7;
  color:var(--ink-60);max-width:46ch;
  animation:gate-in .8s .98s var(--ease) both;
}
.gate__legal a{color:var(--can-green);text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* the can's base band */
.gate__band{
  position:relative;z-index:2;background:var(--can-green);color:#fff;
  display:flex;justify-content:center;gap:.4rem clamp(1rem,4vw,3rem);flex-wrap:wrap;
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  font-weight:700;font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;
  animation:band-up .8s .2s var(--ease) both;
}
@keyframes band-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes gate-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gate.is-leaving{animation:gate-out .72s var(--ease) forwards}
@keyframes gate-out{to{opacity:0;transform:scale(1.05);visibility:hidden}}

.gate__denied{display:none}
.gate.is-denied .gate__ask{display:none}
.gate.is-denied .gate__denied{display:block}
.gate.is-denied .gate__denied > *{animation:gate-in .6s var(--ease) both}

/* can-green buttons for the white label */
.btn--can{--bg:#146C32;--fg:#fff}
.btn--can-ghost{--bg:transparent;--fg:#146C32;box-shadow:inset 0 0 0 1.5px #146C32}
.btn--can-ghost::after{background:#146C32}
.btn--can-ghost:hover{color:#fff}

/* short screens (landscape phones, small laptops): tighten everything */
@media(max-height:620px){
  .gate__logo{width:clamp(120px,26vh,200px);margin-bottom:.8rem}
  .gate__legal{display:none}
  .gate__band{padding-block:.6rem}
}

/* ---------- 8. NAV ---------- */
/* Notched phones: the page runs under the status bar (viewport-fit=cover), so the
   fixed header clears it, and any inset gutter paints pine rather than cream. */
html{background:var(--pine)}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.75rem var(--gutter);
  padding-top:calc(.75rem + env(safe-area-inset-top,0px));
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease),color .45s var(--ease);
  color:var(--cream);
}
.nav.is-stuck{
  background:rgba(12,53,32,.93);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  padding-block:.5rem;box-shadow:0 1px 0 var(--cream-18);
}
.nav.is-hidden{transform:translateY(-100%)}
.nav{transition:transform .5s var(--ease),background .45s var(--ease),padding .45s var(--ease)}
.nav--solid{background:var(--pine)}
.nav__logo{display:flex;align-items:center;gap:.65rem;flex:none;z-index:2}
.nav__logo .logo{height:clamp(42px,4.4vw,52px);width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.nav__links a{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  position:relative;padding-block:.4rem;opacity:.86;transition:opacity .3s
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--honey);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease)
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__links a[aria-current="page"]{opacity:1}
.nav__cta{display:flex;align-items:center;gap:.75rem;flex:none}
.nav__burger{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  place-items:center;border-radius:50%;
}
.nav__burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:.4s var(--ease)}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:.4s var(--ease)
}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__burger span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1000px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__cta .btn--nav{display:none}
}

/* Mobile drawer — self-contained: it carries its own brand and close control,
   because its clip-path forms a stacking context the fixed nav cannot reliably
   paint above. */
.drawer{
  position:fixed;inset:0;z-index:190;background:var(--pine);color:var(--cream);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:0 var(--gutter) clamp(2rem,6vh,3rem);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.05rem;min-height:66px;
  padding-top:calc(1.05rem + env(safe-area-inset-top,0px));
}
.drawer__close{
  width:46px;height:46px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--cream-18);border-radius:50%;background:transparent;color:inherit;
  transition:.35s var(--ease);
}
.drawer__close svg{width:20px;height:20px}
.drawer__close:hover{background:var(--honey);border-color:var(--honey);color:var(--pine)}
.drawer__nav{display:grid;gap:.15rem;align-content:center}
.drawer__nav a{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.85rem,8.5vw,3rem);line-height:1.12;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.7rem;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer.is-open .drawer__nav a:nth-child(1){transition-delay:.12s}
.drawer.is-open .drawer__nav a:nth-child(2){transition-delay:.18s}
.drawer.is-open .drawer__nav a:nth-child(3){transition-delay:.24s}
.drawer.is-open .drawer__nav a:nth-child(4){transition-delay:.30s}
.drawer.is-open .drawer__nav a:nth-child(5){transition-delay:.36s}
.drawer__nav a:hover{color:var(--honey-lt)}
.drawer__nav a i{
  font-style:normal;font-family:var(--sans);font-weight:700;
  font-size:var(--t-micro);letter-spacing:.12em;opacity:.45;flex:none;
}
.drawer__foot{
  display:flex;gap:.75rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid var(--cream-18);
  opacity:0;transition:opacity .5s .46s;
}
.drawer__foot .btn{flex:1 1 auto;justify-content:center}
.drawer.is-open .drawer__foot{opacity:1}

/* ---------- 9. HERO ---------- */
/* Split composition: type on pine at left, the 9:16 clip standing full-height
   at right so vertical footage is never crushed into a letterbox crop.
   Under 900px the clip goes full-bleed behind the type — portrait into portrait. */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  background:var(--pine);color:var(--cream);overflow:hidden;isolation:isolate;
  padding-block:clamp(6.5rem,12vh,8rem) clamp(4.5rem,8vh,6rem);
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--pine)}
.hero__vid{position:absolute;inset:0;width:100%;height:100%}
.hero__vid--m{display:none}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,28,16,.92) 0%, rgba(6,28,16,.82) 22%, rgba(6,28,16,.55) 42%,
    rgba(6,28,16,.22) 60%, rgba(6,28,16,.04) 78%, transparent 92%);
}
@media(max-width:900px){.hero__media::after{display:none}}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:52% 50%;
  transform:scale(1.06);will-change:transform;
  filter:saturate(1.06) contrast(1.03) brightness(1.04);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,28,16,.45) 0%, transparent 20%, transparent 58%, rgba(6,28,16,.55) 100%);
}
/* dimple texture only over the flat pine panel, masked away from the footage */
.hero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(244,239,227,.06) 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, rgba(244,239,227,.06) 38%, transparent 39%);
  background-size:30px 30px,30px 30px;background-position:0 0,15px 15px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 52%);
  mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 52%);
}
@media(max-width:900px){
  .hero__vid--d{display:none}
  .hero__vid--m{display:block}
  /* A 9:16 clip in a 9:19.5 phone viewport gets no vertical crop, so the can is
     pinned to the middle of the screen — exactly where the headline goes. Give the
     video its own band across the top instead and let it fade into pine. */
  .hero{padding-block:0 clamp(1.5rem,3.5vh,2rem);align-content:end}
  .hero__media{inset:0 0 auto 0;height:40svh}
  .hero__media video,.hero__media img{object-position:50% 42%}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(6,28,16,.58) 0%, rgba(6,28,16,.06) 14%, rgba(6,28,16,.04) 34%,
      rgba(6,28,16,.45) 46%, rgba(6,28,16,.92) 53%, var(--pine) 58%, var(--pine) 100%);
  }
  .hero__grain{-webkit-mask-image:linear-gradient(180deg,transparent 46%,#000 62%);mask-image:linear-gradient(180deg,transparent 46%,#000 62%)}
  .hero__inner{padding-top:calc(40svh + clamp(.9rem,2.2vh,1.35rem))}
  .hero__title{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  .hero__blurb{font-size:clamp(.94rem,.9rem + .4vw,1.05rem);line-height:1.38;max-width:34ch}
  .hero__bottom{gap:1.1rem;margin-top:1.1rem}
  .hero__cta .btn{padding:.95em 1.6em}
}
.hero__inner{position:relative;z-index:3;width:100%}
.hero__col{max-width:min(100%,58ch)}
@media(min-width:901px){.hero__col{max-width:56%}}
@media(min-width:1300px){.hero__col{max-width:50%}}

.hero__title{font-size:var(--t-h1);text-transform:uppercase;letter-spacing:-.035em;line-height:.88}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln > span{display:block;transition:transform 1.05s var(--ease)}
.rv-on .hero:not(.is-in) .hero__title .ln > span{transform:translateY(105%)}
.hero.is-in .hero__title .ln > span{transform:none}
.hero__title .ln:nth-child(2) > span{transition-delay:.1s}
.hero__title .ln:nth-child(2){color:var(--honey-lt)}
.hero__bottom{display:grid;gap:clamp(1.4rem,3vw,2rem);margin-top:clamp(1.6rem,3.5vw,2.5rem)}
.hero__blurb{max-width:40ch;font-size:var(--t-lead);line-height:1.42;color:var(--cream-70)}
.hero__blurb strong{color:var(--cream);font-weight:600}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap}
.hero__fade{transition:opacity .9s .42s var(--ease),transform .9s .42s var(--ease)}
.rv-on .hero:not(.is-in) .hero__fade{opacity:0;transform:translateY(24px)}
.hero.is-in .hero__fade{opacity:1;transform:none}

/* scorecard strip pinned to the hero floor */
.hero__strip{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;
  padding:1rem var(--gutter);
  border-top:1px solid var(--cream-18);
  background:linear-gradient(transparent,rgba(6,28,16,.55));
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--cream-70);
}
.hero__strip b{color:var(--honey-lt);font-weight:700}
@media(max-width:700px){.hero__strip{display:none}}

/* Scroll cue — a ball falling into a cup */
.cue{
  position:absolute;left:50%;bottom:4.2rem;z-index:4;transform:translateX(-50%);
  display:grid;place-items:center;gap:.6rem;
  font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-45);font-weight:700;
}
.cue__track{width:1px;height:46px;background:var(--cream-18);position:relative;overflow:hidden}
.cue__ball{
  position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--cream);transform:translateX(-50%);
  animation:cue-drop 2.1s var(--ease-io) infinite;
}
@keyframes cue-drop{
  0%{transform:translate(-50%,-10px);opacity:0}
  22%{opacity:1}
  70%{transform:translate(-50%,44px);opacity:1}
  86%,100%{transform:translate(-50%,46px) scale(.3);opacity:0}
}
@media(max-width:1100px){.cue{display:none}}

/* ---------- 10. MARQUEE (scorecard ticker) ---------- */
.ticker{
  background:var(--honey);color:var(--pine);overflow:hidden;
  padding-block:.95rem;border-block:1.5px solid var(--pine);
}
.ticker--pine{background:var(--pine);color:var(--cream);border-color:var(--cream-18)}
.ticker__row{display:flex;width:max-content;animation:marq 38s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.82rem,.5rem + .7vw,1.15rem);letter-spacing:.06em;
  padding-inline:1.1rem;display:flex;align-items:center;gap:1.1rem;flex:none;
}
.ticker__row span::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 10b. FIND-IT STRIP (home, under the hero) ---------- */
.findit{background:var(--bone);border-bottom:1px solid var(--ink-08)}
.findit__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem 2.5rem;flex-wrap:wrap;padding-block:clamp(1.5rem,3vw,2.1rem)}
.findit h2{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);text-transform:uppercase}
.findit p{color:var(--ink-60);font-size:var(--t-small);margin-top:.3rem}
.findit form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.findit input{
  width:9.5rem;padding:.85rem 1.1rem;border-radius:999px;border:1.5px solid var(--ink-14);background:var(--paper);
  font-variant-numeric:tabular-nums;letter-spacing:.08em
}
.findit input:focus{outline:0;border-color:var(--fairway);box-shadow:0 0 0 4px rgba(30,122,60,.14)}
.findit__alt{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:var(--t-small)}
.findit__alt a{color:var(--fairway)}
@media(max-width:620px){.findit input{flex:1 1 8rem}}

/* ---------- 10c. MOBILE FIND BAR ---------- */
.findbar{display:none}
@media(max-width:900px){
  .findbar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(12,53,32,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:var(--cream);box-shadow:0 -1px 0 var(--cream-18);
    transform:translateY(110%);transition:transform .45s var(--ease);
  }
  .findbar.is-on{transform:none}
  .findbar span{font-size:var(--t-small);font-weight:600;line-height:1.3}
  .findbar span b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em}
  .foot{padding-bottom:5rem}
}

/* ---------- 11. REVEALS ---------- */
/* Content is visible by default. JS marks everything already on screen as
   revealed, then adds .rv-on to <html>; only content still below the fold waits
   for the scroll. No JS, or a slow device, never sees a blank page. */
[data-rv]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-on [data-rv]:not(.is-in){opacity:0}
.rv-on [data-rv="up"]:not(.is-in){transform:translateY(22px)}
.rv-on [data-rv="left"]:not(.is-in){transform:translateX(-26px)}
.rv-on [data-rv="right"]:not(.is-in){transform:translateX(26px)}
.rv-on [data-rv="scale"]:not(.is-in){transform:scale(.97)}
[data-rv="wipe"]{transition:clip-path 1s var(--ease)}
.rv-on [data-rv="wipe"]:not(.is-in){opacity:1;clip-path:inset(0 100% 0 0)}
.rv-now,.rv-now .ln > span{transition:none!important}

/* Split-line headline reveal */
.split .ln{display:block;overflow:hidden}
.split .ln > span{display:block;transition:transform .9s var(--ease)}
.rv-on .split:not(.is-in) .ln > span{transform:translateY(102%)}
.split.is-in .ln:nth-child(2) > span{transition-delay:.08s}
.split.is-in .ln:nth-child(3) > span{transition-delay:.16s}
.split.is-in .ln:nth-child(4) > span{transition-delay:.24s}

/* ---------- 12. STATEMENT ---------- */
.statement{text-align:center}
.statement__big{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.9rem,1rem + 4.4vw,5rem);line-height:.96;letter-spacing:-.03em;
  max-width:18ch;margin-inline:auto;
}
.statement__big .script{color:var(--fairway);display:block;font-size:1.16em;margin-top:.04em}
.section--dark .statement__big .script{color:var(--honey-lt)}

/* ---------- 13. SPIN (scroll-driven 360) ---------- */
/* Desktop: the section is tall, the stage pins, and scroll steps the frames.
   Under 820px the whole conceit is dropped — no scroll-jacking on a phone. */
.spin{background:var(--bone);position:relative;height:180vh}
.spin__sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.spin__stage{position:relative;width:min(92vw,1240px);height:100%;display:grid;place-items:center}
.spin__head{text-align:center;position:absolute;top:clamp(4.5rem,11vh,7rem);left:0;right:0;z-index:3}
.spin__head .eyebrow{justify-content:center}
.spin__head h2{margin-top:.7rem}
.spin__specs{display:contents}
.spin__can{
  width:clamp(150px,22vw,300px);height:auto;
  filter:drop-shadow(0 34px 44px rgba(12,53,32,.26));
}
.spin__ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(70vmin,520px);aspect-ratio:1;border-radius:50%;
  border:1px dashed var(--ink-14);pointer-events:none;
}
.spin__ring::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid var(--ink-08)}

.spec{
  position:absolute;display:grid;gap:.15rem;max-width:200px;z-index:2;
  opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.spec.is-on{opacity:1;transform:none}
.spec__k{font-family:var(--display);font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem);line-height:1;color:var(--fairway)}
.spec__l{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-60)}
.spec__d{font-size:var(--t-small);color:var(--ink-60);line-height:1.45}
.spec--tl{top:22%;left:0}
.spec--bl{bottom:20%;left:0}
.spec--tr{top:22%;right:0;text-align:right;justify-items:end}
.spec--br{bottom:20%;right:0;text-align:right;justify-items:end}

.spin__scrub{
  position:absolute;left:50%;bottom:clamp(1.5rem,4vh,3rem);transform:translateX(-50%);
  width:min(58vw,300px);height:2px;background:var(--ink-14);border-radius:2px;overflow:hidden;z-index:3
}
.spin__scrub i{display:block;height:100%;width:0;background:var(--fairway);transition:width .1s linear}

@media(max-width:820px){
  .spin{height:auto}
  .spin__sticky{position:static;height:auto;display:block;padding-block:var(--sec)}
  .spin__stage{height:auto;display:block;width:100%;padding-inline:var(--gutter);margin-inline:auto;max-width:var(--max)}
  .spin__head{position:static;margin-bottom:clamp(2rem,5vw,3rem)}
  .spin__ring,.spin__scrub{display:none}
  .spin__can{width:min(52vw,230px);margin:0 auto clamp(2.5rem,6vw,3.5rem)}
  .spin__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,4vw,2.25rem)}
  .spec{
    position:static;max-width:none;opacity:1;transform:none;
    text-align:left!important;justify-items:start!important;
  }
}
@media(max-width:480px){.spin__specs{grid-template-columns:1fr}}

/* ---------- 14. CARDS ---------- */
.card{
  background:var(--paper);border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 1px 0 var(--ink-08), 0 22px 50px -34px rgba(12,53,32,.4);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-7px);box-shadow:0 1px 0 var(--ink-08),0 34px 62px -30px rgba(12,53,32,.46)}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:clamp(1.4rem,2.4vw,2rem);display:grid;gap:.7rem;align-content:start;flex:1}
.card__body h3{font-size:var(--t-h3)}
.card--dark{background:var(--pine-2);color:var(--cream)}
.card--dark .muted{color:var(--cream-70)}

/* Reason card — numbered like holes */
.reason{
  position:relative;padding:clamp(1.6rem,2.6vw,2.2rem);
  border-radius:20px;background:var(--paper);
  box-shadow:0 1px 0 var(--ink-08),0 20px 46px -36px rgba(12,53,32,.4);
  display:grid;gap:.8rem;align-content:start;overflow:hidden;
  transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease);
}
.reason::before{
  content:attr(data-n);position:absolute;top:-.34em;right:.06em;
  font-family:var(--display);font-size:clamp(5rem,9vw,8.5rem);line-height:1;
  color:var(--ink);opacity:.055;pointer-events:none;transition:opacity .5s,color .5s
}
.reason:hover{transform:translateY(-6px);background:var(--pine);color:var(--cream)}
.reason:hover::before{color:var(--honey);opacity:.3}
.reason:hover .muted{color:var(--cream-70)}
.reason:hover .reason__ic{background:var(--honey);color:var(--pine)}
.reason__ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--fairway);transition:.5s var(--ease);flex:none
}
.reason__ic svg{width:22px;height:22px}
.reason h3{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);text-transform:uppercase;letter-spacing:-.005em}

/* ---------- 15. INGREDIENTS ---------- */
.ing{position:relative;text-align:center;display:grid;gap:1.1rem;justify-items:center}
.ing__orb{
  width:clamp(130px,17vw,196px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);display:grid;place-items:center;position:relative;overflow:hidden;
  box-shadow:0 1px 0 var(--ink-08),0 26px 54px -34px rgba(12,53,32,.45);
  transition:transform .6s var(--ease)
}
.ing:hover .ing__orb{transform:translateY(-8px) rotate(-4deg)}
.ing__orb img{width:74%;height:74%;object-fit:contain;transition:transform .7s var(--ease)}
.ing:hover .ing__orb img{transform:scale(1.09)}
.ing__orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ink-08)
}
.ing h3{font-size:var(--t-h3)}
.ing p{max-width:30ch;color:var(--ink-60);font-size:var(--t-small);line-height:1.6}

/* ---------- 16. EDITORIAL BAND ---------- */
.band{position:relative;min-height:clamp(420px,72vh,760px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.band__media{position:absolute;inset:0;z-index:0}
.band__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.band__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,28,16,.88) 0%,rgba(6,28,16,.55) 48%,rgba(6,28,16,.2) 100%)}
.band__scrim--c{background:linear-gradient(180deg,rgba(6,28,16,.5),rgba(6,28,16,.75))}
.band__inner{position:relative;z-index:2;color:var(--cream);padding-block:clamp(3.5rem,8vw,6rem)}
.band__quote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.7rem,1rem + 3.3vw,4rem);line-height:1.04;letter-spacing:-.015em;
  max-width:19ch;
}
.band__cite{margin-top:1.4rem;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--honey-lt);font-weight:700}

/* ---------- 17. HORIZONTAL SCROLLER ---------- */
.rail{
  display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);padding-block:.5rem 1.6rem;
  scrollbar-width:thin;scrollbar-color:var(--ink-14) transparent;
}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--ink-14);border-radius:4px}
.rail__item{
  flex:0 0 clamp(250px,32vw,400px);scroll-snap-align:start;
  border-radius:20px;overflow:hidden;position:relative;aspect-ratio:3/4;
  background:var(--pine);
}
.rail__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.rail__item:hover img{transform:scale(1.07)}
.rail__item figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.4rem;color:var(--cream);z-index:2;
  background:linear-gradient(transparent,rgba(6,28,16,.9));
}
.rail__item figcaption b{font-family:var(--display);text-transform:uppercase;font-size:var(--t-h3);display:block;line-height:1}
.rail__item figcaption span{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--honey-lt);font-weight:700}

/* ---------- 18. STATS ---------- */
.stat{display:grid;gap:.4rem;padding-block:1rem;border-top:1px solid var(--cream-18)}
.stat__n{font-family:var(--display);font-size:clamp(2.4rem,1.4rem + 3.6vw,5rem);line-height:.9;color:var(--honey-lt)}
.stat__l{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--cream-70)}

/* ---------- 19. SPEC TABLE ---------- */
.spectable{width:100%;border-collapse:collapse;text-align:left}
.spectable th,.spectable td{padding:1.05rem .25rem;border-bottom:1px solid var(--ink-14);vertical-align:top}
.spectable th{
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--ink-60);width:42%;
}
.spectable td{font-weight:600}
.section--dark .spectable th,.section--dark .spectable td{border-color:var(--cream-18)}
.section--dark .spectable th{color:var(--cream-70)}

/* ---------- 20. ACCORDION / FAQ ---------- */
.acc{border-top:1px solid var(--ink-14)}
.acc__item{border-bottom:1px solid var(--ink-14)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.45rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,.9rem + .55vw,1.35rem);
  line-height:1.15;letter-spacing:-.01em;transition:color .3s
}
.acc__btn:hover{color:var(--fairway)}
.acc__ic{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink-14);display:grid;place-items:center;transition:.45s var(--ease)}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;width:12px;height:1.7px;background:currentColor;transition:.45s var(--ease)}
.acc__ic::after{transform:rotate(90deg)}
.acc__ic{position:relative}
.acc__item.is-open .acc__ic{background:var(--fairway);border-color:var(--fairway);color:var(--cream);transform:rotate(180deg)}
.acc__item.is-open .acc__ic::after{transform:rotate(90deg) scaleX(0)}
.acc__panel{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc__panel > div{padding-bottom:1.6rem;max-width:68ch;color:var(--ink-60);line-height:1.68}
.section--dark .acc,.section--dark .acc__item{border-color:var(--cream-18)}
.section--dark .acc__panel > div{color:var(--cream-70)}

/* ---------- 21. FORMS ---------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-60)}
.section--dark .field label{color:var(--cream-70)}
.field input,.field textarea,.field select{
  width:100%;padding:.95rem 1.1rem;border-radius:12px;
  border:1.5px solid var(--ink-14);background:var(--paper);
  transition:border-color .3s,box-shadow .3s
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--fairway);box-shadow:0 0 0 4px rgba(30,122,60,.14)
}
.section--dark .field input,.section--dark .field textarea,.section--dark .field select{
  background:rgba(255,255,255,.06);border-color:var(--cream-18);color:var(--cream)
}
.section--dark .field input::placeholder,.section--dark .field textarea::placeholder{color:var(--cream-45)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:620px){.form__row{grid-template-columns:1fr}}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t-small);line-height:1.55;color:var(--ink-60)}
.consent input{width:18px;height:18px;flex:none;margin-top:.22em;accent-color:var(--fairway)}
.section--dark .consent{color:var(--cream-70)}
.form__note{font-size:var(--t-micro);color:var(--ink-40);line-height:1.6}
.section--dark .form__note{color:var(--cream-45)}

/* Inline signup */
.signup{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px}
.signup input{
  flex:1 1 240px;padding:1.05rem 1.3rem;border-radius:999px;
  border:1.5px solid var(--cream-18);background:rgba(255,255,255,.07);color:var(--cream)
}
.signup input::placeholder{color:var(--cream-70)}
.signup input:focus{outline:0;border-color:var(--honey);box-shadow:0 0 0 4px rgba(216,162,61,.2)}

/* Light-text context parity: .section--fairway gets everything .section--dark gets. */
.section--fairway .field label,
.section--fairway .consent,
.section--fairway .form__note{color:var(--cream-70)}
.section--fairway .field input,
.section--fairway .field textarea,
.section--fairway .field select{
  background:rgba(255,255,255,.07);border-color:var(--cream-18);color:var(--cream)
}
.section--fairway .field input::placeholder,
.section--fairway .field textarea::placeholder{color:var(--cream-70)}
.section--fairway .note{color:var(--cream-70)}
.section--fairway .spectable th,.section--fairway .spectable td{border-color:var(--cream-18)}
.section--fairway .spectable th{color:var(--cream-70)}

/* ---------- 22. FOOTER ---------- */
.foot{background:var(--pine);color:var(--cream);padding-top:clamp(3.5rem,7vw,6rem)}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem)}
@media(max-width:980px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.foot__top{grid-template-columns:1fr}}
.foot .muted,.foot .note{color:var(--cream-70)}
.foot h4{font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--honey-lt);margin-bottom:1.1rem;font-family:var(--sans);font-weight:700}
.foot ul{display:grid;gap:.68rem}
.foot ul a{font-size:var(--t-small);color:var(--cream-70);transition:color .3s}
.foot ul a:hover{color:var(--cream)}
.logo--foot{height:clamp(96px,10vw,128px);width:auto;display:block;margin-bottom:.4rem}
.foot__warn{
  margin-top:clamp(3rem,6vw,4.5rem);padding:1.5rem;border-radius:16px;
  border:1px solid var(--cream-18);background:rgba(0,0,0,.18);
  font-size:var(--t-micro);line-height:1.7;color:var(--cream-70);
}
.foot__warn b{color:var(--cream);letter-spacing:.06em}
.foot__bottom{
  margin-top:2rem;padding-block:1.6rem;border-top:1px solid var(--cream-18);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:var(--t-micro);color:var(--cream-45);letter-spacing:.06em
}
.foot__bottom nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.social{display:flex;gap:.6rem;margin-top:1.4rem}
.social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--cream-18);transition:.4s var(--ease)
}
.social a:hover{background:var(--honey);border-color:var(--honey);color:var(--pine);transform:translateY(-3px)}
.social svg{width:17px;height:17px}

/* ---------- 23. PAGE HEADER (inner pages) ---------- */
.phead{
  position:relative;background:var(--pine);color:var(--cream);overflow:hidden;
  padding-block:clamp(8.5rem,17vh,12rem) clamp(3.5rem,7vw,5.5rem);
}
.phead__media{position:absolute;inset:0;z-index:0}
.phead__media img{width:100%;height:100%;object-fit:cover;opacity:.4;transform:scale(1.1);will-change:transform}
.phead__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,28,16,.86),rgba(6,28,16,.62) 55%,rgba(6,28,16,.95))}
.phead__inner{position:relative;z-index:2}
.phead h1{font-size:clamp(2.4rem,1.3rem + 5vw,6rem);text-transform:uppercase;letter-spacing:-.03em}
.phead p{margin-top:1.2rem;max-width:56ch;font-size:var(--t-lead);color:var(--cream-70);line-height:1.42}
.crumb{display:flex;gap:.6rem;align-items:center;font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-45);margin-bottom:1.3rem;font-weight:700}
.crumb a:hover{color:var(--honey-lt)}

/* ---------- 24. LEGAL / LONGFORM ---------- */
.legal{max-width:78ch}
.legal h2{
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem);text-transform:uppercase;
  margin-top:clamp(2.75rem,5vw,3.75rem);margin-bottom:.9rem;scroll-margin-top:7rem
}
.legal h3{
  font-family:var(--sans);font-weight:700;font-size:1.03rem;letter-spacing:.02em;
  text-transform:none;margin-top:1.9rem;margin-bottom:.5rem;line-height:1.35
}
.legal p{margin-bottom:1.1rem;color:var(--ink-60);line-height:1.72}
.legal ul,.legal ol{margin:0 0 1.2rem;padding-left:1.3rem;display:grid;gap:.55rem;color:var(--ink-60);line-height:1.68}
.legal ul li{list-style:disc}
.legal ol li{list-style:decimal}
.legal a{color:var(--fairway);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.legal strong{color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:var(--t-small)}
.legal th,.legal td{border:1px solid var(--ink-14);padding:.75rem .9rem;text-align:left;vertical-align:top}
.legal th{background:var(--cream);font-weight:700;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.legal__meta{
  display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border-radius:14px;
  background:var(--cream);border:1px solid var(--ink-14);margin-bottom:2.5rem;
  font-size:var(--t-small);color:var(--ink-60)
}
.legal__meta b{color:var(--ink)}
.toc{
  position:sticky;top:6.5rem;align-self:start;display:grid;gap:.55rem;
  padding-left:1.1rem;border-left:2px solid var(--ink-14)
}
.toc a{font-size:var(--t-small);color:var(--ink-60);transition:color .3s,transform .3s;display:block}
.toc a:hover{color:var(--fairway);transform:translateX(3px)}
.legal-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:940px){.legal-layout{grid-template-columns:1fr}.toc{display:none}}

/* ---------- 25. MISC ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:999px;
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:var(--cream);color:var(--fairway);border:1px solid var(--ink-08)
}
.section--dark .pill{background:rgba(255,255,255,.08);color:var(--honey-lt);border-color:var(--cream-18)}
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;padding:1rem 1.5rem;
  background:var(--honey);color:var(--pine);font-weight:700
}
.skip:focus{left:1rem;top:1rem}
.note{font-size:var(--t-small);color:var(--ink-40);line-height:1.6}
.flagline{display:flex;align-items:center;gap:1rem;margin-block:clamp(2rem,5vw,3.5rem)}
.flagline i{flex:1;height:1px;background:var(--ink-14)}
.flagline svg{width:26px;height:26px;color:var(--fairway);flex:none}
.section--dark .flagline i{background:var(--cream-18)}
.section--dark .flagline svg{color:var(--honey)}

/* ---------- 26. ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__title .ln > span,.split .ln > span{transform:none!important}
  .spec{opacity:1;transform:none}
  .hero__media img,.hero__media video,
  .band__media img,.band__media video,
  .phead__media img{transform:scale(1.02)!important}
  .cue,.spin__scrub{display:none!important}
}

/* ---------- 28. VIDEO MEDIA ---------- */
.vmedia{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--pine)}
.vmedia video,.vmedia img{
  width:100%;height:100%;object-fit:cover;object-position:62% 52%;
  transform:scale(1.1);will-change:transform;
  filter:saturate(1.06) contrast(1.04) brightness(1.06);
}
.vframe{
  position:relative;border-radius:22px;overflow:hidden;background:var(--pine);
  aspect-ratio:3/4;box-shadow:0 30px 70px -40px rgba(12,53,32,.6)
}
.vframe video{width:100%;height:100%;object-fit:cover}
.vframe--wide{aspect-ratio:4/3}

/* ---- form submission -------------------------------------------------
   Forms post to Netlify, which identifies each one by a hidden form-name
   field. The honeypot sits off-screen rather than display:none so that
   bots filling every field still trip it. The success message carries an
   inline colour, so the error state has to outrank it.                  */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg[data-error]{color:#a3160d !important}
.section--dark .form__msg[data-error],
.section--fairway .form__msg[data-error]{color:#ffb4a8 !important}