/* ============================================================
   Andrews Collision Auto Repairs — global.css v4
   Light-dominant, dark accent sections, cinematic typography
   Font: Manrope (never change) | Red: #D32027 (never change)
   Light: #F8F8F6 | Dark: #080808
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* Brand (locked) */
  --red:        #D32027;
  --red-dark:   #B01C22;
  --ink:        #0E0E0E;

  /* Light palette */
  --bg:         #F8F8F6;
  --bg-white:   #FFFFFF;
  --text:       #0E0E0E;
  --text-mute:  #5C5C5C;
  --text-light: #8A8A8A;
  --border:     rgba(14,14,14,0.09);
  --border-md:  rgba(14,14,14,0.15);

  /* Dark palette */
  --dark:       #080808;
  --dark-2:     #111111;
  --dark-3:     #1A1A1A;
  --dark-text:  #F8F8F6;
  --dark-mute:  rgba(248,248,246,0.55);
  --dark-rule:  rgba(255,255,255,0.08);

  /* Typography (Manrope only) */
  --font:       'Manrope', sans-serif;
  --h1:         clamp(56px, 10vw, 148px);
  --h2:         clamp(36px, 5vw, 80px);
  --h3:         clamp(22px, 2.5vw, 36px);
  --h4:         clamp(18px, 1.8vw, 24px);
  --body-lg:    18px;
  --body:       16px;
  --label:      11px;

  /* Spacing */
  --section-v:  clamp(100px, 12vw, 160px);
  --container:  1280px;
  --gutter:     clamp(20px, 5vw, 80px);

  /* Nav */
  --nav-h:      72px;

  /* Motion */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);
  --dur-xs:     100ms;
  --dur-sm:     180ms;
  --dur-md:     280ms;
  --dur-lg:     480ms;

  /* Radius */
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  18px;
  --r-xl:  28px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-float:   40;
  --z-nav:     100;
  --z-mobile:  200;
  --z-top:     1000;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

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

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }
svg { display: block; flex-shrink: 0; }

/* ── 3. SCROLL PROGRESS ───────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--red);
  z-index: var(--z-top);
  pointer-events: none;
  transition: width 80ms linear;
}

/* ── 4. SKIP LINK ────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  background: var(--red);
  color: #fff;
  padding: 10px 24px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 14px;
  font-weight: 700;
  z-index: var(--z-top);
  transition: top var(--dur-sm) var(--ease);
  white-space: nowrap;
}
.skip-link:focus { top: 0; }

/* ── 5. TYPOGRAPHY BASE ──────────────────────────────────── */
.label {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
.label--red   { color: var(--red); }
.label--mute  { color: var(--text-mute); }
.label--dark  { color: var(--dark-mute); }

h1, .h1 {
  font-size: var(--h1);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
h2, .h2 {
  font-size: var(--h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
h3, .h3 {
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h4, .h4 {
  font-size: var(--h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
p {
  font-size: var(--body-lg);
  line-height: 1.75;
  color: var(--text-mute);
}

/* ── 6. LAYOUT UTILITIES ─────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section-v) 0; }
.section--dark  { background: var(--dark); color: var(--dark-text); }
.section--white { background: var(--bg-white); }
.section--warm  { background: var(--bg); }
.text-block  { max-width: 600px; }
.text-center { text-align: center; }

/* ── 7. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  min-height: 52px;
  transition:
    background var(--dur-md) var(--ease),
    border-color var(--dur-md) var(--ease),
    transform var(--dur-sm) var(--ease),
    box-shadow var(--dur-md) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { width: 18px; height: 18px; }

/* Red solid */
.btn-primary {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(211,32,39,0.35);
}
.btn-primary:active { transform: translateY(0); }

/* Ghost white (for dark sections) */
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.06);
}

/* Ghost dark (for light sections) */
.btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border-md);
}
.btn-ghost-dark:hover {
  border-color: var(--ink);
  background: rgba(14,14,14,0.04);
}

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

/* ── 8. NAVIGATION ───────────────────────────────────────── */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  transition:
    background var(--dur-md) var(--ease),
    box-shadow var(--dur-md) var(--ease),
    backdrop-filter var(--dur-md);
}

/* On hero — transparent, white text */
#site-nav.nav-transparent { background: transparent; }

/* After scroll — white bar */
#site-nav.nav-solid {
  background: #fff;
  box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(0,0,0,0.06);
}
#site-nav.nav-solid .nav-link   { color: var(--ink); }
#site-nav.nav-solid .nav-cta-pill { /* stays red */ }
#site-nav.nav-solid .nav-phone-link { color: var(--ink); }
#site-nav.nav-solid .nav-logo-light { display: none; }
#site-nav.nav-solid .nav-logo-dark  { display: block; }
#site-nav.nav-solid .hamburger-bar  { background: var(--ink); }

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; transition: height var(--dur-md) var(--ease); }
.nav-logo img.nav-logo-light { display: block; }
.nav-logo img.nav-logo-dark  { display: none; }
/* Larger white logo on the hero (transparent), trims down once scrolled */
#site-nav.nav-transparent .nav-logo img.nav-logo-light { height: 56px; }
/* Red logo (white-bg jpg) sits flush on the white solid nav */
#site-nav.nav-solid .nav-logo img.nav-logo-dark { height: 46px; }

/* Desktop nav list */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  border-radius: var(--r-sm);
  min-height: 44px;
  cursor: pointer;
  transition: color var(--dur-sm), background var(--dur-sm);
  white-space: nowrap;
  background: none;
  border: none;
  font-family: inherit;
}
.nav-link:hover,
.nav-item:focus-within .nav-link {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
#site-nav.nav-solid .nav-link:hover {
  color: var(--red);
  background: var(--bg);
}
.nav-link-chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-sm) var(--ease);
  opacity: 0.65;
}
.nav-item:hover .nav-link-chevron,
.nav-item:focus-within .nav-link-chevron { transform: rotate(180deg); opacity: 1; }
.nav-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Dropdown panels */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 230px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-md) var(--ease),
    transform var(--dur-md) var(--ease),
    visibility var(--dur-md);
}
/* Invisible bridge spanning the gap so hover isn't lost between
   the trigger and the panel (keeps the menu open + clickable). */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 8px 14px 4px;
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-sm);
  min-height: 44px;
  transition: background var(--dur-sm), color var(--dur-sm);
}
.nav-dropdown a:hover { background: var(--bg); color: var(--red); }
.nav-dropdown a .dd-sub {
  font-size: 12px;
  color: var(--text-light);
  display: block;
  font-weight: 400;
  margin-top: 1px;
}

