/* =============================================================
   MetroWide Mobile Mechanics - design system
   Brand blue sampled from logo: #0045AC
   ============================================================= */

/* -- Tokens ------------------------------------------------- */
:root {
  /* Brand */
  --blue:        #0045AC;
  --blue-700:    #003B96;
  --blue-800:    #00307A;
  --blue-50:     #E6EEF8;
  --blue-25:     #F4F8FD;

  /* Ink + neutrals */
  --ink:         #0F172A;
  --ink-soft:    #1E293B;
  --muted:       #475569;
  --muted-2:     #64748B;
  --line:        #E2E8F0;
  --line-strong: #CBD5E1;
  --bg:          #FFFFFF;
  --surface:     #F8FAFC;
  --surface-2:   #F1F5F9;

  /* Accent for stars only */
  --star:        #F59E0B;

  /* Radii + shadow + motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.04);
  --shadow-2: 0 6px 20px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-3: 0 18px 40px rgba(0,69,172,.14), 0 4px 12px rgba(15,23,42,.06);
  --shadow-card-hover: 0 14px 30px rgba(0,69,172,.10), 0 2px 6px rgba(15,23,42,.05);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1200px;
  --gutter: 24px;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* -- Reset-ish ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 17px; } }
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* -- Skip link ---------------------------------------------- */
.skip-link {
  position: absolute; top: -100px; left: 12px;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 1000;
}
.skip-link:focus { top: 12px; color: #fff; }

/* -- Layout primitives ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.anchor-top { display: block; height: 0; }

/* -- Type --------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: -0.018em; line-height: 1.12; }
h3 { letter-spacing: -0.014em; }
.display {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}
.eyebrow-on-dark { color: #BFD2EE; }
.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  margin: 18px 0 32px;
  max-width: 56ch;
}
.section-sub { color: var(--muted); max-width: 60ch; margin: 14px auto 0; }
.ink-blue { color: var(--blue); }

/* -- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  min-height: 44px;
  white-space: nowrap;
}
.btn-sm { padding: 10px 14px; font-size: 14px; min-height: 40px; }
.btn-lg { padding: 16px 22px; font-size: 16px; min-height: 52px; border-radius: 14px; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(0,69,172,.22);
}
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,69,172,.28); }
.btn-primary:active { transform: translateY(0); background: var(--blue-800); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: var(--surface); }

.btn-white {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.btn-white:hover { background: var(--blue-50); color: var(--blue-700); transform: translateY(-1px); }

.btn-block { display: flex; width: 100%; }
@media (max-width: 600px) { .btn-block-mobile { display: flex; width: 100%; } }

/* -- Header ------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hdr.is-scrolled {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.hdr-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}
.hdr-logo .logo-svg { height: 32px; width: auto; display: block; }
@media (min-width: 1024px) { .hdr-logo .logo-svg { height: 36px; } }

.hdr-nav { display: none; gap: 28px; flex: 1; justify-content: center; }
@media (min-width: 1024px) { .hdr-nav { display: flex; } }
.hdr-link {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.hdr-link:hover { color: var(--blue); }
.hdr-link.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.hdr-cta { display: flex; align-items: center; gap: 10px; }
/* U252: call button now visible at every viewport (was hidden below 640px). Removed redundant in-menu CTA. */
.hdr-phone { display: inline-flex; white-space: nowrap; }
.hdr-phone span { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
/* U252: tighten the call button on narrow phones so it fits alongside the logo + burger at 360px */
/* U255: on mobile, show only the phone icon (drop the number text) for a cleaner header */
@media (max-width: 479px) {
  .hdr-phone { padding: 0; width: 44px; height: 44px; gap: 0; border-radius: 12px; justify-content: center; }
  .hdr-phone span { display: none; }
  .hdr-phone svg { width: 20px; height: 20px; }
  .hdr-inner { gap: 12px; }
}
.hdr-burger {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.hdr-burger:hover { border-color: var(--line-strong); background: var(--surface); }
.hdr-burger span {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .hdr-burger { display: none; } }

/* -- Mobile menu ------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px var(--gutter) 28px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 24px 40px rgba(15,23,42,.08);
  animation: slideDown .25s var(--ease);
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; }
/* U250: scope link styling to nav links only  -the bottom .btn-primary needs its own white text */
.mobile-menu nav a {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:last-of-type { border-bottom: 0; }
/* U250: force white text on the bottom Call Mohammed button (specificity safety net over any inherited rule) */
.mobile-menu .btn-primary { color: #fff; }
.mobile-menu .btn-primary:hover,
.mobile-menu .btn-primary:active { color: #fff; }
.mobile-menu .btn { margin-top: 16px; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* -- Sections ---------------------------------------------- */
.section {
  padding: 72px 0;
}
@media (min-width: 768px) { .section { padding: 96px 0; } }
@media (min-width: 1024px) { .section { padding: 120px 0; } }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
@media (min-width: 1024px) { .section-head { margin-bottom: 64px; } }

/* -- Hero (U247: full-bleed photo, Jim's-style side-emerging gradient) ------- */
.hero,
.hero-photo {
  position: relative;
  padding: 96px 0 80px;
  min-height: 560px;
  background: #0A1626; /* fallback while image loads */
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero,
  .hero-photo {
    padding: 140px 0 130px;
    min-height: 680px;
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the focal subject (van + customer) toward the right side on desktop
     so the left-side gradient sits over the wider road/sky area, not over the subject */
  object-position: 70% center;
  display: block;
  /* No blur - this IS the hero, photoreal. Very mild brightness pull-down only,
     the gradient does the readability work. */
  filter: brightness(0.92) saturate(1.02);
  transform: scale(1.02);
}
@media (max-width: 767px) {
  /* U250: on mobile portrait the focal point should be the MetroWide van + customer area
     (right portion of the landscape source), not the engine bay (center) */
  .hero-bg-img { object-position: 88% center; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg-img {
    animation: heroBgZoom 28s linear infinite alternate;
  }
}
@keyframes heroBgZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  /* Jim's-style: dark on the left where text sits, fading clean to transparent
     on the right so the photo (van + customer + Ranger) breathes uninterrupted */
  background:
    linear-gradient(
      90deg,
      rgba(7, 17, 32, 0.88) 0%,
      rgba(7, 17, 32, 0.72) 28%,
      rgba(7, 17, 32, 0.38) 55%,
      rgba(7, 17, 32, 0.08) 80%,
      transparent 100%
    ),
    /* Subtle vertical floor-darken at the very bottom for CTA legibility */
    linear-gradient(180deg, transparent 65%, rgba(7, 17, 32, 0.35) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  /* On mobile the layout stacks; gradient becomes vertical so text-block on top
     of stacked image stays readable across the whole frame */
  .hero-bg-gradient {
    background:
      linear-gradient(
        180deg,
        rgba(7, 17, 32, 0.55) 0%,
        rgba(7, 17, 32, 0.40) 40%,
        rgba(7, 17, 32, 0.65) 80%,
        rgba(7, 17, 32, 0.82) 100%
      );
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (min-width: 1024px) {
  /* Single-column copy that occupies the left ~55% of the hero - image breathes
     in the right 45% behind the gradient fade */
  .hero-grid {
    grid-template-columns: minmax(0, 620px) 1fr;
    gap: 72px;
  }
  .hero-grid > .hero-copy { grid-column: 1; }
}

/* Light-on-dark typography for the photo hero, with text-shadow safety net
   so copy stays legible even if the photo region behind it changes */
.hero-photo .hero-copy .eyebrow {
  color: #9DC0FF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.hero-photo .hero-copy h1.display {
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.55);
}
.hero-photo .hero-copy .display .ink-blue { color: #9DC0FF; }
.hero-photo .hero-copy .lede {
  color: #E3EAF5;
  max-width: 56ch;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 32px;
}
.hero-trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  color: #D2DCEB;
  font-size: 14.5px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { color: #9DC0FF; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }

/* Ghost CTA variant for use on photographic hero backgrounds */
.btn-ghost-light {
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.65);
  color: #FFFFFF;
}

/* Hero entry animation cascade (fires on page load, no scroll trigger required) */
.hero-anim {
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-anim-h1 { transform: translate(-12px, 14px); animation-name: heroFadeSlide; }

.hero-anim-eyebrow { animation-delay: 200ms; animation-duration: 600ms; }
.hero-anim-h1      { animation-delay: 400ms; animation-duration: 700ms; }
.hero-anim-lede    { animation-delay: 650ms; animation-duration: 600ms; }
.hero-anim-cta1    { animation-delay: 900ms; animation-duration: 500ms; }
.hero-anim-cta2    { animation-delay: 1000ms; animation-duration: 500ms; }
.hero-anim-trust1  { animation-delay: 1100ms; animation-duration: 400ms; }
.hero-anim-trust2  { animation-delay: 1200ms; animation-duration: 400ms; }
.hero-anim-trust3  { animation-delay: 1300ms; animation-duration: 400ms; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeSlide {
  to { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1; transform: none; animation: none; }
  .hero-bg-img { animation: none; transform: none; }
}
.report-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-3);
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform .4s var(--ease);
}
.report-card:hover { transform: perspective(1200px) rotateY(-1deg) rotateX(1deg) translateY(-4px); }
@media (max-width: 1023px) { .report-card { transform: none; max-width: 420px; } .report-card:hover { transform: translateY(-2px); } }
.report-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.report-brand svg { height: 22px; width: auto; display: block; }
.report-vehicle { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.report-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-2); margin: 0 0 4px; font-weight: 600; }
.report-value { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0; }
.report-value-sm { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); margin: 0; }
.report-list {
  list-style: none; padding: 14px 0 6px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.report-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.report-list .check {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: var(--blue-50);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.report-list .check::after {
  content: ""; position: absolute;
  width: 9px; height: 5px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg) translate(0, -1px);
}
.report-list .ok {
  font-size: 12px; font-weight: 600; color: var(--muted-2);
}
.report-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px solid var(--line);
}
.report-foot .stamp {
  color: var(--blue);
  background: var(--blue-50);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid rgba(0,69,172,.12);
}
.pill-success {
  background: rgba(16,185,129,.10);
  color: #047857;
  border-color: rgba(16,185,129,.20);
}
.pill-success svg { color: #047857; }

/* -- Services: scroll-triggered zone diagram (U244) ------ */
.section-services { background: var(--bg); }

.services-zone-diagram {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 28px -10px rgba(15,23,42,.08);
  margin-bottom: 16px;
}
.services-zone-stage { position: relative; }
.services-zone-img { display: block; width: 100%; height: auto; }

.services-zone-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Zone groups: focusable, clickable. Hitbox is the invisible click target; shape is the visible highlight. */
.services-zone-overlay .zone {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.services-zone-overlay .zone-hitbox {
  fill: transparent;
  pointer-events: all;
}

/* Zone shapes: invisible by default, fade in when their data-revealed-{slug}=true attribute is set */
.services-zone-overlay .zone-shape {
  fill: rgba(45, 130, 230, .18);
  stroke: rgba(0, 69, 172, .65);
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease, fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease, filter 220ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Tethers + anchors: invisible by default, fade in on reveal */
.services-zone-overlay .zone-tethers path,
.services-zone-overlay .zone-tether-halos path,
.services-zone-overlay .zone-anchors circle {
  opacity: 0;
  transition: opacity 700ms ease;
}
/* Tether brand-blue overlay paths: draw-in via stroke-dasharray when revealed.
   pathLength=100 on each path normalises the dasharray so 100 covers the line. */
.services-zone-overlay .zone-tethers path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* U286: smooth stroke/filter on hover-highlight */
  transition:
    opacity 500ms ease,
    stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1),
    stroke 220ms ease,
    stroke-width 220ms ease,
    filter 220ms ease;
}
.services-zone-overlay .zone-anchors circle {
  /* U286: smooth radius/fill/glow on hover-highlight */
  transition: opacity 700ms ease, r 220ms ease, fill 220ms ease, filter 220ms ease;
}
.services-zone-overlay .zone-shape {
  transition: fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease, opacity 220ms ease, filter 220ms ease;
}
.services-zone-diagram[data-revealed-routine="true"]   .zone-tethers [data-tether="routine"],
.services-zone-diagram[data-revealed-bonnet="true"]    .zone-tethers [data-tether="bonnet"],
.services-zone-diagram[data-revealed-wheels="true"]    .zone-tethers [data-tether="wheels"],
.services-zone-diagram[data-revealed-underbody="true"] .zone-tethers [data-tether="underbody"] {
  stroke-dashoffset: 0;
}
/* End-dot pulse where each tether touches the zone */
@media (prefers-reduced-motion: no-preference) {
  .services-zone-anchors circle,
  .services-zone-overlay .zone-anchors circle {
    transform-box: fill-box;
    transform-origin: center;
  }
  .services-zone-diagram[data-revealed-routine="true"]   [data-anchor="routine"],
  .services-zone-diagram[data-revealed-bonnet="true"]    [data-anchor="bonnet"],
  .services-zone-diagram[data-revealed-wheels="true"]    [data-anchor="wheels"],
  .services-zone-diagram[data-revealed-underbody="true"] [data-anchor="underbody"] {
    animation: anchorPulse 2.5s ease-in-out infinite;
  }
}
@keyframes anchorPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

/* REVEAL state: each zone's shape + tether + anchor fades in when its data-revealed-{slug} attribute flips to true */
.services-zone-diagram[data-revealed-routine="true"]   .zone[data-zone-trigger="routine"]   .zone-shape,
.services-zone-diagram[data-revealed-bonnet="true"]    .zone[data-zone-trigger="bonnet"]    .zone-shape,
.services-zone-diagram[data-revealed-wheels="true"]    .zone[data-zone-trigger="wheels"]    .zone-shape,
.services-zone-diagram[data-revealed-underbody="true"] .zone[data-zone-trigger="underbody"] .zone-shape {
  opacity: 1;
}
.services-zone-diagram[data-revealed-routine="true"]   [data-tether="routine"],
.services-zone-diagram[data-revealed-routine="true"]   [data-anchor="routine"],
.services-zone-diagram[data-revealed-bonnet="true"]    [data-tether="bonnet"],
.services-zone-diagram[data-revealed-bonnet="true"]    [data-anchor="bonnet"],
.services-zone-diagram[data-revealed-wheels="true"]    [data-tether="wheels"],
.services-zone-diagram[data-revealed-wheels="true"]    [data-anchor="wheels"],
.services-zone-diagram[data-revealed-underbody="true"] [data-tether="underbody"],
.services-zone-diagram[data-revealed-underbody="true"] [data-anchor="underbody"] {
  opacity: 1;
}

/* ACTIVE-zone focus (bonus interaction): user taps/clicks a zone to brighten it and dim others. Layered ON TOP of reveal state. */
.services-zone-diagram[data-active-zone="routine"]   .zone[data-zone-trigger="routine"]   .zone-shape,
.services-zone-diagram[data-active-zone="bonnet"]    .zone[data-zone-trigger="bonnet"]    .zone-shape,
.services-zone-diagram[data-active-zone="wheels"]    .zone[data-zone-trigger="wheels"]    .zone-shape,
.services-zone-diagram[data-active-zone="underbody"] .zone[data-zone-trigger="underbody"] .zone-shape,
/* U286: hover-zone mirrors active-zone for car-shape brighten */
.services-zone-diagram[data-hover-zone="routine"]:not([data-active-zone=""])   .zone[data-zone-trigger="routine"]   .zone-shape,
.services-zone-diagram[data-hover-zone="bonnet"]:not([data-active-zone=""])    .zone[data-zone-trigger="bonnet"]    .zone-shape,
.services-zone-diagram[data-hover-zone="wheels"]:not([data-active-zone=""])    .zone[data-zone-trigger="wheels"]    .zone-shape,
.services-zone-diagram[data-hover-zone="underbody"]:not([data-active-zone=""]) .zone[data-zone-trigger="underbody"] .zone-shape,
.services-zone-diagram[data-hover-zone="routine"]   .zone[data-zone-trigger="routine"]   .zone-shape,
.services-zone-diagram[data-hover-zone="bonnet"]    .zone[data-zone-trigger="bonnet"]    .zone-shape,
.services-zone-diagram[data-hover-zone="wheels"]    .zone[data-zone-trigger="wheels"]    .zone-shape,
.services-zone-diagram[data-hover-zone="underbody"] .zone[data-zone-trigger="underbody"] .zone-shape {
  fill: rgba(45, 130, 230, .40);
  stroke: rgba(0, 69, 172, .98);
  stroke-width: 5;
  filter: drop-shadow(0 4px 14px rgba(0,69,172,.55));
}
.services-zone-diagram[data-active-zone="routine"]   .zone:not([data-zone-trigger="routine"])   .zone-shape,
.services-zone-diagram[data-active-zone="bonnet"]    .zone:not([data-zone-trigger="bonnet"])    .zone-shape,
.services-zone-diagram[data-active-zone="wheels"]    .zone:not([data-zone-trigger="wheels"])    .zone-shape,
.services-zone-diagram[data-active-zone="underbody"] .zone:not([data-zone-trigger="underbody"]) .zone-shape,
/* U286: hover-zone also dims the OTHER zones (mirror of active behaviour) */
.services-zone-diagram[data-hover-zone="routine"]   .zone:not([data-zone-trigger="routine"])   .zone-shape,
.services-zone-diagram[data-hover-zone="bonnet"]    .zone:not([data-zone-trigger="bonnet"])    .zone-shape,
.services-zone-diagram[data-hover-zone="wheels"]    .zone:not([data-zone-trigger="wheels"])    .zone-shape,
.services-zone-diagram[data-hover-zone="underbody"] .zone:not([data-zone-trigger="underbody"]) .zone-shape {
  opacity: .25;
}

/* U286: highlighted tether path  -thicker stroke + brighter blue + sharper glow */
.services-zone-diagram[data-active-zone="routine"]   .zone-tethers [data-tether="routine"],
.services-zone-diagram[data-active-zone="bonnet"]    .zone-tethers [data-tether="bonnet"],
.services-zone-diagram[data-active-zone="wheels"]    .zone-tethers [data-tether="wheels"],
.services-zone-diagram[data-active-zone="underbody"] .zone-tethers [data-tether="underbody"],
.services-zone-diagram[data-hover-zone="routine"]   .zone-tethers [data-tether="routine"],
.services-zone-diagram[data-hover-zone="bonnet"]    .zone-tethers [data-tether="bonnet"],
.services-zone-diagram[data-hover-zone="wheels"]    .zone-tethers [data-tether="wheels"],
.services-zone-diagram[data-hover-zone="underbody"] .zone-tethers [data-tether="underbody"] {
  stroke: rgba(0, 69, 172, 1);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px rgba(45,130,230,.65));
}
.services-zone-diagram[data-active-zone="routine"]   .zone-anchors [data-anchor="routine"],
.services-zone-diagram[data-active-zone="bonnet"]    .zone-anchors [data-anchor="bonnet"],
.services-zone-diagram[data-active-zone="wheels"]    .zone-anchors [data-anchor="wheels"],
.services-zone-diagram[data-active-zone="underbody"] .zone-anchors [data-anchor="underbody"],
.services-zone-diagram[data-hover-zone="routine"]   .zone-anchors [data-anchor="routine"],
.services-zone-diagram[data-hover-zone="bonnet"]    .zone-anchors [data-anchor="bonnet"],
.services-zone-diagram[data-hover-zone="wheels"]    .zone-anchors [data-anchor="wheels"],
.services-zone-diagram[data-hover-zone="underbody"] .zone-anchors [data-anchor="underbody"] {
  r: 9;
  fill: rgba(0, 69, 172, 1);
  filter: drop-shadow(0 0 8px rgba(45,130,230,.85));
}

/* U286: highlighted PANEL  -lift, glow border, brighter surface
   U287: SCOPED TO DESKTOP (>=768) ONLY. On mobile the panel is a light card with dark text
   (.zone-panel[data-zone-panel] > ul color: var(--ink)), so applying the dark glassmorphic
   background here used to render dark text on dark blue = unreadable. */
@media (min-width: 768px) {
  .services-zone-diagram[data-active-zone="routine"]   .zone-panel[data-zone-panel="routine"],
  .services-zone-diagram[data-active-zone="bonnet"]    .zone-panel[data-zone-panel="bonnet"],
  .services-zone-diagram[data-active-zone="wheels"]    .zone-panel[data-zone-panel="wheels"],
  .services-zone-diagram[data-active-zone="underbody"] .zone-panel[data-zone-panel="underbody"],
  .services-zone-diagram[data-hover-zone="routine"]   .zone-panel[data-zone-panel="routine"],
  .services-zone-diagram[data-hover-zone="bonnet"]    .zone-panel[data-zone-panel="bonnet"],
  .services-zone-diagram[data-hover-zone="wheels"]    .zone-panel[data-zone-panel="wheels"],
  .services-zone-diagram[data-hover-zone="underbody"] .zone-panel[data-zone-panel="underbody"] {
    background: rgba(15, 42, 85, 0.92);
    border-color: rgba(45, 130, 230, .55);
    transform: translateY(-3px) scale(1.025);
    box-shadow:
      0 26px 50px -14px rgba(0,0,0,.5),
      0 0 0 1px rgba(45,130,230,.35),
      0 0 28px rgba(45,130,230,.35),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.18);
    z-index: 3;
  }
  /* When one panel is highlighted, dim the others */
  .services-zone-diagram[data-active-zone="routine"]   .zone-panel:not([data-zone-panel="routine"]),
  .services-zone-diagram[data-active-zone="bonnet"]    .zone-panel:not([data-zone-panel="bonnet"]),
  .services-zone-diagram[data-active-zone="wheels"]    .zone-panel:not([data-zone-panel="wheels"]),
  .services-zone-diagram[data-active-zone="underbody"] .zone-panel:not([data-zone-panel="underbody"]),
  .services-zone-diagram[data-hover-zone="routine"]   .zone-panel:not([data-zone-panel="routine"]),
  .services-zone-diagram[data-hover-zone="bonnet"]    .zone-panel:not([data-zone-panel="bonnet"]),
  .services-zone-diagram[data-hover-zone="wheels"]    .zone-panel:not([data-zone-panel="wheels"]),
  .services-zone-diagram[data-hover-zone="underbody"] .zone-panel:not([data-zone-panel="underbody"]) {
    opacity: .55;
  }
}

/* Hover (desktop fine-pointer): subtle brighten without setting active state */
@media (hover: hover) and (pointer: fine) {
  .services-zone-overlay .zone:hover .zone-shape {
    fill: rgba(45, 130, 230, .28);
    stroke-width: 5;
  }
}

/* Keyboard focus ring on the visible shape */
.services-zone-overlay .zone:focus-visible .zone-shape {
  stroke: var(--blue);
  stroke-width: 6;
  stroke-dasharray: 8 5;
}

/* Subtitle below the photo (replaces the U243 instruction text). Persistent. */
.zone-subtitle {
  margin: 16px 18px 4px;
  padding: 0;
  text-align: center;
  color: #6B7280;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Panels container: absolute overlay on desktop (floats), static block on mobile (stacks below photo) */
.zone-panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Panel default: invisible (revealed by the matching data-revealed-{slug}=true attribute).
   Glassmorphic translucent dark-blue surface that integrates with the photo behind it. */
.zone-panel {
  position: absolute;
  background: rgba(15, 42, 85, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.18);
  pointer-events: none;
  font-family: var(--font-body);
  overflow: hidden;
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(8px);
  /* U286: short transitions on hover-affected properties; longer on reveal opacity */
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 280ms ease;
}
.zone-panel header {
  display: block;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.zone-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zone-panel[data-zone-panel="bonnet"] ul,
.zone-panel-cols ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.zone-panel li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.zone-panel li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #93C0FF;
  line-height: 1.35;
}

/* Revealed panels: visible + interactive (persistent, no dismiss) */
.services-zone-diagram[data-revealed-routine="true"]   .zone-panel[data-zone-panel="routine"],
.services-zone-diagram[data-revealed-bonnet="true"]    .zone-panel[data-zone-panel="bonnet"],
.services-zone-diagram[data-revealed-wheels="true"]    .zone-panel[data-zone-panel="wheels"],
.services-zone-diagram[data-revealed-underbody="true"] .zone-panel[data-zone-panel="underbody"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* prefers-reduced-motion: snap reveals instead of animating */
@media (prefers-reduced-motion: reduce) {
  .services-zone-overlay .zone-shape,
  .services-zone-overlay .zone-tethers path,
  .services-zone-overlay .zone-tether-halos path,
  .services-zone-overlay .zone-anchors circle,
  .zone-panel {
    transition: none;
  }
}

/* Mobile (<768): panels stack below photo as full-width cards (no floating, no tethers) */
/* U251 desktop default: hide hotspot badges + per-panel mobile chrome (num badge + chevron). Only the title span renders inside the panel header. */
.zone-hotspots { display: none; }
.zone-panel-num,
.zone-panel-toggle { display: none; }
.zone-panel header { display: block; }

/* U251 mobile: sticky photo + numbered hotspot badges + accordion-stacked panels */
@media (max-width: 767px) {
  /* U349: strip outer-card styling on mobile so we don't get nested white
     cards. The stage card (below) is the visible card; the diagram becomes
     a transparent layout wrapper so the car image sits flush at the top of
     the stage card with no parent-card padding showing through. */
  .services-zone-diagram {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  /* Photo sticks under the page header (.hdr is sticky, min-height 72px) so the car stays referenced as the user scrolls the cards below */
  .services-zone-stage {
    position: sticky;
    top: 72px;
    z-index: 5;
    background: #FFFFFF;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  /* The 2000x1333 SVG overlays + hitboxes don't read at narrow widths; hide them and let the percent-positioned numbered badges do the pointing */
  .services-zone-overlay .zone-tethers,
  .services-zone-overlay .zone-tether-halos,
  .services-zone-overlay .zone-anchors,
  .services-zone-overlay .zone-hitbox { display: none; }

  /* Hotspot badges: absolute over the photo via inline % style, centre-anchored */
  .zone-hotspots {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  /* U253: shrink visual to 28x28 while preserving 44x44 tap target via ::before */
  /* U287: phone numbers were too big - 28->22 visual, font 13->11. 44x44 tap target preserved via ::before */
  .zone-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0045AC;
    color: #FFFFFF;
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 2px #FFFFFF, 0 3px 8px rgba(15,23,42,0.28);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  }
  /* Expanded tap area: a11y 44x44 hit target without inflating the visible circle */
  /* U287: visual shrunk to 22 -> bump tap-target inset to -11px to keep 44x44 */
  .zone-hotspot::before {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
  }
  @media (prefers-reduced-motion: no-preference) {
    .zone-hotspot {
      animation: hotspotPulse 2s ease-in-out infinite;
    }
  }
  @keyframes hotspotPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.06); }
  }
  .zone-hotspot:hover,
  .zone-hotspot:focus-visible {
    background: var(--blue-700);
    outline: none;
  }
  .zone-hotspot.is-active {
    background: var(--blue-700);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(0,69,172,0.32), 0 5px 12px rgba(0,69,172,0.40);
    animation: none;
  }

  /* Panels drop out of absolute layout and stack as accordion cards below the sticky photo.
     U254: top padding bumped 16->32px so the first card has clear separation from the sticky
     photo bottom edge (was reading as overlap). */
  .zone-panels {
    position: relative;
    inset: auto;
    pointer-events: auto;
    padding: 32px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .zone-panel {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    /* U254: when JS scrolls an opened card into view, offset for sticky header (72px) + sticky photo (~260px on mobile) so the card header doesn't tuck under the photo */
    scroll-margin-top: 340px;
    margin-top: 0;
    padding: 0;
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--ink);
    border: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(15,23,42,.06);
    transform: none;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .zone-panel.is-open {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(0,69,172,0.16);
  }

  /* Card header is a flex row: number badge | title | chevron
     U287: whole header is the click target (not just the chevron) */
  .zone-panel header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0;
    border-bottom: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.012em;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,69,172,0.08);
  }
  .zone-panel header:hover .zone-panel-toggle,
  .zone-panel header:focus-visible .zone-panel-toggle {
    color: var(--blue);
    background: var(--blue-50);
  }
  /* U287: shrunk 28->22, font 14->12 to match the smaller hotspot badges on the photo */
  .zone-panel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1;
  }
  .zone-panel-title { flex: 1 1 auto; }
  .zone-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color .15s var(--ease), background-color .15s var(--ease);
  }
  .zone-panel-toggle:hover,
  .zone-panel-toggle:focus-visible {
    color: var(--blue);
    background: var(--blue-50);
    outline: none;
  }
  .zone-panel-toggle .chev {
    transition: transform .25s var(--ease);
  }
  .zone-panel-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

  /* Body list hidden when card is closed, expanded when .is-open.
     U253: specificity bumped via [data-zone-panel] to beat the desktop rule
     .zone-panel[data-zone-panel="bonnet"] ul (0,2,1) which was forcing the
     bonnet card open on mobile regardless of .is-open state. */
  /* U287: padding-left 56->50 to align with shrunk 22px number badge */
  .zone-panel[data-zone-panel] > ul {
    list-style: none;
    margin: 0;
    padding: 0 16px 16px 50px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
  }
  .zone-panel[data-zone-panel].is-open > ul { display: grid; }
  .zone-panel li {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
  }
  .zone-panel li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--blue);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Tablet (768-1023): keep floating panels at smaller type, tethers still render */
@media (min-width: 768px) and (max-width: 1023px) {
  .zone-panel header { font-size: 15px; }
  .zone-panel li     { font-size: 12px; }
}

.services-note {
  text-align: center; margin: 40px auto 0; color: var(--muted);
  font-size: 15px;
}

.ppi-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 760px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid rgba(0, 69, 172, .12);
  border-left: 4px solid #0045AC;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 69, 172, .06);
}
.ppi-icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(0, 69, 172, .08);
  color: #0045AC;
  display: flex; align-items: center; justify-content: center;
}
.ppi-body { flex: 1 1 auto; }
.ppi-body .eyebrow { margin: 0 0 4px; }
.ppi-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
  color: #0B1B33;
}
.ppi-body p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.ppi-body .link-arrow { font-size: 14.5px; }

@media (max-width: 560px) {
  .ppi-card { flex-direction: column; gap: 14px; padding: 22px 20px; }
  .ppi-icon { width: 48px; height: 48px; }
}
.link-arrow {
  color: var(--blue); font-weight: 600;
}
.link-arrow:hover { color: var(--blue-700); }

/* -- About -------------------------------------------------- */
.section-about { background: var(--surface); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; }
}
.about-photo { position: relative; }
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(600px 240px at 30% 30%, rgba(0,69,172,.12), transparent 60%),
    linear-gradient(180deg, #EEF3FB 0%, #DDE6F3 100%);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.photo-placeholder-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  /* U250: white background instead of yellow  -less jarring during client preview */
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.10) inset;
  font-family: var(--font-display);
  text-align: left;
  max-width: calc(100% - 32px);
}
.photo-placeholder-badge strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.photo-placeholder-badge span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .85;
}
@media (min-width: 900px) {
  .photo-placeholder-badge strong { font-size: 15px; }
  .photo-placeholder-badge span   { font-size: 12.5px; }
}
.photo-placeholder {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  color: var(--blue-700);
}
.photo-placeholder svg { opacity: .55; }
.photo-placeholder p {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-700);
  letter-spacing: .01em;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.about-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600; font-size: 13.5px;
  box-shadow: var(--shadow-2);
  position: absolute; right: 16px; bottom: -16px;
}
.about-badge svg { color: var(--blue); }
.about-copy p { color: var(--muted); margin: 14px 0; font-size: 17px; line-height: 1.7; max-width: 60ch; }
.about-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.about-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  font-size: 15.5px;
  color: var(--muted);
}
.about-list strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
@media (max-width: 600px) {
  .about-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* -- How it works ----------------------------------------- */
.section-how { background: var(--bg); }
.how-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: how;
}
@media (min-width: 768px) {
  .how-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
}
.how-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex;
  flex-direction: column;
}
/* Stagger the how-it-works cards (light touch, scroll-reveal-friendly) */
.how-card.reveal { transition-delay: 0ms; }
.how-card.reveal:nth-child(2) { transition-delay: 100ms; }
.how-card.reveal:nth-child(3) { transition-delay: 200ms; }
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.how-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg);
}
.how-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.how-card:hover .how-media img { transform: scale(1.03); }
.how-card .how-num {
  margin: 24px 26px 14px;
}
.how-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 26px 8px;
}
.how-card p {
  color: var(--muted);
  margin: 0 26px 28px;
  line-height: 1.6;
}
.how-num {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--blue);
  background: #fff;
  border: 1px solid rgba(0,69,172,.18);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
}

