/* ============================================================
   INHAUSS — minimal scroll-story site
   Grays + white, mint/green accent.
   ============================================================ */

:root{
  --paper:      #ffffff;
  --paper-2:    #f6f7f6;
  --line:       #e4e7e5;
  --ink:        #0c0e0d;
  --ink-2:      #4b504d;
  --ink-3:      #8d938f;

  --mint:       #e0f1e7;   /* brand tint, from the logo file */
  --mint-2:     #c2e4d1;
  /* the single brand green, lifted from the 2026 brochure:
     CMYK 93.4 / 60.2 / 56.3 / 46.9 → #09363B */
  --green:      #09363b;
  --green-rgb:  9, 54, 59;
  /* dimmed ends for the B5 heading gradient (bright → muted, left to right) */
  --mint-dim:   #7d9c8b;
  --green-dim:  #4a6f70;

  --pad:        clamp(20px, 5vw, 88px);
  --maxw:       1320px;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Geist', 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-0.035em; line-height:1.02; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--mint); color:var(--green); }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }
.act--dark :focus-visible{ outline-color:var(--mint); }

/* ── shared bits ─────────────────────────────────────────── */

.eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.act--dark .eyebrow{ color:rgba(224,241,231,.5); }

.logo{ width:120px; height:auto; display:block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  border-radius:100px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px; font-weight:500; letter-spacing:-0.01em;
  border:1px solid var(--ink);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--green); border-color:var(--green); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--sm{ padding:9px 18px; font-size:13px; }
.btn--lg{
  padding:20px 40px; font-size:clamp(15px,1.6vw,19px);
  background:var(--mint); color:var(--green); border-color:var(--mint);
}
.btn--lg:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }

/* ── scroll progress ─────────────────────────────────────── */

.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--green);
  transition:width .08s linear, background .5s var(--ease);
}
/* the brand green disappears against the dark sections — swap to mint there */
.progress.is-dark span{ background:var(--mint); }

/* ── nav ─────────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  color:var(--ink);
  transform:translateY(-110%);
  opacity:0;
  transition:transform .7s var(--ease-out), opacity .5s var(--ease), color .5s var(--ease);
}
.nav.is-on{ transform:none; opacity:1; }
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-dark{ color:var(--mint); }
.nav.is-dark::before{ background:rgba(12,14,13,.6); border-bottom-color:rgba(224,241,231,.12); }
.nav.is-dark .btn{ background:var(--mint); color:var(--green); border-color:var(--mint); }

.nav__logo{ display:flex; align-items:center; min-height:44px; }
.nav__logo .logo{ width:96px; }
.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); font-size:13px; letter-spacing:-0.01em; }
.nav__links a:not(.btn){ color:inherit; opacity:.62; transition:opacity .3s; }
.nav__links a:not(.btn):hover{ opacity:1; }

/* ── reveal primitive ────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ── scrub text (word-by-word, tied to scroll) ───────────── */

.scrub-text{ display:block; }
.scrub-text .w{
  display:inline-block;
  /* floor rises with --enter so the block is legible the moment it arrives,
     instead of sitting at 8% until the pin locks */
  opacity:clamp(calc(.05 + var(--enter,0) * .26),
                calc(var(--p,0) * var(--n) * 1.25 - var(--i)), 1);
  transform:translateY(calc((1 - clamp(0, calc(var(--p,0) * var(--n) * 1.25 - var(--i)), 1)) * 0.22em));
  will-change:opacity, transform;
}

/* ============================================================
   HERO — pinned intro. Pure motion, no copy.

   A looping wall of real work behind a centred lockup whose letters morph
   into service icons. The wall is driven by scroll velocity (JS), the
   letters by their own clock. When the pin releases the section simply
   scrolls away at full strength.

   Nothing reacts to the cursor. --p comes from the scrub engine,
   which is rAF throttled (B7).
   ============================================================ */

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.hero{
  position:relative;
  height:190vh;                     /* short runway: the intro must not overstay */
  background:var(--green);
}

.hero__pin{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  background:var(--green);
  isolation:isolate;

  /* every beat runs back to back, so something is always changing and the
     sequence never parks on a static screen */
  /* No exit fade. The pin releases and the whole section scrolls away,
     carrying the wall and the lockup with it at full strength — dissolving
     them while the panel is still locked reads as vanishing for no reason.
     The section below choreographs its own arrival off --enter. */
}

