/* ============================================================================
   SplashKingz — "The Wash"
   The page performs the service: you scroll and the dirt leaves.

   Deliberate refusals, all of which the two earlier attempts defaulted to:
   no same-size icon/heading/text cards as page structure, no centred
   mastheads, no eyebrow kickers, no stroke-icon triads, no gradient text.
   Structure is rules, full-bleed photography and type at poster scale.

   Replaces crown.css and waterline.css. styles.css is the LEGACY sheet still
   used by the ~22 city landing pages and is not touched.
   ========================================================================= */

:root{
  --ink:#0C0D0C;         /* the ground */
  --ink-2:#1A1C1A;       /* raised dark */
  --paper:#F2F0EA;       /* reading ground */
  --paper-2:#E6E3DA;     /* second paper step */
  --wet:#0E6E7C;         /* water, links, secondary action */
  --wet-deep:#0A525C;
  --hi:#EFFF4E;          /* the wet line. one loud accent, used sparingly */
  --grime:#4A4034;
  --ok:#1A7A45;          /* 5.4:1 with white */
  --bad:#C0392B;         /* 5.4:1 with white */

  --on-ink:#F2F0EA;
  --on-ink-2:#B4B2AA;    /* 8.9:1 on ink */
  --on-paper:#0C0D0C;
  --on-paper-2:#3D3B36;  /* 9.7:1 on paper */
  --on-paper-3:#6B675E;  /* 4.8:1 on paper — the muted floor */

  --rule-ink:rgba(242,240,234,.18);
  --rule-paper:rgba(12,13,12,.16);

  --gut:clamp(18px,4vw,58px);
  --maxw:1280px;
  --sec:clamp(64px,9vw,132px);
  --ease:cubic-bezier(.2,.7,.3,1);

  --font-display:"Archivo Black","Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,sans-serif;

  --t-2xs:.75rem;
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1rem;
  --t-md:1.125rem;
  --t-lg:1.375rem;
  --t-xl:clamp(1.5rem,2.6vw,2rem);
  --t-2xl:clamp(2rem,4.4vw,3.4rem);
  --t-3xl:clamp(2.6rem,7vw,5.5rem);
  --t-poster:clamp(3rem,12vw,10rem);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--t-base);line-height:1.55;
  background:var(--paper);color:var(--on-paper-2);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
::selection{background:var(--hi);color:var(--ink)}

h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--on-paper);
  letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg);letter-spacing:-.02em;line-height:1.15}
h4{font-family:var(--font-body);font-weight:700;color:var(--on-paper);font-size:var(--t-base)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--hi);color:var(--ink);
  font-weight:700;padding:12px 20px}
.skip:focus{left:12px;top:12px}

.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:#fff}
.on-paper{background:var(--paper)}
.sec{padding-block:var(--sec)}

/* ------------------------------------------------------------------- nav */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--gut);
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
  border-bottom:1px solid transparent}
.bar.solid{background:rgba(12,13,12,.94);border-bottom-color:var(--rule-ink);
  backdrop-filter:blur(8px)}
