/* ══════════════════════════════════════════════════════════════════════
   GLASSHOUSE — Express Mobile Auto Glass, Manhattan Beach (2026-09-30)
   The page is a car-design studio's full-size tape drawing: black tape on a
   white board, the car's glass (its "glasshouse") set in and showing the South
   Bay through it. Tone: precise / sunlit / effortless.
   Type: Red Hat Display (light, emphasis by LEAN + brand slate, never weight)
       + Red Hat Text (reading) + B612 (instrument labels only).
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --wall:#eeede8; --wall-2:#e2e1da; --paper:#fcfcfa; --board:#fbfbf8;
  --ink:#111316; --ink-2:#394048; --ink-3:#59616a;
  --slate:#36547e; --slate-dp:#2b4466; --slate-lt:#a9c0e0;          /* the logo's blue: fill / text on light / text on night */
  --night:#0f1215; --night-2:#161a1f; --night-3:#252b32;
  --on-night:#efefeb; --on-night-2:#bcc2ca; --on-night-3:#939aa3;
  --kraft:#e8dcc0; --kraft-ink:#4b3f26;                               /* masking tape */
  --line:rgba(17,19,22,.16); --line-soft:rgba(17,19,22,.075);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px; --gut:clamp(18px,4vw,40px); --bar:74px;
  --sec:clamp(76px,10vw,136px);
  --f-d:'EMAG Hyphen','Red Hat Display',ui-sans-serif,system-ui,sans-serif;
  --f-t:'EMAG Hyphen','Red Hat Text',ui-sans-serif,system-ui,sans-serif;
  --f-l:'EMAG Hyphen','B612',ui-monospace,monospace;
}
/* Red Hat and B612 draw the hyphen ~0.45em wide, which reads as a dash in "$50-$130" or "7 AM-9 PM".
   A hyphen-only slice of Hanken Grotesk (narrow hyphen) goes first in every stack; unicode-range keeps
   every other character on the site's own fonts. */
@font-face{font-family:'EMAG Hyphen';src:url('/assets/fonts/hyphen-hanken-grotesk.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+002D,U+2010-2011}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);overflow-x:clip}
body{margin:0;background:var(--wall);color:var(--ink-2);font:400 16.5px/1.66 var(--f-t);overflow-x:clip;-webkit-font-smoothing:antialiased}
html.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--f-d);text-wrap:balance}
::selection{background:var(--slate);color:#fff}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.pane-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── type ── */
.h1{font-weight:300;font-size:clamp(34px,4.55vw,64px);line-height:1.04;letter-spacing:-.022em}
.h2{font-weight:300;font-size:clamp(31px,3.7vw,52px);line-height:1.07;letter-spacing:-.018em;margin-bottom:.5em}
.h1 em,.h2 em{font-style:italic;color:var(--slate);font-weight:300}
.h1 em{background:linear-gradient(var(--slate),var(--slate)) 0 96%/0 2.5px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.h1.in em,html:not(.js) .h1 em{background-size:100% 2.5px;transition:background-size 1.3s var(--ease) .8s}
.h3{font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.005em;margin-bottom:.45em}
.lede{font-size:clamp(16.5px,1.3vw,18px);line-height:1.66;color:var(--ink-2);max-width:60ch}
.il,.tl{color:var(--slate-dp);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.il:hover,.tl:hover{text-decoration-thickness:2px}
.lt{font-weight:600;color:var(--ink)}

/* the tape mark above every H2 — a strip of black tape with cut ends, laid on reveal */
.tape{display:block;width:58px;height:7px;margin-bottom:22px;background:var(--ink);
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);transform-origin:left center}
.js .ro .tape{transform:scaleX(0);transition:transform .7s var(--ease) .1s}
.js .ro.in .tape{transform:none}

/* masking-tape tab — figure labels */
.tab{display:inline-block;white-space:nowrap;flex:none;background:var(--kraft);color:var(--kraft-ink);font:700 10.5px/1 var(--f-l);letter-spacing:.12em;
  text-transform:uppercase;padding:6px 10px 5px;transform:rotate(-1.6deg);
  clip-path:polygon(0 8%,4% 0,96% 4%,100% 0,98% 92%,100% 100%,3% 96%,0 100%)}
.gh-cap{display:flex;align-items:center;gap:12px;margin-top:14px;font:400 11.5px/1.3 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* parts-diagram balloon */
.bal{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;
  font:700 11.5px/1 var(--f-l);letter-spacing:.02em;color:var(--ink);background:var(--paper)}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;
  font:600 15px/1.2 var(--f-t);letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;border-radius:2px;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);overflow:hidden;cursor:pointer}
.btn span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;left:24px;right:24px;bottom:11px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn-slate{background:var(--slate);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
@media(hover:hover){
  .btn-slate:hover{background:var(--slate-dp)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .btn:hover::after{transform:scaleX(1)}
}
.btn:focus-visible::after{transform:scaleX(1)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ══ NAV — sticky, never hides ══ */
.bar-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.bar{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.bar.scrolled{box-shadow:0 10px 30px -22px rgba(17,19,22,.45)}
.bar-in{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);height:var(--bar);display:flex;align-items:center;gap:26px}
.brand img{height:56px;width:auto}
.nav{margin-left:auto;height:100%}
.nav-l{display:flex;align-items:stretch;gap:4px;list-style:none;margin:0;padding:0;height:100%}
.nav-l>li{position:relative;display:flex;align-items:center}
.dd-t,.nav-a{display:flex;align-items:center;gap:7px;height:100%;padding:0 12px;border:0;background:none;font:500 15px/1 var(--f-t);color:var(--ink);text-decoration:none;cursor:pointer}
.dd-t .caret{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.dd.open .caret{transform:rotate(180deg)}
.nav-a[aria-current],.dd-m a[aria-current]{color:var(--slate)}
.dd-t::after,.nav-a::after{content:"";position:absolute;left:12px;right:12px;bottom:18px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.dd.open .dd-t::after,.nav-a:hover::after{transform:scaleX(1)}
.dd-m{position:absolute;top:100%;left:-10px;min-width:280px;padding:10px;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:0 24px 50px -28px rgba(17,19,22,.4);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;overflow:auto}
.dd-m::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd.open .dd-m{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .3s var(--ease)}
.dd-m ul{list-style:none;margin:0;padding:0}
.dd-2{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));column-gap:6px}
.dd-m a{display:block;padding:9px 12px;font:400 14.5px/1.35 var(--f-t);color:var(--ink-2);text-decoration:none;border-radius:2px}
.dd-m a:hover,.dd-m a:focus-visible{background:var(--wall-2);color:var(--ink)}
.bar-tel{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--f-t);color:var(--ink);text-decoration:none;white-space:nowrap}
.bar-tel svg,.fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.bar-cta{min-height:44px;padding:0 18px}
.bar-cta::after{left:18px;right:18px;bottom:9px}
.burger{display:none;width:46px;height:46px;margin-left:auto;border:1.5px solid var(--ink);background:none;border-radius:2px;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:26px}
.burger[aria-expanded="true"] i:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:21.5px;transform:rotate(-45deg)}
.mpanel{position:fixed;left:0;right:0;bottom:0;top:var(--bar);z-index:89;background:var(--paper);overflow:auto;border-top:1px solid var(--line)}
.mp-in{padding:10px var(--gut) 40px}
.mp-acc{border-bottom:1px solid var(--line)}
.mp-acc summary,.mp-a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font:500 20px/1.2 var(--f-d);color:var(--ink);text-decoration:none;list-style:none;cursor:pointer}
.mp-acc summary::-webkit-details-marker{display:none}
.mp-acc summary::after{content:"+";font:300 26px/1 var(--f-d)}
.mp-acc[open] summary::after{content:"–"}
.mp-acc ul{list-style:none;margin:0 0 14px;padding:0}
.mp-acc a{display:block;padding:9px 0;color:var(--ink-2);text-decoration:none;font-size:16px}
.mp-a{border-bottom:1px solid var(--line)}
.mp-acts{display:grid;gap:10px;margin-top:24px}

/* ══ SECTION GROUNDS ══ */
.sec{padding-block:var(--sec)}
.paper{background:var(--paper)}
.wall{background:var(--wall)}
.night{background:var(--night) linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/48px 48px;color:var(--on-night-2)}
.night .h2,.night .h3{color:var(--on-night)}
.night .h2 em{color:var(--slate-lt)}
.night .lede{color:var(--on-night-2)}
.night .tape{background:var(--on-night)}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.reviews{background:var(--board);background-image:linear-gradient(rgba(17,19,22,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,22,.045) 1px,transparent 1px);background-size:40px 40px}
/* reviews as the second dark band: paper notes pinned on the night board */
.reviews.night{background-color:var(--night);background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)}
.reviews.night .note{border-color:transparent;box-shadow:0 26px 50px -24px rgba(0,0,0,.75)}
.reviews.night .note blockquote p{color:var(--ink)}
/* the van keeps the ground it stands on */
.van{--van-fill:var(--wall)}
.paper .van{--van-fill:var(--paper)}