/* ── BEAT 1 · the wall of work ──────────────────────────
   Columns are driven by scroll VELOCITY in JS, not by --p, and wrap
   modulo one set height so they loop forever. Scroll harder, they travel
   further. Contents are shuffled per column so the whole catalogue is in
   rotation rather than each column cycling its own few pieces. */

.wall{
  position:absolute; inset:-14% -4%;
  z-index:0;
  display:flex; gap:16px;
  opacity:1;
  will-change:transform;
}
.wall__col{
  flex:1 1 0;
  display:flex; flex-direction:column; gap:16px;
  will-change:transform;              /* transform written by the rAF loop */
}
.wall__col img{
  width:100%; display:block;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:8px;
  background:rgba(224,241,231,.04);
}
.wall__col--x{ display:none; }
@media (min-width:1200px){ .wall__col--x{ display:flex; } }
@media (max-width:720px){
  .wall{ inset:-18% -10%; gap:10px; }
  .wall__col{ gap:10px; }
  .wall__col:nth-child(4){ display:none; }
}

/* ── BEAT 1 · the lockup, pinned dead centre ──────────────
   Large and mint, no outline and no shadow. At this scale the letterforms
   carry themselves over the artwork. */

.hero__brand{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  padding:0 var(--pad);
  opacity:1;
}
.hero__word{
  width:min(1400px, 92vw); height:auto;
  overflow:visible;
  color:var(--mint);
}

