/* A Plus Auto — site styles
   Concept: "under one roof". A garage façade drawn in type and line: a silver roofline,
   four roll-up bay doors for the four kinds of work, red reserved for actions.
   ------------------------------------------------------------------------- */

/* ---------- Fonts (self-hosted, SIL Open Font License — see /assets/fonts) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations'), url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --ink: #000000;          /* logo black — header, hero, offer band */
  --graphite: #1f2328;     /* main dark surface */
  --graphite-2: #2b3036;   /* raised dark surface */
  --silver: #c3c9cf;       /* lines + text on dark */
  --silver-2: #9aa2aa;     /* secondary text on dark */
  --steel-ink: #535b63;    /* secondary text on light (AA on concrete) */
  --concrete: #eef0f2;     /* light content surface — cool, not cream */
  --steel: #dde2e6;        /* alt light surface */
  --paper: #fbfcfc;        /* form cards */
  --line: #c9cfd5;         /* hairlines on light */
  --text: #1a1d21;
  --red: #d0141f;          /* logo red — actions and motion accents */
  --red-hover: #a80f18;
  --red-ink: #a5141e;      /* red text on light (AA) */
  --focus-light: #c8202b;
  --focus-dark: #ffffff;

  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bar-h: 0px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--concrete);
  padding-bottom: var(--bar-h);
  overflow-x: clip;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.08; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .utility :focus-visible, .hero :focus-visible,
.page-hero :focus-visible, .section-black :focus-visible, .section-graphite :focus-visible,
.site-footer :focus-visible, .mobile-bar :focus-visible, .nl :focus-visible { outline-color: var(--focus-dark); }
main:focus { outline: none; }
/* slide-in motion starts elements off to the side; clip so the page never scrolls sideways */
main { overflow-x: clip; } /* clip (not hidden) keeps the sticky header working */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--text); padding: 10px 16px; border: 0; border-radius: var(--radius); font-weight: 700; cursor: pointer; }
.skip:focus { top: 12px; }

.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Type helpers ---------- */
.h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); color: var(--graphite); }
.h2-light { color: #fff; }
.h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-stretch: 108%; color: var(--graphite); margin-bottom: .6em; }
.h4 { font-size: 1.15rem; font-stretch: 104%; margin-bottom: .4em; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: var(--steel-ink); max-width: 38em; }
.lede-light { color: var(--silver); }
.lede a { color: var(--graphite); font-weight: 600; }
.prose { max-width: 42rem; }
.prose .h3 { margin-top: 1.6em; }
.prose .h3:first-child { margin-top: 0; }
.prose a { color: var(--red-ink); font-weight: 600; }
.prose-narrow { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.25rem;
  font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: 1rem; line-height: 1.15;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: .85rem 1.5rem; font-size: 1.06rem; }
