/* ============================================================
   Lavi Auto Detail — laviautodetail.com
   Brand tokens derived from the Lavi logo: cyan → teal on navy.
   Type scale floors at 12px per the SetupStarter convention.
   ============================================================ */

:root{
  /* Light theme. White is a primary Lavi brand colour, so the ground is white
     and the panels sit just off it. Token names are roles: --ink is the page
     ground, --surface a panel, --paper the primary text colour. */
  --ink:#FFFFFF; --ink-2:#F3F8FB; --ink-3:#EAF2F7;
  --surface:#FFFFFF; --surface-2:#F6FAFC; --surface-3:#EDF4F8;
  --line:rgba(10,32,46,.12); --line-2:rgba(10,32,46,.22);

  /* type */
  --paper:#0C1A24; --mute:#42596A; --mute-2:#5A7385;

  /* brand — the accents stay. --aqua and --teal are FILLS (buttons, rules,
     dots) and are unchanged; brand aqua as *text* on white is about 2:1, so
     anything that paints type uses --aqua-ink / --teal-ink / --grad-ink. */
  --aqua:#29C5E8; --aqua-2:#16A9CC; --teal:#4FC3B4; --navy:#17365F;
  --aqua-ink:#0A6C82; --teal-ink:#0C6F62;
  --aqua-tint:rgba(41,197,232,.12); --aqua-line:rgba(41,197,232,.42);
  --grad:linear-gradient(100deg,var(--aqua) 0%,var(--teal) 100%);
  --grad-ink:linear-gradient(100deg,#0A6C82 0%,#0C7566 100%);
  --on-brand:#04212A;   /* text that sits on an aqua fill */

  --maxw:1200px; --r:12px; --r-sm:8px;
  --fs-micro:12px;
  --shadow:0 24px 54px -32px rgba(12,40,58,.28);
  --shadow-sm:0 12px 28px -20px rgba(12,40,58,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;width:100%;scroll-padding-top:88px}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;width:100%;max-width:100%}
img{max-width:100%;display:block}
/* any class that sets display would otherwise beat the hidden attribute */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:var(--aqua);color:var(--on-brand)}
h1,h2,h3,h4{font-family:Archivo,Inter,system-ui,sans-serif;font-weight:800;
  letter-spacing:-.028em;line-height:1.06;margin:0;text-wrap:balance}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:1}
.pad{padding:96px 0}
.pad-sm{padding:64px 0}
.band{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.skip{position:absolute;top:0;left:0;z-index:200;background:var(--aqua);color:var(--on-brand);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:800;font-size:14px;
  clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none}

.eyebrow{display:inline-block;font-size:var(--fs-micro);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--aqua-ink);margin-bottom:18px}
.lede{color:var(--mute);font-size:18px;line-height:1.7;max-width:64ch}
.sec-head{max-width:72ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,4.4vw,46px)}
.sec-head p{margin:18px 0 0;color:var(--mute);font-size:17.5px;line-height:1.7;max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:700;min-height:48px;padding:13px 26px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-2);background:transparent;color:var(--paper);cursor:pointer;
  white-space:nowrap;transition:background .25s var(--ease),border-color .25s var(--ease),
  color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{border-color:var(--aqua);color:var(--aqua-ink);transform:translateY(-2px)}
.btn.primary{background:var(--grad);border-color:transparent;color:var(--on-brand)}
.btn.primary:hover{color:var(--on-brand);filter:brightness(1.08)}
.btn.sm{min-height:42px;padding:10px 18px;font-size:14px}

/* ---------- utility bar + header ---------- */
.util{background:#050A0E;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:44px;flex-wrap:wrap}
.util a{font-weight:600;color:var(--paper);display:inline-flex;align-items:center;min-height:40px}
.util a:hover{color:var(--aqua-ink)}
.util .r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.util .dot{color:var(--mute-2)}

header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand img{height:46px;width:auto}
.brand .mark{font-family:Archivo;font-weight:900;font-size:20px;letter-spacing:-.04em;line-height:1}
.nav .links{display:flex;align-items:center;gap:26px}
.nav .links a{font-size:14.5px;font-weight:600;color:var(--mute);display:inline-flex;
  align-items:center;min-height:44px;white-space:nowrap}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--paper)}
.nav .links a[aria-current="page"]{color:var(--aqua-ink)}
.nav .cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:transparent;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--paper);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--paper)}
.burger span::before{top:-6px}.burger span::after{top:6px}
#mnav{display:none;background:var(--ink-2);border-bottom:1px solid var(--line)}
#mnav.open{display:block}
#mnav a{display:block;padding:15px 32px;font-size:15px;font-weight:600;
  border-bottom:1px solid var(--line);min-height:48px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.9) contrast(1.02)}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 42%,rgba(255,255,255,.64) 72%,rgba(255,255,255,.88) 100%),
    linear-gradient(180deg,transparent 38%,var(--ink) 100%)}
