/* ============================================================
   Self-hosted webfonts (latin subset, variable)

   Served from fonts.googleapis.com until 2026-08-03. The swap when they finally
   arrived was the whole of the site's 0.15 CLS, a failing Core Web Vital, so
   they are local now. That also removes two third-party connections and lets
   the CSP drop fonts.googleapis.com and fonts.gstatic.com entirely.

   Both are VARIABLE fonts, so one file covers every weight the site uses.
   Google's API hands back the same file for each weight you ask for; asking for
   400;500;600;700 downloaded the identical bytes four times over. Hence the
   weight RANGES below rather than four @font-face blocks per family.

   Both are preloaded in every page head. Same-origin + preload means they are
   in hand at first paint, so `swap` has nothing left to swap.
   ============================================================ */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   AutoPro SDR: Garage-Luxe visual system
   Dark base · fire-red accent · amber review stars · Oswald + Archivo
   ============================================================ */

:root {
  --bg:        #0b0b0d;
  --bg-2:      #100f12;
  --surface:   #141318;
  --surface-2: #1b1a20;
  --surface-3: #232229;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --text:      #f5f2ec;
  --muted:     #9a98a1;
  /* The dimmest text tier: form labels, footer headings, the copyright line.
     Was #6f6d76, which measured 3.4:1 on --surface-2 and failed AA on all 147
     places it appears, including every label on the estimate form. Bumped to
     the lowest value that clears 4.5:1 everywhere, so it still reads as the
     quiet tier and stays clearly dimmer than --muted. */
  --muted-2:   #8a8892;

  /* Signal blue, chosen by Sean on 2026-08-04 using the preview colour picker.
     Replaces the fire red #d92d20. Every accent-coloured thing derives from
     this one line, so recolouring the brand stays a one-token edit.

     The accent is used almost entirely as a FILL, not as text. At 3.24:1
     against --bg it clears the 3:1 bar that large display type needs, which is
     all the .em words still are, but it would fail the 4.5:1 bar for small
     text. That is why the eyebrows, icons, link hovers and review stars were
     moved off it during the red pass, and that decision is what still makes a
     colour this deep legal.

     ⚠️ The two limits are NOT the same kind of limit, and it matters:

       darker than about #1c52ce is a HARD floor. The headline words stop
         separating from the near-black page (#1a4fc4 measures 2.77:1 against a
         3:1 bar). Nothing fixes this. The bar is the accent against the page
         background, so no other token can buy it back.

       lighter than about #3a6ce8 is a SOFT ceiling, and only while
         --accent-ink stays near-white (#4478f0 measures 3.81:1 on it). Flip
         the ink to near-black and the same #4478f0 measures 4.69:1 and is
         perfectly usable. So a lighter blue is available; it just costs a
         second token change, not a veto.

     #2058d9 sits near the hard floor, so if this ever moves, move it LIGHTER,
     and check both bars rather than just the one you are thinking about. */
  --accent:    #2058d9;
  /* Hover DEEPENS rather than lightens, same as it did for the red. Lightening
     is what costs the white label its contrast. */
  --accent-2:  color-mix(in srgb, var(--accent), #000000 16%);
  /* The label sitting on an accent fill. 5.71:1 on the blue, comfortably over
     the 4.5:1 small-text bar, where near-black would only manage 3.13:1 and
     fail. Cooled from the old #fff6f4: that was warmed to sit on a red, and a
     pink-tinted white on a blue fill reads as a mistake. Luminance is close
     enough that the contrast figure is unchanged. */
  --accent-ink:#f5f8ff;
  --accent-glow: color-mix(in srgb, var(--accent), transparent 55%);

  /* Review stars are Google's amber, deliberately NOT the brand colour. These
     reviews are reproduced from the Google Business Profile, so painting them
     in our own brand colour would read as a rating we issued ourselves, and it
     throws away the instant "five stars" recognition a gold star carries. This
     holds whatever --accent happens to be, so it does not follow it. */
  --star:      #fbbc04;

  --maxw: 1200px;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --shadow: 0 30px 70px -30px rgba(0,0,0,0.85);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient page texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 85% -5%, color-mix(in srgb, var(--accent), transparent 90%), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, color-mix(in srgb, var(--accent), transparent 95%), transparent 60%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

#root { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  white-space: nowrap;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.section { position: relative; padding: 120px 0; }
.section-tight { padding: 84px 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  padding: 15px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px var(--accent-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--text); background: rgba(255,255,255,0.04); }
.btn-lg { padding: 18px 34px; font-size: 1.05rem; }

.arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11,11,13,0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { height: 38px; width: auto; filter: invert(1) brightness(1.7); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
  color: var(--muted);
  transition: color .2s;
  position: relative;
}
.nav-link:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-phone svg { color: var(--muted); }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 168px 0 90px;
  overflow: hidden;
}
.hero-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    -24deg,
    transparent 0 38px,
    rgba(255,255,255,0.018) 38px 39px
  );
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.hero-title .em { color: var(--accent); position: relative; white-space: nowrap; }
.hero-sub {
  margin-top: 26px;
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 33ch;
  line-height: 1.55;
}
.hero-actions { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 46px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.trust-item { display: flex; flex-direction: column; }
.trust-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
}
.trust-num .u { color: var(--text); }
.trust-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  margin-top: 7px;
}

