/* ==========================================================================
   Quality Muffler & Brakes — "Precision" (Concept 2)
   Deployable stylesheet. This is the canonical source for the chosen design;
   homepage-designs/concept-02-precision/ remains the archived mockup.
   Adds to the mockup: responsive breakpoints, a mobile call bar, and focus
   states — everything a live page needs that a flat mockup does not.
   ========================================================================== */

:root {
  /* Taken from the shop's own logo file, which is the authoritative source.
     These replaced colours sampled off a photograph of the sign, and they
     measure better on every pairing the site uses. */
  --brand:        #004AAD;   /* logo blue, primary accent */
  --brand-dark:   #003B8A;   /* pressed / darker blue */
  --brand-yellow: #FFDE59;   /* logo yellow, secondary accent */
  --hero-navy:    #091A42;   /* deep blue wash over the hero photograph */
  --ink:          #1A1D1F;
  --body:         #55605F;
  --muted:        #6E7877;
  --line:         #E4E0DB;
  --paper:        #FBFAF9;
  --white:        #FFFFFF;
  --steel-300:    #B4BCC1;
  --steel-500:    #6B767D;
  --status-red:   #E24A52;   /* closed light, a status colour rather than a brand one */

  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* Everything stacked above the hero. The hero fills the rest of the first
     screen, so the next section always starts below the fold. The script in
     layout.mjs overwrites these with the measured heights. */
  --header-h: 97px;
  --topbar-h: 41px;
  --chrome-h: calc(var(--header-h) + var(--topbar-h));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.section { padding: 110px 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--steel-500); }
.eyebrow i { font-style: normal; color: var(--brand); }
.h2 { font-size: 52px; line-height: 1.06; letter-spacing: -1.8px; font-weight: 700; }
.lede { font-size: 18px; line-height: 1.7; color: var(--body); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; border-radius: 2px;
  font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; border: 0;
}
.btn-brand { background: var(--brand); color: #fff; }
.btn-line { border: 1px solid #C9C3BB; color: var(--ink); background: transparent; }

/* --- Photo placeholders — replace each with a real <img> ------------------ */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 12px, rgba(0,0,0,.02) 12px 24px),
    #EDF0F1;
  color: var(--steel-500);
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  line-height: 1.6; padding: 14px 20px; max-width: 82%;
}
.ph.dark { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.02) 12px 24px), #2A3135; color: rgba(255,255,255,.55); }

/* --- Top bar --------------------------------------------------------------
   Open / closed and the phone number, above the masthead. Its height feeds the
   fold arithmetic through --topbar-h, so keep it to one line at every width. */
.topbar { background: #0B0D0E; color: #fff; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 41px; }
.topbar-promise { margin: 0; font-size: 13px; letter-spacing: .2px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-promise .promise-short { display: none; }
/* The promise is the first thing to give way: shortened where the long line
   would be cut, dropped entirely where even the short one crowds the hours. */
@media (max-width: 800px) {
  .topbar-promise .promise-long { display: none; }
  .topbar-promise .promise-short { display: inline; }
}
@media (max-width: 620px) {
  .topbar-promise { display: none; }
}
.shop-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; letter-spacing: .2px; color: rgba(255,255,255,.9); white-space: nowrap; }
/* Yellow for open, red for closed, as asked. The ring keeps the dot legible
   for anyone who cannot separate the two colours. */
.shop-status .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--steel-300); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.shop-status.is-open .dot { background: var(--brand-yellow); box-shadow: 0 0 0 3px rgba(255,194,14,.22); }
.shop-status.is-closed .dot { background: var(--status-red); box-shadow: 0 0 0 3px rgba(224,49,59,.22); }

/* --- Header -------------------------------------------------------------- */
.header { background: var(--hero-navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); position: sticky; top: 0; z-index: 50; }
/* On the homepage the hero is pulled up under the masthead and the masthead
   goes transparent, so the photograph and its wash run behind both and the
   top of the page is one image rather than a navy bar sitting on a picture.
   The moment the page scrolls, the hero is no longer under it and the solid
   ground comes back. The hero's own overlay carries a scrim across the top so
   the nav stays readable over the bright end of the sky. */
/* The transparency is gated on a class the script adds, so with the script off
   the masthead keeps its solid ground rather than going see-through over the
   white sections once the page scrolls. */
