/* ==========================================================================
   Monkey's Tree Service — "machine yard" design system
   Dark ground, hi-vis machine yellow, expanded grotesk caps, spec-sheet rules.
   The accent is the boom-lift yellow out of the company's own job photos.
   ========================================================================== */

@font-face{font-family:Archivo;src:url(/fonts/archivo-var.woff2) format('woff2-variations');
  font-weight:400 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/plexmono-500.woff2) format('woff2');
  font-weight:500;font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/plexmono-600.woff2) format('woff2');
  font-weight:600;font-display:swap}

:root{
  /* neutrals carry a green bias — picked, not inherited grey */
  --void:#0A0B0A; --pitch:#101210; --steel:#181B18; --iron:#232722;
  --paper:#F1F0EC; --chalk:#FFFFFF;
  --ink:#14170F; --ink-dim:#5B6154; --rule-lt:rgba(20,23,15,.16);
  --chalk-dim:#A6AEA3; --rule-dk:rgba(255,255,255,.14);
  /* one bold accent, plus a separate semantic hazard */
  --machine:#FFC300; --machine-dk:#D9A400;
  --hazard:#FF3D00;
  --moss:#5C8F63;
  --f-disp:Archivo,"Helvetica Neue",Arial,sans-serif;
  --f-mono:PlexMono,ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1280px; --pad:clamp(18px,4.5vw,44px);
  --gut:clamp(20px,3vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--void);color:var(--paper);
  font-family:var(--f-disp);font-size:17px;font-weight:420;line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.1em;max-width:68ch}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--machine);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--machine);color:var(--void);
  padding:14px 20px;font-weight:800;z-index:200}
.skip:focus{left:0;top:0}

/* ---------- type scale ------------------------------------------------- */
.display,h1,h2.h-xl{margin:0;font-weight:860;font-stretch:112%;text-transform:uppercase;
  letter-spacing:-.018em;line-height:.93;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.35rem + 3.5vw,4.4rem)}
.h-xl{font-size:clamp(1.9rem,1rem + 3.4vw,3.5rem)}
h2,.h-lg{margin:0;font-size:clamp(1.55rem,1rem + 2.1vw,2.6rem);font-weight:840;
  font-stretch:108%;text-transform:uppercase;letter-spacing:-.014em;line-height:1;
  text-wrap:balance}
h3,.h-md{margin:0;font-size:clamp(1.08rem,1rem + .45vw,1.32rem);font-weight:700;
  letter-spacing:-.01em;line-height:1.2}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);line-height:1.5;font-weight:420;
  color:var(--chalk-dim);max-width:60ch}
.plate{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-mono);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--machine)}
.plate::before{content:"";width:26px;height:2px;background:var(--machine);flex:none}
.plate.bare::before{display:none}
.num{font-family:var(--f-mono);font-weight:600;font-size:.78rem;letter-spacing:.1em;
  color:var(--machine)}
.fine{font-size:.86rem;color:var(--ink-dim)}
.on-dark .fine,.dark .fine{color:var(--chalk-dim)}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:900px}
.sec{padding:clamp(56px,7vw,116px) 0;position:relative}
.sec.tight{padding:clamp(38px,4vw,64px) 0}
.paper{background:var(--paper);color:var(--ink)}
.paper .lede{color:var(--ink-dim)}
.pitch{background:var(--pitch)}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut);
  align-items:end;margin-bottom:clamp(28px,3.5vw,52px)}
.sechead .plate{margin-bottom:1.1em}
.rule{height:1px;background:var(--rule-dk);border:0;margin:0}
.paper .rule{background:var(--rule-lt)}

