:root{
  --ground:#F2F6FA; --surface:#FFFFFF; --sky:#DCE9F5; --sky-2:#C7DBEE;
  --ink:#0F2039; --text:#1B283B; --muted:#56657A; --line:#D3DDE8;
  --sun:#FFB23E; --sun-deep:#EE9A22; --on-sun:#0F2039; --sun-tint:rgba(255,178,62,.16);
  --blue:#2A62D6; --good:#1D8757;
  --band:#0F2039; --band-2:#172C4B; --band-text:#EAF1F8; --band-muted:#A9B8CC; --band-line:#2C4367;
  --shadow:0 1px 2px rgba(15,32,57,.06), 0 12px 32px rgba(15,32,57,.10);
  --r-sm:10px; --r-md:14px; --r-lg:22px;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --header-h:68px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1322; --surface:#111E33; --sky:#10213B; --sky-2:#18304F;
    --ink:#EEF3F9; --text:#D8E1ED; --muted:#98A7BB; --line:#22354F;
    --sun:#FFBA52; --sun-deep:#FFA629; --on-sun:#0F2039; --sun-tint:rgba(255,186,82,.14);
    --blue:#8AB2FF; --good:#52C790;
    --band:#060D19; --band-2:#0F1C31; --band-text:#EAF1F8; --band-muted:#9FB0C6; --band-line:#243A5A;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0A1322; --surface:#111E33; --sky:#10213B; --sky-2:#18304F;
  --ink:#EEF3F9; --text:#D8E1ED; --muted:#98A7BB; --line:#22354F;
  --sun:#FFBA52; --sun-deep:#FFA629; --on-sun:#0F2039; --sun-tint:rgba(255,186,82,.14);
  --blue:#8AB2FF; --good:#52C790;
  --band:#060D19; --band-2:#0F1C31; --band-text:#EAF1F8; --band-muted:#9FB0C6; --band-line:#243A5A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{background:var(--ground);color:var(--text);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.6rem,6.4vw,4.75rem);line-height:1;font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;font-weight:750;letter-spacing:-.025em}
h3{font-size:1.2rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font:500 .76rem/1.2 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding-block:clamp(64px,9vw,112px)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px);max-width:720px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:0 1.3rem;border-radius:999px;border:2px solid transparent;font:600 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sun{background:var(--sun);color:var(--on-sun)}
.btn-sun:hover{background:var(--sun-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{min-height:56px;padding:0 1.6rem;font-size:1.05rem}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.28rem/1 var(--f-display);letter-spacing:-.02em}
.logo small{display:block;font:500 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.logo-mark{width:36px;height:36px;flex:none}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:500;color:var(--muted)}
.main-nav a:hover,.main-nav a.is-current{color:var(--ink);background:var(--sky)}
.header-cta{display:flex;gap:10px;align-items:center}
.phone-link{font:500 .95rem/1 var(--f-mono);text-decoration:none;color:var(--ink);padding:8px 4px}
.menu-btn{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:999px;min-height:44px;padding:0 14px;color:var(--ink);font:600 .95rem var(--f-body);cursor:pointer}
.page-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--sun);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mobile-menu{border-top:1px solid var(--line);padding-block:8px 16px}
.mobile-menu a{display:block;padding:12px 4px;font:600 1.1rem var(--f-display);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:980px){
  .main-nav,.phone-link{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .header-cta{margin-left:0}
}
@media (max-width:520px){ .header-cta .btn{display:none} }

/* Hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--sun-tint) 62%);padding-inline:.04em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:6px 0 0;list-style:none;color:var(--text);font-weight:500}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;color:var(--good);flex:none}

.starter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);box-shadow:var(--shadow);display:grid;gap:18px}
.starter-head{display:grid;gap:6px}
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.job{position:relative;display:block}
.job input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.job span{display:grid;gap:2px;height:100%;min-height:66px;align-content:center;padding:10px 14px;border-radius:var(--r-md);border:1.5px solid var(--line);color:var(--ink);font-weight:650;line-height:1.25;transition:background-color .15s,border-color .15s}
.job small{font:400 .84rem/1.3 var(--f-body);color:var(--muted)}
.job:hover span{border-color:var(--muted)}
.job input:checked + span{border-color:var(--ink);background:var(--sun-tint);box-shadow:inset 0 0 0 1px var(--ink)}
.job input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.starter .btn{width:100%}
.starter-note{font-size:.92rem;color:var(--muted);text-align:center}
.starter-note a{color:var(--ink);font-weight:600}
@media (max-width:400px){ .jobs{grid-template-columns:1fr} }
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }

/* 3D story */
.story{position:relative;height:440vh;padding:0;background:linear-gradient(var(--ground),var(--sky) 9%,var(--sky) 91%,var(--ground))}
.stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-copy{position:absolute;z-index:2;left:max(16px,calc((100vw - 1180px)/2 + 40px));top:50%;transform:translateY(-50%);width:min(430px,40vw);display:grid;gap:22px}
.story-copy .eyebrow{color:var(--muted)}
.beats{position:relative;min-height:230px}
.beat{position:absolute;inset:0 0 auto 0;display:grid;gap:12px;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.beat.is-active{opacity:1;transform:none;pointer-events:auto}
.beat h2{font-size:clamp(2rem,3.6vw,3rem)}
.beat p{color:var(--text);font-size:1.08rem;max-width:40ch}
.beat .step{font:500 .8rem/1 var(--f-mono);color:var(--on-sun);background:var(--sun);border-radius:999px;padding:6px 10px;justify-self:start}
.rail{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.rail button{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:6px 0;color:var(--muted);font:500 .78rem var(--f-mono);cursor:pointer}
.rail button::before{content:"";width:28px;height:4px;border-radius:4px;background:var(--sky-2);transition:background .3s,width .3s}
.rail button[aria-current="step"]{color:var(--ink)}
.rail button[aria-current="step"]::before{background:var(--sun);width:44px}
.rail .rail-label{display:none}
.stage-hint{position:absolute;right:max(16px,calc((100vw - 1180px)/2 + 40px));bottom:22px;font:500 .74rem var(--f-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;z-index:2}
@media (max-width:760px){
  .story{height:400vh}
  .story-copy{left:12px;right:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:none;width:auto;gap:12px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .beats{min-height:214px}
  .beat h2{font-size:1.65rem}
  .beat p{font-size:.98rem}
  .stage-hint{display:none}
}
.story.no3d{height:auto;padding-block:clamp(64px,9vw,112px)}
.story.no3d .stage{position:static;height:auto;overflow:visible}
.story.no3d canvas,.story.no3d .rail,.story.no3d .stage-hint{display:none}
.story.no3d .story-copy{position:static;transform:none;width:auto;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);background:none;border:0;backdrop-filter:none}
.story.no3d .beats{min-height:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.story.no3d .beat{position:static;opacity:1;transform:none}
.story.no3d .beat h2{font-size:1.6rem}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.service{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:2px solid var(--ink)}
.service p{color:var(--muted)}
.tag{justify-self:start;font:500 .74rem/1 var(--f-mono);color:var(--ink);background:var(--sky);border-radius:999px;padding:6px 10px;margin-top:4px}
@media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;gap:28px} }

.ban{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:auto 1fr auto;gap:20px 28px;align-items:center;background:var(--sky);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.ban-badge{font:800 .95rem/1.05 var(--f-display);color:var(--on-sun);background:var(--sun);border-radius:14px;padding:14px 12px;text-align:center;letter-spacing:-.01em}
.ban h3{margin-bottom:6px}
.ban p{color:var(--text);max-width:62ch}
@media (max-width:760px){ .ban{grid-template-columns:1fr} .ban-badge{justify-self:start} }

/* How we haul */
.haul{background:var(--surface);border-block:1px solid var(--line)}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.method{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--ground);border:1px solid var(--line);color:var(--text)}
.method .art{width:100%;max-width:320px;height:auto;display:block;margin-bottom:6px}
.method p{color:var(--muted)}
.method ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.method li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.method li svg{width:18px;height:18px;margin-top:4px;color:var(--good)}
.method.is-main{background:var(--band);border-color:var(--band);color:var(--band-text)}
.method.is-main h3{color:var(--band-text)}
.method.is-main p,.method.is-main .eyebrow{color:var(--band-muted)}
.method.is-main li svg{color:var(--sun)}
.estimates{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
.notes{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.notes li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--text)}
.notes svg{width:20px;height:20px;color:var(--good);margin-top:3px}
@media (max-width:800px){ .methods,.estimates{grid-template-columns:1fr} }

/* Service area */
.area-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center}
.map-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;max-width:100%}
.map-box svg{width:100%;height:auto;display:block}
.map-ring{fill:none;stroke:var(--line);stroke-dasharray:4 5}
.map-ring-label{font:500 9px var(--f-mono);fill:var(--muted)}
.town-dot{fill:var(--ink)}
.town-label{font:500 10.5px var(--f-body);fill:var(--text)}
.town.is-hit .town-dot{fill:var(--sun);stroke:var(--ink);stroke-width:2}
.town.is-hit .town-label{font-weight:700;fill:var(--ink)}
.home-dot{fill:var(--sun);stroke:var(--ink);stroke-width:2.5}
.home-label{font:800 13px var(--f-display);fill:var(--ink)}
.checker{display:grid;gap:10px;margin-top:28px}
.checker label{font-weight:600;color:var(--ink)}
.checker-row{display:flex;gap:10px;flex-wrap:wrap}
.field{min-height:50px;padding:0 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:500 1rem var(--f-body);width:100%}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.checker-row .field{flex:1 1 220px;width:auto}
.checker-result{min-height:1.6em;font-weight:500}
.checker-result.ok{color:var(--good)}
.checker-result.maybe{color:var(--text)}
.town-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.town-list li{font-size:.9rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--text)}
@media (max-width:900px){ .area-grid{grid-template-columns:1fr} }

/* Quote (dusk band) */
.quote{background:var(--band);color:var(--band-text)}
.quote h2,.quote h3{color:var(--band-text)}
.quote .eyebrow,.quote .lede{color:var(--band-muted)}
.quote-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:start}
.quote-side{display:grid;gap:18px;position:sticky;top:calc(var(--header-h) + 32px)}
.contact-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.contact-list a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--band-text);padding:14px 16px;border:1px solid var(--band-line);border-radius:var(--r-md);transition:border-color .15s}
.contact-list a:hover{border-color:var(--sun)}
.contact-list svg{width:22px;height:22px;color:var(--sun);flex:none}
.contact-list b{display:block;font-weight:600}
.contact-list span{font:500 .88rem var(--f-mono);color:var(--band-muted)}
.qform{background:var(--band-2);border:1px solid var(--band-line);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,36px);display:grid;gap:24px}
.q-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;margin:0;padding:0}
.q-progress li{display:grid;gap:8px;font:500 .74rem var(--f-mono);color:var(--band-muted)}
.q-progress li::before{content:"";height:4px;border-radius:4px;background:var(--band-line)}
.q-progress li.done::before,.q-progress li.now::before{background:var(--sun)}
.q-progress li.now{color:var(--band-text)}
.q-step{border:0;margin:0;padding:0;display:grid;gap:18px;min-width:0}
.q-step legend{font:750 1.5rem/1.15 var(--f-display);color:var(--band-text);padding:0;margin-bottom:4px;letter-spacing:-.015em}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--band-line);color:var(--band-text);font-weight:500;transition:background .15s,border-color .15s}
.chip input:checked + span{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}
.chip input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.q-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.q-field{display:grid;gap:8px;min-width:0}
.q-field label,.q-label{font-weight:600;font-size:.95rem;color:var(--band-text)}
.q-field .hint{font-size:.85rem;color:var(--band-muted)}
.qform .field{background:var(--band);border-color:var(--band-line);color:var(--band-text)}
.qform textarea.field{min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.qform select.field{appearance:auto}
.q-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.quote .btn-ghost{color:var(--band-text);border-color:var(--band-line)}
.quote .btn-ghost:hover{border-color:var(--band-text)}
.q-error{color:#FFB4A8;font-weight:500;min-height:1.4em}
.q-review{display:grid;gap:10px;margin:0;padding:16px;border-radius:var(--r-md);background:var(--band);border:1px dashed var(--band-line)}
.q-review div{display:grid;grid-template-columns:110px 1fr;gap:12px}
.q-review dt{font:500 .78rem var(--f-mono);color:var(--band-muted);padding-top:3px}
.q-review dd{margin:0;color:var(--band-text)}
.q-done{display:grid;gap:14px;justify-items:start}
.q-done .check{width:56px;height:56px;border-radius:50%;background:var(--sun);color:var(--on-sun);display:grid;place-items:center}
.q-done .check svg{width:28px;height:28px}
@media (max-width:900px){ .quote-grid{grid-template-columns:1fr} .quote-side{position:static} }
@media (max-width:560px){ .q-row{grid-template-columns:1fr} .q-review div{grid-template-columns:1fr;gap:2px} }

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,80px);align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:20px;font:650 1.12rem/1.35 var(--f-display);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-4px);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-list .answer{padding-bottom:22px;color:var(--text);max-width:64ch;display:grid;gap:10px}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} }

