/* =============================================================================
   Dhaka Auto Service — styles.css
   Mobile-first. All colours live in CSS custom properties (see :root).
   No inline styles anywhere in the HTML.
   Sections:
     1.  Design tokens (:root)
     2.  Reset / base
     3.  Layout helpers (.container, .section)
     4.  Buttons
     5.  Skip link + utilities
     6.  Header + primary nav + services submenu + hamburger
     7.  Hero
     8.  Services
     9.  Why choose us
     10. Appointment form
     11. Location
     12. Footer
     13. Back-to-top
     14. Desktop breakpoints (>= 768px, >= 1024px)
     15. Reduced-motion
   ========================================================================== */

/* ---------- 0. Self-hosted fonts (latin subset, variable — one file per
   family, covers weights 400-700). Also inlined in index.html's critical CSS. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/oswald-latin.woff2") format("woff2");
}

/* Metric-matched fallbacks (generated with capsize). Listed right after the web
   font in --font-body / --font-head, so text painted before Inter/Oswald load
   occupies the same box and nothing reflows on swap. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}

@font-face {
  font-family: "Oswald Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 146.5125%;
  descent-override: 35.4921%;
  line-gap-override: 0%;
  size-adjust: 81.4265%;
}

/* ---------- 1. Design tokens ---------------------------------------------- */
:root {
  /* ---------------------------------------------------------------
     PALETTE — automotive red + charcoal (+ clean white).
     Token names are kept stable on purpose:
       --c-navy*   = the charcoal darks
       --c-orange* = the primary red accent
       --c-blue*   = the secondary red tones (kept as "blue*" so no
                     selector has to change — see values below)
     Re-skin the whole site by editing the values below.
     --------------------------------------------------------------- */
  --c-navy: #1f2327;          /* charcoal — primary dark */
  --c-navy-600: #363c42;      /* lifted charcoal — hovers, borders on dark */
  --c-navy-700: #191c1f;      /* footer charcoal */
  --c-navy-900: #111316;      /* deepest charcoal — hero base */

  --c-orange: #d62f27;        /* automotive red — accents on charcoal, buttons */
  --c-orange-600: #a81f19;    /* deep red — red text on white (AA) */
  --c-orange-glow: rgba(214, 47, 39, 0.35);

  --c-blue: #cd7e78;          /* soft red — accents on charcoal (eyebrows, icons) */
  --c-blue-600: #b0322b;      /* mid red — links / eyebrows on white (AA) */
  --c-blue-100: #fbe7e5;      /* faint red wash — icon backgrounds */

  /* Neutrals / text (cool grey) */
  --c-ink: #1c1f22;
  --c-body: #43464a;
  --c-muted: #606366;
  --c-line: #c6c8cc;
  --c-surface: #d3d5d9;
  --c-surface-2: #c9ccd0;
  --c-white: #e0e0e0;

  /* Accents */
  --c-star: #e8a33d;          /* amber stars — stay warm, not red */
  --c-focus: #b0322b;         /* mid red — AA on white; brightened on dark sections below */
  --c-success-bg: #eafaf0;
  --c-success-border: #a1c9af;
  --c-success-ink: #255a3d;
  --c-invalid: #8f4740;
  --c-notice-bg: #ead8bc;
  --c-notice-border: #d3bf94;
  --c-notice-ink: #644b25;

  /* Fonts self-hosted in fonts/ (see @font-face below); system stack is the fallback */
  --font-head: "Oswald", "Oswald Fallback", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --maxw: 1120px;
  --header-h: 72px;
  --radius: 14px;
  --radius-sm: 10px;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --transition: 200ms ease;

  --shadow-sm: 0 1px 2px rgba(20, 29, 39, 0.06), 0 2px 6px rgba(20, 29, 39, 0.06);
  --shadow-md: 0 12px 30px rgba(20, 29, 39, 0.12);
  --shadow-lg: 0 24px 60px rgba(20, 29, 39, 0.18);
}

/* ---------- 2. Reset / base -------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-white);
  overflow-x: clip; /* guard against any stray horizontal scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
iframe,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--c-blue-600);
}

h1,
h2,
h3 {
  line-height: 1.12;
  color: var(--c-ink);
  font-weight: 700;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--c-surface-2);
  padding: 0.1em 0.4em;
  border-radius: 6px;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 3. Layout helpers -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section {
  padding-block: var(--section-y);
}

.section--surface {
  background: var(--c-surface);
}

.section--navy {
  background: var(--c-navy);
  color: #b1b4b7;
  --c-focus: #d59590; /* brighten the focus ring on dark ground */
}

.section__head {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-blue-600);
  background: var(--c-blue-100);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}

.section__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--c-navy);
  margin-bottom: 0.7rem;
}

.section--navy .section__eyebrow {
  color: var(--c-blue);
  background: rgba(205, 126, 120, 0.14);
}

.section--navy .section__title {
  color: #e0e0e0;
}

.section__intro {
  font-size: 1.05rem;
  color: var(--c-body);
}

.section--navy .section__intro {
  color: #a1a5a9;
}

/* Narrative paragraphs (e.g. the About copy in #why) read better left-aligned
   than centred like the rest of .section__head. */
.about-copy {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.85rem;
  text-align: left;
  font-size: 1.02rem;
  color: var(--c-body);
}

.section__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.section__cta-text {
  font-size: 1.02rem;
  color: var(--c-body);
}

/* ---------- 4. Buttons ------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-navy);
  --btn-fg: #e0e0e0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.9rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform var(--transition), background var(--transition),
    color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--c-orange);
  --btn-fg: #e0e0e0;
  background-image: linear-gradient(135deg, #ba5650, #903734);
  box-shadow: 0 6px 18px var(--c-orange-glow);
}

.btn--primary:hover {
  --btn-bg: var(--c-orange-600);
  background-image: linear-gradient(135deg, #9b4b47, #7a2f2b);
  box-shadow: 0 9px 24px var(--c-orange-glow);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #e0e0e0;
  border-color: var(--c-blue);
}

.btn--ghost:hover {
  --btn-bg: rgba(158, 69, 65, 0.14);
  border-color: var(--c-blue);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  border-color: var(--c-line);
}

.btn--outline:hover {
  --btn-bg: var(--c-surface);
  border-color: var(--c-navy);
}

.btn--lg {
  padding: 1.05rem 1.7rem;
  font-size: 1.05rem;
}

.btn--phone {
  --btn-bg: var(--c-navy);
  --btn-fg: #e0e0e0;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
  /* Stay a comfortable tap target on phones even as the font/padding shrink. */
  min-height: 44px;
}

.btn--phone:hover {
  --btn-bg: var(--c-navy-600);
  transform: none;
}

.btn--phone svg {
  width: 17px;
  height: 17px;
}

/* ---------- 5. Skip link + utilities ------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--c-white);
  color: var(--c-navy);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  transition: top var(--transition);
}

.skip-link:focus {
  top: 8px;
}

.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;
}

main:focus {
  outline: none;
}

/* Anchor offset so sticky header never covers the target */
main section[id],
.service-card[id],
#svc-body-work {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* ---------- 6. Header + nav ------------------------------------------------- */
/* Utility bar above the sticky header — hours + phone. Deliberately NOT part
   of .site-header (not sticky, doesn't sit inside it): several things key off
   .site-header's own height (--header-h, the sticky-shadow logic, and e2e
   assertions on .site-header's bounding box), and folding this in would move
   all of them. Desktop/tablet only — on phones the header alone already
   carries the phone number, so this would just eat vertical space. */
.topbar {
  display: none;
}

