/* ============================================================
   BND 10x option B - "The Field Guide, After Dark"
   WPA-poster night scene, drawn SVG artwork, paper objects
   pinned on a night canvas. Fraunces / Inter / Courier Prime.
   Night + cream + pine + sage + gold. No em dashes.
   ============================================================ */
html{overflow-x:clip}


:root{
  --night:#0c1219;--seam:#0a1219;
  --night-2:#101820;
  --night-3:#16212c;
  --paper:#e9ecef;
  --paper-2:#dfe3e7;
  --ink:#21262e;
  --ink-soft:#4a5058;
  --cream:#eef1f4;
  --cream-soft:#a9b3bd;
  --cream-dim:#7e8994;
  --pine:#1e3a52;        /* deep north-lake blue: bands, patch line-art */
  --sage:#7badd3;        /* brand sky: all accents */
  --sky-2:#7badd3;
  --gold:#c9a13b;
  --aurora:#57b894;
  --linew:rgba(238,241,244,.12);
  --linew-strong:rgba(238,241,244,.24);
  --maxw:1240px;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fdisplay:"worker","Archivo Black",system-ui,sans-serif;
  --faccent:"Fraunces",Georgia,serif;
  --fbody:"Inter",system-ui,sans-serif;
  --fmono:"Courier Prime",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:90px}
html.locked{overflow:hidden}
body{
  font-family:var(--fbody);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--night);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fdisplay);font-weight:800;line-height:1.04;letter-spacing:-.01em}
h1 em,h2 em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage);letter-spacing:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}

/* poster frame around the whole page */
.frame{
  position:fixed;inset:10px;z-index:98;pointer-events:none;
  border:1px solid rgba(238,241,244,.16);
}
.frame::before{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(238,241,244,.07);
}
@media(max-width:760px){.frame{display:none}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fmono);font-weight:700;font-size:.84rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:1.05rem 1.6rem;border-radius:var(--r);border:1.5px solid var(--cream);
  cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn--primary{background:var(--sage);border-color:var(--sage);color:var(--night)}
.btn--primary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(201,161,59,.55)}
.btn--ghost{background:rgba(12,18,25,.4);color:var(--cream);border-color:var(--linew-strong)}
.btn--ghost:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(238,241,244,.2);border-color:var(--cream)}
.btn--paper{background:var(--paper);border-color:var(--paper);color:var(--night)}
.btn--paper:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(123,173,211,.5)}
.btn--lg{padding:1.2rem 2rem;font-size:.88rem}

/* ---------- masthead ---------- */
.mast{
  background:var(--night-2);border-bottom:1px solid var(--linew);color:var(--cream-soft);
  font-family:var(--fmono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  position:relative;z-index:60;
}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.55rem}
.mast .mid b{font-weight:700;color:var(--cream)}
.mast .stars{color:var(--gold);letter-spacing:.1em}
@media(max-width:640px){
  .mast .hide-sm{display:none}
  .mast .wrap{justify-content:center}
}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(12,18,25,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--linew)}
.site-head .wrap{display:flex;align-items:center;gap:2rem;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .bear{width:40px;height:40px}
.brand .wordmark{height:20px;width:auto}
.nav{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.nav a{font-size:.92rem;font-weight:500;color:var(--cream-soft);transition:color .18s}
.nav a:hover{color:var(--sage)}
.head-cta{display:flex;align-items:center;gap:1.2rem}
.head-phone{display:flex;align-items:center;gap:.5rem;font-family:var(--fmono);font-size:.88rem;font-weight:700;color:var(--cream)}
.head-phone svg{width:16px;height:16px;color:var(--sage)}
.burger{display:none;background:none;border:1.5px solid var(--linew-strong);border-radius:var(--r);width:44px;height:44px;color:var(--cream);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}
@media(max-width:1060px){
  .nav,.head-phone{display:none}
  .burger{display:inline-flex}
}
@media(max-width:760px){
  .head-cta .btn--primary{display:none}
}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--night);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 0 100%);visibility:hidden;
  transition:clip-path .34s var(--ease),visibility 0s .34s;
}
.drawer.open{clip-path:inset(0);visibility:visible;transition:clip-path .34s var(--ease)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(20px,5vw,48px);border-bottom:1px solid var(--linew)}
.drawer__close{background:none;border:1.5px solid var(--linew-strong);border-radius:var(--r);width:44px;height:44px;color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer}
.drawer__close svg{width:20px;height:20px}
.drawer__nav{display:flex;flex-direction:column;padding:1.4rem clamp(20px,5vw,48px);overflow-y:auto}
.drawer__nav a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--fdisplay);font-weight:900;font-size:1.7rem;letter-spacing:-.01em;
  padding:.8rem 0;border-bottom:1px solid var(--linew);color:var(--cream);
}
.drawer__nav a span{font-family:var(--fmono);font-size:.7rem;color:var(--sage);letter-spacing:.1em}
.drawer__nav a:active{color:var(--sage)}
.drawer__foot{margin-top:auto;padding:1.4rem clamp(20px,5vw,48px) 2rem;border-top:1px solid var(--linew);display:flex;flex-direction:column;gap:1rem}
.drawer__foot .btn{justify-content:center}
.drawer__call{display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--fmono);font-weight:700;font-size:1rem;color:var(--cream);padding:.9rem;border:1.5px solid var(--linew-strong);border-radius:var(--r)}
.drawer__call svg{width:17px;height:17px;color:var(--sage)}
.drawer__foot p{font-family:var(--fmono);font-size:.68rem;letter-spacing:.08em;color:var(--cream-dim);text-align:center}
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55)}

/* ---------- hero: the poster ---------- */
.hero{position:relative;isolation:isolate;background:var(--seam);min-height:clamp(640px,92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.scene{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
/* The hero shares the .wrap class, which is max-width 1240 and margin-inline auto. Capping
   it at 820 here therefore CENTRED an 820px column instead of narrowing the measure: the
   headline started at 358 while the logo above it and every other section heading start at
   148, a 210px indent that lines up with nothing. Josh spotted it by eye.
   Keep the wrap at full width so the gutter matches the rest of the site, and cap the
   measure on the content inside it. */
.hero__content{padding-block:0 clamp(3rem,6vw,5rem)}
.hero__content > *{max-width:820px}
.hero__kick{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--fmono);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage-bright,#9fc6e4);
}
.hero__kick .orn{width:15px;height:15px;color:var(--sage)}
.hero__display{font-family:var(--fdisplay);font-weight:800;line-height:1.04;text-wrap:balance;letter-spacing:-.01em;font-size:clamp(2.9rem,5.6vw,4.9rem);margin-top:1.2rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero__display em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage);letter-spacing:0}
.hero__kick{margin:0;flex-wrap:wrap}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--cream-soft);margin-top:1.5rem;max-width:33em}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.8rem;margin-top:1.8rem}
.hero__chips{font-family:var(--fmono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim)}
.ratepill{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--paper);border:1.5px solid var(--paper);border-radius:999px;
  padding:.5rem 1rem .5rem .6rem;font-size:.86rem;color:var(--ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s;
}
.ratepill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(123,173,211,.4)}
.ratepill .star{width:26px;height:26px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.ratepill .star svg{width:15px;height:15px;color:#fff}
.ratepill b{font-weight:700}
.ratepill .sep{width:1px;height:14px;background:rgba(33,38,46,.3)}
.ratepill span:last-child{color:var(--ink-soft)}
@media(max-width:640px){
  .hero{min-height:0}
  .hero__content{padding-top:56vw}
}

/* ---------- proof strip ---------- */
.proof{background:var(--pine);color:var(--paper);border-block:1px solid rgba(0,0,0,.4)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.gauge{padding:2.1rem 1.4rem 1.7rem;text-align:center;position:relative}
.gauge + .gauge::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(238,241,244,.18)}
.g-read{font-family:var(--fdisplay);font-weight:900;font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:.12em;line-height:1}
.g-read .st{color:var(--gold)}
.g-star{width:.75em;height:.75em;color:var(--gold);align-self:center}
.g-lab{display:block;font-family:var(--fmono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,244,.66);margin-top:.5rem}
@media(max-width:720px){
  .proof__grid{grid-template-columns:repeat(2,1fr)}
  .gauge:nth-child(3)::before{display:none}
}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.8rem,5vw,3.4rem);padding-block:1.8rem;border-top:1px solid rgba(238,241,244,.18)}
.logo-row img{height:34px;width:auto;filter:brightness(0) invert(1) opacity(.72);transition:filter .2s}
.logo-row img:hover{filter:brightness(0) invert(1) opacity(1)}
.logo-div{height:30px;width:1px;background:rgba(238,241,244,.3)}

/* ---------- sections + lockups ---------- */
.section{position:relative;padding-block:clamp(4.5rem,9vw,7.5rem)}
.section--tint{background:var(--night-2);border-block:1px solid var(--linew)}
.lockup{
  display:flex;align-items:center;gap:1.1rem;margin-bottom:2.6rem;
  font-family:var(--fmono);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}
.lockup .orn{width:15px;height:15px;color:var(--sage);flex:none}
.lockup i{flex:1;max-width:220px;height:1px;background:linear-gradient(90deg,var(--sage),transparent);opacity:.6}
.ghostword{
  position:absolute;right:0;top:14%;z-index:0;pointer-events:none;user-select:none;
  writing-mode:vertical-rl;font-family:var(--fdisplay);font-weight:900;font-size:clamp(4rem,9vw,8rem);
  letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px rgba(238,241,244,.07);
}
.sec-head{position:relative;z-index:1;max-width:780px;margin-bottom:3rem}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--cream-soft);margin-top:1.2rem;max-width:44em}
.sec-more{margin-top:2.6rem}
/* No capsule. These read as field-guide spec lines, not UI chips: a sage check, the claim,
   and air. The pill was doing two jobs, and only one of them was necessary. Legibility over
   the hero scene was the real requirement, so that stays as a text shadow rather than a
   background plate, which is what made them look like tags.
   There were also two competing `.chips` rules; the second silently won on gap. One now. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.7rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;
  color:var(--cream);padding:0;border:0;background:none;
  text-shadow:0 1px 3px rgba(5,10,15,.9),0 0 16px rgba(5,10,15,.55)}
.chip svg{width:15px;height:15px;color:var(--sage);flex:none;stroke-width:3;
  filter:drop-shadow(0 1px 2px rgba(5,10,15,.9))}

/* beliefs: numbered creed + field photo */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--loose{align-items:start;grid-template-columns:1.15fr .85fr}
.split h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.creed{list-style:none;counter-reset:creed;position:relative;z-index:1}
.creed li{
  counter-increment:creed;position:relative;
  padding:1.5rem 0 1.5rem 4.4rem;border-top:1px solid var(--linew);
  color:var(--cream-soft);font-size:1.02rem;max-width:44em;
}
.creed li:last-child{border-bottom:1px solid var(--linew)}
.creed li b{display:block;color:var(--cream);font-family:var(--fdisplay);font-weight:900;font-size:1.25rem;letter-spacing:-.01em;margin-bottom:.3rem}
.creed li::before{
  content:counter(creed,decimal-leading-zero);
  position:absolute;left:0;top:1.55rem;
  font-family:var(--fdisplay);font-weight:900;font-size:2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(238,241,244,.45);
}
.fieldphoto{
  position:relative;background:var(--paper);border:1px solid rgba(0,0,0,.35);
  padding:.85rem .85rem 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
  transform:rotate(-1.6deg);margin-top:1rem;
}
.fieldphoto img{width:100%;height:auto;max-height:460px;object-fit:cover;object-position:62% center}
.fieldphoto figcaption{
  font-family:var(--fmono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:.7rem .15rem;text-align:left;
}
.tape{
  position:absolute;width:96px;height:30px;background:rgba(201,161,59,.4);
  border-inline:1px dashed rgba(0,0,0,.2);top:-14px;z-index:2;
}
.tape--l{left:8%;transform:rotate(-8deg)}
.tape--r{right:8%;transform:rotate(6deg)}

/* services: patches as the art */
.patch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.patch{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.patch__art{
  width:min(160px,100%);height:auto;margin-bottom:1.5rem;
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,.45));
  transition:transform .25s var(--ease),filter .25s;
  transform:rotate(var(--pr,0deg));
}
.patch:nth-child(1) .patch__art{--pr:-2deg}
.patch:nth-child(2) .patch__art{--pr:1.5deg}
.patch:nth-child(3) .patch__art{--pr:-1deg}
.patch:nth-child(4) .patch__art{--pr:2deg}
.patch:hover .patch__art{transform:rotate(0deg) translateY(-6px);filter:drop-shadow(8px 12px 0 rgba(123,173,211,.3))}
.patch h3{font-size:1.3rem;margin-bottom:.5rem}
.patch p{font-size:.93rem;color:var(--cream-soft)}
.patch__go{
  margin-top:auto;padding-top:1.2rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fmono);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);
}
.patch__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.patch:hover .patch__go svg{transform:translateX(4px)}
@media(max-width:960px){.patch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.patch-grid{grid-template-columns:1fr}}

/* results ledger */
.ledger{display:flex;flex-direction:column}
.lrow{
  display:grid;grid-template-columns:minmax(200px,320px) 1fr auto;gap:clamp(1rem,3vw,2.6rem);
  align-items:center;padding-block:2.1rem;border-top:1px solid var(--linew);
  transition:background .2s,padding-left .25s var(--ease);
}
.lrow:last-child{border-bottom:1px solid var(--linew)}
.lrow:hover{background:rgba(123,173,211,.05);padding-left:.8rem}
.lrow__num{
  font-family:var(--fdisplay);font-weight:900;font-size:clamp(2.8rem,6.4vw,4.9rem);
  color:var(--cream);letter-spacing:-.03em;line-height:.95;font-variant-numeric:lining-nums;
}
.lrow:hover .lrow__num{color:var(--sage)}
.lrow__body{display:flex;flex-direction:column;gap:.3rem}
.lrow__body .what{font-size:1.04rem;color:var(--cream)}
.lrow__body .who{font-family:var(--fmono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim)}
.lrow__go{
  display:inline-flex;align-items:center;gap:.5rem;justify-self:end;
  font-family:var(--fmono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);
  transition:color .2s;white-space:nowrap;
}
.lrow__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.lrow:hover .lrow__go{color:var(--sage)}
.lrow:hover .lrow__go svg{transform:translateX(4px)}
@media(max-width:700px){
  .lrow{grid-template-columns:1fr;gap:.6rem}
  .lrow__go{justify-self:start}
}