/* Final CTA + footer */
.final{padding-block:clamp(56px,8vw,96px)}
.final-inner{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.final h2{max-width:16ch}
.site-footer{background:var(--band);color:var(--band-muted);padding-block:48px 40px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.site-footer .logo{color:var(--band-text)}
.site-footer .logo small{color:var(--band-muted)}
.site-footer h3{font:500 .74rem var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--band-muted);margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--band-text);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-base{margin-top:40px;padding-top:20px;border-top:1px solid var(--band-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-grid > :first-child{grid-column:1 / -1} }

/* Mobile action bar */
.mobile-bar{display:none}
@media (max-width:760px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .mobile-bar .btn{min-height:46px;padding:0 10px;font-size:.95rem}
  .site-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =====================================================================
   Motion. Everything animated lives under html.motion, which a tiny
   script at the top of <body> adds unless the visitor prefers reduced
   motion or the URL has ?motion=off. Without it the page is fully static.
   ===================================================================== */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--dur-fast:180ms;--dur:420ms;--dur-slow:700ms}

@keyframes rv-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rv-pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-stamp{from{opacity:0;transform:scale(1.35) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Scroll-in reveal ---- */
.motion [data-reveal].pre{opacity:0}
.motion [data-reveal="up"].is-in{animation:rv-up var(--dur-slow) var(--ease-out) calc(var(--i,0) * 70ms) both}
.motion [data-reveal="pop"].is-in{animation:rv-pop var(--dur-slow) var(--ease-out) calc(var(--i,0) * 70ms) both}
.motion [data-reveal="stamp"].is-in{animation:rv-stamp .65s var(--ease-spring) calc(var(--i,0) * 70ms + 250ms) both}
.motion [data-reveal="map"].pre,.motion [data-reveal="art"].pre,.motion [data-reveal="list"].pre{opacity:1}

/* checklists: items rise, then their checkmarks draw */
.motion [data-reveal="list"] li svg{stroke-dasharray:1}
.motion [data-reveal="list"].pre li{opacity:0}
.motion [data-reveal="list"].is-in li{animation:rv-up .5s var(--ease-out) both}
.motion [data-reveal="list"].is-in li svg{animation:draw-in .5s var(--ease-out) .2s both}
.motion [data-reveal="list"].is-in li:nth-child(2){animation-delay:.09s}
.motion [data-reveal="list"].is-in li:nth-child(2) svg{animation-delay:.29s}
.motion [data-reveal="list"].is-in li:nth-child(3){animation-delay:.18s}
.motion [data-reveal="list"].is-in li:nth-child(3) svg{animation-delay:.38s}
.motion [data-reveal="list"].is-in li:nth-child(4){animation-delay:.27s}
.motion [data-reveal="list"].is-in li:nth-child(4) svg{animation-delay:.47s}

/* ---- Buttons & links ---- */
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}
.motion .btn{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color .15s ease,border-color .15s ease}
.motion .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(15,32,57,.35)}
.motion .btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.motion .btn svg{transition:transform var(--dur-fast) var(--ease-out)}
.motion .btn:hover svg:has(use[href="#i-arrow"]){transform:translateX(4px)}
.motion .btn:hover svg:has(use[href="#i-phone"]){animation:wiggle .5s ease}
.motion .contact-list a{transition:border-color .15s ease,transform var(--dur-fast) var(--ease-out)}
.motion .contact-list a:hover{transform:translateX(3px)}

/* ---- Header ---- */
@keyframes sun-rise{from{transform:translateY(11px)}to{transform:none}}
@keyframes sun-bob{0%,100%{transform:none}40%{transform:translateY(4px)}}
.motion .site-header{transition:box-shadow .3s ease}
.motion .site-header.is-scrolled{box-shadow:0 10px 24px -14px rgba(15,32,57,.4)}
.motion .logo .lm-sun{animation:sun-rise .8s var(--ease-out) .1s both}
.motion .logo .lm-rays{animation:rv-fade .5s ease .6s both}
.motion .logo:hover .lm-sun{animation:sun-bob .7s var(--ease-spring)}
.motion .main-nav{position:relative;isolation:isolate}
.motion .main-nav a.is-current{background:transparent}
.nav-pill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--sky);z-index:-1;opacity:0;pointer-events:none;transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .25s ease}
.nav-pill.is-on{opacity:1}

