/* ===========================================================
   PureGlo Detailing — light + blue, premium service business
   =========================================================== */

:root {
  --blue-50:  #EEF5FE;
  --blue-100: #DCEAFB;
  --blue-200: #B6D2F4;
  --blue-300: #84B3EA;
  --blue-400: #4F8FDD;
  --blue-500: #1E6DD0;   /* primary */
  --blue-600: #155AB0;
  --blue-700: #0F4488;
  --blue-900: #082655;

  --ink-900: #0E1726;
  --ink-700: #233149;
  --ink-500: #5A6B82;
  --ink-300: #97A4B8;
  --ink-200: #C9D2E0;
  --ink-100: #E6ECF4;

  --bg-0:  #FFFFFF;
  --bg-1:  #F7FAFE;     /* faint blue tint */
  --bg-2:  #EEF5FE;     /* tinted band */

  --gold:  #F4C45B;

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, .04), 0 1px 3px rgba(14, 23, 38, .06);
  --shadow-md: 0 6px 16px rgba(14, 23, 38, .07), 0 2px 4px rgba(14, 23, 38, .04);
  --shadow-lg: 0 24px 48px rgba(14, 23, 38, .09), 0 8px 16px rgba(14, 23, 38, .04);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --container: 1180px;
  --gutter:    24px;

  --font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-h1: clamp(2.4rem, 5.6vw, 4.4rem);
  --t-h2: clamp(1.85rem, 3.4vw, 2.65rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lg: 1.125rem;
  --t-md: 1rem;
  --t-sm: .9rem;
  --t-xs: .8rem;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ===========================================================
   DESIGN SYSTEM — Orbs, grids, decorative elements
   =========================================================== */

/* Soft glowing orbs — sit behind sections for depth */
.orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(60px);
  opacity: .55;
  z-index: 0;
}
.orb-hero-1 {
  width: 520px; height: 520px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(30, 109, 208, .35), transparent 70%);
  opacity: .9;
}
.orb-hero-2 {
  width: 380px; height: 380px;
  bottom: -120px; left: -100px;
  background: radial-gradient(circle, rgba(132, 179, 234, .55), transparent 70%);
}
.orb-trust-1 {
  width: 380px; height: 380px;
  top: -150px; left: -80px;
  background: radial-gradient(circle, rgba(180, 211, 248, .45), transparent 70%);
}
.orb-trust-2 {
  width: 320px; height: 320px;
  bottom: -120px; right: -80px;
  background: radial-gradient(circle, rgba(132, 179, 234, .35), transparent 70%);
}
.orb-services-1 {
  width: 540px; height: 540px;
  top: 80px; right: -200px;
  background: radial-gradient(circle, rgba(30, 109, 208, .14), transparent 70%);
}
.orb-services-2 {
  width: 420px; height: 420px;
  bottom: 60px; left: -180px;
  background: radial-gradient(circle, rgba(180, 211, 248, .55), transparent 70%);
}
.orb-reviews-1 {
  width: 480px; height: 480px;
  top: -120px; right: -160px;
  background: radial-gradient(circle, rgba(132, 179, 234, .3), transparent 70%);
}

/* Dot grid pattern — cinematic background texture */
.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(30, 109, 208, .14) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
  opacity: .6;
}

/* All sections need positioning context for orbs */
.hero, .trust-strip, .services, .reviews { position: relative; }
.hero .container, .services .container, .reviews .container, .trust-strip .container { position: relative; z-index: 1; }

/* ===========================================================
   SPEED BARS — slanted 3-line accent (AG Auto Spa-inspired)
   Premium racing/motion signature element used near CTAs + photos
   =========================================================== */

.speed-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-self: center;
  pointer-events: none;
  flex-shrink: 0;
  /* Skew the entire stack so each bar reads as a parallelogram */
  transform: skewX(-22deg);
}
.speed-bars > span {
  display: block;
  height: 8px;
  border-radius: 2px;
  transform-origin: left center;
}

/* Inline variant — sits next to the phone CTA in hero */
.hero-cta .speed-bars {
  margin-left: 6px;
}
.hero-cta .speed-bars > span:nth-child(1) { width: 36px; background: var(--blue-300); }
.hero-cta .speed-bars > span:nth-child(2) { width: 56px; background: var(--blue-500); }
.hero-cta .speed-bars > span:nth-child(3) { width: 26px; background: var(--blue-700); }

/* Photo variant — decorative stack at bottom-right of hero photo */
.speed-bars--photo {
  position: absolute;
  bottom: 24px;
  right: -36px;
  z-index: 4;
  flex-direction: column;
  gap: 6px;
}
.speed-bars--photo > span {
  height: 14px;
  border-radius: 3px;
}
.speed-bars--photo > span:nth-child(1) { width: 70px; background: var(--blue-300); }
.speed-bars--photo > span:nth-child(2) { width: 110px; background: var(--blue-500); }
.speed-bars--photo > span:nth-child(3) { width: 50px; background: var(--blue-700); }

/* Book-card variant — small, top-right corner of the booking panel */
.speed-bars--card {
  position: absolute;
  top: 22px;
  right: -10px;
  z-index: 2;
  gap: 4px;
}
.speed-bars--card > span {
  height: 6px;
  border-radius: 2px;
}
.speed-bars--card > span:nth-child(1) { width: 26px; background: var(--blue-300); }
.speed-bars--card > span:nth-child(2) { width: 40px; background: var(--blue-500); }
.speed-bars--card > span:nth-child(3) { width: 18px; background: var(--blue-700); }

@media (max-width: 880px) {
  .speed-bars--photo { right: -16px; bottom: 16px; }
  .speed-bars--photo > span:nth-child(1) { width: 50px; }
  .speed-bars--photo > span:nth-child(2) { width: 80px; }
  .speed-bars--photo > span:nth-child(3) { width: 36px; }
}

/* ===========================================================
   SECTION BREAKS — editorial chapter markers
   =========================================================== */

.section-break {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: clamp(36px, 5vw, 64px) auto;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.break-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ink-200) 25%, var(--ink-200) 75%, transparent 100%);
  position: relative;
}
.break-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue-500);
  box-shadow: 0 0 0 5px rgba(30, 109, 208, .1);
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .section-break { gap: 12px; margin: 32px auto; }
  .break-dot { width: 6px; height: 6px; box-shadow: 0 0 0 4px rgba(30, 109, 208, .1); }
}

/* Slim page divider — compact alternative to .section-break */
.page-divider {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 24px auto;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.pd-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(30, 109, 208, 0.25) 30%, rgba(30, 109, 208, 0.25) 70%, transparent 100%);
}
.pd-mark {
  flex-shrink: 0;
  color: var(--blue-500);
  display: inline-grid;
  place-items: center;
  filter: drop-shadow(0 2px 6px rgba(30, 109, 208, 0.35));
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-300), var(--blue-500), var(--blue-700));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
  box-shadow: 0 0 12px rgba(30, 109, 208, .35);
}

/* Reveal initial states — invisible until JS animates them in.
   The .anim-ready class is added to <html> by JS on load. Without JS, content stays visible. */
html.anim-ready [data-reveal],
html.anim-ready [data-reveal-stagger] > *,
html.anim-ready [data-hero-stagger] {
  opacity: 0;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-reveal],
  html.anim-ready [data-reveal-stagger] > *,
  html.anim-ready [data-hero-stagger] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .scroll-progress { display: none; }
}

body {
  font-family: var(--font);
  font-size: var(--t-md);
  color: var(--ink-900);
  background: var(--bg-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease);
}

h1, h2, h3, h4 {
  margin: 0 0 .5em 0;
  letter-spacing: -.02em;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em 0; color: var(--ink-700); }

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ===========================================================
   HEADER
   =========================================================== */

/* Premium glass nav — transparent over hero, frosts on scroll. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* REVERSED behavior (per Mason 2026-05-24):
     - At top (data-elev=0): SOLID WHITE header — logo + nav clearly visible
     - Scrolled (data-elev=1): mostly transparent so content underneath isn't blocked */
  background: #fff;
  border-bottom: 1px solid rgba(15, 40, 90, 0.08);
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    backdrop-filter .35s var(--ease),
    box-shadow .35s var(--ease);
}
/* At top (data-elev="0"): solid white, dark text — high contrast, clean */
.site-header[data-elev="0"] {
  background: #fff;
  border-bottom: 1px solid rgba(30, 109, 208, 0.18);
  box-shadow: 0 4px 18px -6px rgba(15, 40, 90, 0.18);
}
.site-header[data-elev="0"] .brand-name,
.site-header[data-elev="0"] .brand-sub,
.site-header[data-elev="0"] .primary-nav a:not(.cta) {
  color: var(--ink-900);
}
.site-header[data-elev="0"] .brand-text { border-left-color: var(--ink-100); }
.site-header[data-elev="0"] .nav-toggle { border-color: var(--ink-100); }
.site-header[data-elev="0"] .nav-toggle span { background: var(--ink-900); }
/* Scrolled (data-elev="1"): transparent + light glass so content shows through */
.site-header[data-elev="1"] {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header[data-elev="1"] .brand-name,
.site-header[data-elev="1"] .brand-sub,
.site-header[data-elev="1"] .primary-nav a:not(.cta) {
  color: var(--ink-900);
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.65);
}
@media (max-width: 880px) {
  .site-header[data-elev="1"] {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--blue-500);
}
.brand-logo {
  height: 56px;
  width: auto;
  display: block;
  /* Transparent PNG — no blend trick needed */
  transition: transform .3s var(--ease), filter .35s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.04); }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  border-left: 1px solid var(--ink-100);
  padding-left: 14px;
  transition: border-color .35s var(--ease);
}
.brand-name {
  font-weight: 700;
  letter-spacing: -.012em;
  font-size: 1.04rem;
  color: var(--ink-900);
  transition: color .35s var(--ease);
}
.brand-sub {
  margin-top: 6px;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  transition: color .35s var(--ease);
}

