/* ============================================================
   ADDICTED TO COLOR — site.css
   Design system: bright "white gallery" inversion of the Axcel /
   Summit cinematic template. Paper canvas, near-black tracked
   uppercase display type, zero radius, hairlines, clear (untinted)
   full-bleed media. The rainbow is reserved for the hero word and
   the brush separators; brand red carries interactive states only.
   ============================================================ */

:root {
  /* Canvas — bright */
  --paper:   #ffffff;
  --paper-2: #f7f6f3;   /* warm paper, alternating sections */
  --paper-3: #efece6;   /* hairline-adjacent fills */
  --ink:     #14100e;   /* near-black, display + headings */
  --ink-2:   #423b36;   /* body copy */
  --ink-3:   #6b635d;   /* muted / captions */
  --line:    #e2ddd5;   /* hairlines */

  /* Brand — sampled from the logo */
  --red:    #d7263d;
  --orange: #f47b20;
  --yellow: #f7c600;
  --green:  #2d9b4a;
  --blue:   #0b5d9e;
  --purple: #742b91;

  /* One accent for interactive states (the logo's script red) */
  --accent:      var(--red);
  --accent-dark: #a81c2e;

  --rainbow: linear-gradient(90deg,
    #d7263d 0%, #f47b20 20%, #f7c600 40%, #2d9b4a 60%, #0b5d9e 80%, #742b91 100%);

  /* Type
     The display fallbacks are all CONDENSED on purpose. With a plain
     system-ui fallback, the swap-in reflow was brutal: pre-webfont the
     headings set ~2.2x taller and the whole document measured 14488px,
     then collapsed to 9724px when Barlow Condensed landed — enough to
     yank the reader's scroll position. Arial Narrow / Roboto Condensed
     are close enough in width that the swap is barely perceptible. */
  --font:    'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue Condensed',
             'Liberation Sans Narrow', ui-sans-serif, system-ui, sans-serif;
  --track-label:   0.16em;
  --track-display: 0.005em;

  /* Layout */
  --page-max: 1400px;
  --gutter: clamp(20px, 4vw, 60px);
  --nav-h: 104px;   /* fits the 2x logo the brand mark grows to in the bar */

  /* z-scale */
  --z-nav: 50;
  --z-menu: 60;
  --z-mobile-cta: 40;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root { color-scheme: light; }

body {
  font-family: var(--font);
  font-size: 16px;              /* readable on mobile without zoom */
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* no horizontal scroll, ever */
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label);
}
.skip-link:focus { left: 12px; top: 12px; }

.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.sec-inner { position: relative; z-index: 1; }
.sec-paper { background: var(--paper-2); }

/* ---------- Type utilities ---------- */
.label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1.4;
  color: var(--accent);
  margin-bottom: 14px;
}
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.98;
  color: var(--ink);
}
/* Exaggerated-minimalism scale: oversized display, generous whitespace */
.display--xl { font-size: clamp(44px, 8.4vw, 122px); }
.display--lg { font-size: clamp(34px, 5.2vw, 74px); }
.display--sm { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0.02em; line-height: 1.1; }

.body-copy { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.sec-lede { margin-top: 20px; max-width: 60ch; }   /* 65-75 char line length */

/* The one place the whole rainbow lands in type. */
.rainbow-word {
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Painted on its own line so the clip box tracks the word, not the block. */
  display: inline-block;
  /* The glyphs are transparent windows onto the gradient, so text-shadow would
     render behind them and be visible THROUGH the letters — which turned the
     word white. Kill any inherited shadow and halo it with a filter, which
     acts on the painted result. */
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

.sec-head { margin-bottom: clamp(38px, 5vw, 68px); max-width: 900px; }

/* ---------- Brush separator (the client's own stroke) ----------
   The ONLY section separator on the page — there are no 1px rules between
   sections anywhere. The strip itself takes NO height and has NO background:
   the two sections butt straight up against each other and the stroke is
   painted across the seam, bleeding into both. How much of it lands in the
   section above vs below is set per-separator (--y) and deliberately uneven,
   so they read as eight separate hand-swipes rather than one stamp repeated.
   The rainbow is baked into the PNG's pixels, so no mask-image support needed. */
.brush-sep {
  position: relative;
  height: 0;            /* takes up no space — it straddles, it doesn't divide */
  z-index: 3;
  pointer-events: none;
}
.brush {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--h, 62px);
  /* --y = how much of the stroke sits ABOVE the seam. 50% = dead centre. */
  transform: translateY(calc(-1 * var(--y, 50%)));
  background-image: url("img/brush.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.brush--flip { transform: translateY(calc(-1 * var(--y, 50%))) scaleX(-1); }
/* Same stroke, solid ink — a blank separator to match the copy-carrying bands. */
.brush--ink { background-image: url("img/brush-ink.png"); }
.bs-ink { --y: 52%; --h: 118px; }
@media (max-width: 1080px) { .bs-ink { --h: 86px; } }
@media (max-width: 680px)  { .bs-ink { --h: 64px; } }

/* Eight hand-set positions. Nothing here is a round number on purpose. */
/* Thicker, and still no two alike. */
.bs-1 { --y: 70%; --h: 104px; }
.bs-2 { --y: 33%; --h: 86px; }
.bs-3 { --y: 74%; --h: 96px; }
.bs-4 { --y: 40%; --h: 112px; }
.bs-5 { --y: 26%; --h: 92px; }
@media (max-width: 680px) {
  .brush { height: calc(var(--h, 62px) * 0.62); }
}

/* Thin neutral stroke standing in for every rule that used to be a 1px line
   (FAQ rows, footer base, mobile menu items). Same artwork, no straight edges. */
.brush-rule {
  display: block;
  width: 100%;
  height: 9px;
  border: 0;
  opacity: 0.5;
  background-image: url("img/brush-line.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* ---------- Links / buttons ---------- */
.arrow-link {
  display: inline-block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink);
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.22s ease;
}
.arrow-link .arr { display: inline-block; transition: transform 0.22s ease; margin-left: 8px; }
.arrow-link:hover, .arrow-link:focus-visible { color: var(--accent); }
.arrow-link:hover .arr { transform: translateX(5px); }

.solid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                /* >= 44px touch target */
  padding: 14px 34px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.solid-btn:hover, .solid-btn:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); }
.solid-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 34px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink);
  border: 1px solid rgba(20, 16, 14, 0.45);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}
.ghost-btn:hover, .ghost-btn:focus-visible {
  color: #fff; background: var(--accent); border-color: var(--accent);
}

/* Second hero CTA — solid ground so it reads on the clip like the red one. */
.hero-call {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(20, 16, 14, 0.18);
}
.hero-call:hover, .hero-call:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* The hero scrim is light, so nav ink stays dark from the very top. */
.nav--solid {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 10px 30px -18px rgba(20, 16, 14, 0.5);   /* no rule, just lift */
}
.nav-inner {
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* The mark starts life full-size inside the hero (.hero-brand) and only
   migrates into the bar once the hero is behind you. Hidden -> not just
   transparent: visibility keeps it out of the tab order while it's invisible. */
.nav-brand {
  display: flex; align-items: center; cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.nav--solid .nav-brand {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.nav-brand img { height: 92px; width: auto; }   /* 2x the old 46px */
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--accent); }
.nav-phone { color: var(--ink); }
.nav-cta {
  color: #fff; background: var(--accent);
  border: 1px solid var(--accent);
  padding: 11px 22px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn .bar { display: block; width: 24px; height: 2px; background: var(--ink); transition: background-color 0.2s ease; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-menu);
  background: var(--paper);
  box-shadow: 0 18px 40px -24px rgba(20, 16, 14, 0.55);
  padding: 10px var(--gutter) 26px;
  display: none;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--display);
  font-size: 21px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
  padding: 15px 0;
  cursor: pointer;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .mm-cta {
  margin-top: 18px;
  background: var(--accent); color: #fff; text-align: center; padding: 16px;
}
.mobile-menu .mm-cta:hover { background: var(--accent-dark); color: #fff; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--paper-2);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;   /* keep the roller in frame as the crop tightens */
}
/* Poster sits underneath and NEVER unmounts: if the video never reaches
   'playing' (iOS autoplay refusal, decode stall, missing file), the hero
   still looks finished. */
.hero-media video { opacity: 0; transition: opacity 0.9s ease; }
.hero-media video.ready { opacity: 1; }

/* No scrim. House rule is clear, untinted full-bleed media — a white wash
   over the whole frame is what made this read washed-out and bland. The clip
   is deliberately chosen so the copy zone measures ~174 luma, which puts
   near-black type at ~8:1 against it: legible with nothing on top.
   Kept as an element (not deleted) only as a hairline lift at the very top,
   so the nav's dark links never collide with a passing dark roller. */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 16%);
}

.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: calc(var(--nav-h) + 30px) var(--gutter) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 500px);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.hero-text { max-width: 720px; }
/* No glow. It was papering over a contrast problem instead of solving it:
   measured, the copy zone of the clip swings from ~152 luma down to 28 as the
   brush and gloved hand track through it, and no fixed ink colour survives that
   range. The real fix is upstream — the mobile crop is biased to the painted
   left of the frame (avg 183, darkest 77 vs 113/23 in the centre), so the copy
   sits on consistently light paint and plain black reads on its own. */
.hero-text { color: #000; }
.hero-brand { display: inline-block; margin-bottom: 22px; cursor: pointer; }
.hero-brand img {
  height: 184px;          /* 4x the old 46px nav mark */
  width: auto;
  filter: drop-shadow(0 6px 26px rgba(255, 255, 255, 0.7));
}

/* Red TEXT can't work here: against this clip the brand red manages ~2.6:1,
   and darkening it far enough to pass stops looking like the brand. A solid
   chip keeps the red, and white-on-red is 4.9:1 regardless of what's behind. */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #fff;
  background: var(--accent);
  padding: 7px 15px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(20, 16, 14, 0.22);
}
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.93;
  color: #000;
  font-size: clamp(46px, 7.4vw, 108px);
}
.hero-sub {
  margin-top: 24px;
  max-width: 52ch;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
}
/* The site's red button vanishes against a red wall — the hero gets a white
   one. Same shape, inverted. */

.hero-ctas { margin-top: 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.hero-pills {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.hero-pills li {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #000;
}
.hero-pills svg { width: 17px; height: 17px; flex: none; color: var(--accent); }

/* ---------- Yelp badge ---------- */
.yelp-badge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 30px;
  padding: 10px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 16, 14, 0.22);
  text-shadow: none;     /* never inherit the hero's halo */
}
.yelp-badge .y-logo { width: 34px; height: 34px; flex: none; }
.yelp-badge .y-divider { width: 1px; height: 38px; background: rgba(20, 16, 14, 0.12); flex: none; }
.yelp-badge .y-meta { display: flex; flex-direction: column; gap: 3px; }
.yelp-badge .y-row { display: flex; align-items: center; gap: 8px; }
.yelp-badge .y-stars { height: 18px; width: 100px; }
.yelp-badge .y-rating { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; }
.yelp-badge .y-sub { font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* ---------- Quote panel ---------- */
.quote-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 28px 70px -28px rgba(20, 16, 14, 0.32);
  padding: clamp(24px, 2.4vw, 34px);
}
.quote-title {
  font-family: var(--display);
  font-size: 30px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-display);
  line-height: 1.05; color: var(--ink);
}
.quote-sub { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
#quoteForm { margin-top: 22px; }
.q-label {
  display: block;
  font-family: var(--display);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
  margin: 14px 0 6px;
}
.q-opt { color: var(--ink-3); font-weight: 500; letter-spacing: 0.06em; }
.q-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 16px;               /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.q-input:hover { border-color: #cdc6bb; }
.q-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(215, 38, 61, 0.14);
}
.q-input[aria-invalid="true"] { border-color: var(--accent); background: #fdf5f6; }
.q-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2314100e' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.q-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.q-submit { width: 100%; margin-top: 20px; }
.q-note { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-3); }
.q-note.is-error { color: var(--accent); font-weight: 600; }
.q-note.is-ok { color: var(--green); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.cf-turnstile { margin-top: 18px; display: flex; justify-content: center; }
.q-done {
  padding: 22px 0;
  font-size: 17px;
  color: var(--ink);
}
.q-done strong { color: var(--green); }

/* ---------- Brush band: a separator that CARRIES copy ----------
   The trust points and the stats don't get their own sections any more —
   they're painted straight onto a stroke, which does the separating.
   Solid ink rather than the rainbow: white type needs one consistent ground,
   and on the rainbow it would hit the yellow (luma ~200) and disappear. */
.brush-band {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: clamp(132px, 13vw, 178px);
  /* No background, and pulled into BOTH neighbours, so the stroke lies across
     the seam instead of sitting in a lane of its own. The sections either side
     have far more padding than this, so it lands on their margins, not their
     copy. */
  background: none;
  margin-block: clamp(-64px, -5vw, -40px);
  overflow: hidden;   /* the art is 132-138% wide on purpose — clip the excess */
  pointer-events: none;
}
.brush-band a, .brush-band .yelp-badge { pointer-events: auto; }
/* SIZING RULE — measured off the artwork's alpha, don't guess:
   the stroke is only >85% opaque between 19% and 80% of its own height, so
   just the middle ~61% is solid paint. Any copy laid on it must fit inside
   that, i.e. art height >= content height / 0.61. Undersize it and the text
   drifts onto the frayed bristle and turns unreadable. */
.brush-band-art {
  position: absolute;
  top: 50%;
  /* The artwork is only opaque from 2.3% to 85.3% of its own width — the right
     end is frayed bristle. Oversized and pulled left so that solid core spans
     the whole viewport, otherwise the last item would sit on bare paper. */
  left: -4%;
  width: 132%;
  height: clamp(126px, 12.4vw, 168px);
  transform: translateY(-50%);
  background-image: url("img/brush-ink.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.brush-band--flip .brush-band-art { transform: translateY(-50%) scaleX(-1); }
.brush-band--wide { min-height: clamp(158px, 15vw, 212px); }
.brush-band--wide .brush-band-art {
  height: clamp(152px, 14.6vw, 202px);
  left: -7%; width: 138%;
}

/* badge + marks laid across the stroke.
   Qualified with .brush-band-inner because that rule is defined later at equal
   specificity and would otherwise keep its 4-column grid. */
.brush-band-inner.bb-inner--badge {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.6vw, 44px);
  flex-wrap: wrap;
}
.bb-marks {
  display: flex; align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  flex-wrap: wrap; justify-content: center;
}
.bb-marks li {
  position: relative;
  font-family: var(--display);
  font-size: clamp(13px, 1.05vw, 16px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff;
  padding-left: 22px;
}
.bb-marks li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%;
  background: var(--rainbow);
  background-size: 400% 100%;
}
.bb-marks li:nth-child(1)::before { background-position: 0% 0; }
.bb-marks li:nth-child(2)::before { background-position: 50% 0; }
.bb-marks li:nth-child(3)::before { background-position: 100% 0; }
.brush-band-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bb-item {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--display);
  font-size: clamp(14px, 1.15vw, 17px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}
.bb-item svg { width: 22px; height: 22px; flex: none; color: #fff; }
.bb-stat { text-align: center; }
.bb-value {
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: 700; line-height: 1;
  color: #fff;
}
.bb-value span { color: var(--sc, #fff); }
.bb-stat:nth-child(1) { --sc: #ff5c6e; }
.bb-stat:nth-child(2) { --sc: var(--orange); }
.bb-stat:nth-child(3) { --sc: #fff; }
.bb-stat:nth-child(4) { --sc: var(--yellow); }
.bb-label {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(12px, 0.95vw, 14px); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- TRUST STRIP ---------- */
.trust { background: var(--paper); }
/* the strokes above and below now bleed INTO this strip — give them somewhere
   to land that isn't the text */
.trust-inner { padding-block: clamp(52px, 5vw, 72px); }
.trust-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 26px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--display);
  font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink);
  text-align: center;
}
.trust-item svg { width: 22px; height: 22px; flex: none; color: var(--accent); }

/* ---------- SERVICES ---------- */
.services { padding: clamp(64px, 8vw, 120px) 0; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 30px);
}
/* Each card gets its own band off the brand rainbow — nine swatches in a row.
   This is where most of the page's colour lives now; a grid of white cards on
   white paper was the single biggest reason it read bland. */
.service-card:nth-child(9n+1) { --ca: var(--red); }
.service-card:nth-child(9n+2) { --ca: var(--orange); }
.service-card:nth-child(9n+3) { --ca: var(--yellow); }
.service-card:nth-child(9n+4) { --ca: var(--green); }
.service-card:nth-child(9n+5) { --ca: var(--blue); }
.service-card:nth-child(9n+6) { --ca: var(--purple); }
.service-card:nth-child(9n+7) { --ca: var(--red); }
.service-card:nth-child(9n+8) { --ca: var(--orange); }
.service-card:nth-child(9n+9) { --ca: var(--green); }

.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--ca, var(--accent));
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover {
  border-color: #cdc6bb;
  border-top-color: var(--ca, var(--accent));
  box-shadow: 0 22px 48px -26px rgba(20, 16, 14, 0.34);
}

/* Collapsed: 6 on desktop / tablet, 3 on mobile. Nine cards with no cut-off
   is more scrolling than anyone will do before the CTA. */
.service-grid[data-collapsed="true"] .service-card:nth-child(n+7) { display: none; }

.more-wrap { display: flex; justify-content: center; margin-top: clamp(30px, 3.6vw, 48px); }
.more-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 14px 34px;
  font-family: var(--display);
  font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
  border: 1px solid rgba(20, 16, 14, 0.45);
  cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}
.more-btn:hover, .more-btn:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); }
.more-chev {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.28s ease;
}
.more-btn[aria-expanded="true"] .more-chev { transform: translateY(1px) rotate(-135deg); }
.service-media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.service-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-media img { transform: scale(1.045); }
.service-body { padding: clamp(20px, 1.8vw, 28px); }
.num {
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--ca, var(--accent));   /* matches the card's band */
  margin-bottom: 8px;
}
.service-body h3 { margin-bottom: 10px; }
.service-body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- ABOUT (full-bleed scenic panel) ---------- */
.about {
  position: relative;
  min-height: clamp(560px, 78vh, 800px);
  display: flex; align-items: center;
  overflow: hidden;
}
.about-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The panel is a warm golden room — lift the left toward white so near-black
   type stays legible without dimming the colour the section is selling. */
/* No scrim, no fade — the photo stays full-bleed and completely clear.
   A halo alone couldn't carry the copy (the image has a dark pillar running
   right through the text column), so the copy sits on its own solid card
   instead. The card is a discrete element, not a wash: the photograph is
   untouched everywhere around it. */
.about-scrim { display: none; }
.about-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) var(--gutter);
}
.about-content {
  max-width: 660px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  box-shadow: 0 30px 80px -30px rgba(20, 16, 14, 0.45);
  padding: clamp(28px, 3vw, 44px);
}
.about-content > * { max-width: 100%; }
/* The heading carries its own <br>; a 640px cap re-wrapped it into a ragged
   three lines ("MEET BRIAN — WHO / SHOWS / UP TO EVERY JOB"). */

.about-quote {
  margin-top: 26px;
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  font-size: 18px; line-height: 1.7; color: var(--ink-2);
}
.about-attrib {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
}
.about-points { margin-top: 26px; display: grid; gap: 11px; }
.about-points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 16.5px; color: var(--ink-2);
}
.about-points svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--green); }
.about-content .ghost-btn { margin-top: 32px; }

/* ---------- STATS ---------- */
.stats { background: var(--paper); padding: clamp(64px, 7vw, 96px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat { text-align: center; }
.stat-value {
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 700; line-height: 1;
  color: var(--sc, var(--ink));
  letter-spacing: -0.01em;
}
.stat-value span { color: var(--sc, var(--accent)); }
/* Four numbers, four bands of the rainbow — more of the brand, less white. */
.stat:nth-child(1) { --sc: var(--red); }
.stat:nth-child(2) { --sc: var(--orange); }
.stat:nth-child(3) { --sc: var(--green); }
.stat:nth-child(4) { --sc: var(--blue); }
.stat-label { color: var(--ink-3); }
.stat-label {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink-3);
}

/* ---------- GALLERY ---------- */
.gallery { padding: clamp(64px, 8vw, 120px) 0; }
.gallery-tile {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
}
.gallery-tile { height: 100%; }
.gallery-tile img {
  width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-tile:hover img { transform: scale(1.05); }
.gallery-tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 18px 14px;
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: #fff;
  background: linear-gradient(180deg, rgba(20,16,14,0) 0%, rgba(20,16,14,0.82) 62%);
}

/* ---------- Carousel (Our Work + Reviews) ----------
   Native scroll-snap does the work: it stays usable with JS off, keeps
   momentum scrolling on touch, and the arrows/dots are progressive
   enhancement that site.js reveals only once it can drive them. */
.carousel { position: relative; }
.car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(14px, 1.6vw, 24px)) / 3);
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }

.car-nav {
  position: absolute; top: 50%; z-index: 2;
  width: 52px; height: 52px;
  display: none;                 /* revealed by site.js */
  align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(20, 16, 14, 0.22);
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carousel.is-ready .car-nav { display: inline-flex; }
.car-nav:hover, .car-nav:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); }
.car-nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.car-nav[disabled]:hover { background: #fff; color: var(--ink); border-color: var(--line); }
.car-prev { left: calc(-1 * clamp(12px, 2vw, 26px)); }
.car-next { right: calc(-1 * clamp(12px, 2vw, 26px)); }
.car-nav svg { width: 22px; height: 22px; }

.car-dots { display: none; justify-content: center; gap: 9px; margin-top: 26px; }
.carousel.is-ready .car-dots { display: flex; }
.car-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  background: var(--line);
  border: 0; cursor: pointer;
  transition: background-color 0.22s ease, transform 0.22s ease;
}
.car-dot[aria-selected="true"] { background: var(--accent); transform: scale(1.35); }

/* ---------- REVIEWS ---------- */
.reviews { background: var(--paper); padding: clamp(64px, 8vw, 120px) 0; }
.review {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: clamp(22px, 2vw, 30px);
  height: 100%;
  display: flex; flex-direction: column;
}
.review blockquote { flex: 1; }
/* The two long ones lead; the rest fill the row. */

.stars { display: flex; gap: 3px; color: var(--yellow); margin-bottom: 14px; }
.stars svg { width: 17px; height: 17px; }
.review blockquote { font-size: 16px; line-height: 1.68; color: var(--ink-2); }
.who { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.who-name {
  font-family: var(--display);
  font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink);
}
.who-meta { font-size: 14px; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { padding: clamp(64px, 8vw, 120px) 0; }
.faq-list { max-width: 940px; }
.faq-item + .faq-item::before,
.footer-bottom::before,
.mobile-menu a + a:not(.mm-cta)::before {
  content: '';
  display: block;
  width: 100%;
  height: 14px;
  background-image: url("img/brush-line.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.42;
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--accent); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after {
  content: ''; position: absolute; background: var(--accent);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.plus::before { inset: 7px 0; height: 2px; }
.plus::after  { inset: 0 7px; width: 2px; }
.faq-q[aria-expanded="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-a p { padding: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 72ch; }

/* ---------- CTA BAND (background video) ---------- */
.cta-band {
  position: relative;
  min-height: clamp(520px, 76vh, 760px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--paper-2);
  text-align: center;
}
.cta-band video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Clear video — no wash. The paint flow runs red through yellow, so no flat
   text colour can hold 4.5:1 against all of it. Rather than tint the video,
   the copy carries its own contrast in a soft dark shadow (the same trick the
   Summit template uses to keep labels legible over media). Only a whisper of
   a vignette at the very edges, to seat the type. */
/* Clear video, no wash. The swirl holds ~200 luma across the whole loop, so
   near-black copy sits on it at ~9:1 with nothing on top. */
.cta-scrim { display: none; }
.cta-content .label,
.cta-content .display,
.cta-sub {
  text-shadow:
    0 0 26px rgba(255, 255, 255, 0.9),
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 3px  rgba(255, 255, 255, 0.8);
}
.cta-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 940px; margin: 0 auto;
  padding: clamp(60px, 7vw, 100px) var(--gutter);
  text-align: center;
}
/* Red text on this clip manages ~2.6:1 — same chip treatment as the hero. */
.cta-content .label {
  display: inline-block;
  color: #fff;
  background: var(--accent);
  padding: 7px 15px;
  letter-spacing: 0.14em;
  text-shadow: none;
  box-shadow: 0 8px 24px rgba(20, 16, 14, 0.22);
}
.cta-content .display { color: var(--ink); }
.cta-sub { margin: 24px auto 0; max-width: 52ch; color: var(--ink-2); }
.cta-ctas { justify-content: center; margin-top: 36px; }
/* Solid ink outline on the swirl — the paper-coloured ghost button would vanish. */
.cta-band .ghost-btn { border-color: var(--ink); background: rgba(255,255,255,0.75); }
.cta-band .ghost-btn:hover, .cta-band .ghost-btn:focus-visible {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ---------- FOOTER ----------
   House rule: never a perfectly flat dark solid across a full-width
   section — the display pipeline dithers it into a visible diagonal.
   Two-stop gradient + fractal-noise overlay gives it no flat field. */
.footer {
  position: relative;
  background: linear-gradient(180deg, #14100e 0%, #0d0a09 100%);
  color: #fff;
  overflow: hidden;
}
.noise-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
/* mix-blend compositing is a mobile-GPU hotspot and the dither it masks is a
   desktop display-pipeline artifact — phones get cheap plain-opacity noise. */
@media (max-width: 768px) {
  .noise-overlay { mix-blend-mode: normal; opacity: 0.02; }
}
.footer-inner {
  position: relative; z-index: 1;
  max-width: var(--page-max); margin: 0 auto;
  padding: clamp(54px, 6vw, 84px) var(--gutter) 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 52px);
}
.footer-brand img { height: 62px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: 15px; line-height: 1.7; color: #b8b0a9; max-width: 42ch; }
.footer h4 {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: #fff;
  margin-bottom: 14px;
}
.footer ul { display: grid; gap: 9px; }
.footer li a, .footer li span { font-size: 15px; color: #b8b0a9; transition: color 0.2s ease; }
.footer li a { cursor: pointer; }
.footer li a:hover, .footer li a:focus-visible { color: #fff; }
.footer-bottom {
  position: relative;
  margin-top: clamp(38px, 4vw, 58px);
  padding-top: 22px;
  flex-direction: row;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: #8b837c;
}

/* ---------- MOBILE FLOATING CTAs ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-cta);
  display: none;                 /* enabled on mobile via media query */
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: none;              /* NO bar/panel behind the buttons */
  pointer-events: none;          /* container is click-through */
  transform: translateY(140%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  pointer-events: auto;
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px;
  border-radius: 13px;
  font-family: var(--display);
  font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  box-shadow: 0 10px 28px rgba(20, 16, 14, 0.4);
  cursor: pointer;
}
.mobile-cta svg { width: 18px; height: 18px; flex: none; }
.mc-call {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  border: 1px solid rgba(20, 16, 14, 0.18);
}
.mc-book { background: var(--accent); color: #fff; border: 1px solid var(--accent); }

/* ============================================================
   RESPONSIVE — verified at 1440 / 1024 / 768 / 375
   ============================================================ */
@media (max-width: 1080px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(44px, 7vw, 74px); }
  /* Stacked hero. The clip stays INSIDE the hero as the backdrop to the copy —
     it is not a strip sitting above it. It can't simply fill the whole hero the
     way it does on desktop: stacked, the hero runs ~1500px tall and an
     absolutely-positioned 16:9 clip covering that shows a ~15%-wide vertical
     sliver of itself, which is unreadable as an action shot. So it's bounded to
     exactly the copy block (site.js measures it into --media-h) and the form
     sits below it on paper. */
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 44px;
    background: var(--paper);
  }
  .hero-media {
    inset: auto;              /* the base rule's inset:0 is desktop-only */
    top: 0; left: 0; right: 0;
    height: var(--media-h, 62svh);
  }
  .hero-scrim {
    display: block;
    inset: auto; top: 0; left: 0; right: 0;
    height: var(--media-h, 62svh);
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 26%);
  }
  .hero-inner { display: block; padding: 0 var(--gutter); }
  .hero-text { padding-block: clamp(26px, 5vw, 42px); }
  /* Portrait shows only ~34% of the frame. Centre it and the copy lands on the
     moving brush (avg 113 luma, darkest 23). Biased left it lands on the fresh
     white paint (avg 183, darkest 77) and plain black holds up unaided. */
  .hero-media img, .hero-media video { object-position: 6% 50%; }
  .hero-title { font-size: clamp(40px, 11vw, 62px); }
  .hero-sub { font-size: 17px; max-width: 44ch; }
  .hero-eyebrow { font-size: 14px; }
  /* the badge row wraps once the viewport tightens — stack it deliberately and
     grow the stroke to match, rather than letting it spill off the paint */
  .brush-band-inner.bb-inner--badge { flex-direction: column; gap: 16px; }
  .brush-band--wide { min-height: 250px; }
  .brush-band--wide .brush-band-art { height: 242px; width: 165%; left: -18%; }
  .quote-panel { margin-top: 26px; }
  .yelp-badge { box-shadow: 0 10px 30px rgba(20,16,14,0.28); }
  .quote-panel { max-width: 640px; }
  .hero-brand img { height: 128px; }
  .car-track { grid-auto-columns: calc((100% - clamp(14px, 1.6vw, 24px)) / 2); }
  .car-prev { left: 6px; }
  .car-next { right: 6px; }
  .about-scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.82) 55%, rgba(255,255,255,0.5) 100%);
  }
}

@media (max-width: 900px) {
  :root { --nav-h: 76px; }
  /* 4 across at 390px is ~85px a column — the labels shred. 2x2, and the
     stroke grows to stay behind them. */
  .brush-band-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
  /* 2x2 stats measure ~122px of copy; at the old 170px art the usable band was
     0.61*170 = 104px, so the values sat on frayed bristle. 248/240 gives 146px
     of solid paint to land in. */
  .brush-band { min-height: 248px; }
  .brush-band-art { height: 240px; width: 150%; left: -12%; }
  .bb-item { font-size: 13px; gap: 8px; }
  .bb-item svg { width: 18px; height: 18px; }
  /* the badge row stacks; the stroke has to grow to stay behind all of it */
  .bb-marks { gap: 8px 16px; }
  .bb-marks li { font-size: 12px; padding-left: 17px; }
  .bb-marks li::before { width: 7px; height: 7px; margin-top: -3px; }
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .nav-brand img { height: 58px; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .mobile-cta { display: flex; }
}

@media (max-width: 680px) {
  :root { --nav-h: 70px; }
  .bb-value { font-size: 30px; }
  .bb-label { font-size: 11px; }
  /* At 390 the three marks each take their own row: 150px of copy against the
     149px of solid paint the 242px art offered, so the last one fell off the
     bottom edge. 292 * 0.61 = 178px of usable band. */
  .brush-band--wide { min-height: 300px; }
  .brush-band--wide .brush-band-art { height: 292px; width: 170%; left: -20%; }
  .nav-brand img { height: 52px; }
  .service-grid { grid-template-columns: 1fr; }
  /* One column: three cards is already a long scroll on a phone. */
  .service-grid[data-collapsed="true"] .service-card:nth-child(n+4) { display: none; }
  /* One card per swipe. */
  .car-track { grid-auto-columns: 100%; }
  .car-nav { display: none !important; }   /* swipe instead; dots still show */
  .hero-brand img { height: 104px; }
  .hero-brand { margin-bottom: 16px; }
  .yelp-badge { padding: 9px 14px; gap: 10px; }
  .yelp-badge .y-sub { font-size: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .hero-ctas { gap: 16px; }
  .hero-ctas .solid-btn { width: 100%; }
  .cta-ctas .solid-btn { width: 100%; }
  .gallery-tile img { aspect-ratio: 4 / 3; }
  /* Clear the floating call/quote bar. */
  .footer-inner { padding-bottom: 84px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media video { display: none; }   /* poster carries the hero */
}

/* The footer stroke sits on near-black, so it needs the light artwork, and it
   has to span the flex row rather than become a flex item. */
.footer-bottom::before {
  position: absolute; top: 0; left: 0;
  filter: invert(1) brightness(2);
  opacity: 0.3;
}
.mobile-menu a { position: relative; }
.mobile-menu a + a:not(.mm-cta)::before { position: absolute; top: 0; left: 0; }
.faq-item + .faq-item::before { margin: 0 0 4px; }