/* ---- Hero ---- */
@keyframes hl-sweep{to{background-size:100% 100%}}
@keyframes tile-in{from{transform:translateY(8px) scale(.97)}to{transform:none}}
.motion .hero h1 .hl{background-repeat:no-repeat;background-size:0% 100%;animation:hl-sweep .8s var(--ease-out) .35s forwards}
.motion .trust svg{stroke-dasharray:1;animation:draw-in .5s var(--ease-out) .6s both}
.motion .trust li:nth-child(2) svg{animation-delay:.75s}
.motion .trust li:nth-child(3) svg{animation-delay:.9s}
.motion .job{animation:tile-in .55s var(--ease-out) both}
.motion .job:nth-of-type(1){animation-delay:.15s}
.motion .job:nth-of-type(2){animation-delay:.21s}
.motion .job:nth-of-type(3){animation-delay:.27s}
.motion .job:nth-of-type(4){animation-delay:.33s}
.motion .job:nth-of-type(5){animation-delay:.39s}
.motion .job:nth-of-type(6){animation-delay:.45s}
.motion .job span{transition:transform var(--dur-fast) var(--ease-out),background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.motion .job:hover span{transform:translateY(-2px)}
/* selected-tile check badge (static without motion, springs in with it) */
.job span{position:relative;padding-right:36px}
.job span::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%230F2039' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;transform:scale(0);transition:transform .3s var(--ease-spring)}
.job input:checked + span::after{transform:scale(1)}

/* ---- 3D story copy ---- */
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.motion .story:not(.no3d) .beat{transform:translateY(24px);transition:opacity .45s ease,transform .55s var(--ease-out)}
.motion .story:not(.no3d) .beat.is-past{transform:translateY(-24px)}
.motion .story:not(.no3d) .beat.is-active{transform:none}
.motion .story:not(.no3d) .beat > *{transition:opacity .45s ease,transform .5s var(--ease-out)}
.motion .story:not(.no3d) .beat:not(.is-active) > *{opacity:0;transform:translateY(8px)}
.motion .story:not(.no3d) .beat.is-active > :nth-child(2){transition-delay:.06s}
.motion .story:not(.no3d) .beat.is-active > :nth-child(3){transition-delay:.12s}
.motion .rail button::before,
.motion .rail button[aria-current="step"]::before{background:linear-gradient(var(--sun),var(--sun)) 0 0 / var(--fill,0%) 100% no-repeat,var(--sky-2);transition:width .35s var(--ease-out)}
.motion .rail button::before{width:34px}
.motion .rail button[aria-current="step"]::before{width:54px}
.motion .story:not(.no3d) .stage-hint{animation:hint-bob 1.8s ease-in-out infinite;transition:opacity .4s ease}
.motion .story.is-moving .stage-hint{opacity:0}

/* ---- Services ---- */
.motion .service{position:relative;border-top-color:transparent}
.motion .service::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform-origin:0 50%}
.motion .service.pre::before{transform:scaleX(0)}
.motion .service.is-in::before{animation:line-draw .7s var(--ease-out) calc(var(--i,0) * 70ms + 80ms) both}
.motion .service.is-in .tag{animation:rv-fade .5s ease calc(var(--i,0) * 70ms + 380ms) both}
.motion .service h3{transition:transform var(--dur-fast) var(--ease-out)}
.motion .service:hover h3{transform:translateX(3px)}
.motion .tag{transition:background-color .2s ease,color .2s ease}
.motion .service:hover .tag{background:var(--sun);color:var(--on-sun)}