/* -- Hero trust bar (directly below hero) ------------------ */
.hero-trust-bar {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.htb-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
@media (min-width: 768px) {
  .htb-list { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
/* U349: icon now sits inline next to the heading; body text drops below.
   Replaces the previous icon-left / text-right layout that left the icon
   floating in the middle of a wrapped 2-line title on phone. */
.htb-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
  font-size: 13px;
  color: var(--muted);
}
.htb-list .htb-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.htb-list .htb-icon {
  flex: 0 0 auto;
  color: var(--blue);
  background: var(--blue-50);
  border-radius: 50%;
  padding: 7px;
  width: 32px; height: 32px;
  box-sizing: border-box;
}
.htb-list strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.htb-list .htb-body {
  display: block;
  padding-left: 42px; /* 32px icon + 10px gap — aligns body left edge with title start */
}
@media (min-width: 768px) {
  .htb-list li { font-size: 13.5px; }
  .htb-list strong { font-size: 15.5px; }
  .htb-list .htb-icon { width: 34px; height: 34px; }
  .htb-list .htb-body { padding-left: 44px; }
}

/* -- Trust strip (brand logos) ---------------------------- */
.section-trust { background: var(--surface); }
.brand-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px 28px;
  padding: 8px 0;
  margin: 0 auto;
  max-width: 980px;
}
.brand-strip .brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink-soft);
  opacity: .45;
  transition: opacity .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.brand-strip .brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-strip .brand-logo:hover {
  opacity: .95;
  color: var(--blue);
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .brand-strip { gap: 22px 38px; }
  .brand-strip .brand-logo { width: 52px; height: 52px; }
}

