/* Pro Autoworks — site styles */

/* Fonts are served from this site (SIL Open Font License), so visitors' browsers never contact a font CDN */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Brand colours, sampled from the Pro Autoworks logo: black background, red car, white lettering, gold stars */
:root {
  --brand: #d71920;
  --brand-hover: #ec2a31;
  --brand-dark: #a80f15;
  --gold: #f2c230;
  --ink: #0b0b0d;
  --deep: #141418;
  --deep-2: #1e1e24;
  --steel: #2a2b31;
  --paper: #f4f4f6;
  --line: #e1e2e6;
  --muted: #5b5d66;
  --on-dark: #b7b9c2;
  --white: #ffffff;
  --focus: var(--brand);
  --heading: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --wrap: 1200px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.topbar, .site-header, .hero, .winter, .site-footer, .callbar { --focus: var(--gold); }
.cta-band { --focus: var(--ink); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--brand); color: var(--white); padding: 8px 14px; border-radius: 8px; z-index: 60;
}
.skip:focus { left: 16px; }

/* Headings: condensed capitals, like the lettering on a race car */
h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 800;
  font-stretch: 78%; font-variation-settings: "wdth" 78;
  letter-spacing: -0.005em;
}
h1, h2 { text-transform: uppercase; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--brand); border-radius: 3px; }

/* ---------- Utility bar ---------- */
.topbar { background: var(--ink); color: var(--on-dark); font-size: .88rem; }
.topbar .wrap { display: flex; align-items: center; gap: 26px; min-height: 38px; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; }
.tb-item svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
a.tb-item:hover { color: var(--white); }
.tb-phone { margin-left: auto; font-weight: 700; color: var(--white); }
@media (max-width: 760px) { .topbar .tb-addr { display: none; } }
@media (max-width: 460px) { .topbar .wrap { gap: 12px; font-size: .8rem; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,11,13,.94); color: var(--white);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 10px 26px -16px rgba(0,0,0,.9); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--heading); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78;
  text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.brand b { color: var(--brand); font-weight: 800; }