/* Right side: phone + CTA */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-phone-link {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
  transition: color var(--dur-sm);
  padding: 0 4px;
}
.nav-phone-link:hover { color: #fff; }
#site-nav.nav-solid .nav-phone-link:hover { color: var(--red); }

.nav-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-sm);
  min-height: 40px;
  white-space: nowrap;
  transition: background var(--dur-sm), transform var(--dur-sm);
}
.nav-cta-pill:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}
.nav-cta-pill:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* mobile-only CTA hidden on desktop, shown ≤1024 */
.nav-cta-pill.mobile-only { display: none; }

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger-bar {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.90);
  border-radius: 2px;
  transition: all var(--dur-md) var(--ease);
  transform-origin: center;
}
.hamburger-bar:nth-child(1) { width: 22px; }
.hamburger-bar:nth-child(2) { width: 16px; }
.hamburger-bar:nth-child(3) { width: 22px; }
.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}
.nav-hamburger:focus-visible { outline: 2px solid var(--red); border-radius: var(--r-sm); }

/* Mobile fullscreen menu */
#mobile-menu {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(211,32,39,0.10) 0%, transparent 55%),
    linear-gradient(165deg, #1b1d22 0%, #111317 42%, #0b0b0d 100%);
  z-index: var(--z-mobile);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) 60px;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
#mobile-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
#mobile-menu:focus { outline: none; }

/* Header bar: logo + close button */
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  margin: 0 0 20px;
  position: sticky;
  top: 0;
}
.mobile-menu-head .nav-logo img { height: 32px; width: auto; display: block; }
.mobile-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--dark-text);
  transition: background var(--dur-sm), border-color var(--dur-sm), transform var(--dur-sm);
}
.mobile-close:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
.mobile-close:active { transform: scale(0.92); }
.mobile-close svg { width: 20px; height: 20px; }
.mobile-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Staggered item entrance when menu opens */
#mobile-menu.is-open .mobile-nav-item,
#mobile-menu.is-open .mobile-nav-ctas,
#mobile-menu.is-open .mobile-nav-phone {
  animation: mobileItemIn 0.42s var(--ease) both;
}
#mobile-menu.is-open .mobile-nav-item:nth-child(1) { animation-delay: 0.04s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(2) { animation-delay: 0.09s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(3) { animation-delay: 0.14s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(4) { animation-delay: 0.19s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(5) { animation-delay: 0.24s; }
@keyframes mobileItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-item { border-bottom: 1px solid var(--dark-rule); }

.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-text);
  letter-spacing: -0.02em;
  min-height: 64px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.mobile-nav-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform var(--dur-md) var(--ease);
  color: var(--dark-mute);
  flex-shrink: 0;
}
.mobile-nav-item.is-open .mobile-nav-toggle svg { transform: rotate(180deg); }

/* plain link items (no dropdown) */
.mobile-nav-plain {
  display: flex;
  align-items: center;
  padding: 18px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-text);
  letter-spacing: -0.02em;
  min-height: 64px;
}
.mobile-nav-plain:hover { color: var(--red); }

.mobile-dropdown {
  display: none;
  padding: 0 0 20px 16px;
}
.mobile-nav-item.is-open .mobile-dropdown { display: block; }
.mobile-dropdown a {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-mute);
  min-height: 48px;
  transition: color var(--dur-sm);
}
.mobile-dropdown a:hover { color: var(--red); }

.mobile-nav-ctas {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-nav-ctas .btn { justify-content: center; width: 100%; }
.mobile-nav-phone {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--dark-text);
  letter-spacing: -0.03em;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--dark-rule);
}

/* ── 9. HERO ─────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
  background: var(--dark);
}
/* extra top room when the announcement bar is showing */
body.has-announce #hero { padding-top: calc(var(--nav-h) + 40px + clamp(48px, 7vw, 92px)); }

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Dark gradient — show workshop, not solid black */
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(8,8,8,0.20) 0%,
    rgba(8,8,8,0.38) 40%,
    rgba(8,8,8,0.78) 100%
  );
}


.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

/* Trust badges — below the call to action */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-badge svg { width: 14px; height: 14px; }
.hero-badge--iag {
  background: rgba(0,61,165,0.25);
  border-color: rgba(0,61,165,0.45);
  color: rgba(255,255,255,0.90);
}

.hero-h1 {
  font-size: clamp(52px, 8.5vw, 124px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.94;
  color: #fff;
  max-width: 16ch;
  margin: 0 0 22px;
}
.hero-h1 em {
  font-style: normal;
  color: var(--red);
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 52ch;
  margin: 0 0 36px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.hero-phone {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  transition: color var(--dur-sm);
  padding: 4px 0;
}
.hero-phone:hover { color: #fff; }

/* ── 10. TRUST STRIP ─────────────────────────────────────── */
#trust-strip {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 0;
}
.trust-strip-inner {
  display: flex;
  align-items: stretch;
}
.trust-strip-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px var(--gutter);
  border-right: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.trust-strip-label span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.trust-strip-label svg { width: 16px; height: 16px; color: var(--text-light); }

.trust-marquee-track {
  flex: 1;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.trust-marquee {
  display: flex;
  align-items: center;
  gap: 52px;
  width: max-content;
  padding: 20px 0;
  animation: marquee 32s linear infinite;
}
.trust-marquee:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trust-logo {
  display: flex;
  align-items: center;
  height: 32px;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--dur-md), filter var(--dur-md);
  cursor: default;
}
.trust-logo:hover { opacity: 1; filter: grayscale(0); }
.trust-logo img { height: 26px; width: auto; object-fit: contain; }
.trust-logo svg { height: 26px; width: auto; }

/* ── 11. STORY SECTION ───────────────────────────────────── */
#story {
  background: var(--bg);
  padding: var(--section-v) 0;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}
.story-label { margin-bottom: 20px; }
.story-h2    { margin-bottom: 32px; }
.story-text p { margin-bottom: 18px; }
.story-text p:last-of-type { margin-bottom: 36px; }

.story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
  transition: gap var(--dur-sm) var(--ease);
}
.story-link:hover { gap: 14px; }
.story-link svg { width: 18px; height: 18px; }
.story-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.story-img-col { position: relative; }
.story-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--dark-3);
}
.story-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.story-img-wrap:hover img { transform: scale(1.04); }

/* Australian-industry-award-style seal */
.story-award {
  position: absolute;
  bottom: -26px;
  left: -30px;
  z-index: 2;
}
.award-badge {
  width: clamp(116px, 15vw, 162px);
  height: auto;
  display: block;
  /* clip to a circle so any opaque PNG corners (and the drop-shadow) stay
     round — fixes the square shadow box */
  clip-path: circle(49.5% at 50% 50%);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.30));
}