@media (min-width: 768px) {
  .topbar {
    display: block;
    background: var(--c-navy-900);
    color: #a1a5a9;
    font-size: 0.82rem;
  }

  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 34px;
    padding-block: 0.35rem;
  }

  .topbar__hours strong {
    color: #e0e0e0;
    font-weight: 600;
  }

  .topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-blue);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
  }

  .topbar__phone svg {
    width: 14px;
    height: 14px;
  }

  .topbar__phone:hover {
    color: #e0e0e0;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-top: 3px solid var(--c-orange);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0; /* allow the wordmark to ellipsis before it overlaps the buttons */
  text-decoration: none;
  color: var(--c-navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* height fixed, width auto: the logo image sets its own aspect ratio, so
   scaling it (per breakpoint / .homepage below) can never stretch or crop it. */
.logo__mark {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Primary nav — mobile first (dropdown panel under the header) */
.site-nav__list {
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.site-nav__link {
  display: block;
  padding: 0.85rem clamp(1rem, 4vw, 2rem);
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  line-height: 1.25;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.site-nav__link:hover {
  background: var(--c-surface);
}

.site-nav__link.is-active {
  color: var(--c-navy);
  border-left-color: var(--c-orange);
  background: var(--c-surface);
}

.site-nav__link--cta {
  margin: 0.5rem clamp(1rem, 4vw, 2rem);
  padding: 0.8rem 1.2rem;
  background: var(--c-orange);
  color: #e0e0e0;
  text-align: center;
  border-radius: 999px;
  border-left: 0;
}

.site-nav__link--cta:hover {
  background: var(--c-orange-600);
}

/* When JS is on, the mobile nav collapses into a toggle panel */
.js .site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition), visibility var(--transition);
}

.js .site-nav.is-open {
  max-height: min(80vh, 620px);
  overflow-y: auto;
  visibility: visible;
}

/* Services submenu — mobile: an indented accordion inside the panel */
.site-nav__item--has-menu {
  position: relative;
}

.submenu-toggle {
  position: absolute;
  top: 0;
  right: clamp(0.5rem, 3vw, 1.5rem);
  /* Pin to the "Services" row only — matches the link's padding + line height,
     so it doesn't drift down the list when the accordion is open. */
  height: calc(0.85rem * 2 + 1.05rem * 1.25);
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--c-navy);
}

.submenu-toggle__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--c-surface);
  transition: max-height var(--transition);
}

.site-nav__item--has-menu.is-open .submenu {
  max-height: 900px;
}

.submenu__link {
  display: block;
  padding: 0.7rem clamp(1rem, 4vw, 2rem) 0.7rem calc(clamp(1rem, 4vw, 2rem) + 1rem);
  text-decoration: none;
  color: var(--c-body);
  font-size: 0.98rem;
  border-left: 3px solid transparent;
}

.submenu__link:hover,
.submenu__link:focus-visible {
  background: var(--c-surface-2);
  color: var(--c-navy);
  border-left-color: var(--c-orange);
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* No-JS fallback: show the nav inline, hide the toggle */
.no-js .nav-toggle {
  display: none;
}

.no-js .submenu {
  max-height: none;
}

.no-js .submenu-toggle {
  display: none;
}

/* ---------- 7. Hero ------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(600px, 90vh, 940px); /* taller stage so the background video reads bigger */
  color: #fff;
  --c-focus: #d59590; /* brighten the focus ring on dark ground */
  background-color: var(--c-navy-900);
  /* Red glow + darkening wash sit over the poster image / video below. */
  background-image: radial-gradient(1200px 620px at 80% 12%, rgba(214, 47, 39, 0.22) 0%, rgba(214, 47, 39, 0) 60%);
  padding-block: clamp(3.5rem, 12vw, 8rem);
  border-bottom: 4px solid var(--c-orange);
}

/* Keeps the headline and buttons readable over any footage */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter wash than a full scrim: the darker workshop footage stays visible
     while the headline stays legible. Kept stronger toward the lower-left where
     the text sits. */
  background: radial-gradient(900px 520px at 80% 10%, rgba(214, 47, 39, 0.16) 0%, rgba(214, 47, 39, 0) 62%),
    linear-gradient(158deg, rgba(17, 19, 22, 0.5) 0%, rgba(12, 14, 16, 0.8) 82%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--c-blue);
  background: rgba(205, 126, 120, 0.14);
  border: 1px solid rgba(205, 126, 120, 0.35);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.hero__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 4.25rem);
  line-height: 1.02;
  color: #e0e0e0;
  margin-bottom: 1rem;
}

.hero__pitch {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: #bcbfc3;
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

/* Four short badges, laid out two-per-row on desktop, one-per-row on phones. */
.hero__badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  max-width: 34rem;
}

.hero__badges li {
  position: relative;
  flex: 1 1 40%;
  min-width: 12rem;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: #b3b5b9;
}

.hero__badges li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-orange);
}

/* ---------- 8. Services ------------------------------------------------------ */
.services__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Flex (not grid) so a partly-filled last row centres itself instead of
     leaving an empty cell on the right. Column count is set by the card's
     flex-basis at each breakpoint below. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.service-card {
  flex: 0 1 100%; /* one card per row until a breakpoint narrows the basis */
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Cards in a row stretch to equal height; a flex column lets the body fill
     that height so short-text cards don't leave a blank gap at the bottom. */
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Keep the "see more" collapse working — `display: flex` above would otherwise
   override the browser default that hides [hidden] elements. */
.service-card[hidden] {
  display: none;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(158, 69, 65, 0.55);
}

.service-card:hover .service-card__img {
  transform: scale(1.04);
}

/* Brief highlight when reached from the nav submenu */
.service-card:target,
.service-card.is-flash {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(158, 69, 65, 0.32), var(--shadow-md);
}

.service-card picture {
  display: block;
}

.service-card__img {
  display: block;
  width: 100%;
  height: auto; /* let aspect-ratio drive height, not the width/height attrs */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-surface-2);
  transition: transform var(--transition);
}

.service-card__body {
  flex: 1 1 auto; /* fill the card's height so the white ground reaches the bottom */
  display: flex;
  flex-direction: column;
  /* Top-align: every card's title sits the same distance below its image, so a
     row of cards with different amounts of text still lines up tidily. Spare
     height falls to the bottom rather than floating the text mid-card. */
  justify-content: flex-start;
  padding: 1.15rem 1.35rem 1.4rem;
}

.service-card__name {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
  color: var(--c-navy);
  margin-bottom: 0.4rem;
}

.service-card__desc {
  font-size: 0.95rem;
  color: var(--c-body);
}

/* Body work is the shop's headline service — it gets a feature strip above the
   grid instead of a card in it. White panel on the section's surface tint. */
.bodywork-feature {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.bodywork-feature__media {
  display: block;
}

/* Mobile uses a slightly tighter crop that keeps the damaged panel and repair
   activity prominent. Desktop switches to a wider side-by-side layout below. */
.bodywork-feature__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  max-height: 220px;
  object-fit: cover;
  object-position: center 32%;
  background: var(--c-surface-2);
}

@media (max-width: 799px) {
  .bodywork-feature__media img {
    aspect-ratio: 5 / 4;
    max-height: none;
    object-position: left center;
  }
}

.bodywork-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.2rem 1.2rem 1.35rem;
}

.bodywork-feature__tag {
  align-self: flex-start;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e0e0e0;
  background: var(--c-orange);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

.bodywork-feature__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--c-navy);
}

.bodywork-feature__text {
  font-size: 0.95rem;
  color: var(--c-body);
  max-width: 54ch;
}

.bodywork-feature__actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Small phones: drop the secondary "Call" button (the header keeps a persistent
   one) to trim the strip's height. Scoped to .bodywork-feature__call, not the
   shared .btn--outline class — the "View more" link next to it also uses
   .btn--outline and must stay reachable. */
@media (max-width: 560px) {
  .bodywork-feature__actions .bodywork-feature__call {
    display: none;
  }
}

