/* ==========================================================================
   US Smog — site styles
   Values are taken 1:1 from the design handoff (designs/*.dc.html).
   Base rules sit inside :where() so they carry zero specificity, the same way
   the prototype's inline styles always won over its base stylesheet.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --color-bg: #ffffff;
  --color-text: #0b1a33;
  --color-navy: #0A3161;
  --color-navy-hover: #1C4A85;
  --color-mid: #2A5C99;          /* bubble borders, kickers, toggle icon */
  --color-light-blue: #a9bdd8;   /* faint arrows, underlines */
  --color-accent: #B31942;       /* red: coupon / CTA only */
  --color-accent-600: #951437;   /* red hover / pressed */
  --color-accent-700: #951437;
  --color-accent-100: #fbe8ed;   /* red tint */
  --color-flag: #d21f47;
  --color-ground: #f4f6fa;
  --color-muted: #5b6475;
  --color-open: #1E8E3E;
  --color-rule: #dfe4ec;
  --color-coupon-rule: #e2e6ee;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-marker: "Permanent Marker", "Archivo", system-ui, sans-serif;

  --gutter: clamp(20px, 4vw, 48px);
}

/* ---------- Base (zero specificity) ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { scroll-behavior: smooth; }
:where(html, body) { overflow-x: clip; }
:where(body) {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
:where(h1) { font-size: 42px; }
:where(h2) { font-size: 32px; }
:where(h3) { font-size: 25px; }
:where(p) { margin: 0 0 12px; }
:where(a) { color: var(--color-text); text-underline-offset: 3px; }
:where(a):hover { color: var(--color-accent); }
:where(img) { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
[hidden] { display: none !important; }
iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Modernist secondary button (Home "Directions") */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 0;
  padding: 8px 14.4px;
}
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* ---------- Shared bits ---------- */
.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.icon-star { flex: none; fill: currentColor; }
.icon-line { flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-line--22 { stroke-width: 2.2; }
.icon-check { flex: none; fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.u-free { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* "Blue background": navy with the scratch texture screen-blended on top */
.texture-navy {
  background-color: var(--color-navy);
  background-image: url("../assets/scratch-texture.png");
  background-size: 800px auto;
  background-repeat: repeat;
  background-blend-mode: screen;
  color: #ffffff;
}
/* Soft paper ground used behind locations, reviews, contact */
.paper-ground {
  background-color: var(--color-ground);
  background-image: url("../assets/paper-texture-373.jpg");
  background-size: 1600px auto;
  background-attachment: fixed;
  background-blend-mode: soft-light;
}
.paper-ground--scroll { background-attachment: scroll; }

.eyebrow {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 2px solid var(--color-divider);
  background: #ffffff; color: var(--color-text);
}
.nav__logo {
  display: flex; align-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: 0.02em;
  text-decoration: none; color: var(--color-text);
}
.nav__logo svg { display: block; }
.nav__links {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); align-items: center;
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em;
}
.nav__dd { position: relative; }
.nav__dd-toggle {
  appearance: none; display: block; margin: 0; padding: 12px 0; border: 0; background: none;
  font: inherit; font-weight: 700; line-height: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--color-text); cursor: default;
}
.nav__dd-toggle:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav__menu {
  position: absolute; top: 100%; left: -16px; z-index: 50; min-width: 210px;
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: #ffffff; border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.nav__menu-link {
  color: var(--color-text); text-decoration: none; padding: 12px 16px; border-radius: 12px;
  white-space: nowrap; font-weight: 600;
}
.nav__menu-link:hover, .nav__menu-link:focus-visible { background: var(--color-accent-100); }
.nav__cta {
  text-decoration: none; font-weight: 700; letter-spacing: 0.06em;
  background: var(--color-accent); color: #ffffff; padding: 13px 28px;
  border: 2px solid var(--color-accent);
}
.nav__cta:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #ffffff; }

/* Car logo: body bounces, wheels spin, wind streaks — on hover */
.car__ink { fill: var(--color-text); }
.car__paper { fill: #ffffff; }
.car__spoke { stroke: #ffffff; stroke-width: 1.3; }
.car__wind { fill: none; stroke: var(--color-text); stroke-width: 2.6; stroke-linecap: round; }
.car__wheel { transform-box: fill-box; transform-origin: center; }
@keyframes car-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes car-spin { to { transform: rotate(-360deg); } }
@keyframes car-wind { 0% { transform: translateX(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(8px); opacity: 0; } }
.car-logo:hover .car__body { animation: car-bounce 0.28s ease-in-out infinite; }
.car-logo:hover .car__wheel { animation: car-spin 0.35s linear infinite; }
.car-logo:hover .car__wind path { animation: car-wind 0.5s linear infinite; }
.car-logo:hover .car__wind path:nth-child(2) { animation-delay: 0.12s; }
.car-logo:hover .car__wind path:nth-child(3) { animation-delay: 0.24s; }

/* Home only: the car drives in from the right, links fade in one by one */
@keyframes car-drive-in { from { transform: translateX(110vw); } to { transform: translateX(0); } }
@keyframes nav-fade-in { from { opacity: 0; } to { opacity: 1; } }
.nav--intro .car-logo > svg { animation: car-drive-in 1.8s cubic-bezier(0.22, 0.7, 0.25, 1) both; }
.nav--intro .car__wheel { animation: car-spin 0.3s linear 6; }
.nav--intro .nav__links > * { animation: nav-fade-in 1.4s ease both; }
.nav--intro .nav__links > :nth-child(1) { animation-delay: 0.5s; }
.nav--intro .nav__links > :nth-child(2) { animation-delay: 0.85s; }
.nav--intro .nav__links > :nth-child(3) { animation-delay: 1.2s; }

/* ---------- Heroes ---------- */
.hero {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  padding: clamp(40px, 5vw, 56px) var(--gutter) 40px;
}
@media (min-width: 1060px) { .hero--tall { min-height: 482px; } }
.hero__main {
  flex: 1.5 1 560px; min-width: 0; align-self: center; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero__main--fit { container-type: inline-size; }
.hero__kicker {
  margin: 0 0 18px; font-weight: 800; font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.3em; text-transform: uppercase;
}
.hero__title {
  display: flex; align-items: center; justify-content: center; gap: 0.25em;
  margin: 0 0 18px;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase;
  font-size: clamp(64px, 9vw, 140px); line-height: 0.95; letter-spacing: -0.03em;
  filter: drop-shadow(0 3px 0 #061f3d) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
.hero__title--fit { white-space: nowrap; font-size: min(140px, 9vw, 12.5cqi); }
.hero__title--loc { margin-bottom: 20px; }
.hero__title--lg { font-size: clamp(72px, 11vw, 176px); }
.hero__slogan {
  margin: 0; font-weight: 500; font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.3em; text-transform: uppercase;
}
.hero__slogan--more { margin-top: 8px; }
.hero__address { margin: 8px 0 0; max-width: 36ch; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }

/* Home hero lockup: car + "US ★ SMOG" wordmark */
.home-hero__lockup {
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 2px 0 #8e9bb0) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.home-hero__car { display: block; margin: 0 0 18px 46px; }
.fill-white { fill: #ffffff; }
.fill-navy { fill: var(--color-navy); }
.home-hero__tire { fill: #ffffff; stroke: var(--color-navy); stroke-width: 2.2; }
.home-hero__wind { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linecap: round; }
.home-hero__title {
  display: flex; align-items: center; gap: 0.2em; margin: 0;
  font-family: var(--font-heading); font-weight: 800; color: #ffffff;
  font-size: clamp(64px, 10vw, 156px); line-height: 0.9; letter-spacing: -0.01em;
}
.home-hero__tagline {
  margin: 22px 0 0; font-weight: 700; font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #ffffff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Flag banner ---------- */
.flag-banner { position: relative; z-index: 5; background: var(--color-navy); }
.flag-banner__stripes { height: 20px; background: repeating-linear-gradient(180deg, #ffffff 0 5px, var(--color-flag) 5px 10px); }
.flag-banner__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 10px; align-items: center;
  padding: 8px 22px; background: var(--color-navy); border: 2px solid #ffffff; color: #ffffff;
}

/* ---------- Coupons ---------- */
.hero-coupon { position: relative; cursor: pointer; flex: 1 1 420px; max-width: 620px; margin: 0 auto; align-self: center; }

.coupon {
  position: relative; width: 100%; max-width: 620px; margin: 0 auto;
  background: #ffffff; color: var(--color-text); text-align: left;
  border: 2px solid var(--color-navy); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.coupon__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 20px; background: var(--color-accent); color: #ffffff;
}
.coupon__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: 0.04em;
}
.coupon__tag { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.coupon__stripes { height: 12px; background: repeating-linear-gradient(180deg, #ffffff 0 4px, var(--color-navy) 4px 8px); }
.coupon__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.5fr); align-items: stretch; }
.coupon__offer { display: flex; justify-content: center; padding: 22px 20px 24px; text-align: center; }
.coupon__chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 9px 4px 8px;
  background: var(--color-accent); color: #ffffff;
  font-weight: 800; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.coupon__amount {
  margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(60px, 6vw, 76px); line-height: 0.9; letter-spacing: -0.03em; color: var(--color-accent-700);
}
.coupon__label { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 26px; }
.coupon__hours {
  display: flex; flex-direction: column; justify-content: center; padding: 16px 18px;
  border-left: 2px solid var(--color-coupon-rule);
}
.coupon__eyebrow {
  margin: 0 0 6px; font-weight: 800; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.coupon__eyebrow--lg { font-size: 18px; letter-spacing: 0.08em; }
.coupon__hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--color-coupon-rule);
}
.coupon__hours-row:last-child { border-bottom: 0; }
.coupon__hours-row > :first-child { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-navy); }
.coupon__hours-row > :last-child { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.coupon__footer { border-top: 1px solid var(--color-coupon-rule); }
.coupon__locations {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 18px 24px;
  padding: 14px 20px; font-size: 18px; line-height: 1.4; text-align: center;
}
.coupon__locations p:not(.coupon__eyebrow) { margin: 0; }
.coupon__strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 20px; background: #eef1f6; font-size: 11px; font-weight: 700;
}
.coupon__phone { font-size: 13px; font-weight: 800; }
.coupon__nan { text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-700); }

/* Coupons ship locked. site.js adds html.coupons-unlocked once the email wall is submitted. */
.coupon--unlocked { display: none; }
.coupons-unlocked .coupon--unlocked { display: block; }
.coupons-unlocked .coupon-lock { display: none; }

.coupon-lock {
  position: relative; z-index: 3; width: 100%; max-width: 520px; margin: 0 auto;
  background: #ffffff; color: var(--color-text); text-align: center; cursor: pointer;
  border: 2px solid var(--color-navy); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.2); transform-origin: center;
}
.coupon-lock:hover { transform: scale(1.04); }
.hero-coupon--soft .coupon,
.hero-coupon--soft .coupon-lock {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 0 rgba(10, 49, 97, 0.08),
    0 2px 3px rgba(10, 49, 97, 0.14), 0 10px 18px rgba(10, 49, 97, 0.18), 0 28px 48px -10px rgba(0, 0, 0, 0.34);
}
.coupon-lock__body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 24px 28px; }
.coupon-lock__icon { flex: none; overflow: visible; fill: none; stroke: var(--color-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coupon-lock__icon circle { fill: var(--color-navy); }
.coupon-lock__shackle { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.is-unlocking .coupon-lock__shackle { transform: translateY(-4px) rotate(-30deg); }
.coupon-lock__button {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 9px 18px;
  border: 0; border-radius: 999px; background: var(--color-navy); color: #ffffff; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.coupon-lock__button:hover { background: var(--color-navy-hover); }
.coupon-lock__tiles {
  container-type: inline-size; width: 100%; margin: 12px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: clamp(6px, 2.5cqi, 14px);
}
.coupon-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(12px, 4cqi, 18px) clamp(6px, 2.5cqi, 14px) clamp(10px, 3.5cqi, 16px);
  border: 2px dashed var(--color-accent); border-radius: 12px; background: var(--color-ground);
  white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff;
}
.coupon-tile__amount {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 12cqi, 64px);
  line-height: 0.85; letter-spacing: -0.03em; color: var(--color-accent);
}
.coupon-tile__amount > span { margin-left: 4px; font-size: 0.42em; letter-spacing: 0.04em; }
.coupon-tile__label {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(10px, 3.4cqi, 15px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy);
}
.coupon-lock__plus {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-navy); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1;
}
.hero-coupon__toast {
  position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%);
  margin: 0; padding: 8px 16px; border-radius: 999px; background: #ffffff; color: var(--color-navy);
  font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(10, 20, 40, 0.25);
}
.hero-coupon__print {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 49, 97, 0.6);
}
.hero-coupon__print-btn {
  min-width: 180px; padding: 16px 32px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--color-text); color: #ffffff; border: 2px solid #ffffff;
}
.hero-coupon__print-btn:hover { background: #ffffff; color: var(--color-text); }

/* ---------- Email wall ---------- */
.wall {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(11, 26, 51, 0.6);
}
.wall__dialog {
  position: relative; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 14px; padding: 38px 30px 28px;
  background: #ffffff; color: var(--color-navy); text-align: center;
  border: 2px dashed var(--color-accent); outline: 8px solid #ffffff; border-radius: 20px;
  box-shadow: 0 24px 48px rgba(10, 20, 40, 0.4);
}
.wall__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--color-navy); cursor: pointer;
}
.wall__icon { align-self: center; display: flex; color: var(--color-accent); }
.wall__kicker {
  margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent);
}
.wall__title {
  margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.05; text-transform: uppercase; color: var(--color-navy);
}
.wall__copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--color-navy); }
.wall__input {
  width: 100%; padding: 14px 16px; border: 2px solid var(--color-navy); border-radius: 12px;
  font-size: 16px; font-family: var(--font-body); color: var(--color-navy); background: #ffffff;
  text-align: center;
}
.wall__submit {
  padding: 14px 20px; border: 0; border-radius: 12px; background: var(--color-accent); color: #ffffff; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
}
.wall__submit:hover { background: var(--color-accent-600); }
.wall__fine { margin: 0; font-size: 12px; color: var(--color-muted); }
/* Success screen shown after the email is submitted */
.wall__done-icon {
  align-self: center; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--color-accent); color: #ffffff;
}
.wall__done-icon svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wall__email { display: block; margin-top: 2px; font-weight: 800; overflow-wrap: anywhere; }