/* ── 12. CREDENTIALS ─────────────────────────────────────── */
#credentials {
  position: relative;
  background: var(--dark);
  padding: var(--section-v) 0;
  overflow: hidden;
}
.credentials-cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.credentials-cinematic-bg img,
.credentials-cinematic-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.credentials-cinematic-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8,8,8,0.60) 0%, transparent 100%);
}

.credentials-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.credentials-label { margin-bottom: 56px; }
.credential-list { border-top: 1px solid var(--dark-rule); }

.credential-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--dark-rule);
  transition: background var(--dur-sm);
  cursor: default;
}
.credential-name {
  font-size: clamp(28px, 4.5vw, 68px);
  font-weight: 800;
  color: var(--dark-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(211,32,39,0.12);
  border: 1px solid rgba(211,32,39,0.28);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: #FF8A8A;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.credential-badge svg { width: 14px; height: 14px; }

/* ── 13. THE WORK / BEFORE-AFTER ─────────────────────────── */
#the-work {
  background: var(--bg);
  padding: var(--section-v) 0;
}
.work-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.work-label { margin-bottom: 16px; }
.work-h2    { margin-bottom: 0; }

/* B/A Slider */
#baWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  background: var(--dark);
}
#baWrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#baBefore { clip-path: inset(0 50% 0 0); }
#baAfter  { left: 0; }

#baHandle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: var(--red);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
#baHandle::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  background: var(--red);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.40);
}
#baHandle::after {
  content: '⟷';
  position: absolute;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  z-index: 1;
}
.ba-labels {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}
.ba-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Case study cards below slider */
.work-cases {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-case {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  transition: box-shadow var(--dur-md), transform var(--dur-md);
}
.work-case:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.work-case-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.work-case h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.work-case p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
}
.work-case-stats {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.work-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
}
.work-stat span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── 14. SERVICES ────────────────────────────────────────── */
#services {
  background: var(--dark);
  padding: var(--section-v) 0;
}
.services-hdr {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.services-hdr-left .label { margin-bottom: 18px; }
.services-hdr h2 { color: var(--dark-text); }

.svc-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-mute);
  transition: color var(--dur-sm), gap var(--dur-sm);
  flex-shrink: 0;
  white-space: nowrap;
  padding-bottom: 2px;
}
.svc-all-link:hover { color: var(--red); gap: 12px; }
.svc-all-link svg { width: 16px; height: 16px; }

/* Service rows */
.svc-list { border-top: 1px solid var(--dark-rule); }

.svc-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px var(--gutter);
  border-bottom: 1px solid var(--dark-rule);
  max-width: var(--container);
  margin: 0 auto;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-sm);
  cursor: pointer;
}
/* Red underline reveal on hover */
.svc-row::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-md) var(--ease);
}
.svc-row:hover::after { transform: scaleX(1); }
.svc-row:hover { background: rgba(255,255,255,0.015); }

.svc-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.svc-body {}
.svc-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.svc-name {
  font-size: clamp(20px, 2.8vw, 40px);
  font-weight: 800;
  color: var(--dark-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color var(--dur-sm);
}
.svc-row:hover .svc-name { color: var(--red); }
.svc-flagship {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(211,32,39,0.14);
  border: 1px solid rgba(211,32,39,0.28);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.svc-desc {
  font-size: 14px;
  color: var(--dark-mute);
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.svc-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-md) var(--ease), border-color var(--dur-md), transform var(--dur-md);
}
.svc-row:hover .svc-arrow {
  background: var(--red);
  border-color: var(--red);
  transform: translateX(5px);
}
.svc-arrow svg { width: 18px; height: 18px; color: rgba(255,255,255,0.55); }
.svc-row:hover .svc-arrow svg { color: #fff; }

/* ── 15. PROCESS ─────────────────────────────────────────── */
#process {
  background: var(--bg);
  padding: var(--section-v) 0;
  overflow: hidden;
}
.process-hdr {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.process-hdr .label { margin-bottom: 18px; }
.process-hdr h2    { margin-bottom: 20px; }
.process-hdr > p   { max-width: 540px; }

/* Horizontal scroll track (desktop) */
/* Process: responsive grid — all steps visible, multiple rows */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.process-step {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: box-shadow var(--dur-md), transform var(--dur-md), border-color var(--dur-md);
}
.process-step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--border-md);
}

.process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 22px;
}
.process-step-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.process-step-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0;
}
.process-step-time {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ── 16. INSURANCE GUIDE + CALCULATOR ───────────────────── */
#insurance-guide {
  background: var(--bg-white);
  padding: var(--section-v) 0;
  border-top: 1px solid var(--border);
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}
.guide-label  { margin-bottom: 20px; }
.guide-h2     { margin-bottom: 32px; }
.guide-text p { margin-bottom: 18px; }
.guide-text .guide-honest {
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0;
}

/* Calculator card */
.calc-card {
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.calc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.calc-field { margin-bottom: 28px; }
.calc-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.calc-field-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.02em;
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border-md);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--red);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(211,32,39,0.35);
  cursor: pointer;
}
.calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--red);
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
}
.calc-slider:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.calc-result {
  background: var(--dark);
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
  margin-top: 8px;
}
.calc-result-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-mute);
  margin-bottom: 10px;
}
.calc-result-val {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dark-text);
  line-height: 1;
  margin-bottom: 12px;
}
.calc-verdict {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 100px;
}
.calc-verdict.claim       { background: rgba(34,197,94,0.15);  color: #15803d; }
.calc-verdict.pay-private { background: rgba(59,130,246,0.15); color: #1d4ed8; }
.calc-verdict.borderline  { background: rgba(234,179,8,0.15);  color: #b45309; }

/* ── 17. SOCIAL PROOF / REVIEWS ──────────────────────────── */
#reviews {
  background: var(--bg);
  padding: var(--section-v) 0;
  border-top: 1px solid var(--border);
}
.reviews-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.reviews-score {}
.reviews-big-num {
  font-size: clamp(88px, 14vw, 160px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin-bottom: 16px;
}
.reviews-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.reviews-stars svg { width: 22px; height: 22px; color: #F59E0B; fill: #F59E0B; }
.reviews-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mute);
}
.reviews-right h2  { margin-bottom: 20px; }
.reviews-right > p { margin-bottom: 32px; max-width: 460px; }
.reviews-google-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
  transition: gap var(--dur-sm) var(--ease);
}
.reviews-google-link:hover { gap: 14px; }
.reviews-google-link svg { width: 18px; height: 18px; }
.reviews-google-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rev-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: box-shadow var(--dur-md), transform var(--dur-md);
}
.rev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.rev-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.rev-stars svg { width: 15px; height: 15px; color: #F59E0B; fill: #F59E0B; }
.rev-text {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-mute);
  font-style: italic;
  margin-bottom: 22px;
}
.rev-author {}
.rev-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.rev-meta {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

/* ── 18. COVERAGE ────────────────────────────────────────── */
#coverage {
  background: var(--bg-white);
  padding: var(--section-v) 0;
  border-top: 1px solid var(--border);
}
.coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}
.coverage-label { margin-bottom: 20px; }
.coverage-h2    { margin-bottom: 32px; }
.coverage-text p { margin-bottom: 18px; }

