/*
  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);
}

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

.nav-links a {
  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); }

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

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

.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;
}

/* ══════════════════════════ 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);
  }
}

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

/* ══════════════════════ 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 { color: var(--fog-400); font-size: 15px; margin-top: var(--s-2); max-width: 56ch; }

@media (min-width: 900px) {
  .index-list__item p { 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; }

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

@media (min-width: 480px) {
  .systemx__figures { grid-template-columns: repeat(2, 1fr); }
}

/* Badge sits full-width above the two shot photos regardless of column count. */
.systemx__figures > .ph:first-child { grid-column: 1 / -1; }

/* ══════════════ 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;
}