/* =============================================================================
   PDQ Towing & Recovery — Styles
   Dark, premium-minimalist, emergency-clear.
   ============================================================================= */

/* ---------- Design tokens — BLACK + CHROME/SILVER brand palette ---------- */
:root {
  /* Surfaces (black base, derived from the logo background) */
  --bg:           #0A0A0B;
  --bg-deep:      #050506;   /* preloader / deepest sections */
  --surface:      #131417;   /* cards */
  --surface-2:    #1B1D21;
  --border:       #2A2D33;   /* steel hairline */
  --border-hi:    #3A3D43;

  /* Text */
  --text:         #F2F3F5;
  --text-muted:   #9AA0A8;
  --text-dim:     #6B7077;

  /* Chrome / silver brand ramp (logo accents, hairlines, badges, dividers) */
  --chrome-1:     #F6F7F8;
  --chrome-2:     #CDD1D6;
  --chrome-3:     #969BA2;
  --chrome-4:     #5B6066;
  --chrome-5:     #34373C;
  --chrome-gradient: linear-gradient(180deg,
    #F6F7F8 0%,
    #CDD1D6 35%,
    #969BA2 55%,
    #5B6066 80%,
    #34373C 100%);

  /* Fully monochrome — action color is bright chrome.
     --accent is the flat chrome used by text/icons/focus rings.
     Primary CTAs use the brushed-chrome gradient override defined on .btn--accent.
     --accent-ink is the dark text/icon color that sits on chrome fills. */
  --accent:       #E6E8EB;
  --accent-600:   #C9CDD2;
  --accent-ink:   #0A0A0B;
  --accent-glow:  rgba(205, 209, 214, 0.28);
  --chrome-fill:        linear-gradient(180deg, #F6F7F8 0%, #CDD1D6 45%, #AEB3B9 100%);
  --chrome-fill-hover:  linear-gradient(180deg, #FFFFFF 0%, #E1E5EA 45%, #C2C6CC 100%);

  /* Shared hero photo treatment — used by index slider + about page-hero + contact-top.
     Edit here once, all three pages stay in sync. */
  --hero-img-filter: grayscale(0.4) brightness(0.76) contrast(1.04);
  --hero-overlay:
    linear-gradient(90deg,
      rgba(10,10,11,0.80) 0%,
      rgba(10,10,11,0.38) 55%,
      rgba(10,10,11,0.18) 100%),
    linear-gradient(180deg, transparent 65%, var(--bg) 100%);

  /* Status */
  --success:      #3DD68C;
  --danger:       #FF5A5F;

  /* Type */
  --font-display: 'Clash Display', 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display-xl: clamp(2.75rem, 7vw, 6rem);
  --fs-display-lg: clamp(2.25rem, 5vw, 4rem);
  --fs-display-md: clamp(1.5rem, 2.5vw, 2rem);
  --fs-lead:       clamp(1.05rem, 1.4vw, 1.2rem);

  /* Layout */
  --container:        1200px;
  --container-tight:  960px;
  --gutter:           clamp(1.25rem, 4vw, 2rem);
  --section-y:        clamp(5rem, 9vw, 8.5rem);
  --radius-card:      18px;
  --radius-btn:       12px;

  /* Floating elements layout */
  --float-gap:    16px;
  --float-bottom: max(20px, env(safe-area-inset-bottom));
  --float-side:   max(20px, env(safe-area-inset-left));

  /* Motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-dur:  650ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Ambient depth — quiet grain + faint top-down chrome glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205,209,214,0.035) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }

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

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden (still in a11y tree) */
.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;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--accent);
  color: #0B0C0E;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-btn);
  transition: top 150ms var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Section ---------- */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--border); }
.section__head {
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.section__head--row {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  gap: 2rem;
  flex-wrap: wrap;
}
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-3);
  margin: 0 0 1.25rem;
}
/* Subtle chrome bar before the eyebrow */
.section__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--chrome-gradient);
  vertical-align: middle;
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
/* Chrome-gradient emphasis on title <em> across the site */
.section__title em,
.hero__title em,
.page-hero__title em,
.contact-top__title em,
.cta-band__title em {
  color: var(--chrome-2); /* fallback for older browsers */
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
.section__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.55;
}
.section__head--row .section__lead { margin: 0; }