/* ══ HERO — the drawing sheet ══ */
.hero{position:relative;padding:clamp(26px,3.4vw,44px) 0 clamp(40px,5vw,64px);
  background:var(--board) linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/40px 40px;background-image:
  linear-gradient(rgba(17,19,22,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,22,.045) 1px,transparent 1px);
  background-size:40px 40px;border-bottom:1px solid var(--line)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(4px,1vw,14px)}
.hero-side{padding-top:.5em}
.hero-side .lede{font-size:16.5px;margin-bottom:0;max-width:none}
.hero-side .acts{margin-top:20px}
.hero-side .btn{flex:1 1 auto}

/* the glasshouse figure */
.gh{margin:0;position:relative}
.gh-svg{width:100%;height:auto;overflow:visible;cursor:crosshair}
.gh-fill{fill:var(--board)}
.t1{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linejoin:round}
.t2{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}
.t3,.gh-t2{fill:none;stroke:var(--ink);stroke-width:1.3}
.gh-ground{stroke:var(--ink);stroke-width:1.4}
.gh-cl{fill:none;stroke:var(--slate);stroke-width:1;stroke-dasharray:18 5 3 5;opacity:.6}
.gh-hid{fill:none;stroke:var(--slate);stroke-width:1.2;stroke-dasharray:6 5;opacity:.65}
.gh-dim{fill:none;stroke:var(--slate);stroke-width:1.2;opacity:.8}
.w-tyre,.w-spk,.w-hub{fill:var(--ink)}
.w-rim{fill:var(--board)}
.w-cal{fill:none;stroke:var(--slate);stroke-width:7;stroke-linecap:round}
.gp-sheen{fill:#fff;opacity:.2}
.rf-palms{fill:#2b4466;opacity:.5}
.rf-hill{fill:#2b4466;opacity:.22}
.rf-sea{fill:#22385a;opacity:.32}
.rf-horizon{fill:#fff;opacity:.55}
.gp-mark{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.gp-hl{fill:none;stroke:#fff;stroke-width:5;opacity:.45}
.gp .rf-palms,.gp .rf-sea{transition:opacity .4s var(--ease)}
.gp:hover .rf-palms,.gp:focus-visible .rf-palms{opacity:.58}
.gp{cursor:pointer;outline:none}
.gp-glass{transition:transform .55s var(--ease)}
.gp-edge{fill:none;stroke:var(--ink);stroke-width:2;transition:stroke .2s var(--ease),stroke-width .2s var(--ease)}
.gp-camb{fill:var(--paper)}
.gp-glint{transform:translateX(var(--gx,-400px)) skewX(-18deg);will-change:transform}
.gp-lead{stroke:var(--ink);stroke-width:1;opacity:.45;transition:opacity .2s var(--ease),stroke .2s var(--ease)}
.gp-bal{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;transition:fill .2s var(--ease),stroke .2s var(--ease)}
.gp-num{font:700 15px var(--f-l);fill:var(--ink);transition:fill .2s var(--ease)}
.gp-lab{font:600 19px var(--f-t);fill:var(--ink);opacity:0;transition:opacity .25s var(--ease);paint-order:stroke;stroke:var(--board);stroke-width:6px;stroke-linejoin:round}
/* scroll-exploded view: site.js writes --ex (0 assembled -> 1 exploded) as the hero scrolls away */
.gh.done .gp-glass{transform:translate(calc(var(--dx) * var(--ex,0) * 3.4),calc(var(--dy) * var(--ex,0) * 3.4))}
.gh.done .gp-lab{opacity:clamp(0,calc(var(--ex,0) * 2.4 - 1),1)}
.gh.done .gp-lead{opacity:calc(.45 + var(--ex,0) * .55)}
.gp:hover .gp-glass,.gp:focus-visible .gp-glass,.gp.on .gp-glass,.gh.done .gp:hover .gp-glass,.gh.done .gp:focus-visible .gp-glass,.gh.done .gp.on .gp-glass{transform:translate(calc(var(--dx) * (1 + var(--ex,0) * 3.4)),calc(var(--dy) * (1 + var(--ex,0) * 3.4)))}
.gp:hover .gp-edge,.gp:focus-visible .gp-edge,.gp.on .gp-edge{stroke:var(--slate);stroke-width:3}
.gp:hover .gp-bal,.gp:focus-visible .gp-bal,.gp.on .gp-bal{fill:var(--slate);stroke:var(--slate)}
.gp:hover .gp-num,.gp:focus-visible .gp-num,.gp.on .gp-num{fill:#fff}
.gp:hover .gp-lab,.gp:focus-visible .gp-lab,.gp.on .gp-lab,.gh.done .gp:hover .gp-lab,.gh.done .gp:focus-visible .gp-lab,.gh.done .gp.on .gp-lab{opacity:1}
.gp:hover .gp-lead,.gp:focus-visible .gp-lead,.gp.on .gp-lead{opacity:1;stroke:var(--slate)}

/* assembly choreography (JS adds .go, then .done when it has played; no JS = final state) */
.js .gh:not(.done) .gh-tape .t1,.js .gh:not(.done) .gh-tape .t2,.js .gh:not(.done) .gh-ground{stroke-dasharray:1;stroke-dashoffset:1}
.js .gh:not(.done) .gh-tape .t3,.js .gh:not(.done) .gh-cl,.js .gh:not(.done) .gh-hid,.js .gh:not(.done) .gh-dim,.js .gh:not(.done) .gh-wheel,.js .gh:not(.done) .gh-ftyre{opacity:0}
.js .gh:not(.done) .gp-glass{opacity:0;transform:translate(calc(var(--dx)*5),calc(var(--dy)*5))}
.js .gh:not(.done) .gp-call{opacity:0}
.gh.go .gh-ground{animation:draw .8s var(--ease) forwards}
.gh.go .gh-tape .t1{animation:draw 1.5s cubic-bezier(.45,.05,.2,1) .15s forwards}
.gh.go .gh-tape .t2{animation:draw 1.1s var(--ease) .7s forwards}
.gh.go .gh-tape .t3{animation:fade .6s var(--ease) 1.2s forwards}
.gh.go .gh-cl{animation:fadeTo .8s var(--ease) .4s forwards}
.gh.go .gh-hid{animation:fadeTo .8s var(--ease) 1s forwards}
.gh.go .gh-dim{animation:fadeTo .8s var(--ease) 1.6s forwards}
.gh.go .gh-wheel,.gh.go .gh-ftyre{animation:fade .7s var(--ease) .75s forwards}
.gh.go .gp-glass{animation:seat .75s var(--ease) calc(1.15s + var(--i) * .09s) forwards}
.gh.go .gp-call{animation:fade .45s var(--ease) calc(1.25s + var(--i) * .09s) forwards}
.gh.go:not(.done) .gp-lab{animation:flash 1.9s var(--ease) calc(1.1s + var(--i) * .09s) both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes fadeTo{from{opacity:0}to{opacity:.62}}
@keyframes seat{to{opacity:1;transform:translate(0,0)}}
@keyframes flash{0%{opacity:0}22%{opacity:1}72%{opacity:1}100%{opacity:0}}

/* parts legend (small screens: the drawing's balloons are too small to read) */
.gh-legend{display:none}

/* title block (hero spec, prices, footer) */
.tb{border:1.5px solid var(--ink);background:var(--paper)}
/* the drawing sheet: frame, zone strip, title block */
.sheet-frame{--sp:clamp(14px,2.4vw,30px);position:relative;margin-top:clamp(22px,2.8vw,38px);border:1.5px solid var(--ink);
  background:rgba(252,252,249,.74);padding:34px var(--sp) 0}
.zones{position:absolute;left:0;right:0;top:0;height:18px;display:flex;border-bottom:1px solid var(--line)}
.zones span{flex:1;display:grid;place-items:center;font:400 9.5px/1 var(--f-l);letter-spacing:.1em;color:var(--ink-3)}
.zones span+span{border-left:1px solid var(--line)}
.hero-tb{display:grid;grid-template-columns:minmax(210px,1.1fr) 3fr;margin:16px calc(-1 * var(--sp)) 0;border-top:1.5px solid var(--ink)}
.tb-title{padding:18px 20px;border-right:1.5px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.tb-title img{height:46px;width:auto;align-self:flex-start}
.tb-hint{margin:0;font:500 14.5px/1.45 var(--f-t);color:var(--ink-2);display:flex;gap:10px;align-items:center}
.tb-hint::before{content:"";width:18px;height:18px;flex:none;border:1.5px solid var(--ink);border-radius:50%;background:radial-gradient(circle,var(--slate) 0 3px,transparent 3.5px)}
.tb-cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.tb-cells .tb-c::before{content:"";width:7px;height:7px;flex:none;background:var(--slate);transform:translateY(-2px)}
.tb-cells .tb-c{display:flex;gap:14px;align-items:baseline;padding:15px 18px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tb-cells .tb-c:nth-child(3n){border-right:0}
.tb-cells .tb-c:nth-last-child(-n+3){border-bottom:0}
.tb-k{font:700 11px/1.5 var(--f-l);letter-spacing:.1em;color:var(--slate);flex:none}
.tb-v{font:400 15.5px/1.5 var(--f-t);color:var(--ink)}

/* ══ QUOTE ══ */
.quote-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,6vw,96px);align-items:stretch}
.quote-copy{display:flex;flex-direction:column}
.trust{list-style:none;margin:auto 0 0;padding:36px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.trust li{display:grid;place-items:center;height:clamp(78px,7.4vw,104px);min-width:0;background:#fff;border:1px solid var(--line);padding:12px;overflow:hidden}
.trust img{width:auto;height:auto;max-width:100%;max-height:clamp(52px,5.6vw,78px);object-fit:contain;transition:transform .45s var(--ease)}
@media(hover:hover){.trust li:hover img{transform:scale(1.05)}}
.qf-wrap{position:relative}
.qf{background:var(--paper);border:1.5px solid var(--ink);box-shadow:10px 10px 0 -1px var(--wall-2),10px 10px 0 0 var(--line)}
.qf-head{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--wall)}
.qf-lead{margin:0;font-size:15px}
.qf-body{padding:22px 24px 24px;display:grid;gap:18px}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:6px;position:relative}
.fld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--slate);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);pointer-events:none}
.fld:focus-within::after{transform:scaleX(1)}
.fld:focus-within>span{color:var(--slate)}
.fld>span{font:700 10.5px/1.3 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fld input,.fld select,.fld textarea{width:100%;font:400 16px/1.4 var(--f-t);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);
  border-radius:0;padding:9px 2px;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.fld textarea{resize:vertical;min-height:78px}
.fld select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111316' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center/10px 6px;padding-right:22px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--slate);background-color:rgba(54,84,126,.05)}
.qf-q{font-weight:700;color:var(--ink);letter-spacing:.04em}
.qf-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end}
.qf-go{min-width:170px}
.qf-go:disabled{opacity:.55;cursor:not-allowed}
.qf-msg{margin:0;font-size:14.5px;min-height:1px}
.qf-msg.err{color:#a3261c}.qf-msg.ok{color:var(--slate-dp)}
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf-alt{margin:16px 0 0;font:400 14.5px/1.4 var(--f-t);color:var(--ink-3)}
.qf-alt a{color:var(--ink);font-weight:600}
.qf-done{padding:30px 24px}
/* sent: the sheet keeps its frame; a slate tick disc + the server's own message in the display face */
.qf>.qf-done.ok{display:flex;align-items:center;gap:18px;margin:0;padding:clamp(34px,4vw,48px) clamp(24px,3vw,34px);font:300 clamp(20px,1.8vw,24px)/1.35 var(--f-d);color:var(--ink)}
.qf>.qf-done.ok::before{content:"";flex:none;width:46px;height:46px;border-radius:50%;background:var(--slate) no-repeat center/22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 11.5l4.5 4.5L18 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ══ SERVICES — the parts catalogue ══ */
.cat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(22px,3vw,40px);row-gap:clamp(44px,5vw,64px);align-items:start}
.part{grid-column:span 4;border-top:1px solid var(--night-3);padding-top:22px}
.part:nth-child(-n+2){grid-column:span 6}
.part-fig{display:block;margin-bottom:22px}
.part{position:relative}
.part .h3{font-size:clamp(20px,1.7vw,24px);font-weight:400}
.part-fig{margin-top:22px;transition:transform .55s var(--ease)}
@media(hover:hover){.part:hover .part-fig{transform:translateY(-6px)}}
.part p{font-size:15.5px;margin-bottom:.8em}
.more{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.3 var(--f-t);color:var(--on-night);text-decoration:none;padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--ease)}
.more svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .45s var(--ease)}
@media(hover:hover){.more:hover{background-size:100% 1.5px}.more:hover svg{transform:translateX(5px)}}
.more:focus-visible{background-size:100% 1.5px}

/* a glass-part frame */
.pf{position:relative;width:100%;aspect-ratio:3/2;color:var(--ink)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pf-o{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;pointer-events:none}
.pf-o use,.pf-o path{vector-effect:non-scaling-stroke}
.pf-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:130% 0;transition:background-position 1.1s var(--ease)}
.pf-bal{position:absolute;left:0;top:-59px;z-index:2}
.pf-bal svg{width:15px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;overflow:visible}
.night .pf{color:var(--on-night)}
.night .bal{background:var(--night);color:var(--on-night);border-color:var(--on-night)}
@media(hover:hover){
  .part:hover .pf-sheen{background-position:-30% 0}
  .part:hover .pf img{transform:scale(1.035)}
  .part:hover .pf{color:var(--slate-lt)}
}

/* ══ FREE MOBILE SERVICE — the van ══ */
.mobile-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,5vw,80px);align-items:center}
.van-svg{width:100%;height:auto}
.van-dp{fill:var(--van-fill);stroke:var(--ink);stroke-width:1.7}
.van-ph{font:700 25px var(--f-t);fill:var(--ink);letter-spacing:.01em}
.van-spk{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.van-door{transition:transform 1.2s cubic-bezier(.65,0,.35,1) 1.55s}
.js .ro:not(.in) .van-door{transform:none}
.ro.in .van-door,html:not(.js) .van-door{transform:translateX(-180px)}
.van .gh-fill{fill:var(--van-fill)}
.van-body,.van-wheel{transition:transform 1.5s cubic-bezier(.22,.8,.22,1) .1s}
.van-wheel{transform-box:fill-box;transform-origin:center}
.js .ro:not(.in) .van-body{transform:translateX(-150px)}
.js .ro:not(.in) .van-wheel{transform:rotate(-190deg)}

/* ══ WHY — photograph + Detail A ══ */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.detail{margin:0;position:relative}
.detail-ph{position:relative;aspect-ratio:1/1;border:1.5px solid var(--ink);overflow:hidden;background:var(--wall-2)}
.detail-ph img{width:100%;height:100%;object-fit:cover}
@media(pointer:fine){.detail-ph{cursor:crosshair}}
.detail-ring{position:absolute;left:var(--px);top:var(--py);width:16%;aspect-ratio:1;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 1.5px var(--ink),0 0 0 999px rgba(17,19,22,0)}
.detail-zoom{position:absolute;right:16px;bottom:52px;width:40%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--ink);
  background-color:var(--wall-2);background-size:320%;background-position:10% 61%;box-shadow:0 0 0 7px var(--paper),0 0 0 8.5px var(--ink)}
.why-copy .lede{margin-bottom:34px}
.spec{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.spec-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.spec-mk{width:22px;height:5px;margin-top:.62em;background:var(--ink);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.spec-i p{margin:0}

/* ══ REVIEWS — sheets taped to the wall ══ */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);align-items:start;padding-top:14px}
.note{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);padding:38px 30px 28px;box-shadow:0 18px 40px -30px rgba(17,19,22,.45)}
.note:nth-child(1){transform:rotate(-1.1deg)}
.note:nth-child(2){transform:rotate(.7deg);margin-top:34px}
.note:nth-child(3){transform:rotate(-.45deg);margin-top:10px}
.note-tape{position:absolute;left:50%;top:-13px;width:96px;height:26px;margin-left:-48px;background:var(--kraft);opacity:.92;transform:rotate(-2.5deg);
  clip-path:polygon(0 10%,5% 0,95% 6%,100% 0,97% 90%,100% 100%,4% 94%,0 100%)}
.note::after{content:"\201C";position:absolute;right:22px;top:6px;font:300 86px/1 var(--f-d);color:var(--slate);opacity:.28;pointer-events:none}
.note blockquote{margin:0}
.note blockquote p{font:300 clamp(19px,1.55vw,22px)/1.45 var(--f-d);color:var(--ink);margin:0 0 20px}
.note figcaption a{font:600 15px/1.3 var(--f-t);color:var(--slate-dp);text-decoration:none;border-bottom:1px solid currentColor}

/* ══ COSTS — the title block ══ */
.cost-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,96px);align-items:start}
.cost-copy{grid-column:1;grid-row:1}
.cost-table{grid-column:2;grid-row:1/3}
.cost-after{grid-column:1;grid-row:2}
.cost-after .note-line{margin-top:6px;padding-top:22px;border-top:1px solid var(--line);max-width:52ch}
.prices{width:100%;border-collapse:collapse}
.prices .tb-head:last-child{text-align:right}
.prices .tb-head{text-align:left;padding:12px 22px;background:var(--wall);border-bottom:1.5px solid var(--ink);font:400 11.5px/1.3 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.prices th,.prices td{padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:baseline}
.prices tr:last-child th,.prices tr:last-child td{border-bottom:0}
.prices th{text-align:left;font:500 16px/1.4 var(--f-t);color:var(--ink-2)}
.prices td{text-align:right;white-space:nowrap;font:400 clamp(22px,2.2vw,30px)/1.1 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.note-line{margin:22px 0 0;font-size:15.5px}
.cost-after .acts{margin-top:22px}

/* ══ AREAS — the index of places ══ */
.area-set{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(30px,5vw,80px);padding-top:30px;border-top:1.5px solid var(--ink)}
/* a paragraph that follows the list in the doc (the ZIP-code line) closes the ruled index, same column */
.area-note{grid-column:2;margin:calc(-1 * clamp(30px,5vw,80px)) 0 0;padding:15px 0 14px;border-bottom:1px solid var(--line);font:400 16px/1.5 var(--f-t);color:var(--ink-2)}
.area-note .lt{font-weight:600;color:var(--ink)}
.area-set+.area-set{margin-top:clamp(44px,5vw,70px)}
.area-h p{font-size:15.5px}
.area-set .acts{grid-column:2;margin-top:6px}
/* the places: a ruled index, three columns, like a drawing set's sheet index */
.places{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px);border-top:1.5px solid var(--ink)}
.places li{border-bottom:1px solid var(--line);min-width:0}
.places a{position:relative;display:block;padding:15px 26px 14px 0;font:500 17px/1.3 var(--f-t);color:var(--ink);text-decoration:none;transition:color .2s var(--ease)}
.pl-s{font-weight:400;color:var(--ink-3);white-space:nowrap;transition:color .2s var(--ease)}
.places a::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-6px;opacity:0;transform:translateX(-8px);background:no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M6.5 2.5L10 6l-3.5 3.5' fill='none' stroke='%2336547e' stroke-width='1.5'/%3E%3C/svg%3E");transition:opacity .3s var(--ease),transform .45s var(--ease)}
.places a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--slate);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.places a:hover{color:var(--slate)}.places a:hover .pl-s{color:var(--slate)}.places a:hover::after{opacity:1;transform:none}.places a:hover::before{transform:scaleX(1)}}
.places a:focus-visible::before{transform:scaleX(1)}
.hoods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 12px}
.hoods li{background:var(--kraft);color:var(--kraft-ink);font:500 15px/1 var(--f-t);padding:11px 16px 10px;
  clip-path:polygon(0 6%,3% 0,97% 5%,100% 0,98% 94%,100% 100%,2% 95%,0 100%)}
