/* Exotic District - design system v3 "Refine Codex". Source of truth: research/28-design-system-v3 (markdown)
   (tokens section 1, components section 2, order section 5). ONE stylesheet for every page.
   Night surfaces (header, hero, visit band, footer, action bar) + paper (everything else).
   Colour grammar: orange = Get a free quote, outline = Call, green = WhatsApp / Text.
   Order: 1 tokens+reset · 2 type+utilities · 3 buttons+chips+status · 4 header · 5 hero · 6 bands+cards
          · 7 forms · 8 prose+guides · 9 footer+action bar · 10 print+motion+breakpoints · honeypot. */

/* ===== 1. tokens + reset ===== */
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-latin-var.woff2?v=b4295101") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2605,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Roboto"),local("Helvetica Neue");size-adjust:103%;ascent-override:106.6%;descent-override:30%;line-gap-override:0%}
:root{
  --night:#121018;--night-2:#1b1826;--night-line:rgba(255,255,255,.12);
  --ink:#211c2b;--muted:#5a5466;--paper:#f8f6f3;--card:#fffefd;--tint:#f2ecf8;--line:#e1dce4;
  --orange:#f6a63e;--orange-ink:#1a1206;--orange-deep:#d98a1e;
  --violet:#6734a8;--violet-deep:#55299a;--violet-soft:#d3b2ff;
  --open:#4ddd8b;--open-ink:#0f6b3a;--open-soft:#e2f8ea;
  --amber:#ffb347;--amber-ink:#8a4b06;--amber-soft:#fff1dc;
  --wa:#0f7a40;--wa-deep:#0c6535;--wa-bg:#153d28;--wa-ink:#7ef0a6;
  --shadow:0 1px 2px rgba(18,16,24,.06),0 6px 20px rgba(18,16,24,.06);
  --glow-o:0 0 18px rgba(246,166,62,.45);--glow-g:0 0 18px rgba(77,221,139,.45);
  --pick-bg:var(--tint);
  --r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;--r-btn:12px;
  --err:#b42318;--err-bg:#fef1f0;
  --f-xs:.8125rem;--f-sm:.9375rem;--f-md:1.0625rem;--f-lg:1.25rem;--f-xl:1.5rem;--f-2xl:2rem;--f-3xl:2.5rem;--f-num:2.25rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --on-night-2:#cfc8da;--lead-night:#e9e4f0;
  --f:"Manrope","Manrope Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:64px;
  --measure:720px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:500 var(--f-md)/1.5 var(--f);overflow-x:hidden}