/* ---------- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font:inherit;font-weight:750;font-size:.98rem;letter-spacing:.01em;
  padding:1.05em 1.7em;border:0;border-radius:0;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;transition:color .18s,background-color .18s}
.btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6em}
.btn-primary{background:var(--machine);color:#1A1400}
.btn-primary::after{content:"";position:absolute;inset:0;background:var(--chalk);
  transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.btn-primary:hover::after{transform:translateY(0)}
.btn-line{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule-dk)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--machine);color:var(--machine)}
.paper .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-lt)}
.paper .btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn-hazard{background:var(--hazard);color:#fff}
.btn.sm{padding:.72em 1.15em;font-size:.88rem}
.btn.block{width:100%}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem}
.arrow{width:1.05em;height:1.05em;flex:none;transition:transform .2s}
.btn:hover .arrow,.idx-row:hover .arrow{transform:translateX(4px)}

/* ---------- header ------------------------------------------------------ */
.ebar{display:flex;align-items:center;justify-content:center;gap:.7em;background:var(--hazard);
  color:#fff;text-decoration:none;font-family:var(--f-mono);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;text-align:center}
.topbar{background:var(--void);border-bottom:1px solid var(--rule-dk);
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--chalk-dim)}
.topbar .wrap{display:flex;justify-content:space-between;gap:18px;min-height:40px;
  align-items:center;flex-wrap:wrap}
.topbar a{color:var(--machine);text-decoration:none;font-weight:600}
.topbar .sp{display:inline-flex;align-items:center;gap:.55em}

.head{position:sticky;top:0;z-index:60;background:rgba(10,11,10,.86);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--rule-dk)}
.head .wrap{display:flex;align-items:center;gap:clamp(16px,2.5vw,34px);min-height:76px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:44px;height:44px}
.brand b{font-weight:860;font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.02rem;line-height:.96;display:block}
.brand s{display:block;text-decoration:none;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.19em;color:var(--machine);font-weight:600}
.mainnav{display:flex;gap:2px;margin-left:auto}
.mainnav a{padding:.7em .95em;text-decoration:none;font-size:.9rem;font-weight:600;
  color:var(--chalk-dim);position:relative}
.mainnav a::after{content:"";position:absolute;left:.95em;right:.95em;bottom:.5em;height:2px;
  background:var(--machine);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.mainnav a:hover,.mainnav a.on{color:var(--paper)}
.mainnav a:hover::after,.mainnav a.on::after{transform:scaleX(1)}
.head-cta{display:flex;gap:9px;flex:none}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  padding:12px;flex-direction:column;justify-content:space-between;order:3;z-index:80}
.burger span{display:block;height:2px;background:var(--paper);transition:transform .22s,opacity .22s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;isolation:isolate;min-height:clamp(540px,82vh,860px);display:flex;
  align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(.78) contrast(1.06) brightness(.94);animation:drift 26s ease-out forwards}
@keyframes drift{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,11,10,.82) 0%,rgba(10,11,10,.42) 34%,
    rgba(10,11,10,.88) 78%,var(--void) 100%)}
.hero .wrap{padding-block:clamp(40px,6vw,80px);width:100%}
.hero h1{margin:.6rem 0 0;max-width:19ch}
.hero .lede{margin-top:1.5rem;color:#D6DBD3}
.scrollcue{position:absolute;left:var(--pad);bottom:18px;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-dim);
  display:flex;align-items:center;gap:.6em}
.scrollcue::after{content:"";width:1px;height:26px;background:var(--machine);
  animation:cue 2.1s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ZIP coverage check */
.zip{margin-top:2.2rem;max-width:420px}
.zip form{display:flex;border:1.5px solid var(--rule-dk);background:rgba(10,11,10,.55)}
.zip input{flex:1;min-width:0;font:inherit;font-family:var(--f-mono);font-size:.92rem;
  letter-spacing:.1em;background:transparent;border:0;color:var(--paper);padding:1em 1.1em}
.zip input::placeholder{color:var(--chalk-dim)}
.zip input:focus{outline:0}
.zip form:focus-within{border-color:var(--machine)}
.zip button{border:0;background:var(--machine);color:#1A1400;font:inherit;font-weight:750;
  font-size:.88rem;padding:0 1.3em;cursor:pointer}
.zip-out{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;margin-top:.7em;
  text-transform:uppercase;min-height:1.2em}
.zip-out.yes{color:var(--machine)}
.zip-out.no{color:var(--chalk-dim)}

/* ---------- stat strip -------------------------------------------------- */
.stats{border-block:1px solid var(--rule-dk);background:var(--void)}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr)}
.stats li{padding:clamp(20px,2.4vw,32px) var(--pad);border-left:1px solid var(--rule-dk)}
.stats li:first-child{border-left:0}
.stats b{display:block;font-size:clamp(1.5rem,1rem + 1.5vw,2.3rem);font-weight:860;
  font-stretch:110%;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:.5em;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)}