.js-hero-chrome .header { background: transparent; transition: background-color .2s ease; }
.js-hero-chrome.header-solid .header { background: var(--hero-navy); }
.has-hero .hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
}
.header .nav a:hover { color: var(--brand-yellow); }
.header .btn-brand { background: var(--brand-yellow); color: var(--hero-navy); }
.header .btn-brand:hover { background: #FFE785; }
.menu-btn { color: #fff; border-color: rgba(255,255,255,.45); }
.menu-btn[aria-expanded="true"] { background: #fff; border-color: #fff; color: var(--hero-navy); }
/* auto/1fr/auto + a gap: the nav takes the slack in the middle and can never
   run into the phone number, whatever the nav labels are changed to */
.header .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; height: 96px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* Used when LOGO is set in layout.mjs. Height-constrained so a wide or narrow
   mark both sit on the same baseline as everything else in the row. */
.brand-logo { height: 44px; width: auto; }
.footer .brand-logo { height: 48px; }
/* The supplied mark has no baseline padding of its own, so the phone number
   under it in the footer needs the gap the old two-line lockup provided. */
.footer .brand { margin-bottom: 10px; }
.brand .mark {
  width: 40px; height: 40px; flex: none; border: 2px solid var(--brand); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
}
.brand b { display: block; font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.brand span { display: block; font-size: 10px; letter-spacing: 2px; color: var(--steel-500); text-transform: uppercase; margin-top: 2px; }
.nav { display: flex; gap: 26px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; white-space: nowrap; justify-self: center; }
.nav a.active { color: var(--brand-yellow); }
.header .right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.header .tel { font-size: 18px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.header .tel small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: var(--steel-500); text-transform: uppercase; }
.menu-btn { display: none; background: none; border: 1px solid #C9C3BB; padding: 11px 14px; border-radius: 2px; }
.menu-btn svg { width: 20px; height: 20px; display: block; }

/* --- Hero -----------------------------------------------------------------
   One photograph across the whole banner, under a wash that is heavy on the
   left where the copy sits and almost gone on the right. It used to be a flat
   navy block beside a picture, with the seam hidden by a steep ramp; now the
   picture runs edge to edge and the wash is what changes, so there is no seam
   to hide and the shop is faintly present even behind the headline.
   The hero fills whatever is left of the first screen, so the section below
   it always starts under the fold — no strip of white on load. */
.hero {
  position: relative; overflow: hidden; color: #fff; background: var(--hero-navy);
  min-height: calc(100vh - var(--chrome-h));    /* fallback */
  min-height: calc(100svh - var(--chrome-h));   /* ignores the mobile URL bar */
  display: flex; flex-direction: column;
}

.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Fourteen stops across the full width, so no two adjacent stops differ by
       more than about 8% and the fall reads as one wash rather than bands.
       Heaviest under the copy, which ends around 51%, and thinnest over the
       shop front on the right. The tightest measurement on the page is the
       lede between 900 and 1050px, where the copy column is widest relative
       to the ramp: 4.8:1 against a 4.5 requirement. Lighten the middle stops
       any further and that is what fails first. */
    linear-gradient(90deg,
      rgba(9,26,66,.87) 0%,
      rgba(9,26,66,.86) 10%,
      rgba(9,26,66,.84) 20%,
      rgba(9,26,66,.81) 30%,
      rgba(9,26,66,.77) 38%,
      rgba(9,26,66,.72) 46%,
      rgba(9,26,66,.655) 54%,
      rgba(9,26,66,.575) 62%,
      rgba(9,26,66,.48) 70%,
      rgba(9,26,66,.38) 78%,
      rgba(9,26,66,.29) 85%,
      rgba(9,26,66,.22) 91%,
      rgba(9,26,66,.17) 96%,
      rgba(9,26,66,.13) 100%),
    linear-gradient(180deg, rgba(9,26,66,.04) 0%, rgba(9,26,66,.24) 100%);
}

.hero .hero-inner {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;   /* padding becomes the minimum gap */
  padding-top: 44px; padding-bottom: 60px;
}
.hero-copy { max-width: 560px; }   /* ends ~51%, just inside the panel edge */
.hero .eyebrow { font-size: 12px; color: rgba(255,255,255,.74); }
.hero .eyebrow i { color: var(--brand-yellow); }
.hero h1 { font-size: 56px; line-height: 1.06; letter-spacing: -1.9px; font-weight: 700; margin-top: 20px; color: #fff; }
.hero h1 .thin { font-weight: 300; color: rgba(255,255,255,.74); }
.hero .lede { margin-top: 24px; font-size: 19px; line-height: 1.65; color: rgba(255,255,255,.85); }
.hero .actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .actions .btn { padding: 21px 34px; font-size: 15px; }
.hero .btn-line { border-color: rgba(255,255,255,.5); color: #fff; }

.hero-rating { margin-top: 26px; display: flex; align-items: center; gap: 11px; font-size: 15px; color: rgba(255,255,255,.72); }
.hero-rating .stars { color: var(--brand-yellow); font-size: 16px; letter-spacing: 2px; }
.hero-rating b { color: #fff; }

/* The trust line closes the hero, still over the photograph. */
.strip { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.18); }
.strip .wrap {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.88);   /* spans the lighter left half — needs the extra lift */
}

/* Short desktop viewports (1366x768 and similar): compress the hero rather
   than let the trust line fall below the fold. */
@media (min-width: 901px) and (max-height: 780px) {
  .hero .hero-inner { padding-top: 32px; padding-bottom: 40px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.2px; margin-top: 14px; }
  .hero .lede { margin-top: 16px; font-size: 16px; }
  .hero .actions { margin-top: 22px; }
  .hero .actions .btn { padding: 14px 26px; }
  .hero-rating { margin-top: 16px; }
  .strip .wrap { padding-top: 14px; padding-bottom: 14px; }
}

/* --- Promise --------------------------------------------------------------
   Reversed onto the hero's navy. Rules and body copy carry white at reduced
   opacity; the accent line switches from the brand blue to the signage yellow,
   which is the only one of the two that holds up on this ground. */
.pricing { background: var(--hero-navy); color: #fff; }
.pricing .eyebrow { color: rgba(255,255,255,.70); }
.pricing .h2 { color: #fff; }
.pricing .lede { color: rgba(255,255,255,.82); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; border: 1px solid rgba(255,255,255,.20); }
.price { padding: 34px 32px; border-right: 1px solid rgba(255,255,255,.20); }
.price:last-child { border-right: 0; }
.price h4 { font-size: 19px; letter-spacing: -.4px; color: #fff; }
/* Replaces the price figure: a promise carries the same visual weight in the
   layout without publishing a number the shop can't hold to per-vehicle. */
.price .promise {
  font-size: 27px; font-weight: 700; letter-spacing: -1px;
  color: var(--brand-yellow); margin: 14px 0 2px;
}
.price ul { margin-top: 18px; display: grid; gap: 9px; }
.price li { font-size: 14px; color: rgba(255,255,255,.80); padding-left: 20px; position: relative; line-height: 1.5; }
.price li::before { content: "—"; position: absolute; left: 0; color: var(--brand-yellow); }
.price .note { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12.5px; color: rgba(255,255,255,.64); line-height: 1.5; }

/* --- Process ------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 60px; }
.step .n { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--brand); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }
.step h4 { font-size: 22px; letter-spacing: -.6px; margin-top: 22px; }
.step p { font-size: 15.5px; line-height: 1.7; color: var(--body); margin-top: 12px; }

/* --- Quote --------------------------------------------------------------- */
/* --- Trust block ---------------------------------------------------------
   Cards on the navy, so the section separates from the service grid above it
   without repeating the same white card twice. */
.trust { background: var(--hero-navy); color: #fff; }
.trust .eyebrow { color: var(--steel-300); }
.trust .lede { color: rgba(255,255,255,.78); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.trust-card { padding: 30px 28px 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--brand-yellow); }
.trust-card h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.4px; color: #fff; }
.trust-card p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.76); }

/* --- Reviews --------------------------------------------------------------
   Cards keep their natural height rather than stretching to the tallest in the
   row, because these are other people's words and they are not the same length. */
.reviews { background: var(--white); border-top: 1px solid var(--line); }
.reviews-head { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-end; justify-content: space-between; }
.reviews-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
/* Every card the same height. The quotes are six very different lengths, so
   the text is clamped to a fixed number of lines and the long ones get a
   Read more. The clamp is applied by script, so with JavaScript off the full
   text is simply there, uneven but never truncated with no way to open it. */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.review {
  display: flex; flex-direction: column; margin: 0; padding: 28px 28px 24px;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand-yellow);
}
.js-clamp .review blockquote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;
}
.js-clamp .review.is-open blockquote { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  align-self: flex-start; margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--brand); text-decoration: underline; text-underline-offset: 4px;
}
.review-more:hover { color: var(--brand-dark); }
.review-stars { color: var(--brand-yellow); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.review blockquote { margin: 0; font-size: 15px; line-height: 1.68; color: var(--body); }
/* margin-top:auto, not a fixed gap: the quotes are different lengths, and a
   short one like Kyle's would otherwise sit its name and link halfway up the
   card while the others sit at the bottom. The padding keeps a floor under the
   rule when the quote does fill the card. */
.review figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--line); }
.review blockquote + figcaption { margin-top: 20px; }
.review figcaption b { font-size: 15.5px; letter-spacing: -.2px; color: var(--ink); }
.review figcaption a { font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.review figcaption a:hover { color: var(--brand-dark); }

/* --- Featured article -----------------------------------------------------
   Keeps the shape of the reversed band it replaced: image left, copy right,
   on the dark ground. Two actions, into the article and on to the index. */
/* Navy, not the near-black it started as: the black band was dropped from the
   homepage and leaving one behind on the blog index read as a different site. */
.feature-post { background: var(--hero-navy); color: #fff; }
/* Light variant for the blog index, where the band sits between the navy page
   head and the white grid and a third dark block made the page top-heavy. */
.feature-post.on-light { background: var(--white); color: var(--ink); }
.feature-post.on-light .eyebrow { color: var(--steel-500); }
.feature-post.on-light .feature-title a { color: var(--ink); }
.feature-post.on-light .feature-title a:hover { color: var(--brand); }
.feature-post.on-light .feature-lede { color: var(--body); }
.feature-post.on-light .feature-meta { color: var(--muted); }
.feature-post.on-light .btn-line-light { border-color: #C9C3BB; color: var(--ink); }
/* The picture matches the height of the copy beside it rather than sitting in
   its own fixed ratio, so the two columns square off. Stacked, below, it goes
   back to a ratio, since there is nothing left to match. */
.feature-post .wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 60px; align-items: stretch; }
.feature-art { display: block; background: var(--hero-navy); overflow: hidden; height: 100%; min-height: 260px; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.feature-post .eyebrow { color: var(--steel-300); }
.feature-post .eyebrow i { color: var(--brand-yellow); font-style: normal; }
.feature-title { margin-top: 18px; font-size: 40px; line-height: 1.14; letter-spacing: -1.3px; font-weight: 700; }
.feature-title a { color: #fff; }
.feature-title a:hover { color: var(--brand-yellow); }
.feature-lede { margin-top: 20px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.76); max-width: 620px; }
.promo-points { margin-top: 22px; display: grid; gap: 10px; max-width: 620px; }
.promo-points li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.76); }
.promo-points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: var(--brand-yellow); }
.promo-more { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); max-width: 620px; }
.promo-more span { font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--brand-yellow); }
.promo-more ul { margin-top: 12px; display: grid; gap: 8px; }
.promo-more a { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.8); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; }
.promo-more a:hover { color: #fff; text-decoration-color: #fff; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.feature-meta { margin-top: 22px; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--steel-300); }
.feature-post:hover .feature-art img { transform: scale(1.03); }

/* --- Photo placeholders -------------------------------------------------
   Every one of these is waiting on a specific file. It names the file rather
   than saying "image here", so the brief and the slot are the same thing.
   See build/photos.mjs. */
.photo-slot {
  margin: 0; aspect-ratio: var(--r, 16 / 9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 30px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(0,74,173,.05) 0 14px, rgba(0,74,173,.02) 14px 28px),
    var(--paper);
  border: 1px dashed #C3CBD6;
}
.photo-slot .ps-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--brand); }
.photo-slot b { font-size: 15px; letter-spacing: -.2px; color: var(--ink); word-break: break-all; }
.photo-slot .ps-brief { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.photo { width: 100%; height: auto; }
.photo.in-article, .photo-slot.in-article { margin: 44px 0 8px; }
/* Full-bleed inside the wrap, for the About page and the homepage. */
.photo.wide, .photo-slot.wide { margin-top: 44px; }
.split > .photo, .split > .photo-slot { align-self: start; }

/* --- Article furniture --------------------------------------------------- */
.takeaway { margin: 36px 0 8px; padding: 26px 30px 28px; background: var(--hero-navy); color: #fff; border-left: 4px solid var(--brand-yellow); }
.takeaway h2 { font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--brand-yellow); }
.takeaway p { margin-top: 14px; font-size: 18.5px; line-height: 1.7; color: rgba(255,255,255,.9); }

.prose .callout { margin: 38px 0; padding: 24px 28px 26px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.prose .callout h4 { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); }
.prose .callout p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--body); }