@media (max-width: 540px) {
  /* On phones keep just the brand name next to the logo — drop the city subhead so the header isn't too cramped */
  .brand-sub { display: none; }
  .brand-text { padding-left: 10px; border-left: 1px solid var(--ink-100); }
  .brand-name { font-size: 0.92rem; line-height: 1; }
  .brand-logo { height: 46px; }
}

.footer-logo {
  height: 80px;
  width: auto;
  margin-bottom: 14px;
}
.footer-tag {
  font-size: .9rem;
  color: var(--ink-300);
  margin: 0;
  line-height: 1.5;
}

.primary-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.primary-nav a {
  padding: 10px 16px;
  font-weight: 600;
  color: var(--ink-700);
  border-radius: 999px;
  font-size: .92rem;
  letter-spacing: .005em;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.primary-nav a:hover {
  color: var(--blue-600);
  background: var(--blue-50);
}
.site-header[data-elev="1"] .primary-nav a:not(.cta):hover {
  background: rgba(30, 109, 208, 0.10);
}

/* CTA buttons */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: .98rem;
  background: var(--blue-500);
  color: #fff !important;
  border: 1.5px solid var(--blue-500);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.cta:hover { background: var(--blue-600); border-color: var(--blue-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cta:active { transform: translateY(0); }
.cta.cta-sm { padding: 9px 16px; font-size: .9rem; }
.cta.cta-lg { padding: 16px 28px; font-size: 1.05rem; }
.cta.cta-primary { background: var(--blue-500); border-color: var(--blue-500); }
.cta.cta-primary:hover { background: var(--blue-700); border-color: var(--blue-700); }
.cta.cta-ghost {
  background: transparent;
  color: var(--ink-900) !important;
  border-color: var(--ink-200);
}
.cta.cta-ghost:hover {
  background: var(--bg-1);
  border-color: var(--blue-500);
  color: var(--blue-600) !important;
}
.cta.cta-block { width: 100%; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink-200);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--gutter) 18px;
  background: #fff;
  border-top: 1px solid var(--ink-100);
}
.mobile-nav a {
  padding: 14px 14px;
  font-weight: 500;
  color: var(--ink-700);
  border-radius: 12px;
}
.mobile-nav a:hover { background: var(--blue-50); color: var(--blue-600); }
.mobile-nav .cta { color: #fff !important; }
/* Ghost CTA inside mobile-nav: dark text on white pill with blue border (override generic .cta white) */
.mobile-nav .cta.cta-ghost {
  color: var(--ink-900) !important;
  background: #fff !important;
  border: 1.5px solid #1E6DD0 !important;
}
.mobile-nav .cta.cta-ghost:hover {
  background: #f0f7ff !important;
  color: #1E6DD0 !important;
}

@media (max-width: 880px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[data-open="true"] { display: flex; }
}

/* ===========================================================
   HERO
   =========================================================== */

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 100px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 12% -10%, rgba(180, 211, 248, .55), transparent 60%),
    radial-gradient(50% 50% at 88% 12%, rgba(210, 228, 252, .6), transparent 65%),
    linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 70%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(30, 109, 208, .04) 0, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(30, 109, 208, .04) 0, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(30, 109, 208, .04) 0, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(30, 109, 208, .04) 0, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero-copy {
  position: relative;
  padding: 0;
}
.hero-copy > * { position: relative; z-index: 1; }

/* Big decorative shape — kept subtle */
.hero-decor {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  animation: spin-slow 40s linear infinite;
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* Tick row above the eyebrow — premium product detail page feel */
.hero-tick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-700);
  font-weight: 700;
}
.hero-tick-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--blue-500);
}
.hero-tick-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(30, 109, 208, .14);
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .hero-copy { padding: 28px 22px; }
  .hero-decor { width: 160px; height: 160px; top: -20px; right: -10px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink-700);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #18b673;
  box-shadow: 0 0 0 4px rgba(24, 182, 115, .15);
}
.g-logo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 23, 38, .08);
  border: 1px solid var(--ink-100);
}
.eyebrow .g-logo { width: 26px; height: 26px; }
.eyebrow .rating-num {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.eyebrow .rating-stars {
  color: var(--gold);
  letter-spacing: 1.5px;
  font-size: .82rem;
}
.eyebrow .rating-meta {
  color: var(--ink-500);
  font-size: .85rem;
}

.hero h1 {
  margin-bottom: 18px;
  letter-spacing: -.025em;
}
.hero h1 .accent {
  color: var(--blue-500);
  position: relative;
  display: inline-block;
}
.hero h1 .accent::after {
  /* hand-painted underline — premium brushstroke feel */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 12" preserveAspectRatio="none"><path d="M2 8 Q40 2 100 6 T198 4" stroke="%231E6DD0" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.55"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.hero .lede {
  border-left: 3px solid var(--blue-200);
  padding-left: 18px;
  margin-left: -2px;
}
.hero .lede {
  font-size: var(--t-lg);
  color: var(--ink-700);
  max-width: 540px;
  margin-bottom: 28px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  font-size: .94rem;
  color: var(--ink-700);
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(14, 23, 38, .04);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* hero photo */
.hero-photo { position: relative; }
.hero-photo-stack {
  position: relative;
  aspect-ratio: 4 / 5;
}
.hero-photo-bg {
  position: absolute;
  inset: 24px -24px -24px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  z-index: 0;
  box-shadow: 0 30px 60px rgba(30, 109, 208, .25);
}
.hero-photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 0);
  background-size: 16px 16px;
}
.hero-photo-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--blue-100) 0%, var(--blue-50) 60%, #fff 100%);
  box-shadow: var(--shadow-lg);
  border: 8px solid #fff;
}
.hero-floating-stat {
  position: absolute;
  top: -16px;
  right: -40px;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--ink-100);
  min-width: 130px;
}
.hfs-num {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue-600);
}
.hfs-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-500);
  font-weight: 600;
}
@media (max-width: 880px) {
  .hero-floating-stat { right: 10px; top: -12px; }
  .hero-photo-bg { inset: 16px -16px -16px 16px; }
}
.photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(30, 109, 208, .04) 14px 28px);
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
}
.photo-placeholder small {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--blue-600);
  font-weight: 500;
  opacity: .8;
}

.hero-card {
  position: absolute;
  left: -28px;
  bottom: -24px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  max-width: 280px;
  border: 1px solid var(--ink-100);
}
.hero-card p {
  margin: 6px 0;
  font-size: .92rem;
  color: var(--ink-900);
  font-weight: 500;
}
.hero-card small { color: var(--ink-500); font-size: .78rem; }
.hero-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: .9rem;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .hero-card { left: 8px; bottom: -16px; }
}

/* ===========================================================
   TRUST STRIP
   =========================================================== */