/* -- Testimonials ----------------------------------------- */
.section-tests { background: var(--bg); }

.tests-source {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 14px; color: var(--muted-2);
  font-weight: 500;
}
.tests-source-stars { display: inline-flex; gap: 1px; color: var(--star); }

/* Carousel ------------------------------------------------ */
.testimonial-carousel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 8px;
}
.testimonial-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.testimonial-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 480ms cubic-bezier(.4, .0, .2, 1);
  will-change: transform;
}
.testimonial-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 4px;
  box-sizing: border-box;
}
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  margin: 0;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}
.testimonial::before {
  content: "“";
  position: absolute; top: 4px; right: 22px;
  font-family: var(--font-display);
  font-size: 72px; line-height: 1; color: var(--blue-50);
  font-weight: 800;
}
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.testimonial blockquote p { margin: 0; }
.testimonial figcaption {
  display: flex; flex-direction: column;
  color: var(--muted-2);
  font-size: 14px;
  margin-top: auto;
}
.testimonial figcaption strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; }

/* Carousel nav arrows ------------------------------------- */
.testimonial-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  z-index: 2;
  padding: 0;
}
.testimonial-nav:hover,
.testimonial-nav:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  transform: translateY(-50%) scale(1.05);
}
.testimonial-nav:focus-visible {
  outline: 2px solid var(--blue-50, currentColor);
  outline-offset: 2px;
}
.testimonial-nav-prev { left: -10px; }
.testimonial-nav-next { right: -10px; }