/* ---- How we haul artwork ---- */
@keyframes drop-in{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes rim-squish{0%,100%{transform:none}35%{transform:scaleY(.96)}70%{transform:scaleY(1.01)}}
@keyframes roll-in{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(-330deg)}to{transform:none}}
@keyframes load-bounce{0%,100%{transform:none}40%{transform:translateY(-8px)}70%{transform:translateY(1px)}}
.motion .art .drop > g,.motion .art .dump-body,.motion .art .load{transform-box:fill-box;transform-origin:50% 100%}
.motion .art .wheel{transform-box:fill-box;transform-origin:50% 50%}
.motion .art.pre .drop > g,.motion .art.pre .truck{opacity:0}
.motion .art.is-in .drop > g{animation:drop-in .7s var(--ease-spring) .3s both}
.motion .art.is-in .drop > g:nth-child(2){animation-delay:.45s}
.motion .art.is-in .drop > g:nth-child(3){animation-delay:.6s}
.motion .art.is-in .dump-body{animation:rim-squish .45s ease 1.1s both}
.motion .art.is-in .truck{animation:roll-in .9s var(--ease-out) .25s both}
.motion .art.is-in .wheel{animation:spin .9s var(--ease-out) .25s both}
.motion .art.is-in .load{animation:load-bounce .55s ease-out 1.1s both}