main{display:block}
img,svg,video,iframe{max-width:100%}
svg{display:block}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--f-3xl);font-weight:800}
h2{font-size:var(--f-2xl);font-weight:800}
h3{font-size:var(--f-lg);font-weight:800;line-height:1.25}
h4{font-size:var(--f-md);font-weight:800}
p,ul,ol,dl{margin:0}
b,strong{font-weight:800}
small{font-size:var(--f-xs)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
a{color:var(--violet);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--violet-deep)}
[hidden]{display:none!important}
::selection{background:var(--violet);color:#fff}
/* focus ring: orange everywhere (reads on night); the 2px ink ring in the offset gap keeps it visible on paper */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
input,select,textarea,button{font:inherit;color:inherit}

/* ===== 2. type + utilities ===== */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--sp-4)}
.wrap-narrow{max-width:1160px}
.wrap-narrow>*{max-width:var(--measure)}
.form-wrap{max-width:820px}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon.star{fill:currentColor;stroke:none}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--orange);color:var(--orange-ink);padding:10px 16px;border-radius:var(--r-sm);font-weight:800;z-index:100;text-decoration:none}
.skip-link:focus{left:8px}
.print-only{display:none}
.note{font-size:var(--f-sm);color:var(--muted);margin-top:var(--sp-3)}
.note+.note{margin-top:var(--sp-1)}
.hint{display:block;font-size:var(--f-xs);color:var(--muted);font-weight:500}
.optional{font-size:var(--f-sm);font-weight:500;color:var(--muted)}
.lead{font-size:var(--f-lg);line-height:1.5}
.eyebrow{font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--violet-soft);margin:0}
.section{padding:var(--sp-7) 0}
.section-alt{background:var(--tint);border-block:1px solid var(--line)}
.section-alt+.section-alt{border-top:0}
.on-night{background:var(--night);color:#fff}
.on-night h2,.on-night h3{color:#fff}
.on-night a:not(.btn){color:#fff}
.on-night .note,.on-night .sec-head p,.on-night p:not([class]){color:var(--on-night-2)}
.sec-head{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-5);max-width:var(--measure)}
.sec-head p{color:var(--muted)}
.sec-head .note{margin-top:0}
.section>.wrap>p:not([class]){max-width:680px}
.section>.wrap>p:not([class])+p:not([class]){margin-top:var(--sp-3)}
.steps+p,.steps+.note{margin-top:var(--sp-5)}
.related{margin-top:var(--sp-5);font-weight:700;line-height:2;color:var(--ink)}
.related a{white-space:nowrap}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
/* two-up button grid on phones (contact "four ways"), inline row from 700 */
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}
.btn-grid .btn{width:100%}
.btn-grid>.btn-line{grid-column:1/-1}
@media (min-width:700px){.btn-grid{display:flex;flex-wrap:wrap}.btn-grid .btn{width:auto}}
@media (max-width:399px){html[lang="es"] .btn-grid{grid-template-columns:1fr}} /* small phones: the longer Spanish labels stack instead of wrapping */

/* ===== 3. buttons + chips + status ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:var(--r-btn);font-weight:700;font-size:var(--f-md);line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn .icon{width:22px;height:22px}
.btn-primary{background:var(--orange);color:var(--orange-ink)}
.btn-primary:hover{background:var(--orange-deep);color:var(--orange-ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-deep);color:#fff}
/* the same three buttons on a night surface */
.hero .btn-line,.on-night .btn-line,.visit .btn-line,.site-header .btn-line,.site-footer .btn-line{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-line:hover,.on-night .btn-line:hover,.visit .btn-line:hover,.site-header .btn-line:hover,.site-footer .btn-line:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.hero .btn-wa,.on-night .btn-wa,.visit .btn-wa,.site-header .btn-wa{background:var(--wa-bg);color:var(--wa-ink);border-color:#1f5c3b}
.hero .btn-wa:hover,.on-night .btn-wa:hover,.visit .btn-wa:hover,.site-header .btn-wa:hover{background:#1a4a31;color:var(--wa-ink)}
.btn-sm{min-height:44px;padding:8px 14px;font-size:var(--f-sm)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
/* chips: problem chips (links), model chips (links) and form chip options (labels) share one look */
.problem-chips-label{font-weight:700;margin:var(--sp-5) 0 var(--sp-2)}
.problem-chips,.model-chips,.chip-options,.jump-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.problem-chips{margin-top:var(--sp-2)}
.chip,.chip-option,.jump-chips a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--f-sm);line-height:1.2;cursor:pointer;transition:border-color .15s,background .15s}
.chip .icon,.chip-option .icon{width:18px;height:18px}
.chip:hover,.chip-option:hover,.jump-chips a:hover{border-color:var(--violet);color:var(--violet)}
.chip[aria-current="page"]{background:var(--violet);border-color:var(--violet);color:#fff}
.chip-option{border-width:2px;font-weight:700}
.chip-option .icon{display:none}
.chip-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip-option.is-checked,.chip-option:has(input:checked){background:var(--violet);border-color:var(--violet);color:#fff}
.chip-option.is-checked .icon,.chip-option:has(input:checked) .icon{display:block}
.chip-option:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
/* plain-text model chips on the pages that still list models without links */
.model-chips li:not(:has(>a)){padding:8px 12px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);font-weight:700;font-size:var(--f-sm);line-height:1.3}
.section .jump-chips{margin-bottom:var(--sp-5)} /* FAQ + guide pages: space between the jump row and the first H2 */
.hero .jump-chips{margin-top:var(--sp-4)}
.hero .jump-chips a{background:transparent;border-color:var(--night-line);color:#fff}
.hero .jump-chips a:hover{border-color:rgba(255,255,255,.5);color:#fff}
/* live open/closed pill (site.js writes data-state) */
.status{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 10px;border-radius:var(--r-pill);border:1px solid rgba(77,221,139,.45);background:rgba(77,221,139,.08);color:#fff;font-weight:700;font-size:var(--f-sm);line-height:1.25;margin:0;max-width:100%}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--open);box-shadow:0 0 0 4px rgba(77,221,139,.18);flex:none}
.status[data-state="soon"] .status-dot{background:var(--orange);box-shadow:0 0 0 4px rgba(246,166,62,.18)}
.status[data-state="closed"]{border-color:rgba(255,179,71,.45);background:rgba(255,179,71,.08)}
.status[data-state="closed"] .status-dot{background:var(--amber);box-shadow:0 0 0 4px rgba(255,179,71,.18)}
.status.on-paper{background:var(--open-soft);color:var(--open-ink);border-color:transparent}
.status.on-paper .status-dot{background:var(--open-ink);box-shadow:none}
.status.on-paper[data-state="closed"]{background:var(--amber-soft);color:var(--amber-ink)}
.status.on-paper[data-state="closed"] .status-dot{background:var(--amber-ink)}

/* ===== 4. header + nav + dropdowns (site.js: .nav-open, .is-scrolled, .nav-toggle, .nav-drop-btn, panels by id) ===== */
.site-header{background:var(--night);color:#fff;border-bottom:1px solid var(--night-line);position:sticky;top:0;z-index:40}
.site-header.is-scrolled{box-shadow:0 2px 12px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--header-h)}
.brand{display:flex;align-items:center;min-width:0;margin-right:auto;text-decoration:none;color:#fff}
.brand-logo{display:block;height:44px;width:auto}
.lang-link{color:#fff;font-weight:700;font-size:var(--f-sm);text-decoration:none;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-pill);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;flex:none}
.lang-link:hover{border-color:#fff;color:#fff;text-decoration:none}
.header-actions{display:none;align-items:center;gap:var(--sp-2);flex:0 1 auto;min-width:0}
.header-call,.header-quote{white-space:nowrap}
.header-call .icon{width:18px;height:18px}
.hc-num{white-space:nowrap}
.nav-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--r-btn);background:#fff;color:var(--ink);border:0;font:800 var(--f-sm) var(--f);cursor:pointer;flex:none}
.nav-toggle .icon{width:20px;height:20px}
.nav-toggle .i-close{display:none}
.site-header.nav-open .nav-toggle .i-open{display:none}
.site-header.nav-open .nav-toggle .i-close{display:block}
/* phones and tablets: the menu drops down as a full-width night panel */
.site-nav{display:none}
.site-header.nav-open .site-nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid var(--night-line);padding:4px 16px 20px;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow:auto;overscroll-behavior:contain}
.site-nav>.wrap{padding:0}
.nav-list{list-style:none;margin:0 auto;padding:0;display:grid;max-width:1128px}
.nav-list>li>a,.nav-drop-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:52px;color:#fff;text-decoration:none;font:800 var(--f-md) var(--f);background:none;border:0;border-bottom:1px solid var(--night-line);cursor:pointer;padding:0;text-align:left}
.nav-drop-btn .icon{width:20px;height:20px}
.nav-drop-btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.nav-list [aria-current="page"]{color:var(--orange)}
.nav-list .lang-link{border:0;border-bottom:1px solid var(--night-line);border-radius:0;padding:0;min-height:52px;font-size:var(--f-md)}
.drop-panel{padding:8px 0 12px;display:grid;gap:12px}
.drop-panel h2,.drop-title{font-size:var(--f-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);margin:8px 0 2px}
.drop-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.drop-list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;color:#fff;text-decoration:none;font-weight:700;font-size:var(--f-md)}
.drop-list a:hover{color:#fff;text-decoration:underline}
.drop-list .icon{width:20px;height:20px;color:var(--orange)}
.drop-list small{display:block;color:var(--on-night-2);font-size:var(--f-xs);font-weight:600}
.drop-list [aria-current="page"]{color:var(--orange)}
.drop-foot{grid-column:1/-1;margin:4px 0 0}
.drop-foot a{color:#fff;font-weight:800;display:inline-flex;align-items:center;min-height:44px}

/* ===== 5. hero variants + stat tiles + art ===== */
.hero{background:var(--night);color:#fff;padding:var(--sp-5) 0 var(--sp-6);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(103,52,168,.45),transparent 70%);pointer-events:none}
.hero>.wrap{position:relative;display:grid;gap:var(--sp-5)}
.hero>.wrap>*{min-width:0}
.hero>.wrap>.status,.hero-top>.status{justify-self:start}
.hero a:not(.btn){color:#fff}
.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:var(--sp-4)}
.hero-top>.eyebrow{flex-basis:100%} /* the kicker always gets its own line under the pill, above the H1 (also at desktop) */
.hero h1{color:#fff;margin-bottom:var(--sp-3)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-lead{font-size:var(--f-lg);line-height:1.45;color:var(--lead-night);max-width:34ch;margin-bottom:var(--sp-4)}
.hero-lead b{color:#fff}
.hero-info .hero-lead{max-width:60ch}
.hero-info{padding:var(--sp-5) 0}
.hero-info::before{display:none}
/* breadcrumbs (built by the build script, placed in .hero-top) */
.crumbs{font-size:var(--f-sm);font-weight:700;color:var(--on-night-2);margin:0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{display:flex;gap:6px;min-width:0}
.crumbs li+li::before{content:"/";color:var(--on-night-2)}
.crumbs a{color:var(--on-night-2);display:inline-block;min-height:24px}
.crumbs [aria-current]{color:#fff}
.hero .crumbs .wrap{padding:0;max-width:none}
.hero .crumbs a{color:var(--on-night-2)}
main>.crumbs{background:var(--night);padding:12px 0 0}
/* hero facts: two plain icon rows (walk-ins + the 15-minute line with its qualifier, or the warranty on console pages). No boxes: the owner wants the hero clean. */
.hero-facts{display:grid;gap:10px;margin:0 0 var(--sp-5);padding:0;list-style:none}
.hero-facts li{display:flex;align-items:flex-start;gap:10px;font-size:var(--f-md);line-height:1.4;color:var(--on-night-2)}
.hero-facts .icon{width:22px;height:22px;color:var(--orange);margin-top:2px}
.hero-facts b{color:#fff}
.hero-top>.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--orange);vertical-align:middle;margin-right:10px}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.hero-actions>.btn:first-child{grid-column:1/-1}
.hero-contact{font-size:var(--f-sm);color:var(--on-night-2);line-height:1.7;margin-top:var(--sp-2)}
.hero-contact a{color:#fff;font-weight:800;white-space:nowrap}
.hero .hedge{max-width:680px}
/* desktop art panel: inline SVG illustration (.art), or one of the four editorial pictures (.hero-photo, owner's choice).
   The SVG panel is desktop-only; the photo also shows on phones, below the hero text, at its full size (no crop, no text on it). */
.hero-art{display:none}
.hero-art-photo{display:block;margin-top:var(--sp-2)}
.art{position:relative;margin:0 0 0 auto;max-width:440px;border-radius:var(--r-lg);background:linear-gradient(160deg,#1b1826,#2a2140);border:1px solid var(--night-line);overflow:hidden}
.hero-photo{margin:0 auto;max-width:600px;border-radius:var(--r-lg);background:var(--night-2);border:1px solid var(--night-line);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.3)}
.art svg,.art img,.hero-photo img{display:block;width:100%;height:auto}
/* the small hours panel under the hero photo (Codex's idea, kept): one bold line + the hours */
.photo-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 18px;border-top:1px solid var(--night-line);background:var(--night-2)}
.photo-cap b{font-size:var(--f-sm);color:#fff}
.photo-cap small{color:var(--on-night-2)}
/* the same picture beside the home steps, in the home buy/sell block and above the sell form */
.how-photo,.buysell .hero-photo{margin-top:var(--sp-5)}
.form-intro{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.form-intro .form-lead{margin-bottom:0}
.form-intro .hero-photo{margin:0 auto var(--sp-2)}

/* ===== 6. trust strip, device grid, repair + why cards, price card, steps, FAQ, CTA band, visit band, notice ===== */
.trust-strip{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip ul{list-style:none;margin:0;padding:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.trust-strip li{min-height:56px;display:grid;grid-template-rows:1fr auto;align-content:stretch;font-size:var(--f-sm);line-height:1.3;min-width:0} /* bold line shares the top, link line shares the bottom, even when one cell wraps */
.trust-strip b{color:var(--ink);font-weight:700}
.trust-strip .star{color:var(--orange)}
.trust-strip li>a,.trust-strip li>span{display:block;font-size:var(--f-xs);color:var(--muted);line-height:22px;min-height:44px;display:flex;align-items:center}
.trust-strip a{color:var(--violet);font-weight:600}
.trust-strip .where{display:none} /* phones show 4 cells (no lone 5th); the visit band carries Directions. Tablet+ shows it. */
/* device grid: compact row tiles with the illustrated symbol (devices.svg) */
.device-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.device-grid>li,.repair-grid>li,.why-grid>li{min-width:0}
.device-tile{display:flex;align-items:center;gap:var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;text-decoration:none;color:var(--ink);min-height:64px;height:100%;box-shadow:var(--shadow);min-width:0;overflow:hidden;transition:border-color .15s}
.device-tile:hover{border-color:var(--violet);color:var(--ink)}
.device-tile:hover b{text-decoration:underline;text-underline-offset:3px}
.device-tile .icon{width:30px;height:30px;color:var(--violet)}
.device-art{width:52px;height:33px;flex:none}
.device-copy{min-width:0}
.device-copy b,.device-tile b{display:block;font-size:var(--f-sm);line-height:1.2;font-weight:800}
.device-copy small,.device-tile small,.device-tile span{display:block;color:var(--muted);font-size:var(--f-xs);line-height:1.2;margin-top:2px;font-weight:600}
/* repair cards (problem cards) + peace-of-mind why cards */
.repair-grid,.why-grid{display:grid;gap:var(--sp-3);list-style:none;margin:0;padding:0}
.repair-card,.why-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;height:100%;transition:border-color .15s}
a.repair-card:hover{border-color:var(--violet);color:var(--ink)}
.repair-card h3,.why-card h3{margin-bottom:4px;font-size:var(--f-lg)}
.rc-body,.repair-card p,.why-card p{color:var(--muted);font-size:var(--f-sm);margin:0 0 8px}
.repair-card>.icon{width:28px;height:28px;color:var(--violet);margin-bottom:6px}
.speed{display:inline-block;justify-self:start;font-size:var(--f-xs);font-weight:700;line-height:1.3;padding:3px 10px;border-radius:var(--r-pill);background:var(--open-soft);color:var(--open-ink);white-space:nowrap;margin-bottom:6px}
.speed-day,.speed-ask{background:var(--tint);color:var(--violet)}
.rc-go{display:inline-flex;align-items:center;gap:4px;color:var(--violet);font-weight:800;font-size:var(--f-sm);margin-top:auto;padding-top:6px;min-height:44px;line-height:1.2}
.rc-go .icon{width:18px;height:18px}
a.repair-card:hover .rc-go{text-decoration:underline}
.why-ic{width:40px;height:40px;border-radius:10px;background:var(--tint);color:var(--violet);display:grid;place-items:center;margin-bottom:var(--sp-3)}
.why-ic .icon{width:22px;height:22px}
.why-card p a{font-weight:800}
/* price card (service + problem pages; sticky beside the repair grid on desktop) */
.price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);margin-top:var(--sp-5)}
.price-card h2{font-size:var(--f-xl)}
.price-card>p{color:var(--muted);font-size:var(--f-sm);margin:6px 0 var(--sp-3)}
.price-card .problem-chips{margin-top:0}
.pc-actions{display:grid;gap:8px;margin-top:var(--sp-4)}
.pc-actions .btn-line,.pc-actions .btn-wa{display:none}
.price-card .note{margin-top:var(--sp-3)}
.service-layout{display:grid;gap:var(--sp-5)}
.service-layout .price-card{order:-1;margin-top:0}
.service-layout .price-card.pc-after{order:1}
/* steps: orange numbered circles */
.steps{display:grid;gap:var(--sp-3);list-style:none;margin:0;padding:0;counter-reset:s}
.steps>li{display:grid;grid-template-columns:44px 1fr;gap:var(--sp-3);align-items:start;min-width:0}
.steps>li::before{counter-increment:s;content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--orange-ink);font-weight:800;display:grid;place-items:center;font-size:var(--f-lg)}
.steps b,.steps h3{display:block;font-size:var(--f-lg);line-height:1.2;padding-top:8px}
.steps p{color:var(--muted);font-size:var(--f-sm);margin:4px 0 0}
.steps>li>p:only-child,.steps>li>span{padding-top:9px;color:var(--ink);font-weight:700;font-size:var(--f-md)}
.steps a{font-weight:800}
.on-night .steps p{color:var(--on-night-2)}
.on-night .steps b{color:#fff}
/* home buy/sell block under the steps (26 §home section 4) */
.buysell{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.buysell p,.buysell h3{max-width:var(--measure)}
.buysell h3{font-size:var(--f-xl);margin-bottom:var(--sp-2)}
.buysell p{color:var(--muted);margin-bottom:var(--sp-4)}
.buysell-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.buysell-actions .btn{flex:1 1 100%}
/* FAQ: native details */
.faq-list{border-top:1px solid var(--line);max-width:var(--measure)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q,.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:700;font-size:var(--f-md);line-height:1.35;min-height:48px}
.faq-q::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary h3{font:inherit;letter-spacing:0;margin:0}
.faq-item summary .icon{width:22px;height:22px;color:var(--violet)}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-q:not(:has(.icon))::after{content:"+";font-size:1.4em;color:var(--violet);font-weight:400;line-height:1}
.faq-item[open] .faq-q:not(:has(.icon))::after{content:"\2013"}
.faq-item summary:hover{color:var(--violet)}
.faq-a p,.faq-item>p{color:var(--muted);padding-bottom:14px;font-size:var(--f-sm)}
.faq-a p+p,.faq-item>p+p{margin-top:-6px}
.faq-item p a{font-weight:700}
.faq-more{display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}
.faq-more a{display:inline-flex;align-items:center;min-height:44px}
/* CTA band (info + guide pages) */
.cta-band{background:var(--tint);border-block:1px solid var(--line);padding:var(--sp-7) 0}
.cta-band>.wrap{display:grid;gap:var(--sp-3)}
.cta-band p{color:var(--muted);max-width:60ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.cta-actions .btn{flex:1 1 100%}
/* visit band (night): map slot, facts, actions, dated comparison */
.visit,.visit-band{background:var(--night);color:#fff;padding:var(--sp-7) 0}
.visit h2,.visit h3,.visit-band h2,.visit-band h3{color:#fff}
.visit a:not(.btn),.visit-band a:not(.btn){color:#fff}
.visit .sec-head p,.visit-band .sec-head p,.visit .note,.visit-band .note{color:var(--on-night-2)}
.visit-grid{display:grid;gap:var(--sp-4)}
.visit-grid>*{min-width:0}
.map-box{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--night-line);min-height:360px;background:#eee9e2;isolation:isolate}
.map-caption{position:absolute;top:20px;left:20px;right:20px;color:var(--ink);display:grid;gap:2px;pointer-events:none}
.map-caption b{font-size:var(--f-lg)}
.map-caption span{font-size:var(--f-xs);font-weight:700}
.map-note{position:absolute;bottom:78px;left:20px;right:20px;font-size:var(--f-xs);color:#62576c}
.map-loaded{background:var(--night-2)}
.map-box.map-loaded iframe{position:absolute;inset:0;height:100%;min-height:100%}
.visit-details{padding:4px 0;display:flex;flex-direction:column;justify-content:center}
.visit-contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.visit-quote{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--f-sm);font-weight:700}
.visit-details .visit-actions{display:grid;gap:var(--sp-2);padding-top:20px;border-top:1px solid var(--night-line);margin-top:24px;justify-items:start}
.directions-label{font-size:var(--f-sm);font-weight:700;color:var(--on-night-2)}
.map-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);width:100%;max-width:360px}
.map-apps .btn{padding-inline:12px;font-size:var(--f-sm)}
.market-feature-grid{display:grid;gap:var(--sp-5);align-items:center}
.market-feature .hero-photo{box-shadow:var(--shadow);width:100%;margin:0}
.market-feature-copy{display:grid;gap:var(--sp-4);justify-items:start}
.market-feature-copy .eyebrow{color:var(--violet)}
.market-feature-copy>p:not(.eyebrow){color:var(--muted);max-width:48ch}
.map-box>svg{position:absolute;inset:0;width:100%;height:100%}
.map-box img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.map-box iframe{border:0;width:100%;height:100%;min-height:300px;display:block;position:relative}
.map-box .map-load,.on-night .map-box .map-load{position:absolute;left:20px;bottom:20px;right:20px;min-height:48px;padding:0 12px;border-radius:var(--r-btn);border:1px solid #d7cfde;background:#fffdf8;color:var(--ink);font:800 var(--f-sm) var(--f);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow)}
.map-box .map-load:hover,.on-night .map-box .map-load:hover{background:var(--tint);color:var(--ink);border-color:transparent}
.map-load .icon{width:20px;height:20px}
.visit-facts{margin:0;display:grid;gap:12px}
.visit-facts dt{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--on-night-2);font-weight:700}
.visit-facts dd{margin:2px 0 0;font-weight:700;font-size:var(--f-lg);min-width:0;overflow-wrap:anywhere}
.visit-facts dd small{display:block;font-weight:500;font-size:var(--f-sm);color:var(--on-night-2)}
.visit-facts a{color:#fff}
.visit-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.visit-actions .btn{flex:1 1 100%}
.visit-line{color:var(--on-night-2);margin-top:10px}
.visit-line b{color:#fff}
.visit-line .icon{width:18px;height:18px;color:var(--orange);vertical-align:-3px;display:inline-block}
.compare,.note.compare{color:var(--on-night-2);font-size:var(--f-sm);margin-top:var(--sp-4)}
.hero+.visit{border-top:1px solid var(--night-line)}
/* late hedge (site.js swaps the open/closed/holiday/soon lines) */
.hedge{margin-top:var(--sp-4);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--amber-soft);border:1px solid #f3d9a6;color:var(--ink);font-size:var(--f-sm)}
.hedge .icon{color:var(--amber-ink);margin-top:2px;width:22px;height:22px}
.hedge p{min-width:0;margin:0}
.hedge a{font-weight:800;color:var(--violet)}
.hero .hedge a,.visit .hedge a,.visit-band .hedge a,.on-night .hedge a{color:var(--violet)}
p.hedge{background:none;border:0;padding:0;color:var(--muted)}
/* notice (21+ market note, stock note, closed dates) */
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--tint);border:1px solid var(--line);font-size:var(--f-sm);color:var(--ink);margin-top:var(--sp-5)}
.notice .icon{width:22px;height:22px;color:var(--violet);margin-top:1px}
.notice p{min-width:0}
/* payment options list (sell page, contact) */
/* real photos only (photo-slot.html); .art is for drawings */
.photo{margin:0}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.photo figcaption{margin-top:8px;font-size:var(--f-xs);color:var(--muted)}
.photo+.photo,.prose+.photo{margin-top:var(--sp-4)}

/* ===== 7. forms (free-quote, sell, contact; hooks listed in 28 section 4) ===== */
.form-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 20px;margin:var(--sp-4) 0 var(--sp-6)}
.form-panel h1{font-size:var(--f-2xl);margin-bottom:var(--sp-2)}
.form-panel>h2:first-child{margin-bottom:8px}
.form-lead{color:var(--muted);margin:0 0 var(--sp-4)}
.form-lead .note+.note{margin-top:var(--sp-2)}
.form-panel>.note{margin-bottom:var(--sp-4)}
.field .hint[data-read-more]{margin-top:var(--sp-3)}
.form-wrap>p:first-child{margin-top:var(--sp-4);font-size:var(--f-sm);color:var(--muted)}
.step-label{font-size:var(--f-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.step-label .eyebrow{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-bottom:var(--sp-5)}
.progress span{display:block;height:100%;width:0;background:var(--violet);border-radius:inherit}
.form-step h2{font-size:var(--f-xl);margin-bottom:var(--sp-4)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:800;font-size:var(--f-lg);line-height:1.3;margin-bottom:var(--sp-3);padding:0;color:var(--ink)}
legend span:not(.optional):not(.hint){display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--orange);color:var(--orange-ink);font-size:var(--f-sm);margin-right:8px;vertical-align:middle}
.field{display:block;margin:0 0 var(--sp-5);padding:0;border:0;min-width:0}
.field>label,.field>legend,.field-label{display:block;font-size:var(--f-sm);font-weight:700;color:var(--ink);line-height:1.35;padding:0;margin:0 0 6px}
.field>label.file-btn{display:inline-flex;padding:8px 14px;margin:0}
.field>legend{float:left;width:100%}
.field>legend+*{clear:both}
.field .hint{margin:-2px 0 8px}
.field-sub{margin:12px 0 var(--sp-5)}
.field-sub:has(+.field-sub:not([hidden])){margin-bottom:0}
.field-sub label{font-size:var(--f-sm)}
.f-row{display:grid;gap:var(--sp-3)}
.f-row .field{margin:0}
.input,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],input[type="url"],select,textarea{display:block;width:100%;min-height:48px;padding:10px 14px;font:500 var(--f-md)/1.4 var(--f);color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:var(--r-btn);appearance:none;-webkit-appearance:none}
select,select.input{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5466' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px}
textarea{min-height:100px;resize:vertical}
.input-short{max-width:220px}
input[type="number"]{-moz-appearance:textfield}
input:hover,select:hover,textarea:hover,.input:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--violet);outline:none;box-shadow:none}
input:focus-visible,select:focus-visible,textarea:focus-visible,.input:focus-visible{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
[aria-invalid="true"]{border-color:var(--err)!important}
::placeholder{color:#6e6879;opacity:1}
input[type="file"]{display:block;width:100%;padding:14px;border:2px dashed var(--line);border-radius:var(--r);background:var(--paper);font-size:var(--f-sm);color:var(--muted);cursor:pointer;min-height:48px}
input[type="file"]::file-selector-button{font:700 var(--f-sm) var(--f);margin-right:12px;padding:8px 14px;border-radius:var(--r-btn);border:2px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
.file-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:2px dashed var(--line);border-radius:var(--r-btn);background:var(--card);font-weight:700;font-size:var(--f-sm);cursor:pointer;position:relative}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;min-height:0}
[data-photo-names]{font-size:var(--f-xs);color:var(--muted);margin-top:6px}
/* device picker tiles (78 px, art 64x40; JS adds .is-checked) */
.option-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.option{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:78px;padding:8px 4px;background:var(--card);border:2px solid var(--line);border-radius:var(--r);text-align:center;font-weight:700;font-size:var(--f-xs);line-height:1.2;cursor:pointer;min-width:0;overflow-wrap:break-word;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--muted)}
.option svg{width:64px;height:40px}
.option .icon{width:28px;height:28px;color:var(--violet)}
.option input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.option.is-checked,.option:has(input:checked){border-color:var(--violet);background:var(--pick-bg);box-shadow:inset 0 0 0 1px var(--violet)}
.option.is-checked::after,.option:has(input:checked)::after{content:"\2713";position:absolute;top:4px;right:6px;font-size:14px;font-weight:800;line-height:1;color:var(--violet);pointer-events:none}
.option:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--violet),0 0 0 2px var(--ink)}
.option input:focus-visible{outline:none;box-shadow:none}
/* plain radio / checkbox rows */
input[type="radio"]:not(.option input):not(.chip-option input),input[type="checkbox"]:not(.option input):not(.chip-option input){width:22px;height:22px;accent-color:var(--violet);margin:0}
.reply-by .chip-options{margin-bottom:6px}
/* errors */
.error-summary{background:var(--err-bg);border-left:4px solid var(--err);border-radius:var(--r-btn);padding:14px 16px;margin:0 0 var(--sp-5)}
.error-summary h3{font-size:var(--f-md);color:var(--err);margin-bottom:6px}
.error-summary h2{font-size:var(--f-md);color:var(--err);margin:0 0 8px}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:var(--err);font-weight:700}
.error-msg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--f-sm);font-weight:700;color:var(--err)}
.error-msg .icon{width:18px;height:18px}
/* note row (details), submit row, what happens next, fallback */
.more-row{margin:0 0 var(--sp-5);border:2px solid var(--line);border-radius:var(--r);background:var(--card)}
.more-row>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 16px;font-weight:800;cursor:pointer}
.more-row>summary::-webkit-details-marker{display:none}
.more-row>summary::marker{content:""}
.more-row>summary .icon{width:20px;height:20px;color:var(--muted)}
.more-row[open]>summary .icon{transform:rotate(180deg)}
.more-row>summary:hover{color:var(--violet)}
.more-row>:not(summary){padding:0 16px}
.more-row>:last-child:not(summary){padding-bottom:16px}
.more-row .field:last-child{margin-bottom:0}
.form-actions{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.form-actions .btn{width:100%}
.submit-row{display:grid;gap:var(--sp-3);align-items:start}
.submit-row .hint{margin-top:8px}
.next-steps{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 12px 32px;margin:0;font-size:var(--f-sm)}
.next-steps li{margin:4px 0}
.next-steps b{display:block;font-size:var(--f-sm);margin:0 0 4px -18px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--f-xs);margin:var(--sp-4) 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.form-aside{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.form-aside .btn{flex:1 1 auto}
.form-aside p{flex:1 1 100%}
.fineprint{font-size:var(--f-sm);color:var(--muted);margin-top:14px}
.form-draft-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border-radius:var(--r);background:var(--pick-bg);border:1px solid var(--line);margin:0 0 var(--sp-4);font-size:var(--f-sm)}

/* ===== 8. prose, guides, tables, do/don't ===== */
.prose{max-width:var(--measure);font-size:var(--f-md);line-height:1.6}
.prose>*:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 var(--sp-4)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin:8px 0}
.prose h2{font-size:1.75rem;margin:var(--sp-7) 0 var(--sp-3)}
.prose h3{font-size:1.375rem;margin:var(--sp-5) 0 var(--sp-2)}
.prose a{text-decoration:underline}
.prose a.btn{text-decoration:none}
.prose .hedge,.prose .notice,.prose .cta-band{margin:var(--sp-5) 0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--f-sm);margin:0 0 var(--sp-4)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:800;background:var(--card)}
[data-hours] tr.today td,[data-hours] tr.today th{font-weight:800;background:var(--amber-soft)}
/* guide hub cards */
.guide-hub{display:grid;gap:var(--sp-3);list-style:none;margin:0;padding:0}
.guide-hub>li{min-width:0}
.guide-card{display:grid;gap:6px;height:100%;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:border-color .15s}
.guide-card:hover{border-color:var(--violet);color:var(--ink)}
.guide-card p{color:var(--muted);font-size:var(--f-sm)}
.guide-card .guide-link,.guide-link{color:var(--violet);font-weight:800;font-size:var(--f-sm);margin-top:auto;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.guide-card:hover .guide-link{text-decoration:underline}
/* do / don't (problem pages) */
.do-dont{display:grid;gap:var(--sp-3)}
.do-dont>div,.do-dont>section{padding:var(--sp-4);border-radius:var(--r);background:var(--card);border:1px solid var(--line);border-top-width:4px;min-width:0}
.do-dont>:first-child{border-top-color:var(--open-ink)}
.do-dont>:last-child{border-top-color:var(--err)}
.do-dont h3{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.do-dont h3 .icon{width:22px;height:22px}
.do-dont>:first-child h3 .icon{color:var(--open-ink)}
.do-dont>:last-child h3 .icon{color:var(--err)}
.do-dont ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.do-dont li{position:relative;padding-left:26px;font-size:var(--f-md)}
.do-dont li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--open-ink)}
.do-dont>:last-child li::before{width:12px;height:2px;top:.72em;left:3px;background:var(--err);border-radius:1px}

/* ===== 9. footer + mobile action bar ===== */
.site-footer{background:var(--night);color:var(--on-night-2);padding:var(--sp-6) 0 calc(var(--sp-6) + 72px);font-size:var(--f-sm)}
body.no-action-bar .site-footer,body[data-no-action-bar] .site-footer{padding-bottom:var(--sp-6)}
.site-footer>.wrap{display:grid;gap:var(--sp-5)}
.site-footer>.wrap>*{min-width:0}
.footer-cols{display:grid;gap:var(--sp-5)}
.footer-cols>*{min-width:0}
@media (max-width:699px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--night-line)}
  .footer-cols>div:last-child{grid-column:1/-1}
  .footer-cols>div:last-child ul{grid-template-columns:1fr 1fr;column-gap:var(--sp-4)}
  .site-footer li a{padding-block:6px}
}
.footer-brand{display:block;color:var(--on-night-2)}
.footer-brand img{display:block;height:48px;width:auto}
.footer-brand p{margin-top:var(--sp-3)}
.footer-name{color:#fff;font-weight:800;font-size:var(--f-md)}
.footer-sig{color:#fff;font-weight:800;font-size:var(--f-md);margin-top:4px}
.footer-hours{color:#fff;font-weight:700}
.site-footer h2,.site-footer h4{font-size:var(--f-xs);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 8px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer li a{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px}
.site-footer li a .icon{width:18px;height:18px}
.site-footer .icon.star{color:var(--orange)}
.site-footer p+p{margin-top:8px}
.site-footer address{font-style:normal}
.site-footer .brand{margin:0 0 12px}
.footer-legal{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--night-line);font-size:var(--f-xs);display:grid;gap:8px}
p.footer-legal{border:0;padding-top:0;margin-top:var(--sp-3)}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:4px 16px}
.footer-legal a{min-height:44px;display:inline-flex;align-items:center}
.footer-phone a{font-weight:800;font-size:var(--f-md);min-height:44px;display:inline-flex;align-items:center}
.footer-phone small{display:block;font-size:var(--f-xs)}
.footer-foot{grid-column:1/-1;border-top:1px solid var(--night-line);padding-top:var(--sp-4);font-size:var(--f-xs);display:grid;gap:4px}
/* mobile action bar: 4 equal tiles, grammar colours; site.js toggles .is-closed, body[data-kb] hides it */
.action-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--night);border-top:1px solid var(--night-line);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
.action-bar a{display:grid;justify-items:center;align-content:center;gap:2px;color:#fff;text-decoration:none;font-size:var(--f-xs);font-weight:700;line-height:1.1;min-height:52px;padding:6px 2px;border-radius:var(--r-sm);text-align:center;min-width:0}
.action-bar a span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-bar a:hover{background:rgba(255,255,255,.06);color:#fff}
.action-bar .icon{width:22px;height:22px}
.action-bar .ab-wa,.action-bar .ab-text{color:var(--wa-ink)}
.action-bar .ab-quote{background:var(--orange);color:var(--orange-ink)}
.action-bar .ab-quote:hover{background:var(--orange-deep)}
.action-bar.is-closed .ab-call{opacity:.7}
.action-bar [aria-current="page"]{color:var(--orange)}
body[data-kb] .action-bar{display:none}
body[data-kb] .site-footer{padding-bottom:var(--sp-6)}

/* ===== 10. print, forced colours, reduced motion, breakpoints ===== */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media (forced-colors:active){
  .btn,.action-bar a,.lang-link,.nav-toggle,.map-load,.chip,.chip-option,.option,.device-tile,.repair-card{border:2px solid ButtonText}
  .status-dot{forced-color-adjust:none}
  .option:has(input:checked),.chip-option:has(input:checked),.option.is-checked,.chip-option.is-checked{outline:3px solid Highlight}
  .icon{stroke:currentColor}
}
@media print{
  .site-header,.action-bar,.nav-toggle,.map-box,.hero-actions,.skip-link,.hero-art,.hero-photo,.pc-actions,.visit-actions{display:none!important}
  .cta-actions,.cta-band h2{display:none!important} /* the band keeps only its print-only NAP line */
  body{padding:0;background:#fff;color:#000}
  .hero,.visit,.visit-band,.site-footer,.on-night,.trust-strip,.section-alt{background:#fff!important;color:#000!important}
  .hero *,.visit *,.visit-band *,.site-footer *,.on-night *{color:#000!important;text-shadow:none!important}
  .faq-item{break-inside:avoid}
  .print-only{display:block;margin-top:10px;font-weight:700;color:#000!important}
}
/* small phones */
@media (max-width:359px){
  .wrap{padding:0 12px}
  .option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .device-tile{gap:8px;padding:8px}
  .device-art{width:40px;height:25px}
  .device-copy b{overflow-wrap:anywhere}
}
@media (min-width:390px){.brand-logo{height:52px}}
/* phones only: chips above the tiles (DOM stays tiles-first), one-line tile sub-lines, compact chips so 6 fit in 2 rows at 390 */
@media (max-width:699px){
  .hero-home h1{font-size:clamp(2.125rem,10vw,2.5rem)}
  .hero-home .hero-lead{font-size:1.125rem;line-height:1.5}
  .hero-home .hero-facts{margin-bottom:var(--sp-4)}
  .hero-home>.wrap{gap:var(--sp-4)}
  .device-block{display:flex;flex-direction:column}
  .device-block>.problem-chips-label{order:-2;margin-top:0}
  .device-block>.problem-chips{order:-1;margin:0 0 var(--sp-5)}
  .device-block .problem-chips{gap:6px}
  .device-block .chip{padding:8px 12px;font-size:var(--f-xs);gap:5px}
  .device-block .chip .icon{display:none}
  .hero-facts li{font-size:var(--f-sm)}
  .hero-info h1{font-size:2.25rem}
  .form-aside:not(.save-row) .btn-line,.form-aside:not(.save-row) .btn-wa+.btn-wa{display:none} /* phones: only "Text a photo" + the walk-in line under the form; the thanks page's save row keeps both buttons */
  .save-row .btn{flex:1 1 100%}
  .hero-top>.crumbs{flex-basis:100%} /* phones: the crumbs take their own line so the status pill never wraps mid-row */
}
/* phones and tablets: stacked device tile (art above text) so four columns fit at 768 without wrapped names */
@media (max-width:1023px){
  .device-tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;padding:10px}
  .device-art{width:48px;height:30px}
  .device-copy{width:100%}
  .device-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .device-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* small phones: let a long tile name wrap instead of clipping ("Nintendo Switch"); grid-auto-rows keeps tiles equal */
@media (max-width:359px){
  .device-copy b,.device-copy small{white-space:normal;overflow:visible;text-overflow:clip}
}
/* tablet */
@media (min-width:700px){
  .hero-actions .btn,.visit-actions .btn,.buysell-actions .btn,.cta-actions .btn{flex:0 1 auto}
  .repair-grid>li:has(>.rc-else){grid-column:1/-1} /* the "Something else" card spans the row (the li is the grid item) */
  .repair-grid>li:nth-child(even):has(>.rc-else){grid-column:auto} /* 5 cards + else fill a 3x2 grid with no gap; 6 + else keep the full-width card */
  .header-actions{display:flex}
  .header-call,.header-whatsapp{display:none}
  .trust-strip ul{grid-template-columns:repeat(4,1fr)} /* 4 cells until desktop; .where joins at 1024 */
  .device-grid{grid-template-columns:repeat(4,1fr)}
  .repair-grid,.why-grid,.guide-hub{grid-template-columns:repeat(2,1fr)}
  .steps{gap:var(--sp-5)} /* one column until 1024: three ~200px columns wrap the bold step titles onto 3-4 lines */
  .form-intro{grid-template-columns:1fr 260px;align-items:center;gap:var(--sp-5)}
  .form-intro .hero-photo{margin:0}
  .do-dont{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .visit-grid{grid-template-columns:1.2fr 1fr;gap:var(--sp-6)}
  .market-feature-grid{grid-template-columns:1fr 1.1fr;gap:var(--sp-7)}
  .hero-actions{grid-template-columns:auto auto auto;justify-content:start}
  .hero-actions>.btn:first-child{grid-column:auto}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .form-panel{padding:24px 28px}
  .form-panel h1{font-size:var(--f-3xl)}
  .option-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .f-row{grid-template-columns:1fr 1fr}
  .f-row .full{grid-column:1/-1}
  .submit-row{grid-template-columns:1fr 1fr}
  .form-actions{display:flex;flex-wrap:wrap;align-items:center}
  .form-actions .btn{width:auto;min-width:240px}
  .form-actions button[type="submit"],.form-actions [data-next]{flex:1 1 auto}
  .prose h2{font-size:2rem}
}
/* desktop: nav visible, bar hidden, hero two columns */
@media (min-width:1024px){
  h1{font-size:3.25rem}
  h2{font-size:2.25rem}
  .page-home #faq>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"heading questions" "links questions";grid-template-rows:min-content 1fr;gap:var(--sp-4) var(--sp-7);align-items:start}
  .page-home #faq .sec-head{grid-area:heading;margin:0}
  .page-home #faq .faq-list{grid-area:questions;max-width:none}
  .page-home #faq .faq-more{grid-area:links;display:grid;gap:0;margin:0;justify-items:start}
  .section{padding:var(--sp-8) 0}
  .steps{grid-template-columns:repeat(3,1fr)}
  .brand-logo{height:56px}
  .header-inner{gap:var(--sp-4)}
  .brand{margin-right:0}
  .nav-toggle{display:none}
  .header-call,.header-whatsapp{display:inline-flex}
  .header-actions{gap:10px;flex-shrink:0}
  .header-whatsapp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* icon-only until 1280: the ES nav is wider */
  .header-whatsapp{width:44px;flex-shrink:0;padding:0;justify-content:center}
  .site-nav,.site-header.nav-open .site-nav{display:block;position:static;margin-left:auto;background:none;border:0;padding:0;max-height:none;overflow:visible}
  .nav-list{display:flex;gap:20px;align-items:center;max-width:none}
  .nav-list>li{position:relative}
  .nav-list>li>a,.nav-drop-btn{border:0;min-height:44px;font-size:var(--f-sm);gap:6px;width:auto;white-space:nowrap}
  .nav-list>li>a:hover,.nav-drop-btn:hover{color:var(--orange)}
  .header-inner>.lang-link,.nav-list .lang-link{border:0;padding:0 10px;min-height:44px;font-size:var(--f-sm);font-weight:700} /* desktop: plain text link, no pill (the phone menu row is unchanged) */
  .header-inner>.lang-link:hover,.nav-list .lang-link:hover{text-decoration:underline}
  .nav-list>li.nav-quote{display:none}
  .drop-panel{position:absolute;top:calc(100% + 10px);left:-16px;min-width:320px;background:var(--night);border:1px solid var(--night-line);border-radius:var(--r);padding:12px 20px 16px;box-shadow:0 20px 40px rgba(0,0,0,.35);z-index:45}
  .drop-panel:has(>div+div){grid-template-columns:auto auto;gap:4px 32px;min-width:480px}
  .drop-list a{font-size:var(--f-sm);min-height:40px}
  .hero{padding:var(--sp-8) 0}
  .hero-info{padding:var(--sp-7) 0}
  .hero-info>.wrap{grid-template-columns:1fr;max-width:1160px} /* single column by default; the :has(>.hero-art) rule below restores two columns when front-matter sets ART */
  .hero-info .hero-lead{max-width:60ch}
  .cta-band>.wrap{grid-template-columns:1fr auto;grid-template-areas:"h a" "p a";align-items:center;gap:var(--sp-2) var(--sp-6)}
  .cta-band>.wrap>h2{grid-area:h;margin:0}
  .cta-band>.wrap>p:not(.print-only){grid-area:p;margin:0}
  .cta-band>.wrap>.cta-actions{grid-area:a;margin:0}
  .header-inner>.lang-link{border:0;padding:0 10px;min-height:44px;font-size:var(--f-sm);font-weight:700}
  .header-inner>.lang-link:hover{text-decoration:underline}
  .hero-home>.wrap:has(>.hero-art),.hero-service>.wrap:has(>.hero-art),.hero-info>.wrap:has(>.hero-art){grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--sp-7)}
  .hero-home>.wrap:has(>.hero-art-photo),.hero-service>.wrap:has(>.hero-art-photo){grid-template-columns:1fr 1fr} /* a photo gets a full half: bigger picture, like the owner asked */
  .hero-home h1{font-size:3.5rem;letter-spacing:-.035em}
  .hero-art{display:block}
  .hero-art-photo{margin-top:0}
  .hero-photo{margin:0 0 0 auto}
  /* home: the steps and the buy/sell text on the left, the picture on the right */
  .how-body,.buysell:has(>.hero-photo){display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--sp-7)}
  .how-body .steps{grid-template-columns:1fr;gap:var(--sp-4)}
  .how-photo,.buysell .hero-photo{margin-top:0}
  .hero-facts li{font-size:var(--f-lg)}
  .repair-grid,.why-grid,.guide-hub{grid-template-columns:repeat(3,1fr)}
  .trust-strip .where{display:grid}
  .trust-strip ul:has(.where){grid-template-columns:repeat(5,1fr)}
  .device-tile{padding:14px 16px;min-height:80px}
  .device-art{width:88px;height:55px}
  .device-copy b,.device-tile b{font-size:var(--f-md)}
  .service-layout{grid-template-columns:1fr 340px;align-items:start}
  .service-layout>:not(.price-card){grid-column:1}
  .service-layout>.price-card{grid-column:2;grid-row:1/span 4}
  .service-layout .repair-grid{grid-template-columns:repeat(2,1fr)}
  .price-card{position:sticky;top:calc(var(--header-h) + 16px);margin-top:0}
  .service-layout .price-card{order:0}
  .pc-actions .btn-line,.pc-actions .btn-wa{display:inline-flex}
  .site-footer>.wrap{grid-template-columns:1.1fr 2fr;align-items:start}
  .site-footer>.wrap>.footer-legal{grid-column:1/-1}
  .site-footer{padding-bottom:var(--sp-6)}
  .action-bar{display:none}
}

@media (min-width:1360px){
  .header-whatsapp span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .header-whatsapp{width:auto;padding:0 14px}
}

/* Netlify honeypot field on the four forms: visually hidden, never display:none, so bots still fill it. */
@media (min-width:1024px) and (max-width:1279px){
  .header-call .hc-num{display:none}
  .nav-list{gap:16px}
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* market page brand art (was an inline style: the security policy allows no style attributes) */
.logo-card{max-width:420px;margin-inline:auto}
/* visit-counting question: shown only when site.json ANALYTICS_ID is set and the visitor has not answered.
   Sits above the phone action bar; two equal buttons, no pre-picked answer. */
.consent{position:fixed;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;background:var(--night-2);color:#fff;border:1px solid var(--night-line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:var(--f-sm)}
.consent p{flex:1 1 200px;margin:0}
.consent a{color:#fff}
.consent .btn{color:#fff;border-color:rgba(255,255,255,.5);min-height:44px}
body[data-kb] .consent{display:none}
@media (min-width:1024px){.consent{left:auto;right:16px;bottom:16px;max-width:460px}}