/* transparency */
.dash{background:var(--night-3);color:#f6f7f8;border:1px solid var(--linew-strong);border-radius:12px;box-shadow:0 30px 60px -28px rgba(0,0,0,.9);overflow:hidden}
.dash__bar{display:flex;align-items:center;gap:.45rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--linew);background:var(--night-2)}
.dash__bar span{width:9px;height:9px;border-radius:50%;background:var(--linew-strong)}
.dash__bar .dash__url{width:auto;height:auto;border-radius:3px;background:var(--night);color:#6b7b88;font-family:var(--fmono);font-size:.64rem;letter-spacing:.06em;padding:.22rem .8rem;margin-left:.6rem}
.dash__top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem .9rem;border-bottom:1px solid var(--linew)}
.dash__top .name{font-weight:700;font-size:.95rem}
.dash__live{display:flex;align-items:center;gap:.45rem;font-family:var(--fmono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aurora)}
.dash__live .pulse{width:8px;height:8px;border-radius:50%;background:var(--aurora);box-shadow:0 0 0 0 rgba(87,184,148,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(87,184,148,0)}100%{box-shadow:0 0 0 0 rgba(87,184,148,0)}}
.dash__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--linew)}
.dash__stat .k{font-family:var(--fmono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#6b7b88}
.dash__stat .v{font-weight:800;font-size:1.45rem;margin-top:.25rem}
.dash__stat .v small{font-size:.62rem;color:var(--aurora);font-family:var(--fmono);margin-left:.3rem}
.dash__feed{padding:1.1rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.feed-item{display:flex;gap:.7rem;font-size:.85rem;color:#9fb0bf;align-items:flex-start}
.feed-item .badge{font-family:var(--fmono);font-size:.6rem;font-weight:700;letter-spacing:.08em;padding:.2rem .45rem;border-radius:3px;flex:none;margin-top:.15rem}
.feed-item .badge.fix{background:rgba(123,173,211,.16);color:var(--sky-2)}
.feed-item .badge.win{background:rgba(87,184,148,.16);color:var(--aurora)}
.feed-item b{color:#f6f7f8;font-weight:600}

/* process: trail map */
.trailmap{
  border:1px solid var(--linew);border-radius:8px;background:var(--night-2);
  padding:clamp(1rem,3vw,2rem);margin-bottom:2.6rem;
}
.trailmap svg{width:100%;height:auto}
@media(max-width:700px){.trailmap{display:none}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.step{position:relative;padding-top:.4rem}
.step__n{
  font-family:var(--fdisplay);font-weight:900;font-size:3.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(238,241,244,.4);
}
.step__when{display:block;font-family:var(--fmono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-top:.9rem}
.step h3{font-size:1.3rem;margin:.5rem 0 .5rem}
.step p{color:var(--cream-soft);font-size:.95rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* founder */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.founder__photo{position:relative;max-width:400px}
.founder__photo .fieldphoto{transform:rotate(1.6deg);margin-top:0}
.postmark{
  position:absolute;right:-30px;bottom:-36px;width:140px;height:140px;
  color:var(--sage);opacity:.85;transform:rotate(-12deg);z-index:3;
}
.founder__body h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.founder__body p{color:var(--cream-soft);margin-top:1.2rem;font-size:1.02rem;max-width:54em}
.founder__sign{margin-top:1.9rem}
.founder__sign .sig{font-family:var(--fdisplay);font-weight:900;font-style:italic;font-size:1.5rem;color:var(--sage)}
.founder__sign .role{font-family:var(--fmono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);margin-top:.3rem}
@media(max-width:800px){
  .founder{grid-template-columns:1fr}
  .founder__photo{margin-inline:auto}
  .postmark{right:6px;bottom:-28px;width:120px;height:120px}
}

/* reviews: torn paper */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.rev{
  position:relative;display:block;background:var(--paper);color:var(--ink);padding:2rem 1.8rem 1.7rem;
  transform:rotate(var(--tilt,0deg));
  clip-path:polygon(0% 2%,4% 0%,12% 1.4%,22% .2%,33% 1.8%,45% .4%,57% 1.6%,68% .2%,79% 1.8%,90% .5%,97% 1.6%,100% 3%,100% 97.5%,96% 100%,88% 98.6%,77% 99.8%,66% 98.2%,54% 99.6%,43% 98.4%,31% 99.8%,20% 98.2%,10% 99.5%,3% 98.4%,0% 97%);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.8);
  transition:transform .25s var(--ease);
}
.rev:hover{transform:rotate(0deg) translateY(-4px)}
.rev::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:88px;height:26px;background:rgba(201,161,59,.4);border-inline:1px dashed rgba(0,0,0,.2);
}
.rev .stars{color:var(--gold);letter-spacing:.14em;font-size:.92rem}
.rev p{font-family:var(--fdisplay);font-weight:600;font-style:italic;margin:1rem 0 1.3rem;color:var(--ink);font-size:1.05rem;line-height:1.5}
.rev .who{display:flex;flex-direction:column;gap:.15rem}
.rev .who .nm{font-weight:700;font-size:.95rem}
.rev .who .src{font-family:var(--fmono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* pricing: the ascent */
.ascent{
  border:1px solid var(--linew);border-radius:8px;background:var(--night);
  padding:clamp(.6rem,2vw,1.4rem) clamp(.6rem,2vw,1.4rem) 0;margin-bottom:2.4rem;overflow:hidden;
}
.ascent svg{width:100%;height:auto;display:block}
/* The chart used to be display:none below 1000px, so a phone got nothing at all. It was
   hidden because a 1200-unit viewBox squeezed to 390px renders its 12px axis labels at
   about 4px. The fix is a drawing made for the width, not the desktop one scaled down:
   .ascent__narrow drops the cramped left axis and labels each flag directly.
   Specificity matters here: `.ascent svg` is (0,1,1), so a bare `.ascent__wide` (0,1,0)
   loses to it and BOTH charts render. These selectors are scoped to match. */
.ascent svg.ascent__narrow{display:none}
@media(max-width:1000px){
  .ascent svg.ascent__wide{display:none}
  .ascent svg.ascent__narrow{display:block}
}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.tier-grid > .sec-head{grid-column:1/-1}
.tier{
  position:relative;background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:6px;
  padding:1.8rem 1.5rem;display:flex;flex-direction:column;
  box-shadow:5px 5px 0 rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s;
}
.tier:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(123,173,211,.35)}
.tier--pop{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.tier--pop .tier__fit{color:rgba(238,241,244,.6)}
.tier--pop .tier__price{color:var(--paper)}
.tier--pop .tier__price small{color:rgba(238,241,244,.6)}
.tier--pop p{color:rgba(238,241,244,.78)}
.tier__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--ink);font-family:var(--fmono);font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.26rem .75rem;border-radius:999px;white-space:nowrap;
}
.tier__fit{font-family:var(--fmono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tier h3{font-size:1.35rem;margin:.7rem 0 .2rem}
.tier__price{font-family:var(--fdisplay);font-weight:900;font-size:2rem;letter-spacing:-.02em;color:var(--pine)}
.tier__price small{font-family:var(--fmono);font-size:.7rem;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.tier p{font-size:.88rem;color:var(--ink-soft);margin-top:.7rem}
/* Four tiers need about 1087px of grid track. The breakpoint sat at 1000, so 1024 and
   1100 still tried four columns in 928px: Timberline was cut off mid-word at the
   viewport edge and Polaris wrapped onto a row of its own beside a void. 1024 is a
   very common laptop and tablet width and it had never been swept. */
@media(max-width:1180px){.tier-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tier-grid{grid-template-columns:1fr}}

/* ---------- CTA: night sky ---------- */
.cta{
  position:relative;isolation:isolate;overflow:hidden;color:var(--cream);background:var(--night);
  padding-block:clamp(6rem,11vw,9.5rem) clamp(7rem,12vw,10rem);text-align:center;
  border-top:1px solid var(--linew);
}
.cta__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(238,241,244,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 21% 64%, rgba(238,241,244,.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 33% 30%, rgba(238,241,244,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 74%, rgba(238,241,244,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 18%, rgba(238,241,244,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 58%, rgba(238,241,244,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 36%, rgba(238,241,244,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 88% 70%, rgba(238,241,244,.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 94% 14%, rgba(238,241,244,.75) 50%, transparent 51%);
}
.cta__sky .a{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32}
.cta__sky .a1{width:640px;height:320px;left:4%;top:-8%;background:radial-gradient(closest-side,#57b894,transparent);animation:drift 19s ease-in-out infinite alternate}
.cta__sky .a2{width:560px;height:300px;right:2%;top:10%;background:radial-gradient(closest-side,#5a8fb8,transparent);animation:drift 24s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(4%,6%,0) scale(1.12)}}
.cta__sky .polaris{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:34px;height:34px;color:var(--cream);opacity:.9;animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.9;transform:translateX(-50%) scale(1)}50%{opacity:.55;transform:translateX(-50%) scale(.86)}}
.ridge--cta{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(34px,6vw,80px);color:var(--night-2);z-index:-1}
.cta__kick{font-family:var(--fmono);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.cta h2{font-size:clamp(2.6rem,6.2vw,4.8rem);margin-top:1.1rem}
.cta h2 em{color:var(--sage)}
.cta p{max-width:40em;margin:1.4rem auto 0;font-size:1.08rem;color:var(--cream-soft)}
.cta__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem;margin-top:2.4rem}
.cta__call{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fmono);font-weight:700;font-size:.9rem;color:var(--cream)}
.cta__call svg{width:16px;height:16px;color:var(--sage)}
.cta__call:hover{color:var(--sage)}
.cta__fine{font-family:var(--fmono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);margin-top:1.6rem}

/* ---------- footer ---------- */
.foot{background:var(--night-2);color:var(--cream);padding-block:3rem 2rem}
.foot__grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot .wordmark{height:22px;margin-bottom:1rem}
.foot p{color:var(--cream-dim);font-size:.9rem;max-width:26em}
.foot__rating{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-family:var(--fmono);font-size:.72rem;letter-spacing:.05em;color:var(--cream-soft)}
.foot__rating .stars{color:var(--gold);letter-spacing:.1em}
.foot__rating:hover{color:var(--cream)}
.foot__links{display:flex;gap:3rem;flex-wrap:wrap}
.foot__col h4{font-family:var(--fmono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-soft);margin-bottom:.9rem}
.foot__col a{display:block;color:var(--cream-dim);font-size:.92rem;padding:.28rem 0;transition:color .18s}
.foot__col a:hover{color:var(--sage)}
.foot__bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linew);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--fmono);font-size:.68rem;letter-spacing:.05em;color:var(--cream-dim)}

/* ---------- sticky mobile CTA bar ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:auto 1fr;gap:1px;background:var(--linew-strong);
  border-top:1px solid var(--linew-strong);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fmono);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  padding:1rem 1.2rem;
}
.mbar__call{background:var(--night-2);color:var(--cream)}
.mbar__call svg{width:16px;height:16px;color:var(--sage)}
.mbar__cta{background:var(--sage);color:var(--night)}
@media(max-width:760px){
  .mbar{display:grid}
  body{padding-bottom:52px}
}

/* ---------- living sky ---------- */
.scene .tw{animation:twStar 4.2s ease-in-out infinite}
.scene .tw2{animation-delay:1.3s}
.scene .tw3{animation-delay:2.6s}
@keyframes twStar{0%,100%{opacity:.8}50%{opacity:.25}}
.scene .pol{transform-origin:1112px 128px;animation:polPulse 5s ease-in-out infinite}
@keyframes polPulse{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
.scene .aur{animation:aurBreathe 11s ease-in-out infinite alternate}
@keyframes aurBreathe{from{opacity:.85}to{opacity:.5}}
.scene .comet{transform:translate(180px,70px);animation:comet 13s linear infinite}
@keyframes comet{
  0%,88%{opacity:0;transform:translate(180px,70px)}
  90%{opacity:.9}
  96%{opacity:0;transform:translate(640px,190px)}
  100%{opacity:0;transform:translate(640px,190px)}
}
.tpath{animation:march 30s linear infinite}
@keyframes march{to{stroke-dashoffset:-360}}

/* ---------- motto band ---------- */
.motto{padding-block:clamp(3.6rem,7vw,5.5rem);border-top:1px solid var(--linew);text-align:center}
.motto__kick{font-family:var(--fmono);font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim)}
.motto__line{
  display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2.5vw,1.6rem);flex-wrap:wrap;
  font-family:var(--fdisplay);font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--cream);margin-top:1.1rem;
}
.motto__line em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage)}
.motto__line .orn{width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);color:var(--gold);flex:none}

/* ---------- field notes ---------- */
.fieldnote{
  position:absolute;right:clamp(20px,5vw,48px);top:clamp(4.5rem,9vw,7.5rem);z-index:1;
  font-family:var(--fmono);font-size:.78rem;line-height:1.5;letter-spacing:.04em;
  color:var(--sage);text-align:right;transform:rotate(-3deg);opacity:.85;
}
@media(max-width:1100px){.fieldnote{display:none}}

/* ascent panel: faint contours */
.ascent{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%237badd3' stroke-opacity='.05'%3E%3Cpath d='M-20 120 C110 80 200 175 315 135 S510 60 620 105'/%3E%3Cpath d='M-20 175 C110 135 210 230 325 190 S515 115 620 160'/%3E%3Cpath d='M-20 420 C95 380 215 470 330 430 S520 355 620 400'/%3E%3Cpath d='M-20 475 C95 435 225 525 340 485 S530 410 620 455'/%3E%3C/svg%3E");
}

/* dashboard feed cycle */
.feed-item--new{animation:feedIn .5s var(--ease)}
@keyframes feedIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* footer starlight echo */
.foot{
  background-image:
    radial-gradient(1.1px 1.1px at 12% 30%, rgba(238,241,244,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 66%, rgba(238,241,244,.2) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 24%, rgba(238,241,244,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 72%, rgba(238,241,244,.18) 50%, transparent 51%);
}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .rev.reveal{transform:translateY(22px) rotate(var(--tilt,0deg))}
.js .rev.reveal.in{transform:rotate(var(--tilt,0deg))}
.js .fieldphoto.reveal{transform:translateY(22px) rotate(-1.6deg)}
.js .fieldphoto.reveal.in{transform:rotate(-1.6deg)}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .cta__sky .a,.cta__sky .polaris{animation:none}
  .scene .tw,.scene .pol,.scene .aur,.scene .comet,.tpath{animation:none}
  .scene .comet{opacity:0}
}

/* Worker is the brand display face (kit ykg4xnu, weight 800). Archivo Black
   is the fallback; these rules pin the display weight everywhere it is used. */
.g-read,.lrow__num,.step__n,.tier h3,.tier__price,.motto__line,.drawer__nav a,.creed li b{font-weight:800}

/* mobile pass */
@media(max-width:480px){.hide-xs{display:none}}
@media(max-width:640px){.ursa-label{display:none}}

/* SERP diagram */
.serp{position:relative;max-width:460px;justify-self:center;transform:rotate(1.2deg)}
.serp svg{filter:drop-shadow(8px 10px 0 rgba(0,0,0,.45))}
.serp svg{width:100%;height:auto}
.serp__note{
  position:absolute;font-family:var(--fmono);font-size:.8rem;color:var(--sage);
  letter-spacing:.04em;transform:rotate(-4deg);white-space:nowrap;
}
.serp__note--a{top:21%;right:-88px}
.serp__note--b{top:38%;right:-118px}
.serp__note--c{top:63%;right:-96px}
@media(max-width:1200px){.serp__note{display:none}}

/* FAQ */
/* The heading above this uses .sec-head--mid, which centres it. The list was capped at
   880px with no auto margin, so it pinned to the left of a centred wrap: heading centred
   at 720, list centred at 588, off by 132px on 28 sections. Josh spotted it by eye. */
.faq{max-width:880px;margin-inline:auto}
.faq details{position:relative;border-top:1px solid var(--linew);transition:background .2s var(--ease)}
.faq details:last-child{border-bottom:1px solid var(--linew)}
/* an accent rail that only appears on the open row, so the eye knows where it is */
.faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--sage);transform:scaleY(0);transform-origin:50% 0;transition:transform .28s var(--ease)}
.faq details[open]{background:linear-gradient(90deg,rgba(123,173,211,.05),transparent 62%)}
.faq details[open]::before{transform:scaleY(1)}
.faq summary:hover{background:linear-gradient(90deg,rgba(123,173,211,.04),transparent 62%)}
.faq summary{
  display:grid;grid-template-columns:3.1rem 1fr auto;align-items:center;gap:0 1rem;cursor:pointer;
  list-style:none;font-family:var(--fdisplay);font-weight:800;
  font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.3;
  padding:1.35rem 1.1rem 1.35rem .9rem;color:var(--cream);transition:color .18s,background .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sage)}
.faq details[open] summary{color:var(--cream)}
/* the numeral sits in its own column so every question starts on the same line */
.faq .q-n{font-family:var(--fmono);font-weight:700;font-size:.68rem;color:var(--sage);
  letter-spacing:.08em;align-self:center;opacity:.75}
.faq details[open] .q-n{opacity:1}
/* a real affordance rather than a bare cross */
.faq .q-t{position:relative;width:26px;height:26px;border:1px solid var(--linew-strong,rgba(233,236,239,.18));
  border-radius:50%;align-self:center;transition:border-color .2s,background .2s,transform .28s var(--ease)}
.faq .q-t::before,.faq .q-t::after{content:"";position:absolute;background:var(--cream-soft);
  left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;transition:transform .28s var(--ease),background .2s}
.faq .q-t::after{transform:rotate(90deg)}
.faq summary:hover .q-t{border-color:var(--sage)}
.faq summary:hover .q-t::before,.faq summary:hover .q-t::after{background:var(--sage)}
.faq details[open] .q-t{border-color:var(--sage);background:rgba(123,173,211,.12);transform:rotate(180deg)}
.faq details[open] .q-t::after{transform:rotate(0)}
.faq details[open] .q-t::before,.faq details[open] .q-t::after{background:var(--sage)}
.faq details p{padding:0 3rem 1.6rem 4rem;color:var(--cream-soft);max-width:64ch;line-height:1.7}
@media(max-width:640px){
  .faq summary{grid-template-columns:2.5rem 1fr auto;padding:1.1rem .7rem;font-size:.98rem}
  .faq details p{padding:0 .7rem 1.3rem 3.2rem}
  .faq .q-t{width:22px;height:22px}
}
@media(max-width:560px){.faq details p{padding-left:0}}

/* parallax layers */
.lyr{will-change:transform}

/* selected builds: specimen plates */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem);align-items:start}
.plate{
  display:block;background:var(--paper);padding:.55rem .55rem 0;border:1px solid rgba(0,0,0,.35);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.85);transform:rotate(var(--pt,0deg));
  transition:transform .25s var(--ease),box-shadow .25s;
}
.plate:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 34px 60px -24px rgba(0,0,0,.9),0 0 0 2px var(--sage)}
.plate__chrome{display:flex;gap:.32rem;padding:.45rem .3rem .5rem}
.plate__chrome i{width:7px;height:7px;border-radius:50%;background:rgba(33,38,46,.25)}
.plate img{width:100%;height:auto;border:1px solid rgba(33,38,46,.2)}
.plate__cap{
  display:block;font-family:var(--fmono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:.65rem .2rem .7rem;
}
.plate__cap b{color:var(--pine)}
.plate:nth-child(2){margin-top:1.6rem}
.plate:nth-child(3){margin-top:.6rem}
@media(max-width:900px){.plates{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.plate:nth-child(n){margin-top:0}}

/* ---------- money pages ---------- */
.phero{padding-block:clamp(3.6rem,7vw,5.5rem) clamp(2.4rem,5vw,3.6rem);
  background-image:
    radial-gradient(1.3px 1.3px at 16% 30%, rgba(238,241,244,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 18%, rgba(238,241,244,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 40%, rgba(238,241,244,.4) 50%, transparent 51%);
}
.phero h1{font-family:var(--fdisplay);font-weight:800;text-wrap:balance;font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.01em;max-width:21ch}
.phero h1 em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage)}
.lp-hero{padding-top:clamp(2.6rem,5vw,4rem)}
.lp-hero h1{font-family:var(--fdisplay);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.06}
.lp-hero h1 em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage)}
.lp-head .wrap{justify-content:space-between}

/* form card: paper object */
.formcard{background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:8px;
  padding:1.9rem 1.7rem;box-shadow:8px 8px 0 rgba(0,0,0,.4);align-self:start}
.formcard__head h3,.formcard__head h2{font-size:1.4rem;margin:.4rem 0 1.2rem}
.formcard .q-n{font-family:var(--fmono);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.formcard label{display:block;font-family:var(--fmono);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.formcard input,.formcard select,.formcard textarea{
  display:block;width:100%;margin-top:.4rem;padding:.75rem .9rem;
  font-family:var(--fbody);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid rgba(33,38,46,.4);border-radius:4px;
}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:2px solid var(--sage);outline-offset:0;border-color:var(--sage)}
.formcard .btn{width:100%;justify-content:center;margin-top:.4rem}
.formcard__fine{font-family:var(--fmono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);text-align:center;margin-top:.9rem}

/* pricing extras */
.tier-grid--full .tier__feats{list-style:none;margin:1rem 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.tier-grid--full .tier__feats li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--ink-soft)}
.tier--pop .tier__feats li{color:rgba(238,241,244,.78)}
.tier-grid--full .tier__feats li::before{content:"";position:absolute;left:0;top:.42em;width:.8em;height:.45em;border-left:2.5px solid var(--sage);border-bottom:2.5px solid var(--sage);transform:rotate(-45deg)}
.tier__cta{margin-top:auto;justify-content:center}
.tier--pop .tier__cta{border-color:var(--paper)}
.tier .btn--ghost{color:var(--ink);border-color:var(--ink);background:transparent}
.addon{font-family:var(--fmono);font-size:.78rem;letter-spacing:.03em;color:var(--cream-dim);margin-top:2rem;text-align:center}

/* growth-plan alt contact */
.gp-alt{display:flex;flex-direction:column;gap:.6rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--linew)}
.gp-alt .q-n{font-family:var(--fmono);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.gp-alt a{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fmono);font-weight:700;font-size:1.05rem;color:var(--cream)}
.gp-alt a svg{width:17px;height:17px;color:var(--sage)}
.gp-alt span:last-child{font-family:var(--fmono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim)}

/* fix: popular tier blurb must stay cream on the pine card (order beat it above) */
.tier.tier--pop p{color:rgba(238,241,244,.82)}

/* ============ mobile efficiency pass (2026-08-08) ============ */
@media(max-width:640px){
  /* density: the page was 16k px tall; tighten every rhythm value */
  .section{padding-block:3.1rem}
  .sec-head{margin-bottom:1.8rem}
  .sec-head h2{font-size:1.85rem}
  .lockup{margin-bottom:1.6rem}
  .lede{font-size:.98rem;margin-top:.9rem}
  .ghostword{display:none}
  .hero__content{padding-top:50vw;padding-bottom:2.4rem}
  .hero__display{font-size:2.3rem}
  .hero__kick{font-size:.66rem;letter-spacing:.14em}
  .hero__sub{margin-top:1.1rem;font-size:.98rem}
  .hero__actions{margin-top:1.6rem;gap:.7rem}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__meta{margin-top:1.4rem;gap:.9rem}
  .btn--lg{padding:1.05rem 1.5rem}
  .proof .gauge{padding:1.3rem .7rem 1.1rem}
  .logo-row{gap:1.2rem 1.6rem;padding-block:1.2rem}
  .logo-row img{height:24px}
  .logo-div{display:none}
  .creed li{padding:1rem 0 1rem 3.2rem;font-size:.95rem}
  .creed li b{font-size:1.05rem}
  .creed li::before{font-size:1.5rem;top:1.1rem}
  .fieldphoto{margin-top:1.6rem}
  .beliefs{gap:.9rem}
  .belief{padding:1.25rem 1.15rem}
  .belief h3{font-size:1.05rem;margin:.6rem 0 .35rem}
  .belief p{font-size:.88rem}
  /* patches: art beside text instead of stacked */
  .patch{display:grid;grid-template-columns:96px 1fr;column-gap:1.1rem;align-items:start;text-align:left}
  .patch__art{width:96px;grid-row:1 / span 3;margin-bottom:0;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.45))}
  .patch h3{font-size:1.08rem;margin-bottom:.35rem}
  .patch p{font-size:.88rem}
  .patch__go{padding-top:.7rem;margin-top:0}
  .patch-grid{gap:1.6rem}
  .lrow{padding-block:1.35rem}
  .lrow__num{font-size:2.4rem}
  .lrow__body .what{font-size:.95rem}
  .motto{padding-block:2.6rem}
  .motto__line{font-size:1.7rem;gap:.7rem}
  .serp{max-width:340px}
  .split{gap:1.8rem}
  .steps{gap:1.1rem}
  .step h3{font-size:1.1rem}
  .step p{font-size:.9rem}
  .step__n{font-size:2.2rem}
  .founder__body h2{font-size:1.7rem}
  .founder__body p{font-size:.95rem}
  .plates{gap:1.4rem}
  .rev{padding:1.5rem 1.3rem 1.3rem}
  .rev p{font-size:.95rem;margin:.8rem 0 1rem}
  .rev-grid{gap:1.3rem}
  .tier{padding:1.4rem 1.25rem}
  .faq summary{padding:1.05rem 0;gap:.8rem}
  .faq details p{padding-bottom:1.2rem;font-size:.94rem}
  .cta{padding-block:4.2rem 5rem}
  .cta h2{font-size:2.2rem}
  .cta p{font-size:.98rem}
  .cta__actions .btn{width:100%;justify-content:center}
  .foot{padding-block:2.2rem 1.4rem}
  .foot__links{gap:1.6rem 2.4rem}
  .formcard{padding:1.5rem 1.2rem}
  .formcard label{margin-bottom:.8rem}
  .phero{padding-block:2.6rem 1.8rem}
  .phero h1{font-size:2rem}
  .lp-hero{padding-top:2.2rem}
  .lp-hero h1{font-size:1.95rem}
  .gp-alt{margin-top:1.6rem;padding-top:1.2rem}
  .addon{font-size:.68rem;margin-top:1.4rem}
  /* perf: blur + always-running animations are expensive on phones */
  .cta__sky .a{filter:blur(60px);opacity:.24}
  .scene .comet{display:none}
  .hero__kick .orn{width:12px;height:12px}
}