.suburb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.suburb-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm);
  min-height: 38px;
}
.suburb-pill:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.suburb-pill:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.coverage-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--dark-3);
}
.coverage-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.coverage-img-wrap:hover img { transform: scale(1.04); }

/* ── 19. FINAL CTA ───────────────────────────────────────── */
#final-cta {
  position: relative;
  background: var(--dark);
  padding: var(--section-v) 0;
  overflow: hidden;
  min-height: 80svh;
  display: flex;
  align-items: center;
}
.final-cta-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.final-cta-parallax img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  opacity: 0.12;
}
.final-cta-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,8,8,0.70) 0%, rgba(8,8,8,0.40) 100%);
}
.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}
.final-cta-label  { margin-bottom: 24px; }
.final-cta-h2 {
  font-size: clamp(48px, 8vw, 130px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--dark-text);
  margin-bottom: 24px;
}
.final-cta-sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--dark-mute);
  max-width: 500px;
  margin-bottom: 48px;
}
.final-cta-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 72px;
}

.final-cta-details {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(32px, 5vw, 64px);
  padding-top: 48px;
  border-top: 1px solid var(--dark-rule);
  justify-content: start;
}
.cta-detail-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 8px;
}
.cta-detail-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-text);
  line-height: 1.55;
}
.cta-detail-val a {
  color: var(--dark-text);
  transition: color var(--dur-sm);
}
.cta-detail-val a:hover { color: var(--red); }

/* ── 20. FOOTER ──────────────────────────────────────────── */
#footer {
  background: var(--dark-2);
  padding: 80px 0 40px;
  border-top: 1px solid var(--dark-rule);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(28px, 3.5vw, 52px);
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--dark-rule);
}
.footer-brand img {
  height: 30px;
  width: auto;
  margin-bottom: 20px;
}
.footer-brand p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--dark-mute);
  max-width: 270px;
  margin-bottom: 20px;
}
.footer-iag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-mute);
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 2px; }
.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-mute);
  transition: color var(--dur-sm);
  padding: 5px 0;
  display: block;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.footer-col a:hover { color: var(--dark-text); }

.footer-contact-line {
  font-size: 14px;
  color: var(--dark-mute);
  line-height: 1.65;
  margin-bottom: 10px;
}
.footer-contact-line strong { color: var(--dark-text); font-weight: 600; display: block; }
.footer-contact-line a { color: var(--dark-mute); transition: color var(--dur-sm); }
.footer-contact-line a:hover { color: var(--dark-text); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,0.22);
}
.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a {
  font-size: 13px;
  color: rgba(255,255,255,0.22);
  transition: color var(--dur-sm);
}
.footer-legal a:hover { color: rgba(255,255,255,0.55); }

/* ── 21. CINEMATIC.JS HOOK CLASSES ───────────────────────── */
/* section-headline: word-by-word staggered reveal */
/* padding-bottom + negative margin gives the overflow mask room for
   descenders (g, y, p, j) without shifting line spacing. */
.section-headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.section-headline .word-inner {
  display: inline-block;
  transform: translateY(115%);
  will-change: transform;
}
.section-headline.is-revealed .word-inner { transform: translateY(0); }

/* ken-burns: zoom tied to scroll */
.ken-burns-wrap { overflow: hidden; }
.ken-burns {
  transform-origin: center;
  will-change: transform;
}

/* cinematic-pan: pan on scroll */
.cinematic-pan { will-change: transform; }

/* scroll-3d: enters with rotateX */
.scroll-3d {
  transform: perspective(1000px) rotateX(8deg) translateY(40px);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.scroll-3d.is-revealed {
  transform: perspective(1000px) rotateX(0deg) translateY(0);
  opacity: 1;
}
/* Stagger grouped scroll-3d items (process steps, welcome pillars) */
.process-step.scroll-3d:nth-child(2),
.welcome-pillar.scroll-3d:nth-child(2) { transition-delay: 0.08s; }
.process-step.scroll-3d:nth-child(3),
.welcome-pillar.scroll-3d:nth-child(3) { transition-delay: 0.16s; }
.process-step.scroll-3d:nth-child(4),
.welcome-pillar.scroll-3d:nth-child(4) { transition-delay: 0.24s; }
.process-step.scroll-3d:nth-child(5) { transition-delay: 0.32s; }
.process-step.scroll-3d:nth-child(6) { transition-delay: 0.40s; }

/* tilt-card: 3D mouse tilt (desktop only) */
.tilt-card { transform-style: preserve-3d; will-change: transform; }

/* depth-grid + depth-card: staggered 3D entry */
.depth-grid { perspective: 1200px; }
.depth-card {
  transform: translateY(60px);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.depth-card.is-revealed { transform: translateY(0); opacity: 1; }

/* clip-transition: clip-path reveal */
.clip-transition {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease);
}
.clip-transition.is-revealed { clip-path: inset(0 0 0% 0); }

/* slash overlays */
.slash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* texture-parallax */
.texture-parallax { will-change: background-position; }

/* Parallax layer IDs */
#parallax-bg, #parallax-mid, #parallax-fg { will-change: transform; }

/* ── 22. INNER PAGE UTILITIES ────────────────────────────── */
/* Dark hero for all inner pages */
.page-hero {
  background: var(--dark);
  padding: calc(var(--nav-h) + clamp(60px, 8vw, 100px)) var(--gutter) clamp(60px, 8vw, 100px);
}
.page-hero-inner { max-width: var(--container); margin: 0 auto; }
.page-hero h1 {
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 800;
  color: var(--dark-text);
  letter-spacing: -0.04em;
  line-height: 0.96;
  max-width: 760px;
  margin-bottom: 24px;
}
.page-hero p {
  font-size: 18px;
  color: var(--dark-mute);
  max-width: 520px;
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-mute);
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--dark-mute); transition: color var(--dur-sm); }
.breadcrumb a:hover { color: var(--dark-text); }
.breadcrumb-sep { opacity: 0.35; }

/* Service cards (inner pages) */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.service-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: box-shadow var(--dur-md), transform var(--dur-md);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card-icon {
  width: 48px; height: 48px;
  background: var(--bg);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--red);
}
.service-card-icon svg { width: 24px; height: 24px; }
.service-card h3 { margin-bottom: 10px; font-size: 19px; }
.service-card p { font-size: 15px; }