.brand img { width: 46px; height: 46px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.nav { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 2px; margin-right: 6px; }
.nav-links a {
  position: relative; text-decoration: none; font-weight: 600; font-size: .96rem;
  padding: 8px 12px; color: rgba(255,255,255,.82);
}
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }
.lang-toggle, .menu-toggle {
  font: inherit; font-weight: 700; font-size: .9rem;
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; background: transparent; color: var(--white);
}
.lang-toggle { box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); text-decoration: none; line-height: normal; }
.lang-toggle:hover { box-shadow: inset 0 0 0 2px var(--white); }
.nav-cta { padding: 10px 16px; font-size: .95rem; }
.menu-toggle { display: none; padding: 8px; }
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 960px) {
  .menu-toggle { display: block; }
  .nav .nav-cta { display: none; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--ink); padding: 6px 20px 20px;
    border-bottom: 3px solid var(--brand);
  }
  .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.1rem; }
  .nav-links a::after { display: none; }
  .site-header.open .nav-links { display: flex; animation: drop .2s ease-out; }
}
@media (max-width: 400px) {
  .brand { font-size: 1.2rem; gap: 9px; }
  .brand img { width: 38px; height: 38px; }
  .nav { gap: 4px; }
  .lang-toggle { padding: 7px 11px; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 700; text-decoration: none; font-size: 1rem; line-height: 1.2;
  padding: 14px 24px; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
/* A light sweep crosses the button on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn-primary { background: var(--brand); color: var(--white); box-shadow: 0 10px 24px -12px rgba(215,25,32,.9); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #e9e9ee; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--steel); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline-light { border-color: rgba(255,255,255,.75); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--brand-dark); }
.btn-sm { padding: 10px 16px; font-size: .93rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 60% at 85% 30%, rgba(215,25,32,.22), transparent 65%), var(--ink);
  color: var(--white);
  padding: 72px 0 150px;
}
/* Faint shop-floor grid drifting slowly behind the hero */
.hero-grid {
  position: absolute; inset: -60px; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  animation: grid-drift 24s linear infinite;
}
@keyframes grid-drift { to { transform: translate(60px, 60px); } }
.hero > .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: .98; margin: 0 0 24px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { font-size: 1.18rem; max-width: 46ch; margin: 0 0 32px; color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }
.hero-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-brands li {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
}

/* Photo collage: crossfading shop photos, a side photo, the logo badge and the gauge */
.hero-media { --pad: 60px; position: relative; padding: 0 0 var(--pad) var(--pad); }
.ph { position: relative; margin: 0; overflow: hidden; background: var(--steel); border-radius: 18px; }
.ph img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.hero-show { width: 86%; margin-left: auto; aspect-ratio: 1 / 1; border-radius: 22px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.9); }
.hero-show img { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.hero-show img ~ img { opacity: 0; }
.js .hero-show img:not(.on) { opacity: 0; }
.js .hero-show img.on { opacity: 1; animation: show-drift 7s ease-out both; }
@keyframes show-drift { from { scale: 1.1; } to { scale: 1; } }
/* Red accent frame offset behind the main photo */
.hero-show::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.hero-media::before {
  content: ""; position: absolute; z-index: 0; right: -14px; top: 18px; width: 86%; aspect-ratio: 1 / 1;
  border: 3px solid var(--brand); border-radius: 24px; opacity: .8;
}
.hero-show, .hero-side { z-index: 1; }
.ph.hero-side {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 40%; aspect-ratio: 3 / 4;
  border-radius: 16px; outline: 6px solid var(--ink);
}
.hero-badge {
  --size: clamp(92px, 9vw, 128px);
  position: absolute; z-index: 3; top: -24px; left: calc(var(--pad) + 6%);
  width: var(--size); height: var(--size); border-radius: 20px;
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 6px rgba(242,194,48,.55), 0 20px 40px -14px rgba(0,0,0,.9);
  rotate: -8deg;
}
.gauge {
  position: absolute; z-index: 3; right: 4%; bottom: calc(var(--pad) - 34px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,20,24,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 10px 16px 10px 10px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gauge svg { width: 76px; height: 46px; overflow: visible; }
.g-track, .g-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.g-track { stroke: rgba(255,255,255,.12); }
.g-fill { stroke: var(--brand); stroke-dasharray: 100; stroke-dashoffset: 30; }
.g-needle { stroke: var(--white); stroke-width: 4; stroke-linecap: round; transform-origin: 60px 62px; transform: rotate(52deg); }
.g-hub { fill: var(--white); }
.gauge div { display: grid; line-height: 1.1; }
.gauge div span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); }
.gauge b { font-family: var(--heading); font-size: 1.5rem; color: #3ddc84; letter-spacing: .04em; }

@media (max-width: 920px) {
  .hero { padding: 44px 0 130px; }
  .hero > .wrap { grid-template-columns: 1fr; gap: 48px; }
  .hero-media { --pad: 34px; max-width: 560px; }
}
@media (max-width: 520px) {
  .hero-media { --pad: 22px; }
  .gauge { padding: 8px 12px 8px 8px; }
  .gauge svg { width: 58px; height: 36px; }
}

/* ---------- Action tiles (overlap the bottom of the hero) ---------- */
.tiles { position: relative; z-index: 5; margin-top: -88px; }
.tiles .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--white); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(11,11,13,.45); overflow: hidden; }
.tile {
  display: flex; align-items: center; gap: 16px; padding: 26px 26px; text-decoration: none;
  border-right: 1px solid var(--line); transition: background-color .2s ease;
}
.tile:last-child { border-right: 0; }
.tile:hover { background: var(--paper); }
.tile > span:last-child { display: grid; line-height: 1.35; }
.tile b { font-family: var(--heading); font-stretch: 78%; font-variation-settings: "wdth" 78; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .01em; }
.tile > span:last-child > span { color: var(--muted); font-size: .97rem; }
.tile-ico {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand); color: var(--white); transition: transform .3s var(--ease);
}
.tile-ico svg { width: 24px; height: 24px; }
.tile:hover .tile-ico { transform: rotate(-8deg) scale(1.08); }
.open-now.is-open::before, .open-now.is-closed::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px;
}
.open-now.is-open::before { background: #1fb565; box-shadow: 0 0 0 0 rgba(31,181,101,.6); animation: pulse 1.8s ease-out infinite; }
.open-now.is-closed::before { background: var(--brand); }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgba(31,181,101,0); } }
@media (max-width: 820px) {
  .tiles .wrap { grid-template-columns: 1fr; }
  .tile { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .tile:last-child { border-bottom: 0; }
}

/* ---------- Generic sections ---------- */
.section { padding: 96px 0; }
.section-head { max-width: 700px; margin-bottom: 44px; }
.section h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; margin: 0 0 14px; }
.section-head p { color: var(--muted); margin: 0; font-size: 1.14rem; }
h3 { font-size: 1.3rem; margin: 0 0 6px; line-height: 1.15; }
@media (max-width: 640px) { .section { padding: 68px 0; } .section-head { margin-bottom: 32px; } }