.bar .brand{display:flex;align-items:center;gap:10px;flex:none}
.bar .brand img{height:38px;width:auto}
.bar nav{display:flex;align-items:center;gap:22px}
.bar nav a{font-size:var(--t-sm);font-weight:600;color:#fff;opacity:.86;padding-block:8px}
.bar nav a:hover,.bar nav a[aria-current="page"]{opacity:1;color:var(--hi)}
.bar .right{display:flex;align-items:center;gap:14px}
.bar .tel{font-family:var(--font-display);font-size:var(--t-sm);color:#fff;white-space:nowrap;
  padding-block:8px}
.bar .tel:hover{color:var(--hi)}
.burger{display:none;padding:8px;color:#fff}
.burger svg{width:26px;height:26px}
/* over a photo the bar is white; over paper sections it inverts */
.bar.on-light:not(.solid) .brand img{filter:invert(1) brightness(.2)}
.bar.on-light:not(.solid) nav a,.bar.on-light:not(.solid) .tel,.bar.on-light:not(.solid) .burger{color:var(--ink)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:var(--t-sm);line-height:1;
  padding:16px 26px;border:2px solid transparent;cursor:pointer;
  transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.btn svg{width:17px;height:17px;flex:none}
.btn-lg{padding:19px 32px;font-size:var(--t-base)}
.btn-block{width:100%}
.btn-hi{background:var(--hi);color:var(--ink);border-color:var(--hi)}
.btn-hi:hover{background:#fff;border-color:#fff}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--wet);border-color:var(--wet)}
.btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-out:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.is-sent{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.is-failed{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-line{background:transparent;color:var(--on-paper);border-color:var(--rule-paper)}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* =================================================== 1. the pinned wash */
/* Scroll length drives the pass. Shorter on phones so the phone number is
   never more than a flick away. */
.stage{position:relative;height:280vh}
@media (max-width:620px){ .stage{height:200vh} }
.stage .frame{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.shot{position:absolute;inset:0}
/* The photo is 3:4; the frame is landscape. Centring the crop lands on empty
   sky; bias it low enough to hold the whole house, high enough to cut the lawn. */
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 65%}
.shot.clean{clip-path:inset(0 0 var(--dirty,100%) 0)}
.wet-line{position:absolute;left:0;right:0;top:calc(100% - var(--dirty,100%));height:3px;
  background:var(--hi);z-index:6;box-shadow:0 0 22px 4px rgba(239,255,78,.5)}
.wet-line::after{content:"";position:absolute;left:0;right:0;top:3px;height:110px;
  background:linear-gradient(180deg,rgba(14,110,124,.5),transparent)}

/* The scrim is load-bearing, not decoration. White type over this photograph
   measures 1.19:1 against the bright sky — a hard WCAG fail — and the guarantee
   headline sits deeper into that sky than the old one did. Kept off the top
   third so the roof still reads, weighted to the bottom where the body copy and
   buttons live and 4.5:1 is required rather than 3:1. */
/* margin-top:auto on the h1 rather than justify-content:flex-end. Both bottom-
   align the block, but with flex-end an over-tall block overflows past the start
   edge and ignores padding-top — which slid the four-line headline under the
   fixed bar on short windows. An auto margin collapses to zero instead, so the
   padding always holds. */
.stage-type{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  padding:var(--gut);padding-top:96px;
  padding-bottom:clamp(80px,14vh,130px);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,12,18,.14) 0%,
    rgba(6,12,18,.48) 28%,
    rgba(6,12,18,.82) 100%)}
/* Bound the measure and let the browser wrap it — no hardcoded <br>, which
   breaks at other widths and font sizes. `pretty` not `balance`: balance
   minimises the longest line, which strands "WE'LL" alone on line one at phone
   widths. Unsupported browsers fall back to normal wrapping, which measures
   identically here. */
.stage-type h1{margin-top:auto;font-size:min(var(--t-poster),15vh);line-height:.82;letter-spacing:-.045em;
  text-transform:uppercase;color:#fff;max-width:16ch;text-wrap:pretty;
  text-shadow:0 3px 40px rgba(0,0,0,.5)}
.stage-type h1 em{font-style:normal;display:block;color:var(--hi)}
/* Keyword+geo kicker inside the H1: the poster line keeps the visual weight,
   the H1 gains the service and location signal it was missing. */
.stage-type h1 .h1-kicker{display:block;font-size:var(--t-sm);line-height:1.25;
  letter-spacing:.10em;font-weight:700;color:var(--hi);margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.stage-type p{margin-top:16px;max-width:36ch;font-size:var(--t-md);color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.stage-type .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto}
/* The two promises that kill a home-service lead — price shock and phone tag —
   answered at the moment of the click rather than three sections down. */
.stage-type .act-note{margin-top:14px;max-width:44ch;font-size:var(--t-sm);
  color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(0,0,0,.8)}

.gauge{position:absolute;right:var(--gut);bottom:clamp(80px,14vh,130px);z-index:7;
  text-align:right;pointer-events:none}
.gauge b{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,7vw,5.5rem);
  line-height:.85;color:var(--hi);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gauge span{font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}

/* ================================================== 2. the wand sweep */
.sweep{position:relative;height:360vh}
@media (max-width:620px){ .sweep{height:260vh} }
.sweep .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0A0B0A}
.track{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform}
/* No px cap: the track must always be wider than the viewport or there is
   nothing to pan. Two panels at 78vw guarantees 156vw of travel at any width.
   The svh ceiling only bites on ultrawide or short windows, where 78vw stretches
   the panel so far past landscape that the crop below has nothing left to keep. */
.panel{position:relative;flex:none;width:min(78vw,175svh);height:100svh;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.1)}
/* Same trap as the stage: these are 3:4 photographs with the house in the lower
   half, so a centred crop inside a landscape panel lands on empty sky. --focus is
   set per panel in the markup, at that photograph's roofline. */
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% var(--focus,66%)}
.panel .clean{clip-path:inset(0 var(--hide,100%) 0 0)}
.panel .plate{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:var(--gut);
  padding-bottom:clamp(70px,12vh,96px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.panel .plate b{display:block;font-family:var(--font-display);font-size:var(--t-xl);
  letter-spacing:-.03em;color:#fff;margin-bottom:3px}
.panel .plate span{font-size:var(--t-sm);color:rgba(255,255,255,.85)}
/* --wand is driven from wash.js: it travels the viewport as the track pans. */
.wand{position:absolute;left:var(--wand,50%);top:0;bottom:0;width:4px;z-index:9;transform:translateX(-2px);
  background:var(--hi);box-shadow:0 0 26px 6px rgba(239,255,78,.55)}
.wand::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:150px;
  background:linear-gradient(90deg,rgba(239,255,78,.2),transparent)}
.sweep-intro{position:absolute;left:var(--gut);top:clamp(74px,12vh,130px);z-index:8;
  max-width:18ch;pointer-events:none}
.sweep-intro h2{font-size:clamp(1.5rem,4vw,3rem);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.7)}

/* ================================================== the promise (guarantee) */
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.promise h2{font-size:var(--t-2xl);color:#fff;line-height:.92}
.promise-lead{margin-top:20px;font-size:var(--t-md);color:#fff;max-width:38ch}
.promise-terms{margin-top:14px;font-size:var(--t-sm);color:var(--on-ink-2);max-width:44ch}
.promise-terms a{color:var(--hi);text-decoration:underline;text-underline-offset:3px}
.promise-points{list-style:none;border-top:1px solid var(--rule-ink)}
.promise-points li{padding:20px 0;border-bottom:1px solid var(--rule-ink)}
.promise-points b{display:block;font-family:var(--font-display);font-size:var(--t-lg);
  letter-spacing:-.02em;color:var(--hi);margin-bottom:5px}
.promise-points span{font-size:var(--t-sm);color:var(--on-ink-2)}
@media (max-width:980px){ .promise-grid{grid-template-columns:1fr} }

/* ==================================================== argument (paper) */
.argue{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.argue h2{margin-bottom:20px}
.argue .big{font-size:var(--t-md);color:var(--on-paper-2);max-width:46ch}
.claims{border-top:2px solid var(--ink)}
.claim{padding:22px 0;border-bottom:1px solid var(--rule-paper)}
.claim b{display:block;font-family:var(--font-display);font-size:var(--t-lg);
  letter-spacing:-.02em;color:var(--on-paper);margin-bottom:5px}
.claim span{font-size:var(--t-sm);color:var(--on-paper-3)}

/* ================================================= service index (rules) */
/* A ruled index, not a card grid. Hovering a row brings up its photograph. */
.index{border-top:2px solid var(--ink);position:relative}
.row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--rule-paper);
  position:relative;transition:padding-left .2s var(--ease)}
.row:hover{padding-left:14px}
.row h3{font-size:clamp(1.4rem,3.4vw,2.4rem);letter-spacing:-.03em}
.row p{grid-column:1;font-size:var(--t-sm);color:var(--on-paper-3);max-width:52ch;margin-top:6px}
.row .go{font-size:var(--t-sm);font-weight:700;color:var(--wet);white-space:nowrap;padding-block:8px}
.row:hover .go{color:var(--ink)}
.row-peek{position:absolute;right:8%;top:50%;transform:translateY(-50%) scale(.96);
  width:min(260px,26vw);aspect-ratio:4/3;object-fit:cover;opacity:0;pointer-events:none;
  z-index:3;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.row:hover .row-peek{opacity:1;transform:translateY(-50%) scale(1)}

/* ------------------------------------------------------------ full strip */
.strip{background:var(--hi);color:var(--ink)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-block:34px}
.strip h3{font-size:var(--t-xl);color:var(--ink);max-width:26ch}
.strip .tel{margin-left:auto;font-family:var(--font-display);
  font-size:clamp(1.4rem,3vw,2.2rem);color:var(--ink);letter-spacing:-.03em}
.strip .tel:hover{color:var(--wet-deep)}

/* ------------------------------------------------------------- reviews */
/* A wall of real quotes at varying weight. Not three equal cards. */
.wall{columns:3;column-gap:clamp(20px,3vw,34px);margin-top:clamp(30px,4vw,48px)}
.quote{break-inside:avoid;margin-bottom:clamp(20px,3vw,34px);
  border-top:2px solid var(--ink);padding-top:16px}
.quote blockquote{font-size:var(--t-base);line-height:1.5;color:var(--on-paper-2);margin-bottom:12px}
.quote.lead blockquote{font-family:var(--font-display);font-size:var(--t-lg);
  line-height:1.2;letter-spacing:-.02em;color:var(--on-paper)}
.quote cite{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--on-paper)}
.quote cite span{display:block;font-weight:400;color:var(--on-paper-3);margin-top:2px}
.quote .stars{color:var(--wet);font-size:var(--t-sm);letter-spacing:2px;display:block;margin-bottom:8px}

.score-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  border-top:2px solid var(--ink);padding-top:18px;margin-top:10px}
.score-line b{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4rem);
  letter-spacing:-.04em;color:var(--on-paper)}
.score-line span{font-size:var(--t-sm);color:var(--on-paper-3)}

/* ---------------------------------------------------------- crown club */
.club{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.club .wrap{padding-block:clamp(48px,7vw,96px);position:relative;z-index:1}
.club h2{color:#fff;max-width:16ch;margin-bottom:18px}
.club .lead{color:var(--on-ink-2);max-width:46ch;font-size:var(--t-md);margin-bottom:30px}
.seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule-ink)}
.season{padding:20px 18px 20px 0;border-bottom:1px solid var(--rule-ink)}
.season b{display:block;font-family:var(--font-display);font-size:var(--t-sm);
  color:var(--hi);margin-bottom:5px}
.season span{font-size:var(--t-sm);color:var(--on-ink-2)}
.club-buy{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.club-buy .price{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.2rem);
  color:#fff;letter-spacing:-.04em;line-height:1}
.club-buy .price small{font-family:var(--font-body);font-size:var(--t-md);font-weight:600}
.club-buy .terms{font-size:var(--t-sm);color:var(--on-ink-2);max-width:32ch}
.club-mascot{position:absolute;right:-2%;bottom:-6%;width:min(280px,26%);opacity:.14;z-index:0}

/* ------------------------------------------------------------ area list */
.cities{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--ink);margin-top:26px}
.cities a{flex:1 1 auto;min-width:180px;padding:15px 0;border-bottom:1px solid var(--rule-paper);
  font-family:var(--font-display);font-size:var(--t-md);color:var(--on-paper);
  letter-spacing:-.02em;transition:color .16s var(--ease),padding-left .16s var(--ease)}
.cities a:hover{color:var(--wet);padding-left:8px}
.area-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:30px}
.area-col h3{border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px}
.area-col a{display:block;padding:11px 0;border-bottom:1px solid var(--rule-paper);
  font-size:var(--t-sm);color:var(--on-paper-2)}
.area-col a:hover{color:var(--wet)}

/* ------------------------------------------------------------------ form */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.form-shell{background:var(--ink);color:var(--on-ink);padding:clamp(24px,3.4vw,44px)}
.form-shell h3{color:#fff;font-size:var(--t-xl);margin-bottom:6px}
.form-shell .sub{font-size:var(--t-sm);color:var(--on-ink-2);margin-bottom:24px}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--t-xs);font-weight:700;color:#fff;margin-bottom:6px}
.field input,.field select{width:100%;padding:14px 15px;font-family:inherit;font-size:var(--t-base);
  color:#fff;background:var(--ink-2);border:1px solid var(--rule-ink);
  transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.field input::placeholder{color:#807D75}
.field input:focus,.field select:focus{border-color:var(--hi);background:#232522}
.field-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
.field-check input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;padding:0;
  border-radius:5px;accent-color:var(--hi);cursor:pointer}
.field-check label{margin:0;font-size:.78rem;font-weight:600;line-height:1.45;color:var(--on-ink-2);
  text-transform:none;letter-spacing:0;cursor:pointer}
.form-note{margin-top:12px;font-size:var(--t-xs);color:var(--on-ink-2)}
.form-errors{margin-bottom:20px;padding:14px 16px;background:#3A1614;
  border-left:3px solid #F2705F;font-size:var(--t-sm)}
.form-errors[hidden]{display:none}
.form-errors b{display:block;color:#fff;margin-bottom:4px}
.form-errors a{display:block;padding:4px 0;color:#F2B3AA;text-decoration:underline}
.field-error{margin-top:6px;font-size:var(--t-xs);font-weight:700;color:#F2B3AA}
.field-error[hidden]{display:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#F2705F}
.req{color:var(--hi)}
/* The submit result is shown by re-labelling the button, which no screen
   reader announces. This mirrors it into a live region without changing
   the visual design. */
.sr-only{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}
.reasons-list{border-top:2px solid var(--ink)}
.reasons-list li{list-style:none;padding:15px 0;border-bottom:1px solid var(--rule-paper);
  font-size:var(--t-sm);color:var(--on-paper);font-weight:600}
.callout{margin-top:26px;display:block;font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em;color:var(--on-paper)}
.callout:hover{color:var(--wet)}
.callout small{display:block;font-family:var(--font-body);font-size:var(--t-xs);
  font-weight:600;color:var(--on-paper-3);margin-bottom:4px}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:var(--on-ink-2);padding-block:clamp(44px,6vw,72px) 22px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,52px);
  padding-bottom:30px;border-bottom:1px solid var(--rule-ink)}
.foot-brand img{height:52px;margin-bottom:14px}
.foot-brand p{font-size:var(--t-sm);max-width:38ch;line-height:1.55}
.foot-col h4{color:#fff;font-size:var(--t-sm);margin-bottom:12px}
.foot-col a,.foot-col p{display:block;font-size:var(--t-sm);color:var(--on-ink-2);padding-block:7px}
.foot-col a:hover{color:var(--hi)}
.foot-bottom{padding-top:20px;font-size:var(--t-xs);color:#8A8880}

/* ------------------------------------------------------ persistent call */
/* The mechanic is slow to reach a phone number, so the action is always up. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
  grid-template-columns:1fr 1fr;gap:8px;padding:8px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--ink);border-top:2px solid var(--ink)}
.dock a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;
  height:100%;font-weight:700;font-size:var(--t-sm)}
.dock svg{width:17px;height:17px}
.dock .call{background:var(--ink);color:#fff;border:1px solid rgba(242,240,234,.45)}
.dock .quote{background:var(--hi);color:var(--ink)}
@media (min-width:981px){ .dock{display:none} }

/* --------------------------------------------------------------- drawer */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(12,13,12,.72);opacity:0;
  visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),visibility 0s linear .22s}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .22s var(--ease)}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:88%;max-width:340px;
  background:var(--ink);padding:20px;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .28s var(--ease)}
.drawer.open .drawer-panel{transform:none}
.drawer-close{align-self:flex-end;font-size:2rem;line-height:1;color:#fff;padding:4px 8px;margin-bottom:8px}
.drawer-panel a{padding:14px 2px;border-bottom:1px solid var(--rule-ink);
  font-family:var(--font-display);font-size:var(--t-md);color:#fff;letter-spacing:-.02em}
.drawer-panel a:hover{color:var(--hi)}

/* -------------------------------------------------------------- subhero */
.subhero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;
  padding-block:clamp(96px,14vh,170px) clamp(44px,7vw,86px)}
.subhero h1{color:#fff;max-width:18ch;margin-bottom:14px}
.subhero p{color:var(--on-ink-2);font-size:var(--t-md);max-width:58ch}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;
  font-size:var(--t-xs);color:#8A8880}
/* Breadcrumbs are navigation, not inline prose, so they owe the 24px target
   (WCAG 2.5.8). The link sat at 20px tall on every subpage. */
.crumb a{display:inline-flex;align-items:center;min-height:24px}
.crumb a:hover{color:var(--hi)}

/* ---------------------------------------------------------- prose / faq */
.prose{max-width:66ch}
.prose p{font-size:var(--t-md);color:var(--on-paper-2);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--on-paper);font-weight:700}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.split2 img{width:100%;aspect-ratio:4/3;object-fit:cover}

.faq-list{border-top:2px solid var(--ink);max-width:900px}
.faq{border-bottom:1px solid var(--rule-paper)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:20px 0;
  font-family:var(--font-display);font-size:var(--t-md);letter-spacing:-.02em;color:var(--on-paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--wet)}
.faq .plus{position:relative;width:16px;height:16px;flex:none}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;background:var(--ink)}
.faq .plus::before{top:7px;left:0;right:0;height:2px}
.faq .plus::after{left:7px;top:0;bottom:0;width:2px;transition:transform .24s var(--ease)}
.faq[open] .plus::after{transform:scaleY(0)}
.faq .faq-a{padding:0 0 20px;font-size:var(--t-sm);line-height:1.65;color:var(--on-paper-2);max-width:70ch}

.compare2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:34px}
.cmp{border-top:2px solid var(--ink);padding-top:16px}
.cmp.hard{border-top-color:var(--on-paper-3)}
.cmp h3{margin-bottom:12px}
.cmp li{list-style:none;padding:11px 0;border-bottom:1px solid var(--rule-paper);
  font-size:var(--t-sm);color:var(--on-paper-2)}

/* ----------------------------------------------------- comparison chart */
/* A real table with hairline rules. Not three pricing cards. */
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(26px,4vw,44px)}
.chart{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.chart caption{text-align:left;font-size:var(--t-sm);color:var(--on-paper-3);padding-bottom:12px}
.chart th,.chart td{padding:16px 18px 16px 0;border-bottom:1px solid var(--rule-paper);
  vertical-align:top;font-size:var(--t-sm)}
.chart thead th{border-bottom:2px solid var(--ink);font-family:var(--font-display);
  font-size:var(--t-md);letter-spacing:-.02em;color:var(--on-paper);padding-bottom:12px}
.chart thead th.hi{color:var(--ink);background:var(--hi);padding-inline:18px}
.chart tbody th{font-weight:600;color:var(--on-paper);width:44%}
.chart td.hi{background:rgba(239,255,78,.16);padding-inline:18px;font-weight:600;color:var(--on-paper)}
.chart .yes::before{content:"✓";font-weight:700;margin-right:8px;color:var(--wet)}
.chart .no{color:var(--on-paper-3)}
.chart .no::before{content:"—";margin-right:8px}
.chart tfoot td{border-bottom:0;padding-top:20px}

/* included / not-included ledger */
.ledger{border-top:2px solid var(--ink);margin-top:clamp(24px,3.5vw,40px)}
.ledger div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--rule-paper)}
.ledger b{font-family:var(--font-display);font-size:var(--t-sm);color:var(--wet);
  letter-spacing:-.01em;white-space:nowrap}
.ledger span{font-size:var(--t-sm);color:var(--on-paper-2)}

/* price block */
.price-block{border-top:2px solid var(--ink);padding-top:22px;margin-top:clamp(26px,4vw,42px)}
.price-block .fig{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,4.6rem);
  letter-spacing:-.04em;color:var(--on-paper);line-height:1}