/* --- Blog categories ----------------------------------------------------- */
.cat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.cat {
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
  padding: 11px 18px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cat span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.cat:hover { border-color: var(--brand); color: var(--brand); }
.cat.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat.is-on span { color: rgba(255,255,255,.7); }
.cat-blurb { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 640px; }

/* --- Blog index ----------------------------------------------------------- */
.head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.post-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--white);
  border-top: 3px solid var(--brand);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card-art { display: block; background: var(--hero-navy); overflow: hidden; }
.post-card-art img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 26px; }
.post-meta { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--brand); }
.post-card h3 { margin-top: 12px; font-size: 21px; line-height: 1.24; letter-spacing: -.5px; }
.post-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 10px; }
.post-card .go { display: block; margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); }
.post-card:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(9, 26, 66, .10); transform: translateY(-2px); }

/* --- Article -------------------------------------------------------------- */
.article { padding: 72px 0 96px; background: var(--white); }
/* The article fills the site's own wrap, so its left edge lines up with the
   headline in the band above it and the right margin matches the left. */
.article-col { max-width: none; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--steel-500); padding-bottom: 26px; border-bottom: 1px solid var(--line); }
/* 16:9 rather than 8:5: the photographs are shot that way, and at the full
   width of the wrap an 8:5 crop is 690px tall and swallows the screen. */
