/* Crivelli Chevrolet Buick — Answer Center v2 (2026-07-07)
   Committed navy / brass signage system. See DESIGN.md. */
:root{
  --ink:#131A21;--muted:#49545F;--line:#E4E8ED;
  --navy:#0A3B66;--navy-deep:#062A4C;--navy-ink:#04203B;
  --gold:#C8992A;--gold-bright:#E3B34A;--green:#0A7D47;
  --wash:#F4F7FA;
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-text:"Barlow",-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-text);font-size:17.5px;color:var(--ink);line-height:1.65;background:#fff}
.wrap{max-width:860px;margin:0 auto;padding:0 26px}
.wrap-wide{max-width:1140px;margin:0 auto;padding:0 26px}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:8px 14px;z-index:60;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ── Top bar ─────────────────────────────── */
.topbar{background:var(--navy-ink);color:#C7D3DF;font-size:13.5px;padding:8px 0}
.topbar .wrap-wide{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .star{color:var(--gold-bright)}

/* ── Header ──────────────────────────────── */
.site-header{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.site-header .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{text-decoration:none;color:var(--ink);line-height:1;display:block}
.wordmark .wm{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:31px;letter-spacing:.01em;color:var(--navy);text-transform:uppercase}
.wordmark .wm-sub{display:block;font-family:var(--font-text);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--ink)}
.nav a:hover{color:var(--navy)}
.nav .tel{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.nav .btn{background:var(--navy);color:#fff;border-radius:8px;padding:11px 20px;font-weight:600}
.nav .btn:hover{background:var(--navy-deep);color:#fff}

/* ── Split hero: text on solid navy, photo full-bleed beside ── */
.hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);background:var(--navy-deep)}
.hero-panel{display:flex;align-items:center;background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy-ink) 100%);color:#fff}
.hero-inner{width:100%;max-width:640px;margin-left:auto;padding:56px clamp(26px,4vw,64px) 56px 26px;animation:rise .5s var(--ease-out) both}
.hero--tall .hero-inner{padding-top:76px;padding-bottom:76px}
.hero--band .hero-inner{padding-top:44px;padding-bottom:44px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-media{position:relative;min-height:100%}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .crumbs{font-size:13.5px;color:#9FB2C4;margin:0 0 18px}
.hero .crumbs a{color:#fff;text-decoration:none;font-weight:600}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:0;margin:0 0 18px;text-wrap:balance}
.hero .lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;margin:0;color:#DCE6EF;text-wrap:pretty}
.hero .lede b{color:var(--gold-bright);font-weight:600}

/* ── Main content ────────────────────────── */
main{padding:6px 0 10px}
h2{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.15;letter-spacing:0;margin:46px 0 12px;text-wrap:balance}
p{margin:0 0 15px;text-wrap:pretty;max-width:72ch}

/* record strip — the checkable numbers, one plaque */
.stats{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:36px 0 8px;background:#fff}
.stat{flex:1;min-width:170px;padding:20px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .n{font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.stat .n .s,.stat .n .star{color:var(--gold-bright)}
.stat .k{font-size:13px;color:var(--muted);margin-top:6px;font-weight:600}

/* question index — a directory, not a card grid */
.answers-grid{border-top:1px solid var(--line);margin:20px 0 8px}
.answers-grid a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 6px;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2;color:var(--ink);transition:background .15s,color .15s}
.answers-grid a::after{content:"\2192";color:var(--gold);font-size:22px;flex:none;transition:transform .2s var(--ease-out)}
.answers-grid a:hover{background:var(--wash);color:var(--navy)}
.answers-grid a:hover::after{transform:translateX(5px)}

/* short-version callout */
.box{border:1px solid #C4DCCF;border-radius:12px;background:#F2F8F4;padding:17px 21px;margin:24px 0;max-width:none}
.box b{color:var(--green)}

/* NAP block */
.nap{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin:32px 0 22px}
.nap h3{margin:0 0 8px;font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--navy)}
.nap div{font-size:15px}
.nap .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-top:11px}

/* related answers */
.related{border-top:1px solid var(--line);margin-top:42px;padding-top:20px}
.related b{display:block;margin-bottom:8px}
.related a{display:inline-block;margin:0 22px 8px 0;color:var(--navy);font-weight:600;font-size:15.5px;text-decoration:none}
.related a::after{content:" \2192";color:var(--gold)}
.related a:hover{text-decoration:underline}

/* ── Footer ──────────────────────────────── */
footer{background:var(--navy-ink);color:#C7D3DF;margin-top:54px;padding:40px 0 34px;font-size:14.5px;line-height:1.7}
footer .wm{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:25px;letter-spacing:.01em;color:#fff;text-transform:uppercase}
footer .wm-sub{font-family:var(--font-text);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin:4px 0 16px}
footer nav{margin:0 0 16px;display:flex;gap:22px;flex-wrap:wrap}
footer nav a,footer a{color:#fff}
footer .fine{max-width:78ch}

/* ── Interactive drive-time map ──────────── */
.area-map{background:var(--navy-ink);border:1px solid var(--navy-deep);border-radius:14px;padding:14px 14px 6px;margin:36px 0 10px;overflow:hidden}
.area-map svg{display:block;width:100%;height:auto;transform:scale(1.14);transform-origin:52% 55%;transition:transform 1.6s var(--ease-out)}
.area-map.in-view svg{transform:scale(1)}
.area-map .corridor{stroke:#2E4A66;stroke-width:1.5;fill:none;stroke-dasharray:.02 .012;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease-out) .3s}
.area-map.in-view .corridor{stroke-dashoffset:0}
.area-map .city-ring{fill:none;stroke:#7E93A8;stroke-width:2}
.area-map .city-ring-inner{fill:#7E93A8;stroke:none}
.area-map .city-label{fill:#C7D3DF;font-family:var(--font-display);font-weight:600;font-size:20px}
.area-map .city-sub{fill:#7E93A8;font-family:var(--font-text);font-weight:600;font-size:12px}
.area-map figcaption{color:#9FB2C4;font-size:13px;padding:8px 8px 10px}
.area-map .spoke{stroke:#3D5A78;stroke-width:1.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out),stroke .2s}
.area-map.in-view .spoke{stroke-dashoffset:0}
.area-map .pin circle{fill:#fff;stroke:var(--gold);stroke-width:2;transition:r .2s var(--ease-out)}
.area-map .pin .t-name{fill:#EAF0F6;font-family:var(--font-display);font-weight:600;font-size:19px}
.area-map .pin .t-time{fill:var(--gold-bright);font-family:var(--font-text);font-weight:600;font-size:12.5px}
.area-map a{outline-offset:4px}
.area-map a:hover .pin circle,.area-map a:focus-visible .pin circle{r:9}
.area-map .town:hover .spoke,.area-map .town:focus-within .spoke{stroke:var(--gold)}
.area-map .home-halo{fill:var(--gold-bright);opacity:.25;transform-origin:center;transform-box:fill-box;animation:halo 2.6s ease-out infinite}
@keyframes halo{0%{transform:scale(.4);opacity:.45}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.area-map .home-dot{fill:var(--gold-bright);stroke:#fff;stroke-width:2}
.area-map .home-label{fill:#fff;font-family:var(--font-display);font-weight:700;font-size:21px}
.area-map .home-sub{fill:#9FB2C4;font-family:var(--font-text);font-weight:600;font-size:12px}

/* cinematic drift on hero photos */
@media(prefers-reduced-motion:no-preference){
  .hero-media img{animation:drift 26s ease-in-out infinite alternate}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1.2%)}}
}

@media(max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:220px;order:2}
  .hero-inner{margin:0;max-width:none;padding:40px 26px 42px}
  .hero--band .hero-media{min-height:170px}
  .nap{grid-template-columns:1fr;padding:24px}
  .answers-grid a{font-size:21px}
  .nav{gap:16px}
  .nav .hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-inner{animation:none}
  .answers-grid a::after{transition:none}
  html{scroll-behavior:auto}
  .area-map svg{transform:none;transition:none}
  .area-map .spoke,.area-map .corridor{stroke-dashoffset:0;transition:none}
  .area-map .home-halo{animation:none;opacity:0}
}