/* dedicated mobile hero scene: portrait composition, no slice cropping */
.scene--m{display:none}
@media(max-width:640px){
  .scene{display:none}
  .scene--m{display:block;position:absolute;top:0;left:0;width:100%;height:auto;z-index:-1}
  .hero{min-height:0;align-items:stretch}
  /* was 64vw, 250px of art on a 390px screen, which pushed the offer plates through
     the fold. The sticky bottom bar carries the CTA on mobile, so the fold's job is
     to land the headline and the offer, not the buttons. */
  .hero__content{padding-top:31vw;padding-bottom:2rem}
}

/* form pages: aftercopy sits under the copy column on desktop, after the form on mobile */
@media(min-width:901px){
  .lp-hero .formcard{grid-column:2;grid-row:1 / span 2}
  .lp-hero .aftercopy{grid-column:1}
}
.aftercopy{min-width:0}

/* ============ inner-page 10x ============ */
/* atmosphere on inner heroes */
.phero,.lp-hero{position:relative}
.phero{
  background-image:
    radial-gradient(520px 200px at 78% -30%, rgba(87,184,148,.12), transparent 70%),
    radial-gradient(420px 180px at 30% -20%, rgba(123,173,211,.10), transparent 70%),
    radial-gradient(1.3px 1.3px at 16% 30%, rgba(238,241,244,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 18%, rgba(238,241,244,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 40%, rgba(238,241,244,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(238,241,244,.25) 50%, transparent 51%);
}
.lp-hero{
  background-image:
    radial-gradient(560px 220px at 20% -24%, rgba(123,173,211,.10), transparent 70%),
    radial-gradient(480px 200px at 85% -20%, rgba(87,184,148,.10), transparent 70%),
    radial-gradient(1.2px 1.2px at 30% 20%, rgba(238,241,244,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 12%, rgba(238,241,244,.28) 50%, transparent 51%);
}

/* pricing compare table */
.compare{margin-top:2.6rem}
.compare__scroll{
  overflow-x:auto;scroll-padding-inline-start:1rem;-webkit-overflow-scrolling:touch;
  background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:8px;
  box-shadow:6px 6px 0 rgba(0,0,0,.4);
}
.compare table{border-collapse:collapse;width:100%;min-width:720px;font-size:.88rem}
.compare th,.compare td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid rgba(33,38,46,.18);white-space:nowrap}
.compare th{font-family:var(--fmono);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1.5px solid var(--ink)}
.compare th:first-child{color:var(--ink)}
.compare td:first-child{font-weight:600}
.compare tr:last-child td{border-bottom:none}
.compare .pop{background:rgba(30,58,82,.08)}
.compare th.pop{color:var(--pine)}
.compare__note{font-family:var(--fmono);font-size:.72rem;letter-spacing:.04em;color:var(--cream-dim);margin-top:1rem;text-align:center}

/* founder promise card */
.promise{background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:8px;
  padding:2rem 1.9rem;box-shadow:6px 6px 0 rgba(0,0,0,.4)}
.promise p{font-family:var(--faccent);font-style:italic;font-weight:600;font-size:1.12rem;line-height:1.55}
.promise .founder__sign{margin-top:1.4rem}
.promise .sig{color:var(--pine)}
.promise .role{color:var(--ink-soft)}

/* ============ polish layer ============ */
::selection{background:var(--sage);color:var(--night)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}
.phero .lockup{margin-bottom:2rem}
.phero .lede{margin-top:1rem}
.phero + .section{padding-top:2.6rem}
.lrow__num,.g-read,.tier__price{font-variant-numeric:tabular-nums}
.compare .pop{border-inline:1px solid rgba(30,58,82,.25)}
.faq .q-t::before,.faq .q-t::after{border-radius:2px}
.sec-more .btn{min-width:260px;justify-content:center}
img{image-rendering:auto}

/* polish fixes: quotes are Fraunces (Worker leaked in via --fdisplay swap); serp/sheet at full width */
.rev p{font-family:var(--faccent);font-weight:600;font-style:italic}
.serp{width:min(460px,100%)}

/* poster content hugs the left edge below true desktop (tablets, desktop-mode phones) */
@media(min-width:641px) and (max-width:1099px){
  .hero__content{max-width:none}
}

/* footer: the campsite at the end of the trail */
.foot{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(200px,18vw,250px)}
.foot__scene{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;height:230px;pointer-events:none}
.foot .wrap{position:relative;z-index:1}
@media(max-width:640px){
  .foot{padding-bottom:180px}
  .foot__scene{height:190px}
}

/* the book */
.bookmock{width:min(340px,86%);justify-self:center;transform:rotate(-2.5deg);
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.45));transition:transform .25s var(--ease)}
.bookmock:hover{transform:rotate(0deg) translateY(-6px)}
.bookmock svg{width:100%;height:auto}
.reserve{display:flex;gap:.8rem;margin-top:1.8rem;max-width:480px}
.reserve input{
  flex:1;min-width:0;padding:1rem 1.1rem;font-family:var(--fbody);font-size:1rem;
  background:var(--night-3);border:1.5px solid var(--linew-strong);border-radius:var(--r);color:var(--cream);
}
.reserve input::placeholder{color:var(--cream-dim)}
.reserve input:focus{outline:2px solid var(--sage);outline-offset:0;border-color:var(--sage)}
.reserve__fine{font-family:var(--fmono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);margin-top:.8rem}
@media(max-width:560px){.reserve{flex-direction:column}.reserve .btn{justify-content:center}}
@media(max-width:900px){.bookmock{margin-inline:auto}}

/* footer 10x: sign-off row + ornamented columns */
.foot__signoff{
  display:flex;align-items:center;gap:1.4rem;
  padding-bottom:2.2rem;margin-bottom:2.4rem;border-bottom:1px solid var(--linew);
}
.foot__bear{width:54px;height:54px;flex:none}
.foot__brandline .wordmark{height:26px;margin-bottom:.5rem}
.foot__tag{font-family:var(--fdisplay);font-weight:800;font-size:1.05rem;color:var(--cream);letter-spacing:.01em}
.foot__tag em{font-family:var(--faccent);font-style:italic;font-weight:600;color:var(--sage)}
.foot__top{
  margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fmono);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-soft);border:1.5px solid var(--linew-strong);border-radius:999px;padding:.65rem 1.2rem;
  transition:color .2s,border-color .2s;white-space:nowrap;
}
.foot__top svg{width:14px;height:14px;transform:rotate(-90deg)}
.foot__top:hover{color:var(--sage);border-color:var(--sage)}
.foot__col h4::before{content:"◆";color:var(--sage);font-size:.6em;margin-right:.6em;vertical-align:.15em}
@media(max-width:640px){
  .foot__signoff{flex-wrap:wrap;gap:1rem}
  .foot__top{margin-left:0}
  .foot{padding-top:2.6rem}
}