.hero .wrap{padding-top:104px;padding-bottom:92px}
.hero h1{font-size:clamp(40px,7vw,78px);font-weight:900;letter-spacing:-.04em;max-width:16ch}
.hero h1 em{font-style:normal;background:var(--grad-ink);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .lede{margin:26px 0 34px;font-size:19px}
.hero .acts{display:flex;gap:13px;flex-wrap:wrap}
.hero .note{margin-top:26px;font-size:13.5px;color:var(--mute-2);letter-spacing:.02em}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{background:var(--ink-2);padding:26px 24px;text-align:center}
.stats b{display:block;font-family:Archivo;font-size:26px;font-weight:900;letter-spacing:-.03em;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:6px;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.card:hover{border-color:var(--aqua-line);transform:translateY(-3px)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.66}
.card .ico{width:42px;height:42px;border-radius:10px;background:var(--aqua-tint);
  border:1px solid var(--aqua-line);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;font-size:19px}

/* ---------- package cards ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 28px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pkg:hover{border-color:var(--aqua-line);transform:translateY(-3px)}
.pkg.feature{border-color:var(--aqua-line);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.pkg .tag{position:absolute;top:-11px;left:28px;background:var(--grad);color:var(--on-brand);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px}
.pkg h3{font-family:Archivo;font-size:25px;font-weight:900;letter-spacing:-.03em}
.pkg .kicker{margin-top:6px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-2)}
.pkg .price{margin:20px 0 4px;font-family:Archivo;font-size:34px;font-weight:900;
  letter-spacing:-.035em;line-height:1.1;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.pkg .price.tiers{font-size:27px}
.pkg .sizes{font-size:13px;color:var(--mute-2);margin:0 0 20px}
.pkg ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.pkg li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:var(--mute)}
.pkg li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;
  border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);transform:rotate(-45deg)}
.pkg li b{color:var(--paper);font-weight:600}
.pkg li .prot{display:inline-block;margin-left:6px;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--aqua-ink);
  border:1px solid var(--aqua-line);border-radius:99px;padding:1px 8px;vertical-align:1px}
.pkg .note{margin:0 0 20px;padding:12px 14px;background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13.5px;color:var(--mute);line-height:1.55}
.pkg .note b{color:var(--aqua-ink);font-weight:700}
.pkg .varies{font-size:12.5px;color:var(--mute-2);margin:0 0 20px;font-style:italic}
.pkg .btn{margin-top:auto;width:100%}

.pkg.more{align-items:flex-start;justify-content:center;gap:14px;
  background:radial-gradient(520px 260px at 20% 0%,rgba(41,197,232,.14),transparent 70%),var(--ink-2);
  border-style:dashed}
.pkg.more h3{font-size:22px}
.pkg.more p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.66}

/* ---------- price list (à la carte) ---------- */
.plist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.plist .row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:20px 24px;border-bottom:1px solid var(--line)}
.plist .row:last-child{border-bottom:0}
.plist .row:hover{background:var(--surface-2)}
.plist .n{font-weight:600;font-size:16.5px;color:var(--paper)}
.plist .d{display:block;margin-top:6px;font-size:13.5px;color:var(--mute-2);
  line-height:1.6;font-weight:400;max-width:62ch}
.plist .p{font-family:Archivo;font-weight:800;font-size:17px;letter-spacing:-.02em;
  color:var(--aqua-ink);white-space:nowrap;text-align:right}
.plist .p small{display:block;font-family:Inter;font-size:12.5px;font-weight:600;
  color:var(--mute-2);letter-spacing:0;margin-top:4px;white-space:normal}
.row-add{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:14px;font-weight:700;
  color:var(--aqua-ink)}
.row-add:hover{color:var(--teal-ink)}
.row-add.none{color:var(--mute-2);font-weight:500;font-size:13.5px}
.prot-pill{display:inline-block;margin-left:8px;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);
  border:1px solid rgba(79,195,180,.36);border-radius:99px;padding:1px 8px;vertical-align:2px}

.cat-head{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.cat-head h3{font-size:22px}
.cat-head .bar{flex:1;height:1px;background:var(--line)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps .s{position:relative;padding-top:52px}
.steps .s::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:Archivo;font-size:30px;font-weight:900;
  letter-spacing:-.04em;background:var(--grad-ink);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.steps h3{font-size:18px;margin-bottom:8px}
.steps p{margin:0;color:var(--mute);font-size:15px;line-height:1.65}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:980px}
details.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s var(--ease)}
details.q[open]{border-color:var(--aqua-line)}
details.q summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-weight:650;font-size:16.5px;min-height:48px;display:flex;align-items:center}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--aqua);border-bottom:2px solid var(--aqua);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
details.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.q .a{padding:0 24px 22px;color:var(--mute);font-size:15.5px;line-height:1.72}
details.q .a p{margin:0 0 12px}
details.q .a p:last-child{margin-bottom:0}
details.q .a strong{color:var(--paper);font-weight:650}

/* ---------- contact / form ---------- */
.form{display:grid;gap:16px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-2);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;padding:13px 15px;font:inherit;font-size:15.5px;
  background:var(--ink-3);color:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-sm);min-height:48px}
.form textarea{min-height:130px;resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--aqua);
  outline-offset:1px;border-color:transparent}
.form [data-ss-success],.form [data-ss-error]{display:none;padding:13px 15px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600}
.form [data-ss-success]{background:rgba(79,195,180,.12);border:1px solid rgba(79,195,180,.4);color:var(--teal-ink)}
.form [data-ss-error]{background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.36);color:#FF8B8B}

.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:44px;align-items:start}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.cbox h3{font-size:18px;margin-bottom:18px}
.cbox .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cbox .row:last-child{border-bottom:0;padding-bottom:0}
.cbox .row .k{font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-2);min-width:74px;padding-top:3px}
.cbox .row .v{font-size:15.5px;color:var(--paper);font-weight:600}
.cbox .row .v small{display:block;font-weight:400;font-size:13.5px;color:var(--mute-2);margin-top:3px}
.cbox .row .v a:hover{color:var(--aqua-ink)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,rgba(41,197,232,.14) 0%,rgba(79,195,180,.10) 55%,var(--ink-2) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:34px;
  flex-wrap:wrap;padding-top:56px;padding-bottom:56px}