/* ---------- Trust pillars ---------- */
.pillars { padding-top: 88px; }
.pillar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar-list li {
  position: relative; padding: 28px 24px; border-radius: 18px; background: var(--paper);
  border-top: 4px solid var(--brand); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar-list li:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -26px rgba(11,11,13,.45); }
.p-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--ink); color: var(--white); margin-bottom: 16px; }
.p-ico svg { width: 24px; height: 24px; }
.pillar-list p { margin: 4px 0 0; color: var(--muted); font-size: .98rem; }
@media (max-width: 980px) { .pillar-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillar-list { grid-template-columns: 1fr; } }

/* ---------- Brand ticker: an endless band of the makes in the shop ---------- */
.ticker { background: var(--brand); color: var(--white); overflow: hidden; padding: 16px 0; transform: skewY(-1.5deg); margin: 10px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
  font-family: var(--heading); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78;
  text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .03em;
}
.ticker span::after { content: ""; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Services ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.filter-tabs button {
  font: inherit; font-weight: 700; font-size: .96rem;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--ink); border: 2px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter-tabs button:hover { border-color: var(--ink); }
.filter-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  padding: 28px 24px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.svc[hidden] { display: none; }
/* A red bar fills along the top of the card on hover */
.svc::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.svc:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 26px 44px -28px rgba(11,11,13,.5); }
.svc:hover::before { transform: scaleX(1); }
.svc-ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; margin-bottom: 14px;
  background: rgba(215,25,32,.09); color: var(--brand); transition: background-color .3s ease, color .3s ease, transform .4s var(--ease);
}
.svc-ico svg { width: 27px; height: 27px; }
.svc:hover .svc-ico { background: var(--brand); color: var(--white); transform: rotate(-10deg); }
.svc p { margin: 0; color: var(--muted); font-size: .98rem; }
.svc-tag {
  align-self: flex-start; margin-top: auto; padding: 4px 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 6px; background: var(--paper); color: var(--muted);
}
.svc p { margin-bottom: 18px; }
.svc.pop { animation: rise .4s var(--ease) both; }