@media (min-width: 900px) {
  .testimonial-nav { display: inline-flex; }
  .testimonial-nav-prev { left: -56px; }
  .testimonial-nav-next { right: -56px; }
}

/* Carousel dots ------------------------------------------- */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.testimonial-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, width 240ms ease;
}
.testimonial-dot:hover { background: var(--muted-2); }
.testimonial-dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.testimonial-dot.is-active {
  background: var(--ink);
  width: 24px;
  border-radius: 999px;
}

/* Slide visibility for a11y ------------------------------- */
.testimonial-slide[aria-hidden="true"] .testimonial { /* let CSS handle visual; track scrolls */ }

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { transition: none; }
  .testimonial-dot { transition: none; }
  .testimonial-nav { transition: none; }
}

/* -- Service area ----------------------------------------- */
.section-area { background: var(--surface); }
.area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
@media (min-width: 900px) {
  .area-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
}
.area-copy p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0 0 22px; max-width: 50ch; }

/* Map legend (single-line caption) */
.area-legend-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.area-legend-line .lg-dot {
  width: 12px; height: 12px;
  background: var(--blue);
  border-radius: 50%;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 0 0 1.5px var(--blue);
  flex: 0 0 auto;
}

/* Map */
.area-map {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 28px -10px rgba(15,23,42,.08);
}
.area-map-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1536 / 1024;
}
.area-map-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.area-map-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.area-map-dots .dot {
  fill: var(--blue);
  stroke: #FFFFFF;
  stroke-width: 4;
  filter: drop-shadow(0 2px 3px rgba(0,69,172,.40));
  transition: fill .15s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
/* Map dots drop-in on map reveal (each dot scale 0 → 1 with 30ms stagger) */
@media (prefers-reduced-motion: no-preference) {
  .area-map.reveal:not(.is-in) .area-map-dots .dot { transform: scale(0); opacity: 0; }
  .area-map.reveal.is-in .area-map-dots .dot {
    animation: mapDotDrop 380ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .area-map-dots .dot:nth-child(1)  { animation-delay: 30ms; }
  .area-map-dots .dot:nth-child(2)  { animation-delay: 60ms; }
  .area-map-dots .dot:nth-child(3)  { animation-delay: 90ms; }
  .area-map-dots .dot:nth-child(4)  { animation-delay: 120ms; }
  .area-map-dots .dot:nth-child(5)  { animation-delay: 150ms; }
  .area-map-dots .dot:nth-child(6)  { animation-delay: 180ms; }
  .area-map-dots .dot:nth-child(7)  { animation-delay: 210ms; }
  .area-map-dots .dot:nth-child(8)  { animation-delay: 240ms; }
  .area-map-dots .dot:nth-child(9)  { animation-delay: 270ms; }
  .area-map-dots .dot:nth-child(10) { animation-delay: 300ms; }
  .area-map-dots .dot:nth-child(n+11) { animation-delay: 330ms; }
  .area-map-dots .dot:nth-child(n+15) { animation-delay: 380ms; }
  .area-map-dots .dot:nth-child(n+20) { animation-delay: 430ms; }
  .area-map-dots .dot:nth-child(n+25) { animation-delay: 480ms; }
  .area-map-dots .dot:nth-child(n+30) { animation-delay: 530ms; }
}
@keyframes mapDotDrop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.area-map-dots .dot-pulse {
  animation: dotPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes dotPulse {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0,69,172,.40)); }
  50%      { filter: drop-shadow(0 0 9px rgba(0,69,172,.75)); }
}