/* ghosted bear watermark, top right of the footer */
.foot__watermark{
  position:absolute;top:.5rem;right:-70px;z-index:-1;
  width:clamp(240px,26vw,380px);height:auto;opacity:.05;pointer-events:none;
}
@media(max-width:640px){.foot__watermark{width:190px;right:-50px;top:1rem}}

/* ============ final pass ============ */
/* mobile header: burger belongs on the right (nav's auto-margin vanishes when nav hides) */
@media(max-width:1060px){
  .head-cta{margin-left:auto}
}
/* signature buttons: printed-sticker offset shadow, always on */
.btn{box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.btn--primary{box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.btn--primary:hover{box-shadow:5px 5px 0 rgba(201,161,59,.55)}
.btn--ghost:hover{box-shadow:5px 5px 0 rgba(238,241,244,.18)}
.btn--paper:hover{box-shadow:5px 5px 0 rgba(123,173,211,.5)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.site-head .btn--primary{padding:.85rem 1.3rem;font-size:.78rem}

/* results field log */
.fieldlog{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.logrow{
  display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:.8rem;
  padding-block:1.05rem;border-bottom:1px solid var(--linew);transition:background .2s,padding-left .2s;
}
.logrow:hover{background:rgba(123,173,211,.05);padding-left:.5rem}
.logrow__n{font-family:var(--fmono);font-weight:700;font-size:.72rem;color:var(--sage);letter-spacing:.1em}
.logrow__t{font-family:var(--fdisplay);font-weight:800;font-size:1.02rem;color:var(--cream)}
.logrow:hover .logrow__t{color:var(--sage)}
.logrow__go{color:var(--cream-dim)}
.logrow__go svg{width:14px;height:14px}
.logrow:hover .logrow__go{color:var(--sage)}
@media(max-width:760px){.fieldlog{grid-template-columns:1fr}}

/* desktop services dropdown */
.nav__item{position:relative}
.nav__trigger::after{content:"\25BE";font-size:.7em;margin-left:.35em;color:var(--cream-dim);transition:color .18s}
.nav__item:hover .nav__trigger::after,.nav__item:focus-within .nav__trigger::after{color:var(--sage)}
.nav__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);
  min-width:236px;padding:.7rem;z-index:60;
  background:var(--night-2);border:1px solid var(--linew-strong);border-radius:8px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85),4px 4px 0 rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s;
}
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__panel::after{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--night-2);border-left:1px solid var(--linew-strong);border-top:1px solid var(--linew-strong)}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.nav__panel a{
  display:flex;align-items:center;gap:.6rem;padding:.62rem .8rem;border-radius:5px;
  font-size:.9rem;font-weight:500;color:var(--cream-soft);white-space:nowrap;transition:background .15s,color .15s;
}
.nav__panel a::before{content:"\25C6";font-size:.5em;color:var(--sage);opacity:0;transition:opacity .15s}
.nav__panel a:hover{background:rgba(123,173,211,.08);color:var(--cream)}
.nav__panel a:hover::before{opacity:1}
.nav__panel i{display:block;height:1px;background:var(--linew);margin:.5rem .4rem}

/* drawer: its own night scene */
.drawer{isolation:isolate}
.drawer__scene{position:absolute;left:0;right:0;bottom:0;height:min(220px,30vh);width:100%;z-index:-1;pointer-events:none;opacity:.85}
.drawer__head,.drawer__nav,.drawer__foot{position:relative;z-index:1}
.drawer__foot{border-top:none}