/* ---- Service area map ---- */
@keyframes dot-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes ring-in{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes home-pulse{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.motion #area-map circle{transform-box:fill-box;transform-origin:50% 50%}
.motion .map-box.pre .town,.motion .map-box.pre .map-ring,.motion .map-box.pre .map-ring-label{opacity:0}
.motion .map-box.is-in .map-ring{animation:ring-in 1s var(--ease-out) both}
.motion .map-box.is-in circle.map-ring:nth-of-type(2){animation-delay:.15s}
.motion .map-box.is-in .map-ring-label{animation:rv-fade .5s ease .6s both}
.motion .map-box.is-in .town circle{animation:dot-pop .5s var(--ease-spring) calc(var(--d,0) * 1ms + 200ms) both}
.motion .map-box.is-in .town text{animation:rv-fade .45s ease calc(var(--d,0) * 1ms + 350ms) both}
.home-pulse{fill:none;stroke:var(--sun);stroke-width:2;animation:home-pulse 2.6s ease-out infinite}
.route{fill:none;stroke:var(--sun);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-in .8s var(--ease-out) forwards}
.town-list li{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.town-list li.is-hit{background:var(--sun);border-color:var(--sun);color:var(--on-sun)}

/* ---- Estimate form ---- */
@keyframes chip-pop{from{transform:scale(.92)}to{transform:none}}
@keyframes check-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes ring-burst{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
.motion .q-progress li::before{background-color:var(--band-line);background-image:linear-gradient(var(--sun),var(--sun));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s var(--ease-out)}
.motion .q-progress li.done::before,.motion .q-progress li.now::before{background-color:var(--band-line);background-size:100% 100%}
.motion .chip span{transition:background-color .15s ease,border-color .15s ease,transform var(--dur-fast) var(--ease-out)}
.motion .chip:hover span{transform:translateY(-1px)}
.motion .chip input:checked + span{animation:chip-pop .3s var(--ease-spring)}
.motion .q-done .check{position:relative;animation:check-pop .5s var(--ease-spring) both}
.motion .q-done .check::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sun);animation:ring-burst .8s ease-out .15s both}
.motion .q-done .check svg{stroke-dasharray:1;animation:draw-in .45s var(--ease-out) .3s both}
.motion .q-done h3{animation:rv-up .45s var(--ease-out) .12s both}
.motion .q-done #q-done-msg{animation:rv-up .45s var(--ease-out) .2s both}

/* ---- FAQ ---- */
.motion .faq-list details.is-closing summary::after{transform:rotate(45deg) translateY(-4px)}
.motion .faq-list summary::after{transition:transform .25s var(--ease-out)}

/* ---- Final call to action ---- */
.final{position:relative;overflow:hidden}
.final-inner{position:relative;z-index:1}
.final-sun{position:absolute;right:max(-40px,calc((100vw - 1180px) / 2 - 40px));bottom:0;width:min(480px,80vw);height:auto;pointer-events:none;transform:translateY(calc((1 - var(--rise,1)) * 60%))}

/* ---- Phone action bar ---- */
@media (max-width:760px){
  .motion .mobile-bar{transform:translateY(115%);transition:transform .4s var(--ease-out)}
  .motion .mobile-bar.is-shown{transform:none}
}

/* =====================================================================
   Multi-page components: page hero, breadcrumbs, content blocks, guides.
   Built on the same tokens as the homepage.
   ===================================================================== */

/* ---- Homepage additions ---- */
.h1-eyebrow{display:block;font:500 .76rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.service h3 a{color:inherit;text-decoration:none}
.service h3 a::after{content:"";position:absolute;inset:0}
.service{position:relative}
.service h3 a:focus-visible{outline:none}
.service:has(a:focus-visible){outline:3px solid var(--blue);outline-offset:6px;border-radius:4px}
.town-list a{color:inherit;text-decoration:none;display:block}
.town-list li:has(a){border-color:var(--ink);font-weight:600}
.town-list li:has(a):hover{background:var(--sky)}
.town-list li:has(a){padding:0}
.town-list li a{padding:5px 11px}
.area-more{margin-top:16px;font-weight:600}
.area-more a,.inline-link{color:var(--ink);text-underline-offset:3px}
#area-map .town-link{cursor:pointer}
#area-map .town-link:hover .town-label{fill:var(--ink);font-weight:700}
#area-map .town-link:hover .town-dot{fill:var(--sun)}
.method-link{justify-self:start;margin-top:4px;font-weight:600;color:inherit;text-underline-offset:3px}
.form-privacy{font-size:.85rem;color:var(--band-muted);margin:0}
.form-privacy a{color:var(--band-text)}
.footer-grid{grid-template-columns:1.5fr repeat(3,1fr)}
.footer-brand{display:grid;gap:14px;align-content:start}
.footer-brand p{max-width:36ch}
.footer-contact{margin-top:4px}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }

/* ---- Page hero ---- */
.page-hero{padding-block:clamp(28px,5vw,56px) clamp(48px,7vw,80px);background:linear-gradient(var(--ground),var(--sky) 180%)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:end}
.page-hero-grid.no-side{grid-template-columns:minmax(0,1fr)}
.page-hero .hero-copy{gap:18px}
.page-hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.02}
.page-hero .lede{max-width:60ch}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font:500 .8rem/1.4 var(--f-mono);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.5vw,26px);box-shadow:var(--shadow);display:grid;gap:14px}
.glance{margin:0;display:grid;gap:12px}
.glance div{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.glance div:last-child{border-bottom:0;padding-bottom:0}
.glance dt{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin:0;font-weight:600;color:var(--ink)}
.toc{margin:0;padding-left:1.2em;display:grid;gap:8px}
.toc a{color:var(--ink);text-underline-offset:3px}
.byline{font-size:.85rem;color:var(--muted);margin:0}
@media (max-width:860px){ .page-hero-grid{grid-template-columns:1fr;align-items:start} }

/* ---- Content blocks ---- */
.block{padding-block:clamp(48px,7vw,88px)}
.block.alt{background:var(--surface);border-block:1px solid var(--line)}
.block-head{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px);max-width:720px}
.block-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
.split > .block-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:860px){ .split{grid-template-columns:1fr} .split > .block-head{position:static} }