.article-art { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 36px 0 8px; background: var(--hero-navy); }
.toc { margin: 36px 0 8px; padding: 26px 30px 28px; background: var(--paper); border-left: 3px solid var(--brand); }
.toc h2 { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--steel-500); }
.toc ol { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 9px; list-style: decimal; color: var(--muted); font-size: 15px; }
.toc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.toc a:hover { color: var(--brand); text-decoration-color: var(--brand); }

.prose { margin-top: 40px; }
.prose > p { font-size: 18.5px; line-height: 1.82; color: var(--body); margin-top: 22px; }
.prose > p.lede { font-size: 22px; line-height: 1.7; color: var(--ink); margin-top: 0; }
.prose h2 { margin-top: 58px; font-size: 32px; line-height: 1.2; letter-spacing: -1px; scroll-margin-top: calc(var(--chrome-h) + 20px); }
.prose h2 + p { margin-top: 16px; }
.prose b { color: var(--ink); }
.prose a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--brand-dark); }
.prose .ticks { margin-top: 26px; }
.prose .ticks li { font-size: 16.5px; }

.article-cta { margin-top: 56px; padding: 34px 36px 36px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.article-cta h2 { font-size: 26px; letter-spacing: -.8px; }
.article-cta p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 600px; }
.article-cta .head-actions { margin-top: 24px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: 1fr; margin-top: 48px; }   /* one question per row */
.faq { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq summary { font-size: 18px; letter-spacing: -.4px; font-weight: 700; display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq p { font-size: 14.5px; line-height: 1.7; color: var(--body); margin-top: 10px; max-width: 760px; }   /* full-width rows would give a 1100px measure */

/* --- CTA + location ------------------------------------------------------ */
.cta-loc { background: var(--white); border-top: 1px solid var(--line); }
.cta-loc .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.cta-loc .ph { height: 400px; }
.hours { margin-top: 30px; }
.hours .row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.hours .row:first-child { border-top: 1px solid var(--line); }
.addr { font-size: 17px; line-height: 1.65; margin-top: 26px; color: var(--body); }
.addr b { display: block; color: var(--ink); font-size: 20px; letter-spacing: -.4px; }

/* --- Footer -------------------------------------------------------------- */
.footer { background: var(--hero-navy); color: #fff; }
.footer .wrap { padding-top: 74px; padding-bottom: 40px; }
.footer .brand .mark { border-color: #fff; color: #fff; }
.footer .brand b { color: #fff; }
.footer .brand span { color: rgba(255,255,255,.60); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal-links a { color: rgba(255,255,255,.62); }
.legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer h5 { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--brand-yellow); margin-bottom: 18px; }
.footer li { font-size: 14.5px; padding: 6px 0; color: rgba(255,255,255,.78); }
.footer .tel-big { font-size: 30px; font-weight: 700; letter-spacing: -1px; margin-top: 20px; }
.footer .addr-p { font-size: 14.5px; color: rgba(255,255,255,.72); padding-top: 10px; line-height: 1.6; }
.legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.55); }

/* --- Mobile call bar (live-site addition, not in the mockup) -------------- */
.callbar { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1300px) {
  .nav { gap: 17px; font-size: 12px; letter-spacing: .8px; }
  .header .wrap { gap: 18px; }
}

/* Between 900 and 1100 the nav is still shown but the masthead runs out of
   room: brand + nav + number + CTA overflowed the viewport. The phone number
   is the CTA that matters, so the button goes first. */
@media (max-width: 1100px) {
  .header .right .btn { display: none; }
}

@media (min-width: 1081px) and (max-width: 1400px) {
  .hero-copy { max-width: 480px; }
  .hero h1 { font-size: 48px; letter-spacing: -1.6px; }
  .hero .lede { font-size: 18px; }
  .hero .actions .btn { padding: 19px 30px; }
}

@media (max-width: 1010px) {
  .hero h1 { font-size: 46px; letter-spacing: -1.6px; }
  .hero-copy { max-width: none; margin-left: 0; }
  .hero .hero-inner { padding-top: 32px; padding-bottom: 40px; }
  .hero .actions .btn { padding: 18px 30px; }
  /* Full-bleed now, and the frame is a narrow vertical slice of a wide photo.
     Pulled left of the desktop crop so the shop's own wordmark does not sit
     behind the headline, which already has the logo above it. */
  .hero-bg img { object-position: 34% 50%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(9,26,66,.80) 0%, rgba(9,26,66,.68) 55%, rgba(9,26,66,.82) 100%); }
  .quote .wrap { grid-template-columns: 240px 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }   /* 1px under: sub-pixel rounding must never open a gap */
  .wrap { padding: 0 28px; }
  .section { padding: 76px 0; }
  .h2 { font-size: 40px; letter-spacing: -1.2px; }
  .header .wrap { grid-template-columns: 1fr auto; height: 76px; }
  /* Below this width the nav collapses behind the menu button. It is absolutely
     positioned against the sticky header, so it drops from the header wherever
     the page happens to be scrolled to. */
  .nav { display: none; }
  .nav-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    /* .nav carries justify-self: center for the desktop row, which would make
       this shrink-to-fit and float in the middle instead of spanning. */
    justify-self: stretch;
    background: var(--hero-navy); border-bottom: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .35);
    padding: 6px 0;
  }
  .nav-open .nav a { padding: 15px 40px; border-top: 1px solid rgba(255,255,255,.14); }
  .nav-open .nav a:first-child { border-top: 0; }
    .header .right { gap: 12px; }
  .header .right .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .price-grid { grid-template-columns: 1fr; }
  .price { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.20); }
  .price:last-child { border-bottom: 0; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .quote .wrap { grid-template-columns: 1fr; }
  .quote blockquote { font-size: 25px; letter-spacing: -.5px; }
  .cta-loc .wrap { grid-template-columns: 1fr; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .strip .wrap { gap: 12px 22px; font-size: 11px; letter-spacing: 1.6px; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(9,26,66,.82) 0%, rgba(9,26,66,.71) 55%, rgba(9,26,66,.84) 100%); }
}