/* ---------- Print: only the coupon ---------- */
.print-coupon { display: none; max-width: 720px; padding: 24px; }
@media print {
  .site { min-height: 0 !important; }
  .site > :not(.print-coupon) { display: none !important; }
  .print-coupon { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Home: post-it notes ---------- */
.notes-section {
  position: relative; z-index: 2; display: flex; flex-direction: column; background: #ffffff;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(32px, 4vw, 48px);
}
.notes {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  grid-auto-rows: minmax(260px, 1fr); align-content: stretch; align-items: center;
  gap: clamp(40px, 7vw, 112px); column-gap: clamp(48px, 7.5vw, 160px);
  width: 100%; max-width: 1760px; margin: 0 auto; padding: 24px 0;
}
/* Notes grow to fill the first screen (section height is fitted by site.js), up to 460px tall. */
.note { position: relative; display: block; height: 100%; min-height: 260px; max-height: 460px; text-decoration: none; color: var(--color-navy); perspective: 1200px; }
.note--1 { transform: rotate(-2deg); }
.note--2 { transform: rotate(1.5deg); }
.note--3 { transform: rotate(-1deg); }
.note:hover, .note:focus-visible { z-index: 3; }
.note__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: none; }
/* Instant swap: no lift, scale or tilt change */
.note:hover .note__inner, .note:focus-visible .note__inner { transform: rotateY(180deg); }
.note__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--note);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 18px 24px -12px rgba(0, 0, 0, 0.4);
}
.note__front {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.06) 100%);
}
.note__back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.4vw, 24px); padding: clamp(28px, 2.6vw, 44px) clamp(30px, 3vw, 52px);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(10, 49, 97, 0.12) 33px 34px);
}
.note__paper {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/paper-texture-310.jpg"); background-size: 1200px auto;
  mix-blend-mode: multiply; filter: brightness(1.14) contrast(1.25);
}
/* Phones: show the paper texture at a smaller scale so it stays sharp on high-density screens */
@media (max-width: 700px) { .note__paper { background-size: 800px auto; } }
.note__tape {
  position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px;
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transform: rotate(-3deg);
}
.note__name {
  position: relative; margin: 0; text-align: center; color: var(--color-navy);
  font-family: var(--font-marker); font-weight: 400; font-size: clamp(38px, 3.8vw, 68px); line-height: 1;
}
.note__back-title { position: relative; margin: 0; font-family: var(--font-marker); font-size: clamp(26px, 2.4vw, 46px); line-height: 1; color: var(--color-accent); }
.note__list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); }
.note__list li { display: flex; align-items: center; gap: 0.6em; font-size: clamp(17px, 1.45vw, 26px); font-weight: 700; line-height: 1.2; }
.note__list li > svg { flex: none; width: 1.05em; height: 1.05em; }
.note__list .note__more { display: block; align-self: flex-end; text-align: right; font-style: italic; }