/* ---------- symptom picker ---------------------------------------------- */
.symptoms{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk)}
.sym{background:var(--pitch);padding:clamp(20px,2.2vw,30px);text-decoration:none;display:block;
  position:relative;transition:background .2s}
.sym::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--machine);
  transform:scaleY(0);transform-origin:bottom;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.sym:hover{background:var(--steel)}
.sym:hover::before{transform:scaleY(1)}
.sym .ic{width:26px;height:26px;color:var(--machine);margin-bottom:1.1em}
.sym h3{margin-bottom:.45em}
.sym p{font-size:.9rem;color:var(--chalk-dim);margin:0;max-width:none}

/* ---------- numbered service index -------------------------------------- */
.idx{border-top:1px solid var(--rule-lt)}
.idx-row{display:grid;grid-template-columns:auto minmax(0,2.1fr) minmax(0,3fr) auto;
  gap:var(--gut);align-items:center;padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--rule-lt);text-decoration:none;color:inherit;
  position:relative;transition:padding-left .28s cubic-bezier(.2,.8,.2,1)}
.idx-row::before{content:"";position:absolute;inset:0 -100vw 0 -100vw;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:-1}
.idx-row:hover{padding-left:clamp(10px,1.4vw,22px);color:var(--paper)}
.idx-row:hover::before{transform:scaleY(1)}
.idx-row:hover .num{color:var(--machine)}
.idx-row:hover .idx-sub{color:var(--chalk-dim)}
.idx-name{font-size:clamp(1.25rem,1rem + 1.4vw,2.05rem);font-weight:840;font-stretch:108%;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1}
.idx-sub{font-size:.95rem;color:var(--ink-dim);margin:0;max-width:52ch}
.idx-go{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- full-bleed photo band --------------------------------------- */
.band{position:relative;min-height:clamp(360px,52vh,620px);display:grid;align-items:center;
  isolation:isolate;overflow:hidden}
.band-bg{position:absolute;inset:0;z-index:-2}
.band-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.08) brightness(.7)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,10,.92) 0%,rgba(10,11,10,.55) 55%,rgba(10,11,10,.3) 100%)}
.band .wrap{padding-block:clamp(48px,6vw,88px)}
.band blockquote{margin:0;max-width:22ch;font-size:clamp(1.6rem,1rem + 2.4vw,3rem);
  font-weight:840;font-stretch:108%;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02}

/* ---------- photo rail -------------------------------------------------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,420px);gap:2px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:thin}
.rail figure{margin:0;scroll-snap-align:start;position:relative;overflow:hidden}
.rail img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.8) contrast(1.05);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rail figure:hover img{transform:scale(1.04)}
.rail figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;
  font-size:.82rem;line-height:1.4;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(180deg,transparent 0%,rgba(8,9,8,.62) 38%,rgba(8,9,8,.94) 100%)}

/* ---------- spec table (pricing factors) -------------------------------- */
.spec{border-top:1px solid var(--rule-lt)}
.spec-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,2fr);gap:var(--gut);
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--rule-lt);align-items:baseline}
.spec-row p{margin:0;font-size:.96rem;color:var(--ink-dim)}
.spec-row h3{text-transform:uppercase;font-stretch:106%;font-weight:800;letter-spacing:-.005em}

/* ---------- process ----------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk)}
.step{background:var(--pitch);padding:clamp(22px,2.4vw,32px)}
.step .num{display:block;margin-bottom:1.4em}
.step h3{margin-bottom:.5em}
.step p{font-size:.92rem;color:var(--chalk-dim);margin:0;max-width:none}

/* ---------- reviews ----------------------------------------------------- */
.rating{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  font-variant-numeric:tabular-nums}
.rating b{font-size:clamp(2.8rem,2rem + 3.4vw,4.6rem);font-weight:860;font-stretch:110%;
  line-height:.86;color:var(--machine)}
.rating>div{display:grid;gap:.45em}
.rating .fine{margin:0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chalk-dim)}
.stars{display:inline-flex;gap:3px;color:var(--machine)}
.stars .ic{width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);fill:currentColor;stroke:none}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk);margin-top:2.5rem}
.rev{background:var(--pitch);padding:clamp(22px,2.4vw,30px);margin:0}
.rev blockquote{margin:0 0 1.2em;font-size:1rem;line-height:1.55}
.rev figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--chalk-dim)}