.hoods li:nth-child(odd){transform:rotate(-.8deg)}
.hoods li:nth-child(3n){transform:rotate(.9deg)}

/* ══ FAQ ══ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:calc(var(--bar) + 40px)}
.faq-list{border-top:1.5px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:24px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa-q{font:400 clamp(18px,1.5vw,21px)/1.35 var(--f-d);color:var(--ink-2);transition:color .2s var(--ease)}
.qa[open] .qa-q{color:var(--slate)}
.qa-x{position:relative;width:18px;height:18px}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.qa-x::after{transform:rotate(90deg)}
.qa[open] .qa-x::after{transform:rotate(0)}
.qa-a{padding:0 48px 24px 0}
.qa-a p{margin:0}
@media(hover:hover){.qa summary:hover .qa-q{color:var(--ink)}}

/* ══ GET YOUR SERVICE — map through a windshield ══ */
.end-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.end .map{margin-top:6px}
.wx{max-width:440px;min-height:96px;margin-top:34px;border:1px solid var(--line);background:var(--paper)}
.wx.fail{display:none}
.wx-row{max-width:none;margin-top:clamp(28px,3vw,40px)}
.map{margin:0}
.map-in{aspect-ratio:4/3;border:1.5px solid var(--ink);background:var(--wall-2);box-shadow:10px 10px 0 -1px var(--wall-2),10px 10px 0 0 var(--line)}
.map iframe{display:block;width:100%;height:100%;border:0}
.map-cap{display:flex;align-items:center;gap:10px;margin-top:18px;font:500 15px/1.4 var(--f-t)}
.map-cap svg{width:14px;height:18px;flex:none;fill:none;stroke:var(--slate);stroke-width:1.6}
.map-cap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s var(--ease)}
.map-cap a:hover{border-color:var(--ink)}