/* ---------- Dot ---------- */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot--success {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(61, 214, 140, 0.05); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.3rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 150ms var(--ease),
    background 150ms var(--ease),
    border-color 150ms var(--ease),
    box-shadow 200ms var(--ease),
    color 150ms var(--ease);
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary CTA — brushed chrome fill, dark ink, 1px metallic top edge. */
.btn--accent {
  background-color: var(--accent);
  background-image: var(--chrome-fill);
  color: var(--accent-ink);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(52, 55, 60, 0.25),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 0 0 var(--accent-glow);
}
.btn--accent:hover {
  background-image: var(--chrome-fill-hover);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(52, 55, 60, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 12px 30px -10px var(--accent-glow);
}
.btn--accent svg { color: var(--accent-ink); }

/* Secondary CTA — chrome outline, fills subtle steel on hover. */
.btn--outline {
  border-color: var(--chrome-4);
  color: var(--chrome-1);
}
.btn--outline:hover {
  border-color: var(--chrome-2);
  color: var(--chrome-1);
  background: rgba(205, 209, 214, 0.06);
}
.btn--lg {
  padding: 1.1rem 1.85rem;
  font-size: 1.05rem;
  border-radius: 14px;
}
.btn--block {
  display: flex;
  width: 100%;
}

/* ---------- Header ---------- */
/* The mount-point wrapper must NOT form a box, otherwise:
   (1) .site-header { position: sticky } is trapped inside a tiny container
       and unsticks immediately on scroll, and
   (2) .mobile-menu { z-index: 90 } is clamped by the wrapper's z=1 stacking
       context, so page content painted later (main, #mount-chat) covers it.
   `display: contents` removes the wrapper box; its children behave as direct
   body children for layout + stacking. */
#mount-header { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(205, 209, 214, 0.10);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
/* Slightly stronger surface once the user scrolls past the hero edge. */
.site-header.is-scrolled {
  background: rgba(10, 10, 11, 0.92);
  border-bottom-color: rgba(205, 209, 214, 0.16);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.7);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  text-decoration: none;
}
.brand__mark { width: 36px; height: 36px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.brand__sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.nav { position: relative; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding-block: 0.4rem;
  transition: color 150ms var(--ease);
}
.nav__list a:hover { color: var(--text); }
.nav__list a[aria-current="page"] {
  color: var(--text);
}
.nav__list a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--chrome-gradient);
  border-radius: 1px;
}

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 40px; height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.header__call .call-label { display: none; }
.header__call .call-number { font-variant-numeric: tabular-nums; }

/* Header mobile — hide desktop nav + Call, hamburger sits far right. */
@media (max-width: 820px) {
  .nav { display: none; }
  .header__call { display: none; }
  .nav__toggle { display: inline-flex; }
  .brand__sub { display: none; }
}
/* Desktop: mobile menu overlay never renders. */
@media (min-width: 821px) {
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem) var(--section-y);
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Slider container holds 3 absolutely-positioned <img> slides that crossfade. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* steel-toned, dim via shared treatment — see --hero-img-filter in :root */
  filter: var(--hero-img-filter);
  transition: opacity 1200ms var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide:not(.is-active) { opacity: 0 !important; }
}