/* Stats strip (inner pages) */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
}
.stats-strip .stat-box {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-right: none;
  border-bottom: none;
  padding: 28px 24px;
}
.stats-strip .stat-box:last-child { border-right: 1px solid var(--border); }
.stat-num {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-num-red { color: var(--red); }
.stat-lbl { font-size: 13px; color: var(--text-mute); font-weight: 500; }

/* FAQ */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 68px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-sm) var(--ease); }
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-q:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.faq-a {
  display: none;
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mute);
}
.faq-item.is-open .faq-a { display: block; }

/* ── 23. ACCESSIBILITY ───────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Ensure interactive elements are min 44px touch targets */
.nav-link, .nav-cta-pill, .btn, .suburb-pill, .faq-q, .mobile-nav-toggle,
.mobile-nav-plain, .svc-row, .nav-dropdown a, .mobile-dropdown a {
  min-height: 44px;
}

/* ── 23b. COVERAGE PILLS EXTRAS ──────────────────────────── */
.coverage-pills-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 28px 0 0;
}
.suburb-pill--static {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-md);
  color: var(--text-mute);
  cursor: default;
}
.suburb-pill--static:hover {
  background: transparent;
  border-color: var(--border-md);
  color: var(--text-mute);
}

/* ── 23c. FOOTER LOGO PLATE + FIND-NEAREST ───────────────── */
.footer-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
}
.footer-logo-plate img { height: 64px; width: auto; display: block; }

.footer-locate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  color: var(--dark-text);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  min-height: 44px;          /* still a comfortable tap target */
  cursor: pointer;
  transition: background var(--dur-sm), border-color var(--dur-sm), transform var(--dur-sm);
}
.footer-locate svg { width: 15px; height: 15px; }
.footer-locate:hover {
  background: rgba(211,32,39,0.16);
  border-color: rgba(211,32,39,0.45);
  transform: translateY(-1px);
}
.footer-locate:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.footer-locate svg { width: 15px; height: 15px; color: var(--red); }
.footer-locate.is-loading { opacity: 0.7; pointer-events: none; }
.footer-locate-result {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dark-mute);
  max-width: 280px;
}
.footer-locate-result:empty { display: none; }
.footer-locate-result strong { color: var(--dark-text); font-weight: 700; }
.footer-locate-result a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FF8A8A;
  font-weight: 700;
  margin-top: 4px;
}
.footer-locate-result a:hover { color: #fff; }

/* ── 23d. WELCOME / VALUE OVERVIEW ───────────────────────── */
#welcome {
  background: var(--bg-white);
  padding: var(--section-v) 0;
  border-bottom: 1px solid var(--border);
}
.welcome-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.welcome-intro .label { margin-bottom: 20px; }
.welcome-h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 16ch;
}
.welcome-lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 52ch;
  margin: 0 0 32px;
}
.welcome-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.welcome-media { position: relative; }
.welcome-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--dark-3);
  box-shadow: var(--shadow-lg);
}
.welcome-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.welcome-img-wrap:hover img { transform: scale(1.05); }

.welcome-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--border);
}
.welcome-pillar {}
.welcome-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--red);
  margin-bottom: 18px;
}
.welcome-pillar-icon svg { width: 24px; height: 24px; }
.welcome-pillar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.welcome-pillar-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
}

/* ── 23e. ADVICE & GUIDES (blog) ─────────────────────────── */
#insights {
  background: var(--bg);
  padding: var(--section-v) 0;
  border-top: 1px solid var(--border);
}
.insights-hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.insights-hdr .label { margin-bottom: 16px; }
.insights-intro { max-width: 440px; margin: 0; }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-md), transform var(--dur-md);
  cursor: pointer;
}
.insight-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.insight-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark-3); }
.insight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.insight-card:hover .insight-thumb img { transform: scale(1.06); }
.insight-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.insight-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.insight-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.insight-excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0 0 20px;
}
.insight-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  transition: gap var(--dur-sm) var(--ease);
}
.insight-card:hover .insight-link { gap: 12px; }
.insight-link svg { width: 16px; height: 16px; }
.insights-soon {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  margin: 44px 0 0;
}

/* ── 23f. PAINT FINISH DIVIDER (cinematic breath) ────────── */
#paint-divider {
  position: relative;
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
  text-align: center;
}
.paint-video-wrap { position: absolute; inset: 0; z-index: 0; }
.paint-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paint-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(8,8,8,0.55) 78%, rgba(8,8,8,0.85) 100%),
    linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.20) 45%, rgba(8,8,8,0.65) 100%);
}
.paint-content {
  position: relative;
  z-index: 1;
  max-width: 880px;
  padding: 0 var(--gutter);
}
.paint-h2 {
  font-size: clamp(30px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #fff;
  margin: 0 auto 22px;
  max-width: 16ch;
}
.paint-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.80);
  max-width: 38ch;
  margin: 0 auto;
}

/* ── 23g. GET IN TOUCH — callback form + map ─────────────── */
#contact-block {
  background: var(--bg);
  padding: var(--section-v) 0;
  border-top: 1px solid var(--border);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-form-col .label { margin-bottom: 18px; }
.contact-h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 18px;
}
.contact-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mute);
  max-width: 46ch;
  margin: 0 0 32px;
}

/* honeypot — visually hidden, off-screen */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.callback-form { max-width: 560px; }
.cb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cb-field { margin-bottom: 18px; }
.cb-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.cb-optional { color: var(--text-light); font-weight: 400; }
.cb-field input,
.cb-field select,
.cb-field textarea {
  width: 100%;
  padding: 13px 15px;
  font-size: 16px;            /* ≥16px prevents iOS zoom */
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-sm), box-shadow var(--dur-sm);
  min-height: 50px;
}
.cb-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(211,32,39,0.12);
}
.cb-submit { margin-top: 6px; width: 100%; justify-content: center; }
.cb-fineprint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
  margin: 16px 0 0;
}
.cb-fineprint a { color: var(--red); font-weight: 700; }

.callback-success {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.cb-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  margin-bottom: 18px;
}
.cb-success-icon svg { width: 28px; height: 28px; }
.callback-success h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.callback-success p { font-size: 15px; color: var(--text-mute); margin: 0; max-width: 38ch; margin-inline: auto; }
.callback-success:focus { outline: none; }