/* book page + form extras */
.formrow{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.8rem}
.formcard .check{display:flex;gap:.7rem;align-items:flex-start;text-transform:none;letter-spacing:0;font-family:var(--fbody);font-weight:500;font-size:.86rem;color:var(--ink-soft)}
.formcard .check input{width:auto;margin-top:.2rem;accent-color:var(--pine);transform:scale(1.25)}
.reserve__more{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.idx .idx__body h3{margin-bottom:.4rem}
div.idx{cursor:default}
div.idx:hover{background:rgba(123,173,211,.04);padding-left:.8rem}

/* LP closing panel */
.lp-close{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:1rem 0}
.lp-close .btn{align-self:flex-start}
@media(max-width:960px){.plates[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.plates[style*="repeat(4"]{grid-template-columns:1fr!important}}
.promise .postmark{right:-24px;bottom:-30px}
@media(max-width:800px){.promise .postmark{right:6px;bottom:-24px}}

/* drawer services accordion */
.drawer__acc summary{
  display:flex;align-items:baseline;gap:1rem;cursor:pointer;list-style:none;
  font-family:var(--fdisplay);font-weight:800;font-size:1.7rem;letter-spacing:-.01em;
  padding:.8rem 0;border-bottom:1px solid var(--linew);color:var(--cream);
}
.drawer__acc summary::-webkit-details-marker{display:none}
.drawer__acc summary span{font-family:var(--fmono);font-size:.7rem;color:var(--sage);letter-spacing:.1em}
.acc__c{margin-left:auto;position:relative;width:14px;height:14px;align-self:center}
.acc__c::before,.acc__c::after{content:"";position:absolute;background:var(--cream-soft);left:0;top:6px;width:14px;height:2px;border-radius:2px;transition:transform .25s var(--ease)}
.acc__c::after{transform:rotate(90deg)}
.drawer__acc[open] .acc__c::after{transform:rotate(0)}
.drawer__acc[open] summary{color:var(--sage)}
.drawer__sub{display:flex;flex-direction:column;padding:.4rem 0 .6rem;border-bottom:1px solid var(--linew)}
.drawer__sub a{
  display:flex;align-items:center;gap:.6rem;padding:.55rem 0 .55rem 2.6rem;
  font-size:1.02rem;font-weight:500;color:var(--cream-soft);
}
.drawer__sub a::before{content:"◆";font-size:.5em;color:var(--sage)}
.drawer__sub a:active{color:var(--sage)}

/* ============ restored base components (lost in the poster rewrite) ============ */
/* journal cards (seasons, outcomes, team, checklist) */
.beliefs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
@media(max-width:900px){.beliefs{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.beliefs{grid-template-columns:1fr!important}}
.belief{
  background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:6px;
  padding:1.7rem 1.5rem;box-shadow:5px 5px 0 rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s;
}
.belief:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(123,173,211,.35)}
.belief .n{font-family:var(--fmono);font-size:.7rem;font-weight:700;color:var(--pine);letter-spacing:.1em;text-transform:uppercase}
.belief h3{font-size:1.16rem;margin:.85rem 0 .5rem;line-height:1.18}
.belief p{font-size:.93rem;color:var(--ink-soft)}
/* index rows (what-we-run, management includes) */
.index{display:flex;flex-direction:column;margin-top:1rem}
.idx{
  display:grid;grid-template-columns:90px 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding-block:1.9rem;border-top:1px solid var(--linew);transition:background .2s,padding-left .25s var(--ease);
}
.idx:last-child{border-bottom:1px solid var(--linew)}
.idx__n{font-family:var(--fmono);font-weight:700;font-size:.78rem;color:var(--sage);letter-spacing:.12em;padding-top:.45rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.idx__body h3{font-family:var(--fdisplay);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem)}
.idx__body p{color:var(--cream-soft);font-size:.96rem;margin-top:.55rem;max-width:60em}
@media(max-width:640px){.idx{grid-template-columns:1fr;gap:.4rem;padding-block:1.3rem}}

/* ============ craft pass: buttons v2 ============ */
/* the stitched sticker: a dashed inner seam appears on hover, like the patch borders */
.btn{position:relative}
.btn::after{
  content:"";position:absolute;inset:5px;border:1px dashed transparent;border-radius:2px;
  pointer-events:none;transition:border-color .25s var(--ease);
}
.btn--primary:hover::after{border-color:rgba(12,18,25,.4)}
.btn--paper:hover::after{border-color:rgba(12,18,25,.32)}
.btn--ghost:hover::after{border-color:rgba(238,241,244,.32)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.mbar__cta{transition:filter .2s}
.mbar__cta:active{filter:brightness(.92)}

/* ============ craft pass: choreography ============ */
/* nav underline grows from the left */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--sage);transition:right .25s var(--ease)}
.nav a:hover::after{right:0}
/* footer links nudge */
.foot__col a{transition:color .18s,padding-left .2s var(--ease)}
.foot__col a:hover{padding-left:5px}
/* results log arrow slide */
.logrow__go svg{transition:transform .25s var(--ease)}
.logrow:hover .logrow__go svg{transform:translateX(4px)}
/* chapter rules draw themselves in */
.js .lockup.reveal i{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .2s}
.js .lockup.reveal.in i{transform:scaleX(1)}
/* staggered grid entrances */
.js :is(.beliefs,.plates,.tier-grid,.rev-grid,.patch-grid,.index,.steps,.faq,.proof__grid) > .reveal:nth-child(2){transition-delay:.08s}
.js :is(.beliefs,.plates,.tier-grid,.rev-grid,.patch-grid,.index,.steps,.faq,.proof__grid) > .reveal:nth-child(3){transition-delay:.16s}
.js :is(.beliefs,.plates,.tier-grid,.rev-grid,.patch-grid,.index,.steps,.faq,.proof__grid) > .reveal:nth-child(4){transition-delay:.24s}
.js :is(.beliefs,.plates,.tier-grid,.rev-grid,.patch-grid,.index,.steps,.faq,.proof__grid) > .reveal:nth-child(5){transition-delay:.32s}
.js :is(.beliefs,.plates,.tier-grid,.rev-grid,.patch-grid,.index,.steps,.faq,.proof__grid) > .reveal:nth-child(6){transition-delay:.4s}
/* hero enters in sequence */
.js .hero__content > .reveal:nth-child(2){transition-delay:.1s}
.js .hero__content > .reveal:nth-child(3){transition-delay:.2s}
.js .hero__content > .reveal:nth-child(4){transition-delay:.3s}
.js .hero__content > .reveal:nth-child(5){transition-delay:.4s}
/* FAQ answers ease open */
.faq details[open] > p{animation:faqIn .35s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* drawer items cascade when it opens */
.drawer__nav > *{transition:opacity .3s var(--ease),transform .3s var(--ease);opacity:0;transform:translateX(14px)}
.drawer.open .drawer__nav > *{opacity:1;transform:none}
.drawer.open .drawer__nav > :nth-child(1){transition-delay:.08s}
.drawer.open .drawer__nav > :nth-child(2){transition-delay:.13s}
.drawer.open .drawer__nav > :nth-child(3){transition-delay:.18s}
.drawer.open .drawer__nav > :nth-child(4){transition-delay:.23s}
.drawer.open .drawer__nav > :nth-child(5){transition-delay:.28s}
.drawer.open .drawer__nav > :nth-child(6){transition-delay:.33s}
/* motion safety */
@media(prefers-reduced-motion:reduce){
  .btn svg,.nav a::after,.foot__col a,.logrow__go svg{transition:none!important}
  .js .lockup.reveal i{transform:scaleX(1);transition:none}
  .js .reveal{transition-delay:0s!important}
  .faq details[open] > p{animation:none}
  .drawer__nav > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* button-family consistency: the non-.btn controls join the system */
.foot__top{box-shadow:2px 2px 0 rgba(0,0,0,.35);transition:color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.foot__top:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(123,173,211,.35)}
.foot__top:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.foot__top svg{transition:transform .25s var(--ease)}
.foot__top:hover svg{transform:rotate(-90deg) translateX(3px)}
.ratepill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.mbar a{transition:filter .15s}
.mbar a:active{filter:brightness(.88)}
.drawer__call:active{background:rgba(123,173,211,.12);border-color:var(--sage)}
.burger,.drawer__close{transition:transform .15s var(--ease),border-color .2s}
.burger:active,.drawer__close:active{transform:scale(.92)}
.burger:hover,.drawer__close:hover{border-color:var(--sage)}

/* affordance honesty: hover only on rows that actually link */
div.idx{cursor:default}
div.idx:hover{background:transparent;padding-left:0}
div.idx:hover .idx__body h3{color:var(--cream)}
/* cards press like everything else */
.plate:active{transform:rotate(0deg) translateY(1px);box-shadow:0 12px 24px -14px rgba(0,0,0,.9)}
.rev:active{transform:rotate(0deg) translateY(1px)}
/* 404 scene spans the full band behind the centered copy */
.err-scene{display:block!important;position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.err-scene>*{transform:none}
.hero:has(.err-scene){min-height:clamp(520px,62vh,640px);align-items:center;overflow:hidden}
.hero:has(.err-scene) .hero__content{padding-top:0}

/* ============ inner-page hero scenes ============ */
.phero,.lp-hero{position:relative;isolation:isolate;overflow:hidden}
.phero__scene{
  position:absolute;left:0;right:0;top:0;width:100%;height:100%;
  min-height:380px;z-index:-1;pointer-events:none;
}
.phero{padding-block:clamp(4rem,7.5vw,5.8rem) clamp(2.4rem,4.5vw,3.4rem);background-image:none}
.lp-hero{padding-top:clamp(3.4rem,6vw,5rem)}
.phero .wrap,.lp-hero .wrap{position:relative;z-index:1}
/* keep the text legible over the ridgelines */
.phero h1,.lp-hero h1{text-shadow:0 4px 26px rgba(0,0,0,.55)}
@media(max-width:640px){
  .phero__scene{min-height:300px}
  .phero{padding-block:3.4rem 2.4rem}
}

/* trade hero scenes: desktop wide + dedicated mobile portrait */
.phero__scene--m{display:none}
@media(max-width:640px){
  .phero:has(.phero__scene--m) .phero__scene{display:none}
  .phero__scene--m{display:block;position:absolute;top:0;left:0;width:100%;height:auto;z-index:-1}
  .phero:has(.phero__scene--m){padding-top:73vw}
}

/* blog index */
.pcard{display:block;background:var(--night-3);border:1px solid var(--linew);border-radius:10px;padding:1.7rem;transition:border-color .2s,transform .2s}
.pcard:hover{border-color:var(--sage);transform:translateY(-4px)}
.pcard__cat{font-family:var(--fmono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.pcard h2,.pcard h3{font-family:var(--fdisplay);font-weight:800;letter-spacing:-.01em;margin:.8rem 0 .6rem;line-height:1.15}
.pcard h3{font-size:1.16rem}
.pcard p{color:var(--cream-soft);font-size:.95rem}
.pcard__go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-family:var(--fmono);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.pcard__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.pcard:hover .pcard__go svg{transform:translateX(4px)}
.pcard--feat{background:linear-gradient(180deg,rgba(123,173,211,.09),var(--night-3) 60%);border-color:var(--linew-strong);padding:2.4rem;margin-bottom:1.4rem}
.pcard--feat h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:24ch}
.pcard--feat p{font-size:1.05rem;max-width:56ch}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}.pcard--feat{padding:1.6rem}}

/* ============ EXPERIENCE LAYER ============ */

/* 1. Chapter rail: a trail marker of the page, fixed at the left edge */
.rail{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:45;
  display:none;flex-direction:column;gap:14px;align-items:flex-start;
}
@media(min-width:1240px){.rail{display:flex}}
.rail__i{display:flex;align-items:center;gap:.7rem;background:none;border:0;padding:0;cursor:pointer}
.rail__d{
  width:9px;height:9px;border-radius:50%;flex:none;
  border:1.5px solid var(--linew-strong);background:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.rail__l{
  font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),color .25s;pointer-events:none;
}
.rail__i:hover .rail__l{opacity:1;transform:none}
.rail__i:hover .rail__d{border-color:var(--sage)}
.rail__i.on .rail__d{background:var(--sage);border-color:var(--sage);transform:scale(1.35)}
.rail__i.on .rail__l{opacity:0}
.rail__i.on:hover .rail__l{opacity:1;transform:none;color:var(--sage)}
.rail__l{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.rail::before{
  content:"";position:absolute;left:4px;top:-10px;bottom:-10px;width:1px;
  background:linear-gradient(180deg,transparent,var(--linew),transparent);z-index:-1;
}

/* 2. Drawn ridge transitions between section bands */
.section--tint{position:relative}
.section--tint::before,.section--tint::after{
  content:"";position:absolute;left:0;right:0;height:clamp(16px,2.2vw,30px);
  background-repeat:repeat-x;background-size:auto 100%;pointer-events:none;
}
.section--tint::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 18 L90 8 L180 20 L280 4 L380 18 L480 10 L600 22 L700 6 L820 18 L940 8 L1060 20 L1180 6 L1300 18 L1440 10 L1440 30 Z' fill='%23101820'/%3E%3C/svg%3E");
}
.section--tint::after{
  bottom:-1px;transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 16 L120 6 L240 18 L360 8 L500 20 L620 6 L760 18 L880 8 L1000 20 L1140 6 L1260 18 L1380 8 L1440 16 L1440 30 Z' fill='%23101820'/%3E%3C/svg%3E");
}
.section--tint > .wrap{position:relative;z-index:1}

/* 3. Diagrams draw themselves in on arrival */
.js .trailmap.reveal svg,.js .ascent.reveal svg,.js .climb.reveal svg,.js .serp.reveal svg,
.js .compare.reveal .compare__scroll{
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .15s;
}
.js .trailmap.reveal.in svg,.js .ascent.reveal.in svg,.js .climb.reveal.in svg,.js .serp.reveal.in svg,
.js .compare.reveal.in .compare__scroll{clip-path:inset(0)}
/* patches and plates arrive with a settle */
.js .patch.reveal .patch__art{transition:transform .5s var(--ease) .1s,filter .25s}
.js .patch.reveal:not(.in) .patch__art{transform:rotate(var(--pr,0deg)) scale(.9)}
/* big numerals count up visually by wiping */
.js .lrow.reveal .lrow__num{clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease) .1s}
.js .lrow.reveal:not(.in) .lrow__num{clip-path:inset(0 100% 0 0)}

@media(prefers-reduced-motion:reduce){
  .js .trailmap.reveal svg,.js .ascent.reveal svg,.js .climb.reveal svg,.js .serp.reveal svg,
  .js .compare.reveal .compare__scroll,.js .lrow.reveal .lrow__num{clip-path:none!important;transition:none!important}
  .js .patch.reveal:not(.in) .patch__art{transform:rotate(var(--pr,0deg))}
  .rail{display:none!important}
}

/* ============ mobile gets the experience too ============ */
/* scroll-progress trail under the header, the phone's version of the chapter rail */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:55;pointer-events:none;background:transparent}
.prog__b{height:100%;width:0;background:linear-gradient(90deg,var(--sage),var(--gold));transition:width .1s linear}
@media(min-width:1240px){.prog{display:none}}

/* touch devices have no hover, so buttons must show character on press */
@media(hover:none){
  .btn::after{border-color:rgba(12,18,25,.18)}
  .btn--ghost::after{border-color:rgba(238,241,244,.14)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.5)}
  .btn--primary:active{filter:brightness(.94)}
  .plate:active,.rev:active,.belief:active,.tier:active,.pcard:active{transform:scale(.985)}
  .idx:active,.lrow:active,.logrow:active{background:rgba(123,173,211,.08)}
}
/* the mobile hero scenes animate too */
@media(max-width:640px){
  .scene--m .tw,.phero__scene--m .tw{animation:twStar 4.2s ease-in-out infinite}
  .scene--m .pol,.phero__scene--m .pol{animation:polPulse 5s ease-in-out infinite}
  .scene--m .aur,.phero__scene--m .aur{animation:aurBreathe 11s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  .prog__b{transition:none}
  .scene--m .tw,.phero__scene--m .tw,.scene--m .pol,.phero__scene--m .pol,
  .scene--m .aur,.phero__scene--m .aur{animation:none}
}

/* rhythm: every third section head centers, so pages are not one long left column */
.sec-head--mid{margin-inline:auto;text-align:center}
.sec-head--mid .lede{margin-inline:auto}

/* ============ pathfinder nav ============ */
.burger{width:auto;padding:0 .85rem;gap:.55rem;border-radius:999px}
.burger svg{width:20px;height:20px;transition:transform .45s var(--ease)}
.burger__t{font-family:var(--fmono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.drawer.open ~ * .burger svg,.burger[aria-expanded="true"] svg{transform:rotate(180deg)}
.burger:hover{border-color:var(--sage);color:var(--sage)}

.drawer__kick{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  font-family:var(--fmono);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}
.drawer__kick .orn{width:13px;height:13px;color:var(--sage)}
.drawer__top,.drawer__acc summary{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--fdisplay);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;
  padding:.72rem 0;border-bottom:1px solid var(--linew);color:var(--cream);cursor:pointer;list-style:none;
}
.drawer__top::before,.drawer__acc summary::before{
  content:"";width:7px;height:7px;flex:none;transform:rotate(45deg);
  border:1.5px solid var(--sage);opacity:.55;transition:opacity .2s,background .2s;
}
.drawer__top:active::before,.drawer__acc[open] summary::before{background:var(--sage);opacity:1}
.drawer__acc[open] summary{color:var(--sage)}
.drawer__sub a::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--sage);opacity:.6;flex:none}
.drawer__sub a{padding-left:1.9rem;font-size:1rem}

/* mobile CTA bar joins the button system */
.mbar{
  gap:.55rem;padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom,0));
  background:rgba(12,18,25,.92);backdrop-filter:blur(12px);border-top:1px solid var(--linew-strong);
  grid-template-columns:auto 1fr;
}
.mbar a{
  position:relative;border-radius:var(--r);padding:.9rem 1.1rem;
  border:1.5px solid transparent;box-shadow:2px 2px 0 rgba(0,0,0,.45);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .15s;
}
.mbar a::after{content:"";position:absolute;inset:4px;border:1px dashed transparent;border-radius:2px;pointer-events:none}
.mbar__call{background:transparent;border-color:var(--linew-strong);color:var(--cream)}
.mbar__call::after{border-color:rgba(238,241,244,.14)}
.mbar__cta{background:var(--sage);border-color:var(--sage);color:var(--night)}
.mbar__cta::after{border-color:rgba(12,18,25,.28)}
.mbar a:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.45);filter:brightness(.95)}
.mbar__call svg{width:17px;height:17px;color:var(--sage)}

/* the crew: real faces, field-guide plate treatment */
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.crew__m{background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.35);border-radius:6px;
  padding:.6rem .6rem 1.2rem;box-shadow:5px 5px 0 rgba(0,0,0,.4);transition:transform .2s var(--ease),box-shadow .2s}
.crew__m:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(123,173,211,.35)}
.crew__ph{display:block;position:relative;overflow:hidden;border:1px solid rgba(33,38,46,.2)}
.crew__ph img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;display:block;filter:grayscale(.15)}
.crew__m:hover .crew__ph img{filter:none}
.crew figcaption{padding:1rem .7rem 0}
.crew__r{display:block;font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pine)}
.crew figcaption b{display:block;font-family:var(--fdisplay);font-weight:800;font-size:1.3rem;margin:.35rem 0 .5rem}
.crew figcaption p{font-size:.88rem;color:var(--ink-soft)}
@media(max-width:900px){.crew{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.crew{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ============ trust bar v2 ============ */
/* the trust band IS the lake: deep water continuous with the hero scene, not a slab */
.trust{position:relative;isolation:isolate;overflow:hidden;color:var(--cream);
  background:var(--seam);padding-block:.4rem 1.9rem;border:0}
.trust__topo{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.trust .wrap,.trust .tl{position:relative;z-index:1}
.trust::before,.trust::after{content:"";position:absolute;left:0;right:0;height:22px;pointer-events:none;z-index:1}
.trust::before{top:0;height:34px;background:linear-gradient(180deg,var(--seam),transparent)}
.trust::after{bottom:0;height:34px;background:linear-gradient(0deg,var(--night-2),transparent)}
.trust .proof__grid{position:relative;border-bottom:0}
.trust .proof__grid::after{content:"";position:absolute;bottom:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(243,237,222,.16),transparent)}
.trust .gauge + .gauge::before{background:rgba(243,237,222,.12)}
/* auto-scrolling client marquee */
.tl{position:relative;padding:1.7rem 0 .5rem}
/* labels */
.tl__lab,.certs__lab{
  display:block;font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,237,222,.5);text-align:center;margin-bottom:1.1rem;
}
.tl__win{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.tl__track{display:flex;align-items:center;gap:clamp(1.6rem,3.4vw,3rem);width:max-content;animation:tlrun 46s linear infinite}
.tl:hover .tl__track{animation-play-state:paused}
@keyframes tlrun{to{transform:translateX(-50%)}}
.tl__i{--s:1;display:flex;align-items:center;justify-content:center;flex:none;
  height:64px;width:clamp(96px,11.4vw,168px);overflow:visible}
.tl__i img{height:calc(var(--bh) * var(--s) * 1px);width:auto;max-width:none;
  transform:translate(calc(var(--tx) * var(--s) * 1px),calc(var(--ty) * var(--s) * 1px));
  filter:brightness(0) invert(1);opacity:.8;transition:opacity .2s}
.tl__i:hover img{opacity:1}
/* partner certifications, held separate from client logos */
.certs{padding-top:1.6rem;margin-top:.9rem;position:relative}
.certs::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,237,222,.16),transparent)}
.certs__lab{margin-bottom:1rem}
.certs__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.2rem,3vw,2.2rem)}
.certs__b{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:7px;padding:.55rem .9rem;min-width:150px;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);opacity:.94;transition:transform .2s var(--ease),opacity .2s,box-shadow .2s}
.certs__b:hover{opacity:1;transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.4)}
.certs__b img{height:78px;width:auto;display:block}
@media(max-width:640px){
  .tl__i{--s:.74;height:48px;width:84px}
  .certs__b img{height:34px}
  .certs__b{min-width:0;padding:.5rem .7rem}
  .trust .proof__grid{row-gap:1.5rem}
  .trust .g-lab{font-size:.56rem;letter-spacing:.12em;white-space:nowrap}
  .certs{gap:1rem}
  .certs__b{padding:.5rem .8rem}
  .tl__track{animation-duration:30s}
}
@media(prefers-reduced-motion:reduce){.tl__track{animation:none;justify-content:center;flex-wrap:wrap;width:auto}}