/* ══ FOOTER ══ */
.foot{position:relative;overflow:hidden;background:var(--night);color:var(--on-night-2);padding:clamp(56px,7vw,90px) 0 30px}
.foot>.wrap{position:relative}
.foot-car{position:absolute;right:-60px;bottom:64px;width:min(600px,52vw);height:auto;pointer-events:none;overflow:visible}
.foot-car *{fill:none;stroke:rgba(239,239,235,.13);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:var(--fc,0)}
.js .foot-car *{--fc:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.2,1)}
.js .foot-car.in *{--fc:0}
.foot a{text-decoration:none}
.foot .tb{background:transparent;border-color:var(--on-night-3);display:grid;grid-template-columns:1.1fr 1fr 1fr 1.3fr}
.foot-tb .tb-c{padding:22px 24px;border-right:1px solid var(--night-3);display:grid;gap:6px;align-content:start}
.foot-tb .tb-c:last-child{border-right:0}
.foot-tb .tb-brand{align-content:center}
.foot-tb .brand img{height:56px;width:auto}
.foot .tb-k{color:var(--slate-lt)}
.foot .tb-v{color:var(--on-night)}
.foot a.tb-v:hover{text-decoration:underline;text-underline-offset:3px}
.foot-cols{display:grid;grid-template-columns:1fr 1.6fr .9fr;gap:40px;padding:52px 0 44px}
.foot-h{font:700 11px/1 var(--f-l);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-3);margin:0 0 18px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-areas ul{grid-template-columns:1fr 1fr;column-gap:24px}
.foot-col a{color:var(--on-night-2);font-size:15px;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--on-night)}
.foot .foot-cta{margin-top:28px;color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:20px;padding-right:84px;border-top:1px solid var(--night-3);padding-top:22px;font:400 11.5px/1.4 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3)}
.foot-base p{margin:0}
.foot-base a{color:var(--on-night-2)}

/* floating call button (appears once the hero's own call-to-action has scrolled away) */
.fab{position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--slate);color:#fff;
  box-shadow:0 14px 30px -12px rgba(17,19,22,.55);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.fab svg{width:22px;height:22px}