.cta-band h2{font-size:clamp(26px,3.6vw,38px)}
.cta-band p{margin:12px 0 0;color:var(--mute);font-size:16.5px;max-width:52ch}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--ink-2);border-top:1px solid var(--line);padding:60px 0 30px;font-size:15px;color:var(--mute)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
footer h4{font-size:var(--fs-micro);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a:hover{color:var(--aqua-ink)}
footer .about img{height:54px;width:auto;margin-bottom:18px}
footer .about p{margin:0;max-width:40ch;font-size:15px;line-height:1.7}
.fbot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--mute-2)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.social a:hover{border-color:var(--aqua);color:var(--aqua-ink)}

/* ---------- page head ---------- */
.phead{border-bottom:1px solid var(--line);
  background:radial-gradient(900px 320px at 18% -10%,rgba(41,197,232,.13),transparent 70%),var(--ink-2)}
.phead .wrap{padding-top:72px;padding-bottom:64px}
.phead h1{font-size:clamp(34px,5.6vw,58px);font-weight:900;letter-spacing:-.035em}
.phead p{margin:20px 0 0;color:var(--mute);font-size:18px;line-height:1.7;max-width:62ch}
.crumb{font-size:13px;color:var(--mute-2);margin-bottom:18px}
.crumb a:hover{color:var(--aqua-ink)}

/* ---------- assistant (simulated) ---------- */
.ai-launch{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:10px;transition:opacity .25s,transform .25s;
  background:var(--grad);color:var(--on-brand);border:0;border-radius:99px;padding:13px 20px 13px 16px;
  font:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.ai-launch:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ai-launch .dot{width:9px;height:9px;border-radius:50%;background:var(--on-brand);
  box-shadow:0 0 0 0 rgba(4,33,42,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(4,33,42,0)}100%{box-shadow:0 0 0 0 rgba(4,33,42,0)}}

.ai-panel{position:fixed;right:22px;bottom:22px;z-index:130;width:min(408px,calc(100vw - 32px));
  height:min(620px,calc(100vh - 44px));display:none;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow)}
.ai-panel.open{display:flex}
.ai-head{display:flex;align-items:center;gap:12px;padding:15px 16px;
  background:linear-gradient(120deg,rgba(41,197,232,.16),rgba(79,195,180,.10));
  border-bottom:1px solid var(--line)}
.ai-head .av{width:38px;height:38px;border-radius:10px;background:var(--grad);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:18px}
.ai-head .t{flex:1;min-width:0}
.ai-head .t b{display:block;font-family:Archivo;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.ai-head .t span{display:block;font-size:12px;color:var(--teal-ink);font-weight:600;margin-top:2px}
.ai-head button{background:transparent;border:0;color:var(--mute);font-size:22px;line-height:1;
  cursor:pointer;width:38px;height:38px;border-radius:8px}
.ai-head button:hover{background:rgba(255,255,255,.07);color:var(--paper)}

.ai-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:88%;padding:12px 15px;border-radius:14px;font-size:15px;line-height:1.62}
.ai-msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.ai-msg.me{align-self:flex-end;background:var(--grad);color:var(--on-brand);font-weight:600;
  border-bottom-right-radius:4px}
.ai-msg b{color:var(--paper);font-weight:700}
.ai-msg.me b{color:var(--on-brand)}
.ai-msg a{color:var(--aqua-ink);text-decoration:underline;text-underline-offset:2px}
.ai-msg ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px}
.ai-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--mute-2);
  animation:blink 1.3s infinite}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28}30%{opacity:1}}

.ai-chips{display:flex;gap:8px;padding:0 16px 12px;flex-wrap:wrap}
.ai-chips button{background:var(--surface);border:1px solid var(--aqua-line);color:var(--aqua-ink);
  border-radius:99px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s var(--ease)}
.ai-chips button:hover{background:var(--aqua-tint)}

.ai-ask{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--ink-3)}
.ai-ask input{flex:1;min-width:0;padding:11px 14px;font:inherit;font-size:15px;background:var(--ink);
  color:var(--paper);border:1px solid var(--line-2);border-radius:99px;min-height:44px}
.ai-ask input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
.ai-ask button{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--grad);
  color:var(--on-brand);font-size:17px;font-weight:800;cursor:pointer}
.ai-ask button:hover{filter:brightness(1.08)}
.ai-foot{padding:0 16px 12px;font-size:var(--fs-micro);color:var(--mute-2);text-align:center;background:var(--ink-3)}


/* ============================================================
   Quote builder — the hero's second column, and the booking page.
   ============================================================ */
/* start, not center: the card grows through its steps and centred copy would jump with it */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:52px;align-items:start}
.hero-copy{padding-top:28px}
.hero .hero-grid{padding-top:72px;padding-bottom:80px}
.hero-grid h1{font-size:clamp(40px,5.6vw,70px)}
.hero-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px;max-width:52ch}
.hero-points li{position:relative;padding-left:28px;color:var(--mute);font-size:15.5px;line-height:1.6}
.hero-points li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);transform:rotate(-45deg)}
.hero-points b{color:var(--paper);font-weight:700}
.hero-grid .lede{margin:24px 0 26px}

.qt{position:relative;background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--aqua-line);border-radius:18px;padding:24px 24px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:16px}
.qt::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(41,197,232,.7),rgba(79,195,180,.15) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.qt-page{background:var(--surface);backdrop-filter:none}
.qt-head{display:flex;flex-direction:column;gap:14px}
.qt-kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink)}
.qt-kicker i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(79,195,180,.6);
  animation:qtpulse 2.4s infinite}