.hero__cue{
  position:absolute; left:50%; translate:-50% 0; bottom:48px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:12px; line-height:16px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint);
  opacity:calc(.45 - var(--p,0) * 2);
}
.hero__cue i{
  width:1px; height:32px;
  background:linear-gradient(var(--mint), transparent);
  animation:cue 2.1s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

@media (max-width:640px){
  .hero{ height:170vh; }   /* shorter on a phone: scrolling costs more there */
  .hero__word{ width:80vw; }
  .hero__cue{ display:none; }
}

/* ============================================================
   DARK SECTIONS
   ============================================================ */

.act--dark{ background:var(--ink); color:var(--mint); }

/* ACT I — pinned old-way statement */
.act{ position:relative; height:320vh; }
.act__stage{
  /* rides in on --enter so something is always moving into frame */
  opacity:calc(.25 + var(--enter,0) * .75);
  transform:translate3d(0, calc((1 - var(--enter,0)) * 26px), 0);
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.act__label{
  opacity:var(--enter,0);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(224,241,231,.45); margin-bottom:clamp(28px,4vw,54px);
}
.act .scrub-text{
  font-size:clamp(28px, 5.2vw, 74px);
  line-height:1.1; letter-spacing:-0.04em;
  max-width:19ch;
}
.act__kicker{
  margin-top:clamp(30px,4vw,56px);
  font-size:clamp(15px,1.6vw,20px);
  color:var(--mint);
  opacity:calc(var(--p,0) * 3 - 2.1);
  transform:translateY(calc((1 - clamp(0,calc(var(--p,0)*3 - 2.1),1)) * 14px));
}

/* ============================================================
   ACT II — STATEMENT
   ============================================================ */

.statement{
  padding:clamp(110px,16vw,220px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.statement__h{
  margin:clamp(26px,4vw,48px) 0 clamp(70px,10vw,140px);
  font-size:clamp(26px, 4.4vw, 62px);
  line-height:1.14; letter-spacing:-0.038em;
  max-width:22ch;
}
.statement__grid{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--line);
  padding-top:clamp(28px,4vw,48px);
}
.statement__grid .num{
  display:block; font-size:11px; letter-spacing:.16em; color:var(--green); margin-bottom:14px;
}
.statement__grid p{ color:var(--ink-2); font-size:15px; line-height:1.6; max-width:34ch; }

/* ============================================================
   ACT III — POD (infinite marquee)
   ============================================================ */

.pod{ background:var(--paper-2); padding:clamp(90px,12vw,160px) 0; overflow:hidden; }
.pod__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto clamp(34px,5vw,60px); }
.pod__head h2{
  margin-top:18px;
  font-size:clamp(28px,5vw,68px);
  letter-spacing:-0.04em; line-height:1.04;
}
.pod__rail{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.pod__track{
  display:flex; gap:clamp(16px,2vw,28px);
  width:max-content;
  will-change:transform;
}
.pod__card{
  flex:0 0 clamp(260px, 27vw, 380px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(24px,2.4vw,36px);
  min-height:clamp(300px,34vh,380px);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pod__card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -40px rgba(12,14,13,.4); }
.pod__card--tint{ background:var(--mint); border-color:transparent; }
.pod__idx{ font-size:11px; letter-spacing:.16em; color:var(--green); }
.pod__card h3{
  margin:auto 0 18px;
  font-size:clamp(24px,2.6vw,36px);
  letter-spacing:-0.035em; line-height:1.02;
}
.pod__card p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; min-height:4.8em; }
.pod__card--tint p{ color:var(--green); opacity:.82; }
.pod__foot{
  padding:clamp(30px,4vw,52px) var(--pad) 0;
  max-width:var(--maxw); margin:0 auto;
  color:var(--ink-3); font-size:14px;
}

/* ============================================================
   ACT IV — PROCESS
   ============================================================ */

.process{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,6vw,100px);
  align-items:start;
  padding:clamp(110px,15vw,200px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.process__sticky{ position:sticky; top:22vh; }
.process__sticky h2{
  margin-top:20px;
  font-size:clamp(30px,4.6vw,64px);
  letter-spacing:-0.042em; line-height:1.03;
}
.process__list li{
  padding:clamp(26px,3vw,40px) 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:64px 1fr; gap:0 12px;
}
.process__list li:last-child{ border-bottom:1px solid var(--line); }
.process__list span{ font-size:11px; letter-spacing:.16em; color:var(--green); padding-top:6px; }
.process__list h3{ font-size:clamp(19px,2vw,26px); letter-spacing:-0.03em; }
.process__list p{
  grid-column:2; margin-top:12px;
  color:var(--ink-2); font-size:15px; line-height:1.6; max-width:44ch;
}

/* ============================================================
   ACT V — COVERED
   ============================================================ */

.covered{ padding:clamp(90px,12vw,160px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.covered__grid{
  margin-top:clamp(26px,4vw,48px);
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.covered__item{
  position:relative; overflow:hidden; isolation:isolate;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(28px,4vw,64px) clamp(20px,2.4vw,36px);
  min-height:clamp(150px,20vw,250px);
  display:flex; align-items:flex-end;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
}
/* real work sits behind the label: a faint wash at rest, full on hover */
.covered__item img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  opacity:.14; transform:scale(1.05);
  transition:opacity .7s cubic-bezier(.32,.72,0,1),
             transform .9s cubic-bezier(.32,.72,0,1);
}
/* scrim only rises with the image, so the label never fights the photo */
.covered__item::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--green); opacity:0;
  transition:opacity .7s cubic-bezier(.32,.72,0,1);
}
.covered__item h3{
  position:relative;
  font-size:clamp(18px,2.2vw,30px); letter-spacing:-0.035em; line-height:1.08;
  transition:color .7s cubic-bezier(.32,.72,0,1);
}
.covered__item:hover img{ opacity:1; transform:scale(1); }
.covered__item:hover::after{ opacity:.58; }
.covered__item:hover h3{ color:var(--mint); }

/* Touch has no hover to give, so the work is simply always there.
   Keyed to width as well as pointer: some browsers report a fine pointer
   at phone widths, and a narrow window has no room for hover affordances
   either way. */
@media (hover:none), (max-width:640px){
  .covered__item img{ opacity:1; transform:none; }
  .covered__item::after{ opacity:.58; }
  .covered__item h3{ color:var(--mint); }
}

/* ============================================================
   ACT VI — HOUR CALCULATOR
   ============================================================ */

.calc{ padding:clamp(100px,14vw,190px) var(--pad); }
.calc__intro{ max-width:var(--maxw); margin:0 auto; }
.calc__intro h2{
  margin:20px 0 22px;
  font-size:clamp(30px,4.6vw,64px);
  letter-spacing:-0.042em; line-height:1.03;
}
.calc__note{ color:rgba(224,241,231,.55); font-size:15px; line-height:1.6; max-width:52ch; }

.calc__body{
  max-width:var(--maxw); margin:clamp(44px,6vw,76px) auto 0;
  display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(30px,4vw,70px); align-items:start;
}

/* items — a panel to match the summary card, so the list reads as a
   contained control rather than loose rows running to the edge */
.calc__items{
  border:1px solid rgba(224,241,231,.16);
  border-radius:22px;
  background:rgba(224,241,231,.02);
  padding:8px;
  display:flex; flex-direction:column; gap:2px;
}
/* No dividers. Each row is its own object, separated by space and told
   apart by state — hairlines between them just read as soft shadow. */
.calc__items li{
  display:grid;
  grid-template-columns:1fr auto 62px;
  align-items:center; gap:clamp(12px,2vw,24px);
  padding:clamp(12px,1.4vw,17px) clamp(10px,1.2vw,16px);
  /* inner radius = outer 22 minus the 8px gap */
  border-radius:14px;
  border:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.calc__items li:hover{ background:rgba(224,241,231,.035); }
.calc__items li.is-active{
  background:rgba(224,241,231,.075);
  border-color:rgba(224,241,231,.24);
}
.ci__name{ font-size:clamp(14.5px,1.4vw,17px); letter-spacing:-0.02em; }
.ci__per{
  grid-row:2; grid-column:1;
  font-size:12px; color:rgba(224,241,231,.42); margin-top:2px;
}

.ci__step{
  grid-row:1 / span 2; grid-column:2;
  display:flex; align-items:center; gap:4px;
  border:1px solid rgba(224,241,231,.2);
  border-radius:100px; padding:3px;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.calc__items li.is-active .ci__step{ border-color:var(--mint); background:rgba(224,241,231,.08); }
.ci__btn{
  /* 40px minimum so the steppers are reliably tappable, not 30px */
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-size:16px; line-height:1; color:var(--mint);
  opacity:.65;
  transition:background .25s, opacity .25s, transform .25s;
}
.ci__btn:hover:not(:disabled){ background:rgba(224,241,231,.14); opacity:1; transform:scale(1.08); }
.ci__btn:disabled{ opacity:.2; cursor:default; }
.ci__qty{
  min-width:26px; text-align:center;
  font-size:15px; font-variant-numeric:tabular-nums;
  color:rgba(224,241,231,.4);
  transition:color .3s;
}
.calc__items li.is-active .ci__qty{ color:var(--mint); }

.ci__sum{
  grid-row:1 / span 2; grid-column:3;
  text-align:right; font-size:15px; font-variant-numeric:tabular-nums;
  color:rgba(224,241,231,.3);
  transition:color .3s;
}
.calc__items li.is-active .ci__sum{ color:var(--mint); }

/* summary card */
.calc__out{ position:sticky; top:16vh; }
.calc__card{
  border:1px solid rgba(224,241,231,.16);
  border-radius:22px;
  padding:clamp(26px,2.6vw,38px);
  background:rgba(224,241,231,.035);
}
.calc__label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(224,241,231,.45); }
.calc__total{
  display:flex; align-items:baseline; gap:8px;
  margin:10px 0 26px;
  font-size:clamp(52px,6.4vw,86px); letter-spacing:-0.05em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc__total em{ font-size:.22em; letter-spacing:.04em; color:rgba(224,241,231,.5); }

.calc__meter{ position:relative; height:3px; background:rgba(224,241,231,.14); border-radius:2px; margin-bottom:44px; }
.calc__fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--mint); border-radius:2px;
  transition:width .6s var(--ease-out);
}
.calc__tick{
  position:absolute; left:var(--at); top:10px;
  transform:translateX(-50%);
  font-size:10.5px; color:rgba(224,241,231,.38);
  font-variant-numeric:tabular-nums;
}
.calc__tick i{
  position:absolute; left:50%; top:-11px;
  width:1px; height:8px; background:rgba(224,241,231,.28);
}

.calc__rec{ border-top:1px solid rgba(224,241,231,.14); padding-top:22px; margin-bottom:26px; }
.calc__recLabel{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(224,241,231,.45); }
.calc__recName{
  margin:8px 0 6px;
  font-size:clamp(20px,2.2vw,28px); letter-spacing:-0.035em;
}
.calc__recMeta{ font-size:13.5px; line-height:1.55; color:rgba(224,241,231,.5); }

.calc__go{ width:100%; }
.calc__reset{
  display:block; width:100%; margin-top:14px;
  font-size:13px; color:rgba(224,241,231,.42);
  padding:6px 0;
  transition:color .3s;
}
.calc__reset:hover{ color:var(--mint); }
.calc__disclaimer{
  margin-top:18px; font-size:12.5px; line-height:1.55;
  color:rgba(224,241,231,.32);
}

/* ============================================================
   ACT VII — PLANS
   ============================================================ */

.plans{ padding:clamp(100px,14vw,190px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.plans__h{
  margin:20px 0 clamp(44px,6vw,80px);
  font-size:clamp(30px,4.6vw,64px);
  letter-spacing:-0.042em; line-height:1.03;
}
.plans__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.plan{
  position:relative;
  border:1px solid var(--line); border-radius:22px;
  padding:clamp(26px,2.6vw,40px);
  display:flex; flex-direction:column;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out),
             border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover{ border-color:var(--ink-3); box-shadow:0 26px 60px -34px rgba(12,14,13,.32); }
.plan.is-picked{ border-color:var(--green); box-shadow:0 26px 60px -34px rgba(var(--green-rgb),.5); }
.plan h3{ font-size:clamp(21px,2vw,27px); letter-spacing:-0.035em; }
.plan__for{ margin-top:12px; color:var(--ink-2); font-size:14px; line-height:1.55; min-height:3em; }
.plan__price{
  margin:clamp(24px,3vw,40px) 0 clamp(22px,2.6vw,34px);
  font-size:clamp(34px,4vw,54px); letter-spacing:-0.045em; line-height:1;
}
.plan__price em{ font-size:.3em; letter-spacing:0; color:var(--ink-3); margin-left:4px; }
.plan ul{ border-top:1px solid var(--line); padding-top:20px; margin-bottom:30px; }
.plan li{
  padding:9px 0 9px 20px; position:relative;
  font-size:14.5px; color:var(--ink-2);
}
.plan li::before{
  content:''; position:absolute; left:0; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}
.plan .btn{ margin-top:auto; width:100%; }
.plan--feature{ background:var(--mint); border-color:transparent; }
.plan--feature .plan__for,
.plan--feature li{ color:var(--green); opacity:.82; }
.plan--feature ul{ border-top-color:rgba(var(--green-rgb),.2); }
.plan--feature .plan__price em{ color:var(--green); }
.plan__tag{
  position:absolute; top:-11px; left:clamp(26px,2.6vw,40px);
  background:var(--green); color:#fff;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
}

/* ============================================================
   ACT VIII — VOICES
   ============================================================ */

.voices{
  padding:clamp(90px,12vw,170px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
  border-top:1px solid var(--line);
}
.voices__grid{
  margin-top:clamp(30px,4vw,56px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px);
}
.voice{ margin:0; display:flex; flex-direction:column; }
.voice blockquote{
  margin:0 0 26px;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.5; letter-spacing:-0.025em;
}
.voice blockquote::before{ content:'“'; color:var(--green); }
.voice blockquote::after{ content:'”'; color:var(--green); }
.voice figcaption{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.voice strong{ display:block; font-weight:500; font-size:14.5px; }
.voice span{ display:block; margin-top:3px; color:var(--ink-3); font-size:13.5px; }

/* ============================================================
   CTA
   ============================================================ */

.cta{
  min-height:78svh;
  display:flex; align-items:center;
  padding:clamp(90px,12vw,170px) var(--pad);
}
.cta__inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.cta__h{
  margin:clamp(26px,4vw,48px) 0 clamp(40px,6vw,72px);
  font-size:clamp(34px,7vw,104px);
  letter-spacing:-0.05em; line-height:1.02;
  max-width:15ch;
}

/* ============================================================
   CONTACT FORM
   Sits on the dark CTA field. Tokens and curves are the page's own.
   ============================================================ */

.form{ max-width:640px; margin-top:clamp(24px,3vw,40px); }

.form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; margin-bottom:16px; }
.field label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(224,241,231,.5);
  margin-bottom:8px;
}
.field input,
.field textarea{
  font:inherit; font-size:16px;            /* 16px stops iOS zooming on focus */
  color:var(--mint);
  background:rgba(224,241,231,.04);
  border:1px solid rgba(224,241,231,.2);
  border-radius:12px;
  padding:14px 16px;
  min-height:52px;
  width:100%;
  transition:border-color .5s cubic-bezier(.32,.72,0,1),
             background .5s cubic-bezier(.32,.72,0,1);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.5; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(224,241,231,.32); }
.field input:hover,
.field textarea:hover{ border-color:rgba(224,241,231,.34); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--mint);
  background:rgba(224,241,231,.07);
}
/* keyboard users still get the page's standard ring */
.field input:focus-visible,
.field textarea:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

.field.is-bad input,
.field.is-bad textarea{ border-color:#e88b7d; }
.field__err{
  margin-top:8px;
  font-size:13px; line-height:1.4;
  color:#e88b7d;
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.form__trap{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; pointer-events:none;
}

.form__foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:24px;
  margin-top:24px;
}
.form__alt{ font-size:14px; line-height:1.5; color:rgba(224,241,231,.5); }
.form__alt a{
  color:var(--mint);
  border-bottom:1px solid rgba(224,241,231,.3);
  padding-bottom:2px;
  transition:border-color .5s cubic-bezier(.32,.72,0,1);
}
.form__alt a:hover{ border-color:var(--mint); }

#f-submit[disabled]{ opacity:.55; cursor:default; transform:none; }

.form__status{
  margin-top:16px; font-size:14px; line-height:1.5;
  color:#e88b7d;
}
.form__status:empty{ margin-top:0; }

/* success replaces the form in place */
.form__done{ max-width:640px; margin-top:clamp(24px,3vw,40px); }
.form__doneH{
  font-size:clamp(20px,2.4vw,28px); letter-spacing:-0.03em; line-height:1.2;
  color:var(--mint);
}
.form__doneP{
  margin-top:16px; font-size:15px; line-height:1.6;
  color:rgba(224,241,231,.6);
}
.form__doneP a{
  color:var(--mint);
  border-bottom:1px solid rgba(224,241,231,.3);
  padding-bottom:2px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ padding:clamp(60px,8vw,110px) var(--pad) 0; overflow:hidden; }
.foot__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(46px,6vw,80px);
  border-bottom:1px solid rgba(224,241,231,.14);
}
.foot__logo{ width:150px; color:var(--mint); }
.foot__tag{
  margin-top:22px;
  font-size:clamp(17px,1.7vw,21px); line-height:1.3; letter-spacing:-0.03em;
}
.foot__blurb{
  margin-top:16px; max-width:36ch;
  font-size:14px; line-height:1.6; color:rgba(224,241,231,.5);
}
.foot__mail{
  display:inline-block; margin-top:20px;
  font-size:14.5px; color:var(--mint);
  border-bottom:1px solid rgba(224,241,231,.3);
  padding-bottom:2px;
  transition:border-color .3s;
}
.foot__mail:hover{ border-color:var(--mint); }

.foot__col h3{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(224,241,231,.45); font-weight:500;
}
.foot__col ul{ margin-top:20px; }
.foot__col li{ margin-bottom:11px; }
.foot__col a{
  font-size:14.5px; color:rgba(224,241,231,.72);
  transition:color .3s;
}
.foot__col a:hover{ color:var(--mint); }
.foot__col em{ color:rgba(224,241,231,.35); font-size:.86em; margin-left:4px; }

.foot__bar{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  padding:26px 0;
  font-size:12.5px; color:rgba(224,241,231,.4);
}
.foot__doc{ margin-right:auto; }
.foot__up{ transition:color .3s; }
.foot__up:hover{ color:var(--mint); }

.foot__word{
  display:block; width:100%; height:auto;
  color:var(--mint); opacity:.07;
  margin-bottom:-2.2%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1000px){
  .process{ grid-template-columns:1fr; }
  .process__sticky{ position:static; }
  .calc__body{ grid-template-columns:1fr; }
  .calc__out{ position:static; }
  .plans__grid,.voices__grid{ grid-template-columns:1fr; }
  .plan__for{ min-height:0; }
  .covered__grid{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (pointer:coarse){
  .ci__btn{ width:44px; height:44px; }
  .ci__qty{ min-width:32px; }
  /* text links need real vertical room to be thumb-friendly */
  .foot__col a, .foot__mail{ display:inline-block; padding:7px 0; }
  .foot__col li{ margin-bottom:4px; }
  .calc__reset{ padding:12px 0; }
  .voices figcaption strong{ padding-top:2px; }
}

@media (max-width:640px){
  .nav__links a:not(.btn){ display:none; }
  .covered__grid{ grid-template-columns:1fr; }
  .act{ height:280vh; }
  .act .scrub-text{ max-width:none; }
  .pod__card{ flex-basis:76vw; }
  .process__list li{ grid-template-columns:44px 1fr; }
  .calc__items li{ grid-template-columns:1fr auto 46px; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
  .foot__doc{ margin-right:0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .scrub-text .w{ opacity:1 !important; transform:none !important; }
  .act{ height:auto; }
  .act__stage{ position:static; height:auto; padding-top:22vh; padding-bottom:22vh; }
  .act__kicker{ opacity:1; transform:none; }
  .pod__rail{ overflow-x:auto; }

  /* The intro's motion is all JS driven and gets skipped entirely here, so
     the pin would otherwise hold a frozen collage for two screens. Collapse
     it to a single static screen. */
  .hero{ height:100svh; }
  .hero__pin{ position:static; height:100svh; }
  .wall{ position:absolute; }
  .hero__cue{ display:none; }
}