/* ---------- Winter tire countdown ---------- */
.winter {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #0d1a2b 0%, var(--ink) 60%);
  color: var(--white); padding: 96px 0;
}
.winter .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.winter h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; margin: 0 0 18px; }
.winter h2 sup { font-size: .5em; }
.winter-copy p:not(.eyebrow) { color: var(--on-dark); font-size: 1.12rem; max-width: 52ch; margin: 0 0 28px; }
.w-during { display: none; }
.winter.in-season .w-before { display: none; }
.winter.in-season .w-during { display: inline; }
.countdown {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 28px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cd-label { margin: 0 0 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: #9cc8ff; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cd { display: grid; justify-items: center; gap: 4px; padding: 16px 6px; border-radius: 14px; background: rgba(0,0,0,.35); }
.cd b {
  font-family: var(--heading); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.cd b.tick { animation: tick .45s var(--ease); }
@keyframes tick { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.cd > span { font-size: .8rem; font-weight: 600; color: var(--on-dark); text-transform: uppercase; letter-spacing: .08em; }
/* Snow: two layers of flakes falling at different speeds */
.snow, .snow::before {
  position: absolute; inset: -200px 0 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 90px 120px, rgba(255,255,255,.7), transparent),
    radial-gradient(3px 3px at 160px 60px, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 230px 170px, rgba(255,255,255,.6), transparent),
    radial-gradient(3px 3px at 300px 20px, rgba(255,255,255,.75), transparent);
  background-size: 320px 200px;
  animation: snow 14s linear infinite;
}
.snow::before { content: ""; inset: 0; background-size: 220px 160px; opacity: .5; animation-duration: 9s; }
@keyframes snow { to { background-position: 40px 200px; } }
@media (max-width: 860px) { .winter .wrap { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .countdown { padding: 18px; } .cd-grid { gap: 6px; } }

/* ---------- Our work ---------- */
.work { background: var(--paper); }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; }
.job { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--steel); }
.job-tall { grid-row: span 2; }
.job img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.job:hover img { transform: scale(1.07); }
.job figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  display: grid; gap: 2px; color: var(--white);
  background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.job figcaption b { font-family: var(--heading); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.job figcaption > span { font-size: .9rem; color: rgba(255,255,255,.8); }
.work-more { margin: 30px 0 0; }
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; } }
@media (max-width: 520px) { .work-grid { grid-auto-rows: 200px; gap: 10px; } }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; position: relative; }
.steps li { counter-increment: step; position: relative; padding: 28px 26px; border-radius: 18px; background: var(--ink); color: var(--white); }
.steps li::before {
  content: "0" counter(step); display: block; margin-bottom: 14px;
  font-family: var(--heading); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78;
  font-size: 3rem; line-height: 1; color: var(--brand);
}
.steps p { margin: 4px 0 0; color: var(--on-dark); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Location ---------- */
.garage { background: var(--white); }
.garage-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: stretch; }
.garage-card {
  display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 20px;
  background: var(--ink); color: var(--white);
}
.garage-logo { width: 84px; height: 84px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.garage-card h3 { font-size: 1.7rem; text-transform: uppercase; margin: 6px 0 0; }
.garage-card address { font-style: normal; color: var(--on-dark); font-size: 1.05rem; }
.garage-phone { margin: 0; font-family: var(--heading); font-weight: 800; font-size: 1.6rem; }
.garage-phone a { text-decoration: none; }
.garage-phone a:hover { color: var(--brand); }
.hours { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .98rem; }
.hours caption { text-align: left; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; padding-bottom: 6px; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--white); font-weight: 700; }
.hours tr.today th::after { content: " •"; color: var(--brand); }
.garage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }
.garage-card .btn-outline { border-color: rgba(255,255,255,.6); color: var(--white); }
.garage-card .btn-outline:hover { background: var(--white); color: var(--ink); }
.map-frame { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 20px; background: var(--paper); display: block; }
@media (max-width: 860px) { .garage-grid { grid-template-columns: 1fr; } .map-frame { min-height: 320px; } }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
details { border-bottom: 1px solid var(--line); padding: 18px 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--heading); font-size: 1.6rem; line-height: 1; color: var(--brand); transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; color: var(--muted); }
details[open] p { animation: rise .35s var(--ease) both; }
@media (max-width: 820px) { .faq .wrap { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Closing call to action ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand); color: var(--white); padding: 76px 0;
}
/* Racing stripes sliding across the band */
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14;
  background: repeating-linear-gradient(115deg, transparent 0 40px, #000 40px 80px);
  background-size: 200% 100%; animation: stripes 18s linear infinite;
}
@keyframes stripes { to { background-position: -340px 0; } }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; margin: 0 0 10px; }
.cta-band p { margin: 0; font-size: 1.14rem; color: rgba(255,255,255,.88); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); padding: 60px 0 32px; font-size: .96rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-h { color: var(--white); margin: 0 0 12px; font-size: 1.05rem; letter-spacing: .04em; }
.foot-logo { width: 72px; height: 72px; border-radius: 14px; margin-bottom: 14px; }
.foot-blurb { margin: 0; max-width: 34ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer a { text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin: 8px 0 0; color: #7f818b; }
@media (max-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* ---------- Mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 68px; }
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink); border-top: 1px solid rgba(255,255,255,.1);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
    animation: rise-up .5s var(--ease) 1s both;
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
    border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--white); background: var(--steel);
  }
  .callbar a:first-child { background: var(--brand); }
  .callbar svg { width: 19px; height: 19px; }
}
@keyframes rise-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--white); padding: 64px 20px; }
.notfound h1 { font-size: clamp(5rem, 18vw, 12rem); margin: 0; line-height: .9; color: var(--brand); }
.notfound-text { font-size: 1.25rem; margin: 12px auto 28px; max-width: 40ch; color: var(--on-dark); }