.prose{max-width:68ch;display:grid;gap:16px;color:var(--text)}
.prose h3{margin-top:12px;font-size:1.25rem}
.prose p,.prose ul,.prose ol{margin:0}
.prose ul:not([class]),.prose ol:not([class]){padding-left:1.25em;display:grid;gap:6px}
.prose a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong,.prose b{color:var(--ink)}

.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{position:relative;padding-left:30px}
.check-list li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--sun-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%231D8757' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:grid;gap:8px;align-content:start}
.block.alt .card{background:var(--ground)}
.block:not(.alt) .card{background:var(--surface)}
.card p{color:var(--muted)}
.card a{color:var(--ink);font-weight:600;text-underline-offset:3px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:step}
.steps li{counter-increment:step;display:grid;gap:8px;align-content:start;padding-top:16px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(step,decimal-leading-zero);font:500 .8rem/1 var(--f-mono);color:var(--muted)}
.steps p{color:var(--muted)}

.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fit-box{border-radius:var(--r-md);padding:clamp(18px,2.5vw,26px);display:grid;gap:12px;align-content:start}
.fit-box ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.fit-yes{background:var(--band);color:var(--band-text)}
.fit-yes h3{color:var(--band-text)}
.fit-yes a{color:var(--band-text)}
.fit-no{background:var(--ground);border:1px solid var(--line)}
.block:not(.alt) .fit-no{background:var(--surface)}
@media (max-width:760px){ .fit{grid-template-columns:1fr} }