/* ---------- Home: "No Appointment Necessary" divider ---------- */
.nan-divider {
  position: relative; z-index: 3; padding: 0 var(--gutter);
  background-color: var(--color-ground);
  background-image: linear-gradient(180deg, #ffffff 50%, transparent 50%), url("../assets/paper-texture-373.jpg");
  background-size: 100% 100%, 1600px auto;
  background-attachment: scroll, fixed;
  background-blend-mode: normal, soft-light;
}
.nan-divider__row {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  width: 100%; max-width: 1280px; margin: 0 auto; color: var(--color-accent);
}
.nan-divider__rule { flex: 1; height: 2px; background: var(--color-navy); }
.nan-divider__text {
  margin: 0; text-align: center; color: var(--color-navy);
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Home: locations ---------- */
.home-locations {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) var(--gutter);
}
.loc-card {
  scroll-margin-top: 100px; display: flex; flex-direction: column; gap: 24px; padding: 28px;
  background: #ffffff; border: 2px solid var(--color-navy);
}
.loc-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.loc-card__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 8px; }
.loc-card__name { margin: 0; font-size: 48px; letter-spacing: -0.02em; }
.open-status {
  margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-accent);
}
.open-status.is-open { color: var(--color-open); }
.loc-card__addr { margin: 0; font-size: 17px; line-height: 1.5; }
.loc-card__hours { min-width: 190px; margin-top: 6px; }
.loc-card__hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 7px 0;
  border-bottom: 1px solid var(--color-rule);
}
.loc-card__hours-row:last-child { border-bottom: 0; }
.loc-card__hours-row > :first-child { font-weight: 700; font-size: 15px; }
.loc-card__hours-row > :last-child { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--color-navy); }
.loc-card__map { height: 240px; border: 2px solid var(--color-divider); }
.loc-card__actions { display: flex; justify-content: center; }