/* U246: auto-scrolling marquee of suburb names. Decorative; the visually-hidden ul is the a11y/SEO source. */
.suburb-marquee {
  overflow: hidden;
  margin: 36px 0 24px;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.suburb-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: suburbScroll 60s linear infinite;
  will-change: transform;
}
.suburb-marquee:hover .suburb-track { animation-play-state: paused; }
.suburb-pill {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 69, 172, 0.06);
  color: #1F407A;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid rgba(0, 69, 172, 0.18);
  white-space: nowrap;
  font-family: var(--font-display);
}
@keyframes suburbScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .suburb-marquee { mask-image: none; -webkit-mask-image: none; }
  .suburb-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }
  /* Static list: hide the duplicate set */
  .suburb-track .suburb-pill[aria-hidden="true"] { display: none; }
}

/* Map tagline (replaces the old suburb chip grid) */
.area-tagline {
  margin: 28px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.area-tagline .link-arrow { white-space: nowrap; }

/* Screen-reader-only utility (SEO suburb list lives in here) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .melbourne-map .dot-pulse { animation: none; }
}

/* -- FAQ --------------------------------------------------- */
.section-faq { background: var(--bg); }
.faq-wrap { max-width: 860px; }
.faq-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  transition: color .15s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item .chev {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
  transition: transform .25s var(--ease);
}
.faq-item .chev::before,
.faq-item .chev::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.faq-item .chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] summary { color: var(--blue); }
.faq-item[open] .chev::before,
.faq-item[open] .chev::after { background: var(--blue); }
.faq-item p {
  margin: 0 4px 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
}
@media (min-width: 768px) {
  .faq-item summary { font-size: 19px; padding: 26px 4px; }
}