@media (min-width: 800px) {
  .bodywork-feature {
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr);
    margin-bottom: 1.75rem;
  }

  .bodywork-feature > * {
    min-width: 0; /* let the fr tracks shrink instead of overflowing */
  }

  .bodywork-feature__body {
    gap: 0.55rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
  }

  /* The approved homepage photo is a true 3:2 landscape image. It fills the
     feature row without stretching while keeping the damaged panel and repair
     activity visible beside the copy. */
  .bodywork-feature__media img {
    aspect-ratio: auto;
    max-height: none;
    object-position: center center;
  }
}

.services__disclaimer {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.9rem;
  /* --c-muted (#6b7076) is only 4.49:1 on the section's surface tint — just
     under WCAG AA. --c-body clears it comfortably and still reads as fine print. */
  color: var(--c-body);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------- 9. Why choose us ---------------------------------------------- */
.why__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

.why-item__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(158, 69, 65, 0.16);
  border: 1px solid rgba(205, 126, 120, 0.3);
  color: var(--c-blue);
  margin-bottom: 1rem;
}

.why-item__icon svg {
  width: 24px;
  height: 24px;
}

.why-item__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1.05rem;
  color: #e0e0e0;
  margin-bottom: 0.4rem;
}

.why-item__text {
  font-size: 0.95rem;
  color: #a1a5a9;
}

/* Honest value-prop bar — claims already made elsewhere on the page (free
   estimates, all makes/models, same-day service, insurance claims), not
   invented stats. A bold visual break after the why-us grid. */
.value-bar {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 1.25rem clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  background: var(--c-navy-900);
  border: 1px solid rgba(224, 224, 224, 0.1);
  border-radius: var(--radius);
}

.value-bar__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.value-bar__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-orange);
  color: #e0e0e0;
}

.value-bar__icon svg {
  width: 20px;
  height: 20px;
}

.value-bar__label {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  color: #e0e0e0;
}

/* ---------- 9b. FAQ (native <details> accordion) ------------------------------ */
.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0 1.1rem;
}

.faq__q {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  color: var(--c-navy);
  cursor: pointer;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-orange-600);
  transition: transform var(--transition);
}

.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
}

.faq__a {
  margin: 0;
  padding: 0 0 1.1rem;
  font-size: 0.97rem;
  color: var(--c-body);
}

.faq__a p {
  margin: 0 0 0.75rem;
}

.faq__a p:last-child {
  margin-bottom: 0;
}

.faq__q-label {
  flex: 1;
}

.faq__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq__thumb picture,
.faq__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__bullets {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
}

.faq__bullets li {
  margin-bottom: 0.4rem;
  font-size: 0.94rem;
}

.faq__bullets li:last-child {
  margin-bottom: 0;
}

/* ---------- 10. Appointment form ---------------------------------------------- */
.appointment__layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Grid/flex children default to min-width:auto, so a wide field (the date and
   number inputs have a chunky intrinsic size) can refuse to shrink and push the
   whole two-column layout past the screen edge on tablet widths. Let them
   shrink. */
.appointment__layout > *,
.location__layout > *,
.form-field {
  min-width: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
}

.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-orange);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--shadow-md);
}

.form-legend-note {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 1.25rem;
}

.req {
  color: var(--c-orange-600);
  font-weight: 700;
}

.form-grid {
  display: grid;
  gap: 1.1rem 1rem;
  grid-template-columns: 1fr;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-navy);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px rgba(158, 69, 65, 0.28);
}

/* Only flag fields the user has actually interacted with */
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid {
  border-color: var(--c-invalid);
}

.vehicle {
  grid-column: 1 / -1;
  border: 1px dashed var(--c-line);
  border-radius: 12px;
  padding: 1rem;
}

.vehicle legend {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--c-navy);
  padding-inline: 0.4rem;
}

.vehicle__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Honeypot — visually removed, still in the DOM for bots */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.form-note {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--c-muted);
}

/* Informational (amber) by default — .form-notice--success switches to the
   green tokens for an actual "request received" state (see /book/thanks/). */
.form-notice {
  background: var(--c-notice-bg);
  border: 1px solid var(--c-notice-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.form-notice:focus {
  outline: none;
}

.form-notice h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  color: var(--c-notice-ink);
  margin-bottom: 0.5rem;
}

.form-notice p {
  margin-bottom: 1rem;
  color: var(--c-notice-ink);
}

.form-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.form-notice--success {
  background: var(--c-success-bg);
  border-color: var(--c-success-border);
}

.form-notice--success h3,
.form-notice--success p {
  color: var(--c-success-ink);
}

/* /book/thanks/ centers the notice under the page heading instead of
   sitting inside the two-column .appointment__layout it was designed for. */
.section__head + .form-notice {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.section__head + .form-notice .form-notice__actions {
  justify-content: center;
}

/* Aside */
.appointment__aside {
  display: grid;
  gap: 1.25rem;
}

/* Dark info panel — pairs with the light .form-card to read as a split
   layout (light booking form / dark "reach us another way" panel). Also used
   as-is on every /services/<slug>/ page's sidebar (src/render.js), so this
   one change carries the same look site-wide. */
.aside-card {
  background: var(--c-navy);
  border: 1px solid var(--c-navy-600);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  color: #b1b4b7;
  --c-focus: #d59590; /* brighten the focus ring on dark ground, matches .hero/.section--navy */
}

.aside-card__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1rem;
  color: #e0e0e0;
  margin-bottom: 0.75rem;
}

.aside-card__lead {
  margin-bottom: 0.5rem;
}

.aside-card__phone {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: #e0e0e0;
  text-decoration: none;
}

.aside-card__phone:hover {
  color: var(--c-blue);
}

.aside-card a:not(.aside-card__phone) {
  color: var(--c-blue);
}

.aside-card__text {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: #b1b4b7;
}

.aside-hours {
  display: grid;
  gap: 0.4rem;
}

.aside-hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}

.aside-hours dt {
  font-weight: 600;
  color: #e0e0e0;
}

.aside-hours dd {
  color: #a1a5a9;
  text-align: right;
}

.aside-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #b1b4b7;
}

/* ---------- 11. Location ------------------------------------------------------ */
.location__layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  background: var(--c-surface-2);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.location__block {
  margin-bottom: 1.75rem;
}

.location__block:last-child {
  margin-bottom: 0;
}

.location__subtitle {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--c-navy);
  margin-bottom: 0.6rem;
}

.location__address {
  font-style: normal;
  margin-bottom: 1rem;
  color: var(--c-body);
}

.location__line {
  font-size: 1rem;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.95rem;
  text-align: left;
}

.hours-table td {
  text-align: right;
  color: var(--c-body);
}

.hours-table tr.is-today th,
.hours-table tr.is-today td {
  color: var(--c-navy);
  font-weight: 700;
}

.hours-table tr.is-today th::after {
  content: " · Open today";
  color: var(--c-orange-600);
  font-weight: 600;
  font-size: 0.8em;
}

/* ---------- 11.5 Final CTA --------------------------------------------------- */
.final-cta__actions {
  justify-content: center;
  margin-bottom: 0;
}

/* ---------- 11.6 FAQ page CTA (public/faq/index.html) ------------------------ */
.faq__cta {
  max-width: 760px;
  margin: 2rem auto 0;
  justify-content: center;
}

/* ---------- 12. Footer ------------------------------------------------------ */
.site-footer {
  background: var(--c-navy-700);
  color: #abadb1;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

/* Same min-width:auto trap as the appointment layout: the long email address is
   an unbreakable token that blows the narrow footer columns past the screen on
   tablet widths. Let the columns shrink and the address wrap. */
.footer__grid > * {
  min-width: 0;
}

.footer__list,
.footer__address {
  overflow-wrap: anywhere;
}

.logo--footer {
  color: #e0e0e0;
  margin-bottom: 1rem;
}

.footer__blurb {
  font-size: 0.92rem;
  color: #888d91;
  max-width: 42ch;
}

.footer__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #e0e0e0;
  margin-bottom: 1rem;
  padding-left: 0.65rem;
  border-left: 3px solid var(--c-orange);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: #abadb1;
  text-decoration: none;
}