/* ---------- areas ------------------------------------------------------- */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk)}
.acard{background:var(--pitch);padding:clamp(22px,2.4vw,30px);text-decoration:none;display:block;
  transition:background .2s}
.acard:hover,.acard.on{background:var(--steel)}
.acard h3{text-transform:uppercase;font-stretch:106%;font-weight:820;margin-bottom:.6em}
.acard p{font-size:.85rem;color:var(--chalk-dim);margin:0 0 1.2em;max-width:none}

/* ---------- FAQ --------------------------------------------------------- */
.faq{border-top:1px solid var(--rule-lt)}
.faq details{border-bottom:1px solid var(--rule-lt)}
.faq summary{list-style:none;cursor:pointer;padding:clamp(18px,2vw,26px) 0;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:var(--gut);align-items:baseline;
  font-size:clamp(1rem,.95rem + .35vw,1.18rem);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--moss)}
.faq .sign{font-family:var(--f-mono);color:var(--machine);font-size:1.1rem;transition:transform .2s}
.faq details[open] .sign{transform:rotate(45deg)}
.faq .ans{padding:0 0 clamp(20px,2vw,28px);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:var(--gut)}
.faq .ans p{margin:0;color:var(--ink-dim)}

/* ---------- quote form -------------------------------------------------- */
.qform{background:var(--steel);border:1px solid var(--rule-dk);padding:clamp(22px,2.6vw,34px)}
.paper .qform{background:var(--chalk);border-color:var(--rule-lt);color:var(--ink)}
.qform h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);margin-bottom:.5em}
.qbar{display:flex;gap:4px;margin:1.4em 0 1.8em}
.qbar i{flex:1;height:3px;background:var(--rule-dk);transition:background .25s}
.paper .qbar i{background:var(--rule-lt)}
.qbar i.on{background:var(--machine)}
.qstep{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.qstep.on{display:block;animation:rise .26s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qstep>legend{font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--machine);padding:0;margin-bottom:1.1em}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk);margin-bottom:1.4em}
.paper .optgrid{background:var(--rule-lt);border-color:var(--rule-lt)}
.opt.wide{grid-column:1 / -1}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;padding:.95em 1em;font-size:.92rem;font-weight:600;cursor:pointer;
  background:var(--steel);transition:background .16s,color .16s}
.paper .opt span{background:var(--chalk)}
.opt input:checked+span{background:var(--machine);color:#1A1400}
.opt input:focus-visible+span{outline:3px solid var(--machine);outline-offset:-3px}
.fld{display:block;margin-bottom:1em}
.fld>span{display:block;font-family:var(--f-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chalk-dim);margin-bottom:.5em}
.paper .fld>span{color:var(--ink-dim)}
.fld em{font-style:normal;opacity:.7;text-transform:none;letter-spacing:.04em}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:1rem;padding:.85em .95em;
  border:1.5px solid var(--rule-dk);background:var(--pitch);color:var(--paper);border-radius:0}
.paper .fld input,.paper .fld select,.paper .fld textarea{background:var(--paper);
  color:var(--ink);border-color:var(--rule-lt)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--machine)}
.fld input[aria-invalid=true]{border-color:var(--hazard)}
.fld small{display:block;font-size:.8rem;color:var(--chalk-dim);margin-top:.5em}
.paper .fld small{color:var(--ink-dim)}
.fld.drop{border:1.5px dashed var(--machine);padding:1.1em;background:rgba(255,195,0,.05)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.2em}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:.55em 1em;font-size:.86rem;font-weight:600;cursor:pointer;
  border:1.5px solid var(--rule-dk)}