.price-block .fig small{font-family:var(--font-body);font-size:var(--t-md);font-weight:600;
  color:var(--on-paper-3)}
.price-block p{margin-top:10px;max-width:46ch;font-size:var(--t-sm);color:var(--on-paper-2)}

/* ---------------------------------------------------------- work gallery */
.work{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:clamp(26px,4vw,44px);
  background:var(--ink)}
.work figure{position:relative;margin:0;background:#000}
.work img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  font-size:var(--t-sm);color:#fff}
.work figcaption b{display:block;font-family:var(--font-display);font-size:var(--t-md);
  letter-spacing:-.02em;margin-bottom:2px}
@media (max-width:620px){ .work{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- reveal */
/* Reveals are owned by reveal-init.js + reveal.js (Motion). The old
   .reveal{opacity:0} / .reveal.in pair was removed on purpose: it hid content
   whenever JS did not run, and its transition fought the WAAPI animation on
   the same properties. Do not reintroduce an opacity:0 rule here. */

/* ------------------------------------------------------------ responsive */
@media (max-width:980px){
  .bar nav{display:none}
  .burger{display:block}
  .bar .tel{display:none}
  body{padding-bottom:54px}
  .argue,.quote-grid,.split2,.compare2{grid-template-columns:1fr}
  .wall{columns:2}
  .seasons{grid-template-columns:1fr 1fr}
  .area-cols{grid-template-columns:1fr 1fr}
  .panel{width:88vw}
  .row-peek{display:none}
  .stage-type h1{font-size:clamp(2.6rem,13vw,5rem)}
}
@media (max-width:620px){
  .wall{columns:1}
  .seasons,.area-cols{grid-template-columns:1fr}
  .cities a{min-width:100%}
  .stage-type{padding-bottom:96px}
  .gauge{bottom:auto;top:clamp(74px,12vh,110px)}
  .club-buy{flex-direction:column;align-items:flex-start}
}

/* Pinned scroll is the first thing to fail on assistive and low-power paths. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{height:auto !important}
  .stage .frame{position:static;height:72svh}
  .shot.clean{clip-path:none}
  .wet-line{display:none}
  /* The shorter frame squeezes the type upward into open sky, where the standard
     scrim is still nearly clear — the headline measured 2.18:1 there. This branch
     has no wash to protect, so it can afford a heavier one. */
  .stage-type{background:linear-gradient(180deg,
    rgba(6,12,18,.25) 0%,
    rgba(6,12,18,.50) 32%,
    rgba(6,12,18,.80) 100%)}
  .sweep{height:auto !important}
  .sweep .pin{position:static;height:auto}
  .track{position:static;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  .panel{height:60svh;scroll-snap-align:start}
  /* Hold a static half-and-half rather than the finished shot on its own — an
     "after" with no "before" beside it proves nothing to a customer. */
  .panel .clean{clip-path:inset(0 50% 0 0)}
  .panel::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;z-index:5;
    background:var(--hi);box-shadow:0 0 18px 3px rgba(239,255,78,.45)}
  .wand{display:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* <picture> must not create a box: keeps img sizing/positioning identical to a bare <img> */
picture{display:contents}

/* AR-FIX: HTML width/height attrs are presentational hints that set `height`,
   which overrides aspect-ratio. height:auto lets the aspect-ratio rules win. */
.row-peek,.split2 img,.work img{height:auto}