.fab.on{opacity:1;transform:none;pointer-events:auto}
html.menu-open .fab{opacity:0;pointer-events:none}

/* ══ REVEAL ══ */
.js .ro{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.js .ro.in{opacity:1;transform:none}
.js .ro.d1{transition-delay:.1s}.js .ro.d2{transition-delay:.18s}
.js .note.ro{transform:translateY(18px) rotate(0)}
.js .note.ro.in:nth-child(1){transform:rotate(-1.1deg)}
.js .note.ro.in:nth-child(2){transform:rotate(.7deg)}
.js .note.ro.in:nth-child(3){transform:rotate(-.45deg)}
@media(hover:hover){.js .note.ro.in:hover,.note:hover{transform:translateY(-6px) rotate(0)}}
.hero .ro{transition-duration:.8s,.9s}


/* ══ INTERIOR — service / utility pages ══ */
.board{background:var(--board);background-image:linear-gradient(rgba(17,19,22,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,22,.045) 1px,transparent 1px);background-size:40px 40px}
.ihero{padding:clamp(26px,3.4vw,44px) 0 clamp(44px,5.5vw,72px)}
.ihero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5vw,80px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;font:400 11.5px/1.4 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.crumbs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-color:var(--ink)}
.crumbs [aria-current]{color:var(--slate)}
.ihero .h1{margin-bottom:.55em}
.ihero .lede{max-width:56ch}
.ihero-fig{margin:0;position:relative}
.ihero-fig .pf{color:var(--ink)}
.kp-wrap{display:flex;align-items:center;gap:18px;margin-top:22px;padding:14px 18px;border:1.5px solid var(--ink);background:var(--paper)}
.kp{width:min(250px,56%);height:auto;flex:none}
.kp-body{fill:var(--paper);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.kp-tyre{fill:var(--ink)}
.kp-rim{fill:var(--paper)}
.kp-ground{stroke:var(--ink);stroke-width:4}
.kp-pane{fill:var(--wall-2);stroke:var(--ink);stroke-width:4}
.kp-pane.on{fill:var(--slate)}
.kp-cap{margin:0;font:500 14px/1.45 var(--f-t);color:var(--ink-2)}
.kp-cap::before{content:"";display:inline-block;width:12px;height:12px;margin-right:9px;vertical-align:-1px;background:var(--slate)}
.ihero-tb{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ihero-tb .tb-c{display:flex;gap:12px;align-items:baseline;padding:15px 18px;border-right:1px solid var(--line)}
.ihero-tb .tb-c:last-child{border-right:0}
.ihero-tb .tb-c::before{content:"";width:7px;height:7px;flex:none;background:var(--slate);transform:translateY(-2px)}

/* a chapter: sticky heading left, reading column right */
.chap{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(30px,5vw,80px);align-items:start}
.chap-h{position:sticky;top:calc(var(--bar) + 36px)}
.chap-h .h2{margin-bottom:0}
.chap-b{display:grid;gap:clamp(26px,3vw,40px);min-width:0}
.flow>*:last-child{margin-bottom:0}
.flow p{max-width:66ch}
.flow-lg p{font:300 clamp(18px,1.55vw,21px)/1.6 var(--f-d);color:var(--ink)}
.flow-lg p .tl,.flow-lg p .il{font-weight:400}
.stmt{align-items:baseline}
.stmt .chap-h{position:static}

/* H3 groups as cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cards-1{grid-template-columns:1fr}
.card{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--ink);padding:24px 24px 22px;min-width:0}
.wall .card{background:var(--board)}
.paper .card{background:var(--wall)}
.card .h3{font-weight:500;margin-bottom:.55em}
.card p{font-size:15.5px;margin-bottom:.75em}
.card>*:last-child{margin-bottom:0}
.card .terms{margin:.4em 0 1em}
.card:has(.terms),.card:has(.steps){grid-column:1/-1}

/* a process: numbered sequence on a tape line (the numbers ARE the order) */
.steps{list-style:none;margin:0;padding:0;position:relative}
/* the track (faint) + the fill that follows the reader + a marker riding its head */
.steps::before{content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:var(--line)}
.steps-fill{position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:var(--ink);transform-origin:top;transform:scaleY(var(--sp,1));pointer-events:none}
.steps-head{position:absolute;left:20px;top:calc(22px + (100% - 44px) * var(--sp,1));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--slate-lt);box-shadow:0 0 0 5px rgba(169,192,224,.18),0 0 18px 4px rgba(169,192,224,.45);pointer-events:none;opacity:var(--sh,0);transition:opacity .3s var(--ease)}
.js .steps.live .step-n{transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.js .steps.live .step>div{transition:opacity .55s var(--ease),transform .7s var(--ease)}
.js .steps.live .step:not(.on)>div{opacity:.68;transform:translateX(-8px)}
.js .steps.live .step.on .step-n{background:var(--slate);border-color:var(--slate);color:#fff;transform:scale(1.08)}
.js .steps.live .step.on:not(.cur) .step-n{transform:none}
.step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:22px;padding:0 0 28px}
.step:last-child{padding-bottom:0}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font:700 13px/1 var(--f-l);color:var(--ink)}
.step:last-child .step-n{background:var(--slate);border-color:var(--slate);color:#fff}
.step-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.step-t{font:500 clamp(18px,1.5vw,20px)/1.3 var(--f-d);color:var(--ink);margin:.35em 0 .35em}
.step .h3{margin:.35em 0 .4em}
.step p{margin-bottom:.6em}
.step>div>*:last-child{margin-bottom:0}

/* term lists: prices set large, definitions as ruled rows */
.terms{width:100%;border-collapse:collapse;border:1.5px solid var(--ink);background:var(--paper)}
.terms th,.terms td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:baseline;text-align:left}
.terms tr:last-child th,.terms tr:last-child td{border-bottom:0}
.terms th{font:500 15.5px/1.4 var(--f-t);color:var(--ink-2);width:46%}
.terms .is-price td{text-align:right;white-space:nowrap;font:400 clamp(20px,1.9vw,26px)/1.1 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums}
.terms .is-def td{font-size:15.5px;color:var(--ink-2)}
.ticks{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid var(--line)}
.ticks li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:8px;background:var(--slate)}
.sv-chips{margin:.4em 0 1.2em}

/* the night band ("Why choose") */
.night .card{background:var(--night-2);border-color:var(--night-3);border-top-color:var(--on-night)}
.night .card p,.night .flow p{color:var(--on-night-2)}
.night .flow-lg p{color:var(--on-night)}
.night .terms{background:var(--night-2);border-color:var(--on-night-3)}
.night .terms th{color:var(--on-night)}
.night .terms td,.night .terms .is-def td{color:var(--on-night-2)}
.night .terms th,.night .terms td{border-color:var(--night-3)}
.night .ticks,.night .ticks li{border-color:var(--night-3)}
.night .ticks li{color:var(--on-night-2)}
.night .ticks li::before{background:var(--slate-lt)}
.night .lt{color:var(--on-night)}
.night .il,.night .tl{color:var(--slate-lt)}
.night .step-n{background:var(--night);border-color:var(--on-night);color:var(--on-night)}
.night .steps::before{background:var(--night-3)}
.night .steps-fill{background:var(--on-night)}
.night .steps.live .step.on .step-n{background:var(--slate-lt);border-color:var(--slate-lt);color:var(--night)}

/* the vehicle-types strip: car, RV, semi-truck — each through its own glass */
.vstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(36px,4vw,56px)}
/* the close: last section beside the form */
.close-note{display:inline-flex;align-items:center;gap:10px;margin:6px 0 0;padding:10px 14px;border:1px solid var(--line);background:var(--paper);font:500 15px/1.3 var(--f-t);color:var(--ink)}
.close-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--slate)}

.acts-or{align-items:center}
.acts-or .or{font:300 22px/1 var(--f-d);color:var(--ink-3)}
.hero .crumbs{margin-bottom:22px}
.hero-side .lede+.lede{margin-top:.8em}
.area-h .area-label{margin:0;font:500 clamp(18px,1.5vw,21px)/1.35 var(--f-d);color:var(--ink)}
.area-cta{margin-top:clamp(36px,4vw,52px)}
/* close: the copy column stretches its map so both columns end level with the form */
.loc-end .quote-grid{align-items:stretch}
.loc-end .map{flex:1;display:flex;flex-direction:column;min-height:280px;margin-top:30px}
.loc-end .map-in{flex:1;aspect-ratio:auto;box-shadow:none}
.loc-end .qf-wrap{height:100%;display:flex;flex-direction:column}
.loc-end .qf{flex:1}