.paper .chip span{border-color:var(--rule-lt)}
.chip input:checked+span{background:var(--machine);color:#1A1400;border-color:var(--machine)}
.qnav{display:flex;gap:8px;margin-top:.6em}
.qnav .btn{flex:1}
.qerr{background:rgba(255,61,0,.14);border-left:3px solid var(--hazard);color:var(--paper);
  padding:.85em 1em;font-size:.9rem;margin-top:1em}
.paper .qerr{color:var(--ink)}
.qerr a{color:var(--hazard);font-weight:800}
/* Handoff: shown when the form cannot post, so the lead leaves by text or mail
   instead of being lost. Amber, not hazard red -- nothing has gone wrong for
   the customer, there is just one more tap. */
.qhand{margin-top:1em;padding:1.1em 1.2em;background:rgba(255,195,0,.09);
  border-left:3px solid var(--machine)}
.qhand>p{margin:0 0 .9em;font-size:.92rem;font-weight:600;max-width:none}
.qhand .fine{margin:.8em 0 0;font-weight:400;color:var(--chalk-dim)}
.paper .qhand .fine{color:var(--ink-dim)}
.qhand-btns{display:flex;flex-wrap:wrap;gap:8px}
.qhand-btns .btn{flex:1 1 auto;justify-content:center;text-align:center}
.qhand-copy{margin:.9em 0 0;padding:.8em .9em;background:rgba(0,0,0,.28);
  border:1px solid var(--rule-dk);font-family:var(--f-mono);font-size:.78rem;
  line-height:1.7;white-space:pre-wrap;word-break:break-word;overflow-x:auto;
  max-height:12em;overflow-y:auto}
.paper .qhand-copy{background:rgba(20,23,15,.05);border-color:var(--rule-lt)}
@media(max-width:520px){.qhand-btns .btn{flex:1 1 100%}}
.hp{position:absolute!important;left:-9999px;width:0;height:0;opacity:0}

/* ---------- prose / split ------------------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,4vw,70px);
  align-items:start}
.side{position:sticky;top:100px;display:grid;gap:16px}
.prose h2{margin:0 0 .6em}
.prose>*+h2{margin-top:2.2em}
.prose p{color:var(--ink-dim)}
.card{background:var(--chalk);border:1px solid var(--rule-lt);padding:clamp(20px,2.2vw,28px)}
.dark .card,.pitch .card{background:var(--steel);border-color:var(--rule-dk)}
.ticks{display:grid;gap:.7em}
.ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em;align-items:start;
  font-size:.97rem}
.ticks .ic{width:16px;height:16px;color:var(--machine);margin-top:.35em}
.note{border-left:3px solid var(--machine);padding:1.1em 0 1.1em 1.4em;margin:0 0 2em}
.note h3{margin-bottom:.4em}
.note p{margin:0}
.hoods{display:flex;flex-wrap:wrap;gap:6px}
.hoods li{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule-lt);padding:.5em .85em;color:var(--ink-dim)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--rule-dk);padding:.6em 1em;text-decoration:none;color:var(--chalk-dim)}
.pill:hover{border-color:var(--machine);color:var(--machine)}
.paper .pill{border-color:var(--rule-lt);color:var(--ink-dim)}
.paper .pill:hover{border-color:var(--ink);color:var(--ink)}
.crumbs{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--chalk-dim);padding:14px 0;border-bottom:1px solid var(--rule-dk)}
.crumbs a{text-decoration:none;color:var(--chalk-dim)}
.crumbs a:hover{color:var(--machine)}
.crumbs .sep{margin:0 .7em;color:var(--machine)}

/* ---------- gallery ------------------------------------------------------ */
.gtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2rem}
.gtab{font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.7em 1.1em;border:1px solid var(--rule-dk);background:transparent;
  color:var(--chalk-dim);cursor:pointer}
.gtab.on{background:var(--machine);color:#1A1400;border-color:var(--machine)}
.gpane{display:none;grid-template-columns:repeat(3,1fr);gap:2px}
.gpane.on{display:grid}
.gitem{margin:0;position:relative;overflow:hidden;cursor:zoom-in}
.gitem img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.8) contrast(1.05);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gitem:hover img{transform:scale(1.05)}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;font-size:.8rem;
  line-height:1.4;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(180deg,transparent 0%,rgba(8,9,8,.6) 38%,rgba(8,9,8,.95) 100%);
  opacity:0;transform:translateY(8px);transition:opacity .24s,transform .24s}
.gitem:hover figcaption{opacity:1;transform:none}
.lbox{position:fixed;inset:0;z-index:150;background:rgba(6,7,6,.96);display:grid;place-items:center;
  padding:24px}
.lbox img{max-width:min(1300px,94vw);max-height:84vh;object-fit:contain}
.lbox p{color:var(--chalk-dim);font-size:.85rem;text-align:center;margin:1em auto 0;max-width:62ch}
.lbox button{position:absolute;top:20px;right:20px;width:48px;height:48px;border:1px solid var(--rule-dk);
  background:transparent;color:var(--paper);font-size:1.4rem;cursor:pointer}

