/* North Atlanta Automotive — design system
   Plain CSS, custom properties, no framework.
   Feel: a well-run medical practice, not a performance tuning shop.
   Red is for CTAs and accents only; large red fields read as alarm. */

/* ------------------------------------------------------------------ fonts
   §6 Phase 8: fonts self-hosted, font-display: swap, two families maximum,
   subset to Latin. These 68 pages were loading Montserrat from
   fonts.googleapis.com — a CDN dependency §1 forbids outright, a third family
   on top of the Archivo/Inter pair the rebuilt pages already ship, and two
   extra DNS-and-TLS round trips in front of first paint.

   The faces below are the same two files the Phase 1 stylesheet uses, so a
   visitor moving between an old page and a rebuilt one re-uses the cache
   instead of downloading a third family. Montserrat is not replaced with a
   self-hosted Montserrat, because §4 names Archivo and Inter as the type
   system; keeping Montserrat would have preserved a font that was never in
   the spec.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --red:        #d51f22;
  --red-deep:   #ca0b10;
  --red-tint:   #fdf3f3;
  --yellow:     #f6d72d;   /* accent only — 1.4:1 on white, NEVER carries text */
  --ink:        #212121;
  --muted:      #545454;
  --line:       #e2e2e2;
  --paper:      #ffffff;
  --wash:       #f7f7f6;
  --green:      #1d6b45;

  --w:          72rem;
  --w-text:     42rem;
  --r:          6px;
  --shadow:     0 1px 2px rgba(0,0,0,.05), 0 8px 24px -18px rgba(0,0,0,.4);

  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red-deep); text-underline-offset: 2px; }
a:hover { color: var(--red); }

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

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2em; }
h3 { font-size: 1.15rem; margin-top: 1.6em; }
p  { margin: 0 0 1.1em; }

.wrap { max-width: var(--w); margin-inline: auto; padding-inline: 1.25rem; }
.text { max-width: var(--w-text); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- header */
.topbar {
  background: var(--ink); color: #fff;
  font-size: .82rem; letter-spacing: .01em;
}
.topbar .wrap { display: flex; gap: 1.25rem; justify-content: space-between; align-items: center; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar .open { color: #9fe3bd; }

.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 82px; }
.masthead .logo img { width: 232px; max-width: 46vw; }

nav.primary { margin-left: auto; }
nav.primary ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; align-items: center; }
nav.primary a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"] { border-bottom-color: var(--red); color: var(--ink); }

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--r);
  font-weight: 700; font-size: .97rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; font-family: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-lg { padding: 1rem 1.75rem; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* ---------------------------------------------------------------------- hero */
.hero { background: var(--wash); border-bottom: 1px solid var(--line); padding: 3.5rem 0; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { margin-bottom: .6rem; }
.hero .lede { font-size: 1.18rem; color: var(--muted); max-width: 34rem; }
.hero figure { margin: 0; }
.hero figure img { border-radius: var(--r); box-shadow: var(--shadow); }
.hero figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; }

/* --------------------------------------------------------------- page header */
.pagehead { border-bottom: 1px solid var(--line); padding: 2.5rem 0 2rem; }
.pagehead h1 { margin-bottom: .4rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.crumbs a { color: var(--muted); }
.crumbs span { padding: 0 .4rem; }

/* -------------------------------------------------------- the answer block */
.answer {
  background: var(--wash);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.4rem 1.6rem;
  margin: 1.75rem 0;
  font-size: 1.1rem;
  max-width: var(--w-text);
}
.answer p:last-child { margin-bottom: 0; }
.answer .label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}

.safe {
  border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.1rem 1.4rem; margin: 1.75rem 0; max-width: var(--w-text);
  background: #fffdf2;
}
.safe strong { display: block; margin-bottom: .3rem; }
.safe p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- grids */
.grid { display: grid; gap: 1.25rem; margin: 2rem 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.4rem; background: var(--paper);
  display: flex; flex-direction: column;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.card p { color: var(--muted); font-size: .94rem; margin-bottom: .9rem; }
.card .more { margin-top: auto; font-weight: 700; font-size: .9rem; text-decoration: none; }
.card .more::after { content: " →"; }
a.card { text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.card:hover { border-color: var(--ink); color: inherit; }

.proof { border-top: 3px solid var(--red); }

/* --------------------------------------------------------------- sections */
.band { padding: 3.25rem 0; border-top: 1px solid var(--line); }
.band-wash { background: var(--wash); }
.band h2 { margin-top: 0; }
.band > .wrap > p.intro { color: var(--muted); max-width: var(--w-text); font-size: 1.05rem; }

/* ------------------------------------------------------------------ pricing */
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
th { text-align: left; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: .7rem .9rem; border-bottom: 2px solid var(--line); }
td { padding: .85rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.price { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------------- FAQ */
.faq { max-width: var(--w-text); margin: 2rem 0; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer; padding: 1rem 0; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.35rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 1rem; margin: 0; color: var(--muted); }

/* ------------------------------------------------------------------ reviews */
.review { border-left: 3px solid var(--line); padding-left: 1.1rem; margin-bottom: 1.6rem; }
.review p { font-size: 1.02rem; margin-bottom: .4rem; }
.review cite { font-style: normal; font-weight: 700; font-size: .9rem; }
.rating { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.rating .n { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.rating .stars { color: var(--red); letter-spacing: .1em; }

/* --------------------------------------------------------------------- forms */
form.gas { max-width: 34rem; }
form.gas label { display: block; font-weight: 700; font-size: .9rem; margin: 1.1rem 0 .35rem; }
form.gas input, form.gas textarea, form.gas select {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink);
}
form.gas input:focus, form.gas textarea:focus { border-color: var(--ink); }
form.gas .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: .9rem; font-weight: 600; font-size: .95rem; min-height: 1.4em; }
.form-status.ok { color: var(--green); }
.form-status.error { color: var(--red-deep); }

/* ------------------------------------------------------- unconfirmed marker */
.tbc {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #fff4c2, #fff4c2 6px, #ffe98a 6px, #ffe98a 12px);
  border: 1px dashed #b8860b; color: #6b4e00;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  padding: .12em .5em; border-radius: 3px; white-space: nowrap;
}

/* -------------------------------------------------------------------- brands */
.brands { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.brands img { width: 62px; height: 62px; border: 1px solid var(--line); border-radius: var(--r); }

/* ------------------------------------------------------------------- footer */
footer.site { background: var(--ink); color: #cfcfcf; padding: 3rem 0 1.5rem; margin-top: 3rem; font-size: .93rem; }
footer.site h2 { color: #fff; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; margin: 0 0 .9rem; }
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { text-decoration: underline; color: #fff; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: .45rem; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
footer.site .sitefoot__credit { margin-left: auto; font-size: .78rem; opacity: .7; }
footer.site .sitefoot__credit a { color: inherit; }
footer.site .legal {
  border-top: 1px solid #3a3a3a; margin-top: 2.25rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: #9a9a9a;
}

/* ----------------------------------------------------------- sticky call bar */
.callbar { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  nav.primary { display: none; }
  .masthead .wrap { min-height: 68px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  /* the full address costs two lines on a phone; the footer and /contact/
     carry it, and the phone number is what matters here */
  .topbar .wrap > span:first-child { display: none; }
  .topbar .wrap { justify-content: center; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr; }
  .hero { padding: 2.25rem 0; }
  .band { padding: 2.25rem 0; }

  /* sticky call bar — most of this traffic is someone standing next to a car */
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    border-top: 1px solid var(--line); background: var(--paper);
  }
  .callbar a {
    padding: .95rem .5rem; text-align: center; font-weight: 700; font-size: .95rem;
    text-decoration: none; color: var(--ink);
  }
  .callbar a.book { background: var(--red); color: #fff; }
  body { padding-bottom: 3.4rem; }
}

/* ================================================================
   LUXURY LAYER
   Added for the brand/vehicle pages. The rule here is restraint:
   more whitespace, sharper typographic hierarchy, hairline rules,
   one dark band per page. No new colours, no gradients, no gloss.
   Everything above this line still behaves exactly as it did.
   ================================================================ */

/* ------------------------------------------------------------ eyebrow/kicker */
.eyebrow {
  display: block;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 .85rem;
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; background: var(--red);
  margin-right: .7rem; position: relative; top: -1px;
}
.band .eyebrow, .section .eyebrow { margin-bottom: .7rem; }

/* --------------------------------------------------------------- brand hero */
.hero-brand {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  padding: 3.25rem 0 3.5rem;
}
.hero-brand .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }
.hero-brand h1 { margin-bottom: .55rem; }
.hero-brand .lede { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 36rem; }
.hero-brand .crumbs { margin-bottom: 1rem; }

/* the marque plate — logo on paper, hairline framed, generous air */
.marque {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 2.75rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
}
.marque img { width: 120px; height: auto; }
.marque .marque-note {
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0;
}

/* --------------------------------------------------------- credential strip */
.credentials {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  margin: 0;
}
.credentials > div {
  padding: 1.4rem 1.5rem;
  border-right: 1px solid var(--line);
}
.credentials > div:last-child { border-right: 0; }
.credentials dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .45rem;
}
.credentials dd {
  margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35;
}
.credentials dd .sub { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: .3rem; }

/* -------------------------------------------------- hairline "patterns" list */
.ledger { margin: 2rem 0; border-top: 1px solid var(--line); }
.ledger > div {
  display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line);
}
.ledger h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.ledger p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------------- prose column */
.prose { max-width: var(--w-text); }
.prose h2 { margin-top: 2.25em; }
.prose p { color: var(--ink); }

/* a lede should never run the full 72rem measure — it stops being readable */
.pagehead .lede { font-size: 1.15rem; color: var(--muted); max-width: 46rem; }

/* ---------------------------------------------------- editorial two-column */
.editorial { display: grid; grid-template-columns: 1fr 20rem; gap: 3.5rem; align-items: start; }
.editorial .prose { max-width: none; }
.editorial-aside { position: sticky; top: 2rem; }
.editorial-aside figure { margin: 0 0 1.5rem; }
.editorial-aside figure img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
.editorial-aside figcaption { font-size: .84rem; color: var(--muted); margin-top: .6rem; line-height: 1.5; }
.editorial-aside .answer { margin: 0; font-size: .97rem; max-width: none; }

/* two-column editorial split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin: 2rem 0; }
.split > img { border-radius: var(--r); box-shadow: var(--shadow); }
.split h2:first-child, .split h3:first-child { margin-top: 0; }

/* ------------------------------------------------------------- marque grid */
.marque-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem;
  margin: 1.75rem 0; padding: 0; list-style: none;
}
.marque-grid a {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.1rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  font-size: .84rem; font-weight: 600; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.marque-grid a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.marque-grid img { width: 46px; height: 46px; object-fit: contain; }

/* ------------------------------------------------------------- dark CTA band */
.band-ink {
  background: var(--ink); color: #fff;
  padding: 3.5rem 0; border-top: 0;
}
.band-ink h2 { color: #fff; margin-top: 0; }
.band-ink p { color: #cfcfcf; max-width: var(--w-text); font-size: 1.05rem; }
.band-ink .eyebrow { color: #9a9a9a; }
.band-ink .btn-ghost { color: #fff; border-color: #565656; }
.band-ink .btn-ghost:hover { border-color: #fff; color: #fff; }
.band-ink a { color: #fff; }

/* --------------------------------------------------------------- area cards */
.area-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.75rem 0; }
.area-links a {
  display: block; padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.area-links a:hover { border-color: var(--ink); }
.area-links strong { display: block; font-size: 1rem; }
.area-links span { font-size: .86rem; color: var(--muted); }

/* card polish — a touch more air and a quieter lift */
.card { padding: 1.45rem 1.5rem; }
a.card:hover { box-shadow: var(--shadow); }

/* ================================================================
   COMPATIBILITY ALIASES
   Several pages (locations, resources, reviews, specials, appointment,
   blog, privacy, terms) were generated against an older class naming
   scheme and would otherwise render unstyled. These aliases map that
   scheme onto the design system above. Prefer the canonical names in
   new pages: .wrap, .band, .grid, .btn-primary.
   ================================================================ */
.nav-shell {
  max-width: var(--w); margin-inline: auto; padding-inline: 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; min-height: 82px;
  flex-wrap: wrap;
}
.masthead .brand img { width: 232px; max-width: 46vw; }
.nav-shell nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.nav-shell nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav-shell nav a:hover { border-bottom-color: var(--red); }

.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-deep); color: #fff; }

.section { padding: 3.25rem 0; }
.section + .section { border-top: 1px solid var(--line); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
.card-grid .card h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.card-grid .card span { margin-top: auto; font-weight: 700; font-size: .9rem; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-grid img { width: 200px; }

@media (max-width: 900px) {
  .hero-brand .wrap { grid-template-columns: 1fr; gap: 2.25rem; }
  .credentials { grid-template-columns: 1fr 1fr; }
  .credentials > div:nth-child(2) { border-right: 0; }
  .credentials > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ledger > div { grid-template-columns: 1fr; gap: .5rem; }
  .editorial { grid-template-columns: 1fr; gap: 2.5rem; }
  .editorial-aside { position: static; max-width: var(--w-text); }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .marque-grid { grid-template-columns: repeat(4, 1fr); }
  .area-links { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-shell nav { display: none; }
}

@media (max-width: 560px) {
  .credentials { grid-template-columns: 1fr; }
  .credentials > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .credentials > div:last-child { border-bottom: 0; }
  .marque-grid { grid-template-columns: repeat(3, 1fr); }
  .area-links { grid-template-columns: 1fr; }
  .card-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-brand { padding: 2.25rem 0 2.5rem; }
  .band-ink { padding: 2.5rem 0; }
  .marque { padding: 2rem 1.25rem; }
  .section { padding: 2.25rem 0; }
}

/* ================================================================
   MOBILE NAVIGATION
   A dark, editorial drawer shared by every page. The control is added by
   forms.js so legacy and newer header markup receive the same experience.
   ================================================================ */
.mobile-menu-toggle,
.mobile-menu-veil { display: none; }

@media (max-width: 900px) {
  html.menu-open { overflow: hidden; }

  .masthead {
    position: relative;
    z-index: 100;
  }

  .masthead .wrap,
  .masthead .nav-shell {
    position: relative;
    flex-wrap: nowrap;
  }

  .mobile-menu-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .72rem;
    min-width: 7.2rem;
    min-height: 2.9rem;
    margin-left: auto;
    padding: .7rem 1rem;
    border: 1px solid #26282b;
    border-radius: 999px;
    background: #111315;
    color: #fff;
    box-shadow: 0 10px 28px rgba(17, 19, 21, .14);
    cursor: pointer;
    font: 700 .72rem/1 var(--font, inherit);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
    z-index: 104;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-1px);
    outline: none;
  }

  .menu-mark {
    display: grid;
    gap: 4px;
    width: 19px;
  }

  .menu-mark i {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform .28s ease, opacity .2s ease, width .25s ease;
  }

  .menu-mark i:nth-child(2) { width: 70%; justify-self: end; }
  .menu-is-open .menu-mark i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-is-open .menu-mark i:nth-child(2) { opacity: 0; width: 0; }
  .menu-is-open .menu-mark i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .mobile-menu-veil {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(8, 9, 10, .62);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .35s ease;
    z-index: 101;
  }

  .menu-is-open .mobile-menu-veil {
    opacity: 1;
    pointer-events: auto;
  }

  .masthead nav.mobile-nav-panel,
  .masthead .nav-shell nav.mobile-nav-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(88vw, 25rem);
    height: 100dvh;
    margin: 0;
    padding: 7.4rem 2rem 2rem;
    overflow-y: auto;
    background:
      radial-gradient(circle at 108% -5%, rgba(179, 32, 37, .45), transparent 34%),
      linear-gradient(145deg, #17191c 0%, #090a0c 78%);
    border-left: 1px solid rgba(255, 255, 255, .13);
    box-shadow: -30px 0 80px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    transform: translateX(102%);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .4s;
    z-index: 102;
  }

  .menu-is-open nav.mobile-nav-panel,
  .menu-is-open .nav-shell nav.mobile-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .masthead nav.mobile-nav-panel::before {
    content: "North Atlanta Automotive";
    display: block;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .52);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .masthead nav.mobile-nav-panel ul {
    display: block;
    margin: 0;
    padding: 0;
  }

  .masthead nav.mobile-nav-panel li { display: block; }

  .masthead nav.mobile-nav-panel a,
  .masthead .nav-shell nav.mobile-nav-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.35rem;
    padding: .7rem 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    border-radius: 0;
    background: transparent;
    color: #f7f4ef;
    font-size: clamp(1.06rem, 4.6vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -.015em;
    text-decoration: none;
    transition: color .2s ease, padding .2s ease;
  }

  .masthead nav.mobile-nav-panel a::after {
    content: "↗";
    color: var(--red);
    font-size: .9rem;
    opacity: .8;
  }

  .masthead nav.mobile-nav-panel a:hover,
  .masthead nav.mobile-nav-panel a:focus-visible,
  .masthead nav.mobile-nav-panel a[aria-current="page"] {
    padding-left: .45rem;
    color: #fff;
    outline: none;
  }

  .masthead nav.mobile-nav-panel .btn,
  .masthead nav.mobile-nav-panel .btn-primary {
    justify-content: center;
    margin-top: 1.35rem;
    min-height: 3.45rem;
    padding: .9rem 1.2rem;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .masthead nav.mobile-nav-panel .btn::after,
  .masthead nav.mobile-nav-panel .btn-primary::after { color: #fff; }

  .nav-shell > .btn.primary {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle,
  .menu-mark i,
  .mobile-menu-veil,
  .masthead nav.mobile-nav-panel { transition: none; }
}

/* ================================================================
   SERVICES HUB — ART DIRECTION LAYER
   Three photographs on /services/ and nowhere else. Prefixed .svcimg-
   so nothing here can reach an existing selector.

   Two crop families only: 3:2 for anything contained, and one
   viewport-width band on a clamped height. One treatment filter across
   all three or none. One reveal. No shadow on a photograph — the
   hairline and the shared 6px radius carry the frame instead, which
   is a deliberate departure from .split > img on the vehicle pages.
   ================================================================ */

/* the shared treatment — a light desaturation and a touch of contrast.
   The two documentary frames run warm and the macro runs cool; this
   closes the gap without announcing itself as a filter. All or none. */
.svcimg-shot {
  filter: saturate(.88) contrast(1.04);
  background-color: var(--wash);
}

/* ---------------------------------------------- 1. editorial offset */
.svcimg-head { overflow-x: clip; }
/* the spacer rows top and bottom take the slack, so the copy stays a
   tight block and centres against the image instead of being pulled
   apart by it */
.svcimg-head > .wrap {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 3.5rem;
}
.svcimg-head > .wrap > .crumbs { grid-column: 1; grid-row: 2; }
.svcimg-head > .wrap > h1      { grid-column: 1; grid-row: 3; }
.svcimg-head > .wrap > p       { grid-column: 1; grid-row: 4; margin-bottom: 0; }

.svcimg-offset {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  /* break the container and bleed to the right viewport edge */
  margin-right: calc((min(72rem, 100vw) - 100vw) / 2 - 1.25rem);
}
.svcimg-offset img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 62% 40%;
  border-radius: var(--r) 0 0 var(--r);
}

/* ------------------------------------------ 2. full-bleed quiet band */
.svcimg-band {
  position: relative;
  height: clamp(280px, 40vh, 460px);
  margin-top: 3.5rem;
  overflow: hidden;
  background: var(--ink);
}
.svcimg-band img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* high enough to keep the LUBE & OIL / TUNE-UP / BRAKES fascia in
     frame — it is the strongest graphic element in the photograph */
  object-position: 50% 20%;
}
/* the darkest brand hex, unifying colour and quieting the shop clutter */
.svcimg-band::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  opacity: .48;
  pointer-events: none;
}
/* the band is the rule — the section below it does not need a second one */
.svcimg-band + .band { border-top: 0; }

/* --------------------------------------- 3. anchored detail frame */
.svcimg-bandhead {
  display: grid;
  grid-template-columns: 1fr 15rem;
  column-gap: 3.5rem;
  align-items: center;
}
.svcimg-bandhead > h2 { grid-column: 1; grid-row: 1; }
.svcimg-bandhead > p  { grid-column: 1; grid-row: 2; margin-bottom: 0; }
/* wrapping the heading and intro in .svcimg-bandhead breaks the
   .band > .wrap > p.intro child chain — restate it verbatim so the
   paragraph keeps the exact colour, measure and size it had before */
.svcimg-bandhead > p.intro {
  color: var(--muted);
  max-width: var(--w-text);
  font-size: 1.05rem;
}
.svcimg-detail {
  grid-column: 2; grid-row: 1 / 3;
  margin: 0;
}
.svcimg-detail img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* -------------------------------------------------------- reveal
   One behaviour for all three: a fade up as the image enters view.
   Declared only when motion is welcome, so reduce removes it outright
   rather than shortening it. Scroll-linked, so it needs no JavaScript;
   where view() is unsupported the image is simply visible from the
   start, which is a perfectly good outcome. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .svcimg-reveal {
      /* longhands only — the animation shorthand would reset
         animation-duration to 0s, which stalls a progress timeline */
      animation-name: svcimg-fade-up;
      animation-fill-mode: both;
      animation-timing-function: ease-out;
      animation-timeline: view();
      animation-range: entry 5% entry 75%;
    }
  }
}
@keyframes svcimg-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- mobile
   Offsets stack. The detail frame stays small — it must never become
   a full-width photograph. The band shortens rather than letterboxing. */
@media (max-width: 900px) {
  .svcimg-head > .wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 1.75rem;
  }
  .svcimg-head > .wrap > .crumbs { grid-row: 1; }
  .svcimg-head > .wrap > h1      { grid-row: 2; margin-bottom: 0; }
  .svcimg-head > .wrap > p       { grid-row: 3; }
  /* the H1 stays first on a phone; the photograph follows the copy
     rather than burying the page's own title under it */
  .svcimg-offset {
    grid-column: 1; grid-row: 4;
    margin-inline: -1.25rem;
  }
  .svcimg-offset img { border-radius: 0; }

  .svcimg-bandhead { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .svcimg-bandhead > h2 { grid-row: 1; }
  .svcimg-bandhead > p  { grid-row: 2; }
  .svcimg-detail { grid-column: 1; grid-row: 3; max-width: 15rem; }
}

@media (max-width: 560px) {
  .svcimg-band { margin-top: 2.5rem; }
  .svcimg-detail { max-width: 12rem; }
}

/* --------------------------------------------------------------------- print */
@media print {
  .topbar, nav.primary, .callbar, .btn-row, footer.site,
  .mobile-menu-toggle, .mobile-menu-veil { display: none; }
  body { font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}