@media (max-width: 620px) {
  :root { --header-h: 69px; }
  .wrap { padding: 0 20px; }
  .section { padding: 58px 0; }
  .hero h1 { font-size: 42px; letter-spacing: -1.6px; }
  .hero .lede, .lede { font-size: 16px; }
  .h2 { font-size: 32px; letter-spacing: -1px; }
  /* Every call to action runs the full width here. A row of buttons at three
     different widths reads as three different levels of importance, and on a
     phone they are not: each one is the whole decision. The call bar is the
     exception, since its two are a pair and sit side by side. */
  .btn { width: 100%; }
  .callbar .btn { width: auto; }
  .hero .actions, .head-actions, .cta-band-actions, .article-cta .head-actions { flex-direction: column; }
  /* Their parents stack with align-items: flex-start at this width, which would
     otherwise shrink these rows to the width of their longest label. */
  .hero .actions, .head-actions, .cta-band-actions { align-self: stretch; }
  .hero h1 { font-size: 36px; letter-spacing: -1.2px; }
  .hero .hero-inner { padding-top: 46px; padding-bottom: 44px; }
  .foot-grid { grid-template-columns: 1fr; }
  .strip { display: none; }
  .legal { flex-direction: column; gap: 8px; }

  /* Keep the masthead to one line — the full lockup wraps to three at 390px */
  .header .wrap { height: 68px; }
  .header .brand .mark { width: 34px; height: 34px; font-size: 17px; }
  .header .brand b { font-size: 13px; letter-spacing: .8px; white-space: nowrap; }
  .header .brand span { display: none; }
  .header .tel { font-size: 16px; }
  .header .tel small { display: none; }
  /* Footroom for the call bar, taken out of the footer rather than the body.
     Padding on the body shows as a white strip below the navy footer whenever
     the bar is down; inside the footer the same space is navy, so there is
     nothing to see either way and nothing moves when the bar comes and goes. */
  .footer .wrap { padding-bottom: 96px; }

  /* The bar is in the page from the start but held below the fold. It comes
     up on its own once the reader has stopped scrolling for a while (see the
     script in build/layout.mjs), so the first thing a phone shows is the
     website rather than two buttons over it. */
  .callbar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease, visibility 0s linear .45s;
  }
  .callbar.is-up {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease, visibility 0s;
  }
  .callbar .btn { flex: 1; padding: 15px 12px; font-size: 13px; }
}