@keyframes qtpulse{70%{box-shadow:0 0 0 8px rgba(79,195,180,0)}100%{box-shadow:0 0 0 0 rgba(79,195,180,0)}}
.qt-head h2{font-size:26px;letter-spacing:-.03em;margin-top:6px}
.qt-prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:qp}
.qt-prog li{counter-increment:qp;font-size:12px;font-weight:700;color:var(--mute-2);
  padding-top:10px;border-top:3px solid var(--line-2);transition:color .25s var(--ease),border-color .25s var(--ease)}
.qt-prog li::before{content:counter(qp) " · "}
.qt-prog li.done{color:var(--mute);border-top-color:var(--aqua-2)}
.qt-prog li.on{color:var(--paper);border-top-color:var(--aqua)}
.qt:not(.js) .qt-prog{display:none}

.qt-step{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.qt-step[hidden]{display:none}
.qt-step legend{padding:0;margin-bottom:12px;font-family:Archivo;font-size:18px;font-weight:800;
  letter-spacing:-.02em;color:var(--paper);outline:none}
.qt-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute-2);margin:4px 0 -4px}
.qt-label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--mute-2);opacity:.85}
.qt-input{width:100%;padding:12px 14px;font:inherit;font-size:15.5px;background:var(--ink-3);color:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:46px}
textarea.qt-input{min-height:74px;resize:vertical;line-height:1.55}
.qt-input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
.qt-input[aria-invalid="true"]{border-color:#FF8B8B}
.qt-input::placeholder{color:var(--mute-2);opacity:.75}
.qt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qt-two>div{display:flex;flex-direction:column;gap:12px}

/* radio cards */
/* Stacked by default: the hero card is a ~480px column and three across
   squeezed "Large SUV / Exotic" onto four lines. The wide booking-page
   variant has room for a row of three. */
.qt-sizes{display:grid;grid-template-columns:1fr;gap:8px}
.qt-page .qt-sizes{grid-template-columns:repeat(3,1fr)}
.qt-page .qt-size>.box{flex-direction:column;align-items:flex-start;gap:8px}
.qt-page .qt-size .tick{position:absolute;top:12px;right:12px}
.qt-size,.qt-pkg,.qt-addon,.qt-seg label{position:relative;cursor:pointer}
.qt-size input,.qt-pkg input,.qt-seg input{position:absolute;opacity:0;width:1px;height:1px}
.qt-size{display:block}
.qt-size>.box{display:flex;align-items:center;gap:11px;height:100%;padding:12px;border-radius:10px;
  background:var(--ink-3);border:1.5px solid var(--line-2);min-height:64px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.qt-size .ic{flex:none;width:42px;display:flex;align-items:center}
.qt-size .ic svg{width:100%;height:auto;fill:none;stroke:var(--mute-2);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s var(--ease)}
.qt-size .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.qt-size b{font-size:14.5px;font-weight:700;line-height:1.2}
.qt-size small{font-size:12px;color:var(--mute-2);line-height:1.35}
/* a tick that only appears once the option is chosen — the state was otherwise
   carried by border colour alone, which is easy to miss on a phone */
.qt-size .tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;transition:background .2s var(--ease),border-color .2s var(--ease)}
.qt-size input:checked+.box .tick{background:var(--grad);border-color:transparent}
.qt-size input:checked+.box .tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;
  border:solid var(--on-brand);border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
.qt-size input:checked+.box .ic svg{stroke:var(--aqua-ink)}
.qt-size:hover>.box,.qt-pkg:hover{border-color:var(--aqua-line)}
.qt-size input:checked+.box{border-color:var(--aqua);background:var(--aqua-tint)}
.qt-size input:focus-visible+.box,.qt-pkg:has(input:focus-visible),.qt-seg input:focus-visible+span,
.qt-addon:has(input:focus-visible){outline:2px solid var(--aqua);outline-offset:2px}

.qt-pkgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qt-pkg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-radius:10px;
  background:var(--ink-3);border:1.5px solid var(--line-2);min-height:62px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.qt-pkg>span:first-of-type{display:flex;flex-direction:column;gap:2px;min-width:0}
.qt-pkg b{font-size:14.5px;font-weight:700;line-height:1.25}
.qt-pkg small{font-size:12px;color:var(--mute-2);line-height:1.35}
.qt-pkg .qt-price{font-family:Archivo;font-weight:800;font-size:15px;white-space:nowrap;color:var(--aqua-ink)}
.qt-pkg.feature{border-color:var(--aqua-line)}
.qt-pkg:has(input:checked){border-color:var(--aqua);background:var(--aqua-tint)}
.qt-pkg.alc{border-style:dashed}

.qt-help{border:1px solid var(--line);border-radius:10px;background:var(--ink-2)}
.qt-help summary{cursor:pointer;list-style:none;padding:12px 14px;font-size:14px;font-weight:700;color:var(--aqua-ink);
  min-height:44px;display:flex;align-items:center}
.qt-help summary::-webkit-details-marker{display:none}
.qt-help summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1}
.qt-help[open] summary::after{content:"–"}
.qt-recs{display:grid;gap:6px;padding:0 10px 10px}
.qt-recs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  font:inherit;color:var(--paper);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;
  padding:10px 12px;min-height:44px}
.qt-recs button:hover{border-color:var(--aqua)}
.qt-recs b{font-size:14px}
.qt-recs span{font-size:12.5px;color:var(--mute-2)}