/* ---------- footer ------------------------------------------------------- */
.foot{background:var(--void);border-top:1px solid var(--rule-dk);
  padding:clamp(48px,6vw,84px) 0 0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--gut);
  padding-bottom:clamp(36px,4vw,56px)}
.fcol h3{font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--machine);margin-bottom:1.4em}
.fcol li{margin-bottom:.55em}
.fcol a{color:var(--chalk-dim);text-decoration:none;font-size:.94rem}
.fcol a:hover{color:var(--paper)}
.fbrand img{width:56px;height:56px;margin-bottom:1.2em}
.fnap{display:grid;gap:.4em;font-size:.94rem;color:var(--chalk-dim)}
.fnap a{color:var(--paper);font-weight:600}
.fhours div{display:flex;justify-content:space-between;gap:12px;padding:.45em 0;
  border-bottom:1px solid var(--rule-dk);font-size:.88rem}
.fhours dt{color:var(--chalk-dim)}
.fhours dd{margin:0;font-family:var(--f-mono);font-size:.8rem}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule-dk);padding-block:20px;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-dim)}
.fbot p{margin:0;max-width:none}
.fbot a{color:var(--chalk-dim);text-decoration:none}

.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:1px;
  background:var(--rule-dk);border-top:1px solid var(--rule-dk);
  padding-bottom:env(safe-area-inset-bottom)}
.sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:.6em;padding:1.05em;
  text-decoration:none;font-weight:750;font-size:.95rem;background:var(--pitch);color:var(--paper)}
.sticky a.go{background:var(--machine);color:#1A1400}

/* ---------- scroll reveal ------------------------------------------------ */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),
  transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .symptoms,.steps,.agrid{grid-template-columns:repeat(2,1fr)}
  .revgrid,.gpane.on{grid-template-columns:repeat(2,1fr)}
  .stats ul{grid-template-columns:repeat(2,1fr)}
  .stats li:nth-child(3){border-left:0}
  .stats li:nth-child(n+3){border-top:1px solid var(--rule-dk)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  body{font-size:16.5px;padding-bottom:70px}
  /* The 90deg scrim exists to protect left-aligned desktop text; on a phone the
     vertical gradient already does that, and the horizontal one just muddies
     the photo. */
  .hero::after,.phero::after{background:linear-gradient(180deg,rgba(10,11,10,.55) 0%,
    rgba(10,11,10,.28) 26%,rgba(10,11,10,.78) 62%,rgba(10,11,10,.97) 100%)}
  .hero-bg img{object-position:46% 40%}
  .mainnav{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--pitch);
    flex-direction:column;gap:0;padding:96px 24px 32px;transform:translateX(100%);visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;z-index:70;overflow-y:auto;
    border-left:1px solid var(--rule-dk)}
  .mainnav.open{transform:none;visibility:visible}
  .mainnav a{padding:1.1em 0;font-size:1.15rem;border-bottom:1px solid var(--rule-dk);color:var(--paper)}
  .mainnav a::after{display:none}
  .burger{display:flex}
  .head-cta .btn-line{display:none}
  .head .wrap{min-height:66px}
  .split{grid-template-columns:1fr}
  .side{position:static}
  .sticky{display:flex}
  .sechead{grid-template-columns:1fr}
  .idx-row{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .idx-row .idx-sub,.idx-row .idx-go{display:none}
  .spec-row,.faq summary,.faq .ans{grid-template-columns:auto minmax(0,1fr)}
  .spec-row p{grid-column:2}
  .faq summary .sign{grid-column:2;justify-self:end}
}
@media (max-width:620px){
  .symptoms,.steps,.agrid,.revgrid,.gpane.on,.optgrid,.row2,.fgrid{grid-template-columns:1fr}
  .stats ul{grid-template-columns:1fr}
  .stats li{border-left:0;border-top:1px solid var(--rule-dk)}
  .stats li:first-child{border-top:0}
  .btnrow .btn{width:100%}
  .band blockquote{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}
@media print{.head,.topbar,.sticky,.qform,.burger{display:none!important}
  body{background:#fff;color:#000}}