/* ---------- Home: reviews ---------- */
.reviews { padding: clamp(16px, 2.5vw, 40px) var(--gutter) clamp(56px, 7vw, 96px); }
.reviews__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(56px, 8vw, 140px); max-width: 1440px; margin: 0 auto;
}
@media (min-width: 1100px) {
  .reviews__grid { grid-template-columns: repeat(3, minmax(0, 440px)); justify-content: space-between; max-width: none; padding-inline: clamp(24px, 4vw, 96px); }
}
.review {
  margin: 0; display: flex; flex-direction: column; gap: 16px;
  padding: 8px 0 8px clamp(20px, 2vw, 32px); border-left: 3px solid var(--color-accent);
}
.review__stars { display: flex; gap: 6px; margin: 2px 0; }
.gold-star { flex: none; overflow: visible; filter: drop-shadow(0 1px 0 #6B3F00); }
.gold-star polygon { fill: url(#starGold); stroke: #6B3F00; stroke-width: 1.8; stroke-linejoin: round; }
.gold-star path { fill: #ffffff; opacity: 0.75; }
.review__quote {
  flex: 1; margin: 0; color: var(--color-navy);
  font-family: var(--font-heading); font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -0.005em;
}
.review__who {
  margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-accent-700);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding: 24px var(--gutter); font-size: 14px;
}
.footer__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; color: inherit; text-decoration: none;
}
.footer__brand:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Price Match banner ---------- */
.price-match {
  background: var(--color-accent); color: #ffffff;
  box-shadow: inset 0 3px 0 var(--color-navy), inset 0 6px 0 #ffffff, inset 0 -3px 0 var(--color-navy), inset 0 -6px 0 #ffffff;
}
.price-match__row {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: clamp(16px, 2vw, 40px);
  padding: 6px clamp(20px, 3vw, 40px) 6px 0;
}
.price-match__tab {
  margin: 0; display: flex; align-items: center; gap: 10px;
  padding: 14px clamp(36px, 3.5vw, 56px) 14px clamp(20px, 3vw, 40px);
  background: #ffffff; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%);
  font-family: var(--font-heading); font-weight: 800; font-style: italic; font-size: clamp(17px, 1.5vw, 26px);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap;
}
.price-match__tab .icon-star { fill: var(--color-navy); }
.price-match__list {
  list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-evenly;
  column-gap: clamp(12px, 1.5vw, 32px); row-gap: 6px;
}
.price-match__item {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(14px, 1.1vw, 20px); letter-spacing: 0.02em;
}
.price-match__sep { align-self: center; width: 1px; height: 18px; margin: 0; background: rgba(255, 255, 255, 0.35); }
@media (max-width: 1440px) { .price-match__list { flex-wrap: wrap; justify-content: center; } }
@media (max-width: 760px) {
  .price-match__row { flex-wrap: wrap; padding-left: 0; }
  .price-match__list { padding: 0 20px 8px; }
  .price-match__sep { display: none; }
}

/* ---------- Pricing bubbles ---------- */
.pricing { padding: clamp(48px, 6vw, 80px) clamp(20px, 3vw, 40px); background: #ffffff; }
.pricing__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(28px, 3vw, 44px);
}
.pricing__head {
  position: relative; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 32px;
}
.pricing__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 44px; }
.pill {
  padding: 11px 24px; border: 2px solid var(--color-navy); border-radius: 999px; cursor: pointer;
  background: #ffffff; color: var(--color-navy); opacity: 0.6; box-shadow: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: 0.08em;
  transition: background 0.25s, color 0.25s, padding 0.3s ease, font-size 0.3s ease, opacity 0.25s, box-shadow 0.25s;
}
.pill:hover { border-color: var(--color-mid); }
.pill.is-active {
  padding: 16px 36px; font-size: 22px; opacity: 1;
  background: var(--color-navy); color: #ffffff; box-shadow: 0 8px 18px rgba(10, 49, 97, 0.28);
}
.pricing__swap { display: flex; align-items: center; padding: 6px; border: 0; background: transparent; color: var(--color-mid); cursor: pointer; }
.pricing__swap:hover { color: var(--color-navy); }
.pricing__swap svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pricing__headline-wrap { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.pricing__headline { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 12px 18px; transform: rotate(-2deg); }
.pricing__headline p {
  margin: 0; white-space: nowrap; text-align: center; color: var(--color-navy);
  font-family: var(--font-marker); font-size: clamp(20px, 2.6vw, 44px); line-height: 1.05;
}
.pricing__headline p span { font-size: 1.25em; }
.pricing__headline svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 18px; overflow: visible; }
.pricing__headline path { fill: none; stroke: var(--color-navy); stroke-width: 4; stroke-linecap: round; }
/* Wide screens: the header uses the same columns as the bubbles below it */
@media (min-width: 1280px) {
  .pricing__head { display: grid; align-items: center; row-gap: 16px; }
  .pricing__tabs { grid-column: 1; justify-self: start; flex-wrap: nowrap; width: max-content; }
  .pricing__tabs .pill { white-space: nowrap; }
  .pricing--smog .pricing__head, .pricing--oil .pricing__head {
    grid-template-columns: repeat(4, min(var(--oil-bubble), var(--fit-bubble)));
    justify-content: space-evenly; column-gap: clamp(20px, 2.5vw, 40px); max-width: 1760px; width: 100%; margin-inline: auto;
  }
  .pricing--smog .pricing__headline-wrap, .pricing--oil .pricing__headline-wrap { grid-column: 3 / span 2; }
}

.bubbles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(20px, 2.5vw, 40px); width: 100%; min-width: 0;
}
@media (min-width: 900px) {
  .bubbles--smog, .pricing--smog .pricing__head, .pricing--oil .pricing__head {
    /* Oil bubble size: (min(100%, 1320px) - 2 oil gaps) / 3. Fall back to whatever fits 4 across. */
    --oil-bubble: calc((min(100%, 1320px) - 2 * clamp(40px, 7vw, 120px)) / 3);
    --fit-bubble: calc((100% - 3 * clamp(20px, 2.5vw, 40px)) / 4);
  }
  .bubbles--smog {
    grid-template-columns: repeat(4, min(var(--oil-bubble), var(--fit-bubble)));
    justify-content: space-evenly; max-width: 1760px; margin-inline: auto;
  }
  .bubbles--oil {
    grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: min(100%, 1320px); margin-inline: auto;
    column-gap: clamp(40px, 7vw, 120px);
  }
  /* Zigzag: even bubbles drop 45% */
  .bubbles { padding-bottom: clamp(80px, 9vw, 150px); }
  .bubbles > :nth-child(even) { transform: translateY(45%); }
  /* Room for the dropped bubbles plus their shadow, so nothing is clipped */
  .bubbles--smog { padding-bottom: calc(0.45 * min(var(--oil-bubble), var(--fit-bubble)) + 24px); }
}
/* Two bubbles per row (roughly 460–680px wide): center the third Oil Change bubble */
@media (min-width: 460px) and (max-width: 680px) {
  .bubbles--oil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bubbles--oil > .bubble:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(20px, 2.5vw, 40px)) / 2);
  }
}
.bubble {
  aspect-ratio: 1; border-radius: 50%; min-width: 0; min-height: 0; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9% 10%; text-align: center;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7) 55%, rgba(214, 224, 238, 0.72) 100%),
    url("../assets/paper-texture-310.jpg");
  background-size: 100% 100%, 900px auto;
  background-position: 0 0, var(--tex-pos, 40% 40%);
  border: 4px solid var(--color-mid);
  box-shadow: inset 0 -12px 26px rgba(10, 49, 97, 0.12), inset 0 10px 18px rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(10, 49, 97, 0.12), 0 14px 28px rgba(10, 49, 97, 0.18), 0 30px 50px -14px rgba(10, 49, 97, 0.26);
  animation: bubbleIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}