/* ══ UTILITY PAGES ══ */
/* the business's own contact lines as a card: name on a tape strip, then label / value rows */
.ccard{margin:1.2em 0;max-width:560px;border:1.5px solid var(--ink);background:var(--paper)}
.ccard-h{margin:0;padding:14px 20px;border-bottom:1.5px solid var(--ink);background:var(--wall);font:500 18px/1.3 var(--f-d);color:var(--ink)}
.ccard .ccard-t{border:0;background:transparent}
.ccard .ccard-t th{width:34%;font:500 15px/1.4 var(--f-t)}
.ccard .ccard-t td{font:400 16px/1.4 var(--f-t);color:var(--ink)}
.ccard .ccard-t .tl{color:var(--slate-dp)}
.night .ccard{background:var(--night-2);border-color:var(--on-night-3)}
/* contact: the form sits in the hero */
.ihero-form .qf{box-shadow:10px 10px 0 -1px var(--wall-2),10px 10px 0 0 var(--line)}
/* legal: one reading column + a sticky index of the document's own headings */
.ihero-legal .ihero-copy{max-width:860px}
.legal{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.toc{position:sticky;top:calc(var(--bar) + 32px);max-height:calc(100vh - var(--bar) - 64px);overflow:auto;border-top:1.5px solid var(--ink);padding-top:16px}
.toc-h{margin:0 0 10px;font:700 10.5px/1.3 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{position:relative;display:block;padding:7px 0 7px 14px;font:400 14.5px/1.35 var(--f-t);color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease)}
.toc a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--slate);transform:scaleY(0);transition:transform .35s var(--ease)}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on::before{transform:none}
.legal-doc{max-width:760px;min-width:0}
.legal-part{scroll-margin-top:calc(var(--bar) + 24px)}
.legal-part+.legal-part{margin-top:clamp(44px,5vw,64px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.legal-part .h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:.6em}
.legal-part .flow p{font-size:16.5px}

/* ══ RESPONSIVE ══ */
@media(max-width:1180px){
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar-tel span{display:none}
  .dd-t,.nav-a{padding:0 9px}
}
@media(max-width:980px){
  .nav,.bar-tel,.bar-cta{display:none}
  .burger{display:block}
  .hero-top{grid-template-columns:1fr;gap:20px}
  .hero-side .btn{flex:0 1 auto}
  .quote-grid,.mobile-grid,.why-grid,.cost-grid,.faq-grid,.end-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .ihero-grid,.chap{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}
  .toc{position:static;max-height:none}
  .toc ol{columns:2;column-gap:20px}
  .toc li{break-inside:avoid}
  .ihero-form{max-width:640px}
  .loc-end .map{flex:none;min-height:0}
  .loc-end .map-in{aspect-ratio:4/3}
  .loc-end .qf-wrap{height:auto}
  .chap-h{position:static}
  .ihero-fig{max-width:620px}
  .hero-tb{grid-template-columns:1fr}
  .tb-title{border-right:0;border-bottom:1px solid var(--ink);flex-direction:row;align-items:center;flex-wrap:wrap}
  .tb-cells{grid-template-columns:1fr 1fr}
  .tb-cells .tb-c{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .tb-cells .tb-c:nth-child(2n){border-right:0!important}
  .tb-cells .tb-c:nth-last-child(-n+2){border-bottom:0!important}
  .cat{grid-template-columns:1fr 1fr}
  .part,.part:nth-child(n){grid-column:auto}
  .cost-copy,.cost-table,.cost-after{grid-column:1;grid-row:auto}
  .cost-table{margin:30px 0}
  .trust{grid-template-columns:repeat(5,minmax(0,90px))}
  .notes{grid-template-columns:1fr;max-width:620px}
  .note:nth-child(n){margin-top:0}
  .area-set{grid-template-columns:1fr}
  .area-set .acts{grid-column:auto}
  .area-note{grid-column:auto}
  .places{grid-template-columns:1fr 1fr}
  .foot .tb{grid-template-columns:1fr 1fr}
  .foot-tb .tb-c:nth-child(2){border-right:0}
  .foot-tb .tb-c:nth-child(-n+2){border-bottom:1px solid var(--night-3)}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-areas{grid-column:1/-1;order:-1}
  .gh-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);counter-reset:gl}
  .gh-legend a{display:flex;gap:10px;align-items:center;padding:7px 0;font:500 14.5px/1.3 var(--f-t);color:var(--ink);text-decoration:none}
  .gh-legend .bal{width:24px;height:24px;font-size:10px}
}
@media(max-width:640px){
  .tb-cells{grid-template-columns:1fr}
  .tb-cells .tb-c{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .tb-cells .tb-c:last-child{border-bottom:0!important}
  .zones span:nth-child(n+5){display:none}
  .cat{grid-template-columns:1fr}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qf-row,.qf-cap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .vstrip{grid-template-columns:1fr}
  .acts-or{flex-direction:column;align-items:flex-start;gap:8px}
  .acts-or .or{padding-left:22px}
  .ihero-tb{grid-template-columns:1fr}
  .ihero-tb .tb-c{border-right:0;border-bottom:1px solid var(--line)}
  .ihero-tb .tb-c:last-child{border-bottom:0}
  .terms th{width:auto}
  .terms .is-price th,.terms .is-price td{display:block;text-align:left;padding:14px 16px 0}
  .terms .is-price td{padding:4px 16px 14px}
  .kp-wrap{flex-direction:column;align-items:flex-start}
  .kp{width:100%}
  .qa-a{padding:0 0 22px}
  .foot .tb{grid-template-columns:1fr}
  .foot-tb .tb-c{border-right:0;border-bottom:1px solid var(--night-3)}
  .foot-tb .tb-c:last-child{border-bottom:0}
  .foot-cols{grid-template-columns:1fr}
  .foot-areas ul{grid-template-columns:1fr 1fr}
  .gh-legend{grid-template-columns:1fr}
  .gh.side-only .gh-svg{overflow:hidden}
  .gh.side-only .gh-front,.gh.side-only [data-pane="fw"],.gh.side-only .gp-cam{display:none}
  .prices th,.prices td{display:block;text-align:left;padding:16px 18px 0}
  .prices td{padding:4px 18px 16px;border-bottom:1px solid var(--line)}
  .prices th{border-bottom:0}
  .places{grid-template-columns:1fr}
  .brand img{height:42px}
}

/* ══ GATES ══ */
@media(hover:none),(max-width:640px){.gp-lab{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .ro{opacity:1;transform:none}
}

/* ══════════ ROUND 6 (homepage): the drawing carried down the page ══════════ */

/* QUOTE — the key plan answers the form: the chosen service lights the glass it covers */
.qkp{margin-top:clamp(20px,2.2vw,30px);max-width:520px}
.qkp .kp{display:block;width:100%;height:auto}
.qkp .kp-pane{transition:fill .45s var(--ease)}
.qkp-cap{display:flex;align-items:center;gap:10px;margin:14px 0 0;min-height:20px;font:500 14px/1.4 var(--f-t);color:var(--ink-3)}
.qkp-sw{flex:none;width:12px;height:12px;border:1.5px solid var(--ink);background:var(--wall-2);transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.qkp.set .qkp-sw{background:var(--slate);border-color:var(--slate)}
/* no hint text: the caption only appears once a service is chosen (it then names that service) */
.qkp:not(.set) .qkp-cap{visibility:hidden}
.qkp.set .qkp-t{color:var(--ink)}
.qkp-t.swap{animation:qkpIn .45s var(--ease)}
@keyframes qkpIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* COSTS — every range drawn as a dimension line on one shared scale (zero at the left) */
.prices tr.has-dim th,.prices tr.has-dim td{border-bottom:0;padding-bottom:8px}
.prices .dim-row td{padding:0 22px 20px;border-bottom:1px solid var(--line);font-size:0;line-height:0;text-align:left}
.prices tr.dim-row:last-child td{border-bottom:0}
.dim-track{position:relative;display:block;height:14px;background:linear-gradient(90deg,var(--line) 0 2px,transparent 2px) 0 50%/6px 1px repeat-x}
.dim-track::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--ink-3)}
.dim{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);min-width:16px;
  border-left:1.5px solid var(--slate);border-right:1.5px solid var(--slate);
  background:linear-gradient(var(--slate),var(--slate)) 0 50%/100% 1.5px no-repeat}