.trust-strip {
  background: var(--bg-1);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.trust-card {
  background: #fff;
  border: 1px solid rgba(30, 109, 208, 0.18);
  border-radius: var(--radius-xl);
  padding: 44px 28px 40px;
  box-shadow:
    0 32px 64px -16px rgba(15, 40, 90, 0.28),
    0 12px 28px -10px rgba(15, 40, 90, 0.18),
    0 2px 6px rgba(15, 40, 90, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  position: relative;
  overflow: hidden;
}
.trust-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-300), var(--blue-500), var(--blue-700));
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: stretch;        /* stretch so every column shares one tall row */
}
.trust-row--6 { grid-template-columns: repeat(6, 1fr); gap: 6px; }
/* text-based trust-num values use the same size as numeric ones */
.trust-num--text {
  white-space: nowrap;
}
.trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  position: relative;
  height: 100%;              /* fill the row so labels can pin bottom */
  min-width: 0;              /* allow shrink in grid track */
}
.trust-item > .trust-icon { flex-shrink: 0; }
.trust-item > .trust-label { margin-top: auto; }  /* labels align at bottom */
.trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--ink-100);
}
.trust-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-50) 0%, #fff 100%);
  border: 1px solid var(--blue-100);
  color: var(--blue-600);
  margin-bottom: 6px;
  box-shadow: 0 6px 14px rgba(30, 109, 208, .12);
}
.trust-icon--blue {
  color: var(--blue-600);
}
.trust-num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -.02em;
  line-height: 1.35;            /* enough room for y/p/g descenders */
  margin-top: 2px;
  padding: 0 4px 4px;            /* small bottom pad so chars never kiss the edge */
}
.trust-stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 4px;
}
.trust-stars .g-star {
  width: 16px;
  height: 16px;
  fill: #FBBC05;            /* Google gold */
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(180, 130, 0, 0.18));
}
.trust-label {
  display: block;
  font-size: .85rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-top: 6px;
}
.trust-item--google .trust-num {
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.trust-item--google .trust-icon {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 4px;
}
.trust-item--google .g-logo {
  width: 56px; height: 56px;
  border: 1px solid var(--ink-100);
  background: #fff;
  box-shadow: 0 4px 12px rgba(14, 23, 38, .08);
  border-radius: 14px;
  display: grid;
  place-items: center;
}

@media (max-width: 1100px) {
  .trust-row--6 { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
  .trust-row--6 .trust-item:nth-child(3n)::after { display: none; }
}
@media (max-width: 880px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  /* On mobile drop 3 weaker pills (100+ Vehicles, 7 days, Pay after) — keep 3 strongest. */
  .trust-row--6 .trust-item:nth-child(2),
  .trust-row--6 .trust-item:nth-child(4),
  .trust-row--6 .trust-item:nth-child(5) { display: none; }
  .trust-row--6 { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .trust-item:not(:last-child)::after { display: none; }
  .trust-strip { padding: 40px 0; }

  /* === Trust pill cleanup on mobile === */
  /* Match all 3 visible items to a single tight rhythm: small icon, one big line, one tight caption */
  .trust-row--6 .trust-item { gap: 6px; padding: 0 2px; }
  .trust-row--6 .trust-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 2px; }
  .trust-row--6 .trust-icon svg { width: 22px; height: 22px; }
  .trust-row--6 .trust-item--google .g-logo { width: 44px; height: 44px; border-radius: 12px; }
  .trust-row--6 .trust-item--google .g-logo svg { width: 22px; height: 22px; }

  /* Hide the gold stars on mobile — "5.0" + "45 reviews" already tells the story */
  .trust-row--6 .trust-stars { display: none; }

  /* Equal-weight numbers across all 3 items */
  .trust-row--6 .trust-num { font-size: 1.35rem; line-height: 1.15; margin-top: 0; padding: 0; }
  .trust-row--6 .trust-num--text { font-size: 1.1rem; }

  /* Tighter labels — drop the wide letter-spacing that forces 2-line wraps */
  .trust-row--6 .trust-label {
    font-size: .68rem;
    letter-spacing: .04em;
    margin-top: 2px;
    line-height: 1.2;
    min-height: 2.4em;   /* reserve room for up to 2 lines so heights stay equal */
  }
}

/* ===========================================================
   TRUST STRIP — DIAGONAL TAPE (overrides .trust-strip when .ts-stage applied)
   =========================================================== */
.ts-stage {
  background: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
  margin: 6px 0;
}
.ts-tape {
  background: var(--blue-500, #1E6DD0);
  border-top: 5px solid var(--ink-900, #0A1424);
  border-bottom: 5px solid var(--ink-900, #0A1424);
  transform: rotate(-2.2deg);
  padding: 26px 0;
  overflow: hidden;
  width: 118%;
  margin: -10px -9% -10px;
  box-shadow: 0 20px 36px -14px rgba(15, 40, 90, 0.32);
}
.ts-track {
  display: flex; gap: 44px; align-items: center; width: max-content;
  animation: ts-scroll 38s linear infinite;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900; font-size: 30px; letter-spacing: 0.04em;
  white-space: nowrap;
}
@keyframes ts-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ts-item {
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap;
}
.ts-bullet { color: #FFD75A; font-size: 22px; }
.ts-stars { display: inline-flex; gap: 3px; }
.ts-star {
  width: 22px; height: 22px; fill: #FFD75A;
  flex-shrink: 0;
}
.ts-g {
  width: 30px; height: 30px; flex-shrink: 0;
  background: #fff; border-radius: 5px; padding: 3px;
  vertical-align: middle;
}
.ts-icon { width: 32px; height: 32px; flex-shrink: 0; }

/* Pause animation when section not in motion-OK */
@media (prefers-reduced-motion: reduce) {
  .ts-track { animation-duration: 120s; }
}

@media (max-width: 880px) {
  .ts-stage { padding: 0; margin: 4px 0; }
  .ts-tape { padding: 16px 0; border-top-width: 4px; border-bottom-width: 4px; margin-top: -6px; margin-bottom: -6px; }
  .ts-track { font-size: 18px; gap: 28px; }
  .ts-item { gap: 10px; }
  .ts-star { width: 14px; height: 14px; }
  .ts-g { width: 22px; height: 22px; }
  .ts-icon { width: 22px; height: 22px; }
  .ts-bullet { font-size: 16px; }
}

/* ===========================================================
   SERVICES
   =========================================================== */

.services {
  padding: clamp(72px, 8vw, 110px) 0;
  background: var(--bg-1);
}

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
  position: relative;
}
.section-head--centered { text-align: center; margin-inline: auto; }

/* Decorative tick row above kicker — premium product page feel */
.section-head::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-200));
  margin-bottom: 18px;
  border-radius: 2px;
}
.section-head--centered::before {
  margin-inline: auto;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-700);
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(30, 109, 208, .06);
}
.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(30, 109, 208, .15);
  flex-shrink: 0;
}
.kicker-light {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
.kicker-light::before {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.section-lede {
  font-size: var(--t-lg);
  color: var(--ink-700);
  margin: 16px 0 0;
}
.section-head:not(.section-head--centered) .section-lede {
  border-left: 3px solid var(--blue-100);
  padding-left: 18px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .service-grid { grid-template-columns: 1fr; }
}

.service-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
}
.service-card--featured {
  border: 2px solid var(--blue-500);
  box-shadow: 0 24px 48px rgba(30, 109, 208, .14);
  transform: translateY(-6px);
}
.service-card--featured:hover {
  transform: translateY(-10px);
}
@media (max-width: 880px) {
  .service-card--featured { transform: none; }
  .service-card--featured:hover { transform: translateY(-4px); }
}

.best-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--blue-500);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(30, 109, 208, .35);
}

.service-photo {
  height: 220px;
  background-color: var(--blue-50);
  background-size: cover;
  background-position: center;
}
.svc-ext { background-image: linear-gradient(135deg, #1E6DD0 0%, #4F8FDD 70%, #B6D2F4 100%); }
.svc-int { background-image: linear-gradient(135deg, #0F4488 0%, #1E6DD0 50%, #84B3EA 100%); }
.svc-full { background-image: linear-gradient(135deg, #082655 0%, #155AB0 50%, #4F8FDD 100%); }

.service-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  align-self: flex-start;
  letter-spacing: .04em;
}
.service-card h3 { margin-bottom: 4px; }
.service-price {
  margin: 0 0 18px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.service-price .from {
  font-size: .85rem;
  color: var(--ink-500);
  font-weight: 500;
}
.service-price strong {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -.025em;
}
.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.service-list li {
  position: relative;
  padding-left: 22px;
  font-size: .92rem;
  color: var(--ink-700);
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--blue-100);
  border: 2px solid var(--blue-500);
}

.addons {
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
  box-shadow: 0 16px 40px rgba(14, 23, 38, .06);
  position: relative;
  overflow: hidden;
}
.addons::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle at top right, rgba(132, 179, 234, .25), transparent 70%);
  pointer-events: none;
}
.addons-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.addons-bar {
  display: block;
  width: 4px;
  height: 48px;
  background: linear-gradient(180deg, var(--blue-400), var(--blue-700));
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}
.addons h4 {
  margin: 0 0 4px;
  color: var(--ink-900);
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 1.25rem;
  font-weight: 700;
}
.addons-head p {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-500);
}

.addon-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
}
.addon-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  transition: transform .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.addon-chip:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
  transform: translateY(-2px);
}
.addon-icon {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--blue-100);
  color: var(--blue-600);
  flex-shrink: 0;
}
.addon-name {
  flex: 1;
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-900);
}
.addon-price {
  font-weight: 700;
  color: var(--blue-600);
  font-size: 1rem;
}
.addon-chip--ghost { background: #fff; border-style: dashed; }
.addon-chip--ghost .addon-name { color: var(--ink-500); font-size: .88rem; }
.addon-chip--ghost .addon-price { color: var(--ink-500); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 880px) {
  .addon-chips { grid-template-columns: repeat(2, 1fr); }
  .addons { padding: 28px 24px; }
}
@media (max-width: 540px) {
  .addon-chips { grid-template-columns: 1fr; }
}

/* ===========================================================
   TRANSFORMATION GALLERY
   =========================================================== */

.transformation {
  padding: 40px 0 clamp(72px, 8vw, 110px);
  background: #fff;
}

.trans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .trans-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .trans-tall, .trans-wide { grid-row: auto; grid-column: auto; }
}
.trans-card {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--blue-50);
}
.trans-tall { grid-row: span 2; }
.trans-wide { grid-column: span 2; }