/* ============ video reel ============ */
.reel{position:relative;background:var(--paper);border:1px solid rgba(0,0,0,.35);padding:.85rem .85rem 0;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);transform:rotate(-1.2deg)}
.reel__frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:var(--night);border:1px solid rgba(33,38,46,.25)}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel figcaption{font-family:var(--fmono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:.7rem .15rem;text-align:left}
.reel__tape{position:absolute;width:96px;height:30px;background:rgba(201,161,59,.4);border-inline:1px dashed rgba(0,0,0,.2);top:-14px;z-index:2}
.reel__tape--l{left:8%;transform:rotate(-8deg)}
.reel__tape--r{right:8%;transform:rotate(6deg)}
.js .reel.reveal{transform:translateY(22px) rotate(-1.2deg)}
.js .reel.reveal.in{transform:rotate(-1.2deg)}
.reel__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--night);display:block}
.reel__topo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--sage);color:var(--night);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(123,173,211,.45),4px 4px 0 rgba(0,0,0,.4);
  transition:transform .2s var(--ease),box-shadow .2s}
.reel__btn svg{width:28px;height:28px;margin-left:4px}
.reel__play:hover .reel__btn{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 12px rgba(123,173,211,.14),6px 6px 0 rgba(0,0,0,.45)}
.reel__play:active .reel__btn{transform:translate(-50%,-50%) scale(.97)}
.reel__meta{position:absolute;left:14px;bottom:12px;font-family:var(--fmono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.75}
.reel__play:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* breadcrumb, child pages only. Mirrors the BreadcrumbList schema. */
.crumb{position:relative;z-index:2;font-family:var(--fmono);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);
  padding:1.1rem 0 0;margin-bottom:1.5rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.crumb a{color:var(--cream-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--sage);border-bottom-color:var(--sage)}
.crumb svg{width:9px;height:9px;opacity:.5;flex:none}
.crumb b{font-weight:700;color:var(--cream)}
@media(max-width:640px){.crumb{font-size:.56rem;letter-spacing:.14em;padding-top:.8rem;margin-bottom:1.1rem}}

/* hero sell line: the persuasive H2 under the keyword H1 (house hero pattern) */
.phero__sell{font-family:var(--fdisplay);font-weight:800;
  font-size:clamp(1.32rem,2.3vw,1.92rem);line-height:1.16;letter-spacing:-.005em;
  color:var(--cream);max-width:26ch;margin-top:.85rem;
  text-shadow:0 4px 26px rgba(0,0,0,.55)}
/* hero lede must clear the scene artwork in the right third */
.lede--hero{max-width:52ch}
@media(max-width:900px){.phero__sell{font-size:1.22rem;max-width:none}.lede--hero{max-width:none}}

/* figure: a captioned diagram plate, used for the hand-drawn charts */
.fig{position:relative;margin:2.6rem 0 1.6rem;padding:1.4rem 1.4rem 1rem;
  background:rgba(22,33,44,.55);border:1px solid rgba(233,236,239,.10);border-radius:10px}
.fig svg{display:block;width:100%;height:auto}
.fig__cap{margin-top:.9rem;font-family:var(--fmono);font-size:.72rem;line-height:1.5;
  letter-spacing:.02em;color:var(--cream-dim)}
@media(max-width:640px){.fig{padding:.9rem .9rem .7rem;margin:1.8rem 0 1.2rem}
  .fig__cap{font-size:.66rem}}

/* closing paragraph after a card grid or figure needs its own air */
.beliefs + p,.fig + p,.idx + p{margin-top:2.2rem;max-width:44em;color:var(--cream-soft)}

/* mega panel: the service x trade matrix will not fit a single column list.
   Columns are subgrid rows so the header, description, link list and "see all"
   line up across all three even though the copy lengths differ. */
.nav__panel--mega{width:min(840px,94vw);padding:1.6rem 1.6rem 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto auto;
  column-gap:1.5rem;row-gap:0;text-align:left;
  max-height:min(80vh,660px);overflow-y:auto;overscroll-behavior:contain}
.nav__branch{display:grid;grid-row:span 4;grid-template-rows:subgrid;min-width:0}
.nav__branch + .nav__branch{padding-left:1.5rem;border-left:1px solid var(--linew)}
.nav__branch-h{display:inline-flex;align-items:center;gap:.5rem;align-self:start;
  font-family:var(--fdisplay);font-weight:800;font-size:1.02rem;color:var(--cream);
  text-decoration:none;padding:0 0 .45rem;transition:color .18s}
.nav__branch-h > svg:last-child{width:8px;height:8px;opacity:.55;transition:transform .18s,opacity .18s}
.nav__branch-h:hover{color:var(--sage)}
.nav__branch-h:hover > svg:last-child{transform:translateX(3px);opacity:1}
.nav__branch-h .nav__ico{color:var(--sage)}
.nav__branch p{font-size:.78rem;line-height:1.5;color:var(--cream-dim);margin:0 0 .85rem;max-width:32ch}

/* glyph chip: the same trade icons the index rails use, so the menu reads as
   part of the site rather than a dropdown bolted on */
.nav__ico{width:15px;height:15px;flex:0 0 15px;color:currentColor}
.nav__quick{display:grid;grid-template-columns:1fr;gap:.12rem;align-content:start}
.nav__quick a{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;margin-left:-.55rem;
  border-radius:6px;font-size:.85rem;color:var(--cream-soft);text-decoration:none;
  transition:color .18s,background .18s}
.nav__quick a .nav__ico{color:var(--cream-dim);transition:color .18s,transform .18s}
.nav__quick a:hover{color:var(--cream);background:rgba(123,173,211,.09)}
.nav__quick a:hover .nav__ico{color:var(--sage);transform:translateX(1px)}
.nav__more{display:block;margin-top:.8rem;padding-top:.65rem;border-top:1px solid var(--linew);
  font-family:var(--fmono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;align-self:end}
.nav__more:hover{color:var(--cream)}
.nav__more--none{border-top-color:transparent;pointer-events:none}

/* footer bar: the plans link used to sit loose in the grid and clip */
.nav__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:1.3rem -1.6rem 0;padding:.85rem 1.6rem;
  border-top:1px solid var(--linew);background:rgba(123,173,211,.05)}
.nav__all{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fmono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);text-decoration:none}
.nav__all svg{width:8px;height:8px;transition:transform .18s}
.nav__all:hover{color:var(--cream)}
.nav__all:hover svg{transform:translateX(3px)}
.nav__foot-cta{font-family:var(--fmono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;padding:.5rem .85rem;border:1px solid var(--linew-strong);
  border-radius:6px;transition:background .18s,border-color .18s}
.nav__foot-cta:hover{background:var(--sage);border-color:var(--sage);color:var(--night-2)}

/* trades panel: ten bare links became a two-column glyph list */
.nav__panel--trades{width:min(430px,94vw);padding:.9rem;display:grid;
  grid-template-columns:1fr 1fr;gap:.1rem .5rem}
.nav__panel--trades a{display:flex;align-items:center;gap:.55rem;padding:.42rem .55rem;
  border-radius:6px;font-size:.85rem;color:var(--cream-soft);text-decoration:none;
  transition:color .18s,background .18s}
.nav__panel--trades a::before{content:none}
.nav__panel--trades a .nav__ico{color:var(--cream-dim);transition:color .18s,transform .18s}
.nav__panel--trades a:hover{color:var(--cream);background:rgba(123,173,211,.09)}
.nav__panel--trades a:hover .nav__ico{color:var(--sage);transform:translateX(1px)}
.nav__panel--trades i{grid-column:1/-1;display:block;height:1px;background:var(--linew);margin:.45rem .5rem}

@media(max-width:940px){
  .nav__panel--mega{grid-template-columns:repeat(2,minmax(0,1fr));width:min(600px,94vw)}
  .nav__branch{grid-row:span 4}
  .nav__branch + .nav__branch{padding-left:1.5rem}
  .nav__branch:nth-child(3){grid-column:1/-1;padding-left:0;border-left:0;
    margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linew)}
  .nav__branch:nth-child(3) .nav__quick{grid-template-columns:repeat(3,1fr)}}
/* nested drawer accordion for the branch children */
.drawer__acc .drawer__acc{margin:0}
.drawer__acc .drawer__acc summary{font-size:.86rem;padding:.5rem .2rem .5rem 1.1rem;color:var(--cream-soft);border:0}
.drawer__acc .drawer__sub{padding-left:1.1rem;border-bottom:0}

/* index rows carry a drawn glyph above the number */
/* index row glyphs now use the homepage patch treatment: a paper disc with dark ink and the
   same hard offset shadow, rather than sage line art floating on the background. */
.idx__ico{display:block;box-sizing:content-box;width:40px;height:40px;padding:15px;
  margin:0 auto .55rem;color:var(--ink);background:var(--paper);border-radius:50%;
  box-shadow:4px 5px 0 rgba(0,0,0,.42);
  outline:1.5px dashed rgba(22,35,47,.45);outline-offset:-7px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.idx:hover .idx__ico{transform:translate(-1px,-2px);box-shadow:6px 7px 0 rgba(0,0,0,.5)}
@media(max-width:640px){.idx__ico{width:30px;height:30px;padding:11px;margin-bottom:.45rem;
  box-shadow:3px 4px 0 rgba(0,0,0,.42);outline-offset:-5px}}

/* form states. The honeypot must be reachable by bots and invisible to people. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__err{margin-top:.8rem;font-size:.86rem;color:#e0908b}
.form__err:not([hidden]){display:block}
input:user-invalid,select:user-invalid{border-color:#c0736e}
.form__done{text-align:center;padding:1.4rem .6rem}
.form__done h3{font-family:var(--fdisplay);font-weight:800;font-size:1.25rem;color:var(--cream);margin-bottom:.5rem}
.form__done p{color:var(--cream-soft);max-width:36ch;margin:0 auto}
.form__done svg{width:46px;height:46px;color:var(--aurora);margin:0 auto .8rem;display:block}
form[data-lead-form][busy] button[type=submit]{opacity:.6;pointer-events:none}

/* article templates */
.phero--post{padding-block:clamp(3rem,6vw,4.4rem) clamp(1.6rem,3vw,2.4rem)}
.postmeta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;
  font-family:var(--fmono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim)}
.postmeta i{width:4px;height:4px;border-radius:50%;background:var(--sage);opacity:.6}
.wrap--post{display:block}
.wrap--post:has(> .postside){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(2rem,4vw,3.4rem);align-items:start}
.prose{max-width:70ch;min-width:0;color:var(--cream-soft);font-size:1.04rem;line-height:1.75}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-family:var(--fdisplay);font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--cream);margin-top:2.6rem;line-height:1.2}
.prose h3{font-family:var(--fdisplay);font-weight:800;font-size:1.18rem;color:var(--cream);margin-top:2rem}
.prose a{color:var(--sage);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li + li{margin-top:.5rem}
.prose blockquote{border-left:2px solid var(--sage);padding:.2rem 0 .2rem 1.2rem;
  font-family:var(--faccent);font-style:italic;font-size:1.14rem;color:var(--cream)}
.prose figure{margin:2rem 0}
.prose figure img{width:100%;height:auto;border-radius:8px;display:block}
.prose figcaption{margin-top:.6rem;font-family:var(--fmono);font-size:.72rem;color:var(--cream-dim)}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linew)}
.postside{position:sticky;top:110px}
.postside__box{background:var(--night-3);border:1px solid var(--linew);border-radius:10px;padding:1.3rem}
.postside__lab{display:block;font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage);margin-bottom:.6rem}
.postside__box p{color:var(--cream-soft);font-size:.94rem;margin-bottom:1rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.2rem,2.4vw,1.8rem)}
.pcard{display:block;background:var(--night-3);border:1px solid var(--linew);border-radius:10px;
  padding:1.3rem;text-decoration:none;transition:transform .2s var(--ease),border-color .2s}
.pcard:hover{transform:translateY(-4px);border-color:var(--sage)}
.pcard__cat{font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage)}
.pcard h3{font-family:var(--fdisplay);font-weight:800;font-size:1.06rem;color:var(--cream);margin:.55rem 0 .5rem;line-height:1.28}
.pcard p{color:var(--cream-soft);font-size:.92rem;line-height:1.6}
.pcard__meta{display:block;margin-top:.9rem;font-family:var(--fmono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim)}
.pager{display:flex;align-items:center;gap:.5rem;margin-top:2.4rem;font-family:var(--fmono);font-size:.8rem}
.pager a,.pager__cur{padding:.45rem .8rem;border:1px solid var(--linew);border-radius:6px;
  color:var(--cream-soft);text-decoration:none}
.pager__cur{background:var(--sage);color:var(--night);border-color:var(--sage)}
.pager a:hover{border-color:var(--sage);color:var(--cream)}
@media(max-width:900px){.wrap--post:has(> .postside){grid-template-columns:minmax(0,1fr)}.postside{position:static}}