.bubble:nth-child(2) { animation-delay: 0.08s; }
.bubble:nth-child(3) { animation-delay: 0.16s; }
.bubble:nth-child(4) { animation-delay: 0.24s; }
@keyframes bubbleIn { from { opacity: 0; scale: 0.6; translate: 0 40px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.bubble__title {
  margin: 0; color: var(--color-mid); text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800; font-size: 10cqw; letter-spacing: 0.12em;
}
.bubbles--oil .bubble__title { font-size: 8.5cqw; letter-spacing: 0.04em; white-space: nowrap; }
.bubble__price {
  margin: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 22cqw; line-height: 1; color: var(--color-navy);
}
.bubble__price--plain, .bubble__price--call { display: block; letter-spacing: 0.02em; }
.bubble__price--call { text-transform: uppercase; }
.ribbon {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  margin: 2px 0; padding: 0.3em 1.3em; min-height: 22px; border: 0; border-radius: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6em) 50%, 100% 100%, 0 100%, 0.6em 50%);
  background: var(--color-accent); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: max(10px, 7.5cqw); letter-spacing: 0.08em; text-transform: uppercase;
}
.ribbon:hover { background: var(--color-accent-600); }
.bubble__call {
  align-self: center; margin: 0 0 4px; padding-bottom: 2px;
  font-family: var(--font-heading); font-weight: 800; font-size: 8cqw; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-navy); text-decoration: none; border-bottom: 2px solid var(--color-light-blue);
}
.bubble__call:hover { color: var(--color-navy); border-bottom-color: var(--color-navy); }
.bubble__note { margin: 2px 0 0; font-size: 9cqw; line-height: 1.3; color: var(--color-navy); }
.bubble__extra { margin: 0; font-size: 6.5cqw; line-height: 1.2; color: var(--color-muted); }