.facts{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts > div{display:grid;grid-template-columns:minmax(140px,.4fr) 1fr;gap:6px 20px;padding-block:14px;border-bottom:1px solid var(--line)}
.facts dt{font-weight:650;color:var(--ink)}
.facts dd{margin:0;color:var(--text)}
.facts a{color:var(--ink);text-underline-offset:3px}
@media (max-width:560px){ .facts > div{grid-template-columns:1fr} }

.note{background:var(--sky);border-radius:var(--r-md);padding:clamp(16px,2.5vw,24px);display:grid;gap:8px}
.note p{color:var(--text)}

.table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.compare{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare thead th{font:500 .74rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--ground)}
.compare tbody th{color:var(--ink);font-weight:650}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tr.is-us th,.compare tr.is-us td{background:var(--sun-tint)}

.split .map-box{max-width:520px}

.sources{max-width:780px;display:grid;gap:12px;font-size:.92rem;color:var(--muted)}
.sources h2{font-size:1.3rem}
.sources ol{margin:0;padding-left:1.3em;display:grid;gap:6px}
.sources a{color:var(--ink);text-underline-offset:3px;overflow-wrap:anywhere}
.sources .checked{margin:0}

/* ---- Related links ---- */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.related-card{display:grid;gap:6px;align-content:start;padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--ground);color:var(--text);text-decoration:none;transition:border-color .15s ease,transform var(--dur-fast) var(--ease-out)}
.related-card strong{font:700 1.1rem/1.25 var(--f-display);color:var(--ink)}
.related-card span:last-child{font-size:.92rem;color:var(--muted)}
.related-card:hover{border-color:var(--ink)}
.motion .related-card:hover{transform:translateY(-2px)}

/* ---- Hubs ---- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.town-index{columns:3 180px;column-gap:24px;list-style:none;margin:0;padding:0}
.town-index li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.town-index a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.town-index span{color:var(--muted);font-size:.9rem}

/* heading that looks like an h3 but keeps the outline correct */
.h3{font-size:1.2rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}

/* ---- Phones & tablets: skip live blur effects ----
   Blurring what's behind the header, phone bar, and 3D step card has to be redrawn on every
   scroll frame (and every 3D frame), which is the main source of jank on mid-range phones.
   Solid backgrounds look nearly identical and cost nothing. */
@media (max-width: 760px), (pointer: coarse) {
  .site-header { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-bar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .story-copy { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 760px) {
  .story-copy { background: var(--surface); box-shadow: 0 8px 24px -12px rgba(15,32,57,.35); }
}