/* Map + locations */
.contact-map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
/* Loader / fallback shown until (or if) the embed loads */
.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--text-mute);
  background:
    repeating-linear-gradient(45deg, rgba(14,14,14,0.012) 0 12px, transparent 12px 24px),
    var(--bg);
}
.map-fallback svg { width: 30px; height: 30px; color: var(--red); }
.map-fallback p { font-size: 14px; font-weight: 600; color: var(--text-mute); margin: 0; }
.map-fallback a {
  font-size: 13px; font-weight: 700; color: var(--red);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.map-fallback-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border-md); border-top-color: var(--red);
  animation: mapspin 0.8s linear infinite;
}
@keyframes mapspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-fallback-spinner { animation: none; } }
.contact-map-frame {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.contact-map-frame.is-loaded { opacity: 1; }
.contact-map iframe { width: 100%; height: 100%; display: block; filter: grayscale(0.2); }
.contact-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.contact-loc-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}
.contact-loc-addr {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}
a.contact-loc-addr:hover { color: var(--red); }

/* ── 23h. INNER PAGE SECTIONS ────────────────────────────── */
.ip-section { padding: var(--section-v) 0; }
.ip-section--soft  { background: var(--bg); }
.ip-section--white { background: var(--bg-white); }
.ip-section--dark  { background: var(--dark); color: var(--dark-text); }

.ip-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.ip-head.is-center { margin-inline: auto; text-align: center; }
.ip-head .label { margin-bottom: 16px; }
.ip-head h2 { margin-bottom: 20px; }
.ip-section--dark .ip-head h2 { color: var(--dark-text); }
.ip-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; color: var(--text-mute); }
.ip-section--dark .ip-lead { color: var(--dark-mute); }

/* Two-column text + image */
.ip-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.ip-split.is-reverse .ip-split-media { order: -1; }
.ip-split-body .label { margin-bottom: 16px; }
.ip-split-body h2 { margin-bottom: 20px; }
.ip-split-body p { margin-bottom: 16px; }
.ip-split-media-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--dark-3);
  box-shadow: var(--shadow-lg);
}
.ip-split-media-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ip-split-media-img:hover img { transform: scale(1.04); }

/* Checklist */
.ip-checklist { display: grid; gap: 14px; margin-top: 8px; }
.ip-check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.ip-section--dark .ip-check { color: var(--dark-text); }
.ip-check-mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.ip-check-mark svg { width: 14px; height: 14px; }
.ip-check strong { font-weight: 700; }

/* Prose blocks (local SEO copy) */
.ip-prose { max-width: 760px; }
.ip-prose p { margin-bottom: 18px; }
.ip-prose h3 { margin: 32px 0 12px; font-size: clamp(20px,2.2vw,28px); }

/* CTA band */
.ip-cta { background: var(--red); padding: clamp(64px, 9vw, 120px) 0; text-align: center; }
.ip-cta h2 { color: #fff; margin-bottom: 18px; font-size: clamp(32px,5vw,64px); }
.ip-cta p { color: rgba(255,255,255,0.86); max-width: 50ch; margin: 0 auto 36px; }
.ip-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ip-cta .btn-primary { background: #fff; color: var(--red); border-color: #fff; }
.ip-cta .btn-primary:hover { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.ip-cta .btn-ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.ip-cta .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

/* ── 23u. CINEMATIC BREATHER BAND (service pages) ────────── */
.cine-band {
  position: relative;
  height: clamp(340px, 46vw, 520px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--dark);
}
.cine-band img.ken-burns {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.5;
  will-change: transform;
}
.cine-band-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.45) 0%, rgba(8,8,8,0.62) 100%);
}
.cine-band-content { position: relative; z-index: 1; text-align: center; width: 100%; }
.cine-band-content .label { margin-bottom: 16px; }
.cine-band-h2 {
  font-size: clamp(28px, 4.5vw, 58px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
  color: #fff; max-width: 20ch; margin: 0 auto;
}
.cine-band-sub { color: rgba(255,255,255,0.72); font-size: 16px; margin: 14px auto 0; max-width: 50ch; }

/* ── 23t. "WHAT WE HANDLE" SERVICES GRID (homepage) ──────── */
.handle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.handle-tile {
  display: flex; flex-direction: column;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: box-shadow var(--dur-md), transform var(--dur-md), border-color var(--dur-md);
}
.handle-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-md); }
.handle-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--dark-3); }
.handle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.handle-tile:hover .handle-img img { transform: scale(1.05); }
.handle-tx { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; line-height: 1.3; }
.handle-tx strong { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.handle-tx span { font-size: 13px; color: var(--text-light); }
@media (max-width: 1024px) { .handle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .handle-grid { gap: 12px; } }

/* ── 23q. ANNOUNCEMENT BAR ───────────────────────────────── */
#announce {
  position: fixed; top: 0; left: 0; right: 0;
  min-height: 40px; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 8px 46px 8px 16px;
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600; text-align: center;
}
#announce strong { font-weight: 800; }
#announce .announce-link { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#announce .announce-link:hover { color: rgba(255,255,255,0.85); }
.announce-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: rgba(255,255,255,0.7);
}
.announce-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.announce-close svg { width: 15px; height: 15px; }
body.has-announce #site-nav { top: 40px; }
@media (max-width: 600px) { #announce { font-size: 12.5px; padding: 7px 42px 7px 12px; } }

/* ── 23r. COMING-SOON / TEASER + OFFERS ──────────────────── */
.coming-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red); background: rgba(211,32,39,0.10); border: 1px solid rgba(211,32,39,0.28);
  border-radius: 100px; padding: 7px 16px;
}
.coming-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

.offers-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.offer-card {
  position: relative; background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(28px,4vw,44px);
}
.offer-card--live { border-color: rgba(211,32,39,0.30); box-shadow: var(--shadow-md); }
.offer-card--soon { background: var(--bg); }
.offer-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; background: var(--red);
  border-radius: 100px; padding: 6px 14px; margin-bottom: 20px;
}
.offer-badge--soon { background: var(--text-light); }
.offer-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--red); margin-bottom: 18px; }
.offer-icon svg { width: 26px; height: 26px; }
.offer-title { font-size: clamp(24px,3.2vw,38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin-bottom: 14px; }
.offer-desc { font-size: 16px; line-height: 1.7; color: var(--text-mute); margin-bottom: 20px; }
.offer-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 18px; }
.offer-terms { font-size: 12px; line-height: 1.6; color: var(--text-light); margin: 0; }
@media (max-width: 860px) { .offers-grid { grid-template-columns: 1fr; } }

/* ── 23s. FOOTER SECONDARY LINKS ─────────────────────────── */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,0.45); transition: color var(--dur-sm); }
.footer-legal a:hover { color: var(--dark-text); }
.footer-legal .soon { color: rgba(255,255,255,0.3); }
.footer-legal .soon::after { content: ' · soon'; color: var(--red); font-weight: 700; }