/* extras */
.qt-scroll{max-height:340px;overflow-y:auto;margin-right:-8px;padding-right:8px;display:grid;gap:14px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.qt-page .qt-scroll{max-height:none;overflow:visible}
.qt-cat h3{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);
  margin:0 0 8px;font-family:Inter}
.qt-addons{display:grid;gap:6px}
.qt-addon{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;background:var(--ink-3);
  border:1px solid var(--line);min-height:46px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.qt-addon input{appearance:none;flex:none;width:19px;height:19px;margin:0;border-radius:5px;border:1.5px solid var(--line-2);
  background:var(--ink);position:relative;cursor:pointer}
.qt-addon input:checked{background:var(--grad);border-color:transparent}
.qt-addon input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid var(--on-brand);border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
.qt-addon:has(input:checked){border-color:var(--aqua-line);background:var(--aqua-tint)}
.qt-addon:hover{border-color:var(--line-2)}
.qt-addon .n{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.qt-addon .n small{display:block;font-size:12px;font-weight:400;color:var(--mute-2);margin-top:2px}
.qt-addon .n small.pr{color:var(--teal-ink);font-weight:600}
.qt-addon .p{font-family:Archivo;font-weight:800;font-size:14px;color:var(--aqua-ink);white-space:nowrap;text-align:right}
.qt-addon .p s{color:var(--mute-2);font-weight:600;margin-right:4px}
.qt-addon.inc,.qt-addon.blocked{cursor:default}
.qt-addon.inc .p{color:var(--teal-ink);font-family:Inter;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.qt-addon.inc input{border-style:dashed}
.qt-addon.blocked{opacity:.62}
.qt-addon.blocked .p{font-family:Inter;font-weight:600;font-size:12px;color:var(--mute-2);white-space:normal;max-width:12ch}

.qt-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.qt-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:8px;
  background:var(--ink-3);border:1.5px solid var(--line-2);font-size:14px;font-weight:600}
.qt-seg input:checked+span{border-color:var(--aqua);background:var(--aqua-tint);color:var(--paper)}

.qt-hint{margin:0;padding:11px 13px;border-radius:9px;background:rgba(79,195,180,.1);border:1px solid rgba(79,195,180,.34);
  color:var(--teal-ink);font-size:13.5px;line-height:1.55}
.qt-err{margin:0;color:#FF8B8B;font-size:13.5px;font-weight:600}

/* summary + nav */
.qt-sum{border-top:1px solid var(--line);padding-top:14px}
.qt-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.qt-total span{font-size:13px;color:var(--mute);line-height:1.4}
.qt-total b{font-family:Archivo;font-size:32px;font-weight:900;letter-spacing:-.035em;line-height:1;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.qt-total b.empty{background:none;-webkit-text-fill-color:currentColor;color:var(--mute-2);font-size:17px;font-weight:700;letter-spacing:-.01em}
.qt-bar{display:flex;flex-direction:column;gap:14px}
.qt-lines{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.qt-lines li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--mute)}
.qt-lines li b{color:var(--paper);font-weight:600;white-space:nowrap}
.qt-lines li.sum{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;color:var(--paper);font-weight:700}
.qt-lines li.sum b{color:var(--aqua-ink);font-family:Archivo;font-size:17px;font-weight:900}
.qt-nav{display:flex;gap:10px;justify-content:space-between}
.qt-nav [data-back]{flex:0 0 auto}
.qt-nav .primary{flex:1}
.qt-nav [hidden]{display:none}
.qt:not(.js) .qt-nav [data-next],.qt:not(.js) .qt-nav [data-back],.qt:not(.js) .qt-sum{display:none}
.qt-fine{margin:0;font-size:12px;color:var(--mute-2);line-height:1.55}
.qt-fine a,.qt-fail a,.qt-done a{color:var(--aqua-ink);font-weight:700}
.qt-fail{margin:0;padding:11px 13px;border-radius:9px;background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.36);
  color:#FF8B8B;font-size:14px;font-weight:600}

.qt.sent>:not(.qt-done){display:none}
.qt-done{display:flex;flex-direction:column;gap:12px;outline:none}
.qt-done[hidden]{display:none}
.qt-done h2{font-size:26px}
.qt-done p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.65}
.qt-done .btn{align-self:flex-start;margin-top:6px}
.qt-done .tick{width:52px;height:52px;border-radius:50%;background:var(--grad);position:relative}
.qt-done .tick::after{content:"";position:absolute;left:19px;top:13px;width:11px;height:21px;
  border:solid var(--on-brand);border-width:0 3.5px 3.5px 0;transform:rotate(42deg)}

/* ============================================================
   Home sections added with the quote builder
   ============================================================ */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--aqua-ink);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

/* comparison table */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cmp-wrap:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.cmp{width:100%;border-collapse:collapse;min-width:780px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp thead th{position:sticky;top:0;background:var(--ink-2);font-weight:700}
.cmp thead th b{display:block;font-family:Archivo;font-size:16px;font-weight:800;letter-spacing:-.02em}
.cmp thead th span{display:block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--aqua-ink)}
.cmp thead th:first-child,.cmp tbody th{text-align:left}
.cmp thead th:first-child{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.cmp tbody th{font-weight:500;color:var(--mute);min-width:240px}
.cmp tbody tr:hover{background:var(--surface-2)}
.cmp .feature{background:rgba(41,197,232,.06)}
.cmp thead .feature{background:linear-gradient(180deg,rgba(41,197,232,.16),rgba(41,197,232,.06))}
.cmp .yes{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--aqua-tint);border:1px solid var(--aqua-line);color:var(--aqua-ink);font-weight:900;font-size:13px}
.cmp .no{color:var(--mute-2);opacity:.6}
.cmp .val{font-size:12.5px;font-weight:700;color:var(--teal-ink);letter-spacing:.02em}
.cmp tfoot td,.cmp tfoot th{border-bottom:0;padding-top:16px;padding-bottom:18px}
.cmp tfoot .btn{min-width:96px}

/* pricing explained */
.price-why .card{display:flex;flex-direction:column}
.price-why .n{font-family:Archivo;font-size:14px;font-weight:900;color:var(--aqua-ink);letter-spacing:.06em;margin-bottom:14px}
.price-why .tiers{margin-top:auto;padding-top:18px;display:grid;gap:8px}
.price-why .tiers div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;
  background:var(--ink-3);border:1px solid var(--line);font-size:14px}