.ph {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.ph::after {
  content: 'photo';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ph.has-photo::after { display: none; }
.service-photo.has-photo { background-image: none; }
.hero-photo-frame.has-photo .photo-placeholder { display: none; }

.ph-1 { background-image: linear-gradient(135deg, #1E6DD0, #082655); }
.ph-2 { background-image: linear-gradient(160deg, #4F8FDD, #1E6DD0); }
.ph-3 { background-image: linear-gradient(135deg, #84B3EA, #155AB0); }
.ph-4 { background-image: linear-gradient(135deg, #155AB0, #082655 60%, #1E6DD0); }
.ph-5 { background-image: linear-gradient(160deg, #B6D2F4, #4F8FDD); }
.ph-6 { background-image: linear-gradient(135deg, #4F8FDD, #082655); }
.ph-mason {
  height: 100%;
  background-image: linear-gradient(160deg, #84B3EA, #1E6DD0);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
}
.ph-mason small {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  font-size: .85rem;
  text-align: center;
  padding: 16px;
}

.gallery-note {
  text-align: center;
  font-size: .85rem;
  color: var(--ink-500);
  margin: 0;
}
.gallery-note code {
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .82rem;
}

@media (max-width: 880px) {
  .trans-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .trans-tall { grid-row: span 1; }
  .trans-wide { grid-column: span 2; }
}

/* ===========================================================
   GALLERY DIPTYCH (V4 — 2×2 quad, straight split, mono caption)
   =========================================================== */
.gal-dipt-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px 22px;
  margin-bottom: 32px;
}
.gal-dipt-wrap { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.gal-dipt {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}
.gal-dipt-half { position: absolute; top: 0; bottom: 0; width: 50%; }
.gal-dipt-half.ph::before,
.gal-dipt-half.ph::after { display: none !important; }
.gal-dipt-before { left: 0;  filter: grayscale(0.85) brightness(0.55) contrast(0.95); }
.gal-dipt-after  { right: 0; filter: saturate(1.05) brightness(1.02); }
.gal-dipt-edge {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff;
  transform: translateX(-50%);
  opacity: 0.95; z-index: 2;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}
.gal-dipt-tags {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; padding: 14px;
  pointer-events: none;
}
.gal-dipt-tag {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.28em; font-weight: 800;
  background: rgba(10, 20, 36, 0.78); color: #fff;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
}
.gal-dipt-tag--r { background: rgba(30, 109, 208, 0.9); }
.gal-dipt-meta {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  padding: 0 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.gal-dipt-meta .gal-dipt-case {
  font-size: 10px; letter-spacing: 0.24em; font-weight: 800; color: var(--blue-500, #1E6DD0);
}
.gal-dipt-meta strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-900);
}
.gal-dipt-meta .gal-dipt-loc {
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-500);
  margin-left: auto;
}

@media (max-width: 720px) {
  .gal-dipt-grid { grid-template-columns: 1fr; gap: 28px; }
  .gal-dipt-meta .gal-dipt-loc { margin-left: 0; flex-basis: 100%; }
}

/* ===========================================================
   REVIEWS
   =========================================================== */

.reviews {
  padding: clamp(72px, 8vw, 110px) 0;
  background: var(--bg-2);
}
.google-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 18px 8px 10px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--ink-700);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.google-proof .g-logo {
  width: 28px; height: 28px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .review-grid { grid-template-columns: 1fr; } }

.review-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.quote-mark {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: 'Georgia', serif;
  font-size: 8rem;
  line-height: 1;
  font-weight: 700;
  color: var(--blue-100);
  opacity: .8;
  pointer-events: none;
  user-select: none;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-200);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.review-card.review-card--compact { display: flex; flex-direction: column; }
.review-card p {
  font-size: 1rem;
  color: var(--ink-700);
  line-height: 1.7;
  margin: 14px 0 16px;
}
.review-card footer {
  font-size: .88rem;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
  padding-top: 14px;
}
.review-card footer strong { color: var(--ink-900); font-weight: 700; }
.rev-stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 1rem;
}

/* ===========================================================
   SERVICE AREA
   =========================================================== */

.area {
  padding: clamp(72px, 8vw, 110px) 0;
  background: #fff;
}
.city-pills {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.city-pills li {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  color: var(--blue-700);
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.city-pills li:hover {
  background: var(--blue-100);
  transform: translateY(-2px);
}
.area-note {
  text-align: center;
  color: var(--ink-500);
  font-size: 1rem;
}
.area-note a {
  color: var(--blue-600);
  font-weight: 700;
  border-bottom: 2px solid var(--blue-200);
}
.area-note a:hover { color: var(--blue-700); border-color: var(--blue-500); }

/* ===========================================================
   HOW IT WORKS — slanted royal-blue panel · 3 numbered steps
   Premium light/medium blue family (no navy).
   =========================================================== */

.how-slant-top {
  position: relative;
  height: 130px;
  margin-bottom: -1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.how-slant-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2C86E5 0%, #1E6DD0 60%, #155AB0 100%);
  clip-path: polygon(0 100%, 100% 28%, 100% 100%, 0 100%);
}
.how-slant-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.how-slant-bars > span {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: var(--blue-300);
  transform: skewX(-22deg);
}
.how-slant-bars > span:nth-child(1) { width: 110px; margin-left: 42px; opacity: .55; }
.how-slant-bars > span:nth-child(2) { width: 170px; }
.how-slant-bars > span:nth-child(3) { width: 78px; margin-left: 24px; opacity: .75; }

.how-it-works {
  background: linear-gradient(135deg, #2C86E5 0%, #1E6DD0 60%, #155AB0 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Pin needs to fill the viewport so the next (white) section can't peek
     through underneath while the scrub animation runs. */
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.how-stage {
  width: 100%;
  padding: clamp(40px, 5vw, 70px) 0 clamp(40px, 5vw, 60px);
}
/* Mobile: NEW behaviour — section flows naturally, cards reveal via IntersectionObserver.
   Old pin+scrub was janky on iOS Safari. Switch from flex to block to avoid flex sizing
   bugs on iOS that were leaving the section collapsed on scroll-back. */
@media (max-width: 880px) {
  .how-it-works {
    display: block;             /* was flex — flex sizing was collapsing on iOS Safari */
    min-height: auto;
    max-height: none;
    overflow: visible;
    align-items: initial;
  }
  .how-stage {
    padding: 28px 0 96px;       /* extra bottom space so card 3 clears the slant */
    width: 100%;
  }
  /* Force cards to sit ABOVE the slants — slants were stacking on top + clipping card 3 */
  .how-card { z-index: 3; }
  .how-slant-top, .how-slant-bottom { z-index: 1; }
  /* Headline on one tight line — drop the wide letter-spacing + side hairlines */
  .how-kicker {
    font-size: 30px;
    letter-spacing: 0.08em;
    gap: 14px;
    margin-bottom: 22px;
    white-space: nowrap;
  }
  .how-kicker::before, .how-kicker::after {
    width: 28px; height: 2px;
  }
  .how-h2 { margin-bottom: 32px; }
}
.how-it-works::before,
.how-it-works::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(60px);
}
.how-it-works::before {
  top: 10%; left: -8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
}
.how-it-works::after {
  bottom: 0; right: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(132, 179, 234, .25), transparent 70%);
}
.how-it-works .container { position: relative; z-index: 1; }

/* Premium HIW header — kicker flanked with hairline rules, single bold headline.
   No competing voices, big breathing room, light-blue accent on the value clause. */
/* Kicker is now the DOMINANT headline — big, bold, pure white */
.how-kicker {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 auto 28px;
  width: fit-content;
  line-height: 1;
}
.how-kicker::before, .how-kicker::after {
  content: ''; display: block;
  width: clamp(40px, 7vw, 90px); height: 2.5px;
  background: rgba(255, 255, 255, 0.85);
}

/* Headline below — smaller supporting line, words reveal one-by-one with cards */
.how-h2 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto 64px;
  max-width: 30ch;
  text-transform: none;
}
.how-word {
  display: inline-block;
  margin: 0 6px;
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
}
.how-h2-accent {
  color: #fff;
  white-space: nowrap;
  font-weight: 700;
}
.how-lede {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
  margin: -44px auto 56px;
  line-height: 1.55;
}

/* Backward-compat for any other page still using .how-script (legacy) */
.how-script {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 6px;
}

/* 5-column grid: card / bridge / card / bridge / card.
   Bridges live in their own columns — they can NEVER overlap a card.
   Symmetric, clean, gap-controlled. */
.how-grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 140px 1fr;
  align-items: stretch;
  gap: 0;
  text-align: left;
  position: relative;
}

.how-bridge {
  position: relative;
  align-self: center;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.how-bridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.how-bridge path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

/* Pool drops sit at the right edge of each bridge — exactly where the line meets the next card */
.how-pool {
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 24px 4px rgba(132, 179, 234, .9), 0 0 8px 2px rgba(255, 255, 255, .6);
  transform: translate(50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
/* Card-1's pool sits in the CENTER of the card area (no incoming line),
   so it dissolves outward from the middle as card 1 forms around it. */
.how-pool-0 {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%) scale(0);
}

/* Mobile: stack cards in one column. Rotate the SVG 90° so the SAME wavy
   curve from desktop renders VERTICALLY between stacked cards. Bigger amplitude
   so the wave has the same dramatic feel as desktop's wide curve. */
@media (max-width: 880px) {
  .how-grid {
    grid-template-columns: 1fr;
    gap: 40px;                  /* tighter — no connector wave to accommodate on mobile */
  }
  /* Hide the connector wave entirely on mobile — was janky/distracting. Cards alone read clean. */
  .how-bridge { display: none !important; }
  .how-bridge svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotate(90deg);
  }
  .how-bridge path {
    stroke-width: 1.6;          /* thin elegant line to match desktop ratio at the new bigger size */
  }
  .how-bridge .how-pool {
    top: auto;
    bottom: -6px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 50%) scale(0);
  }
}

/* ============================================================
   Wave-header card (locked 2026-04-29) — light-blue card body
   with a royal-blue wavy top, white "01" badge sitting on it,
   navy outline icon inline with title, hairline divider.
============================================================ */
.how-card {
  position: relative;
  background: #F0F5FB;
  border: 1px solid rgba(15, 71, 135, .08);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  z-index: 2;
  min-height: 380px;
  box-shadow:
    0 22px 44px -16px rgba(8, 30, 64, .55),
    0 6px 14px -6px rgba(8, 30, 64, .25);
}
.how-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 60px -18px rgba(8, 30, 64, .6),
    0 10px 20px -6px rgba(8, 30, 64, .3);
}
/* Wave SVG sits at the top, behind the badge + icon */
.how-wave {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 145px;
  z-index: 0;
  display: block;
}
/* White circle "01" badge — sits ON the blue header */
.how-num {
  position: absolute;
  top: 24px;
  left: 24px;
  background: #fff;
  color: #2F4E8E;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(8, 30, 64, .3);
  z-index: 2;
}
/* Icon — inline with title, navy on light-blue body */
.how-icon {
  position: absolute;
  top: 144px;
  right: 26px;
  background: transparent;
  border: none;
  color: #1A2A4A;
  margin: 0;
  width: auto;
  height: auto;
  z-index: 2;
  border-radius: 0;
}
.how-icon svg {
  display: block;
  width: 36px;
  height: 36px;
}
.how-icon svg * {
  stroke-width: 2;
}
/* Title — Inter 800, deep navy, sits below the wave */
.how-card h3 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  color: #0A1424;
  font-size: 1.5rem;
  letter-spacing: -.022em;
  line-height: 1.2;
  margin: 152px 70px 16px 26px;
  position: relative;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Hairline divider — slightly visible (32% opacity) */
.how-divider-line {
  border: 0;
  height: 1px;
  background: rgba(14, 26, 51, .32);
  margin: 0 26px 18px;
  position: relative;
  z-index: 1;
}
.how-card p {
  color: rgba(14, 26, 51, .88);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .002em;
  margin: 0;
  padding: 0 26px 28px;
  position: relative;
  z-index: 1;
}
/* Pool of light for card-1 entrance — sit it inside the body area */
.how-card .how-pool-0 {
  top: 50%;
  left: 50%;
}

.how-slant-bottom {
  position: relative;
  height: 130px;
  margin-top: -1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.how-slant-fill-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2C86E5 0%, #1E6DD0 60%, #155AB0 100%);
  /* Bumped divider 110→130 to widen white gap. Keep slope at 79.2px so tilt
     stays parallel with v11's slant: 79.2 / 130 = 61%. */
  clip-path: polygon(0 0, 100% 0, 100% 61%);
}

@media (max-width: 880px) {
  .how-slant-top { height: 36px; }
  .how-slant-bottom { height: 40px; }
}

/* ===========================================================
   "VIEW ALL →" SECTION CTA LINK — used at the end of each preview
   =========================================================== */
.section-cta {
  text-align: center;
  margin-top: 40px;
}
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--blue-600);
  background: #fff;
  border: 1.5px solid var(--blue-200);
  border-radius: 999px;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), gap .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.cta-link:hover {
  background: var(--blue-50);
  border-color: var(--blue-500);
  transform: translateY(-2px);
  gap: 14px;
  color: var(--blue-700);
}
.cta-link svg { transition: transform .25s var(--ease); }
.cta-link:hover svg { transform: translateX(2px); }

/* When the link sits inside the dark how-it-works panel, invert the colors */
.how-it-works .cta-link,
.final-cta .cta-link {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}
.how-it-works .cta-link:hover,
.final-cta .cta-link:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .4);
}

/* ===========================================================
   GALLERY — giant "OUR WORK" backdrop letters
   =========================================================== */
.transformation { position: relative; overflow: hidden; }
.bg-letters {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(6rem, 18vw, 16rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(30, 109, 208, .08);
  text-stroke: 1.5px rgba(30, 109, 208, .08);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.transformation .container { position: relative; z-index: 1; }

/* ===========================================================
   FINAL CTA — slanted royal-blue closer panel
   =========================================================== */
.final-slant-top {
  position: relative;
  height: 130px;
  margin-bottom: -1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.final-slant-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1E6DD0 0%, #155AB0 70%, #0F4488 100%);
  clip-path: polygon(0 100%, 100% 28%, 100% 100%, 0 100%);
}
.final-slant-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  z-index: 3;
}
.final-slant-bars > span {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: var(--blue-300);
  transform: skewX(-22deg);
}
.final-slant-bars > span:nth-child(1) { width: 70px; margin-left: 32px; opacity: .5; }
.final-slant-bars > span:nth-child(2) { width: 110px; }
.final-slant-bars > span:nth-child(3) { width: 50px; margin-left: 18px; opacity: .7; }

.final-cta {
  background: linear-gradient(135deg, #1E6DD0 0%, #155AB0 70%, #0F4488 100%);
  padding: 24px 0 clamp(80px, 10vw, 120px);
  position: relative;
  overflow: hidden;
}
.final-cta::before,
.final-cta::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(60px);
}
.final-cta::before {
  top: -100px; left: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
}
.final-cta::after {
  bottom: -80px; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(132, 179, 234, .25), transparent 70%);
}
.final-cta .container { position: relative; z-index: 1; }

.final-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}

.final-script {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 6px;
  line-height: 1;
}
.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1;
}
.final-lede {
  font-size: var(--t-lg);
  color: rgba(255, 255, 255, .85);
  margin: 0 0 28px;
  max-width: 48ch;
}

.final-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 20px;
  max-width: 360px;
}
.final-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .94rem;
  color: rgba(255, 255, 255, .85);
}
.meta-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

.final-action {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.cta-final {
  background: #fff !important;
  color: var(--blue-700) !important;
  border-color: #fff !important;
  font-size: 1.1rem !important;
  padding: 20px 28px !important;
  font-weight: 700 !important;
  box-shadow: 0 16px 48px rgba(255, 255, 255, .3);
}
.cta-final:hover {
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 56px rgba(255, 255, 255, .4);
}
.final-phone {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  transition: background .2s var(--ease), border-color .2s var(--ease);
  background: rgba(255, 255, 255, .06);
}
.final-phone:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
}
.final-phone-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 4px;
}
.final-phone-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

@media (max-width: 880px) {
  .final-grid { grid-template-columns: 1fr; gap: 40px; }
  .final-slant-top { height: 90px; }
}

/* ===========================================================
   DISCOVER THE PUREGLO DIFFERENCE — dark blue section
   Pulled from AG Auto Spa replica · slanted top + 3 glass cards
   (KEPT FOR LEGACY, no longer used on home — used in /replica.html)
   =========================================================== */

/* Slanted top divider — diagonal cut from light to dark blue,
   with 3 blue speed bars centered on the slope */
.diff-slant-top {
  position: relative;
  height: 140px;
  margin-bottom: -1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.diff-slant-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1A4B8F 0%, #082655 100%);
  /* Diagonal cut — top of dark section angles down from upper-left to lower-right */
  clip-path: polygon(0 100%, 100% 32%, 100% 100%, 0 100%);
}
.diff-slant-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.diff-slant-bars > span {
  display: block;
  height: 7px;
  border-radius: 2px;
  background: var(--blue-500);
  transform: skewX(-22deg);
}
.diff-slant-bars > span:nth-child(1) { width: 80px; margin-left: 36px; opacity: .55; }
.diff-slant-bars > span:nth-child(2) { width: 130px; }
.diff-slant-bars > span:nth-child(3) { width: 60px; margin-left: 20px; opacity: .75; }

@media (max-width: 720px) {
  .diff-slant-top { height: 100px; }
  .diff-slant-bars > span:nth-child(1) { width: 56px; margin-left: 24px; }
  .diff-slant-bars > span:nth-child(2) { width: 88px; }
  .diff-slant-bars > span:nth-child(3) { width: 42px; margin-left: 14px; }
}

.difference {
  background: linear-gradient(135deg, #1A4B8F 0%, #082655 100%);
  padding: 0 0 clamp(80px, 10vw, 130px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.difference::before,
.difference::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(60px);
}
.difference::before {
  top: 10%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(132, 179, 234, .25), transparent 70%);
}
.difference::after {
  bottom: 0; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(30, 109, 208, .3), transparent 70%);
}
.difference .container { position: relative; z-index: 1; }

.difference-script {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
  line-height: 1;
}
.difference-h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  margin: 0 0 56px;
  display: inline-block;
  position: relative;
}
.difference-h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--blue-300);
  margin: 18px auto 0;
  border-radius: 2px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}
.diff-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 38px 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.diff-card:hover {
  transform: translateY(-6px);
  border-color: rgba(132, 179, 234, .55);
  background: rgba(255, 255, 255, .08);
}
.diff-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 109, 208, .35);
}
.diff-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 14px;
}
.diff-card p {
  color: rgba(255, 255, 255, .75);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 880px) {
  .diff-grid { grid-template-columns: 1fr; gap: 16px; }
  .diff-card { padding: 28px 24px; }
}

/* ===========================================================
   PAY BANNER
   =========================================================== */

.pay-banner {
  padding: clamp(64px, 7vw, 90px) 0;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 60%, var(--blue-400) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pay-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .12), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .08), transparent 40%);
}
.pay-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}
.pay-banner h2 { color: #fff; }
.pay-copy p { color: rgba(255, 255, 255, .92); margin: 0; max-width: 56ch; font-size: var(--t-lg); }

.pay-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pay-pill {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
@media (max-width: 720px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-icons { justify-content: flex-start; }
}

/* ===========================================================
   ABOUT
   =========================================================== */

.about {
  padding: clamp(72px, 8vw, 110px) 0;
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(30, 109, 208, .06) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.about .container { position: relative; z-index: 1; }
.about-copy {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
  box-shadow: 0 4px 16px rgba(14, 23, 38, .04);
}
@media (max-width: 880px) {
  .about-copy { padding: 28px 24px; }
}
.about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-copy h2 { margin-bottom: 18px; }
.about-copy p { font-size: var(--t-lg); }
.signature { color: var(--blue-700); font-weight: 700; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-100);
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue-600);
  letter-spacing: -.025em;
}
.about-stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-500);
  font-weight: 600;
}
@media (max-width: 540px) {
  .about-stats { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 360px; margin-inline: auto; width: 100%; order: -1; }
}

/* ===========================================================
   BOOK CTA
   =========================================================== */

.book-cta {
  padding: clamp(72px, 8vw, 110px) 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.book-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -200px;
  width: 600px;
  height: 600px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(180, 211, 248, .35), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.book-cta::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(132, 179, 234, .28), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.book-cta .container { position: relative; z-index: 1; }
.book-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 880px) { .book-grid { grid-template-columns: 1fr; } }

.book-copy h2 { font-size: var(--t-h2); }
.book-copy p { font-size: var(--t-lg); margin-bottom: 28px; }
.hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ink-100);
}
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: 1rem;
}
.hours li span { color: var(--ink-500); font-weight: 500; }
.hours li b { color: var(--ink-900); font-weight: 700; }

.book-card {
  background: #fff;
  border: 2px solid var(--blue-100);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(30, 109, 208, .12);
  position: relative;
}
.book-card h3 {
  margin-bottom: 24px;
  font-size: 1.4rem;
}
.book-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-1);
  margin-bottom: 12px;
  transition: background .2s var(--ease);
  border: 1px solid var(--ink-100);
}
.book-cta-row:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
}
.book-cta-row strong { color: var(--ink-500); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.book-cta-row span { color: var(--blue-700); font-weight: 700; font-size: 1rem; }
.book-card .cta { margin-top: 20px; }
.book-fineprint {
  display: block;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-500);
  margin-top: 14px;
}

/* ===========================================================
   FOOTER
   =========================================================== */

.site-footer {
  background: var(--ink-900);
  color: var(--ink-200);
  padding: 64px 0 32px;
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: var(--ink-300); }
.site-footer .brand { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col h4 {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 12px;
}
.footer-col a, .footer-col span {
  color: var(--ink-200);
  font-size: .92rem;
  font-weight: 400;
}
.footer-col a:hover { color: var(--blue-300); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink-300);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ===========================================================
   HERO BEFORE/AFTER DRAG (added 2026-05-08)
   Replaces the old static photo placeholder. The right column
   of the hero is now a live, draggable comparison surface.
   =========================================================== */

.hero-compare {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow:
    0 30px 80px -20px rgba(8, 38, 85, .45),
    0 12px 28px -8px rgba(14, 23, 38, .25);
  border: 8px solid #fff;
  background: #1a1f2a;
  isolation: isolate;
}

/* AFTER (clean) — full panel underneath */
.hc-after {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .55) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 80%, rgba(160, 200, 240, .45), transparent 60%),
    linear-gradient(160deg, #2c4a78 0%, #1a3050 45%, #0c1a2e 100%);
}
.hc-after::before {
  /* subtle paint-sheen reflection */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(118deg,
      transparent 0px, transparent 60px,
      rgba(255, 255, 255, .05) 60px, rgba(255, 255, 255, .05) 62px);
  mix-blend-mode: screen;
}
.hc-shine {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, .5) 0px, transparent 4px),
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .35) 0px, transparent 3px),
    radial-gradient(circle at 24% 35%, rgba(255, 255, 255, .3) 0px, transparent 3px),
    radial-gradient(circle at 38% 25%, rgba(255, 255, 255, .25) 0px, transparent 3px),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .35) 0px, transparent 4px),
    radial-gradient(circle at 26% 50%, rgba(255, 255, 255, .25) 0px, transparent 3px),
    radial-gradient(ellipse at 25% 35%, rgba(255, 255, 255, .2), transparent 30%);
  pointer-events: none;
}

/* BEFORE (dirty) — clipped from the left by inline width */
.hc-before {
  position: absolute; inset: 0; right: auto;
  width: 50%;
  background:
    radial-gradient(ellipse at 30% 65%, rgba(60, 45, 30, .55), transparent 55%),
    radial-gradient(ellipse at 60% 30%, rgba(80, 65, 45, .42), transparent 55%),
    linear-gradient(160deg, #4a3826 0%, #322619 50%, #1f160d 100%);
  border-right: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
}
.hc-grime {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 23%, rgba(0,0,0,.55) 0, transparent 4px),
    radial-gradient(circle at 72% 18%, rgba(0,0,0,.45) 0, transparent 5px),
    radial-gradient(circle at 88% 38%, rgba(0,0,0,.5) 0, transparent 4px),
    radial-gradient(circle at 35% 48%, rgba(0,0,0,.45) 0, transparent 4px),
    radial-gradient(circle at 60% 60%, rgba(0,0,0,.5) 0, transparent 5px),
    radial-gradient(circle at 22% 70%, rgba(0,0,0,.55) 0, transparent 6px),
    radial-gradient(circle at 78% 78%, rgba(0,0,0,.5) 0, transparent 5px),
    radial-gradient(circle at 45% 85%, rgba(0,0,0,.45) 0, transparent 5px),
    radial-gradient(circle at 65% 30%, rgba(255, 220, 180, .15) 0, transparent 25px),
    radial-gradient(circle at 28% 55%, rgba(255, 220, 180, .12) 0, transparent 20px);
  pointer-events: none;
}

/* The handle bar */
.hc-handle {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .15),
    0 0 24px rgba(255, 255, 255, .55);
  z-index: 3;
}
.hc-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-600);
  display: grid; place-items: center;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(14, 23, 38, .06);
  animation: hc-pulse 2.4s ease-in-out infinite;
}
@keyframes hc-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(14, 23, 38, .06), 0 0 0 0 rgba(30, 109, 208, .35); }
  50%      { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(14, 23, 38, .06), 0 0 0 14px rgba(30, 109, 208, 0); }
}
.hc-handle-line { display: none; }

/* Corner tags */
.hc-tag {
  position: absolute;
  top: 14px;
  font-family: 'Inter', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  font-weight: 700;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 7px 11px;
  border-radius: 4px;
  z-index: 4;
  text-transform: uppercase;
}
.hc-tag-l { left: 14px; }
.hc-tag-r { right: 14px; }

/* "drag to reveal" hint — fades out after first interaction */
.hc-hint {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  animation: hc-hint-bob 2.6s ease-in-out infinite;
  transition: opacity .3s ease;
}
.hero-compare.is-touched .hc-hint { opacity: 0; }
@keyframes hc-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -4px); }
}

/* Drop the floating-stat positioning since we replaced the photo stack */
.hero-photo .hero-card {
  position: relative;
  left: auto; bottom: auto;
  margin-top: -28px;
  margin-left: -16px;
  z-index: 5;
}

@media (max-width: 880px) {
  .hero-compare { aspect-ratio: 5 / 4; }
  .hc-handle-knob { width: 48px; height: 48px; }
  .hc-tag { font-size: .62rem; padding: 6px 9px; }
  .hero-photo .hero-card { margin-left: 8px; }
}


/* ===========================================================
   GALLERY TILES — punch up the placeholder vignettes
   Each tile gets a detailing-specific visual layer (foam beads,
   paint sheen, swirl, before/after split, glass reflection).
   When real photos drop in (.has-photo), the layers hide.
   =========================================================== */

.transformation .ph {
  border-radius: var(--radius);
}
.transformation .ph::after {
  content: '';   /* override the "photo" label — the visual carries it now */
  background: rgba(0, 0, 0, .12);
  opacity: 0;
}

/* ph-1 — split before/after on a single tile (tall card) */
.ph-1 {
  background-image:
    linear-gradient(90deg,
      #2a1f12 0%, #2a1f12 50%,
      #1a3050 50%, #082655 100%);
  position: relative;
}
.ph-1::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(0,0,0,.45) 0, transparent 6px),
    radial-gradient(circle at 32% 60%, rgba(0,0,0,.4) 0, transparent 6px),
    radial-gradient(circle at 18% 78%, rgba(0,0,0,.45) 0, transparent 8px),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .3) 0, transparent 5px),
    radial-gradient(circle at 82% 55%, rgba(255, 255, 255, .25) 0, transparent 4px),
    radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .25) 0, transparent 5px);
}
.ph-1.has-photo::before { display: none; }

/* ph-2 — water beading on hood (close-up macro) */
.ph-2 {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .35), transparent 50%),
    linear-gradient(160deg, #4F8FDD 0%, #155AB0 60%, #0F4488 100%);
}
.ph-2::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .25) 4px, transparent 9px),
    radial-gradient(circle at 35% 55%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .2) 5px, transparent 11px),
    radial-gradient(circle at 60% 35%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .2) 4px, transparent 8px),
    radial-gradient(circle at 75% 65%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .25) 6px, transparent 13px),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .2) 5px, transparent 10px),
    radial-gradient(circle at 25% 75%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .2) 4px, transparent 8px);
}
.ph-2.has-photo::before { display: none; }

/* ph-3 — clean wheel rim radial */
.ph-3 {
  background:
    radial-gradient(circle at 50% 50%, #E6ECF4 0%, #97A4B8 25%, #233149 60%, #0E1726 100%);
}
.ph-3::before {
  content: '';
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, .35),
    rgba(255, 255, 255, .05) 30deg,
    rgba(255, 255, 255, .25) 60deg,
    rgba(255, 255, 255, .05) 120deg,
    rgba(255, 255, 255, .25) 180deg,
    rgba(255, 255, 255, .05) 240deg,
    rgba(255, 255, 255, .3) 300deg,
    rgba(255, 255, 255, .05) 360deg);
  box-shadow:
    inset 0 0 0 14px rgba(0, 0, 0, .5),
    inset 0 0 0 16px rgba(255, 255, 255, .12),
    0 0 30px rgba(180, 211, 248, .2);
}
.ph-3.has-photo::before { display: none; }

/* ph-4 — foam wave (wide card) */
.ph-4 {
  background:
    linear-gradient(180deg, #155AB0 0%, #082655 100%);
  position: relative;
}
.ph-4::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 8% 75%, #fff 0, rgba(255, 255, 255, .9) 30px, transparent 80px),
    radial-gradient(circle at 22% 85%, #fff 0, rgba(255, 255, 255, .85) 25px, transparent 70px),
    radial-gradient(circle at 38% 70%, #fff 0, rgba(255, 255, 255, .9) 35px, transparent 90px),
    radial-gradient(circle at 55% 88%, #fff 0, rgba(255, 255, 255, .85) 28px, transparent 75px),
    radial-gradient(circle at 70% 75%, #fff 0, rgba(255, 255, 255, .9) 32px, transparent 85px),
    radial-gradient(circle at 88% 82%, #fff 0, rgba(255, 255, 255, .85) 26px, transparent 70px);
  filter: blur(1px);
}
.ph-4.has-photo::before { display: none; }

/* ph-5 — interior leather close-up */
.ph-5 {
  background:
    linear-gradient(160deg, #B6D2F4 0%, #84B3EA 50%, #4F8FDD 100%);
}
.ph-5::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .08) 0px,
      rgba(0, 0, 0, .08) 1px,
      transparent 1px, transparent 8px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .08) 0px,
      rgba(0, 0, 0, .08) 1px,
      transparent 1px, transparent 8px);
}
.ph-5.has-photo::before { display: none; }

/* ph-6 — paint correction swirl mark removal */
.ph-6 {
  background: linear-gradient(135deg, #4F8FDD 0%, #082655 100%);
}
.ph-6::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 6px 1px at 25% 30%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(ellipse 8px 1px at 50% 28%, rgba(255, 255, 255, .25), transparent),
    radial-gradient(ellipse 5px 1px at 70% 35%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(ellipse 7px 1px at 35% 55%, rgba(255, 255, 255, .25), transparent),
    radial-gradient(ellipse 6px 1px at 65% 60%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(ellipse 8px 1px at 30% 75%, rgba(255, 255, 255, .25), transparent),
    radial-gradient(ellipse 5px 1px at 75% 80%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(ellipse 7px 1px at 50% 50%, rgba(255, 255, 255, .35), transparent);
  transform: rotate(8deg);
}
.ph-6.has-photo::before { display: none; }


/* ===========================================================
   TRUST STRIP — punchier numbers, subtle motion on view
   =========================================================== */
.trust-num {
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--blue-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trust-item .trust-icon {
  transition: transform .35s var(--ease);
}
.trust-item:hover .trust-icon {
  transform: translateY(-3px) scale(1.08);
}

/* ===========================================================
   CINEMATIC HERO (added 2026-05-09)
   Full-bleed drone shot of Mason's mobile rig in a real Fargo
   driveway. The image becomes a video when images/hero-drone.mp4
   ships. Headline anchors bottom-left, top chrome holds brand
   tick + REC indicator + Google rating chip.

   The OLD .hero, .hero-bg, .hero-grid, .hero-photo, .hero-compare
   rules above this block still exist but stop applying because
   the new hero markup uses .hero-cine and its child classes.
   =========================================================== */

.hero.hero-cine {
  position: relative;
  min-height: 92vh;
  height: 92vh;
  max-height: 920px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #06101e;
}
@media (max-width: 880px) {
  .hero.hero-cine {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* Cinematic stage — image/video fills the section */
.hero-cine-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-cine-video,
.hero-cine-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-cine-video {
  z-index: 2;
  background: transparent;
}
.hero-cine-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-cine-fallback img {
  display: block;
}

/* Slow Ken-Burns zoom on the still until the real video arrives */
.hero-cine-fallback img {
  animation: hero-ken-burns 22s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine-fallback img { animation: none; }
}

/* Vignette + readability gradient overlays */
.hero-cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      transparent 0%,
      transparent 55%,
      rgba(0, 0, 0, .35) 100%);
  mix-blend-mode: multiply;
}
.hero-cine-grad {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    /* left wash so the top-bar reads */
    linear-gradient(90deg,
      rgba(8, 16, 32, .55) 0%,
      rgba(8, 16, 32, .15) 28%,
      transparent 50%,
      rgba(8, 16, 32, .12) 100%),
    /* stronger bottom-up so the headline sits on a darker surface */
    linear-gradient(180deg,
      rgba(8, 16, 32, .35) 0%,
      transparent 18%,
      transparent 38%,
      rgba(6, 14, 28, .55) 62%,
      rgba(6, 14, 28, .85) 82%,
      rgba(4, 10, 22, .96) 100%);
}

/* TOP BAR — brand tick + Google rating chip */
.hero-cine-topbar {
  position: relative;
  z-index: 6;
  padding: 22px 0 0;
}
.hero-cine-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero-cine-tick {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 12px;
  background: rgba(8, 16, 32, .42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  font-weight: 700;
}
.hero-cine-rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 4px rgba(255, 59, 59, .22);
  animation: hero-cine-rec-blink 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hero-cine-rec-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(255, 59, 59, .22); }
  50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(255, 59, 59, .05); }
}
.hero-cine-tickline {
  width: 22px; height: 1px;
  background: rgba(255, 255, 255, .55);
}
.hero-cine-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: rgba(255, 255, 255, .96);
  border-radius: 999px;
  text-decoration: none;
  font-size: .88rem;
  color: var(--ink-700);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease);
}
.hero-cine-rating:hover { transform: translateY(-1px); }
.hero-cine-rating-num {
  font-weight: 800;
  color: var(--ink-900);
  font-size: 1rem;
  letter-spacing: -.01em;
}
.hero-cine-rating-stars {
  color: var(--gold);
  letter-spacing: 1.5px;
  font-size: .82rem;
}
.hero-cine-rating-meta {
  color: var(--ink-500);
  font-size: .82rem;
  font-weight: 500;
}

/* BOTTOM CONTENT — headline, CTAs, pills, credit */
.hero-cine-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 0 0 44px;
}
.hero-cine-content-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 48px;
}
.hero-cine-copy { max-width: 640px; }
.hero-cine-h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 18px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero-cine-accent {
  display: inline-block;
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #B6D2F4 0%, #4F8FDD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-cine-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 10" preserveAspectRatio="none"><path d="M2 7 Q60 1 120 5 T198 3" stroke="%2384B3EA" stroke-width="2.4" fill="none" stroke-linecap="round" opacity="0.85"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hero-cine-lede {
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  max-width: 56ch;
  margin: 0 0 26px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.hero-cine-lede strong {
  color: #fff;
  font-weight: 700;
}

.hero-cine-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-cine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  background: var(--blue-500);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--blue-400);
  box-shadow:
    0 14px 30px -10px rgba(30, 109, 208, .55),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta-cine:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 36px -10px rgba(30, 109, 208, .65),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.cta-cine svg { transition: transform .25s var(--ease); }
.cta-cine:hover svg { transform: translateX(3px); }
.cta-cine-ghost {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  color: #fff;
}
.cta-cine-ghost:hover {
  background: rgba(255, 255, 255, .22);
  box-shadow: none;
}

.hero-cine-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  align-self: end;
  justify-self: end;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.hero-cine-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.hcp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 0 4px rgba(132, 179, 234, .25);
  flex-shrink: 0;
}

.hero-cine-credit {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hcc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(132, 179, 234, .8);
}

/* Scroll cue */
.hero-cine::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 22px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  transform: translateX(-50%);
  z-index: 7;
  background:
    radial-gradient(circle at 50% 22%,
      rgba(255, 255, 255, .9) 0px,
      rgba(255, 255, 255, .9) 2px,
      transparent 2.5px) no-repeat;
  background-position: center 20%;
  animation: hero-cine-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes hero-cine-scroll-cue {
  0%, 100% { background-position: center 20%; opacity: .7; }
  50%      { background-position: center 60%; opacity: 1; }
}

/* Mobile cinematic: image becomes a banner above stacked content */
@media (max-width: 880px) {
  .hero.hero-cine {
    display: flex;
    flex-direction: column;
    background: #06101e;
  }
  .hero-cine-stage {
    position: relative;
    height: 56vh;
    min-height: 380px;
    inset: auto;
  }
  .hero-cine-grad {
    background:
      linear-gradient(180deg,
        transparent 0%,
        transparent 55%,
        rgba(6, 14, 28, .85) 100%);
  }
  .hero-cine-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 16px 0 0;
  }
  .hero-cine-topbar-inner {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-cine-tick { font-size: .58rem; padding: 6px 10px 6px 10px; }
  .hero-cine-rating { font-size: .76rem; padding: 6px 12px 6px 6px; }
  .hero-cine-rating-meta { display: none; }
  .hero-cine-content {
    position: relative;
    padding: 28px 0 36px;
    background: #06101e;
  }
  .hero-cine-content-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-cine-h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .hero-cine-pills {
    align-self: start;
    justify-self: start;
    text-align: left;
  }
  .hero-cine-pills li { justify-content: flex-start; }
  .hero-cine-credit { display: none; }
  .hero-cine::after { display: none; }
}

/* Hide the old hero decorative chrome — they don't apply to .hero-cine
   because the markup changed, but defensively neutralize any orphaned
   selectors so a stale browser cache can't show ghost orbs. */
.hero-cine .orb, .hero-cine .grid-bg, .hero-cine .hero-bg,
.hero-cine .hero-decor, .hero-cine .hero-photo,
.hero-cine .hero-grid, .hero-cine .hero-tick { display: none !important; }


/* ===========================================================
   HERO V1 — "WE COME TO YOU." (locked from variant #1)
   Bold ALL-CAPS leaning, blue gradient on "you.", tiny kicker
   above headline, royal-blue primary CTA + glass ghost secondary.
   =========================================================== */
.hero-cine-kicker {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(180, 211, 248, .9);
  font-weight: 700;
  margin-bottom: 14px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.hero-cine-h1.hero-cine-h1-v1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(3.4rem, 9.4vw, 7.4rem);
  line-height: .92;
  letter-spacing: -.045em;
  margin-bottom: 22px;
  text-transform: none;
}
@media (max-width: 880px) {
  .hero-cine-h1.hero-cine-h1-v1 {
    font-size: clamp(2.6rem, 11vw, 4.2rem);
  }
}

/* Royal-blue primary CTA — overrides cta-cine for variant #1 */
.cta-cine.cta-cine-royal {
  background: #1E6DD0;
  border-color: #1E6DD0;
  box-shadow:
    0 18px 36px -10px rgba(30, 109, 208, .65),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cta-cine.cta-cine-royal:hover {
  background: #155AB0;
  border-color: #155AB0;
  box-shadow:
    0 22px 40px -10px rgba(30, 109, 208, .8),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}


/* ===========================================================
   NIKE HERO (locked direction · concept #3 from cinematic round)
   Full-bleed drone shot. Just text on image. No chrome.
   =========================================================== */
.hero.hero-nike {
  position: relative;
  height: 92vh;
  min-height: 92vh;
  max-height: 920px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #06101e;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 880px) {
  .hero.hero-nike { height: auto; min-height: 0; max-height: none; }
}

.hero-nike-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-nike-video,
.hero-nike-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias right so Mason + the car (the focal point) sit in the
     uncovered right half of the hero, while text gets bottom-left. */
  object-position: 65% 45%;
}
.hero-nike-video { z-index: 2; background: transparent; }
.hero-nike-fallback { position: absolute; inset: 0; z-index: 1; }
.hero-nike-fallback img {
  display: block;
  animation: hero-nike-zoom 22s ease-in-out infinite alternate;
}
@keyframes hero-nike-zoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.12) translate3d(-1.2%, -.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-nike-fallback img { animation: none; }
}

/* Darkening for readability — heavier on bottom-LEFT (where the
   stack sits) so the right half of the image stays clear. */
.hero-nike-grad {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 85% at 0% 100%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .42) 40%,
      transparent 75%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 45%,
      rgba(6, 14, 28, .55) 85%,
      rgba(6, 14, 28, .88) 100%);
}

/* Top-left tag — Nike-style boxed badge */
.hero-nike-tag {
  position: absolute;
  top: 28px; left: 32px;
  z-index: 5;
  font-family: 'Inter', sans-serif;
  font-size: clamp(.82rem, 1vw, 1rem);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  padding: 12px 18px;
  border: 2px solid #fff;
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Bottom-left content stack */
.hero-nike-content {
  position: relative;
  z-index: 4;
  width: 100%;
  /* Top padding must clear the sticky white header (~88px) so the eyebrow isn't hidden under it */
  padding: 120px 0 88px;
}
/* Content anchors to the left edge — no centered container — text hugs the left gutter. */
.hero-nike-content .container {
  max-width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 3.5vw, 56px);
}
.hero-nike-content .container > * {
  max-width: 920px;
}
.hero-nike-eyebrow {
  display: inline-block;       /* pill hugs the text */
  font-size: clamp(.82rem, 1vw, 1rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #1E6DD0;
  font-weight: 900;
  margin-bottom: 22px;
  /* Soft frosted pill so the brand-blue text stays legible over the bright driveway photo */
  background: rgba(255, 255, 255, 0.88);
  padding: 9px 16px 9px 18px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -4px rgba(15, 40, 90, 0.20);
  text-shadow: none;
}
.hero-nike-h {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  /* Big, confident — fills the left half on wide screens, balanced by the photo on the right */
  font-size: clamp(3.4rem, 9.5vw, 9.2rem);
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 32px;
  text-shadow:
    0 6px 28px rgba(0, 0, 0, .5),
    0 2px 4px rgba(0, 0, 0, .35);
  max-width: 16ch;
  font-feature-settings: "ss01", "kern", "liga";
}
.hero-nike-sub {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  color: rgba(255, 255, 255, .92);
  max-width: 56ch;
  margin: 0 0 36px;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.hero-nike-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-nike-btn {
  padding: 16px 30px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  display: inline-block;
  transition: transform .2s ease, background-color .2s ease;
}
.hero-nike-btn-fill {
  background: #1E6DD0;
  color: #fff;
  border: 2px solid #1E6DD0;
  box-shadow: 0 14px 28px -10px rgba(30, 109, 208, .55);
}
.hero-nike-btn-fill:hover {
  background: #155AB0;
  border-color: #155AB0;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(30, 109, 208, .7);
}
.hero-nike-btn-line {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.hero-nike-btn-line:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}
@media (max-width: 880px) {
  .hero-nike-tag { top: 16px; left: 16px; font-size: .68rem; padding: 8px 12px; }
  .hero-nike-content { padding: 96px 0 40px; }
  .hero-nike-h { font-size: clamp(2.8rem, 14vw, 4.6rem); }
  .hero-nike-sub { font-size: 1.05rem; max-width: none; }
  .hero-nike-btn { padding: 16px 26px; font-size: .82rem; }
  .hero-nike-stage { position: absolute; }
}