.dim::before,.dim::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--slate)}
.dim::before{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.dim::after{right:0;clip-path:polygon(0 0,100% 50%,0 100%)}
/* "+": open-ended, the line runs past the top of the scale and fades */
.dim.open{border-right:0;background:linear-gradient(90deg,var(--slate) calc((86 - var(--a)) / (100 - var(--a)) * 100%),rgba(54,84,126,.15)) 0 50%/100% 1.5px no-repeat}
.js .cost-table .dim{clip-path:inset(0 100% 0 0);transition:clip-path .95s var(--ease) calc(.45s + var(--i) * .15s)}
.js .cost-table.in .dim{clip-path:inset(0 0 0 0)}

/* AREAS — the South Bay communities drawn as a site plan beside their index */
.area-set.has-plan{grid-template-columns:minmax(0,2.6fr) minmax(0,5.4fr) minmax(0,4fr);grid-template-areas:"h idx plan";column-gap:clamp(28px,3.4vw,48px);align-items:start}
.has-plan .area-h{grid-area:h}
.has-plan .area-idx{grid-area:idx}
.has-plan .sbm{grid-area:plan}
.has-plan .places{grid-template-columns:repeat(2,minmax(0,1fr))}
.area-idx .area-note{margin:0}
.sbm{margin:0;--sea:#e4eaf1}
.sbm-credit{margin:7px 0 0;font:400 11px/1.3 var(--f-l);color:var(--ink-3);text-align:right}
.sbm-in{position:relative;width:100%;background:var(--sea);border:1.5px solid var(--ink);overflow:hidden}
.sbm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.sbm-land{fill:var(--paper)}
.sbm-hatch{fill:none;stroke:var(--slate);stroke-width:1;opacity:.3;vector-effect:non-scaling-stroke}
.sbm-coast{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sbm-na{fill:var(--ink-3)}
.sbm-bar{fill:none;stroke:var(--ink-3);stroke-width:3}
.sbm-t{font:700 30px var(--f-l);fill:var(--ink-3)}
.sbm-route{fill:none;stroke:var(--slate);stroke-width:5;stroke-dasharray:16 11;stroke-linecap:round;opacity:0;transition:opacity .35s var(--ease)}
.sbm-rmask{fill:none;stroke:#fff;stroke-width:18}
.sbm-head{fill:var(--slate);stroke:var(--paper);stroke-width:5;opacity:0;transition:opacity .25s var(--ease)}
.sbm.routing .sbm-route,.sbm.routing .sbm-head{opacity:1}
.sbm-pt{position:absolute;width:0;height:0;z-index:1;color:var(--ink);text-decoration:none}
.sbm-pt i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);
  transition:transform .35s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.sbm-l{position:absolute;white-space:nowrap;font:400 11px/1.25 var(--f-l);color:var(--ink-2);
  text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 4px var(--paper);transition:color .25s var(--ease)}
.s-r>.sbm-l{left:8px;top:0;transform:translateY(-50%)}
.s-l>.sbm-l{right:8px;top:0;transform:translateY(-50%);text-align:right}
.s-t>.sbm-l{left:0;bottom:8px;transform:translateX(-50%);text-align:center}
.s-b>.sbm-l{left:0;top:8px;transform:translateX(-50%);text-align:center}
.s-tr>.sbm-l{left:4px;bottom:5px}.s-br>.sbm-l{left:4px;top:5px}
.s-tl>.sbm-l{right:4px;bottom:5px;text-align:right}.s-bl>.sbm-l{right:4px;top:5px;text-align:right}
.sbm-home{z-index:2}
.sbm-home i{left:-7px;top:-7px;width:14px;height:14px;background:var(--slate);border-color:var(--slate)}
.sbm-home i::after{content:"";position:absolute;inset:-7px;border:1.5px solid var(--slate);border-radius:50%;opacity:.45}
.sbm-home.s-l>.sbm-l{right:20px}.sbm-home.s-r>.sbm-l{left:20px}
.sbm-home .sbm-l{font-weight:700;color:var(--slate-dp)}
.sbm-pt.on{z-index:3}
.sbm-pt.on i{background:var(--slate);border-color:var(--slate);transform:scale(1.4)}
.sbm-pt.on .sbm-l{color:var(--ink);font-weight:700}
a.sbm-pt{cursor:pointer}
.places a.hl{color:var(--slate)}
.places a.hl .pl-s{color:var(--slate)}
.places a.hl::before{transform:scaleX(1)}
/* first view: the coast draws, then the cities land outward from Manhattan Beach (by distance) */
.js .sbm .sbm-coast{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.7s cubic-bezier(.45,.05,.2,1)}
.js .sbm .sbm-land,.js .sbm .sbm-hatch,.js .sbm .sbm-furn{transition:opacity .9s var(--ease) .5s}
.js .sbm .sbm-pt{transition:opacity .4s var(--ease) calc(var(--d) + .5s),transform .6s var(--ease) calc(var(--d) + .5s)}
.js .sbm:not(.in) .sbm-coast{stroke-dashoffset:1}
.js .sbm:not(.in) .sbm-land,.js .sbm:not(.in) .sbm-hatch,.js .sbm:not(.in) .sbm-furn{opacity:0}
.js .sbm:not(.in) .sbm-pt{opacity:0;transform:scale(.3)}

/* SERVICES — light runs across each piece of glass once as it comes into view */
.is-home .part.in .pf-sheen{animation:paneSheen 1.5s cubic-bezier(.45,.05,.2,1) .35s both}
@keyframes paneSheen{from{background-position:130% 0}to{background-position:-30% 0}}
@media(hover:hover) and (pointer:fine){
  .is-home .part.in:hover .pf-sheen{animation:none;background-position:var(--sx,-30%) 0;transition:background-position .5s var(--ease)}
}

/* HERO — the reflection follows the sun over Manhattan Beach (data-sky set inline, see glasshouse.php) */
.gh[data-sky="dawn"] #gh-sky stop:nth-child(1){stop-color:#e3e6f2}
.gh[data-sky="dawn"] #gh-sky stop:nth-child(2){stop-color:#f2d6c8}
.gh[data-sky="dawn"] #gh-sky stop:nth-child(3){stop-color:#b8a7c2}
.gh[data-sky="dawn"] #gh-sky stop:nth-child(4){stop-color:#3d4d72}
.gh[data-sky="dawn"] .rf-palms{fill:#3a3f5e}
.gh[data-sky="dawn"] .rf-horizon{fill:#fff3e6;opacity:.7}
.gh[data-sky="golden"] #gh-sky stop:nth-child(1){stop-color:#f7f0e2}
.gh[data-sky="golden"] #gh-sky stop:nth-child(2){stop-color:#f2d3a4}
.gh[data-sky="golden"] #gh-sky stop:nth-child(3){stop-color:#d79e72}
.gh[data-sky="golden"] #gh-sky stop:nth-child(4){stop-color:#3b4a6b}
.gh[data-sky="golden"] .rf-palms{fill:#33354a;opacity:.6}
.gh[data-sky="golden"] .rf-hill{fill:#5a4a52}
.gh[data-sky="golden"] .rf-horizon{fill:#fff1d6;opacity:.8}
.gh[data-sky="dusk"] #gh-sky stop:nth-child(1){stop-color:#4b5a8a}
.gh[data-sky="dusk"] #gh-sky stop:nth-child(2){stop-color:#b9829a}
.gh[data-sky="dusk"] #gh-sky stop:nth-child(3){stop-color:#ec9f72}
.gh[data-sky="dusk"] #gh-sky stop:nth-child(4){stop-color:#2a3a5c}
.gh[data-sky="dusk"] .rf-palms{fill:#1a1f33;opacity:.78}
.gh[data-sky="dusk"] .rf-hill{fill:#2a2840;opacity:.45}
.gh[data-sky="dusk"] .rf-sea{fill:#1d2944;opacity:.5}
.gh[data-sky="dusk"] .rf-horizon{fill:#ffd9a8;opacity:.85}
.gh[data-sky="night"] #gh-sky stop:nth-child(1){stop-color:#1e2b4c}
.gh[data-sky="night"] #gh-sky stop:nth-child(2){stop-color:#2d3f67}
.gh[data-sky="night"] #gh-sky stop:nth-child(3){stop-color:#43577f}
.gh[data-sky="night"] #gh-sky stop:nth-child(4){stop-color:#141d33}
.gh[data-sky="night"] .rf-palms{fill:#0b1020;opacity:.8}
.gh[data-sky="night"] .rf-hill{fill:#0e1426;opacity:.55}
.gh[data-sky="night"] .rf-sea{fill:#0d1528;opacity:.55}
.gh[data-sky="night"] .rf-horizon{fill:#f6c98a;opacity:.9}
.gh[data-sky="night"] .gp-mark{opacity:.55}
.gh[data-sky="night"] .gp-hl{opacity:.3}

@media(max-width:1180px){
  .area-set.has-plan{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h plan" "idx plan";row-gap:26px}
}
@media(max-width:980px){
  .qkp{display:none}
  .area-set.has-plan{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "plan" "idx"}
  .has-plan .sbm{width:100%;max-width:520px}
}
@media(max-width:640px){
  .has-plan .places{grid-template-columns:1fr}
  .prices tr.has-dim td{border-bottom:0;padding-bottom:8px}
  .prices .dim-row td{display:block;padding:0 18px 18px}
}
@media(prefers-reduced-motion:reduce){
  .is-home .part.in .pf-sheen{animation:none}
}

/* ══════════ ROUND 7 (homepage) ══════════ */

/* HERO — the glass also shows Manhattan Beach's weather right now (NWS observation at LAX; ?wx= previews).
   fog = the marine layer (densest at the horizon, palms gone), cloudy = a grey veil, rain = veil + drops running down */
.gp-cloud,.gp-fog,.gp-drops,.gp-run{opacity:0;transition:opacity 1.8s var(--ease)}
.gh[data-sky] .rf-palms,.gh[data-sky] .rf-horizon,.gh[data-sky] .rf-hill{transition:opacity 1.8s var(--ease)}
.gh[data-wx="cloudy"] .gp-cloud,.gh[data-wx="rain"] .gp-cloud,.gh[data-wx="fog"] .gp-fog,.gh[data-wx="rain"] .gp-drops,.gh[data-wx="rain"] .gp-run{opacity:1}
.gh[data-wx="rain"] .gp-run{animation:ghRun 12s linear infinite}
.gh.off .gp-run{animation-play-state:paused}
@keyframes ghRun{to{transform:translateY(120px)}}
.gh[data-wx="fog"] .rf-palms{opacity:.14}
.gh[data-wx="fog"] .rf-horizon{opacity:0}
.gh[data-wx="fog"] .rf-hill{opacity:.05}
.gh[data-wx="cloudy"] .rf-palms,.gh[data-wx="rain"] .rf-palms{opacity:.38}
.gh-drop{fill:#fff;fill-opacity:.5;stroke:#22324c;stroke-opacity:.3;stroke-width:.9}
.gh-trail{fill:none;stroke:#fff;stroke-opacity:.32;stroke-width:1.3;stroke-linecap:round}
#gh-fog stop:nth-child(1){stop-color:#e8ecf0;stop-opacity:.6}
#gh-fog stop:nth-child(2){stop-color:#f3f5f7;stop-opacity:.92}
#gh-fog stop:nth-child(3){stop-color:#dbe2ea;stop-opacity:.7}
#gh-cloud stop:nth-child(1){stop-color:#c5ced8;stop-opacity:.66}
#gh-cloud stop:nth-child(2){stop-color:#93a1b4;stop-opacity:.22}
.gh[data-sky="golden"] #gh-fog stop:nth-child(1),.gh[data-sky="dawn"] #gh-fog stop:nth-child(1){stop-color:#eee6de}
.gh[data-sky="golden"] #gh-fog stop:nth-child(2),.gh[data-sky="dawn"] #gh-fog stop:nth-child(2){stop-color:#f7f0e9}
.gh[data-sky="golden"] #gh-cloud stop:nth-child(1),.gh[data-sky="dawn"] #gh-cloud stop:nth-child(1){stop-color:#d8cec6}
.gh[data-sky="dusk"] #gh-fog stop:nth-child(1),.gh[data-sky="night"] #gh-fog stop:nth-child(1){stop-color:#3e4a66;stop-opacity:.62}
.gh[data-sky="dusk"] #gh-fog stop:nth-child(2),.gh[data-sky="night"] #gh-fog stop:nth-child(2){stop-color:#6e7a94;stop-opacity:.85}
.gh[data-sky="dusk"] #gh-fog stop:nth-child(3),.gh[data-sky="night"] #gh-fog stop:nth-child(3){stop-color:#2a3550;stop-opacity:.6}
.gh[data-sky="dusk"] #gh-cloud stop:nth-child(1),.gh[data-sky="night"] #gh-cloud stop:nth-child(1){stop-color:#2e3852;stop-opacity:.55}
.gh[data-sky="dusk"] #gh-cloud stop:nth-child(2),.gh[data-sky="night"] #gh-cloud stop:nth-child(2){stop-color:#1a2136;stop-opacity:.2}

/* SERVICES — each photo is a piece of glass that seats into its taped outline as it comes into view */
.js .is-home .part .pf img,.js .is-home .part .pf-sheen{opacity:0;transform:translate(-12px,-16px) rotate(-1deg)}
.js .is-home .part.in .pf img,.js .is-home .part.in .pf-sheen{opacity:1;transform:none;transition:transform .9s var(--ease) .3s,opacity .5s var(--ease) .3s}
@media(hover:hover){.js .is-home .part.in:hover .pf img{transform:scale(1.035);transition:transform .9s var(--ease)}}

/* REVIEWS — taped up in turn: each note drops onto the board and settles, then its tape is pulled across */
.is-home .note:nth-child(1){--r0:-4.5deg;--dl:0s}
.is-home .note:nth-child(2){--r0:3deg;--dl:.22s}
.is-home .note:nth-child(3){--r0:-2deg;--dl:.44s}
.js .is-home .note.ro.in{animation:noteUp 1s cubic-bezier(.2,1.12,.35,1) var(--dl) backwards}
.js .is-home .note.ro.in .note-tape{animation:tapeOn .5s var(--ease) calc(var(--dl) + .7s) backwards}
@keyframes noteUp{from{opacity:0;transform:translateY(-38px) rotate(var(--r0))}}
@keyframes tapeOn{from{transform:rotate(-2.5deg) scaleX(0)}}

/* COSTS — pointing at a price isolates its line on the scale */
.is-home .prices td{transition:color .25s var(--ease)}
@media(hover:hover){
  .js .is-home .cost-table.in .dim{transition:clip-path .95s var(--ease) calc(.45s + var(--i) * .15s),opacity .3s var(--ease)}
  .is-home .prices tbody:has(tr:hover) .dim{opacity:.28}
  .is-home .prices tr.has-dim:hover + .dim-row .dim,.is-home .prices tr.dim-row:hover .dim{opacity:1}
  .is-home .prices tr.has-dim:hover td,.is-home .prices tr.has-dim:has(+ .dim-row:hover) td{color:var(--slate)}
}

/* FAQ — answers open and close smoothly (where the browser can animate to auto height) */
.is-home .qa .qa-a{transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s}
@starting-style{.is-home .qa[open] .qa-a{opacity:0;transform:translateY(-8px)}}
@supports (interpolate-size:allow-keywords){
  .is-home .faq-list{interpolate-size:allow-keywords}
  .is-home .qa::details-content{block-size:0;overflow-y:clip;transition:block-size .55s var(--ease),content-visibility .55s var(--ease) allow-discrete}
  .is-home .qa[open]::details-content{block-size:auto}
}

@media(prefers-reduced-motion:reduce){
  .gh[data-wx="rain"] .gp-run{animation:none}
  .js .is-home .note.ro.in,.js .is-home .note.ro.in .note-tape{animation:none}
}