.price-why .tiers span{color:var(--mute)}
.price-why .tiers b{font-family:Archivo;color:var(--aqua-ink);font-weight:800}
.price-why .tip{margin-top:auto!important;padding-top:18px;color:var(--teal-ink)!important;font-weight:600}

/* protection ladder */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rung{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.rung.top{border-color:var(--aqua-line);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.rung .bar{height:8px;border-radius:99px;background:var(--ink-3);overflow:hidden;margin-bottom:22px}
.rung .bar i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:99px}
.rung h3{font-size:18px}
.rung .len{margin:8px 0 12px;font-family:Archivo;font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.1;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.rung p{margin:0;color:var(--mute);font-size:15px;line-height:1.62}
.rung .cost{margin-top:auto;padding-top:18px;font-size:13.5px;font-weight:700;color:var(--paper)}

/* paint correction */
.correct .card{display:flex;flex-direction:column}
.steps-dots{display:flex;gap:6px;margin-bottom:18px}
.steps-dots i{width:28px;height:6px;border-radius:99px;background:var(--grad)}
.steps-dots i.off{background:var(--ink-3);border:1px solid var(--line-2)}
.correct .when{margin:0 0 12px!important;color:var(--teal-ink)!important;font-weight:600;font-size:14.5px!important}
.correct .foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.correct .foot b{font-family:Archivo;font-size:20px;font-weight:900;color:var(--aqua-ink)}
.correct .foot a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:700;color:var(--paper)}
.correct .foot a:hover{color:var(--aqua-ink)}

/* mobile service */
.mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mobile-grid .h2{font-size:clamp(30px,4.4vw,46px)}
.mobile-grid .lede{margin-top:18px}
.mobile-grid .acts{display:flex;gap:12px;flex-wrap:wrap}
.prep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.prep h3{font-size:19px;margin-bottom:18px}
.prep ol{list-style:none;margin:0;padding:0;counter-reset:pr;display:grid;gap:16px}
.prep li{counter-increment:pr;position:relative;padding-left:44px;color:var(--mute);font-size:15px;line-height:1.6}
.prep li::before{content:counter(pr);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--aqua-tint);border:1px solid var(--aqua-line);color:var(--aqua-ink);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.prep li b{display:block;color:var(--paper);font-weight:700}

@media (max-width:1040px){
  /* On a phone the quote builder was ~1000px down the page, behind the whole
     hero pitch. Stacked, it now follows the headline and lede directly and the
     supporting points fall below it — the tool stays the first thing you meet. */
  .hero-grid{display:flex;flex-direction:column;gap:28px}
  .hero-copy{display:contents}
  .hero-lead{order:1}
  .hero-quote{order:2}
  .hero-points{order:3;margin-bottom:0}
  .hero .acts{order:4}
  .hero .note{order:5;margin-top:0}
  .hero .hero-grid{padding-top:60px;padding-bottom:64px}
  .hero-quote{max-width:620px}
  .ladder{grid-template-columns:1fr}
  .mobile-grid{grid-template-columns:1fr;gap:32px}
  .contact-grid .qt{order:0}
}
@media (max-width:760px){
  .hero .hero-grid{padding-top:48px;padding-bottom:48px}
  .qt{padding:20px 16px 16px;border-radius:16px}
  .qt::before{border-radius:16px}
  .qt-sizes,.qt-page .qt-sizes{grid-template-columns:1fr}
  .qt-page .qt-size>.box{flex-direction:row;align-items:center;gap:11px}
  .qt-page .qt-size .tick{position:static}
  .qt-pkgs,.qt-two{grid-template-columns:1fr}
  /* The card used to grow from 630px to 1810px across the four steps, which
     shoved everything below the hero down the page each time you pressed Next.
     Bounding the step body instead keeps the card one height throughout: the
     content scrolls inside it, and the estimate and Next stay put. */
  .qt-step{max-height:52vh;min-height:300px;overflow-y:auto;overscroll-behavior:contain;
    margin-right:-6px;padding-right:6px}
  .qt-scroll{max-height:none;overflow:visible;margin-right:0;padding-right:0}
  .qt-total b{font-size:28px}
  .qt-prog li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 23 extras make step three long on a phone, so the total and Next ride along */
  .qt-bar{position:sticky;bottom:0;z-index:2;margin:0 -16px -16px;padding:12px 16px 14px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--aqua-line);
    border-radius:0 0 16px 16px}
  .qt-page .qt-bar{background:var(--surface)}
  .qt-bar .qt-sum{border-top:0;padding-top:0}
  .qt-bar .qt-lines{max-height:132px;overflow-y:auto}
  .qt.sent .qt-bar{display:none}
  body.quote-in-view .ai-launch{opacity:0;pointer-events:none;transform:translateY(12px)}
  .prep{padding:22px 18px}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .g4,.steps{grid-template-columns:repeat(2,1fr)}
  .pkgs{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:900px){
  .nav .links{display:none}
  .burger{display:flex}
  .nav .cta .btn:not(.primary){display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  #mnav a{padding:15px 20px}
  .pad{padding:64px 0}
  .pad-sm{padding:44px 0}
  .hero .wrap{padding-top:64px;padding-bottom:56px}
  .g2,.g3,.g4,.pkgs,.steps,.fgrid{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .plist .row{flex-direction:column;gap:8px}
  .plist .p{text-align:left}
  .ai-launch{right:14px;bottom:14px;padding:12px 17px 12px 14px;font-size:14px}
  .ai-panel{right:8px;left:8px;bottom:8px;width:auto;height:min(78vh,600px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Punch-list components
   ============================================================ */

/* price code — vehicle icons standing in for the three size tiers */
.pcode{display:flex;align-items:flex-end;gap:14px;margin:2px 0 6px}
.pcode .pc{display:flex;align-items:flex-end;justify-content:center;flex:1;max-width:58px}
.pcode svg{width:100%;height:auto;fill:none;stroke:var(--aqua-ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pcode .pc:nth-child(1) svg{width:82%}
.pcode .pc:nth-child(2) svg{width:92%}
.pcode-key{margin:0 0 18px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:var(--mute-2)}
.pkg .starting{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--mute-2)}

/* social icon buttons */
.social a.soc{width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--mute);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.social a.soc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.social a.soc:hover{color:var(--on-brand);background:var(--grad);border-color:transparent;transform:translateY(-2px)}

/* testimonials (renders only when there are real reviews) */
.quote-card blockquote{margin:0 0 16px;font-size:16.5px;line-height:1.66;color:var(--paper)}
.quote-card .by{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.quote-card .by b{font-size:15px}
.quote-card .by span{font-size:13px;color:var(--mute-2)}

/* à la carte category nav + drawer */
.catnav{display:flex;flex-direction:column;gap:14px}
.catnav-label{font-size:var(--fs-micro);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2)}
.catnav-btns{display:flex;gap:12px;flex-wrap:wrap}
.catnav-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;cursor:pointer;
  font:inherit;color:var(--paper);background:var(--surface);border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);padding:14px 20px;min-height:48px;font-size:16px;font-weight:700;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.catnav-btn:hover{border-color:var(--aqua);transform:translateY(-2px)}
.catnav-btn small{font-size:12.5px;font-weight:500;color:var(--mute-2)}

body.drawer-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.drawer-back{position:fixed;inset:0;z-index:150;background:rgba(8,26,38,.42);backdrop-filter:blur(3px)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(560px,100vw);
  display:flex;flex-direction:column;background:var(--ink);border-left:1px solid var(--line);
  box-shadow:var(--shadow)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid var(--line);background:var(--ink-2)}
.drawer-head h3{font-size:20px}
.drawer-x{width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--paper);font-size:24px;line-height:1;cursor:pointer}
.drawer-x:hover{border-color:var(--aqua);color:var(--aqua-ink)}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px 32px}
.drawer-body .plist{border:0;background:transparent}
.drawer-body .plist .row{padding:16px 0}
@media (max-width:600px){ .drawer{width:100vw} .drawer-body{padding:16px 18px 28px} }

/* type-ahead */
.qt-combo{position:relative}
.qt-sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:6px;
  list-style:none;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);max-height:236px;overflow-y:auto}
.qt-sugg li{padding:10px 12px;border-radius:6px;font-size:15px;cursor:pointer;min-height:42px;
  display:flex;align-items:center}
.qt-sugg li:hover,.qt-sugg li.on{background:var(--aqua-tint);color:var(--aqua-ink)}

/* ============================================================
   Admin panel. Standalone page — reuses the site's tokens and
   buttons so it looks like the same product, not a bolt-on.
   ============================================================ */
.a-body{background:var(--ink-2);min-height:100vh}
.a-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;
  background:radial-gradient(900px 420px at 50% -10%,rgba(41,197,232,.14),transparent 70%)}
.a-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)}
.a-card img{height:52px;width:auto;margin-bottom:6px}
.a-card h1{font-size:24px}
.a-card input{width:100%;padding:12px 14px;font:inherit;font-size:15.5px;background:var(--ink-3);
  color:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:46px}