/* ---------- How It Works ---------- */
.steps { padding: clamp(56px, 7vw, 88px) var(--gutter); background: var(--color-ground); }
.steps--oil { border-top: 2px solid var(--color-divider); }
.steps__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.steps--smog .steps__inner { max-width: 1560px; gap: 48px; }
.steps--oil .steps__inner { max-width: 1760px; gap: 48px; }
.steps--smog .steps__flow, .steps--oil .steps__flow { gap: 24px; }
.steps--smog .step, .steps--oil .step { padding: 32px clamp(16px, 1.4vw, 28px) 30px; gap: 14px; }
.steps--smog .step__title, .steps--oil .step__title { font-size: clamp(22px, 1.5vw, 26px); }
.steps--smog .step__copy, .steps--oil .step__copy { font-size: clamp(16px, 1.1vw, 18px); }
.steps--smog .steps__footnote { font-size: clamp(16px, 1.1vw, 18px); }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.section-head__kicker {
  margin: 0; color: var(--color-mid); text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.24em;
}
.section-head__kicker--red { color: var(--color-accent); }
.section-head__title {
  margin: 0; color: var(--color-navy); text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); line-height: 1; letter-spacing: -0.02em;
}
.steps__flow { display: grid; align-items: stretch; gap: 14px; width: 100%; }
.steps__flow--4 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.steps__flow--5 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
.step {
  min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 22px 24px; text-align: center;
  background: #ffffff; border: 3px solid var(--color-navy); border-radius: 24px;
  box-shadow: 0 10px 22px rgba(10, 49, 97, 0.12);
}
.step__num {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-accent); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 24px;
}
.step__title { margin: 0; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-navy); }
.step__copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--color-navy); }
.steps__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-light-blue); }
.steps__arrow svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .steps__flow { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .steps__arrow svg { transform: rotate(90deg); }
}
.steps__footnote { margin: 0; max-width: 60ch; text-align: center; font-size: 16px; line-height: 1.5; color: var(--color-navy); }