/* ── 23p. ABOUT STATS BAND (dark, integrated — no floating box) ── */
.about-stats-band { background: var(--dark); padding: clamp(56px,7vw,88px) 0; }
.about-badge-row { display: flex; justify-content: center; margin-bottom: 36px; }
.about-badge-row .award-badge { width: 116px; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5)); }
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--dark-rule); border-radius: var(--r-lg);
  overflow: hidden;
}
.about-stat { padding: clamp(28px,4vw,44px) clamp(20px,3vw,32px); border-right: 1px solid var(--dark-rule); }
.about-stat:last-child { border-right: none; }
.about-stat-num {
  font-size: clamp(36px,5vw,60px); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--dark-text); margin-bottom: 12px;
}
.about-stat-num.stat-num-red { color: var(--red); }
.about-stat-lbl { font-size: 14px; font-weight: 600; color: var(--dark-mute); line-height: 1.4; }
@media (max-width: 760px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stat:nth-child(2) { border-right: none; }
  .about-stat:nth-child(1), .about-stat:nth-child(2) { border-bottom: 1px solid var(--dark-rule); }
}

/* ── 23j. MEGA MENU ──────────────────────────────────────── */
.nav-dropdown.nav-mega {
  left: 0;
  transform: translateX(0) translateY(8px);
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 8px 18px;
  min-width: 620px;
  padding: 18px;
}
.nav-item:hover .nav-dropdown.nav-mega,
.nav-item:focus-within .nav-dropdown.nav-mega {
  transform: translateX(0) translateY(0);
}
.nav-mega-col { display: flex; flex-direction: column; }
.nav-mega-col .dropdown-label { padding: 6px 12px 8px; }
.nav-mega a {
  padding: 8px 12px; min-height: 38px;
  font-size: 13.5px;
}
.nav-mega a .dd-sub { font-size: 11px; }
.nav-mega-col--actions { border-left: 1px solid var(--border); padding-left: 10px; }
.nav-mega-action {
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.nav-mega-action--primary {
  background: var(--red); color: #fff !important;
  border-radius: var(--r-sm); margin-top: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-mega-action--primary:hover { background: var(--red-dark); color: #fff !important; }
/* Constrain inline arrows in the nav (generated pages omitted explicit sizes) */
#site-nav .nav-cta-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
#site-nav .nav-mega-action svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── 23k. BRAND STRIP ────────────────────────────────────── */
.brand-strip { padding: clamp(40px,5vw,64px) 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.brand-strip-label { text-align: center; margin-bottom: 28px; }
.brand-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  max-width: 940px; margin: 0 auto;
}
.brand-chip {
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text-mute);
  padding: 8px 16px; border: 1px solid var(--border-md); border-radius: 100px;
  transition: color var(--dur-sm), border-color var(--dur-sm);
}
.brand-chip:hover { color: var(--ink); border-color: var(--ink); }

/* ── 23l. RELATED / "RECOMMENDED NEXT" ──────────────────── */
.related { padding: var(--section-v) 0; background: var(--bg); border-top: 1px solid var(--border); }
.related-head { margin-bottom: clamp(28px,4vw,44px); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px;
  transition: box-shadow var(--dur-md), transform var(--dur-md), border-color var(--dur-md);
}
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-md); }
.related-card-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.related-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.related-card p { font-size: 14px; line-height: 1.55; color: var(--text-mute); margin: 0; flex: 1; }
.related-card-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--red); margin-top: 6px; }
.related-card:hover .related-card-link { gap: 11px; }
.related-card-link svg { width: 15px; height: 15px; transition: all var(--dur-sm); }