/* At 360px the mark, wordmark, number and menu button no longer fit on one
   line. The number is the point of the masthead on a phone, so the wordmark
   gives way to the mark alone. */
@media (max-width: 400px) {
  .header .brand b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
}

@media print {
  .callbar, .menu-btn { display: none; }
  .header { position: static; }
}

/* ==========================================================================
   Interior pages
   Composed from the same tokens as the homepage: navy bands, yellow accent,
   cream ground. Nothing here introduces a new colour or type size.
   ========================================================================== */

/* --- Page head ------------------------------------------------------------ */
.page-head { background: var(--hero-navy); color: #fff; padding: 76px 0 84px; }
.page-head .eyebrow { color: rgba(255,255,255,.70); }
.page-head .eyebrow a { color: var(--brand-yellow); }
.page-head .h2 { color: #fff; margin-top: 16px; max-width: 800px; }
.page-head .lede { color: rgba(255,255,255,.82); margin-top: 22px; max-width: 620px; }

/* --- Service cards -------------------------------------------------------- */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
/* The section head puts its action beside the heading rather than under it. */
.reviews-head + .svc-cards { margin-top: 48px; }
.svc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--white);
  border-top: 3px solid var(--brand);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* The artwork sits on the shop's navy, so the card carries the brand even
   before the illustration inside it loads. 8:5 keeps every card's image the
   same height whatever the copy underneath does. */
.svc-card-art { display: block; background: var(--hero-navy); overflow: hidden; }
.svc-card-art img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .35s ease; }
/* The body grows to fill the card so "Learn more" lands on the same line in
   every card of a row, whatever the description length. */