/* ---------- Service page ---------- */
.what-we-do { padding: clamp(56px, 7vw, 88px) var(--gutter); background: var(--color-ground); }
.what-we-do__inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; width: 100%; }
.service-card {
  min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px;
  color: var(--color-accent);
  background-color: #ffffff;
  background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url("../assets/paper-texture-310.jpg");
  background-size: 100% 100%, 900px auto;
  border: 3px solid var(--color-navy); border-radius: 24px; box-shadow: 0 10px 22px rgba(10, 49, 97, 0.12);
}
.service-card__title { margin: 0; font-size: 22px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-navy); }
.service-card__copy { margin: 0; font-size: 16px; line-height: 1.45; color: var(--color-navy); }
.call-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.call-cta__label { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-navy); }
.call-cta__pill {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px;
  background: var(--color-accent); color: #ffffff; text-decoration: none; box-shadow: 0 10px 22px rgba(10, 49, 97, 0.18);
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 24px); letter-spacing: 0;
}
.call-cta__pill:hover { background: var(--color-accent-600); color: #ffffff; }
.call-cta__walk {
  margin: 0; color: var(--color-navy); text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: 0.08em;
}

/* ---------- Contact page ---------- */
.contact { padding: clamp(48px, 6vw, 80px) var(--gutter); }
.contact__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.contact__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.info-card { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #ffffff; border: 2px solid var(--color-navy); }
.contact__cards .info-card { container-type: inline-size; justify-content: center; gap: 18px; }
.info-card--roomy { padding: clamp(24px, 3vw, 36px); }
.info-card__note { margin: 0; font-size: 15px; color: var(--color-muted); }
.big-link {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-navy);
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.01em;
}
.big-link:hover { color: var(--color-mid); }
.big-link--email { font-size: clamp(24px, 2.6vw, 34px); overflow-wrap: anywhere; }
.big-link--loc { font-size: clamp(28px, 3vw, 40px); }
/* Contact: phone and email at the same size, shrinking to always fit on one line */
.contact__cards .big-link { font-size: clamp(18px, calc((100cqi - 56px) / 13.2), 38px); white-space: nowrap; overflow-wrap: normal; }
.contact__cards .big-link svg { flex: none; width: 0.8em; height: 0.8em; }

.signup {
  position: relative;
  padding: calc(20px + clamp(28px, 4vw, 48px)) clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center;
  gap: clamp(20px, 3vw, 40px);
  color: var(--color-navy);
  background-color: #ffffff;
  background-image: repeating-linear-gradient(180deg, #ffffff 0 5px, var(--color-flag) 5px 10px);
  background-size: 100% 20px; background-repeat: no-repeat;
  border: 2px solid var(--color-navy); box-shadow: 0 18px 40px rgba(10, 49, 97, 0.18);
}
.signup__copy { display: flex; flex-direction: column; gap: 10px; }
.signup__kicker {
  margin: 0; display: flex; align-items: center; gap: 10px; color: var(--color-mid);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
}
.signup__title {
  margin: 0; color: var(--color-navy); text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.8vw, 50px); line-height: 1;
}
.signup__title span { color: var(--color-mid); font-size: 1.45em; line-height: 0.8; }
.signup__body { margin: 0; font-size: 18px; line-height: 1.5; color: var(--color-navy); }
.signup__body strong { font-weight: 800; color: var(--color-mid); white-space: nowrap; }
.signup__form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.signup__input {
  width: 100%; min-width: 0; padding: 16px 18px; text-align: center;
  border: 2px solid var(--color-navy); background: #ffffff; color: var(--color-navy);
  font-size: 16px; font-family: var(--font-body);
}
.signup__submit {
  flex: 0 0 auto; padding: 11px 20px; border: 2px solid var(--color-accent); border-radius: 999px; cursor: pointer;
  background: var(--color-accent); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.signup__submit:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.signup__fine { margin: 0; font-size: 12px; color: var(--color-muted); text-align: center; }
.signup__done { align-self: center; justify-self: center; text-align: center; margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); color: var(--color-navy); }

/* ---------- Location pages ---------- */
.location { padding: clamp(48px, 6vw, 80px) var(--gutter); }
.location__grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: stretch;
  gap: clamp(24px, 3vw, 40px);
}
.map-card { min-width: 0; display: flex; flex-direction: column; background: #ffffff; border: 2px solid var(--color-navy); }
.map-card__map { flex: 1; min-height: 380px; }
.map-card__map iframe { min-height: 380px; }
.map-card__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px; border-top: 2px solid var(--color-navy);
}
.map-card__addr { margin: 0; font-size: 16px; line-height: 1.4; color: var(--color-navy); }
.map-card__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; text-decoration: none;
  background: var(--color-navy); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.map-card__btn:hover { background: var(--color-navy-hover); color: #ffffff; }
.location__side { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.hours-table { display: flex; flex-direction: column; }
.hours-table__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 10px 0;
  border-bottom: 1px solid var(--color-rule); font-size: 17px; color: var(--color-navy);
}
.hours-table__row:last-child { border-bottom: 0; }
.hours-table__row > :first-child { font-weight: 700; }
.hours-table__row > :last-child { font-variant-numeric: tabular-nums; }
.star-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.star-list li {
  display: flex; align-items: center; gap: 12px; color: var(--color-navy);
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
}
.star-list .icon-star { fill: var(--color-accent); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .car-logo *, .nav--intro .car-logo > svg, .nav--intro .nav__links > *, .bubble { animation: none !important; }
  .coupon-lock, .pill, .coupon-lock__shackle { transition: none; }
}

/* Spam honeypot on the coupon forms: off-screen, never seen by visitors. */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }