/*
  Cape Luxury Mobile Detailing — main.css
  ---------------------------------------------------------------------------
  Single-file design system for Wave 1 (home page + shared chrome).
  Sectioned with banner comments so this can be split into modules later
  (tokens.css, base.css, header.css, footer.css, components/*.css, etc.)

  Table of contents:
    1.  Tokens
    2.  Reset / base
    3.  Typography
    4.  Layout utilities
    5.  Skip link + focus
    6.  Header / nav (utility strip, primary nav, sticky compaction)
    7.  Mobile menu overlay
    8.  Footer
    9.  Buttons
    10. Placeholder pattern (.ph)
    11. Section headers / hairlines / eyebrow
    12. Floating CTA card
    13. Before / after slider
    14. Hero
    15. Trust strip
    16. What-we-do asymmetric layout
    17. Gallery preview grid
    18. Testimonials
    19. Service-area teaser
    20. Closing CTA band
    21. Tick-strip texture
    22. Scroll-reveal utility
    23. Reduced motion
  ---------------------------------------------------------------------------
*/

/* ══════════════════════════════ 1. TOKENS ══════════════════════════════ */

:root {
  /* Ground / surfaces */
  --ink-900: #08080A;
  --ink-800: #0E0F11;
  --ink-700: #16181B;
  --ink-600: #202327;
  --line:    #2A2E33;

  /* Text */
  --fog-400: #A9AFB7;
  --fog-200: #E3E6EA;
  --white:   #FFFFFF;

  /* Accent — burnt orange, used sparingly */
  --red-500: #C1121F;
  --red-400: #E5383B;
  --red-900: #3A0A0E;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Radius */
  --r-0: 0;
  --r-lg: 14px;

  /* Shadow — one soft ambient shadow, floating CTA card only */
  --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Type */
  --font-display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Layout */
  --container-w: 1360px;
  --edge: clamp(20px, 5vw, 64px);
  --header-h-compact: 60px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Sticky header height, subtracted from the hero so a full-viewport hero
     actually ends at the fold instead of 85-120px past it. */
  --header-h: 86px;
  /* Full sticky-header height, used to offset the hero and sticky panels.
     Kept separate from --header-h, which sizes .nav-main itself — writing a
     measured height back into that one makes the header grow on every load.
     js/main.js overwrites this with the real measured value. */
  --header-offset: 86px;

  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;
}

/* ═══════════════════════════ 2. RESET / BASE ═══════════════════════════ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--fog-200);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

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

/* ══════════════════════════════ 3. TYPOGRAPHY ══════════════════════════ */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1.02;
}

h1 { font-size: clamp(2.4rem, 5vw + 1rem, 5.5rem); }
h2 { font-size: clamp(1.9rem, 3vw + 1rem, 3.4rem); }
/* h3 sits a step down in weight, not just size — the one deliberate use of the
   Chivo 700 face (vs. 900 everywhere else) so both loaded display weights earn
   their place instead of 700 sitting in the font file unused. */
h3 { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); font-weight: 700; }

.lede {
  font-weight: 300;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.35rem);
  line-height: 1.5;
  color: var(--fog-200);
  max-width: 42ch;
}

p { max-width: 68ch; }

p.wide { max-width: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  /* DM Mono runs wider than Space Mono — 0.18em tracking pushed short
     eyebrows too close to wrapping/crowding the next element. */
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fog-400);
}

.eyebrow--accent { color: var(--red-400); }

.mono { font-family: var(--font-mono); }

/* ═══════════════════════════ 4. LAYOUT UTILITIES ═══════════════════════ */

.wrap {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }

@media (max-width: 640px) {
  .section { padding-block: var(--s-7); }
}

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.hairline-v { border-left: 1px solid var(--line); }

.grid { display: grid; gap: var(--s-5); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════ 5. SKIP LINK + FOCUS ═══════════════════════ */

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--s-4);
  z-index: 200;
  background: var(--red-500);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: var(--s-4);
}

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

/* ══════════════════ 6. HEADER / NAV ══════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}

.header-strip {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  transition: padding-block var(--dur-med) var(--ease);
}

@media (min-width: 900px) {
  .header-strip { display: flex; }
  :root { --header-offset: 156px; }
}

.header-strip__row {
  display: flex;
  align-items: center;
  /* Social links are the only occupant now that the location/clock strip is
     gone, so keep them on the right rather than sliding to the left edge. */
  justify-content: flex-end;
  width: 100%;
}

.header-strip__social { display: flex; gap: var(--s-4); }
.header-strip__social a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-400);
  transition: color var(--dur-fast) var(--ease);
}
.header-strip__social a:hover { color: var(--red-400); }

.nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
  min-height: var(--header-h);
  transition: min-height var(--dur-med) var(--ease),
              padding-block var(--dur-med) var(--ease);
}

.site-header.is-compact .nav-main {
  min-height: var(--header-h-compact);
  padding-block: var(--s-3);
}

.site-header.is-compact .header-strip { padding-block: var(--s-1); }

/* Header brand: the emblem logo (white-on-transparent artwork, sized for the
   dark ground). The text .wordmark below is still used in the footer. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand-logo img {
  display: block;
  height: 88px;
  width: auto;
  transition: height var(--dur-med) var(--ease);
}

.site-header.is-compact .brand-logo img { height: 58px; }

@media (max-width: 639px) {
  .brand-logo img { height: 60px; }
  .site-header.is-compact .brand-logo img { height: 46px; }
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.wordmark sup {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fog-400);
  top: -0.7em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--s-6);
  margin-left: auto;
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

.nav-links a {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-200);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--red-400);
  transition: right var(--dur-med) var(--ease);
}

.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { right: 0; }

.nav-links a[aria-current="page"] { color: var(--white); }
.nav-links a[aria-current="page"]::after { right: 0; }

.nav-cluster { display: flex; align-items: center; gap: var(--s-5); }

@media (min-width: 900px) {
  .nav-cluster { margin-left: var(--s-8); }
}

/* Between 900 and 1180 the row is tight enough that the full gaps would force
   a wrap, which is the failure this is fixing. Tightening the link spacing
   buys that room without dropping anything from the header. */
@media (min-width: 900px) and (max-width: 1180px) {
  .nav-links { gap: var(--s-4); }
  .nav-cluster { margin-left: var(--s-6); }
}

.nav-cluster .nav-cta {
  display: none;
}

@media (min-width: 900px) {
  .nav-cluster .nav-cta { display: inline-flex; }
}

/* Click-to-call stays visible below 900px, unlike nav-cta and nav-links,
   because a phone call is the single highest-intent action available to a
   local mobile-detailing business and it would otherwise be stranded two
   taps deep inside the menu overlay. Icon-only below 900px keeps it from
   crowding the hamburger; the number itself only prints once nav-cta has
   room to sit next to it. */
.nav-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--fog-200);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav-phone:hover { border-color: var(--red-400); color: var(--white); }

.nav-phone__icon { flex: none; }

.nav-phone__number { display: none; }

/* The SMS link reuses .nav-phone outright: same 44px square below 1080px, same
   labelled pill above it. Texting converts better than calling for a lot of
   people, so it sits beside the number rather than inside the menu. */
.nav-phone--text { margin-left: calc(var(--s-3) * -1); }

/* 1080, not 900. Between 900 and 1080 the five nav links return, and the
   printed number plus Book now pushed the cluster past the right edge and
   clipped the CTA. The icon-only square keeps both actions on screen. */
@media (min-width: 1080px) {
  .nav-phone {
    width: auto;
    height: auto;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .nav-phone__number { display: inline; white-space: nowrap; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fog-200);
}

@media (min-width: 900px) {
  .menu-toggle { display: none; }
}

.menu-toggle__bars {
  width: 22px;
  height: 14px;
  position: relative;
}

.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}

.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  top: 6px; transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  top: 6px; transform: rotate(-45deg);
}

/* ══════════════════ 7. MOBILE MENU OVERLAY ══════════════════ */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-5) var(--edge) var(--s-7);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease);
}

.menu-overlay.is-open { transform: translateY(0); }

/* .menu-overlay's own `display: flex` (needed for the open state) would otherwise
   beat the native [hidden] UA style at equal specificity — force it explicitly. */
.menu-overlay[hidden] { display: none; }

.menu-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-overlay__close {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fog-200);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.menu-overlay__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-7);
}

.menu-overlay__links a {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  color: var(--white);
  line-height: 1.15;
  display: inline-block;
}

.menu-overlay__links a span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red-400);
  vertical-align: super;
  margin-left: 6px;
}

.menu-overlay__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fog-400);
}

.menu-overlay__foot a { color: var(--fog-200); }

/* ══════════════════════════════ 8. FOOTER ══════════════════════════════ */

.site-footer {
  background: var(--ink-800);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-9);
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: var(--s-6);
  }
}

.footer-brand .wordmark { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: var(--s-4); }

.footer-brand p { color: var(--fog-400); }

.footer-col h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
  margin-bottom: var(--s-4);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); }

.footer-col a {
  color: var(--fog-200);
  font-size: 15px;
  transition: color var(--dur-fast) var(--ease);
}

.footer-col a:hover { color: var(--red-400); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fog-400);
}

/* ══════════════════════════════ 9. BUTTONS ══════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  /* DM Mono is wider than Space Mono — 0.12em tracking was crowding longer
     button labels ("Request a quote", "Book your detail") against the arrow
     icon. Tightened across every .btn instance. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}

/* In-flight state. The button stays disabled for the whole request so a
   double-click cannot submit twice; this is what makes that readable rather
   than looking broken. The label is swapped by JS, and the arrow is dropped
   because nothing is being navigated to yet. */
.btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.btn.is-sending .btn__arrow {
  opacity: 0;
}


.btn:hover { border-color: var(--fog-400); }

.btn--primary {
  background: var(--red-500);
  border-color: var(--red-500);
  color: var(--white);
}

.btn--primary:hover { background: var(--red-400); border-color: var(--red-400); }

.btn--ghost { border-color: var(--line); color: var(--fog-200); }

.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.text-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-200);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.text-link:hover { color: var(--red-400); border-color: var(--red-400); }

/* ══════════════════ 10. PLACEHOLDER PATTERN (.ph) ══════════════════ */

.ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  background: var(--ink-600);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-4);
  overflow: hidden;
}

.ph__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog-400);
}

.ph__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #767C83;
  max-width: 34ch;
  line-height: 1.5;
}

/* Real-image swap path: drop an <img> inside .ph (or swap the whole figure) and it fills. */
.ph > img,
.ph > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A filled slot: same box the grey placeholder occupied, now holding a photo.
   Standalone (does not rely on .ph) so swapped markup keeps its own sizing. */
.ph--filled {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  margin: 0;
  overflow: hidden;
  background: var(--ink-700);
}

.ph--filled img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph--filled .ph__label,
.ph--filled .ph__note { display: none; }

/* Hero placeholder: single line pinned bottom-left, never centred over the logotype. */
.ph--hero {
  position: absolute;
  inset: 0;
  /* Above .hero__gradient (z-index 1), which bottoms out near-opaque and was
     burying this label — it is the shot-list note for the video that goes here. */
  z-index: 2;
  border: 0;
  aspect-ratio: auto;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: var(--s-5) var(--edge);
}

/* ══════════════ 11. SECTION HEADERS / HAIRLINES / EYEBROW ══════════════ */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.section-head__index {
  font-family: var(--font-mono);
  font-size: 12px;
  /* DM Mono's wider glyphs made 0.18em push long indices ("03 / What people
     say") close to wrapping on narrow measures — tightened. */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-400);
  display: block;
  margin-bottom: var(--s-3);
}

.section-head h2 { max-width: 16ch; }

.section-head__aside {
  max-width: 34ch;
  color: var(--fog-400);
  font-size: 15px;
}

/* ══════════════════════ 12. FLOATING CTA CARD ══════════════════════ */

.cta-float {
  position: absolute;
  right: var(--edge);
  bottom: var(--s-7);
  z-index: 20;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: var(--s-5);
  max-width: 240px;
  display: none;
}

@media (min-width: 640px) {
  .cta-float { display: block; }
}

.cta-float p {
  font-size: 13px;
  color: var(--fog-200);
  margin-bottom: var(--s-4);
}

.cta-float__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.cta-float__link svg { transition: transform var(--dur-fast) var(--ease); flex: none; }
.cta-float__link:hover svg { transform: translate(3px, -3px); }
.cta-float__link:hover { color: var(--red-400); }

/* ══════════════════════ 13. BEFORE / AFTER SLIDER ══════════════════════ */

.ba-slider {
  position: relative;
  width: 100%;
  /* Deliberately not full-bleed: it reads better as a contained panel. */
  max-width: 620px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  touch-action: none;
  user-select: none;
  background: var(--ink-600);
}

.ba-slider__layer {
  position: absolute;
  inset: 0;
}

.ba-slider__layer .ph { border: 0; height: 100%; aspect-ratio: auto; }

.ba-slider__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Keep placeholder labels clear of the moving divider so they never overlap. */
.ba-slider__before .ph { align-items: flex-start; text-align: left; padding-left: var(--s-6); padding-right: var(--s-8); }
.ba-slider__after .ph { align-items: flex-end; text-align: right; padding-right: var(--s-6); padding-left: var(--s-8); }
.ba-slider__before .ph__note,
.ba-slider__after .ph__note { max-width: 20ch; }

/* Mobile: the notes collide across the divider, and 16/10 is too short for the one showpiece. */
@media (max-width: 639px) {
  .ba-slider { aspect-ratio: 4 / 3; }
  .ba-slider .ph__note { display: none; }
}

.ba-slider__after { z-index: 1; }

.ba-slider__before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.ba-slider__tag {
  position: absolute;
  top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-200);
  background: rgba(8, 8, 10, 0.7);
  padding: 4px 10px;
  z-index: 3;
}

.ba-slider__tag--before { left: var(--s-3); }
.ba-slider__tag--after { right: var(--s-3); }

.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 0;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}

.ba-slider__handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--white);
  transform: translateX(-50%);
}

.ba-slider__grip {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.ba-slider__grip span {
  width: 1px; height: 12px;
  background: var(--ink-900);
}

.ba-slider__handle:focus-visible .ba-slider__grip {
  outline: 2px solid var(--red-400);
  outline-offset: 3px;
}

/* ══════════════════════════════ 14. HERO ══════════════════════════════ */

.hero {
  position: relative;
  min-height: min(calc(100svh - var(--header-offset)), 920px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The footage is bright daylight, so knock it back before the scrim goes on top. */
.hero__video {
  filter: brightness(0.62) saturate(0.92);
}

.hero__video,
.hero__media .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  object-fit: cover;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.42) 55%, rgba(8,8,10,0.12) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.62) 0%, rgba(8,8,10,0.80) 45%, rgba(8,8,10,0.94) 70%, rgba(8,8,10,0.99) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--edge) var(--s-9);
  padding-top: var(--s-10);
}

@media (min-width: 640px) {
  /* Reserve room below the pull quote so the floating CTA card never overlaps it. */
  .hero__content { padding-bottom: calc(var(--s-9) + 150px); }
}

/* Short landscape viewports (e.g. 1280x860): tighten so content never runs past the fold. */
@media (min-width: 640px) and (max-height: 900px) {
  /* Reserve the CTA card height + a gap so the pull quote never collides with it. */
  .hero .hero__content { padding-top: var(--s-5); padding-bottom: calc(var(--s-5) + 150px); }
  .hero .hero__row { margin-top: var(--s-5); }
  .hero .hero__logotype {
    font-size: clamp(2.8rem, calc((100svh - var(--header-offset)) * 0.16), 9.5rem);
  }
  /* MOBILE DETAILING is a third line the pre-rework hero didn't have to budget
     for — shrink it further than its default 0.42em at short viewports so the
     three-line lockup doesn't grow the hero past what the reserved padding
     above expects. */
  .hero .hero__logotype .line--sub { font-size: 0.36em; margin-top: 0.06em; }
  .hero .hero__sublinks { margin-top: var(--s-4); }
  .hero .hero__tagline { margin-top: var(--s-2); font-size: clamp(0.9rem, 1vw + 0.45rem, 1.1rem); }
  .hero .hero__actions { margin-top: var(--s-4); }
  .hero .cta-float { bottom: var(--s-5); }
}

/* Short laptop viewports (1280x700 and friends): there is not enough height for
   the floating card to sit inside the hero AND stay above the fold. Drop it and
   use the inline Book/Call pair instead — same job, no reserved space needed. */
@media (min-width: 640px) and (max-height: 780px) {
  .hero .cta-float { display: none; }
  .hero .hero__actions { display: flex; max-width: 440px; margin-top: var(--s-5); }
  .hero .hero__content { padding-bottom: var(--s-7); }
  .hero .hero__logotype { font-size: clamp(2.6rem, calc((100svh - var(--header-offset)) * 0.17), 9.5rem); }
  .hero .hero__logotype .line--sub { font-size: 0.36em; margin-top: 0.05em; }
}

.hero__logotype {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 0.92;
  font-size: clamp(3.2rem, 15vw, 9.5rem);
  margin: 0;
}

.hero__logotype .line { display: block; }

/* "MOBILE DETAILING" — the rest of the legal name, still heavy (900) but sized
   down off the same custom property as the rest of the lockup via em, so it
   scales in lockstep with CAPE/LUXURY at every clamp tier instead of needing
   its own breakpoints. */
.hero__logotype .line--sub {
  font-size: 0.4em;
  margin-top: 0.1em;
  letter-spacing: -0.02em;
}

.hero__logotype sup {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: 0.08em;
  color: var(--red-400);
  top: -2.2em;
  margin-left: 0.15em;
}

.hero__logotype .line--sub sup {
  font-size: clamp(10px, 2.2vw, 13px);
  top: -1.4em;
}

/* Brand tagline, sits under the logotype and above the category links. */
.hero__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw + 0.5rem, 1.3rem);
  color: var(--fog-200);
  margin-top: var(--s-3);
  max-width: 36ch;
}

.hero__sublinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.hero__sublinks a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.hero__sublinks a:hover { color: var(--white); border-color: var(--red-400); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__actions .btn { flex: 1 1 auto; justify-content: center; }

@media (min-width: 640px) {
  .hero__actions { display: none; }
}

.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: var(--s-9);
  flex-wrap: wrap;
}

.hero__quote {
  max-width: 34ch;
  text-align: right;
  margin-left: auto;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.3rem);
  font-weight: 300;
  color: var(--fog-200);
  line-height: 1.45;
}

.hero__quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
}

@media (max-width: 900px) {
  .hero__quote { text-align: left; margin-left: 0; max-width: 40ch; }
  .hero__row { flex-direction: column; align-items: flex-start; }
}

.hero__scroll-cue {
  position: absolute;
  left: var(--edge);
  bottom: var(--s-5);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
}

@media (min-width: 640px) {
  .hero__scroll-cue { display: flex; }
}

.hero__scroll-cue .line-anim {
  width: 32px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.hero__scroll-cue .line-anim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red-400);
  animation: cue-sweep 2.4s var(--ease) infinite;
}

@keyframes cue-sweep {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ══════════════════════════ 15. TRUST STRIP ══════════════════════════ */

/* ═════════════════ 15a. RECURRING MAINTENANCE SECTION ═════════════════ */

.maintenance {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 900px) {
  .maintenance {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-9);
  }
}

.maintenance__copy p { max-width: 58ch; }

.maintenance__figure { border-color: var(--line); }

/* ══════════════════════════ 15b. INTRO BAND ══════════════════════════ */

.intro-band {
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--line);
}

.intro-band p {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.1vw + 0.75rem, 1.35rem);
  line-height: 1.55;
  color: var(--fog-200);
}

.intro-band strong {
  color: var(--white);
  font-weight: 500;
}

/* ══════════════════ 16. WHAT-WE-DO ASYMMETRIC LAYOUT ══════════════════ */

.services-lockup {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .services-lockup {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
  }
}

.service-feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.service-feature__figure { width: 100%; }

.service-feature__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.service-feature__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--fog-400);
  white-space: nowrap;
}

@media (max-width: 639px) {
  .service-feature__meta { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

.service-feature__price strong {
  color: var(--white);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  margin-right: 4px;
}

.service-feature h3 { max-width: 20ch; }
.service-feature p { color: var(--fog-400); font-size: 15px; }

/* Primary feature: wide, image-forward */
@media (min-width: 900px) {
  .service-feature--primary {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .service-feature--primary .service-feature__figure { --ph-ratio: 5/4; }

  .service-feature--secondary-a {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
  }
  .service-feature--secondary-a .service-feature__figure { --ph-ratio: 16/10; }

  .service-feature--secondary-b {
    grid-column: 8 / 13;
    grid-row: 2 / 3;
  }
  .service-feature--secondary-b .service-feature__figure { --ph-ratio: 16/10; }
}

@media (max-width: 899px) {
  .service-feature__figure { --ph-ratio: 4/3; }
}

/* ══════════════════════ 17. GALLERY PREVIEW GRID ══════════════════════ */

.gallery-preview {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
  /* Fixed row unit plus explicit row spans. The old version used
     grid-auto-rows:auto with per-tile aspect ratios, so a short tile left a
     ragged gap under it whenever its row neighbour was taller. */
  grid-auto-rows: 92px;
}

.gallery-preview__item { min-width: 0; }

/* The figure fills whatever cell the grid gives it, rather than setting its
   own aspect ratio and fighting the row track. */
.gallery-preview__item .ph--filled {
  height: 100%;
  aspect-ratio: auto;
}

/* mobile: 2 columns, alternating tall and short so it still has rhythm */
.gallery-preview__item:nth-child(1) { grid-column: span 2; grid-row: span 3; }
.gallery-preview__item:nth-child(2) { grid-row: span 2; }
.gallery-preview__item:nth-child(3) { grid-row: span 2; }
.gallery-preview__item:nth-child(4) { grid-row: span 2; }
.gallery-preview__item:nth-child(5) { grid-row: span 2; }
.gallery-preview__item:nth-child(6) { grid-column: span 2; grid-row: span 3; }

@media (min-width: 640px) {
  .gallery-preview { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 84px; }

  /* rows 1-4, left half */
  .gallery-preview__item:nth-child(1) { grid-column: span 2; grid-row: span 4; }
  /* rows 1-2, right half */
  .gallery-preview__item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  /* rows 3-4, right half split in two */
  .gallery-preview__item:nth-child(3) { grid-column: span 1; grid-row: span 2; }
  .gallery-preview__item:nth-child(4) { grid-column: span 1; grid-row: span 2; }
  /* rows 5-7, two equal halves */
  .gallery-preview__item:nth-child(5) { grid-column: span 2; grid-row: span 3; }
  .gallery-preview__item:nth-child(6) { grid-column: span 2; grid-row: span 3; }
}
}

@media (max-width: 639px) {
  .gallery-preview__item:nth-child(4) .ph { --ph-ratio: 4/3; }
  .gallery-preview__item:nth-child(5) .ph { --ph-ratio: 4/3; }
}

/* ══════════════════════════ 18. TESTIMONIALS ══════════════════════════ */

.reviews {
  display: grid;
  gap: 0;
}

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

.review {
  padding: var(--s-6) var(--s-2) var(--s-6) 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .review {
    padding: 0 var(--s-6);
    border-top: 0;
  }
  .review + .review { border-left: 1px solid var(--line); }
}

.review__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.5rem;
  color: var(--red-500);
  line-height: 1;
  display: block;
  margin-bottom: var(--s-3);
}

.review p {
  color: var(--fog-200);
  font-size: 16px;
}

.review__attrib {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-400);
}

/* ══════════════════════ 19. SERVICE-AREA TEASER ══════════════════════ */

.area-teaser {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .area-teaser { grid-template-columns: 1fr 1fr; align-items: center; }
}

.area-teaser__towns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.area-teaser__towns a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--fog-200);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.area-teaser__towns a:hover { color: var(--white); border-color: var(--red-400); }

.reviews__cta {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* ══════════════════════════ 20. CLOSING CTA BAND ══════════════════════ */

.cta-band {
  background: var(--ink-700);
  border-top: 1px solid var(--line);
  padding-block: var(--s-9);
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: flex-start;
}

@media (min-width: 900px) {
  .cta-band__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.cta-band h2 { max-width: 14ch; }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.cta-band__phone {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fog-400);
}

.cta-band__phone a { color: var(--white); border-bottom: 1px solid var(--line); }

/* ══════════════════════════ 21. TICK-STRIP TEXTURE ══════════════════════ */

.tick-strip {
  position: absolute;
  right: var(--s-6);
  top: var(--s-9);
  bottom: var(--s-9);
  z-index: 2;
  display: none;
  align-items: center;
  pointer-events: none;
}

@media (min-width: 1200px) {
  .tick-strip { display: flex; }
}

.tick-strip__line {
  width: 1px;
  height: 100%;
  background: var(--line);
}

.tick-strip__label {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog-400);
  white-space: nowrap;
}

/* ══════════════════════════ 22. SCROLL-REVEAL ══════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

/* Gallery tiles are smaller and denser: shorter travel, quicker, tighter stagger. */
.gallery-preview__item.reveal,
.gallery-grid__item.reveal {
  transform: translateY(12px);
  transition-duration: var(--dur-med);
  transition-delay: calc(var(--reveal-i, 0) * 40ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════ 22b. SPACING UTILITIES ══════════════════════ */
/* Used in place of inline margin-top styles so markup stays portable. */

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }

/* ════════════════════════ 22c. LIGHTBOX FIGURE ════════════════════════ */

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.lightbox__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  background: var(--ink-700);
}

.lightbox__caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--fog-400);
  max-width: 62ch;
}

/* Real photos fill the tile; the grey placeholder styling no longer applies. */
.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════ 22d. SYSTEM X DOCUMENT FIGURES ═══════════════════ */

/* Buttons, not figures, because both open in the lightbox — these are
   documents you need to be able to actually read. */
.systemx__figure {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink-700);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}

/* --red-400 to match .gallery-tile:hover, the site's other lightbox trigger.
   --red-500 against --line is barely a 2:1 shift and did not register. */
.systemx__figure:hover,
.systemx__figure:focus-visible {
  border-color: var(--red-400);
}

.systemx__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* The lineup sheet is a tall A4 page. A fixed max-height cropped it by 38% at
   1280 and 5% at 375 — a crop that moves with the viewport lands mid-sentence
   and reads as broken. A ratio crops by the same proportion at every width, so
   it always lands in the same place. */
.systemx__figure--sheet img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}

/* Scrim so the cut edge reads as a preview rather than a truncation. */
.systemx__figure--sheet {
  position: relative;
}

.systemx__figure--sheet img + .systemx__figure-cap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 64px;
  transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent, var(--ink-900));
  pointer-events: none;
}

.systemx__figure-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-400);
  text-align: left;
}

.systemx__figure:hover .systemx__figure-cap,
.systemx__figure:focus-visible .systemx__figure-cap {
  color: var(--fog-200);
}

/* ══════════════════════════ 23. REDUCED MOTION ══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   WAVE 2A — services.html, gallery.html, about.html, service-area.html
   Appended below Wave 1 without touching anything above this line.

   Table of contents:
    24. Page intro (interior-page header)
    25. Fact row (objection killer)
    26. Feature banner (paint correction)
    27. Price table
    28. Add-ons list
    29. Index list (numbered steps — process + standards + requirements)
    30. Filter tabs
    31. Gallery grid + tiles
    32. Lightbox
    33. Pull quote
    34. Operator block
    35. Town flow typography
    36. Area facts
    37. Photo row
   ───────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════ 24. PAGE INTRO ══════════════════════════ */

.page-intro {
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--line);
}

.page-intro__head h1 {
  margin-top: var(--s-3);
  max-width: 18ch;
}

.section-head h1 { max-width: 20ch; }

.page-intro .lede { margin-top: var(--s-5); }

.page-intro__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .page-intro__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-8);
  }
}

/* A portrait takes far more room than the short aside the other pages put here,
   so this variant stays stacked until there is width for both. */
@media (min-width: 900px) and (max-width: 1099px) {
  .page-intro__row--portrait { flex-direction: column; align-items: stretch; }
}

.page-intro__aside {
  max-width: 34ch;
  color: var(--fog-400);
  font-size: 15px;
}

/* ════════════════════════ 24b. OWNER PORTRAIT ════════════════════════ */

/* The only photograph of a person on the site, on the page that argues you get
   the same operator every time.

   Art direction rule: people are black and white, vehicles are colour. That is
   deliberate, not an accident of this one file.

   On size: the source is only 527px wide, so retina-native would be 263 CSS px
   and nothing wider than that is truly sharp on a 2x screen. Since no width
   above 263 is sharp anyway, shrinking further buys nothing perceptually and
   costs the composition, so this is set by what the page needs. 1x displays
   stay oversampled up to 527. Replace the source with a real high-resolution
   original and none of this reasoning is needed. */
.portrait {
  margin: 0;
  flex: none;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--ink-700);
}

/* One cap at every width. Scoping it to the two-column breakpoint let the
   portrait stretch to ~890px while stacked, upscaling a 527px source. At 375
   the content column is 335px so this never binds there, which also avoids the
   15px short-fall a 320px cap used to leave against the text above it. */
.portrait { max-width: 420px; }

/* Gently landscape, so it sits with the other figures on the site and the
   bottom edge clears his clasped hands rather than cutting through the
   knuckles. 3:2 was tried first and took the top off his head; 4:3 removes
   74px of the 469 and the bias keeps all of it off the headroom. */
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 12%;
}

.portrait__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-200);
}

.portrait__cap span {
  color: var(--fog-400);
}

/* ══════════════════════ 25. FACT ROW (OBJECTION KILLER) ══════════════════════ */

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.fact-row__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--fog-200);
}

.fact-row__item svg { color: var(--fog-400); flex: none; }

/* ══════════════════════ 26. FEATURE BANNER ══════════════════════ */

.feature-banner {
  display: grid;
  gap: var(--s-6);
  border: 1px solid var(--line);
  background: var(--ink-800);
  padding: var(--s-6);
}

@media (min-width: 900px) {
  .feature-banner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: var(--s-8);
    gap: var(--s-9);
  }
  .feature-banner--reverse { direction: rtl; }
  .feature-banner--reverse > * { direction: ltr; }
}

.feature-banner__figure .ph { --ph-ratio: 4/3; }

.feature-banner__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.feature-banner__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fog-400);
}

.feature-banner__price strong {
  color: var(--white);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  margin-right: 4px;
}

.feature-banner h3 { margin-top: var(--s-3); max-width: 18ch; }
.feature-banner p.body { color: var(--fog-400); font-size: 15px; margin-top: var(--s-4); }
.feature-banner .btn { margin-top: var(--s-6); }

/* ══════════════════════════ 27. PRICE TABLE ══════════════════════════ */

.price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.price-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.price-table th, .price-table td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.price-table thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-400);
  white-space: nowrap;
}

.price-table tbody th {
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-display);
}

.price-table tbody th span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--fog-400);
}

.price-table td {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fog-200);
  white-space: nowrap;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }

.price-table__badge {
  display: inline-block;
  margin-left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-400);
  background: var(--red-900);
  border: 1px solid var(--red-500);
  padding: 2px 8px;
  vertical-align: middle;
}

.price-table__foot {
  margin-top: var(--s-4);
  color: var(--fog-400);
  font-size: 13px;
}

/* ══════════════════════════ 28. ADD-ONS LIST ══════════════════════════ */

.addons-list {
  display: grid;
  border-top: 1px solid var(--line);
  margin-top: var(--s-6);
}

@media (min-width: 640px) {
  .addons-list { grid-template-columns: 1fr 1fr; }
}

.addons-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .addons-list__item:nth-child(odd) {
    padding-right: var(--s-6);
    border-right: 1px solid var(--line);
  }
  .addons-list__item:nth-child(even) { padding-left: var(--s-6); }
}

.addons-list__name { color: var(--white); font-size: 16px; }

.addons-list__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fog-400);
  white-space: nowrap;
}

/* ══════════════════ 29. INDEX LIST (numbered steps) ══════════════════ */

.index-list {
  border-top: 1px solid var(--line);
}

.index-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .index-list__item { grid-template-columns: 72px 1fr 1.2fr; align-items: baseline; }
  .index-list__item h3 { grid-column: 2; }
  .index-list__item p { grid-column: 3; }
}

.index-list__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--red-400);
}

.index-list__item h3 { max-width: 28ch; }
.index-list__item p { grid-column: 2; color: var(--fog-400); font-size: 15px; margin-top: var(--s-2); max-width: 56ch; }

@media (min-width: 900px) {
  .index-list__item p { grid-column: 3; margin-top: 0; }
}

/* ══════════════════════════ 30. FILTER TABS ══════════════════════════ */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}

.filter-tabs button {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-400);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-5);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.filter-tabs button:hover { color: var(--white); border-color: var(--fog-400); }

.filter-tabs button[aria-pressed="true"] {
  color: var(--white);
  border-color: var(--red-500);
  background: var(--red-900);
}

/* ══════════════════════ 31. GALLERY GRID + TILES ══════════════════════ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  grid-auto-flow: dense;
}

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

.gallery-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.gallery-tile .ph { transition: border-color var(--dur-fast) var(--ease); }
.gallery-tile:hover .ph,
.gallery-tile:focus-visible .ph { border-color: var(--red-400); }

.gallery-tile[hidden] { display: none; }

.gallery-tile--wide { grid-column: span 2; }

.gallery-tile--big { grid-column: span 2; }
.gallery-tile--big .ph { --ph-ratio: 1/1; }
@media (min-width: 640px) { .gallery-tile--big { grid-row: span 2; } }

.gallery-tile--tall .ph { --ph-ratio: 3/4; }

.gallery-slider-tile { grid-column: span 2; }

.gallery-compare {
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}

.gallery-compare__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--white);
}

.gallery-compare__note {
  margin-top: var(--s-3);
  margin-bottom: var(--s-6);
  color: var(--fog-400);
  font-size: 14px;
}

@media (min-width: 900px) {
  .gallery-tile--wide { grid-column: span 2; }
}

/* ══════════════════════════════ 32. LIGHTBOX ══════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 8, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-7) var(--edge);
}

.lightbox[hidden] { display: none; }

.lightbox__panel { width: 100%; max-width: 760px; }

.lightbox__panel .ph { --ph-ratio: 4/3; }

.lightbox__meta {
  margin-top: var(--s-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
}

.lightbox__close {
  position: fixed;
  top: var(--s-5);
  right: var(--s-5);
  z-index: 201;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--ink-800);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fog-200);
}

.lightbox__close:hover { color: var(--red-400); border-color: var(--red-400); }

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 201;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--white);
}

.lightbox__nav:hover { border-color: var(--red-400); color: var(--red-400); }

.lightbox__nav--prev { left: var(--s-5); }
.lightbox__nav--next { right: var(--s-5); }

@media (max-width: 767px) {
  .lightbox__nav { display: none; }
}

/* ══════════════════════════════ 33. PULL QUOTE ══════════════════════════════ */