.svc-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 26px; }
.svc-card h3 { font-size: 21px; letter-spacing: -.5px; }
.svc-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 10px; }
.svc-card .go { display: block; margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); }
.svc-card:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(9, 26, 66, .10); transform: translateY(-2px); }

/* The last cell of the grid. Eleven services over three columns leave one
   empty, so it carries the three ways in instead of a gap. Not a link itself:
   the buttons inside it are. */
.svc-cta { background: var(--hero-navy); border-color: var(--hero-navy); color: #fff; }
.svc-cta:hover { transform: none; box-shadow: none; border-color: var(--hero-navy); }
.svc-cta .svc-card-body { padding: 32px 28px 30px; }
.svc-cta h3 { font-size: 24px; letter-spacing: -.7px; line-height: 1.14; }
.svc-cta p { color: rgba(255,255,255,.78); font-size: 14.5px; margin-top: 14px; }
.svc-cta-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 22px; }
.svc-cta-actions .btn { width: 100%; padding: 15px 18px; font-size: 12.5px; }
.svc-cta-actions .btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
.svc-cta-actions .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.svc-card:hover .svc-card-art img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card-art img { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover .svc-card-art img { transform: none; }
}

/* --- Two-column body ------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--body); }
.ticks li::before { content: "—"; position: absolute; left: 0; color: var(--brand); }

.numbered { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 20px; }
.numbered li { counter-increment: n; position: relative; padding-left: 52px; }
.numbered li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--brand); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.numbered b { display: block; font-size: 16px; }
.numbered span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 4px; }

/* --- Cards on the navy band ----------------------------------------------- */
.price-grid.two { grid-template-columns: repeat(2, 1fr); }
.price-grid.two .price:nth-child(2n) { border-right: 0; }
.price-grid.two .price:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.20); }
.price .inc { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.80); margin-top: 12px; }
.fineprint { margin-top: 28px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.60); max-width: 720px; }