/* Slide dots */
.hero__dots {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 2;
}
.hero__dot {
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(244, 245, 247, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.hero__dot:hover { background: rgba(244, 245, 247, 0.55); }
.hero__dot.is-active {
  background: var(--accent);
  transform: scaleY(1.4);
}
.hero__dot:focus-visible { outline-offset: 4px; }
.hero__overlay {
  position: absolute; inset: 0;
  background: var(--hero-overlay);
}
.hero__glow {
  position: absolute;
  left: 50%; top: 30%;
  width: 90vw; height: 90vw;
  max-width: 1100px; max-height: 1100px;
  transform: translate(-50%, -50%);
  /* subtle chrome wash, not warm */
  background:
    radial-gradient(circle at center, rgba(205,209,214,0.07) 0%, rgba(205,209,214,0) 55%);
  filter: blur(20px);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(35,40,48,0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,40,48,0.45) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: 0.3;
}

.hero__inner { position: relative; max-width: 1100px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  background: rgba(20, 22, 26, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 0 0 1.75rem;
  backdrop-filter: blur(6px);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0;
  max-width: 18ch;
}
.hero__title em {
  /* color handled by .section__title em chrome-gradient rule above */
  display: inline-block;
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 1.75rem 0 0;
  line-height: 1.55;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2.5rem 0 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text-muted);
  background: rgba(20, 22, 26, 0.5);
}
.hero__status strong { color: var(--text); font-weight: 600; }
.hero__status-sep { color: var(--text-dim); }

@media (max-width: 600px) {
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__status { flex-wrap: wrap; }
}

/* ---------- Trust bar ---------- */
.trust {
  background: rgba(20, 22, 26, 0.35);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 500;
}
.trust__item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

@media (max-width: 700px) {
  .trust__list { justify-content: flex-start; }
}

/* ---------- Services (3 per row, photo header) ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.services__grid > li { display: flex; }

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition:
    border-color 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    background 220ms var(--ease-out);
}
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: var(--surface-2);
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.service-card__media::after {
  content: '';
  position: absolute; inset: 0;
  /* eased gradient: only the bottom edge stays solid (for title separation),
     the top + middle now let the photo breathe */
  background: linear-gradient(180deg,
    rgba(11,12,14,0.10) 0%,
    rgba(11,12,14,0.40) 65%,
    rgba(20,22,26,1) 100%);
  pointer-events: none;
}
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
  /* Steel-toned but ~15% brighter than before so the trucks read clearly. */
  filter: brightness(1.0) saturate(0.55) contrast(1.04) grayscale(0.2);
}
.service-card:hover .service-card__media img {
  transform: scale(1.05);
  filter: brightness(1.15) saturate(0.75) contrast(1.0) grayscale(0.05);
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover .service-card__media img { transform: none; }
}

.service-card__icon {
  position: absolute;
  top: 1rem; left: 1rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(205, 209, 214, 0.35);
  color: var(--chrome-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.service-card__icon svg { width: 22px; height: 22px; }

.service-card__body {
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.65rem;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
.service-card__benefit {
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
  flex-grow: 1;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.service-card__cta svg {
  width: 14px; height: 14px;
  transition: transform 200ms var(--ease-out);
}
.service-card:hover .service-card__cta svg { transform: translateX(4px); }

@media (max-width: 980px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Why PDQ ---------- */
.why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.why__lead .section__title { margin-bottom: 1.5rem; }
.why__lead .section__lead { margin: 0; }

.why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
}
.why__item {
  background: var(--surface);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  align-items: start;
  transition: background 200ms var(--ease);
}
.why__item:hover { background: var(--surface-2); }
.why__item-num {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--chrome-3);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
  letter-spacing: 0.05em;
}
.why__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}
.why__item p { color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .why__inner { grid-template-columns: 1fr; }
}

/* ---------- Service area ---------- */
.area__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.area__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.area__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.area__item-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
}
.area__item-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: right;
}

.area__map {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.area__map svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .area__inner { grid-template-columns: 1fr; }
}

/* ---------- Reviews ---------- */
.reviews__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.reviews__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--chrome-2);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(52,55,60,0.6);
}
.reviews__stars .half {
  position: relative;
  color: var(--chrome-5);
}
.reviews__stars .half::before {
  content: '★';
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  color: var(--chrome-2);
}
.reviews__rating-text { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.reviews__rating-text strong { color: var(--text); font-size: 1.05rem; }
.reviews__rating-count { color: var(--text-dim); }
.reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.reviews__cta:hover { text-decoration: underline; }

.reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  transition: border-color 200ms var(--ease);
}
.review-card:hover { border-color: var(--border-hi); }
.review-card__stars { color: var(--chrome-2); font-size: 0.95rem; letter-spacing: 0.05em; text-shadow: 0 1px 0 rgba(52,55,60,0.6); }
.review-card__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  flex-grow: 1;
}
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.review-card__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--chrome-2);
  flex-shrink: 0;
}
.review-card__meta { display: flex; flex-direction: column; line-height: 1.2; }
.review-card__name { font-weight: 600; font-size: 0.95rem; }
.review-card__loc { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; }

@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

/* ---------- Request form ---------- */
.request__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.request__copy .section__title { margin-bottom: 1.25rem; }
.request__copy .section__lead { margin: 0 0 2rem; }

.request__form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  position: relative;
}

.field { display: flex; flex-direction: column; gap: 0.45rem; position: relative; }
.field--full { grid-column: span 2; }
.field--with-action { position: relative; }
.field label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--text);
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  background: rgba(11, 12, 14, 0.7);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }
.field__error {
  margin: 0;
  font-size: 0.8rem;
  color: var(--danger);
  min-height: 1em;
  opacity: 0;
  transition: opacity 150ms var(--ease);
}
.field.is-invalid .field__error { opacity: 1; }

.field__action {
  position: absolute;
  right: 0.5rem;
  top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.field__action:hover { border-color: var(--accent); color: var(--accent); }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
}
.select-caret {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.request__form .btn--block {
  grid-column: span 2;
  margin-top: 0.5rem;
}
.request__reassure {
  grid-column: span 2;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}
.request__reassure span {
  display: block;
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* Success state */
.request__success {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 0.5rem;
  animation: fadeIn 350ms var(--ease-out);
}
.request__success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
  letter-spacing: -0.02em;
}
.request__success p { color: var(--text-muted); margin: 0; max-width: 36ch; }
.request__success a { color: var(--accent); font-weight: 600; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .request__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .request__form { grid-template-columns: 1fr; }
  .field--full { grid-column: span 1; }
  .request__form .btn--block { grid-column: span 1; }
  .request__reassure { grid-column: span 1; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  margin-top: 4rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.site-footer__tag { color: var(--text-muted); margin: 0; max-width: 38ch; font-size: 0.95rem; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.site-footer__col h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1rem;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 150ms var(--ease);
}
.site-footer__col a:hover { color: var(--text); }
.site-footer__col li:not(:has(a)) { color: var(--text-muted); font-size: 0.92rem; }
.site-footer__col address { font-style: normal; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.site-footer__col address a { color: var(--text); font-weight: 600; }
.site-footer__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.site-footer__legal p { margin: 0; }

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* =============================================================================
   FLOATING ELEMENTS — z-index order (user spec):
     sticky call bar (80) > chat panel (70) > launchers (60) > back-to-top (50)
   Layout: collision-free, respects mobile call bar (--call-bar-h on small).
   ============================================================================= */
:root { --call-bar-h: 0px; }

/* ---------- Sticky mobile call bar ---------- */
.sticky-call-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 80;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(11,12,14,0.97), rgba(11,12,14,0.88));
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(120%);
  transition: transform 320ms var(--ease-out);
  display: none;
}
.sticky-call-bar.is-visible { transform: translateY(0); }
.sticky-call-bar .btn { font-size: 1.05rem; padding: 1rem; }

@media (max-width: 820px) {
  .sticky-call-bar { display: block; }
  :root { --call-bar-h: 78px; } /* call bar reserves space for floating buttons */
  body { padding-bottom: var(--call-bar-h); }
}

/* ---------- Back-to-top (bottom-right) ---------- */
.back-to-top {
  position: fixed;
  right: var(--float-side);
  bottom: calc(var(--float-bottom) + var(--call-bar-h));
  z-index: 50;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    border-color 150ms var(--ease),
    background 150ms var(--ease);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  border-color: var(--chrome-3);
  color: var(--chrome-1);
  background: var(--surface-2);
}
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- Chat launcher (bottom-left) ---------- */
.chat-launcher {
  position: fixed;
  left: var(--float-side);
  bottom: calc(var(--float-bottom) + var(--call-bar-h));
  z-index: 60;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #0B0C0E;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -10px var(--accent-glow);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}
.chat-launcher:hover { transform: translateY(-2px) scale(1.04); background: var(--accent-600); }
.chat-launcher:active { transform: translateY(0) scale(0.98); }
.chat-launcher svg { width: 24px; height: 24px; }

/* Subtle pulse halo */
.chat-launcher::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  z-index: -1;
  animation: launcherPulse 2.4s var(--ease) infinite;
}
@keyframes launcherPulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-launcher::before { animation: none; }
}

/* Online dot */
.chat-launcher__dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg);
}

/* Unread badge */
.chat-launcher__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.chat-launcher.has-unread .chat-launcher__badge {
  opacity: 1;
  transform: scale(1);
}

/* Hide launcher when chat is open */
.chat-launcher.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
}

/* Greeting bubble preview */
.chat-bubble {
  position: fixed;
  left: var(--float-side);
  bottom: calc(var(--float-bottom) + var(--call-bar-h) + 70px);
  z-index: 59;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 0.85rem 1rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.chat-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  cursor: pointer;
}
.chat-bubble strong { color: var(--accent); }
.chat-bubble__close {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-bubble__close:hover { color: var(--text); }

/* ---------- Chat panel ---------- */
.chat-panel {
  position: fixed;
  left: var(--float-side);
  bottom: calc(var(--float-bottom) + var(--call-bar-h));
  z-index: 70;
  width: 360px;
  max-width: calc(100vw - 2 * var(--float-side));
  height: 540px;
  max-height: calc(100vh - 100px - var(--call-bar-h));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 280ms var(--ease-out),
    opacity 220ms var(--ease-out);
}
.chat-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile: bottom sheet */
@media (max-width: 600px) {
  .chat-panel {
    left: 0;
    right: 0;
    bottom: var(--call-bar-h);
    width: 100%;
    max-width: 100%;
    height: 78vh;
    max-height: calc(100vh - var(--call-bar-h));
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .chat-panel.is-open { transform: translateY(0); }
}

.chat-panel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11,12,14,0.4);
}
.chat-panel__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #0B0C0E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  position: relative;
}
.chat-panel__avatar::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--surface);
}
.chat-panel__title {
  flex-grow: 1;
  line-height: 1.2;
}
.chat-panel__title strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
}
.chat-panel__title span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.chat-panel__title span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 5px;
  vertical-align: middle;
}
.chat-panel__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.chat-panel__close:hover { color: var(--text); border-color: var(--border-hi); }

.chat-panel__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  scroll-behavior: smooth;
}
.chat-panel__body::-webkit-scrollbar { width: 6px; }
.chat-panel__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.chat-msg {
  max-width: 85%;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font-size: 0.93rem;
  line-height: 1.45;
  animation: chatIn 220ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg { animation: none; }
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: #0B0C0E;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.chat-msg--action {
  align-self: flex-start;
  width: auto;
}
.chat-msg--action .btn {
  width: 100%;
  justify-content: center;
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: chatIn 220ms var(--ease-out);
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s var(--ease) infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none; opacity: 0.7; }
}

/* Quick replies */
.chat-panel__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1.25rem 0.75rem;
}
.chat-quick {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), background 150ms var(--ease);
}
.chat-quick:hover {
  border-color: var(--chrome-2);
  color: var(--chrome-1);
  background: rgba(205,209,214,0.07);
}

.chat-panel__input {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: rgba(11,12,14,0.4);
}
.chat-panel__input input {
  flex-grow: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  transition: border-color 150ms var(--ease);
}
.chat-panel__input input:focus {
  outline: none;
  border-color: var(--accent);
}
.chat-panel__send {
  background: var(--accent);
  color: #0B0C0E;
  border: none;
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms var(--ease);
}
.chat-panel__send:hover { background: var(--accent-600); }
.chat-panel__send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-panel__send svg { width: 18px; height: 18px; }

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

/* =============================================================================
   ABOUT + CONTACT PAGES
   ============================================================================= */

/* ---------- Page hero (about, contact) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem) clamp(4rem, 7vw, 6rem);
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* image fully opaque — dimming comes from shared hero treatment */
  opacity: 1;
  filter: var(--hero-img-filter);
}
.page-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-overlay);
}
.page-hero__inner { position: relative; max-width: 900px; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0;
  max-width: 22ch;
}
/* .page-hero__title em color handled by chrome-gradient rule */
.page-hero__sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 1.5rem 0 0;
}

/* ---------- About: Our story ---------- */
.about-story__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-story__copy .section__title { margin-bottom: 1.25rem; }
.about-story__copy p {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  margin: 0 0 1.25rem;
  line-height: 1.65;
}
.about-story__copy p:last-of-type { margin-bottom: 1.75rem; }
.about-story__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.about-story__bullets li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  font-weight: 500;
}
.about-story__bullets li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--chrome-2);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--chrome-5);
}
.about-story__media {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.about-story__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.9) saturate(0.7) contrast(1.04);
  transition: transform 600ms var(--ease-out);
}
.about-story__media:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
  .about-story__inner { grid-template-columns: 1fr; }
  .about-story__media { aspect-ratio: 16 / 10; }
}

/* ---------- About: edge cards (3-up grid) ---------- */
.about-edge__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.edge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  position: relative;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.edge-card:hover { border-color: var(--chrome-4); background: var(--surface-2); }
.edge-card__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--chrome-3);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.edge-card:hover .edge-card__num { color: var(--chrome-2); }
.edge-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.edge-card__body { color: var(--text-muted); margin: 0; line-height: 1.55; }
@media (max-width: 700px) {
  .about-edge__grid { grid-template-columns: 1fr; }
}

/* ---------- Stats band ---------- */
.stats {
  background: var(--surface);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.stats__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  overflow: hidden;
}
.stat {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  border-right: 1px solid var(--border);
  position: relative;
  background: var(--bg);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Chrome-gradient numerals (with safe fallback) */
  color: var(--chrome-2);
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
}
@media (max-width: 800px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 460px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
}

/* ---------- Fleet / capabilities ---------- */
.fleet__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.fleet__copy .section__title { margin-bottom: 1.25rem; }
.fleet__copy p { color: var(--text-muted); font-size: var(--fs-lead); margin: 0 0 1.75rem; line-height: 1.6; }
.fleet__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.5rem;
}
.fleet__list li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--text);
  font-weight: 500;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.fleet__list li span {
  color: var(--chrome-2);
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}
.fleet__media {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}
.fleet__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* push toward steel — neutralizes the orange fleet truck so it reads chrome */
  filter: grayscale(0.6) brightness(0.92) saturate(0.5) contrast(1.04);
  transition: transform 600ms var(--ease-out);
}
.fleet__media:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
  .fleet__inner { grid-template-columns: 1fr; }
  .fleet__list { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */
.cta-band {
  padding-block: clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(205,209,214,0.06) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 1rem;
}
/* .cta-band__title em color handled by chrome-gradient rule */
.cta-band__sub { color: var(--text-muted); font-size: var(--fs-lead); margin: 0 0 2rem; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* =============================================================================
   CONTACT PAGE
   ============================================================================= */

/* ---------- Contact top (emergency-first) ---------- */
.contact-top {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(205,209,214,0.07) 0%, transparent 70%),
    var(--bg);
}
.contact-top__inner { max-width: 800px; margin: 0 auto; position: relative; }

/* Hero photo behind the centered "Call 24/7" — same shared treatment as the
   homepage slider and the about page hero. */
.contact-top__bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.contact-top__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* push visible crop higher so the dark garage ceiling sits behind the
     centered "Call 24/7" headline (headlights remain near the bottom). */
  object-position: 50% 20%;
  filter: var(--hero-img-filter);
}
.contact-top__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    /* Extra top-area protection because the headline is CENTERED rather than
       left-aligned — keeps H1 in a darker zone regardless of image. */
    linear-gradient(180deg, rgba(10,10,11,0.65) 0%, rgba(10,10,11,0.3) 35%, transparent 65%),
    var(--hero-overlay);
}
.contact-top__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
/* .contact-top__title em color handled by chrome-gradient rule */
.contact-top__sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin: 0 0 2.25rem;
  max-width: 50ch;
  margin-inline: auto;
}
.contact-top__cta {
  display: inline-flex;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  padding: 1.2rem 2.25rem;
}
.contact-top__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 2rem 0 0;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text-muted);
  background: rgba(20, 22, 26, 0.6);
}
.contact-top__hours strong { color: var(--text); font-weight: 600; }

/* ---------- Contact detail (NAP + form) ---------- */
.contact-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-nap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 1.5rem;
}
.contact-nap h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.contact-nap__group { margin-bottom: 1.5rem; }
.contact-nap__group:last-child { margin-bottom: 0; }
.contact-nap__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.contact-nap__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.contact-nap__value a {
  color: var(--text);
  text-decoration: none;
}
.contact-nap__value a:hover { color: var(--accent); }
.contact-nap__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.contact-nap__directions:hover { text-decoration: underline; }

/* "Press 2 for Dispatch" hint — used in NAP and under contact-top CTA */
.contact-nap__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.contact-nap__hint strong { color: var(--text); font-weight: 600; }
.contact-nap__hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--chrome-4);
  border-radius: 6px;
  color: var(--chrome-1);
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-top__dispatch {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.contact-top__dispatch kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--surface);
  border: 1px solid var(--chrome-4);
  border-radius: 5px;
  color: var(--chrome-1);
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  vertical-align: baseline;
  margin: 0 2px;
}
.contact-map {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.contact-map svg { width: 100%; height: auto; display: block; }
.contact-form-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.contact-form-wrap > p {
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
@media (max-width: 900px) {
  .contact-detail__inner { grid-template-columns: 1fr; }
}

/* Mobile nav active state: hide underline, use accent color */
@media (max-width: 820px) {
  .nav__list a[aria-current="page"]::after { display: none; }
  .nav__list a[aria-current="page"] { color: var(--chrome-1); }
}

/* =============================================================================
   MOBILE MENU — full-screen slide-in panel (≤820px only).
   Z-stack: above sticky call bar (80) so the menu's own Call CTA is the
   only call action visible while open.
   ============================================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 280ms;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 240ms var(--ease-out), visibility 0s linear;
}

.mobile-menu__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  box-shadow: -20px 0 60px -10px rgba(0,0,0,0.6);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu__panel { transition: none; }
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
}
.mobile-menu__logo {
  height: 44px;
  width: auto;
}
.mobile-menu__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 42px; height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), background 150ms var(--ease);
}
.mobile-menu__close:hover {
  border-color: var(--chrome-3);
  color: var(--chrome-1);
  background: rgba(205, 209, 214, 0.05);
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1rem;
  flex-grow: 1;
}
.mobile-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 150ms var(--ease), color 150ms var(--ease);
  min-height: 48px;
}
.mobile-menu__list a::after {
  content: '→';
  color: var(--chrome-4);
  font-size: 1.1rem;
  font-weight: 400;
  transition: transform 200ms var(--ease-out), color 150ms var(--ease);
}
.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
  background: rgba(205, 209, 214, 0.04);
}
.mobile-menu__list a:hover::after,
.mobile-menu__list a:focus-visible::after {
  color: var(--chrome-2);
  transform: translateX(3px);
}
/* Active page — chrome gradient text */
.mobile-menu__list a[aria-current="page"] {
  color: var(--chrome-2);
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mobile-menu__list a[aria-current="page"]::after {
  -webkit-text-fill-color: var(--chrome-2);
  color: var(--chrome-2);
}

.mobile-menu__footer {
  padding: 1.25rem 1.5rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: rgba(11, 12, 14, 0.4);
}
.mobile-menu__dispatch {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.mobile-menu__dispatch kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--surface);
  border: 1px solid var(--chrome-4);
  border-radius: 5px;
  color: var(--chrome-1);
  background-image: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 2px;
}

/* Body scroll lock while the menu is open. */
body.is-mobile-menu-open {
  overflow: hidden;
  /* prevent layout shift from scrollbar disappearing */
  padding-right: var(--scrollbar-w, 0);
}

/* =============================================================================
   BRAND LOGO (image) — replaces the previous text lockup.
   The PNG has a solid black background, so it must only ever sit on a
   --bg-deep / --bg / --surface container. All three containers (header,
   footer, preloader) are dark; the black bleeds in invisibly.
   ============================================================================= */
.brand__logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* slight chrome lift so the logo doesn't look pasted-on */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.brand__logo--lg { height: 72px; }
@media (max-width: 520px) {
  .brand__logo { height: 40px; }
  .brand__logo--lg { height: 64px; }
}

/* =============================================================================
   PRELOADER — black screen, logo reveal, ≤800ms, reduced-motion safe.
   ============================================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.preloader.is-gone {
  opacity: 0;
  pointer-events: none;
}
.preloader__logo {
  width: clamp(140px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(205,209,214,0.18));
  animation: preloaderReveal 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes preloaderReveal {
  0%   { opacity: 0; transform: scale(0.96); filter: brightness(0.5); }
  60%  { opacity: 1; transform: scale(1); filter: brightness(1.18) drop-shadow(0 6px 36px rgba(205,209,214,0.3)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 6px 30px rgba(205,209,214,0.18)); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  .preloader__logo { animation: none; }
}