/* ---------- Motion ----------
   A load sequence in the hero, content blocks rising in as they scroll into view, section titles
   lighting up word by word, the hero drifting away on scroll, the gauge needle sweeping, and feedback
   on clicks. Scroll-triggered starting states only apply when main.js is running (html.js). */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

.hero-copy > * { animation: rise .7s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-brands li { animation: rise .5s var(--ease) both; }
.hero-brands li:nth-child(1) { animation-delay: .5s; }
.hero-brands li:nth-child(2) { animation-delay: .58s; }
.hero-brands li:nth-child(3) { animation-delay: .66s; }
.hero-brands li:nth-child(4) { animation-delay: .74s; }
.hero-brands li:nth-child(5) { animation-delay: .82s; }
.hero-show { animation: slide-in .9s var(--ease) .15s both; }
.hero-media::before { animation: frame-in 1s var(--ease) .5s both; }
@keyframes frame-in { from { opacity: 0; transform: translate(-14px, -18px); } to { opacity: .8; transform: none; } }
.ph.hero-side { animation: rise .8s var(--ease) .45s both; }
.hero-badge { animation: badge-in .7s cubic-bezier(.3,1.5,.5,1) .75s both; }
@keyframes badge-in { from { opacity: 0; scale: .4; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: -8deg; } }
.gauge { animation: rise .6s var(--ease) .9s both; }
/* The needle revs to the red, settles, then idles */
.g-needle { animation: rev 1.6s cubic-bezier(.3,1.2,.4,1) 1.1s both, idle 2.4s ease-in-out 2.8s infinite; }
@keyframes rev { 0% { transform: rotate(-90deg); } 55% { transform: rotate(82deg); } 100% { transform: rotate(52deg); } }
@keyframes idle { 0%, 100% { transform: rotate(52deg); } 50% { transform: rotate(46deg); } }
.g-fill { animation: fill-gauge 1.6s var(--ease) 1.1s both; }
@keyframes fill-gauge { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 30; } }

/* Scroll reveal: main.js tags content blocks with .rv (with a stagger delay inside a group)
   and adds .in once each block enters the viewport */
.js .rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rv-delay, 0s);
}
.js .job.rv { transform: translateY(24px) scale(.96); }
.js .rv.in { opacity: 1; transform: none; }
/* Cards keep their hover lift once revealed */
.js .svc.rv.in:hover, .js .pillar-list li.rv.in:hover { transform: translateY(-5px); transition-delay: 0s; }

/* Section titles light up word by word (main.js scrollScenes) */
.scenes .w { opacity: .14; transition: opacity .45s ease; }
.scenes .w.lit { opacity: 1; }
/* Hero drifts away as the page scrolls: copy rises and fades, the photos lag behind */
.scenes .hero-copy { transform: translateY(calc(var(--p, 0) * -80px)); opacity: calc(1 - var(--p, 0) * 1.2); }
.scenes .hero-media { transform: translateY(calc(var(--p, 0) * 60px)); }
/* Closing headline grows into place */
.scenes .cta-band h2.sc { transform: scale(calc(.84 + min(1, calc(var(--p, .5) * 2)) * .16)); transform-origin: left center; }

@media print { .js .rv { opacity: 1; transform: none; } .callbar, .topbar { display: none; } }

/* Visitors who ask their system for less motion get a still page: no looping or scroll-linked movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .scenes .hero-copy, .scenes .hero-media, .scenes .cta-band h2.sc { transform: none; opacity: 1; }
  .scenes .w { opacity: 1; }
  .ticker-track { animation: none; }
}