/* --- Address card --------------------------------------------------------- */
.addr-card { border: 1px solid var(--line); background: var(--white); padding: 32px 30px; }
.addr-card.plain { border: 0; background: none; padding: 0; }
.addr-card h3 { font-size: 20px; letter-spacing: -.4px; margin-bottom: 14px; }
.addr-card .addr { font-size: 16px; line-height: 1.6; color: var(--body); }
.addr-card .addr b { display: block; color: var(--ink); font-size: 19px; letter-spacing: -.3px; }
.addr-card .hours { margin-top: 22px; }
.addr-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Areas grid ----------------------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.area {
  border: 1px solid rgba(255,255,255,.22); padding: 16px 18px;
  font-size: 15px; font-weight: 700; color: #fff;
}
.area::after { content: " →"; color: var(--brand-yellow); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--brand); color: #fff; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.cta-band h2 { font-size: 32px; line-height: 1.15; letter-spacing: -1px; }
.cta-band p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 620px; }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn-brand { background: #fff; color: var(--brand); }
.btn-line-light { border: 1px solid rgba(255,255,255,.55); color: #fff; }

@media (max-width: 1080px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .qgrid, .qgrid.three { grid-template-columns: 1fr; }
  .post-cards { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-post .wrap { grid-template-columns: 1fr; gap: 34px; }
  .feature-art { max-width: 420px; height: auto; min-height: 0; }
  .feature-art img { height: auto; aspect-ratio: 8 / 5; }
  .feature-title { font-size: 34px; }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .split { gap: 44px; }
}

@media (max-width: 900px) {
  .page-head { padding: 52px 0 58px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .price-grid.two { grid-template-columns: 1fr; }
  .price-grid.two .price:nth-child(2n) { border-right: 0; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; gap: 26px; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .svc-cards { grid-template-columns: 1fr; }
  .post-cards { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .reviews-actions .btn { flex: 1; }
  .feature-title { font-size: 28px; letter-spacing: -.9px; }
  .prose h2 { font-size: 25px; }
  .prose > p.lede { font-size: 19px; }
  .article-cta { padding: 26px 24px 28px; }
  .area-grid { grid-template-columns: 1fr; }
  .cta-band h2 { font-size: 26px; }
}

/* Grid items default to min-width:auto, so a nowrap button label ("Directions
   from Grandmont–Rosedale") stretched the whole track past the viewport on a
   phone. Let the columns shrink, and let long button labels wrap. */
.split > * { min-width: 0; }

@media (max-width: 620px) {
  .addr-actions .btn { white-space: normal; text-align: center; }
}

/* --- Spec cards (light ground) --------------------------------------------
   The navy page head already carries the top of every interior page, so these
   sit on cream — two dark bands back to back read as one endless block. */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); margin-top: 44px; background: var(--white); }
.spec-grid.three { grid-template-columns: repeat(3, 1fr); }
.spec { padding: 32px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec-grid > .spec:nth-child(2n) { border-right: 0; }
.spec-grid.three > .spec:nth-child(2n) { border-right: 1px solid var(--line); }
.spec-grid.three > .spec:nth-child(3n) { border-right: 0; }
.spec-grid > .spec:nth-last-child(-n+2) { border-bottom: 0; }
.spec-grid.three > .spec { border-bottom: 0; }
.spec h4 { font-size: 18px; letter-spacing: -.4px; }
.spec .spec-value { font-size: 24px; font-weight: 700; letter-spacing: -.8px; color: var(--brand); margin: 10px 0 2px; }
.spec p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-top: 10px; }
.fineprint.dark { color: var(--muted); }

/* A single column of the same cards, for the times the three points are
   paragraphs rather than headline figures and want the full measure. */
.spec-list { display: grid; border: 1px solid var(--line); background: var(--white); align-self: start; }
.spec-list > .spec { border-right: 0; border-bottom: 1px solid var(--line); }
.spec-list > .spec:last-child { border-bottom: 0; }
.spec-list .spec p { font-size: 15.5px; line-height: 1.7; }
.spec-list .spec p a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .spec-grid, .spec-grid.three { grid-template-columns: 1fr; }
  .spec, .spec-grid.three > .spec { border-right: 0; border-bottom: 1px solid var(--line); }
  .spec-grid > .spec:last-child, .spec-grid.three > .spec:last-child { border-bottom: 0; }
}

/* --- Masthead call button ------------------------------------------------- */

/* --- Quote form -----------------------------------------------------------
   White ground, so the section separates from the cream sections either side.
   The card keeps its hairline border to stay readable on white, and the inputs
   stay cream so the fields still read as fields. */
/* Reversed onto the navy. The left column carries the latest article, the
   right the form: the form card stays white so the fields still read as
   fields, and it carries its own heading now that the section copy is the
   article rather than an introduction to the form. */
.quote-form { background: var(--hero-navy); color: #fff; }
/* Reversed copy in the left column; the form card keeps the dark eyebrow,
   since it sits on white. */
.quote-form .eyebrow { color: var(--steel-300); }
.quote-form .eyebrow i { color: var(--brand-yellow); font-style: normal; }
.quote-form .qform .eyebrow { color: var(--steel-500); }
/* Yellow only for the article's own button, which sits on the navy. The form's
   submit stays brand blue: it is on the white card, where yellow washes out. */
.quote-form .post-promo .btn-brand { background: var(--brand-yellow); color: var(--hero-navy); }
.quote-form .post-promo .btn-brand:hover { background: #FFE785; }

/* Light variant, for the contact page where the form sits above the map and
   the section either side of it is cream. The card keeps its hairline border
   so it still reads as a card on a near-white ground. */
.quote-form.on-light { background: var(--white); color: var(--ink); }
.quote-form.on-light .eyebrow { color: var(--steel-500); }
.quote-form.on-light .feature-title { color: var(--ink); }
.quote-form.on-light .feature-lede { color: var(--body); }
.quote-form.on-light .promo-points li { color: var(--body); }
.quote-form.on-light .promo-points li::before { background: var(--brand); }
.quote-form.on-light .btn-line-light { border-color: #C9C3BB; color: var(--ink); }

.qform-head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.qform-head h2 { margin-top: 10px; font-size: 27px; letter-spacing: -.9px; color: var(--ink); }

.qform { background: var(--white); border: 1px solid var(--line); padding: 32px 30px 30px; }
.qrow { margin-bottom: 16px; }
.qrow label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--steel-500); margin-bottom: 6px; }
.qform input, .qform select, .qform textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 13px 14px;
}
.qform textarea { resize: vertical; line-height: 1.5; }
.qform input:focus-visible, .qform select:focus-visible, .qform textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
/* Year, make and model side by side, and phone next to email, so splitting
   the vehicle into real fields does not double the height of the form. */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.qgrid.three { grid-template-columns: 0.8fr 1fr 1fr; }
.qopt { font-weight: 400; letter-spacing: .6px; text-transform: none; color: var(--muted); }
.qsubmit { width: 100%; margin-top: 6px; }
.qnote { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* --- About: supporting card ----------------------------------------------- */
.ticks-card { background: var(--white); border: 1px solid var(--line); padding: 32px 30px; }
.ticks-card h3 { font-size: 19px; letter-spacing: -.4px; }
.ticks-card .ticks { margin-top: 18px; }
.ticks-card .ticks li { font-size: 15px; }


/* --- Google Maps embed ----------------------------------------------------
   The live listing, not a placeholder. Height is set on the wrapper so the
   iframe can fill it; lazy so it never blocks first paint. */
.map-embed { min-height: 420px; background: #EDF0F1; position: relative; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) { .map-embed { min-height: 320px; } }