.pull-quote {
  border-left: 2px solid var(--red-500);
  padding-left: var(--s-6);
  margin-block: var(--s-7);
  max-width: 52ch;
}

.pull-quote p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.7rem);
  color: var(--white);
  line-height: 1.4;
  max-width: none;
}

.pull-quote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fog-400);
}

/* ══════════════════════════════ 34. OPERATOR BLOCK ══════════════════════════════ */

.operator {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .operator {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--s-9);
    align-items: start;
  }
}

.operator__figure .ph { --ph-ratio: 4/5; }

.operator__name {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  color: var(--white);
}

.operator__role {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-400);
}

.operator__body h3 { margin-bottom: var(--s-3); }
.operator__body p + p { margin-top: var(--s-4); }
.operator__body p { color: var(--fog-200); }

/* ══════════════════════════════ 35. TOWN FLOW TYPOGRAPHY ══════════════════════════════ */

.town-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.town-flow__item {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.6vw + 1rem, 2.1rem);
  color: var(--fog-200);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.town-flow__item--home { color: var(--white); border-color: var(--red-500); }

/* ══════════════════════════════ 36. AREA FACTS ══════════════════════════════ */

.area-facts {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-8);
}

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

.area-fact { border-top: 1px solid var(--line); padding-top: var(--s-5); }

.area-fact__num {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red-400);
}

.area-fact h3 { margin-bottom: var(--s-3); }
.area-fact p { color: var(--fog-400); font-size: 15px; }

/* ══════════════════════════════ 37. PHOTO ROW ══════════════════════════════ */

.photo-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
}

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

.photo-row .ph { --ph-ratio: 3/4; }
.photo-row__item:first-child .ph { --ph-ratio: 4/3; }

@media (min-width: 640px) {
  .photo-row__item:first-child { grid-column: span 2; }
}

/* ─────────────────────────────────────────────────────────────────────────
   WAVE 2B — Certified System X Installer (services.html full section +
   index.html home-page credential callout).

   Table of contents:
    38. System X installer section (services.html)
    39. Credential callout (index.html)
   ───────────────────────────────────────────────────────────────────────── */

/* ══════════════ 38. SYSTEM X INSTALLER SECTION (services.html) ══════════════ */

.systemx {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .systemx {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
    align-items: start;
  }
}

.systemx__intro h2 { max-width: 16ch; }

.systemx__points {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.systemx__points li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--fog-200);
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
}

.systemx__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--red-400);
}

.systemx__points strong { color: var(--white); font-weight: 700; }

.systemx__note { color: var(--fog-400); font-size: 13px; max-width: 52ch; }

/* Single column on purpose. This once held three small placeholder photos and
   sat two-up, but it now holds two documents a customer is meant to actually
   read — the certification and the coating lineup. Two-up inside this sidebar
   column shrank each to ~190px, which is unreadable even as a preview. */
.systemx__figures {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-content: start;
}

/* ══════════════ 39. CREDENTIAL CALLOUT (index.html) ══════════════ */

.credential-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border: 1px solid var(--red-500);
  background: var(--ink-700);
  padding: var(--s-6);
}

.credential-callout__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 46ch;
}

.credential-callout__text h3 { max-width: none; }

.credential-callout p {
  color: var(--fog-400);
  font-size: 15px;
}


/* ══════════════════════ 36. GOOGLE RATING BADGE ══════════════════════ */

/* A quiet credential, not a banner. Same mono size and tracking as
   .hero__sublinks directly beneath it, so it reads as part of that row of
   type rather than something bolted onto the hero. */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-400);
  transition: color var(--dur-fast) var(--ease);
}

.rating-badge:hover { color: var(--fog-200); }

.rating-badge__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--red-400);
}

.rating-badge__stars svg { display: block; }

.rating-badge__text { white-space: nowrap; }

/* ══════════════════════ 37. STICKY MOBILE CTA ══════════════════════ */

:root {
  /* Button height plus the 1px top border. Also the bottom padding the page
     reserves, so the bar never covers the footer. Change both by changing
     this. */
  --sticky-cta-h: 53px;
}

.sticky-cta { display: none; }

@media (max-width: 767px) {
  .sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    /* Under .menu-overlay (150) and .lightbox (200), over everything else. */
    z-index: 120;
    background: var(--ink-900);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sticky-cta__btn {
    justify-content: center;
    height: calc(var(--sticky-cta-h) - 1px);
    padding: 0;
    border: 0;
  }

  .sticky-cta__btn--call {
    background: var(--ink-900);
    color: var(--fog-200);
    border-right: 1px solid var(--line);
  }

  .sticky-cta__btn--book {
    background: var(--red-500);
    color: var(--white);
  }

  .sticky-cta__btn--book:hover { background: var(--red-400); }

  /* The last thing on every page is the footer, and the bar floats over it.
     Reserve the height rather than letting it cover the copyright line. */
  body {
    padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom));
  }

  /* js/main.js sets this class while the overlay is open. */
  body.is-menu-open .sticky-cta { display: none; }
}