.a-card input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
.a-card .btn{margin-top:6px}
.a-narrow{max-width:460px;margin:0}
.a-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute-2);margin-top:6px}
.a-muted{color:var(--mute);font-size:15px;margin:0}
.a-fine{margin:6px 0 0;font-size:12.5px;color:var(--mute-2);line-height:1.55}
.a-note{margin:4px 0 0;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600}
.a-note.good{background:rgba(79,195,180,.12);border:1px solid rgba(79,195,180,.4);color:var(--teal-ink)}
.a-note.bad{background:rgba(198,40,40,.08);border:1px solid rgba(198,40,40,.32);color:#A3231F}

.a-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:14px 26px;background:var(--ink);border-bottom:1px solid var(--line)}
.a-brand{display:flex;align-items:center;gap:12px}
.a-brand img{height:34px;width:auto}
.a-brand span{font-size:var(--fs-micro);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)}
.a-tabs{display:flex;gap:6px}
.a-tabs button{font:inherit;font-size:14.5px;font-weight:700;padding:10px 16px;min-height:44px;
  border-radius:var(--r-sm);border:1.5px solid transparent;background:transparent;color:var(--mute);cursor:pointer}
.a-tabs button:hover{color:var(--paper)}
.a-tabs button[aria-selected="true"]{background:var(--aqua-tint);border-color:var(--aqua-line);color:var(--aqua-ink)}
.a-head-r{display:flex;gap:8px}
.a-warn{margin:0;padding:14px 26px;background:rgba(224,178,102,.14);border-bottom:1px solid rgba(224,178,102,.4);
  font-size:14.5px;color:#7A5A12}
.a-main{padding:26px}
.a-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.a-bar h2{font-size:22px;margin-bottom:6px}
.a-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.a-filter{padding:10px 14px;font:inherit;font-size:14.5px;min-height:44px;min-width:200px;
  background:var(--surface);color:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.a-dirty{font-size:13px;font-weight:700;color:var(--aqua-ink)}

.a-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.a-sec h2{font-size:17px;margin-bottom:16px}
.a-sec h2 small{font-size:12px;font-weight:600;color:var(--mute-2);margin-left:6px}
.a-field{display:block;margin-bottom:16px}
.a-field .a-label{margin:0 0 6px}
.a-field .a-label i{font-style:normal;color:var(--aqua-ink);letter-spacing:.04em}
.a-field input,.a-field textarea{width:100%;padding:10px 12px;font:inherit;font-size:14.5px;
  background:var(--ink-3);color:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:44px}
.a-field textarea{line-height:1.55;resize:vertical}
.a-field input:focus,.a-field textarea:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
.a-field.edited input,.a-field.edited textarea{border-color:var(--aqua)}
.a-orig{display:block;margin-top:5px;font-size:12.5px;color:var(--mute-2);line-height:1.5}

.a-inq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:12px}
.a-inq header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.a-inq header b{font-size:15.5px}
.a-inq header a{font-size:14px;color:var(--aqua-ink);font-weight:600}
.a-inq header time{margin-left:auto;font-size:12.5px;color:var(--mute-2)}
.a-inq pre{margin:0;font:inherit;font-size:14.5px;line-height:1.6;color:var(--mute);white-space:pre-wrap;word-break:break-word}
.a-empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);padding:44px 24px;
  text-align:center;color:var(--mute)}