/* The asterisk on "100%" for colour match.

   It takes --text, NOT --accent, and that is a correction rather than a
   preference. Accent-coloured it measured 3.24:1: at 16.9px/700 it lands just
   under the 18.66px bold cutoff for "large text", so it needs 4.5:1, and the
   blue cannot reach that. An asterisk nobody can read is worse than a plain
   one, given its entire job is flagging that the 100% claim has a condition.
   Bumping the size to clear the large-text cutoff would only have moved it to a
   3:1 bar it passes by 0.24, which is gaming the threshold, not fixing it.

   The disclosure does not rest on this glyph anyway. .hero-note below spells
   the condition out in full.

   Raised as a proper superscript instead of vertical-align: super, which would
   have stretched the line box and knocked the four stats out of alignment. */
.trust-num .ast {
  color: var(--text);
  font-size: 0.62em;
  position: relative;
  top: -0.55em;
  margin-left: 1px;
}
.hero-note {
  margin-top: 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 46ch;
}

/* hero media */
.hero-media { position: relative; }
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-photo image-slot { width: 100%; height: 100%; display: block; }
.hero-badge {
  position: absolute;
  left: -22px;
  bottom: 34px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 16px 20px;
  border-radius: var(--r);
  box-shadow: 0 18px 40px -14px var(--accent-glow);
  max-width: 210px;
}
.hero-badge .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1;
}
.hero-badge .small { font-size: 0.82rem; font-weight: 600; margin-top: 4px; }
.hero-watermark {
  position: absolute;
  right: -8%;
  top: 4%;
  width: 56%;
  opacity: 0.04;
  filter: invert(1);
  pointer-events: none;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  width: max-content;
  /* Was 32s, which whipped the service names past too fast to read. Tripled. */
  animation: scroll-x 96s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee-item::after { content: "●"; color: var(--muted-2); font-size: 0.6rem; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head { max-width: 720px; margin-bottom: 60px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-top: 20px;
}
.sec-title .em { color: var(--accent); }
/* Keeps a two-sentence headline breaking at the full stop instead of orphaning
   the first word of the second sentence on the line above. inline-block moves
   the whole sentence down together when it will not fit, but still lets it wrap
   internally on narrow screens, so it is safe at every width. */
.sec-title .s2 { display: inline-block; }
.sec-desc { margin-top: 20px; color: var(--muted); font-size: 1.1rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.svc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px 30px;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); }
.svc-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease);
}
.svc-card:hover::before { transform: scaleY(1); }
.svc-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}
.svc-icon {
  width: 52px; height: 52px;
  margin: 18px 0 22px;
  border-radius: var(--r);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--line);
}
.svc-icon svg { width: 26px; height: 26px; }
.svc-name {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
.svc-desc { margin-top: 12px; color: var(--muted); font-size: 1rem; }
/* Panel Replacement is the one service card without a page behind it, so it is
   rendered as a div. Cancelling the lift and the accent rail keeps it from
   advertising a click it cannot honour. Six cards now fill the two-column grid
   exactly, which is why the old .svc-wide span is gone. */
.svc-card-static { cursor: default; }
.svc-card-static:hover {
  transform: none;
  border-color: var(--line);
  background: var(--surface);
}
.svc-card-static:hover::before { transform: scaleY(0); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 36px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
}
.step-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  letter-spacing: -0.02em;
}
.step-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-top: 18px;
}
.step-desc { margin-top: 10px; color: var(--muted); }

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ba-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  user-select: none;
  box-shadow: var(--shadow);
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer image-slot { width: 100%; height: 100%; display: block; }
.ba-after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-tag {
  position: absolute;
  bottom: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(11,11,13,0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  pointer-events: none;
}
.ba-tag.before { left: 16px; }
/* This border was hardcoded rgba(255,90,31,0.4), so it silently stayed orange
   through the teal period and matched nothing. Derived from --accent now. */
.ba-tag.after { right: 16px; color: var(--text); border-color: var(--line-2); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -6px var(--accent-glow);
  font-size: 0.9rem;
}
.ba-copy .sec-title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.ba-thumbs { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.ba-thumb {
  width: 84px; height: 64px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.ba-thumb image-slot { width: 100%; height: 100%; }
.ba-thumb.active { border-color: var(--accent); transform: translateY(-2px); }

/* ============================================================
   WHY / TRUST
   ============================================================ */
.why {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.why-portrait {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.why-portrait image-slot { width: 100%; height: 100%; }
.why-cert {
  position: absolute;
  right: 16px; top: 16px;
  background: rgba(11,11,13,0.8);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  backdrop-filter: blur(6px);
}
.why-cert .dot { color: var(--muted); }
.why-points { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.why-point { display: flex; gap: 16px; align-items: flex-start; }
.why-point .pi {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text);
}
.why-point h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.why-point p { color: var(--muted); font-size: 0.98rem; margin-top: 3px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stars { display: flex; gap: 3px; color: var(--star); }
.review p { font-size: 1.05rem; line-height: 1.55; }
.review-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
}
.review-by .n { font-weight: 600; font-size: 0.95rem; }
.review-by .m { color: var(--muted-2); font-size: 0.82rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
}
.faq-icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.faq-item.open .faq-icon { background: var(--accent); color: var(--accent-ink); transform: rotate(45deg); border-color: var(--accent); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s var(--ease);
}
.faq-a-inner { padding: 0 4px 26px; color: var(--muted); font-size: 1.02rem; max-width: 60ch; }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 93%), transparent 50%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.95;
}
.cta-title .em { color: var(--accent); }
.cta-sub { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 40ch; }
.cta-contacts { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }
.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cta-row .ci {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text);
}
.cta-row .cl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-2); }
.cta-row .cv { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.cta-row.phone-row .cv { white-space: nowrap; }

/* estimate card */
.estimate {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 36px 34px;
  box-shadow: var(--shadow);
}
.estimate h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
}
.estimate .lead { color: var(--muted); margin-top: 8px; font-size: 0.98rem; }
.field { margin-top: 18px; }
.field label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.16);
}
.field textarea { resize: vertical; min-height: 84px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.estimate .btn { width: 100%; justify-content: center; margin-top: 22px; }
.estimate-note { margin-top: 14px; font-size: 0.82rem; color: var(--muted-2); text-align: center; }
.estimate-ok { text-align: center; padding: 28px 8px; }
.estimate-ok .ok-ring {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,90,31,0.12);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--text);
}
.estimate-ok h3 { margin-bottom: 8px; }
.estimate-ok p { color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 56px 0 36px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-logo img { height: 44px; filter: invert(1) brightness(1.7); }
.footer-tag { color: var(--muted); margin-top: 16px; max-width: 34ch; font-size: 0.96rem; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.footer-col a, .footer-col p { display: block; color: var(--muted); font-size: 0.96rem; margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 0.85rem;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-media { max-width: 460px; }
  .why-grid, .cta-grid, .ba-wrap, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .hero { padding: 132px 0 64px; }
  .hero-title { font-size: clamp(2.5rem, 11vw, 3.3rem); line-height: 1.0; }
  .hero-sub { font-size: 1.05rem; margin-top: 22px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .sec-title { font-size: clamp(1.9rem, 7.6vw, 2.5rem); }
  .cta-title { font-size: clamp(2rem, 8.4vw, 2.7rem); }
  .nav-links, .nav-phone { display: none; }
  .nav-inner { padding: 16px 20px; }
  .wrap { padding: 0 20px; }
  .nav-toggle { display: grid; place-items: center; }
  .services-grid, .reviews-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-badge { left: 0; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-cols { gap: 40px; }
  .hero-trust { gap: 22px; }
  .mobile-menu { display: block; }
}
.mobile-menu { display: none; }

body.no-watermark .hero-watermark { display: none; }
body.no-grain::after { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,11,13,0.97);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  padding: 80px 32px 32px;
  gap: 8px;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.drawer.open { transform: none; }
.drawer a {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.drawer-close { position: absolute; top: 24px; right: 28px; background: none; border: 0; color: var(--text); }

/* ============================================================
   STATIC BUILD ADDITIONS (real <img>, work gallery, honest
   reviews, service-page hero + breadcrumb, related services)
   ============================================================ */

/* real photos fill the slots the prototype used <image-slot> for */
.hero-photo img,
.why-portrait img,
.work-item img,
.svc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- WORK gallery (replaces the before/after prototype) ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.work-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.work-item img { transition: transform .6s var(--ease); }
.work-item:hover img { transform: scale(1.05); }
.work-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(11,11,13,0.85));
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.86rem;
}

/* ---- Google reviews (real, pulled from the Business Profile) ----
   Two layouts share the card: a 3-up grid on the home page, and a
   multi-column flow on /reviews/ where 30 cards of wildly different
   lengths would leave holes in a fixed grid. */
.rating-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 900px;
  margin: 0 auto 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
}
.rating-score { display: grid; justify-items: center; gap: 7px; }
.rs-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
}
.rating-card .stars { justify-content: center; }
.rs-meta {
  color: var(--muted-2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rating-blurb { flex: 1 1 300px; min-width: 250px; color: var(--muted); font-size: 1.02rem; }
.rating-card .btn { flex: 0 0 auto; }

.reviews-grid { align-items: start; }

.review-head { display: flex; align-items: center; gap: 12px; }
.review-who { display: grid; gap: 2px; min-width: 0; }
.review-who .n {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 0.95rem;
}
.review-who .m { color: var(--muted-2); font-size: 0.82rem; }
.lg-badge {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px 7px;
}
.review blockquote { margin: 0; }
.review blockquote p { font-size: 1.02rem; line-height: 1.6; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-chip {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.owner-reply {
  display: grid;
  gap: 6px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line-2);
}
.or-head {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.or-age { color: var(--muted-2); font-weight: 400; letter-spacing: 0; text-transform: none; }
.owner-reply p { color: var(--muted); font-size: 0.93rem; line-height: 1.55; }

/* ---- sliding review strip, sits under the hero ----
   Same trick as .marquee above: the track holds two identical runs and travels
   exactly -50%, so run two lands where run one started and the loop is seamless. */
.review-strip {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 30px 0 36px;
  position: relative;
  z-index: 1;
}
.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.strip-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-num { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; }
.sr-meta {
  color: var(--muted-2);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.strip-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.strip-link:hover { text-decoration: underline; }
.strip-link .arrow { transition: transform .25s var(--ease); }
.strip-link:hover .arrow { transform: translateX(3px); }

/* A real scroll container, not a CSS transform animation. app.js nudges
   scrollLeft a fraction of a pixel per frame and wraps at the halfway point,
   where run two is pixel-identical to run one, so the loop is invisible.
   Doing it this way is what makes the rail draggable, swipeable and
   trackpad-scrollable: a transform animation can do none of those. */
.strip-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  cursor: grab;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
  touch-action: pan-x;
  /* Fade both ends so cards enter and leave instead of being chopped off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.strip-viewport::-webkit-scrollbar { display: none; }
.strip-viewport.dragging { cursor: grabbing; user-select: none; }
.strip-viewport.dragging .mini-review { pointer-events: none; }
.strip-track { display: flex; width: max-content; }
.strip-run { display: flex; gap: 16px; padding-right: 16px; }

.mini-review {
  flex: 0 0 320px;
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.mini-review .mr-top { display: flex; align-items: center; gap: 10px; }
.mini-review .review-av { width: 32px; height: 32px; font-size: 0.85rem; }
.mini-review .review-who .n { font-size: 0.9rem; }
.mini-review .review-who .m { font-size: 0.76rem; }
.mini-review .lg-badge { font-size: 0.58rem; padding: 1px 6px; }
.mini-review blockquote { margin: 0; }
.mini-review blockquote p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Under prefers-reduced-motion app.js never starts the auto-advance, so the rail
   just sits still and stays draggable and swipeable. Nothing to override here:
   the duplicate run is kept so manual scrolling still wraps forever. */

@media (max-width: 720px) {
  .strip-head { margin-bottom: 16px; }
  .mini-review { flex-basis: 268px; padding: 17px 18px; }
  .sr-num { font-size: 1.45rem; }
}

.reviews-hero { max-width: 760px; }
.reviews-columns { columns: 3; column-gap: 18px; }
/* block rather than flex: a flex item inside a multicol container is where
   break-inside:avoid stops being reliable, and a card split across a column
   boundary looks like two half-reviews. */
.reviews-columns .review { display: block; break-inside: avoid; margin: 0 0 18px; }
.reviews-columns .review > * + * { margin-top: 16px; }
.reviews-source { margin-top: 26px; text-align: center; color: var(--muted-2); font-size: 0.86rem; }
.reviews-source a { color: var(--text); }

@media (max-width: 980px) {
  .reviews-columns { columns: 2; }
  .rating-card { text-align: center; }
  .rating-blurb { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .reviews-columns { columns: 1; }
  .rs-num { font-size: 2.5rem; }
}

/* ---- breadcrumb (service pages) ---- */
.breadcrumb {
  font-size: 0.82rem;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { color: var(--muted-2); }

/* ---- service-page hero ---- */
.svc-hero { padding: 150px 0 84px; overflow: hidden; position: relative; }
.svc-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.svc-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin-top: 18px;
}
.svc-hero h1 .em { color: var(--accent); }
.svc-hero-sub { margin-top: 22px; color: var(--muted); font-size: 1.14rem; max-width: 46ch; }
.svc-hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.svc-hero-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}

/* ---- generic feature list (service "what's included") ---- */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.feature {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px;
}
.feature .fi {
  flex: none; width: 38px; height: 38px; border-radius: var(--r);
  background: var(--surface-3); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--text);
}
.feature h3 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: 0.02em;
}
.feature p { color: var(--muted); font-size: 0.96rem; margin-top: 3px; }

/* ---- related services grid ---- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.related-card .rn {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: 0.01em;
}
.related-card .arrow { color: var(--muted); }

@media (max-width: 980px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .svc-hero { padding: 120px 0 64px; }
}

/* file input in the estimate form */
.field input[type="file"] { padding: 11px 14px; color: var(--muted); font-size: 0.92rem; }
.field input[type="file"]::file-selector-button {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.78rem; color: var(--text); background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--line-2); color: var(--text); }

/* ---- PPG Envirobase brand mark ------------------------------------------
   The supplied logo is dark navy artwork on a transparent background, so it
   disappears on this site's near-black surfaces. PPG's brand guidelines also
   forbid recolouring the mark. Both problems are solved the same way: sit the
   artwork on a light chip and leave the logo itself untouched. */
.logo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--r);
  padding: 9px 13px;
}
.logo-chip img { display: block; height: auto; }

/* Credential plaque under the "why" points: the claim in the copy above is
   "PPG-certified", and this is the evidence for it. */
.cert-plaque {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.cert-plaque .logo-chip img { width: 190px; }
.cert-plaque p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}
.cert-plaque strong { color: var(--text); font-weight: 600; }

/* Footer: sits beside the existing "PPG-Certified / Envirobase" line. */
.footer-bottom .logo-chip { padding: 6px 9px; }
.footer-bottom .logo-chip img { width: 118px; }
.footer-cert { display: inline-flex; align-items: center; gap: 12px; }

@media (max-width: 720px) {
  .cert-plaque { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cert-plaque .logo-chip img { width: 170px; }
  .footer-cert { flex-wrap: wrap; gap: 10px; }
}

/* ---- in-page navigation offset ---------------------------------------------
   .nav is position:fixed and 93px tall (89px under 720px), so an anchor jump
   lands the target's top edge underneath it and the heading you asked for is
   hidden. scroll-padding-top on the scroll container fixes that for fragment
   navigation and any scrollIntoView, including arriving from another page via
   a link like ../#work. The JS scroller measures the nav live and does not
   depend on this value. */
:root { --nav-h: 93px; }
html { scroll-padding-top: calc(var(--nav-h) + 18px); }

/* app.js sets this class on <html> as soon as it runs. It hands scrolling over
   to the JS animator, whose duration scales with distance; the browser's own
   smooth scroll uses a near-constant duration, so a 6500px jump to #estimate
   blurred past in a few hundred milliseconds and read as a hard cut. Keeping
   the CSS rule as the default means no-JS visitors still get smooth scrolling
   rather than an instant jump. */
html.js-scroll { scroll-behavior: auto; }

@media (max-width: 720px) {
  :root { --nav-h: 89px; }
}

/* ---- shop map ---------------------------------------------------------------
   Vendored Leaflet + CARTO dark_all tiles. Leaflet's stock chrome is built for
   a light page, so everything below re-skins it to this site's palette: the
   panes, the zoom buttons and the attribution all ship white by default and
   would glare against a near-black page. The CSP had to be widened to allow
   img-src from *.basemaps.cartocdn.com, since tiles are images. */
.visit {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
/* Service-area line under the map. Backs up the six areaServed cities in the
   business schema with something a human (and a crawler) can actually read. */
.visit-area {
  margin-top: 20px;
  color: var(--muted);
  font-size: 1rem;
  max-width: 62ch;
}

.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.map-canvas {
  width: 100%;
  height: clamp(340px, 46vh, 470px);
  background: var(--surface);
}
/* Shown until Leaflet paints over it, so a blocked CDN or a failed script
   leaves the address rather than an empty black rectangle. */
.map-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0;
  padding: 24px;
}

.map-card {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 500; /* above Leaflet's panes (max 400) but below its controls */
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
}
.map-card-text { flex: 1; min-width: 0; }
.map-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  color: var(--text);
}
.map-card-addr { font-size: 0.88rem; color: var(--muted); margin-top: 2px; }
.map-dir { flex: 0 0 auto; gap: 8px; padding: 12px 18px; font-size: 0.8rem; }

/* Leaflet re-skin */
.leaflet-container {
  background: var(--surface);
  font-family: var(--font-body);
}
.leaflet-control-attribution {
  background: rgba(11, 11, 13, 0.82) !important;
  color: var(--muted-2) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar,
.leaflet-bar a {
  background: rgba(20, 19, 24, 0.95) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
.leaflet-bar a:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.leaflet-popup-content { font-size: 0.9rem; line-height: 1.55; }
.leaflet-popup-content b { font-family: var(--font-display); letter-spacing: 0.04em; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted) !important; }

/* Marker: the site's accent, not Leaflet's default blue teardrop image. */
.map-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 14px rgba(0, 0, 0, 0.65);
}

@media (max-width: 720px) {
  .map-card { flex-direction: column; align-items: stretch; gap: 12px; left: 10px; right: 10px; bottom: 10px; padding: 14px; }
  .map-dir { justify-content: center; }
  .map-canvas { height: clamp(300px, 52vh, 400px); }
}

/* ---- WORK gallery: one tile per service ------------------------------------
   There are five services, and five tiles in a three-column grid leaves a hole
   in the bottom-right corner that reads as a missing image. Laying the row out
   on six columns gives three tiles of two, then two tiles of three: a full,
   deliberate-looking block either way. The wider pair get a cinematic ratio so
   they do not tower over the first row. */
.work-grid { grid-template-columns: repeat(6, 1fr); }
.work-item { grid-column: span 2; }
.work-item:nth-child(4),
.work-item:nth-child(5) { grid-column: span 3; aspect-ratio: 16 / 10; }

/* The stacked breakpoints below re-declare the spans, because the rules above
   are unconditional and would otherwise make every tile span the whole row. */
@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-item,
  .work-item:nth-child(4),
  .work-item:nth-child(5) { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
}