/* ── 23m. FORM TRUST / CAPTCHA / FILE FIELDS ─────────────── */
.form-captcha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--border-md); border-radius: var(--r-md);
  padding: 14px 16px; margin: 4px 0 18px;
}
.form-captcha-q { font-size: 15px; font-weight: 700; color: var(--ink); }
.form-captcha input {
  width: 90px; padding: 10px 12px; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--border-md); border-radius: var(--r-sm); background: #fff;
}
.form-captcha input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.form-captcha-ok { color: #15803d; display: none; }
.form-captcha.is-ok .form-captcha-ok { display: inline-flex; }
.form-captcha-ok svg { width: 18px; height: 18px; }
.form-captcha.shake { animation: capShake 0.4s; border-color: var(--red); }
@keyframes capShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@media (prefers-reduced-motion: reduce){ .form-captcha.shake{ animation:none } }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.file-field { display: flex; flex-direction: column; gap: 8px; }
.file-dropzone {
  border: 2px dashed var(--border-md); border-radius: var(--r-md);
  padding: 22px; text-align: center; cursor: pointer; background: var(--bg);
  transition: border-color var(--dur-sm), background var(--dur-sm);
}
.file-dropzone:hover { border-color: var(--red); background: var(--bg-white); }
.file-dropzone svg { width: 26px; height: 26px; color: var(--red); margin-bottom: 8px; }
.file-dropzone p { font-size: 14px; margin: 0; color: var(--ink); font-weight: 600; }
.file-dropzone span { font-size: 12px; color: var(--text-light); }
.file-hint { font-size: 12px; color: var(--text-light); }
.file-hint a { color: var(--red); font-weight: 700; text-decoration: underline; }
.file-error { font-size: 13px; color: var(--red); font-weight: 600; display: none; }
.file-error.is-visible { display: block; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.file-chip svg { width: 12px; height: 12px; color: var(--red); }

/* ── 23n. BOOKING / GUIDE-REMINDER BANNER ────────────────── */
.guide-reminder {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(211,32,39,0.06); border: 1px solid rgba(211,32,39,0.22);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 20px;
}
.guide-reminder svg { width: 22px; height: 22px; color: var(--red); flex-shrink: 0; }
.guide-reminder p { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.guide-reminder a { color: var(--red); font-weight: 700; text-decoration: underline; }

/* ── 23o. BLOG ───────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--dur-md), transform var(--dur-md); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--dark-3); }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card-thumb img { transform: scale(1.05); }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.blog-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.blog-card p { font-size: 14px; line-height: 1.6; color: var(--text-mute); margin: 0; flex: 1; }
.article { max-width: 760px; margin: 0 auto; }
.article-hero-img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 36px; background: var(--dark-3); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-body p { font-size: 17px; line-height: 1.78; color: var(--text); margin-bottom: 20px; }
.article-body h2 { font-size: clamp(24px,3vw,34px); margin: 40px 0 14px; }
.article-body h3 { font-size: 21px; margin: 28px 0 10px; }
.article-body ul { margin: 0 0 20px; padding-left: 0; display: grid; gap: 12px; }
.article-body li { display: flex; gap: 12px; font-size: 17px; line-height: 1.6; color: var(--text); }
.article-meta { font-size: 13px; color: var(--text-light); font-weight: 600; margin-bottom: 24px; }

/* ── 23i. LEGACY COMPAT (quote.html / photo-guide.html) ──── */
:root {
  --bg-soft:  var(--bg);
  --rule:     var(--border);
  --ink-mute: var(--text-mute);
  --ink-soft: #2A2A2A;
  --edge:     var(--gutter);
  --ff:       var(--font);
}
.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
}
.eyebrow.light { color: rgba(255,255,255,0.7); }
h1.display, .display {
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.0;
}
.red { color: var(--red); }
.btn-ghost-light {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.35);
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
.btn-dark { background: var(--ink); color: #fff; border: 2px solid var(--ink); }
.btn-dark:hover { background: #000; }
.arrow { display: inline-block; }
/* legacy ticker (photo-guide) → thin red marquee */
.ticker { background: var(--red); overflow: hidden; }
.ticker-track {
  display: flex; gap: 48px; width: max-content;
  padding: 12px 0; animation: marquee 32s linear infinite;
}
.ticker-track span {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ── 24. RESPONSIVE — 1024px BREAKPOINT ─────────────────── */
@media (max-width: 1024px) {
  /* Nav: hide desktop items, show hamburger + compact CTA, push right */
  .nav-inner        { display: flex; align-items: center; justify-content: space-between; }
  .nav-list         { display: none; }
  .nav-phone-link   { display: none; }
  .nav-cta-pill.desktop-only { display: none; }
  .nav-cta-pill.mobile-only  { display: inline-flex; padding: 9px 16px; }
  .nav-right        { gap: 10px; }
  .nav-hamburger    { display: flex; }

  /* Two column → single column layouts */
  .story-grid   { grid-template-columns: 1fr; }
  .story-img-col { order: -1; }
  .story-img-wrap { aspect-ratio: 16 / 9; }
  .story-award { left: 16px; bottom: -22px; }

  .guide-grid { grid-template-columns: 1fr; }
  .calc-card  { position: relative; top: 0; }

  .coverage-grid { grid-template-columns: 1fr; }
  .coverage-img-wrap { order: -1; }

  .final-cta-details { grid-template-columns: 1fr; gap: 24px; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }

  /* Process: 2 columns on tablet */
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services: tighter */
  .svc-row { padding-left: 24px; padding-right: 24px; }
  .services-hdr { padding-left: 24px; padding-right: 24px; }
}

/* ── 25. RESPONSIVE — 768px BREAKPOINT ──────────────────── */
@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .work-cases       { grid-template-columns: 1fr; }
  .reviews-top      { grid-template-columns: 1fr; gap: 24px; }
  .reviews-grid     { grid-template-columns: 1fr; }
  .services-hdr     { flex-direction: column; align-items: flex-start; gap: 16px; }

  #baWrap { aspect-ratio: 4 / 3; }

  .process-grid { grid-template-columns: 1fr; }
  .related-grid, .blog-grid { grid-template-columns: 1fr; }

  .insights-hdr  { grid-template-columns: 1fr; gap: 16px; }
  .insights-grid { grid-template-columns: 1fr; }
  .welcome-grid  { grid-template-columns: 1fr; }
  .welcome-media { order: -1; }
  .welcome-img-wrap { aspect-ratio: 16 / 9; }
  .welcome-pillars { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-map-col { order: -1; }

  .ip-split { grid-template-columns: 1fr; gap: 36px; }
  .ip-split-media { order: -1; }

  /* footer links in two columns on mobile, brand full-width on top */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 28px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--dark-rule);   /* divider between brand and link grid */
  }
  .footer-col-title { margin-bottom: 14px; }
  .footer-col a { min-height: 42px; padding: 6px 0; }   /* comfier tap targets */
  .footer-contact-line a, .footer-contact-line { overflow-wrap: anywhere; }
  /* IAG chip + Find-nearest as a matched full-width pair */
  .footer-iag-badge { display: flex; width: 100%; justify-content: center; min-height: 44px; }
  .footer-locate { width: 100%; margin-top: 12px; }

  .final-cta-btns { flex-direction: column; align-items: flex-start; }
  .final-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ── 26. RESPONSIVE — 480px BREAKPOINT ──────────────────── */
@media (max-width: 480px) {
  /* Hero: bottom-anchored, balanced composition on phones */
  #hero {
    align-items: flex-end;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: clamp(40px, 12vw, 64px);
  }
  /* video plays on mobile too; strengthen overlay for text contrast */
  .hero-video-wrap::after {
    background: linear-gradient(
      178deg,
      rgba(8,8,8,0.40) 0%,
      rgba(8,8,8,0.40) 30%,
      rgba(8,8,8,0.88) 100%
    );
  }
  .hero-h1 {
    font-size: clamp(40px, 12.5vw, 56px);
    line-height: 0.98;
    margin-bottom: 18px;
    max-width: 14ch;
  }
  .hero-sub {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 38ch;
  }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-phone { text-align: center; padding: 6px 0; }
  .hero-badges {
    margin-top: 28px;
    padding-top: 22px;
    gap: 7px;
  }
  .hero-badge { font-size: 11px; padding: 6px 11px; }

  /* Slim down svc rows */
  .svc-row { grid-template-columns: 32px 1fr auto; gap: 12px; }

  /* Welcome pillars: single column on phones */
  .welcome-pillars { grid-template-columns: 1fr; gap: 24px; }

  /* Paint divider: shorter on phones */
  #paint-divider { min-height: 60svh; }

  /* Contact: stack form fields + locations */
  .cb-row { grid-template-columns: 1fr; gap: 0; }
  .contact-locations { grid-template-columns: 1fr; gap: 16px; }

  /* Trust strip: hide label, just marquee */
  .trust-strip-label { display: none; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── 27. MOBILE SCROLL FIX ───────────────────────────────── */
/* Disable Lenis + GSAP pinning on touch/mobile — native scroll only.
   The cinematic.js checks window.matchMedia('(max-width:1023px)').matches
   and skips initLenis() + all pin:true options on mobile. */

/* Prevent 100vh browser-bar jumping on mobile */
#hero, #final-cta {
  min-height: 100svh;
}
@supports not (min-height: 100svh) {
  #hero, #final-cta { min-height: -webkit-fill-available; }
}

/* ── 28. PREFERS-REDUCED-MOTION ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .trust-marquee       { animation: none !important; }
  .ken-burns           { transform: none !important; }
  .cinematic-pan       { transform: none !important; }
  .scroll-3d,
  .depth-card,
  .clip-transition,
  .section-headline .word-inner { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── 29. iOS SAFE AREAS ──────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #mobile-menu {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  #footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .hero-content {
    padding-bottom: max(clamp(60px,8vw,120px), env(safe-area-inset-bottom));
  }
}

/* ── 30. PRINT ───────────────────────────────────────────── */
@media print {
  #site-nav, #mobile-menu, #scroll-progress, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 12px; }
}