/* -- Contact ----------------------------------------------- */
.section-contact {
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #062263 0%, #001340 100%);
  color: #fff;
}
.section-contact .h2 { color: #fff; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.h2-on-dark { color: #fff; }
.contact-lede {
  color: #C4D2EC;
  font-size: 18px;
  line-height: 1.65;
  margin: 18px 0 28px;
  max-width: 44ch;
}
.contact-meta {
  list-style: none; padding: 0;
  margin: 32px 0 0;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.14);
}
.contact-meta li {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 14.5px;
}
.contact-meta li:last-child { border-bottom: 0; }
.contact-meta span { color: #8CA4CC; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; align-self: center; }
.contact-meta strong { color: #fff; font-family: var(--font-display); font-weight: 600; }

/* Form */
.contact-form {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
@media (min-width: 768px) { .contact-form { padding: 40px; } }
.form-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.form-sub {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 8px;
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.field > span {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  display: inline-flex; gap: 6px; align-items: baseline;
}
.field .opt { color: var(--muted-2); font-weight: 500; font-size: 12px; }
.field input,
.field textarea {
  font: 500 15px var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,69,172,.14);
}
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}
.form-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--muted-2); text-align: center; }
.form-success {
  background: rgba(16,185,129,.10);
  color: #047857;
  border: 1px solid rgba(16,185,129,.30);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600; font-size: 14px;
  margin: 4px 0 0;
}
.form-error {
  background: rgba(220,38,38,.08);
  color: #B91C1C;
  border: 1px solid rgba(220,38,38,.20);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600; font-size: 14px;
  margin: 4px 0 0;
}