.site-footer a:hover {
  color: #e0e0e0;
  text-decoration: underline;
}

.footer__address {
  font-style: normal;
  color: #888d91;
}

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(224, 224, 224, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #7f8387;
}

/* ---------- 13. Back-to-top --------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--c-navy);
  color: var(--c-orange);
  border: 1px solid var(--c-navy-600);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition), background var(--transition);
  z-index: 80;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--c-navy-600);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* ---------- 14. Breakpoints ------------------------------------------------- */
@media (min-width: 560px) {
  .service-card {
    flex-basis: calc((100% - 1.25rem) / 2); /* two per row */
  }

  .vehicle__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-field--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 700px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ---- Desktop navigation (>= 768px) ---- */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .js .site-nav,
  .site-nav {
    position: static;
    max-height: none;
    overflow: visible;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
  }

  .site-nav__link {
    padding: 0.5rem 0.8rem;
    font-size: 0.96rem;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
  }

  .site-nav__link:hover {
    background: transparent;
    color: var(--c-orange-600);
  }

  .site-nav__link.is-active {
    background: transparent;
    border-left: 0;
    border-bottom-color: var(--c-orange);
    color: var(--c-navy);
  }

  .site-nav__link--cta {
    margin: 0 0 0 0.5rem;
    padding: 0.6rem 1.15rem;
  }

  .site-nav__link--cta.is-active {
    border-bottom: 0;
    color: #e0e0e0;
  }

  /* Services dropdown on desktop */
  .site-nav__item--has-menu {
    display: flex;
    align-items: center;
  }

  .submenu-toggle {
    position: static;
    inset: auto;
    height: auto;
    width: auto;
    padding: 0.3rem;
    margin-left: -0.4rem;
  }

  .submenu-toggle__icon {
    width: 16px;
    height: 16px;
  }

  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: min(460px, calc(100vw - 2rem));
    max-height: none;
    overflow: visible;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 60;
  }

  .site-nav__item--has-menu:hover .submenu,
  .site-nav__item--has-menu:focus-within .submenu,
  .site-nav__item--has-menu.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .submenu__link {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border-left: 0;
  }

  .submenu__link:hover,
  .submenu__link:focus-visible {
    border-left: 0;
    background: var(--c-surface);
  }

  .appointment__layout {
    grid-template-columns: 1.35fr 0.9fr;
  }

  .location__layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .service-card {
    flex-basis: calc((100% - 3 * 1.25rem) / 4); /* four per row */
  }
}

/* Desktop: let the Services grid spread out so it doesn't sit in a narrow
   1120px column with big empty margins left and right. Only this section's
   container widens — the heading and disclaimer keep their own smaller
   max-width, and every other section stays at --maxw. Five per row (the
   collapsed "see more" view then shows a tidy 5 + 3, not an orphan row), and
   card width barely changes from the four-per-row size. Phones/tablets
   (< 1200px) are untouched. */
@media (min-width: 1200px) {
  #services > .container {
    /* Track the viewport up to a cap, so the grid keeps a healthy gutter on
       the widest monitors but doesn't sit in a narrow column on a laptop. The
       section's own surface tint frames whatever gutter is left, so it reads
       as deliberate rather than blank. */
    max-width: min(1600px, 93vw);
  }

  .service-card {
    flex-basis: calc((100% - 4 * 1.25rem) / 5); /* five per row */
  }
}

@media (min-width: 1000px) {
  .why__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .value-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small screens: shrink the header so logo + phone + hamburger always fit */
@media (max-width: 620px) {
  .header__inner {
    gap: 0.5rem;
  }

  .logo {
    gap: 0.45rem;
    font-size: 1.05rem;
  }

  .logo__mark {
    height: 34px;
    width: auto;
  }

  .btn--phone {
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
  }

  .btn--phone svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 430px) {
  :root {
    --header-h: 60px;
  }

  .logo {
    font-size: 0.86rem;
  }

  .btn--phone {
    font-size: 0.72rem;
    padding: 0.45rem 0.55rem;
    gap: 0.3rem;
  }

  .nav-toggle {
    /* keep a 44px touch target; just tighten the bars */
    padding: 13px 9px;
  }
}

/* Very narrow (iPhone SE etc.): phone stays a tappable icon, digits hide */
@media (max-width: 340px) {
  .btn--phone__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .btn--phone {
    padding: 0.45rem;
  }
}

/* ---------- 15. Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .service-card:hover,
  .service-card:hover .service-card__img,
  .home-featured-card:hover,
  .home-featured-card:hover > img,
  .home-featured-card:hover .home-card-arrow b,
  .google-review-card:hover {
    transform: none;
  }
}

/* ---------- 16. Service detail pages (/services/<slug>/, rendered by
   src/render.js) ------------------------------------------------------------ */
.hero--service {
  min-height: clamp(400px, 46vw, 560px);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero--service__media {
  display: none;
}

.hero--service .hero__overlay {
  background: linear-gradient(90deg, rgba(16, 17, 18, 0.96) 0%, rgba(16, 17, 18, 0.88) 42%, rgba(16, 17, 18, 0.32) 70%, rgba(16, 17, 18, 0.5) 100%);
}

.hero--service .hero__inner {
  max-width: 720px;
}

.service-card__more {
  margin-top: auto; /* pin to the bottom of the card body, see .service-card__body */
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-orange-600);
  text-decoration: none;
}

.service-card__more:hover,
.service-card__more:focus-visible {
  text-decoration: underline;
}

.service-content__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.service-article {
  max-width: 68ch;
}

.service-article h2 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--c-navy);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.service-article p {
  margin-bottom: 1rem;
}

.service-info {
  position: sticky;
  top: 1.25rem;
}

.service-info__action {
  width: 100%;
  margin-top: 1.25rem;
  justify-content: center;
}

.service-cta {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.related-services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.related-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--c-navy);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.related-card__link:hover,
.related-card__link:focus-visible {
  border-color: var(--c-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.related-card__media picture,
.related-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.related-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
}

.related-card__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1rem;
  color: var(--c-navy);
  margin-bottom: 0.35rem;
}

.related-card__desc {
  font-size: 0.88rem;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}

.related-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-orange-600);
}

/* ---------- 9c. Service page: lede, summary cards, signs, process ------------- */
.service-lede {
  font-size: 1.08rem;
  color: var(--c-body);
  margin-bottom: 1.75rem;
}

.service-summary {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.service-summary__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.service-summary__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-blue-100);
  color: var(--c-orange-600);
  margin-bottom: 0.6rem;
}

.service-summary__icon svg {
  width: 18px;
  height: 18px;
}

.service-summary__label {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  color: var(--c-navy);
  margin-bottom: 0.2rem;
}

.service-summary__text {
  font-size: 0.87rem;
  color: var(--c-muted);
}

.service-gallery {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, 1fr);
}

.service-gallery__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.service-gallery__item picture,
.service-gallery__item img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.signs-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.signs-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--c-body);
}

.signs-grid li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: var(--c-orange);
}

.process-steps {
  list-style: none;
  counter-reset: process;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.process-steps__step {
  counter-increment: process;
  display: flex;
  gap: 1rem;
}

.process-steps__number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-navy);
  color: #e0e0e0;
  font-family: var(--font-head);
  font-weight: 700;
}

.process-steps__number::before {
  content: counter(process);
}

.process-steps__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 0.98rem;
  color: var(--c-navy);
  margin-bottom: 0.25rem;
}

.process-steps__text {
  font-size: 0.92rem;
  color: var(--c-muted);
}

@media (min-width: 560px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .hero--service__media {
    position: absolute;
    inset: 0 0 0 auto;
    display: block;
    width: min(48%, 720px);
    z-index: 0;
  }

  .hero--service__media picture,
  .hero--service__media img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero--service__media img {
    object-fit: cover;
  }

  .service-content__layout {
    grid-template-columns: 1.5fr 0.9fr;
  }
}