.btn-sm { min-height: 42px; padding: .5rem 1rem; font-size: .95rem; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); }
.btn-ghost { border-color: var(--silver); color: #fff; background: transparent; }
.btn-ghost:hover { background: #fff; color: var(--graphite); border-color: #fff; }
.btn-outline { border-color: var(--graphite); color: var(--graphite); background: transparent; }
.btn-outline:hover { background: var(--graphite); color: #fff; }
.btn-dark { background: var(--graphite); color: #fff; }
.btn-dark:hover { background: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-actions.stack { flex-direction: column; align-items: stretch; }

/* ---------- Utility bar + header ---------- */
.utility { background: var(--ink); color: var(--silver); font-size: .92rem; }
.utility-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.utility-note { margin: 0; padding: 8px 0; }
.utility-call { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.utility-call:hover { text-decoration: underline; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(195, 201, 207, .18); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand-mark { width: 46px; height: 38px; color: var(--silver); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--display); font-weight: 900; font-stretch: 122%; font-size: 1.32rem; letter-spacing: -.01em; }
.brand-sub { font-size: .8rem; color: var(--silver-2); margin-top: 3px; letter-spacing: .01em; }
.brand-logo { height: 56px; width: auto; display: block; }
.brand-footer .brand-logo { height: auto; width: 180px; }
.brand-footer { flex-direction: column; align-items: flex-start; gap: 10px; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; gap: 24px; list-style: none; }
.site-nav a:not(.btn) { color: var(--silver); text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.site-nav a:not(.btn):hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }

.nav-toggle { display: none; align-items: center; gap: 10px; background: none; border: 1.5px solid rgba(195, 201, 207, .5); border-radius: var(--radius); color: #fff; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease), opacity .2s; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .utility-note { font-size: .85rem; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid rgba(195, 201, 207, .18);
    padding: 8px var(--gutter) 20px; display: none;
  }
  .js .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid rgba(195, 201, 207, .14); }
  .site-nav a[aria-current="page"] { border-bottom-color: rgba(195, 201, 207, .14); box-shadow: inset 4px 0 0 var(--red); padding-left: 14px; }
  .nav-cta { margin-top: 16px; }
  .no-js .site-nav { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .brand-logo { height: 46px; }
  .utility-note { display: none; }
  .utility-in { justify-content: center; }
  .brand-sub { display: none; }
  .brand-name { font-size: 1.15rem; }
  .brand-mark { width: 38px; height: 32px; }
}

/* ---------- Hero: the façade ---------- */
.hero { position: relative; background: radial-gradient(60% 46% at 50% 26%, rgba(208, 20, 31, .26), transparent 72%), var(--ink); color: #fff; padding: clamp(28px, 5vw, 64px) 0 0; overflow: hidden; }
.facade { position: relative; }
.roof { width: 100%; height: clamp(64px, 11vw, 150px); overflow: visible; }
.roof-line { fill: none; stroke: var(--silver); stroke-width: 2.5; stroke-linejoin: miter; }
.facade-sign { text-align: center; max-width: 920px; margin: clamp(-30px, -2vw, -10px) auto 0; padding: 0 0 clamp(40px, 6vw, 72px); }
.sign-name { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: 1.05rem; color: #fff; margin: 0 0 clamp(18px, 3vw, 28px); }
.sign-name span { display: block; font-family: var(--body); font-weight: 600; font-size: .9rem; color: var(--silver-2); margin-top: 2px; }
.hero-h { font-size: clamp(2.5rem, 6.6vw, 5.6rem); font-stretch: 116%; font-weight: 900; letter-spacing: -.02em; line-height: .98; }
.hero-sub { color: var(--silver); font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 40em; margin: 22px auto 26px; }
.facade-sign .hero-actions { justify-content: center; }
.hero-link { margin: 22px 0 0; }
.hero-link a { color: #fff; font-weight: 600; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .3em; }

.bays {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 6px solid var(--silver); border-left: 6px solid var(--silver); border-right: 6px solid var(--silver);
}
.bays li + li { border-left: 6px solid var(--silver); }
.bay { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(200px, 22vw, 260px); padding: 22px 20px 26px; text-decoration: none; color: #fff; background: var(--ink); overflow: hidden; }
.bay-door {
  position: absolute; inset: 0 0 auto 0; height: 52%;
  background: repeating-linear-gradient(180deg, rgba(195, 201, 207, .16) 0 2px, transparent 2px 13px), var(--graphite-2);
  border-bottom: 3px solid var(--red);
  transform-origin: top; transition: scale .45s var(--ease);
}
.bay-name { position: relative; font-family: var(--display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.1; }
.bay-desc { position: relative; color: var(--silver); font-size: .98rem; line-height: 1.45; margin-top: 6px; }
.bay:hover .bay-door, .bay:focus-visible .bay-door { scale: 1 .22; }
.bay:focus-visible { outline-offset: -6px; }

@media (max-width: 820px) {
  .bays { grid-template-columns: 1fr 1fr; }
  .bays li:nth-child(3) { border-left: 0; }
  .bays li:nth-child(n+3) { border-top: 6px solid var(--silver); }
  .bay { min-height: 190px; padding: 16px 14px 18px; }
  .bay-door { height: 40%; }
}
@media (max-width: 420px) {
  .bay-desc { font-size: .9rem; }
  .bays, .bays li + li, .bays li:nth-child(n+3) { border-width: 4px; }
  .bays li:nth-child(3) { border-left: 0; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-light { background: var(--concrete); }
.section-steel { background: var(--steel); }
.section-black { background: var(--ink); color: #fff; }
.section-graphite { background: var(--graphite); color: #fff; }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.split-head .lede { margin: 0; }
@media (max-width: 820px) { .split-head { grid-template-columns: 1fr; } }

/* Process — a real sequence, so it is numbered */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step { counter-increment: step; border-top: 2px solid var(--graphite); padding-top: 22px; position: relative; }
.step::before { content: counter(step); display: block; font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: 2.6rem; line-height: 1; color: var(--graphite); margin-bottom: 18px; }
.step::after { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--red); }
.step-h { font-size: 1.3rem; font-stretch: 108%; margin-bottom: .5em; color: var(--graphite); }
.step p { color: var(--steel-ink); margin: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; gap: 40px 28px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Competing-estimate offer */
.offer { position: relative; }
.offer::before { content: ""; position: absolute; left: 0; top: 0; width: min(38vw, 460px); height: 6px; background: var(--red); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.offer-fine { color: var(--silver-2); max-width: 36em; border-left: 3px solid var(--red); padding-left: 16px; }
.offer-actions { margin-top: 28px; }
.offer-art { justify-self: center; width: min(100%, 380px); }
.sheet { width: 100%; height: auto; }
.sheet-paper { fill: var(--concrete); }
.sheet-ink { fill: #9aa2aa; }
.sheet-faint { fill: #cdd3d8; }
.sheet-rule { stroke: #9aa2aa; stroke-width: 2; }
.sheet-circle, .sheet-tick { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) { .offer-grid { grid-template-columns: 1fr; } .offer-art { width: min(80%, 320px); } }

/* Family */
.family-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 80px); align-items: start; }
.family-kicker { color: var(--steel-ink); font-weight: 600; margin-bottom: 12px; }
.names { font-size: clamp(2.6rem, 6vw, 5rem); font-stretch: 122%; font-weight: 900; line-height: .95; letter-spacing: -.025em; color: var(--graphite); }
.family-copy p { font-size: 1.15rem; }
.link-arrowless { color: var(--red-ink); font-weight: 700; }
.values { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: clamp(16px, 3vw, 32px) 0 0; }
.values > div { border-top: 1px solid var(--line); padding-top: 18px; }
.values dt { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1.2rem; color: var(--graphite); }
.values dd { margin: 6px 0 0; color: var(--steel-ink); }
@media (max-width: 820px) { .family-grid, .values { grid-template-columns: 1fr; } }

/* Location */
.loc-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.loc-address { font-family: var(--display); font-weight: 700; font-stretch: 108%; font-size: 1.3rem; line-height: 1.35; margin: 20px 0 14px; color: var(--graphite); }
.hours-note { font-size: 1rem; color: var(--steel-ink); background: rgba(255, 255, 255, .6); border-left: 3px solid var(--graphite); padding: 10px 14px; }
.map-wrap { position: relative; aspect-ratio: 4 / 3; background: #cfd5da; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-section { padding: 0 0 var(--section); }
.map-section .map-wrap { aspect-ratio: 21 / 9; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } .map-section .map-wrap { aspect-ratio: 4 / 3; } }

/* FAQ */
.faq-wrap { max-width: 960px; }
.faq { border-top: 2px solid var(--graphite); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--graphite); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red-ink); }
.faq-sign { position: relative; width: 18px; height: 18px; flex: none; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }
.faq-a { padding: 0 4px 22px; max-width: 46em; color: var(--steel-ink); }
.faq-a a { color: var(--red-ink); font-weight: 600; }
.faq-cta { margin-top: 48px; }
.faq-cta p { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--graphite); margin-bottom: 12px; }

/* Final CTA */
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 80px); align-items: center; }
.final-grid .hero-actions { margin-top: 24px; }
@media (max-width: 820px) { .final-grid { grid-template-columns: 1fr; } }

.call-list { list-style: none; display: grid; gap: 12px; }
.call-big { display: flex; flex-direction: column; text-decoration: none; padding: 14px 18px; border: 1.5px solid currentColor; border-radius: var(--radius); transition: background-color .18s, color .18s, border-color .18s; }
.call-label { font-size: .92rem; font-weight: 600; opacity: .8; }
.call-num { font-family: var(--display); font-weight: 900; font-stretch: 116%; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.01em; }
.section-graphite .call-big { border-color: rgba(195, 201, 207, .45); color: #fff; }
.section-graphite .call-big:hover { background: var(--red); border-color: var(--red); }
.contact-side .call-big { color: var(--graphite); border-color: var(--graphite); }
.contact-side .call-big:hover { background: var(--graphite); color: #fff; }
.sms-note { font-size: .95rem; margin-top: 12px; }
.section-graphite .sms-note { color: var(--silver-2); }
.contact-side .sms-note { color: var(--steel-ink); }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; background: radial-gradient(70% 80% at 50% 0%, rgba(208, 20, 31, .2), transparent 70%), var(--ink); color: #fff; padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.roof-small { height: clamp(48px, 8vw, 100px); }
.page-hero-in { text-align: center; }
.page-h { font-size: clamp(2.2rem, 5vw, 4.2rem); font-stretch: 116%; font-weight: 900; letter-spacing: -.02em; line-height: 1; max-width: 16ch; margin: clamp(-8px, -1vw, 0px) auto 0; }
.page-lede { color: var(--silver); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 40em; margin: 20px auto 0; }

/* ---------- Services ---------- */
.svc-list { display: grid; gap: 0; }
.svc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 72px); padding: clamp(36px, 5vw, 56px) 0; border-top: 2px solid var(--graphite); }
.svc:last-child { border-bottom: 2px solid var(--graphite); }
.svc-name { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-stretch: 118%; color: var(--graphite); position: relative; padding-top: 14px; }
.svc-name::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 4px; background: var(--red); }
.svc-intro { font-size: 1.18rem; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.svc-h { font-family: var(--body); font-weight: 700; font-stretch: 100%; font-size: 1rem; color: var(--steel-ink); letter-spacing: 0; margin-bottom: 10px; }
.ticks { list-style: none; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--red); }
.prose .ticks { margin-bottom: 1em; }
.band { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.band .lede { margin: 12px 0 0; }
@media (max-width: 820px) { .svc, .svc-cols { grid-template-columns: 1fr; } }

/* ---------- Estimate + contact pages ---------- */
.est-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.est-info .h3 { margin-top: 1.8em; }
.est-info .h3:first-child { margin-top: 0; }
.mini-steps { counter-reset: m; list-style: none; display: grid; gap: 16px; }
.mini-steps li { counter-increment: m; position: relative; padding-left: 44px; }
.mini-steps li::before { content: counter(m); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--graphite); color: #fff; font-family: var(--display); font-weight: 800; border-radius: 2px; }
.honest { margin-top: 32px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); }
.honest p { margin: 0; color: var(--steel-ink); }
.est-call { margin-top: 24px; font-weight: 600; }
.est-call a, .email-link { display: inline-flex; align-items: center; gap: 8px; color: var(--red-ink); font-weight: 700; }
.contact-side .h3 { margin-top: 1.6em; }
.contact-side .h3:first-child { margin-top: 0; }
.expect { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.expect a { color: var(--red-ink); font-weight: 600; }
.contact-forms { display: grid; gap: 32px; }
@media (max-width: 980px) { .est-grid, .contact-grid { grid-template-columns: 1fr; } }

.about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-side { position: sticky; top: 110px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--graphite); padding: 24px; border-radius: var(--radius); }
.facts { margin: 0 0 20px; display: grid; gap: 14px; }
.facts dt { font-weight: 700; font-size: .95rem; color: var(--steel-ink); }
.facts dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-stretch: 104%; color: var(--graphite); line-height: 1.3; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-side { position: static; } }

/* ---------- Forms ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 36px); }
.form-card-quiet { border-top-color: var(--graphite); }
.form-intro { color: var(--steel-ink); font-size: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-trio { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 0 16px; }
.field label, .field legend { font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--graphite); }
.req { color: var(--red-ink); }
.opt { font-weight: 400; color: var(--steel-ink); font-size: .92rem; }
.field-hint { font-size: .92rem; color: var(--steel-ink); margin: -2px 0 6px; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; background: #fff;
  border: 1.5px solid #7d858d; border-radius: var(--radius); font-size: 1.05rem;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(200, 32, 43, .35); }
.field input[type="file"] { padding: 10px; border: 1.5px dashed #7d858d; border-radius: var(--radius); background: #fff; width: 100%; }
.field [aria-invalid="true"] { border-color: var(--red-ink) !important; background: #fff6f6 !important; }
.field-err { margin: 6px 0 0; font-size: .95rem; font-weight: 600; color: var(--red-ink); min-height: 0; }
.field-err:empty { display: none; }
.check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); flex: none; }
.check label { flex: 1; font-weight: 400; font-size: 1rem; margin: 0; }
.check .field-err { flex-basis: 100%; }
.radios { border: 0; padding: 0; margin: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1.5px solid #7d858d; border-radius: var(--radius); background: #fff; cursor: pointer; font-weight: 600; }
.radio input { width: 20px; height: 20px; accent-color: var(--red); margin: 0; }
.radio:has(input:checked) { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.form-note { font-size: .98rem; color: var(--steel-ink); margin: 20px 0 16px; padding: 10px 14px; background: var(--concrete); border-radius: var(--radius); }
.form .btn { margin-top: 4px; }
.form-card-quiet .form-grid + .btn { margin-top: 20px; }

.form-status:empty { display: none; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); font-weight: 600; }
.form-status:focus { outline: none; }
.form-status.ok { background: #eaf4ec; border: 1px solid #8fbf9a; color: #18421f; }
.form-status.err { background: #fdecee; border: 1px solid #e3a1a6; color: #6e0f15; }
.form-status p { margin: 0 0 .4em; }
.form-status p:last-child { margin: 0; }
.form-status a { font-weight: 700; }
.form.is-done .form-grid, .form.is-done > .btn, .form.is-done .form-note { display: none; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .field-trio { grid-template-columns: 1fr; gap: 18px; }
  .form .btn-lg { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--silver); padding: clamp(48px, 7vw, 80px) 0 24px; font-size: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 36px; }
.footer-motto { font-family: var(--display); font-weight: 800; font-stretch: 112%; color: #fff; font-size: 1.15rem; margin: 18px 0 6px; }
.footer-small { color: var(--silver-2); font-size: .92rem; }
.footer-h { font-family: var(--body); font-stretch: 100%; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: 0; }
.footer-list { list-style: none; display: grid; gap: 8px; }
.footer-list a, .footer-address + p a, .link-light { color: var(--silver); }
.footer-list a:hover, .link-light:hover { color: #fff; }
.footer-address { margin-bottom: 8px; }
.footer-base { border-top: 1px solid rgba(195, 201, 207, .18); margin-top: 40px; padding-top: 20px; font-size: .9rem; color: var(--silver-2); }
.footer-base p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 900px) {
  :root { --bar-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--graphite); border-top: 1px solid rgba(195, 201, 207, .25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform .25s var(--ease);
  }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600; }
  .mobile-bar a + a { border-left: 1px solid rgba(195, 201, 207, .18); }
  .mobile-bar .ic { width: 22px; height: 22px; }
  .mobile-bar .mb-call { background: var(--red); }
  body.is-typing .mobile-bar { transform: translateY(110%); }
}

/* ---------- Newsletter pop-up ---------- */
.nl {
  position: fixed; z-index: 70; left: 24px; bottom: 24px; width: min(400px, calc(100vw - 48px));
  background: var(--graphite); color: #fff; border: 1px solid rgba(195, 201, 207, .35); border-top: 4px solid var(--red);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 22px 22px 18px; max-height: calc(100vh - 48px); overflow-y: auto;
}
.nl[hidden] { display: none; }
.nl.is-in { animation: nl-in .4s var(--ease) both; }
@keyframes nl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nl-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--silver); cursor: pointer; border-radius: var(--radius); }
.nl-close:hover { color: #fff; background: var(--graphite-2); }
.nl-title { font-size: 1.45rem; font-stretch: 112%; padding-right: 36px; }
.nl-desc { color: var(--silver); font-size: 1rem; margin: 8px 0 14px; }
.nl .field label { color: #fff; font-size: .95rem; }
.nl-row { display: flex; gap: 8px; }
.nl-row input { flex: 1; min-width: 0; min-height: 48px !important; }
.nl .field input[type="email"] { color: var(--text); }
.nl .check { margin-top: 12px; }
.nl .check label { color: var(--silver); font-size: .92rem; }
.nl-privacy { font-size: .88rem; color: var(--silver-2); margin: 10px 0 0; }
.nl-privacy a { color: #fff; }
.nl .field-err { color: #ffb3b8; }
.nl .form-status.ok { background: #1f3a26; border-color: #3f7a4d; color: #e2f3e6; }
.nl .form-status.err { background: #4a1c20; border-color: #8c3a40; color: #ffe1e3; }
.nl-form.is-done .field, .nl-form.is-done .nl-privacy { display: none; }
@media (max-width: 900px) {
  .nl { left: 12px; right: 12px; width: auto; bottom: calc(var(--bar-h) + 12px); max-height: calc(100vh - var(--bar-h) - 90px); padding: 18px 16px 14px; }
  .nl-title { font-size: 1.25rem; }
  .nl-desc { font-size: .95rem; margin-bottom: 10px; }
}

/* ---------- Motion ---------- */
/* One orchestrated load moment: the roofline draws, then the sign settles in. */
.js .roof { clip-path: inset(0 50% 0 50%); animation: roof-open 1.3s var(--ease) .1s forwards; }
.js .hero .facade-sign > * { opacity: 0; transform: translateY(10px); animation: rise .7s var(--ease) forwards; }
.js .hero .facade-sign > :nth-child(1) { animation-delay: .5s; }
.js .hero .facade-sign > :nth-child(2) { animation-delay: .62s; }
.js .hero .facade-sign > :nth-child(3) { animation-delay: .74s; }
.js .hero .facade-sign > :nth-child(4) { animation-delay: .86s; }
.js .hero .facade-sign > :nth-child(5) { animation-delay: .98s; }
@keyframes roof-open { to { clip-path: inset(0 0 0 0); } }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .steps .step:nth-child(2) { transition-delay: .08s; }
.js .steps .step:nth-child(3) { transition-delay: .16s; }
.js .steps .step:nth-child(4) { transition-delay: .24s; }
.js .sheet-circle, .js .sheet-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .offer-art.is-visible .sheet-circle { transition: stroke-dashoffset 1s var(--ease) .35s; stroke-dashoffset: 0; }
.js .offer-art.is-visible .sheet-tick { transition: stroke-dashoffset .5s var(--ease) 1.2s; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .roof { animation: none; clip-path: none; }
  .js .sheet-circle, .js .sheet-tick { stroke-dashoffset: 0; }
  .js .hero .facade-sign > *, .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .utility, .site-header, .mobile-bar, .nl, .map-wrap, .hero-actions { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* Spacing between a section heading and the paragraph that follows it */
.h2 + .lede, .h2 + p { margin-top: 20px; }
.page-h { margin-top: 6px; }

/* =========================================================================
   SPORT MOTION — launch intro, speed streaks, rev bar, racing stripes,
   chrome shine, scroll speedbar and page-to-page wipe transitions.
   Everything here is switched off for prefers-reduced-motion (see end).
   ========================================================================= */

/* Hero logo — sits on the same black as the badge artwork, so it reads as one piece */
.hero-logo { width: min(440px, 84vw); margin: clamp(-26px, -1.6vw, -6px) auto clamp(10px, 2vw, 18px); position: relative; }
/* "screen" lets the badge's black background melt into the hero instead of showing a box */
.hero-logo { mix-blend-mode: screen; }
.hero-logo img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
.hero-h { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.hero .roof { height: clamp(52px, 8vw, 110px); }
.hero-sub { margin-top: 18px; }

/* Forward-leaning display type, echoing the logo lettering */
.hero-h, .page-h, .bay-name, .call-num, .names { transform: skewX(-6deg); }
.hero-h, .page-h { transform-origin: 50% 100%; }

/* Launch: the badge rolls in from the left with motion blur, overshoots, and settles */
.js .hero .facade-sign > .hero-logo { opacity: 0; animation: launch 1.15s cubic-bezier(.2, .9, .25, 1) .15s forwards; }
@keyframes launch {
  0%   { opacity: 0; transform: translateX(-70vw) skewX(-22deg); filter: blur(10px) brightness(1.6); }
  55%  { opacity: 1; transform: translateX(14px) skewX(6deg); filter: blur(1px) brightness(1.15); }
  75%  { transform: translateX(-4px) skewX(-2deg); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
.js .hero .facade-sign > :nth-child(2) { animation-delay: .95s; }
.js .hero .facade-sign > :nth-child(3) { animation-delay: 1.05s; }
.js .hero .facade-sign > :nth-child(4) { animation-delay: 1.15s; }
.js .hero .facade-sign > :nth-child(5) { animation-delay: 1.25s; }
.js .hero .hero-h { animation-name: rise-skew; }
@keyframes rise-skew { from { opacity: 0; transform: translateY(10px) skewX(-6deg); } to { opacity: 1; transform: skewX(-6deg); } }

/* Speed streaks — thin light trails crossing the dark hero now and then */
.streaks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero .facade, .page-hero-in { position: relative; } /* no z-index: keeps the hero one stacking context so the logo can blend with it */
.streaks i {
  position: absolute; left: 0; height: 2px; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(208, 20, 31, .0) 10%, rgba(208, 20, 31, .85) 70%, #fff 96%, transparent);
  border-radius: 2px; transform: translateX(-110%); opacity: 0;
  animation: streak var(--dur, 7s) cubic-bezier(.5, 0, .2, 1) var(--d, 0s) infinite;
}
.streaks i:nth-child(1) { top: 18%; --d: .2s;  --dur: 6.5s; }
.streaks i:nth-child(2) { top: 31%; --d: .45s; --dur: 8s;   width: 26%; height: 1px; }
.streaks i:nth-child(3) { top: 47%; --d: .3s;  --dur: 7.2s; width: 44%; }
.streaks i:nth-child(4) { top: 62%; --d: 2.6s; --dur: 9s;   width: 30%; height: 1px; }
.streaks i:nth-child(5) { top: 74%; --d: .6s;  --dur: 7.6s; height: 3px; opacity: .7; }
.streaks i:nth-child(6) { top: 86%; --d: 3.4s; --dur: 8.4s; width: 22%; height: 1px; }
@keyframes streak {
  0%   { transform: translateX(-110%); opacity: 0; }
  2%   { opacity: .9; }
  16%  { transform: translateX(320%); opacity: .9; }
  17%, 100% { transform: translateX(320%); opacity: 0; }
}

/* Headlight sweep across the bay header beam, once, after the launch */
.bays { position: relative; }
.bays::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: -6px; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .95) 45%, var(--red) 55%, transparent 70%) no-repeat;
  background-size: 30% 100%; background-position: -40% 0; opacity: 0;
}
.js .bays::after { animation: sweep 1.2s cubic-bezier(.6, 0, .2, 1) 1.5s 1 forwards; }
@keyframes sweep { 0% { opacity: 1; background-position: -40% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 140% 0; } }
.bay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(70% 100% at 50% 100%, rgba(208, 20, 31, .35), transparent 70%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.bay:hover::after, .bay:focus-visible::after { opacity: 1; }

/* Rev bar — a tachometer LED strip that revs to the redline when the process section arrives */
.rev { position: relative; height: 14px; margin: 0 0 30px; transform: skewX(-20deg);
  background: repeating-linear-gradient(90deg, #c9cfd5 0 calc(100% / 24 - 4px), transparent calc(100% / 24 - 4px) calc(100% / 24)); }
.rev-fill { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 4px), var(--concrete) calc(100% / 24 - 4px) calc(100% / 24)),
              linear-gradient(90deg, #3a4148 0 70%, #e0a400 70% 82%, var(--red) 82%);
  clip-path: inset(0 100% 0 0); }
.js .rev { opacity: 1; transform: skewX(-20deg); }
.js .rev.is-visible .rev-fill { animation: rev 1.6s cubic-bezier(.3, 0, .2, 1) .1s forwards; }
@keyframes rev { 0% { clip-path: inset(0 100% 0 0); } 62% { clip-path: inset(0 0 0 0); } 78% { clip-path: inset(0 14% 0 0); } 100% { clip-path: inset(0 26% 0 0); } }

/* Racing stripes under section headings — draw in from the left */
.h2::after { content: ""; display: block; width: 84px; height: 6px; margin-top: 16px; transform: skewX(-24deg); transform-origin: left;
  background: linear-gradient(90deg, var(--red) 0 58%, transparent 58% 66%, var(--silver) 66% 100%); }
.split-head .h2::after { margin-top: 18px; }
.js .h2::after { transform: skewX(-24deg) scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) .1s; }
.js .h2.is-visible::after { transform: skewX(-24deg) scaleX(1); }

/* Chrome shine across the red buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-red::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45) 50%, transparent); transform: skewX(-20deg) translateX(0);
}
.btn-red { z-index: 0; }
.btn-red:hover::after, .btn-red:focus-visible::after { animation: shine .7s cubic-bezier(.4, 0, .2, 1); }
.js .hero .btn-red::after { animation: shine .9s cubic-bezier(.4, 0, .2, 1) 2.2s 1; }
@keyframes shine { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(480%); } }
.btn-red:hover { transform: translateY(-1px) skewX(-4deg); }
.btn-red:active { transform: translateY(1px) skewX(-4deg); }

/* Scroll speedbar — a red line along the bottom of the header shows how far down the page you are */
.speedbar { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, var(--red), #ff4a52 80%, #fff); pointer-events: none; }
/* driven by --scroll (0–1), set from site.js so it works in every browser */
.speedbar { transform: scaleX(var(--scroll, 0)); }


/* Page-to-page transition: a slanted wipe, like a car passing the camera (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.utility { view-transition-name: utility-bar; }
.mobile-bar { view-transition-name: mobile-bar; }
::view-transition-old(root) { animation: vt-out .55s cubic-bezier(.7, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.7, 0, .2, 1) both; }
::view-transition-group(site-header), ::view-transition-group(utility-bar), ::view-transition-group(mobile-bar) { animation: none; }
@keyframes vt-out { to { transform: translateX(-8%); filter: brightness(.35) blur(2px); } }
@keyframes vt-in {
  from { clip-path: polygon(112% 0, 140% 0, 140% 100%, 100% 100%); }
  to   { clip-path: polygon(-12% 0, 140% 0, 140% 100%, -40% 100%); }
}

/* Page heroes get a short launch of their own */
.js .page-h { animation: rise-skew .7s var(--ease) .25s both; }
.js .page-lede { animation: rise .7s var(--ease) .4s both; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .streaks, .speedbar { display: none; }
  .js .hero .facade-sign > .hero-logo, .js .page-h, .js .page-lede { animation: none; opacity: 1; transform: none; }
  .js .page-h, .js .hero .hero-h { transform: skewX(-6deg); }
  .js .bays::after, .js .hero .btn-red::after, .btn-red:hover::after { animation: none; }
  .js .h2::after { transform: skewX(-24deg); transition: none; }
  .js .rev .rev-fill { clip-path: inset(0 26% 0 0); animation: none; }
  .btn-red:hover, .btn-red:active { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.js .rev.is-visible { transform: skewX(-20deg); }

/* =========================================================================
   CAR EFFECTS — drive-by on the hero road, headlight flashes on the logo's
   car, engine rumble on call buttons, scroll car on the header speedbar,
   rev-up speedometer, spinning-wheel "Sending…" and checkered-flag success.
   ========================================================================= */

/* The road under the bay doors */
.road { position: relative; height: clamp(54px, 7vw, 76px); overflow: hidden;
  background: linear-gradient(180deg, #16181b, #0b0c0d);
  border-top: 1px solid #2b3036; }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(195, 201, 207, .55) 0 34px, transparent 34px 70px); }
.road::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--red); opacity: .6; }

/* Drive-by: launches from the left with a wheel-spin and tire smoke, then accelerates off to the right */
.driveby { position: absolute; left: 0; bottom: 6px; width: clamp(150px, 18vw, 230px); transform: translateX(-120%); }
.driveby .car { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .7)); }
.driveby::before { content: ""; position: absolute; right: 96%; top: 50%; height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, .9)); }
.smoke { position: absolute; left: 6%; bottom: 0; width: 46px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 224, 228, .55), rgba(220, 224, 228, 0) 70%); opacity: 0; filter: blur(2px); }
.car .spokes { transform-box: fill-box; transform-origin: center; }
.js .road.is-visible .driveby { animation: drive 2.8s cubic-bezier(.55, 0, .75, .4) .35s 1 forwards; }
.js .road.is-visible .driveby .spokes { animation: spin .28s linear .35s 10; }
.js .road.is-visible .driveby::before { animation: trail 2.8s ease-in .35s 1 forwards; }
.js .road.is-visible .driveby .smoke { animation: smoke 1.6s ease-out .35s 1 forwards; }
.js .road.is-visible .driveby .smoke.s2 { animation-delay: .5s; left: -2%; }
.js .road.is-visible .driveby .smoke.s3 { animation-delay: .65s; left: -10%; }
@keyframes drive {
  0%   { transform: translateX(-120%) rotate(0); }
  12%  { transform: translateX(-20%) rotate(-1.5deg); }   /* squat as it launches */
  30%  { transform: translateX(30vw) rotate(0); }
  100% { transform: translateX(calc(100vw + 40%)) rotate(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes trail { 0%, 20% { width: 0; } 60% { width: 160px; } 100% { width: 260px; } }
@keyframes smoke { 0% { opacity: 0; transform: scale(.4) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6) translate(-24px, -10px); } }

/* Headlights on the logo's car flash twice (high beams) after the badge lands */
.beam { position: absolute; top: 60%; width: 16%; aspect-ratio: 3 / 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background:
    radial-gradient(closest-side, #fff 0, rgba(255, 250, 230, .9) 18%, rgba(255, 240, 200, .25) 45%, transparent 72%) 0 50% / 50% 100% no-repeat,
    radial-gradient(closest-side, #fff 0, rgba(255, 250, 230, .9) 18%, rgba(255, 240, 200, .25) 45%, transparent 72%) 100% 50% / 50% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) 50% 50% / 100% 2px no-repeat; }
.beam-l { left: 15.1%; }
.beam-r { left: 40.3%; }
.js .beam { animation: highbeam 1.1s ease-out 1.35s 1 forwards; }
.hero-logo:hover .beam { animation: highbeam-again .9s ease-out 0s 1; }
@keyframes highbeam { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .1; } 46% { opacity: 1; } 100% { opacity: 0; } }
@keyframes highbeam-again { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .1; } 46% { opacity: 1; } 100% { opacity: 0; } }

/* Engine rumble when you hover a call button */
a.btn-red[href^="tel:"]:hover { animation: rumble .32s linear 2; }
@keyframes rumble {
  0%, 100% { transform: translateY(-1px) skewX(-4deg); }
  20% { transform: translate(-1px, 0) skewX(-4deg); }
  40% { transform: translate(1px, -2px) skewX(-4deg); }
  60% { transform: translate(-1px, -1px) skewX(-4deg); }
  80% { transform: translate(1px, 0) skewX(-4deg); }
}

/* Scroll car rides the red speedbar under the header */
.scroll-car { position: absolute; left: 0; bottom: -2px; width: 58px; pointer-events: none;
  transform: translateX(calc(var(--scroll, 0) * (100vw - 64px))); transition: transform .12s linear; }
.scroll-car .car { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.scroll-car .spokes { transform: rotate(calc(var(--scroll, 0) * 2880deg)); }

/* Speedometer in the final call-to-action: revs into the red, then settles */
.final-call { display: grid; gap: 14px; }
.gauge-wrap { width: min(220px, 60%); }
.gauge { width: 100%; height: auto; display: block; overflow: visible; }
.gauge .needle { transform-box: view-box; transform-origin: 100px 110px; transform: rotate(-178deg); }
.js .gauge-wrap { opacity: 1; transform: none; }
.js .gauge-wrap.is-visible .needle { animation: needle 1.8s cubic-bezier(.3, 0, .2, 1) .15s forwards; }
@keyframes needle { 0% { transform: rotate(-178deg); } 55% { transform: rotate(-6deg); } 70% { transform: rotate(-22deg); } 82% { transform: rotate(-12deg); } 100% { transform: rotate(-58deg); } }
.no-js .gauge .needle, .gauge-static .needle { transform: rotate(-58deg); }

/* Form "Sending…" shows a spinning wheel; success gets a checkered-flag edge */
.wheel-spin { width: 1.25em; height: 1.25em; animation: spin .55s linear infinite; }
.form-status.ok { position: relative; padding-left: 34px; }
.form-status.ok::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; border-radius: var(--radius) 0 0 var(--radius);
  background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 9px 9px; }

@media (max-width: 600px) {
  .scroll-car { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .driveby, .beam { display: none; }
  .js .gauge-wrap .needle, .js .gauge-wrap.is-visible .needle { animation: none; transform: rotate(-58deg); }
  a.btn-red[href^="tel:"]:hover { animation: none; }
  .wheel-spin { animation: none; }
  .scroll-car { transition: none; }
}

/* =========================================================================
   SECTION MOTION GRAPHICS
   Elements slide in as they enter the screen (left / right / up / zoom),
   groups stagger, background marks drift with scroll (parallax), service
   icons draw themselves, the estimate sheet gets a scanner pass, the map
   pings, FAQ answers glide open, and the garage doors roll down on load.
   Hidden states only apply once site.js adds .motion, so content never
   disappears if JavaScript fails.
   ========================================================================= */
.motion [data-anim] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .85s cubic-bezier(.16, .84, .24, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-anim="left"]  { transform: translateX(-70px) skewX(-8deg); }
.motion [data-anim="right"] { transform: translateX(70px) skewX(-8deg); }
.motion [data-anim="up"]    { transform: translateY(34px); }
.motion [data-anim="zoom"]  { transform: scale(.9) rotate(-1deg); }
.motion [data-anim].is-visible { opacity: 1; transform: none; }

/* Garage doors roll down one after another when the page loads */
.js .bay-door { animation: door-down .7s cubic-bezier(.3, .9, .3, 1) both; }
.js .bays li:nth-child(1) .bay-door { animation-delay: 1.1s; }
.js .bays li:nth-child(2) .bay-door { animation-delay: 1.22s; }
.js .bays li:nth-child(3) .bay-door { animation-delay: 1.34s; }
.js .bays li:nth-child(4) .bay-door { animation-delay: 1.46s; }
@keyframes door-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Big outlined background marks that drift sideways as you scroll */
.offer, .final { position: relative; overflow: hidden; }
.offer > .wrap, .final > .wrap { position: relative; z-index: 1; }
.bg-mark {
  position: absolute; top: 50%; left: -2%; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(14rem, 34vw, 30rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(195, 201, 207, .09);
  transform: translate3d(calc(var(--pp, 0) * -140px), -50%, 0) skewX(-10deg);
  will-change: transform;
}
.bg-mark-r { left: auto; right: -4%; -webkit-text-stroke-color: rgba(208, 20, 31, .14); transform: translate3d(calc(var(--pp, 0) * 140px), -50%, 0) skewX(-10deg); }

/* Service icons: draw the outline, then keep a gentle live loop */
.svc-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.svc-ic { width: 68px; height: 68px; overflow: visible; }
.svc-ic .ic-line, .svc-ic .ic-frame { fill: none; stroke: var(--graphite); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svc-ic .ic-frame { stroke: #9aa2aa; stroke-width: 2.5; }
.svc-ic .ic-pulse { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 120; stroke-dashoffset: 130; opacity: 0; }
.svc-ic .ic-dot { fill: var(--red); }
.svc-ic .ic-spark { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.svc-ic .ic-bolt { stroke: var(--red); }
.svc-ic .ic-gear, .svc-ic .ic-wrench { transform-box: fill-box; transform-origin: center; }
.motion .svc-ic .ic-line, .motion .svc-ic .ic-frame { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.4, 0, .2, 1) .35s; }
.motion .svc.is-visible .svc-ic .ic-line, .motion .svc.is-visible .svc-ic .ic-frame { stroke-dashoffset: 0; }
.motion .svc.is-visible .ic-pulse { opacity: 1; animation: scope 2.2s linear 1.6s infinite; }
.motion .svc.is-visible .ic-wrench { animation: wrench 1.1s cubic-bezier(.3, 1.4, .5, 1) 1.5s 1 both; }
.motion .svc.is-visible .ic-spark { animation: spark 2.8s steps(1) 1.6s infinite; }
.motion .svc.is-visible .ic-gear { animation: gear 6s linear 1.6s infinite; }
@keyframes scope { to { stroke-dashoffset: 0; } }
@keyframes wrench { 0% { transform: rotate(0); } 40% { transform: rotate(-28deg); } 70% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
@keyframes spark { 0%, 100% { opacity: 0; } 6%, 12% { opacity: 1; } 9% { opacity: 0; } }
@keyframes gear { to { transform: rotate(360deg); } }
.svc:hover .ic-wrench { animation: wrench .9s cubic-bezier(.3, 1.4, .5, 1); }

/* Estimate sheet: a diagnostic scanner pass before the red circle is drawn */
.sheet-scan { fill: rgba(208, 20, 31, .18); opacity: 0; }
.js .offer-art.is-visible .sheet-scan { animation: scan 1.1s cubic-bezier(.5, 0, .5, 1) .05s 1 both; }
@keyframes scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(384px); } }
.js .offer-art.is-visible .sheet-circle { transition-delay: 1.05s; }
.js .offer-art.is-visible .sheet-tick { transition-delay: 1.9s; }
.offer-art { transition: transform .5s var(--ease); }
.offer-art:hover { transform: rotate(-2deg) translateY(-4px); }

/* Map: a radar ping over the shop location */
.map-ping { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; pointer-events: none; }
.map-ping i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--red); opacity: 0; }
.motion .map-wrap.is-visible .map-ping i { animation: ping 2.6s cubic-bezier(.2, .6, .3, 1) .6s infinite; }
.motion .map-wrap.is-visible .map-ping i + i { animation-delay: 1.9s; }
@keyframes ping { 0% { transform: scale(.2); opacity: .95; } 80% { opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }

/* FAQ answers glide open (supported browsers); the + turns as before */
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.faq-item summary { transition: color .2s, padding-left .3s var(--ease); }
.faq-item[open] summary { padding-left: 14px; box-shadow: inset 4px 0 0 var(--red); }

/* Step numbers drop in with a little bounce */
.motion .step::before { transform: translateY(-16px); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.motion .step.is-visible::before { transform: none; opacity: 1; }

/* Call boxes: hover "launch" — the number slides forward */
.call-big .call-num { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.call-big:hover .call-num { transform: skewX(-6deg) translateX(8px); }

@media (prefers-reduced-motion: reduce) {
  .bg-mark { transform: translate3d(0, -50%, 0) skewX(-10deg); }
  .js .bay-door { animation: none; }
  .map-ping, .ic-pulse, .ic-spark { display: none; }
  .svc-ic .ic-gear, .svc-ic .ic-wrench { animation: none !important; }
  .js .offer-art.is-visible .sheet-scan { animation: none; }
  .offer-art:hover { transform: none; }
}

/* =========================================================================
   ESTIMATE GUARANTEE BADGE — forward-leaning red plate with chrome edge and
   a checkered-flag tab; "stamps" onto the page when it scrolls into view.
   ========================================================================= */
.guarantee {
  display: inline-flex; align-items: stretch; margin: 20px 0 4px; transform: skewX(-10deg);
  background: linear-gradient(180deg, #e3202b, var(--red) 55%, #9e0d16);
  border: 2px solid var(--silver); border-radius: 3px;
  box-shadow: 0 0 0 1px #000, 0 10px 28px rgba(208, 20, 31, .35);
  color: #fff; overflow: hidden; position: relative; isolation: isolate;
}
.g-flag { width: 26px; flex: none; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 10px 10px; border-right: 2px solid var(--silver); }
.g-text { display: block; padding: 10px 18px 10px 14px; transform: skewX(10deg);
  font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.15; letter-spacing: -.005em; }
.guarantee-lg .g-text { font-size: clamp(1.1rem, 2.2vw, 1.55rem); padding: 12px 22px 12px 16px; }
.guarantee::after { /* chrome glint that sweeps across once it lands */
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(0);
}
.page-hero .guarantee { margin-top: 24px; }
.est-info .guarantee, .honest .guarantee { margin-top: 0; }

/* Stamp-in */
.motion [data-anim="stamp"] { opacity: 0; transform: skewX(-10deg) scale(1.6) rotate(-4deg); transition: opacity .25s ease, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.motion [data-anim="stamp"].is-visible { opacity: 1; transform: skewX(-10deg); }
.motion .guarantee.is-visible::after { animation: g-glint 1s cubic-bezier(.4, 0, .2, 1) .5s 1; }
.js .page-hero .guarantee { animation: g-stamp .55s cubic-bezier(.2, 1.6, .4, 1) .75s both; }
@keyframes g-stamp { from { opacity: 0; transform: skewX(-10deg) scale(1.6) rotate(-4deg); } to { opacity: 1; transform: skewX(-10deg); } }
@keyframes g-glint { to { transform: translateX(560%); } }

@media (max-width: 520px) {
  .guarantee { transform: skewX(-6deg); }
  .g-text { transform: skewX(6deg); }
  .motion [data-anim="stamp"].is-visible { transform: skewX(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motion [data-anim="stamp"], .js .page-hero .guarantee { opacity: 1; transform: skewX(-10deg); animation: none; }
  .guarantee::after { display: none; }
}

/* A/C & heating icon: the fan spins up once drawn */
.svc-ic .ic-fan { transform-box: fill-box; transform-origin: center; }
.motion .svc.is-visible .ic-fan { animation: gear 2.4s linear 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .svc-ic .ic-fan { animation: none !important; } }

/* Long service names ("Comprehensive", "Air conditioning") must fit their column */
.svc-name { font-size: clamp(1.7rem, 2.5vw, 2.3rem); font-stretch: 106%; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.svc-head { min-width: 0; }

/* =========================================================================
   TEMPORARY — "OPENING SOON" (site.openingSoon in _src/site.config.mjs)
   A garage marquee sign: red plate, chrome frame, chasing bulbs, and a
   neon flicker as it powers on. Remove by setting openingSoon: false.
   ========================================================================= */
.soon-sign {
  position: relative; display: inline-block; margin: 0 auto; transform: skewX(-8deg);
  background: linear-gradient(180deg, #e3202b, var(--red) 55%, #9e0d16);
  border: 3px solid var(--silver); border-radius: 6px;
  box-shadow: 0 0 0 2px #000, 0 0 34px rgba(208, 20, 31, .55), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.soon-text {
  display: block; transform: skewX(8deg); position: relative; z-index: 1;
  font-family: var(--display); font-weight: 900; font-stretch: 122%; text-transform: uppercase; letter-spacing: .06em; line-height: 1;
  color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 120, 120, .6);
}
/* bulbs: a dotted light strip inside the frame */
.soon-bulbs { position: absolute; inset: 7px; border-radius: 3px; pointer-events: none;
  background:
    radial-gradient(circle, #fff6d0 0 2.6px, rgba(255, 220, 120, .55) 3.6px, transparent 5px) 0 0 / 18px 100% repeat-x,
    radial-gradient(circle, #fff6d0 0 2.6px, rgba(255, 220, 120, .55) 3.6px, transparent 5px) 9px 100% / 18px 100% repeat-x;
  background-size: 18px 10px, 18px 10px; background-position: 0 0, 9px 100%; background-repeat: repeat-x; }
.soon-lg { margin: 0 auto clamp(16px, 2.6vw, 26px); }
.soon-lg .soon-text { font-size: clamp(1.9rem, 5vw, 3.4rem); padding: clamp(16px, 2.2vw, 22px) clamp(24px, 4vw, 44px); }
.soon-sm { margin: 0 auto 18px; border-width: 2px; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(208, 20, 31, .45); }
.soon-sm .soon-text { font-size: clamp(.95rem, 1.6vw, 1.1rem); padding: 10px 20px; }
.soon-sm .soon-bulbs { inset: 4px; background-size: 12px 7px, 12px 7px; background-position: 0 0, 6px 100%;
  background-image:
    radial-gradient(circle, #fff6d0 0 1.6px, rgba(255, 220, 120, .5) 2.4px, transparent 3.4px),
    radial-gradient(circle, #fff6d0 0 1.6px, rgba(255, 220, 120, .5) 2.4px, transparent 3.4px); }

/* motion: bulbs chase, glow breathes, neon flickers on */
.js .soon-bulbs { animation: bulbs 1.1s steps(2) infinite; }
.js .soon-sign { animation: soon-glow 2.4s ease-in-out 1.6s infinite; }
.js .soon-text { animation: neon-on 1.1s linear .55s 1 both; }
.js .soon-sm .soon-text { animation-delay: .3s; }
@keyframes bulbs { to { background-position: 18px 0, -9px 100%; } }
@keyframes soon-glow { 0%, 100% { box-shadow: 0 0 0 2px #000, 0 0 26px rgba(208, 20, 31, .45), inset 0 2px 0 rgba(255,255,255,.25); } 50% { box-shadow: 0 0 0 2px #000, 0 0 48px rgba(255, 40, 50, .8), inset 0 2px 0 rgba(255,255,255,.25); } }
@keyframes neon-on { 0% { opacity: .15; } 10% { opacity: 1; } 14% { opacity: .2; } 22% { opacity: 1; } 26% { opacity: .35; } 40%, 100% { opacity: 1; } }

/* home hero: the sign is a child of .facade-sign, which staggers its children */
.js .hero .facade-sign > :nth-child(6) { animation-delay: 1.1s; }
.js .hero .facade-sign > .soon-sign { opacity: 1; transform: skewX(-8deg); animation: soon-drop .6s cubic-bezier(.2, 1.5, .4, 1) .7s both, soon-glow 2.4s ease-in-out 1.6s infinite; }
@keyframes soon-drop { from { opacity: 0; transform: translateY(-26px) skewX(-8deg) scale(.9); } to { opacity: 1; transform: skewX(-8deg); } }

/* top bar tag (shown on phones too) */
.soon-tag { display: inline-block; background: var(--red); color: #fff; padding: 2px 9px; margin-right: 6px; border-radius: 3px; transform: skewX(-8deg);
  font-family: var(--display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
@media (max-width: 560px) {
  .utility-note.utility-soon { display: block; text-align: center; font-size: .8rem; padding: 6px 0; }
  .utility-soon .soon-where { display: none; }
  .utility:has(.utility-soon) .utility-in { flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .soon-bulbs, .js .soon-sign, .js .soon-text, .js .hero .facade-sign > .soon-sign { animation: none !important; opacity: 1 !important; }
}
.soon-text { white-space: nowrap; }
@media (max-width: 480px) {
  .soon-lg .soon-text { font-size: clamp(1.3rem, 7.4vw, 1.75rem); letter-spacing: .03em; padding: 14px 18px; }
  .soon-lg .soon-bulbs { inset: 5px; }
}