/* article chrome */
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.readbar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sage),var(--gold));box-shadow:0 0 14px rgba(123,173,211,.5)}
.toc{margin-bottom:1.1rem}
.toc__lab{display:block;font-family:var(--fmono);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-dim);margin-bottom:.7rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--linew)}
.toc li{margin:0}
.toc a{display:block;padding:.42rem 0 .42rem .85rem;margin-left:-1px;border-left:2px solid transparent;
  font-size:.8rem;line-height:1.36;color:var(--cream-dim);text-decoration:none;
  transition:color .2s,border-color .2s}
.toc a:hover{color:var(--cream-soft)}
.toc a.on{color:var(--sage);border-left-color:var(--sage)}
@media(max-width:900px){.toc{display:none}}
/* print-set opening paragraph */
.prose > p:first-of-type::first-letter{float:left;font-family:var(--fdisplay);font-weight:800;
  font-size:3.5rem;line-height:.82;padding:.08em .12em 0 0;color:var(--sage)}
.prose > p:first-of-type em{font-style:italic}
blockquote.fieldnote-q{position:relative;border-left:0;background:rgba(123,173,211,.06);
  border:1px solid rgba(123,173,211,.22);border-radius:8px;padding:1.2rem 1.3rem}
blockquote.fieldnote-q::before{content:"\201C";position:absolute;top:-.15em;left:.35rem;
  font-family:var(--faccent);font-size:3.4rem;color:var(--sage);opacity:.35;line-height:1}
blockquote.fieldnote-q p{margin:0;padding-left:1.6rem}
@media(max-width:640px){.prose > p:first-of-type::first-letter{font-size:2.8rem}}

/* proof grid used outside the trust band needs its own responsive fallback,
   otherwise four columns of display numerals force the page wider than the viewport */
/* 1fr floors at the content min-width, so a long display numeral cannot shrink and
   pushes the whole page wider. minmax(0,1fr) lets the column collapse. */
.proof__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.proof__grid .gauge{min-width:0}
.proof__grid .g-read,.proof__grid .g-lab{overflow-wrap:anywhere}
@media(max-width:820px){.proof__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}}
@media(max-width:420px){.proof__grid .g-read{font-size:clamp(1.6rem,8vw,2.2rem)}}

/* footer sitemap: the matrix earns real internal linking here */
.foot__grid{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:clamp(1.8rem,4vw,3.4rem)}
.foot__links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem}
.foot__col h3{font-family:var(--fmono);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-dim);margin-bottom:.7rem}
.foot__col h3.foot__h3b{margin-top:1.2rem}
.foot__col a{display:block;padding:.2rem 0;font-size:.84rem;color:var(--cream-soft);
  text-decoration:none;transition:color .18s}
.foot__col a:hover{color:var(--sage)}
.foot__nap{display:flex;flex-direction:column;gap:.3rem;margin-top:1.1rem;font-style:normal;
  font-size:.86rem;color:var(--cream-soft)}
.foot__nap a{color:var(--cream);text-decoration:none}
.foot__nap a:hover{color:var(--sage)}
.foot__nap span{color:var(--cream-dim);font-size:.8rem}
.foot__legal{display:flex;gap:1rem;flex-wrap:wrap}
.foot__legal a{color:var(--cream-dim);text-decoration:none;font-size:.8rem}
.foot__legal a:hover{color:var(--sage)}
@media(max-width:1100px){.foot__links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr}}
@media(max-width:560px){.foot__links{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}}

/* section blending: stacked dark sections met at a hard line on mobile */
.section,.trust{position:relative}
.section--tint::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;
  pointer-events:none;background:linear-gradient(180deg,rgba(12,18,25,.85),transparent)}
.section--tint::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  pointer-events:none;background:linear-gradient(0deg,rgba(12,18,25,.6),transparent)}
@media(max-width:640px){
  .section--tint::before{height:40px}
  .section--tint::after{height:40px}
}


/* footer: five columns of identical weight gave the eye nowhere to land, and the contact
   details were loose text. Hierarchy on the parent link, a card for the contact block. */
.foot__card{background:rgba(22,33,44,.5);border:1px solid rgba(233,236,239,.10);
  border-radius:10px;padding:1.25rem 1.3rem}
.foot__card > p{font-size:.92rem;line-height:1.55;color:var(--cream-soft);margin:0 0 .9rem}
.foot__card .foot__rating{display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .7rem;border-radius:999px;background:rgba(201,161,59,.1);
  border:1px solid rgba(201,161,59,.28);font-size:.8rem;color:var(--cream);text-decoration:none}
.foot__card .foot__rating .stars{color:var(--gold);letter-spacing:.04em;font-size:.76rem}
.foot__nap{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(233,236,239,.1)}
.foot__nap a{font-size:.95rem;font-weight:600}
/* the first link in each column is the branch parent and should read as such */
.foot__col a:first-of-type{color:var(--cream);font-weight:600}
.foot__col a:first-of-type::after{content:"";display:block;height:1px;margin:.5rem 0 .1rem;
  background:linear-gradient(90deg,rgba(233,236,239,.16),transparent)}
.foot__sub{padding-left:0}
.foot__note{display:block;margin-top:.7rem;margin-bottom:.15rem;font-family:var(--fmono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim)}
/* the columns ended well above the legal row, leaving a dead band */
.foot__grid{align-items:start;padding-bottom:.4rem}
.foot__bottom{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(233,236,239,.1);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between}
@media(max-width:860px){.foot__card{padding:1.1rem}}

/* instant audit: the progress state stands in for a response we cannot read, because the
   n8n endpoint is called no-cors and returns an opaque result. */
.auditform label{display:block;margin-bottom:1.15rem;font-family:var(--fmono);font-weight:700;
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.auditform input{display:block;width:100%;margin-top:.4rem;padding:.55rem .1rem;
  background:transparent;border:0;border-bottom:1.5px solid rgba(22,35,47,.28);border-radius:0;
  color:var(--ink);font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;
  transition:border-color .18s,box-shadow .18s}
.auditform input::placeholder{color:rgba(22,35,47,.34);font-size:.95rem}
.auditform input:focus{outline:0;border-bottom-color:var(--pine);
  box-shadow:0 1.5px 0 0 var(--pine)}
.auditform input:user-invalid{border-bottom-color:#b4472f;box-shadow:0 1.5px 0 0 #b4472f}
.auditform button{margin-top:1.1rem;width:100%;justify-content:center}
.auditform__fine{margin-top:1rem;padding-top:.9rem;border-top:1.5px dashed rgba(22,35,47,.24);
  font-family:var(--fmono);font-size:.68rem;line-height:1.55;letter-spacing:.02em;color:var(--ink-soft)}
.auditscan{padding:1.6rem .2rem}
.auditscan__bar{height:6px;border-radius:999px;background:rgba(233,236,239,.1);overflow:hidden}
.auditscan__bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--sage),var(--gold));transition:width .24s linear}
.auditscan__step{margin-top:.9rem;font-family:var(--fmono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage)}

/* tap targets. WCAG 2.5.8 exempts links inline in a sentence, but standalone navigation
   links are controls and were rendering around 20px tall on mobile. */
@media(max-width:900px){
  .foot__col a,.foot__legal a,.foot__nap a,.drawer__sub a,.drawer__top,
  .nav__quick a,.nav__more,.nav__all,.pager a,.toc a{
    min-height:44px;display:flex;align-items:center}
  .foot__col a::after{align-self:stretch}
  .foot__rating,.foot__top,.cta__call,.brand{min-height:44px;display:inline-flex;align-items:center}
  .foot__sub{min-height:44px}
  .idx__body h3 a{display:inline-block;min-height:44px;line-height:44px}
  /* the stragglers, each a few pixels short of the minimum */
  .crumb a,.crumb b{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .foot__legal a,.pager a,.pager__cur{min-width:44px;justify-content:center}
  .gp-alt a{min-height:44px;display:inline-flex;align-items:center}
  input[type=checkbox],input[type=radio]{width:24px;height:24px;min-width:24px}
  label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:44px;display:flex;align-items:center;gap:.6rem}
  .check{min-height:44px;display:flex;align-items:center;gap:.6rem}
}

/* skip link: keyboard users had to tab the whole nav on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.8rem 1.1rem;
  background:var(--sage);color:var(--night);font-family:var(--fmono);font-size:.8rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:0 0 8px 0}
.skip:focus{left:0}
#main:focus{outline:none}

/* the metric source line is not a figure caption; it was borrowing .fig__cap */
.metric__src{text-align:center;margin-top:1.2rem;font-family:var(--fmono);font-size:.72rem;
  line-height:1.5;color:var(--cream-dim)}

/* the landing page's only conversion point sat 1113px down on mobile. A sticky bar keeps it
   reachable without restructuring the hero. */
.lpbar{display:none}
@media(max-width:900px){
  .lpbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(10,18,25,.92);border-top:1px solid rgba(233,236,239,.12);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .lpbar .btn{width:100%;justify-content:center;min-height:48px}
  body:has(.lpbar){padding-bottom:76px}
}
/* cards in a row should share a baseline */
.beliefs{align-items:stretch}
.beliefs > *{display:flex;flex-direction:column}

/* a standalone plate has no grid to constrain it and was expanding to the full column */
/* The wireframe sat as a 420px block on its own row, leaving ~870px of empty
   space beside it on all ten websites-* pages. It belongs next to the heading it
   illustrates, not stranded above the visitor cards. Scoped with :has() so only
   the sections that actually contain one become a grid. */
.section:has(> .wrap > .plate--wire) > .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;
  column-gap:clamp(2rem,4vw,3.6rem);row-gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.section:has(> .wrap > .plate--wire) > .wrap > .sec-head{grid-column:1;grid-row:1}
.section:has(> .wrap > .plate--wire) > .wrap > .plate--wire{grid-column:2;grid-row:1;margin:0}
.section:has(> .wrap > .plate--wire) > .wrap > :not(.sec-head):not(.plate--wire){grid-column:1/-1}
@media(max-width:900px){
  .section:has(> .wrap > .plate--wire) > .wrap{grid-template-columns:minmax(0,1fr)}
  .section:has(> .wrap > .plate--wire) > .wrap > .plate--wire{grid-column:1;grid-row:auto;margin:1.5rem 0 .4rem}}
.plate--wire{max-width:420px;margin:2rem 0 .5rem}
.plate--wire svg{width:100%;height:auto;display:block}
@media(max-width:640px){.plate--wire{max-width:100%;margin:1.5rem 0 .4rem}}

/* ── ledger grid: the named-client proof block on results ──────────────────
   Each card is a real client and a real figure. Two figure kinds live here
   (absolute leads, percentage lift) so the label carries the unit rather
   than the number, and nothing gets averaged into a single fake headline. */
.ledgergrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(238,241,244,.12);border:1px solid rgba(238,241,244,.12);margin-top:2.4rem}
.ledger{display:flex;flex-direction:column;gap:.45rem;padding:1.9rem 1.3rem 1.5rem;
  background:var(--seam);text-decoration:none;position:relative;transition:background .2s}
.ledger:hover{background:rgba(123,173,211,.06)}
.ledger__fig{font-family:var(--fdisplay);font-weight:900;line-height:1;letter-spacing:-.02em;
  font-size:clamp(1.75rem,3vw,2.5rem);color:var(--sage);display:inline-flex;align-items:baseline;gap:.04em}
.ledger__fig small{font-size:.5em;font-weight:800}
.ledger__lab{font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(238,241,244,.62);line-height:1.5}
.ledger__who{margin-top:auto;padding-top:1rem;font-size:.86rem;color:rgba(238,241,244,.9);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;line-height:1.35}
.ledger__who svg{width:15px;height:15px;flex:none;color:var(--sage);opacity:.7;transition:transform .2s}
.ledger:hover .ledger__who svg{transform:translate(3px,-3px);opacity:1}
@media(max-width:1024px){.ledgergrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ledgergrid{grid-template-columns:minmax(0,1fr)}
  .ledger{padding:1.5rem 1.2rem;min-height:88px}}

/* ── topic index: the full blog shelf, grouped by subject ──────────────────
   The index used to show 6 of 35 posts, so a visitor arriving from a retired
   category archive could not reach 29 of them. Grouped by what a contractor
   is looking for rather than by publish date. */
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:2.4rem}
.tindex{border:1px solid rgba(238,241,244,.14);background:var(--seam);padding:1.7rem 1.6rem 1.3rem}
.tindex__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.tindex__head h3{font-size:1.06rem;margin:0;flex:1;line-height:1.3}
.tindex__n{font-family:var(--fmono);font-size:.7rem;color:rgba(238,241,244,.5);
  border:1px solid rgba(238,241,244,.2);border-radius:2px;padding:.1rem .42rem;flex:none}
.tindex__blurb{font-size:.87rem;color:rgba(238,241,244,.62);line-height:1.55;
  margin:0 0 1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(238,241,244,.12)}
.tindex__rows{display:flex;flex-direction:column}
.tindex__row{display:flex;align-items:center;gap:.8rem;padding:.62rem 0;text-decoration:none;
  border-bottom:1px solid rgba(238,241,244,.07);min-height:44px;transition:padding-left .18s}
.tindex__row:last-child{border-bottom:0}
.tindex__row:hover{padding-left:.35rem}
.tindex__t{flex:1;font-size:.9rem;line-height:1.4;color:rgba(238,241,244,.86)}
.tindex__row:hover .tindex__t{color:var(--sage)}
.tindex__row svg{width:14px;height:14px;flex:none;color:rgba(238,241,244,.3)}
.tindex__row:hover svg{color:var(--sage)}
@media(max-width:860px){.tgrid{grid-template-columns:minmax(0,1fr)}}

/* The homepage steps carried a bare outlined number while every child page carried the
   paper badge, leaving the parent the plainest page on the site. The badge sits BESIDE
   .step__n rather than inside it: .step__n is color:transparent for the outline effect,
   and an icon inheriting that would render as nothing at all. */
.step__ico{margin-bottom:.7rem}

/* ── audit bar: one field capture on high intent pages ─────────────────────
   The full audit form asks four questions. Asking all four before a visitor has
   any reason to trust the tool is the friction. This asks the one thing only they
   can supply, then hands off to /free-audit/ where the rest is collected and the
   single existing webhook is posted. No second endpoint, no partial submissions. */