@media (max-width: 620px) {
  .hero--service .hero__actions,
  .service-cta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero--service .hero__actions .btn,
  .service-cta .btn {
    justify-content: center;
    width: 100%;
  }

  .service-info {
    position: static;
  }

  .faq__thumb {
    width: 48px;
    height: 48px;
  }

  .service-gallery__item picture,
  .service-gallery__item img {
    height: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .related-card__link:hover {
    transform: none;
  }
}
/* Service categories remain visible and linked without JavaScript. */
.local-services {
  padding-block: 2rem 3rem;
  border-bottom: 1px solid var(--c-line);
}
.local-services__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.local-services__tile {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.625rem 0.75rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.local-services__tile svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--c-orange-600);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.local-services__tile b {
  color: var(--c-orange-600);
  font-size: 1.125rem;
  line-height: 1;
}
@media (hover: hover) {
  .local-services__tile:hover {
    border-color: var(--c-orange-600);
    color: var(--c-ink);
    transform: translateY(-1px);
  }
}
@media (max-width: 640px) {
  .local-services__tiles { grid-template-columns: 1fr; gap: 0; }
  .local-services__tile {
    min-height: 3.5rem;
    border-radius: 0;
    border-bottom-width: 0;
  }
  .local-services__tiles li:first-child .local-services__tile { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .local-services__tiles li:last-child .local-services__tile { border-bottom-width: 1px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
}
.hero#home { min-height: min(640px, calc(100svh - 180px)); padding-block: 3rem; }
.hero#home .hero__title { font-size: 3.25rem; letter-spacing: 0; }
@media (max-width: 640px) {
  .hero#home .hero__title { font-size: 2.25rem; }
  .hero#home { padding-block: 2rem; }
}
.no-js #appointment-form { display: none; }

/* Homepage reference design; service detail pages retain their shared styles. */
.homepage { --home-dark: #0a1016; }
.homepage .site-header { background: var(--home-dark); border-top: 0; border-bottom: 1px solid #e0e0e024; color: #e0e0e0; }
.homepage .header__inner { max-width: 1480px; min-height: 88px; gap: 1.25rem; }
.homepage .logo { color: #e0e0e0; font-size: 1.15rem; }
.homepage .logo__mark { height: 48px; width: auto; }
.home-header-tagline { padding-left: 1rem; border-left: 1px solid #e0e0e040; font-size: .8rem; line-height: 1.4; flex-shrink: 0; }
.homepage .site-nav__link { font-family: var(--font-body); font-size: .85rem; text-transform: none; letter-spacing: 0; color: #e0e0e0; }
.homepage .site-nav__link:hover, .homepage .site-nav__link.is-active { color: #e0e0e0; background: #e0e0e00c; }
.homepage .site-nav__link[aria-current="page"] { border-bottom-color: #b33a3f; }
.homepage .submenu-toggle { color: #e0e0e0; }
.homepage .btn--phone { background: transparent; color: #e0e0e0; border: 0; font-size: 1rem; padding: .5rem; }
.homepage .btn--phone svg { color: #b33a3f; }
.homepage .btn--phone small { display: block; font: .72rem/1.5 var(--font-body); text-transform: none; }
.homepage .btn { border-radius: 4px; box-shadow: none; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.homepage .btn--primary { background: #a93a3e; border-color: #a93a3e; color: #e0e0e0; }
.homepage .btn--primary:hover { background: #913136; border-color: #913136; }
.homepage .hero#home { isolation: isolate; padding: 0; background: var(--home-dark); }
.home-hero-media, .home-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.home-hero-media { object-fit: cover; object-position: center 48%; }
.home-hero-overlay { background: linear-gradient(90deg,#080f14f5 0%,#080f14db 36%,#080f1470 65%,#080f1430 100%),linear-gradient(0deg,rgba(8, 15, 20, 0.38),transparent 40%); }
.home-hero-inner { position: relative; max-width: 1360px; padding-block: 3.4rem 2rem; }
.home-hero-copy { max-width: 880px; }
.home-eyebrow { display: flex; align-items: center; gap: .8rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0; }
.home-eyebrow::before { content: ''; width: 34px; height: 2px; background: #b33a3f; flex-shrink: 0; }
.homepage .hero#home .hero__title { margin: 1.3rem 0 1rem; font-family: var(--font-body); font-size: 2.9rem; font-weight: 800; line-height: 1.12; letter-spacing: 0; max-width: none; }
.homepage .hero__title span { color: #b83a40; }
.home-hero-pitch { font-size: 1.2rem; line-height: 1.55; max-width: 660px; margin-bottom: 1.7rem; }
.homepage .hero__actions { gap: 1rem; }
.homepage .hero__actions .btn { min-height: 54px; font-size: .95rem; padding: .9rem 1.6rem; }
.homepage .hero__actions .btn--ghost { border: 1px solid #e0e0e0; background: #0a101650; }
.home-hero-note { margin: .9rem 0 0; font-size: .85rem; color: #afb4b9; }
.home-google { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; font-size: .85rem; }
.home-google a { color: #e0e0e0; text-decoration: none; border-left: 1px solid #e0e0e060; padding-left: .8rem; }
.home-google a:hover { text-decoration: underline; }
.home-google-mark { font: bold 2rem Arial,sans-serif; color: #4979c8; }
.home-stars { color: #b2912f; font-size: 1.2rem; white-space: nowrap; }
.home-stars span { color: #7a8289; }
.home-google small { flex-basis: 100%; color: #aab1b7; font-size: .7rem; }
.home-hero-facts {
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: .9rem;
  border-top: 1px solid #e0e0e030;
}
.home-hero-facts li { display: flex; gap: .7rem; align-items: center; padding: 0 1.25rem; border-left: 1px solid #e0e0e060; font-size: .78rem; line-height: 1.4; }
.home-hero-facts li:first-child { padding-left: 0; border-left: 0; }
.home-hero-facts svg { width: 26px; height: 26px; flex-shrink: 0; color: #b33a3f; }
.homepage :focus-visible { outline: 3px solid #ba4f55; outline-offset: 4px; }
@media (max-width: 1250px) {
  .home-header-tagline { display: none; }
  .homepage .header__inner { gap: .5rem; }
  .homepage .site-nav__link { padding-inline: .5rem; }
}
@media (max-width: 1000px) {
  .home-featured-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .homepage .hero#home .hero__title { font-size: 2.5rem; }
}
@media (max-width: 767px) {
  .homepage .header__inner { min-height: 70px; }
  .homepage .site-nav { background: #0a1016; }
  .homepage .site-nav__link { font-size: 1rem; padding: .85rem 1.25rem; }
  .homepage .nav-toggle { color: #e0e0e0; border-color: #e0e0e050; }
  .homepage .nav-toggle__bar { background: #e0e0e0; }
  .home-hero-inner { padding-block: 2.5rem 1.6rem; }
  .home-hero-overlay { background: linear-gradient(90deg,#080f14ef,#080f14ba); }
  .home-hero-facts li { padding: 0 .7rem; font-size: .7rem; }
  .home-hero-facts li:first-child { padding-left: 0; }
  .home-hero-facts svg { width: 22px; height: 22px; }
  .home-hero-facts li:first-child { flex-basis: 100%; padding-bottom: .8rem; margin-bottom: .2rem; border-bottom: 1px solid #e0e0e030; }
}
@media (max-width: 560px) {
  .homepage .logo { font-size: .94rem; }
  .homepage .logo__mark { height: 36px; width: auto; }
  .homepage .btn--phone { font-size: .78rem; }
  .homepage .btn--phone small { display: none; }
  .homepage .hero#home .hero__title { font-size: 2rem; line-height: 1.18; }
  .home-hero-pitch { font-size: 1rem; }
  .home-desktop-break { display: none; }
  .homepage .hero__actions { flex-direction: column; align-items: stretch; }
  .home-google { gap: .5rem; font-size: .78rem; }
  .home-hero-facts li:not(:first-child) { flex: 1; min-width: 95px; }
  .home-featured-heading h2 { font-size: 1.65rem; line-height: 1.2; }
  .home-featured-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
}
@media (max-width: 359px) { .home-featured-grid { grid-template-columns: 1fr; } .homepage .btn--phone svg { display: none; } }
@media (prefers-reduced-motion: reduce) { .home-featured-card:hover { transform: none; } }

/* Homepage refinement based on the approved white-header service reference. */
.homepage .site-header {
  background: #e0e0e0;
  border-bottom-color: #c3c9ce;
  color: #12181e;
}
.homepage .header__inner { min-height: 76px; }
.homepage .logo { color: #12181e; }
.homepage .home-header-tagline { border-left-color: #bdc3c7; color: #262e34; }
.homepage .site-nav__link { color: #12181e; font-weight: 700; }
.homepage .site-nav__link:hover,
.homepage .site-nav__link.is-active { color: #12181e; background: #d3d8dc; }
.homepage .submenu-toggle { color: #12181e; }
.homepage .btn--phone { color: #12181e; }
.homepage .btn--phone small { color: #4d545b; }
.homepage .hero#home { min-height: 520px; }
.home-featured { padding: 2.8rem 0 3.2rem; background: #d2dbe1; }
.home-featured > .container { max-width: 1280px; }
.home-featured-heading {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}
/* c-orange-600, not the brighter #e81922 used elsewhere — this sits on the
   light #f5f8fa section background, where the brighter red is only 4.28:1
   (just under WCAG AA). */
.home-featured-heading .home-eyebrow { justify-content: center; color: var(--c-orange-600); }
.home-featured-heading h2 { font-size: 2.2rem; margin: .5rem 0; }
.home-featured-intro { color: #4d545b; font-size: 1rem; }
.home-featured-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1.1rem; list-style: none; padding: 0; margin: 0; }
.home-featured-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: #12181e;
  text-decoration: none;
  background: #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 6px 20px #161f2710;
  transition: box-shadow .18s, transform .18s;
}
.home-featured-card:hover { box-shadow: 0 14px 32px #161f2728; transform: translateY(-5px); }
.home-featured-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1.9 / 1; object-fit: cover; transition: transform .3s ease; }
.home-featured-card:hover > img { transform: scale(1.03); }
.home-featured-body { position: relative; flex: 1; padding: 0 .9rem 1.1rem; min-height: 150px; }
.home-featured-body > svg {
  position: relative;
  width: 42px;
  height: 42px;
  margin: -21px 0 .65rem;
  padding: 9px;
  border: 4px solid #e0e0e0;
  border-radius: 50%;
  background: #a93a3e;
  color: #e0e0e0;
}
.home-featured-grid li:nth-child(2) .home-featured-body > svg,
.home-featured-grid li:nth-child(5) .home-featured-body > svg {
  background: var(--c-star);
}
.home-featured-grid li:nth-child(3) .home-featured-body > svg,
.home-featured-grid li:nth-child(6) .home-featured-body > svg {
  background: var(--c-navy);
}
.home-featured-body strong { font-size: .95rem; padding-right: 0; }
.home-featured-desc {
  display: block;
  margin-top: .35rem;
  color: #4d545b;
  font-size: .85rem;
  line-height: 1.45;
}
.home-card-arrow {
  position: static;
  display: block;
  margin-top: .65rem;
  color: #a93a3e;
  font-size: .8rem;
  font-weight: 750;
  text-transform: uppercase;
}
.home-card-arrow b { display: inline-block; font-size: 1.05rem; margin-left: .2rem; transition: transform .2s ease; }
.home-featured-card:hover .home-card-arrow b { transform: translateX(3px); }
.home-featured-action { text-align: center; margin-top: 2rem; }
.home-featured-action .btn { min-height: 48px; gap: .7rem; }
@media (max-width: 1000px) {
  .home-featured-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .homepage .site-nav { background: #e0e0e0; }
  .homepage .nav-toggle { color: #12181e; border-color: #b3b9bd; }
  .homepage .nav-toggle__bar { background: #12181e; }
}

/* Fill the viewport below the sticky header on first paint, so no part of
   the Services section peeks past the fold. 77px matches the homepage
   header's real rendered height (76px header__inner + 1px bottom border;
   the refinement rules above zero out the top border). Desktop-only: the
   520px base above keeps mobile at its previous, natural height instead of
   forcing a full-viewport-tall hero on short phone screens. */
@media (min-width: 768px) {
  .homepage .hero#home {
    min-height: calc(100svh - 77px);
    justify-content: flex-end; /* keeps the trust row near the bottom instead of dead-centering the (now much taller) content block */
  }
}
@media (max-width: 560px) {
  .home-featured { padding-block: 2.2rem; }
  .home-featured-heading h2 { font-size: 1.8rem; }
  .home-featured-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-featured-body { min-height: 150px; }
}
@media (max-width: 420px) {
  .home-featured-grid { grid-template-columns: 1fr; }
}

.home-why {
  background: var(--c-surface);
}

.home-why .section__head {
  text-align: center;
  margin-inline: auto;
}

.home-why .why__grid {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 980px;
  margin-inline: auto;
}

.home-why .why-item {
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.home-why .why-item__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.7rem;
  border: 0;
  background: var(--c-blue-100);
  color: var(--c-orange);
}

.home-why .why-item__icon svg {
  width: 25px;
  height: 25px;
}

.home-why .why-item__title {
  color: var(--c-ink);
}

.home-why .why-item__text {
  color: var(--c-body);
}

.home-reviews {
  border-top: 1px solid var(--c-navy-600);
  background: var(--c-navy);
}

.home-reviews .section__head {
  margin-bottom: 1rem;
}

.home-reviews .section__title {
  color: var(--c-white);
}

.home-reviews .section__intro {
  color: #bbbfc3;
}

/* ---------- Work gallery (temporary placeholder photos) ------------------- */
.home-gallery {
  background: var(--c-navy-700);
}

.home-gallery .section__title {
  color: var(--c-white);
}

.home-gallery .section__intro {
  color: #bbbfc3;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery-item {
  background: #e0e0e00d;
  border: 1px solid #e0e0e024;
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.gallery-photo {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-navy-900);
}

.gallery-photo picture,
.gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- rating summary: compact, centered card — large stars carry the
   trust signal instead of a redundant numeric rating ---- */

.home-reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 280px;
  margin: 0 auto 1.25rem;
  padding: 1rem 1.5rem;
  background: #26282b;
  border: 1px solid #3f4245;
  border-top: 3px solid var(--c-orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: var(--c-white);
}

.home-reviews__summary[hidden],
.home-reviews__grid[hidden],
.home-reviews__notice[hidden] {
  display: none;
}

.home-reviews__stars,
.google-review-card__stars {
  color: var(--c-star);
  letter-spacing: 0;
}

.home-reviews__stars {
  font-size: 2rem;
  line-height: 1;
}

.home-reviews__count {
  color: var(--c-white);
  font-size: 0.95rem;
  font-weight: 600;
}

.home-reviews__source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: #bbbfc3;
  font-size: 0.85rem;
  font-weight: 700;
}

.google-g-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.google-g-icon--sm {
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.3rem;
}

/* ---- carousel shell ---- */

.home-reviews__carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.home-reviews__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid #43464a;
  border-radius: 50%;
  background: #26282b;
  color: #bbbfc3;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.home-reviews__arrow[hidden] {
  display: none;
}

.home-reviews__arrow:hover {
  background: var(--c-orange-600);
  border-color: var(--c-orange-600);
  color: var(--c-white);
}

.home-reviews__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.home-reviews__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-reviews__grid {
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.2rem; /* room for the card shadow */
}

.home-reviews__grid::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .home-reviews__grid {
    scroll-behavior: smooth;
  }
}

.home-reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ---- review card ---- */

.google-review-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: 1.5rem;
  background: #26282b;
  border: 1px solid #3f4245;
  border-top: 3px solid var(--c-orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@media (hover: hover) {
  .google-review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

.google-review-card__author {
  display: flex;
  align-items: center;
  min-width: 0;
}

.google-review-card__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.google-review-card__name {
  display: block;
  color: var(--c-white);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.google-review-card__name:hover {
  color: var(--c-blue);
  text-decoration: underline;
}

.google-review-card__date {
  color: #a2a7ad;
  font-size: 0.78rem;
}

.google-review-card__stars {
  font-size: 1rem;
  line-height: 1;
}

.google-review-card__quote {
  position: relative;
  height: 6.2em;
  overflow: hidden;
  line-height: 1.55;
}

.google-review-card__quote p {
  color: #c5c9cc;
  font-style: normal;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.google-review-card__quote.is-clamped {
  padding-bottom: 0.1rem;
}

.google-review-card__quote.is-clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.6rem;
  background: linear-gradient(to bottom, rgba(38, 40, 43, 0), #26282b);
}

.google-review-card__toggle {
  align-self: flex-start;
  margin-top: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-blue);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.google-review-card__toggle:hover {
  text-decoration: underline;
}

.google-review-card__toggle[hidden] {
  display: none;
}

.google-review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid #3f4245;
}

.google-maps-attribution {
  display: inline-flex;
  align-items: center;
  color: #bbbfc3;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.google-review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--c-blue);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: gap var(--transition);
}

.google-review-card__source:hover {
  gap: 0.35rem;
  text-decoration: underline;
}

.home-reviews__status {
  color: #bbbfc3;
  margin-block: 0.25rem 1rem;
  text-align: center;
}

.home-reviews__status[hidden] {
  display: none;
}

.google-review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: #e0e0e0;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
}

.google-review-card:nth-of-type(4n+1) .google-review-card__avatar { background: var(--c-orange); }
.google-review-card:nth-of-type(4n+2) .google-review-card__avatar { background: var(--c-orange-600); }
.google-review-card:nth-of-type(4n+3) .google-review-card__avatar { background: var(--c-ink); }
.google-review-card:nth-of-type(4n+4) .google-review-card__avatar { background: var(--c-orange); }

.home-reviews__notice {
  max-width: 68ch;
  margin: 1rem auto 0;
  text-align: center;
  /* --c-muted is only 4.49:1 on --c-surface — just under WCAG AA. --c-body
     clears it comfortably. */
  color: #d5d9dd;
  font-size: 0.78rem;
}

/* ---- "Read more" dialog: shows the full review without resizing its card ---- */

.review-modal {
  width: 100%;
  max-width: min(560px, calc(100vw - 2rem));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: #26282b;
  color: var(--c-white);
}

.review-modal::backdrop {
  background: rgba(20, 29, 39, 0.55);
}

.review-modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2rem 1.75rem 1.75rem;
  max-height: 80vh;
  overflow-y: auto;
}

.review-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy-600);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--transition);
}

.review-modal__close:hover {
  background: var(--c-orange);
}

.review-modal__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.review-modal__author {
  display: flex;
  align-items: center;
  padding-right: 2rem;
}

.review-modal__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: #e0e0e0;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
}

.review-modal__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.review-modal__name {
  font-weight: 700;
  color: var(--c-white);
  text-decoration: none;
}

.review-modal__name:hover {
  color: var(--c-blue);
  text-decoration: underline;
}

.review-modal__date {
  color: #a2a7ad;
  font-size: 0.8rem;
}

.review-modal__stars {
  color: var(--c-star);
  font-size: 1.15rem;
  line-height: 1;
}

.review-modal__text {
  color: #c5c9cc;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.review-modal__source {
  align-self: flex-start;
  color: var(--c-blue);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.review-modal__source:hover {
  text-decoration: underline;
}

/* ---------- Homepage dark palette -----------------------------------------
   The charcoal/red system is now reserved for a few accent bands (hero,
   the gallery + reviews "our work" strip, the closing CTA, and the footer)
   instead of the whole page — everything else below reverts to the site's
   normal light theme so the homepage doesn't read as all-dark end to end. */
.homepage {
  background: var(--c-navy-900);
  color: #c5c9cc;
}

.homepage .site-header {
  background: var(--c-navy-900);
  border-bottom-color: #e0e0e024;
  color: var(--c-white);
}

.homepage .logo,
.homepage .site-nav__link,
.homepage .submenu-toggle,
.homepage .btn--phone {
  color: var(--c-white);
}

.homepage .home-header-tagline,
.homepage .btn--phone small {
  color: #afb4b9;
}

.homepage .home-header-tagline {
  border-left-color: #e0e0e038;
}

.homepage .site-nav__link:hover,
.homepage .site-nav__link.is-active {
  color: var(--c-white);
  background: #e0e0e00d;
}

.homepage .submenu {
  background: #26282b;
  border-color: #3f4245;
}

.homepage .submenu__link {
  color: #c5c9cc;
}

.homepage .submenu__link:hover,
.homepage .submenu__link:focus-visible {
  color: var(--c-white);
  background: var(--c-navy-600);
}

/* Guarantees & Credentials reverts to the light theme (see "Deliberate
   break from the all-dark homepage" below) — only the icon/title/text
   colors need a light-mode variant since .why-item__icon/__title/__text's
   base values are tuned for a dark section elsewhere on the page. */
.homepage .home-trust {
  background: var(--c-surface);
}

.home-trust .why-item__icon {
  background: var(--c-blue-100);
  color: var(--c-orange);
}

.home-trust .why-item__title {
  color: var(--c-ink);
}

.home-trust .why-item__text {
  color: var(--c-body);
}

.trust-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 680px;
  margin: 0 auto 2rem;
  padding: 1.4rem 2rem;
  background: linear-gradient(135deg, #9e454126, #9e454108);
  border: 1px solid #9e454155;
  border-radius: var(--radius-sm);
  text-align: left;
}

.trust-stat__photo {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #9e454199;
}

.trust-stat__number {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 700;
  color: var(--c-orange);
  line-height: 1;
  flex-shrink: 0;
}

.trust-stat__label {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  color: var(--c-navy);
  line-height: 1.3;
}

.trust-stat__label small {
  display: block;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-muted);
  margin-top: 0.3rem;
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trust-item:hover {
  transform: translateY(-6px);
  border-color: #9e454199;
  box-shadow: var(--shadow-md);
}

.trust-item .why-item__icon {
  transition: transform 0.25s ease;
}

.trust-item:hover .why-item__icon {
  transform: scale(1.12);
}

.trust-item__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  margin-bottom: 1rem;
  transition: transform 0.25s ease;
}

.trust-item__logo img {
  display: block;
  height: 34px;
  width: auto;
}

.trust-item:hover .trust-item__logo {
  transform: scale(1.08);
}

/* Certified Mechanics and Financing lean gold instead of red — a medal and
   a coin both read naturally warm, and it breaks up six red circles in a
   row into a more varied, deliberate rhythm. */
.trust-item:nth-child(4) .why-item__icon,
.trust-item:nth-child(6) .why-item__icon {
  background: rgba(189, 140, 69, 0.18);
  border-color: rgba(189, 140, 69, 0.4);
  color: var(--c-star);
}

@media (prefers-reduced-motion: no-preference) {
  .trust-item .why-item__icon,
  .trust-item .trust-item__logo {
    animation: trust-pulse 2.6s ease-in-out infinite;
  }
  .trust-item:nth-child(2) .why-item__icon { animation-delay: 0.3s; }
  .trust-item:nth-child(3) .why-item__icon { animation-delay: 0.6s; }
  .trust-item:nth-child(4) .why-item__icon { animation-delay: 0.9s; animation-name: trust-pulse-gold; }
  .trust-item:nth-child(5) .trust-item__logo { animation-delay: 1.2s; }
  .trust-item:nth-child(6) .why-item__icon { animation-delay: 1.5s; animation-name: trust-pulse-gold; }
}

@keyframes trust-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 69, 65, 0.4); }
  50% { box-shadow: 0 0 0 9px rgba(158, 69, 65, 0); }
}

@keyframes trust-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(189, 140, 69, 0.4); }
  50% { box-shadow: 0 0 0 9px rgba(189, 140, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-item:hover {
    transform: none;
  }
  .trust-item .why-item__icon,
  .trust-item .trust-item__logo {
    animation: none;
  }
}

@media (max-width: 479px) {
  .trust-stat {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

.homepage .home-featured {
  background: var(--c-navy-700);
}

.homepage .home-featured-heading h2,
.homepage .home-featured-card strong {
  color: var(--c-white);
}

.homepage .home-featured-intro,
.homepage .home-featured-desc {
  color: #bbbfc3;
}

.homepage .home-featured-heading .home-eyebrow,
.homepage .home-card-arrow {
  color: var(--c-blue);
}

.homepage .home-featured-card {
  color: #c5c9cc;
  background: #26282b;
  border: 1px solid #3f4245;
  box-shadow: 0 8px 22px #00000035;
}

.homepage .home-featured-body > svg {
  border-color: #26282b;
}

/* Deliberate break from the all-dark homepage: "Popular Services" reverts
   to the site's original light theme for contrast/breathing room partway
   down the page. Written after the dark overrides above so it wins on
   equal specificity — see the base (non-.homepage) rules this restores. */
.homepage .home-featured {
  background: #d2dbe1;
}

.homepage .home-featured-heading h2,
.homepage .home-featured-card strong {
  color: var(--c-ink);
}

.homepage .home-featured-intro,
.homepage .home-featured-desc {
  color: #4d545b;
}

.homepage .home-featured-heading .home-eyebrow,
.homepage .home-card-arrow {
  color: var(--c-orange-600);
}

.homepage .home-featured-card {
  color: #12181e;
  background: #e0e0e0;
  border: none;
  box-shadow: 0 6px 20px #161f2710;
}

.homepage .home-featured-body > svg {
  border-color: #e0e0e0;
}

/* Auto Body & Collision and Location revert to the light theme too — their
   base component styles (.bodywork-feature__title, .local-services__tile,
   .btn--outline, .location__*, .hours-table) are already light-safe, so no
   dark-specific overrides are needed for them beyond the section background. */
.homepage #body-work,
.homepage #location {
  background: var(--c-surface);
}

/* Alternate red/gold across the 6 tiles instead of one flat red repeated
   six times. */
.local-services__tiles li:nth-child(even) .local-services__tile svg {
  stroke: var(--c-star);
}
.local-services__tiles li:nth-child(even) .local-services__tile b {
  color: var(--c-star);
}

/* Why Choose Us also reverts to light — .home-why's own icon/title/text
   rules (above, in the base stylesheet) already handle light mode; only the
   item-2 gold accent needs a light-safe variant here. */
.homepage .home-why .why-item:nth-child(2) .why-item__icon {
  background: rgba(189, 140, 69, 0.18);
  color: var(--c-star);
}

.homepage #location .hours-table th {
  color: var(--c-navy);
}

/* .location__line has no color of its own anywhere in the stylesheet — it
   normally just inherits the page's default text color, but .homepage sets
   that default to a light grey for the dark bands, so it needs a light-mode
   value here now that #location itself is light. */
.homepage #location .location__line {
  color: var(--c-body);
}

@media (max-width: 767px) {
  .homepage .site-nav {
    background: var(--c-navy-900);
  }

  .homepage .nav-toggle {
    color: var(--c-white);
    border-color: #e0e0e050;
  }

  .homepage .nav-toggle__bar {
    background: var(--c-white);
  }
}

@media (min-width: 700px) {
  .home-why .why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-why .why-item + .why-item {
    border-left: 1px solid var(--c-line);
  }

  .google-review-card {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 1100px) {
  .google-review-card {
    flex-basis: calc((100% - 3 * 1.25rem) / 4);
  }
}

@media (max-width: 699px) {
  .home-why .why-item + .why-item {
    border-top: 1px solid var(--c-line);
  }

  .home-reviews__cta .home-reviews__link {
    width: 100%;
  }

  .home-reviews__arrow {
    width: 2.4rem;
    height: 2.4rem;
  }

  .home-reviews__summary {
    padding: 0.9rem 1.25rem;
  }
}

/* ---------- 17. Scroll-reveal animations (site-wide) ---------------------------
   One shared system reused across every section: give an element `.reveal`
   (plus an optional direction/scale modifier and an optional `.reveal--N`
   stagger step), and the single IntersectionObserver in script.js adds
   `.is-visible` the first time it crosses ~15-20% into the viewport.

   Gated two ways so content is never stuck hidden:
   - `.js` ancestor — with JS disabled, .no-js stays on <html> and these rules
     never match, so everything is visible immediately (same progressive-
     enhancement pattern as the rest of the site).
   - `prefers-reduced-motion: no-preference` — reduced-motion visitors get
     full content immediately too, per spec, rather than an instant snap-in
     once scrolled to (the sitewide reduced-motion kill-switch in section 15
     is a backstop, not the primary mechanism here).

   Opacity + transform only, so none of this can cause layout shift. -------- */
@media (prefers-reduced-motion: no-preference) {
  /* Every modifier below is written as `.reveal.reveal--x` (compound, both
     classes required) rather than `.reveal--x` alone. That's deliberate: once
     an element has finished revealing, script.js strips the `.reveal` class
     back off (see section 12), which instantly and completely hands the
     `transition` property back to the element's own component rules (e.g.
     `.home-featured-card`'s hover lift) instead of this system's 600ms
     opacity/transform transition permanently shadowing it via specificity. */
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(.2, .8, .2, 1), transform 600ms cubic-bezier(.2, .8, .2, 1);
  }

  .js .reveal.reveal--left {
    transform: translateX(-24px);
  }

  .js .reveal.reveal--right {
    transform: translateX(24px);
  }

  /* Cards "pop into place": a smaller lift plus a very subtle scale. */
  .js .reveal.reveal--pop {
    transform: translateY(16px) scale(0.98);
  }

  /* Final CTA: opacity + scale only, no directional movement. */
  .js .reveal.reveal--scale {
    transform: scale(0.98);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Below the width where body-work / the location section actually sit
     side-by-side, flatten the left/right slide back to a plain upward fade —
     a horizontal slide only reads as intentional once there's a "from" side
     for the eye to track; on a single stacked column it just looks like drift.
     `:not(.is-visible)` + a 0s duration keeps this specific swap instant, so
     resizing across the breakpoint before an element has revealed can't get
     caught mid-transition between translateX and translateY (which briefly
     blends both and can poke past the viewport edge). Once `.is-visible` is
     added this rule stops matching, so the actual reveal-in still animates
     at the normal 600ms via the base `.reveal` rule. */
  @media (max-width: 799px) {
    .js .reveal.reveal--left:not(.is-visible),
    .js .reveal.reveal--right:not(.is-visible) {
      transform: translateY(20px);
      transition-duration: 0s;
    }
  }

  /* Stagger steps, 80ms apart — reused for hero lines, service cards,
     body-work links, review cards, why-choose items, etc. instead of
     one-off per-section delay rules. */
  .js .reveal.reveal--1 { transition-delay: 80ms; }
  .js .reveal.reveal--2 { transition-delay: 160ms; }
  .js .reveal.reveal--3 { transition-delay: 240ms; }
  .js .reveal.reveal--4 { transition-delay: 320ms; }
  .js .reveal.reveal--5 { transition-delay: 400ms; }
  .js .reveal.reveal--6 { transition-delay: 480ms; }
  .js .reveal.reveal--7 { transition-delay: 560ms; }
  .js .reveal.reveal--8 { transition-delay: 640ms; }
}