/* ─────────────────────────────────────────────────────────────────────────────
   LANDING PAGES ONLY.  public/index.html is deliberately NOT touched by this
   file — its CSS stays inline exactly as it is, so the homepage's measured
   LCP/CLS cannot regress from anything done here.

   ★ The two @font-face blocks below are copied verbatim from index.html and must
     stay FIRST in every stack that names Archivo or Spectral. They are the local
     fallbacks with metrics overridden to match the webfont exactly (measured
     in-browser, n516b). Without them the display=swap re-layout costs ~0.1 CLS.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:98.832%;ascent-override:88.84%;descent-override:21.25%;line-gap-override:0%}
@font-face{font-family:"Spectral Fallback";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");size-adjust:100.546%;ascent-override:105.33%;descent-override:46.05%;line-gap-override:0%}

:root{
  --bg:#eceaf1; --paper:#ffffff; --panel:#e6e4ee;
  --ink:#181920; --body:#494c59; --muted:#64676f;
  --line:#dcdae6; --line-2:#e7e5ef;
  --navy:#22316c; --navy-d:#1a2653; --navy-tint:#e7e9f5;
  --star:#e2a423;
  --open:#176f3f; --open-bg:#e4f3ea; --open-line:#bfe0cc;
  --wait:#96500f; --wait-bg:#f8ecdd; --wait-line:#eecdac;
  --flag:#8a3220; --flag-bg:#fbeceb; --flag-line:#f0cdc7;
  --shadow:0 1px 2px rgba(24,25,32,.05), 0 22px 46px -24px rgba(24,25,32,.30);
  --shadow-sm:0 1px 2px rgba(24,25,32,.06), 0 10px 24px -16px rgba(24,25,32,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:Archivo,"Archivo Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:Spectral,"Spectral Fallback",Georgia,serif;font-weight:600;line-height:1.13;color:var(--ink);margin:0;letter-spacing:-.006em}
p{margin:0}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.narrow{max-width:820px}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--navy);display:inline-block;opacity:.55}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:10px 16px;border-radius:8px;border:1.5px solid var(--navy)}

/* Buttons — identical treatment to the homepage. Reserve is ALWAYS .btn-primary. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:Archivo,"Archivo Fallback";font-weight:600;font-size:15.5px;
  padding:14px 24px;border-radius:8px;cursor:pointer;border:1.5px solid transparent;transition:transform .14s,background .14s,border-color .14s,color .14s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-d);transform:translateY(-1px);text-decoration:none}
.btn-ghost{background:transparent;color:var(--navy);border-color:#c7c5d4}
.btn-ghost:hover{border-color:var(--navy);background:rgba(34,49,108,.05);text-decoration:none}
.btn-call{background:var(--wait);color:#fff;border-color:var(--wait)}
.btn-call:hover{filter:brightness(.96);transform:translateY(-1px);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--navy-tint);outline-offset:2px}

/* Header */
header{position:sticky;top:0;z-index:40;background:rgba(236,234,241,.9);backdrop-filter:saturate(1.3) blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:44px;width:auto;display:block}
.brand .nm{font-family:Spectral,"Spectral Fallback";font-weight:600;font-size:18.5px;color:var(--ink);line-height:1.04}
.brand .nm small{display:block;font-family:Archivo,"Archivo Fallback";font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav-right{display:flex;align-items:center;gap:16px}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;padding:7px 13px;border-radius:7px;border:1px solid}
.status-pill .dot{width:8px;height:8px;border-radius:50%}
.status-pill.open{color:var(--open);background:var(--open-bg);border-color:var(--open-line)}
.status-pill.open .dot{background:var(--open);animation:pulse 2.4s infinite}
.status-pill.wait{color:var(--wait);background:var(--wait-bg);border-color:var(--wait-line)}
.status-pill.wait .dot{background:var(--wait)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,138,79,.45)}70%{box-shadow:0 0 0 7px rgba(31,138,79,0)}100%{box-shadow:0 0 0 0 rgba(31,138,79,0)}}
.nav .phone{font-weight:600;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.nav .phone svg{width:16px;height:16px;color:var(--navy)}

/* Breadcrumb */
.crumb{font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--navy)}

/* Hero */
.lp-hero{padding:22px 0 40px;border-bottom:1px solid var(--line)}
.lp-hero h1{font-size:clamp(31px,4.4vw,46px);line-height:1.06;margin:16px 0 0}
.lp-hero .lead{font-size:18.5px;color:var(--body);margin:20px 0 0;max-width:60ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.lp-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:24px;font-size:14px;font-weight:600;color:var(--ink)}
.lp-trust span{display:inline-flex;align-items:center;gap:8px}
.lp-trust svg{width:17px;height:17px;color:var(--navy);flex:none}
.lp-trust .sep{width:4px;height:4px;border-radius:50%;background:#bcbaca}

/* Hero is two columns: the copy, and the to-scale drawing of the actual photo. The drawing used to
   sit full-width in the section below with ~700px of dead space beside it. */
.herogrid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.heroaside{min-width:0}
.specfig{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 20px 16px;box-shadow:var(--shadow-sm)}
.specfig svg{display:block;width:100%;height:auto}
.specfig figcaption{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);text-align:center;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.asidecard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm)}
.asidecard .tag{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:12px}
.asidecard p{font-size:15.5px;color:var(--ink)}
.asidecard p+p{margin-top:12px}
.asidecard .muted{color:var(--muted);font-size:14.5px}

/* Anchor targets must clear the sticky header. */
:target,#book,section[id]{scroll-margin-top:82px}

/* Price card — the $200 reserved appointment is the headline offer, walk-in is the fallback. */
.pricebar{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:34px}
.pricecard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.pricecard.feature{border:1.5px solid var(--navy);box-shadow:var(--shadow)}
.pricecard .tag{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.pricecard.feature .tag{color:#fff;background:var(--navy);display:inline-block;padding:4px 9px;border-radius:5px}
.pricecard .amt{font-family:Spectral,"Spectral Fallback";font-size:38px;font-weight:600;color:var(--ink);line-height:1;margin:12px 0 0;font-variant-numeric:tabular-nums}
.pricecard .amt small{font-family:Archivo,"Archivo Fallback";font-size:14px;font-weight:600;color:var(--muted);margin-left:8px;letter-spacing:0}
.pricecard ul{margin:14px 0 0;padding:0 0 0 18px;font-size:14.5px;color:var(--body)}
.pricecard li{margin:5px 0}
.pricecard .btn{margin-top:18px;width:100%}

/* Spec table — every field of the same kind gets the same treatment. */
.section{padding:52px 0}
.section.paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:clamp(24px,3vw,31px);margin:14px 0 0}
.section .sub{margin-top:12px;max-width:66ch;font-size:16.5px}
.specwrap{margin-top:26px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
table.spec{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.spec th,table.spec td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec th{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);width:34%;white-space:nowrap}
table.spec td{color:var(--ink);font-variant-numeric:tabular-nums}
table.spec td .unk{color:var(--muted);font-style:italic;font-variant-numeric:normal}

/* Callouts */
.callout{margin-top:24px;border-radius:12px;padding:18px 22px;border:1px solid;font-size:15.5px}
.callout .lbl{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:7px}
.callout.warn{background:var(--flag-bg);border-color:var(--flag-line);color:#5d2417}
.callout.warn .lbl{color:var(--flag)}
.callout.note{background:var(--navy-tint);border-color:#c9cfe8;color:#26305a}
.callout.note .lbl{color:var(--navy)}

.gotchas{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.gotchas li{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--wait);border-radius:10px;padding:15px 19px;font-size:15.5px;color:var(--ink)}
.section.paper .gotchas li{background:var(--bg)}

.srcs{margin-top:26px;font-size:14px;color:var(--muted)}
.srcs .lbl{font-family:Archivo,"Archivo Fallback";font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:9px}
.srcs ul{margin:0;padding:0 0 0 18px}
.srcs li{margin:5px 0}

/* CTA band */
.ctaband{background:var(--navy);color:#fff;padding:46px 0}
.ctaband h2{color:#fff;font-size:clamp(24px,3vw,32px)}
.ctaband p{color:#c9d0e8;margin-top:12px;max-width:58ch;font-size:16.5px}
.ctaband .row{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.ctaband .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.ctaband .btn-primary:hover{background:#eceaf1;color:var(--navy-d)}
.ctaband .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.ctaband .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Related */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:24px}
.rel a{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:16px 19px;display:block;color:var(--ink);font-weight:600;font-size:15.5px;transition:border-color .14s,transform .14s}
.rel a:hover{border-color:var(--navy);transform:translateY(-1px);text-decoration:none}
.rel a small{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:4px}

/* Hub index */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:26px}
.hubgrid a{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 21px;display:block;transition:border-color .14s,transform .14s}
.hubgrid a:hover{border-color:var(--navy);transform:translateY(-1px);text-decoration:none}
.hubgrid .d{display:block;font-family:Spectral,"Spectral Fallback";font-weight:600;font-size:18px;color:var(--ink);line-height:1.24}
.hubgrid .s{display:block;font-size:14px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.alsolist{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.alsolist li{font-size:15.5px;color:var(--body);padding-left:20px;position:relative}
.alsolist li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:#bcbaca}
.alsolist b{color:var(--ink)}

/* Footer */
footer{background:var(--ink);color:#a9abb6;padding:44px 0 34px;font-size:14.5px}
footer a{color:#d5d7e0}
footer .ftop{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
footer .fnm{font-family:Spectral,"Spectral Fallback";font-size:19px;color:#fff;font-weight:600}
footer .fcol h4{color:#fff;font-size:13px;font-family:Archivo,"Archivo Fallback";font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:11px}
footer .fcol ul{margin:0;padding:0;list-style:none}
footer .fcol li{margin:6px 0}
footer .fbot{margin-top:32px;padding-top:20px;border-top:1px solid #2c2d38;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;font-size:13px;color:#7e808c}

@media (max-width:980px){
  .herogrid{grid-template-columns:1fr;gap:32px}
  .heroaside{max-width:420px}
}
@media (max-width:880px){
  .pricebar{grid-template-columns:1fr}
  .nav .phone span{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .section{padding:38px 0}
  .lp-hero{padding:16px 0 32px}
  .lp-cta .btn{width:100%}
  .brand .logo{height:36px}
  .nav-right{gap:10px}
  table.spec th{width:40%;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}