/* -- Footer ------------------------------------------------ */
.ftr {
  background: #0A1226;
  color: #C4D2EC;
  padding: 64px 0 24px;
}
.ftr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 700px) {
  .ftr-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
}
.ftr h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 14px;
}
.ftr-nav { display: flex; flex-direction: column; gap: 8px; }
.ftr-nav a { color: #C4D2EC; font-size: 15px; transition: color .15s var(--ease); }
.ftr-nav a:hover { color: #fff; }
.ftr-brand .ftr-logo {
  height: 40px; width: auto;
  display: block;
  margin-bottom: 16px;
}
.ftr-brand p { color: #9CB1D7; max-width: 38ch; font-size: 14.5px; margin: 0 0 10px; }
.ftr-meta { color: #6F86AE; font-size: 13px; }
.ftr-meta span { color: #9CB1D7; }
.ftr-phone {
  display: inline-block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 8px;
}
.ftr-phone:hover { color: #fff; opacity: .85; }
.ftr-email {
  display: inline-block;
  color: #9CB1D7;
  font-size: 14.5px;
  margin: 0 0 10px;
  word-break: break-all;
}
.ftr-email:hover { color: #fff; }
.ftr-contact p { margin: 0 0 6px; color: #9CB1D7; font-size: 14px; }
.ftr-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #6F86AE; font-size: 13px;
}
.ftr-base p { margin: 0; }

/* -- Scroll reveal animation ----------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -- Print -------------------------------------------------- */
@media print {
  .hdr, .mobile-menu, .hero-cta, .contact-form, .ftr, .reveal { all: revert; }
  .hero { padding: 24px 0; background: #fff; }
  body { color: #000; }
}