.auditbar{display:flex;gap:.7rem;align-items:stretch;flex-wrap:wrap;
  background:var(--paper);border:1px solid rgba(0,0,0,.32);border-radius:8px;
  padding:1.15rem 1.2rem;box-shadow:6px 7px 0 rgba(0,0,0,.38);max-width:640px}
.auditbar__lab{flex:0 0 100%;font-family:var(--fmono);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:.15rem}
.auditbar input{flex:1 1 260px;min-width:0;padding:.6rem .1rem;background:transparent;
  border:0;border-bottom:1.5px solid rgba(22,35,47,.28);border-radius:0;color:var(--ink);
  font:inherit;font-size:1rem;min-height:44px;transition:border-color .18s,box-shadow .18s}
.auditbar input::placeholder{color:rgba(22,35,47,.34)}
.auditbar input:focus{outline:0;border-bottom-color:var(--pine);box-shadow:0 1.5px 0 0 var(--pine)}
/* Three fields now (name, email, website), so the basis is set per field rather than left
   to one flex:1 1 260px that put three inputs and a button into a ragged wrap.
   Row one is name and email, row two is the website and the button. */
.auditbar input[name="contactName"],
.auditbar input[name="email"]{flex:1 1 calc(50% - .35rem)}
.auditbar input[name="url"]{flex:1 1 240px}
@media(max-width:560px){
  .auditbar input[name="contactName"],
  .auditbar input[name="email"],
  .auditbar input[name="url"]{flex:1 1 100%}
  .auditbar .btn{flex:1 1 100%;justify-content:center}
}
.auditbar .btn{flex:0 0 auto;min-height:44px}
.auditbar__fine{flex:0 0 100%;font-family:var(--fmono);font-size:.72rem;letter-spacing:.02em;
  color:var(--ink-soft);margin-top:.15rem}
@media(max-width:560px){.auditbar{padding:1rem}.auditbar .btn{width:100%;justify-content:center}}


/* A contractor's whole fear is that a form means a salesperson. "No call required" answers
   it and was set smaller than the field label. It is now the loudest thing in the strip. */
.auditbar__fine b, .auditform__fine b{color:var(--ink);font-weight:700;font-size:1.06em}


/* ── the offer, as objects rather than a sentence ──────────────────────────
   "A free website mockup, a 60 point audit, and a custom growth plan" was the whole offer
   and it was one clause of grey body text. Competitors put their offer in the hero; this
   makes it something you see rather than something you have to finish reading. */
.offer{margin-top:1.5rem;max-width:640px}
.offer__lab{display:block;font-family:var(--fmono);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.85rem}
.offer__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.offer__item{display:flex;flex-direction:column;gap:.3rem;padding:.95rem .85rem;
  background:rgba(233,236,239,.05);border:1px solid rgba(238,241,244,.14);border-radius:4px}
.offer__item .idx__ico{width:20px;height:20px;padding:8px;margin:0 0 .35rem;
  box-shadow:2px 3px 0 rgba(0,0,0,.4);outline-offset:-4px}
.offer__item b{font-size:.92rem;color:var(--cream);font-weight:700;line-height:1.25}
.offer__item i{font-style:normal;font-size:.78rem;color:var(--cream-dim);line-height:1.4}
@media(max-width:720px){
  .offer__row{grid-template-columns:1fr;gap:.55rem}
  .offer__item{flex-direction:row;align-items:center;gap:.7rem;padding:.7rem .8rem}
  .offer__item .idx__ico{margin:0;flex:none}
  .offer__item b{flex:0 0 auto}
  .offer__item i{display:none}
}

/* Small phones. At 360x780 the three offer rows overflowed the fold by 19px. Solved by
   tightening the rows rather than cutting more art, which was already down to 28 percent
   of the screen and is the thing doing the differentiating. */
@media(max-width:400px){
  .offer{margin-top:1.1rem}
  .offer__lab{margin-bottom:.6rem;font-size:.64rem}
  .offer__row{gap:.4rem}
  .offer__item{padding:.5rem .7rem;gap:.6rem}
  .offer__item .idx__ico{width:17px;height:17px;padding:7px}
  .offer__item b{font-size:.86rem}
}

/* ── Growth Expedition: the free instant audit, given its own ground ───────
   Josh's art direction: the Bear North mark with a magnifying glass, and a bear claw
   scratch across the left background. The claw is texture behind the section, drawn with
   slice so it bleeds off the left edge without ever widening the page. */
.expedition{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--seam) 0%,#0d1a26 52%,var(--seam) 100%)}
.expedition__claw{position:absolute;left:0;top:0;height:100%;width:min(420px,42%);
  z-index:-1;pointer-events:none}
/* Three columns: the bear disc, the ask, and the thing you get back. The section used to
   spend a 260px column on decoration while the deliverable was a clause inside a
   paragraph. DESIGN-REVIEW L4: we ask for a URL and never show what the sixty point report
   is. Naming the four areas next to the form is the honest version of that, since a real
   sample report is still blocked on Josh. */
.expedition__in{display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,300px);
  gap:clamp(1.6rem,3.2vw,2.8rem);align-items:center}
.expedition__report{background:rgba(237,241,244,.05);border:1px solid rgba(237,241,244,.14);
  border-radius:8px;padding:1.3rem 1.35rem;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
.report__kick{display:flex;align-items:center;gap:.45rem;font-family:var(--fmono);
  font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:.55rem}
.report__kick .orn{width:14px;height:14px;flex:none}
.report__head{margin:0 0 1rem;font-family:var(--fdisplay);font-weight:700;
  font-size:1.02rem;line-height:1.28;color:var(--cream)}
.report__list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.report__list li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;
  border-top:1px solid rgba(237,241,244,.1)}
.report__list li:first-child{border-top:0}
.report__n{font-family:var(--fmono);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  color:var(--gold);flex:none;min-width:1.6em}
.report__area{font-size:.92rem;color:var(--cream-dim)}
.report__foot{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:1rem;
  padding-top:.85rem;border-top:1px solid rgba(237,241,244,.14);
  font-family:var(--fmono);font-size:.68rem;letter-spacing:.04em;color:var(--cream-dim)}
.report__foot b{color:var(--cream);font-weight:700}
@media(max-width:1180px){
  .expedition__in{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
  .expedition__report{grid-column:1 / -1}
}
.expedition__art{display:flex;justify-content:center}
.expedition__disc{position:relative;display:grid;place-items:center;
  width:min(230px,54vw);aspect-ratio:1;border-radius:50%;background:var(--paper);
  box-shadow:7px 9px 0 rgba(0,0,0,.42);
  outline:1.5px dashed rgba(22,35,47,.4);outline-offset:-12px}
.expedition__bear{width:56%;height:auto;color:var(--ink)}
.expedition__glass{position:absolute;right:4%;bottom:4%;width:44%;height:auto;
  filter:drop-shadow(2px 3px 0 rgba(233,236,239,.75))}
.expedition__lab{display:block;font-family:var(--fmono);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.expedition__body h2{margin:0 0 .7rem}
.expedition__form{margin-top:1.6rem;max-width:none}
@media(max-width:860px){
  .expedition__in{grid-template-columns:1fr;gap:1.6rem}
  .expedition__art{justify-content:flex-start}
  .expedition__claw{width:min(300px,58%);opacity:.8}
}

/* Nav links measured 61x18 with zero padding: the clickable strip was 18px tall. Text size
   is right, the hit area was not. Padding only, so nothing moves visually. */
.nav a{padding-block:.85rem}
.brand{padding-block:.15rem}

/* book cover: Josh's rendered hardcover, keyed off its studio backdrop so it sits on the
   dark page instead of in a grey box. The CSS-built book this replaces was a stand-in for
   exactly this asset; a real render has lighting and board thickness that pseudo elements
   only approximate. */
/* The book column used to be half of a 1fr 1fr split while the cover was capped at
   330px, so 206px of dead space sat between the book and the copy and read as a
   gap three times the one the grid intended. Shrink the column to the cover so the
   slack lands at the page edge, where it belongs, instead of in the middle. */
.split:has(> .bookcover){grid-template-columns:auto minmax(0,1fr)}
/* rem, not em: the fine print is set in the mono face at .62rem, so an em cap
   collapsed to ~337px there and broke the link across two lines. */
.split:has(> .bookcover) > :not(.bookcover) > *{max-width:34rem}
.bookcover{margin:0 0 1.7rem}
.bookcover img{display:block;width:100%;height:auto;max-width:400px;
  filter:drop-shadow(16px 20px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
  transition:transform .3s var(--ease)}
.bookcover img:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.bookcover img,.bookcover img:hover{transform:none;transition:none}}
@media(max-width:900px){.bookcover{display:flex;justify-content:center}.bookcover img{max-width:250px}}

/* "How the work runs" steps. The section shipped on 23 pages as a heading plus a trail map
   and nothing else: the four step names existed only inside the map's aria-label, which is
   the one place a sighted visitor cannot read and a crawler will not count. These are those
   names, plus what each one means. */
.runsteps{list-style:none;margin:2.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.runsteps li{display:grid;grid-template-rows:auto auto 1fr;gap:.4rem;
  padding-top:1rem;border-top:1px solid var(--linew)}
.runsteps__n{font-family:var(--fmono);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  color:var(--gold)}
.runsteps__t{font-family:var(--fdisplay);font-weight:700;font-size:1.02rem;line-height:1.22;
  color:var(--cream)}
.runsteps__d{font-size:.9rem;line-height:1.5;color:var(--cream-dim)}
@media(max-width:1000px){.runsteps{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
@media(max-width:560px){.runsteps{grid-template-columns:1fr;gap:1.1rem}}

/* Ledger rows for clients whose case study has no narrative yet. They keep the figure and
   the label and lose the affordance, because there is nowhere to go: the old URL becomes a
   404 the moment this build replaces the live site. */
.ledger--nolink{cursor:default}
.ledger--nolink:hover{transform:none;box-shadow:none}
.logrow--nolink{cursor:default}
.logrow--nolink:hover{transform:none;background:none}


/* Gravity Forms submit buttons render 38px tall, under the 44px tap target, on every form
   the theme places. Found at 768 on /book/, /contact/ and /growth-plan/. The phone field's
   country prefix button has the same problem. */
/* Gravity's buttons render 38px, under the 44px tap target, on every form the theme
   places. Found at 768 on /book/, /contact/ and /growth-plan/.
   Two earlier attempts overrode its rules and lost, because main.css is enqueued before
   Gravity's stylesheet and the specificity was equal. The framework exposes its own token,
   --gf-ctrl-btn-size, so that is what gets set rather than the rules that read it.
   It carries !important because Gravity sets the same token on the same element from
   `.gform-theme.gform-theme--framework.gform_wrapper`, three classes to our one, and its
   stylesheet is enqueued after main.css. Matching that selector would work today and break
   the day they rename a class. Overriding a plugin's design token is what !important is
   actually for. */
.gform_wrapper,
.gform-theme--framework{--gf-ctrl-btn-size:44px !important}

/* The CTA call link measured 43.x and rounded to 44 in reporting, which is a tap target
   that passes on a screenshot and fails on a thumb. Floored explicitly rather than left to
   line-height arithmetic. */
.cta__call{min-height:44px;display:inline-flex;align-items:center}

/* Nested accordion headers in the mobile drawer measured 38px, under the 44px tap target,
   in the primary mobile navigation. Missed by every sweep so far because the tap-target
   check only looked at a, button and input[type=submit]; these are <summary>. */
.drawer__acc summary{min-height:44px;display:flex;align-items:center}
.drawer__sub .drawer__acc summary{min-height:44px}

/* related-services block carried in from the live blog. It arrived with raw hex
   inline styles (#f5fbff on a dark page); same intent, expressed in tokens. */
.bnd-internal-links{background:rgba(123,173,211,.07);border-left:3px solid var(--sage);
  padding:1.1rem 1.3rem;margin:1.9rem 0;border-radius:0 6px 6px 0}
.bnd-internal-links > p{margin:0 0 .5rem;font-family:var(--fmono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
.bnd-internal-links ul{margin:0;padding-left:1.1rem}
.bnd-internal-links li + li{margin-top:.35rem}

/* Gravity's international phone field ships two sub-labels, "Country" and "Phone
   Number", that belong to the country selector and the number input. The theme
   never styled .gform-field-label--type-sub, so they rendered as visible block
   text UNDER their own inputs, which read as two extra empty fields. Hidden from
   sight, kept for screen readers. */
.gform_wrapper .gform-field-label--type-sub{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.gform_wrapper .gform-phone__input-wrapper{display:flex;align-items:stretch;gap:.5rem}
.gform_wrapper .gform-phone__input{flex:1 1 auto;min-width:0}

/* The phone field's label computed text-transform:none while every other Gravity
   label was uppercase, from identical classes: a plugin rule scoped to
   .gfield--type-phone was winning. State it for every field type rather than
   chasing whichever selector wins next release. */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label:not(.gform-field-label--type-sub){
  text-transform:uppercase;letter-spacing:.04em}

/* The submit button rendered in Gravity's default blue (#204ce5) on a page whose
   every other control is the brand sky. Matches .btn--primary. */
/* Gravity 2.9 renders <button class="gform_button button"> inside .gform-footer
   with a HYPHEN. The first attempt targeted .gform_footer with an underscore and
   silently matched nothing, so the button stayed default blue while the CSS looked
   correct. Target the button class itself, which is stable across both. */
.gform_wrapper .gform_button,
.gform_wrapper .gform-footer button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input[type=submit]{
  background:var(--sage);border:1.5px solid var(--sage);color:var(--night);
  font-family:var(--fmono);font-weight:700;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;padding:1.05rem 1.6rem;border-radius:var(--r);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform-footer button:hover{
  transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(201,161,59,.55)}

/* GHL booking embed. The iframe cannot size itself cross origin, so it gets a
   min-height that fits the calendar without an inner scrollbar, and a light
   surface because the widget renders on white. */
.bnd-calwrap{background:var(--paper);border-radius:8px;padding:.6rem;margin:2rem 0 .5rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.35)}
/* wc_ghl_frame is the hook GHL's form_embed.js looks for; kept and given a rule so
   it is a styled class rather than an orphan the class audit flags. */
.bnd-calendar,.wc_ghl_frame{display:block;width:100%;min-height:760px;border:0;border-radius:5px}
@media(max-width:640px){.bnd-calendar{min-height:900px}}

.soon{opacity:.55}.soon i{font-style:normal;font-family:var(--fmono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-left:.5rem;border:1px solid rgba(123,173,211,.35);border-radius:3px;padding:.1rem .34rem;vertical-align:middle}