.a-empty b{display:block;font-family:Archivo;font-size:18px;color:var(--paper);margin-bottom:6px}

@media (max-width:760px){
  .a-head{padding:12px 16px;gap:12px}
  .a-main{padding:18px 14px}
  .a-warn{padding:12px 16px}
  .a-tabs{order:3;width:100%}
  .a-tabs button{flex:1}
}
.a-tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;
  border-radius:99px;border:1px solid var(--line-2);color:var(--mute-2)}
.a-tag.on{border-color:rgba(79,195,180,.45);color:var(--teal-ink);background:rgba(79,195,180,.12)}

/* Hero brand lockup — the wordmark leads the page, with the tagline under
   the headline. It used to sit only in the footer's bottom bar. */
.hero-mark{height:72px;width:auto;margin-bottom:22px}
.hero-sub{margin:14px 0 0;font-family:Archivo,Inter,sans-serif;font-size:clamp(17px,2.2vw,22px);
  font-weight:700;letter-spacing:-.01em;color:var(--aqua-ink)}
@media (max-width:760px){ .hero-mark{height:56px;margin-bottom:16px} }

/* ---- admin: pricing ---- */
.a-prices{display:grid;gap:8px}
.a-price-row{display:grid;grid-template-columns:minmax(160px,1.1fr) 2fr;gap:16px;align-items:start;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-3)}
.a-price-row.edited{border-color:var(--aqua)}
.a-price-name{font-size:14.5px;font-weight:650;line-height:1.35;padding-top:6px}
.a-price-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.a-price-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.a-price-field>span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-2)}
.a-price-field input{width:100%;padding:9px 11px;font:inherit;font-size:14.5px;background:var(--surface);
  color:var(--paper);border:1px solid var(--line-2);border-radius:6px;min-height:42px}
.a-price-field input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
.a-price-field i{font-style:normal;font-size:12px;color:var(--mute-2)}

/* ---- admin: collapsible wording sections ---- */
details.a-fold{padding:0;overflow:hidden}
details.a-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 22px;min-height:52px}
details.a-fold>summary::-webkit-details-marker{display:none}
details.a-fold>summary b{font-family:Archivo;font-size:16px}
details.a-fold>summary span{font-size:13px;color:var(--mute-2)}
details.a-fold>summary::after{content:"";width:9px;height:9px;flex:none;margin-left:4px;
  border-right:2px solid var(--mute-2);border-bottom:2px solid var(--mute-2);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
details.a-fold[open]>summary::after{transform:translateY(2px) rotate(225deg)}
details.a-fold[open]>summary{border-bottom:1px solid var(--line)}
.a-group{padding:18px 22px;border-bottom:1px solid var(--line)}
.a-group:last-child{border-bottom:0}
.a-group h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua-ink);
  margin-bottom:14px}
@media (max-width:760px){
  .a-price-row{grid-template-columns:1fr;gap:10px}
  .a-price-name{padding-top:0}
  .a-group,details.a-fold>summary{padding-left:16px;padding-right:16px}
}
.pkg .price .sep{font-style:normal;margin:0 6px;opacity:.55}
.pkg .price .cur{font-style:normal;margin-right:1px}
.plist .p .cur{font-style:normal}
.pkg .price .pre{font-size:.62em}
.plist .p .pw{font-family:Inter;font-size:13px;font-weight:600;color:var(--mute-2);letter-spacing:0}