/* ========================================
   916 POOLS - GLOBAL STYLES
   ======================================== */

/* --- Design Tokens --- */
:root {
  --navy: #060e15;
  --navy-light: #0c1a2a;
  --navy-mid: #0f2440;
  --blue: #1ba9f1;
  --blue-dark: #2563eb;
  --blue-light: #4fc3f7;
  --blue-gradient: linear-gradient(135deg, #1ba9f1 0%, #2563eb 100%);
  --white: #FFFFFF;
  --off-white: #f4f6f0;
  --gray-50: #f9fafb;
  --gray-100: #f1f5f9;
  --gray-200: #e5e7eb;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #666666;
  --gray-600: #475569;
  --gray-700: #374151;
  --gray-800: #1E293B;
  --gray-900: #0c4a6e;
  --success: #22C55E;
  --error: #EF4444;
  --font-display: 'Cabinet Grotesk', 'DM Sans', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6, .heading { font-family: var(--font-display); line-height: 1.15; color: var(--gray-900); }
h1 { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1rem + 0.75vw, 1.75rem); font-weight: 700; }
h4 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem); font-weight: 700; }
p, li, td { font-size: 1rem; line-height: 1.7; color: var(--gray-600); }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--gray-500); }
.text-white { color: var(--white); }
.text-teal { color: var(--blue); }
.text-gold { color: var(--blue); }

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 800px; }
.container--wide { max-width: 1400px; }
.section { padding: clamp(4rem, 8vw, 8rem) 0; }
.section--navy { background: var(--navy); }
.section--navy h2, .section--navy h3, .section--navy h4, .section--navy p, .section--navy li { color: var(--white); }
.section--navy .text-muted { color: var(--gray-400); }
.section--gray { background: var(--gray-50); }
.section__header { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }
.section__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #0c7dba; /* Darkened from #1ba9f1 for WCAG AA contrast */
  margin-bottom: 1rem;
}
.section__header h2 {
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.section__subtitle { margin-top: 1rem; font-size: 1.1rem; color: var(--gray-500); }
.section--navy .section__subtitle { color: var(--gray-400); }

/* --- Buttons (High contrast, glow effects) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  position: relative;
  min-height: 48px;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

/* Primary: solid brand blue, calm shadow, no pulsing glow */
.btn--primary {
  background: linear-gradient(135deg, #1ba9f1 0%, #0d8ecf 100%);
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 4px 14px rgba(27, 169, 241, 0.3);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #2bb4f7 0%, #1196d8 100%);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(27, 169, 241, 0.4);
}

/* Secondary — Glass outline with glow */
.btn--secondary, .btn--outline {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn--secondary:hover, .btn--outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.8);
  box-shadow: 0 0 25px rgba(255,255,255,0.2), 0 8px 32px rgba(0,0,0,0.3);
}

.btn--outline-dark { background: transparent; color: var(--navy); border: 2px solid var(--gray-300); }
.btn--outline-dark:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 15px rgba(27,169,241,0.2); }
.btn--sm { padding: 0.6rem 1.4rem; font-size: 0.9rem; min-height: 44px; }
.btn--lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; min-height: 56px; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(27,169,241,0.45), 0 0 60px rgba(27,169,241,0.15), inset 0 1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 0 35px rgba(27,169,241,0.65), 0 0 90px rgba(27,169,241,0.25), inset 0 1px 0 rgba(255,255,255,0.25); }
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* === HERO ESTIMATE BUTTON — extra attention === */
.hero__ctas .btn--primary {
  animation: ctaAttention 4s ease-in-out infinite, shimmer 4s linear infinite;
  font-size: 1.1rem;
  position: relative;
}
/* Ring burst on pulse */
.hero__ctas .btn--primary::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(27,169,241,0.5);
  animation: ringBurst 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaAttention {
  0%, 68%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 20px rgba(27,169,241,0.35); }
  72% { transform: translateY(-3px) scale(1.04) rotate(-1deg); box-shadow: 0 8px 40px rgba(27,169,241,0.6); }
  76% { transform: translateY(-2px) scale(1.04) rotate(1.5deg); box-shadow: 0 8px 40px rgba(27,169,241,0.6); }
  80% { transform: translateY(-3px) scale(1.04) rotate(-1deg); box-shadow: 0 8px 40px rgba(27,169,241,0.6); }
  84% { transform: translateY(-1px) scale(1.02) rotate(0.5deg); box-shadow: 0 6px 30px rgba(27,169,241,0.5); }
  88% { transform: translateY(0) scale(1); box-shadow: 0 4px 20px rgba(27,169,241,0.35); }
}
@keyframes ringBurst {
  0%, 68%, 88%, 100% { transform: scale(1); opacity: 0; }
  72% { transform: scale(1); opacity: 0.7; }
  84% { transform: scale(1.15); opacity: 0; }
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Header: Floating Glass Island --- */
.header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1200px;
  border-radius: 100px;
  background: rgba(10,14,42,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1000;
  padding: 0 0.5rem 0 1.25rem;
  transition: 
    background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.header--scrolled {
  background: rgba(11,15,38,0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  top: 10px;
  width: 94%;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0; }
.header__logo { padding-left: 0.5rem; }
.header__logo img { height: 28px; width: auto; max-width: 140px; object-fit: contain; }
@media (max-width: 768px) { .header__logo { padding-left: 0.25rem; } .header__logo img { height: 26px; max-width: 110px; } }
.header__nav { display: flex; align-items: center; gap: 0.25rem; }
.header__nav a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.header__nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--white);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(-50%);
  border-radius: 1px;
}
.header__nav a:hover::after, .header__nav a.active::after { width: 60%; }
.header__nav a:hover, .header__nav a.active { color: var(--white); }
.header__nav .dropdown { position: relative; }
.header__nav .dropdown-trigger { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.header__nav .dropdown-trigger::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; transition: transform 0.2s; position: static; width: auto; height: auto; background: none; transform: none; }
.header__nav .dropdown:hover .dropdown-trigger::after { transform: rotate(180deg); width: auto; }
.header__nav .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: rgba(15,20,50,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s ease; z-index: 200; }
.header__nav .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.header__nav .dropdown-menu a { color: rgba(255,255,255,0.8); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; display: block; }
.header__nav .dropdown-menu a::after { display: none; }
.header__nav .dropdown-menu a:hover { background: rgba(27,169,241,0.15); color: var(--white); }
.header__cta-group { display: flex; align-items: center; gap: 1rem; }
.header__phone { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.4rem; transition: color var(--transition); }
.header__phone:hover { color: var(--white); }
.header__phone svg { width: 18px; height: 18px; }
/* Free Estimate pill CTA in header */
.header .btn--primary.btn--sm {
  background: linear-gradient(135deg, #1ba9f1, #2563eb);
  border: none;
  border-radius: 100px;
  padding: 0.5rem 1.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(27,169,241,0.35);
  letter-spacing: 0.01em;
  animation: navCtaPulse 5s ease-in-out infinite;
}
@keyframes navCtaPulse {
  0%, 75%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(27,169,241,0.35); }
  80% { transform: scale(1.06); box-shadow: 0 6px 24px rgba(27,169,241,0.55); }
  85% { transform: scale(1); box-shadow: 0 4px 16px rgba(27,169,241,0.35); }
}

/* Hamburger */
.hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; z-index: 999; background: none; border: none; padding: 6px; position: relative; -webkit-tap-highlight-color: transparent; }
.hamburger__waves, .hamburger__close { transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hamburger__waves { opacity: 1; transform: scale(1) rotate(0deg); }
.hamburger__close { position: absolute; opacity: 0; transform: scale(0.5) rotate(-90deg); }
.hamburger.active .hamburger__waves { opacity: 0; transform: scale(0.5) rotate(90deg); }
.hamburger.active .hamburger__close { opacity: 1; transform: scale(1) rotate(0deg); }
.wave { animation: waveFloat 2.5s ease-in-out infinite; }
.wave--2 { animation-delay: 0.15s; }
.wave--3 { animation-delay: 0.3s; }
@keyframes waveFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-menu { position: fixed; top: 0; right: 0; width: 85%; max-width: 360px; height: 100vh; height: 100dvh; background: var(--navy); z-index: 9999; padding: 5rem 2rem 6rem; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mobile-menu__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.75rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; z-index: 1; }
.mobile-menu__close:hover, .mobile-menu__close:active { color: var(--white); background: rgba(255,255,255,0.1); }
.mobile-menu__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s; }
.mobile-menu__overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu nav a { display: block; color: var(--white); text-decoration: none; font-size: 1.1rem; font-weight: 500; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu nav a:hover { color: var(--blue); }
.mobile-menu__cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Mobile header CTA */
.header__mobile-cta { display: none; }

@media (max-width: 1024px) {
  .header__nav, .header__cta-group { display: none; }
  .hamburger { display: flex; }
  .header {
    left: 12px;
    right: 12px;
    border-radius: 16px;
    padding: 0 1rem;
  }
  .header--scrolled {
    left: 0;
    right: 0;
    border-radius: 0;
    top: 0;
  }
  .header__mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #1ba9f1, #2563eb);
    color: #fff;
    font-family: 'Cabinet Grotesk', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.9rem;
    border-radius: 100px;
    text-decoration: none;
    margin-right: 0.75rem;
    box-shadow: 0 2px 12px rgba(27,169,241,0.35);
    animation: mobileCta-pulse 2.5s ease-in-out infinite;
    white-space: nowrap;
  }
  .header__mobile-cta svg { width: 14px; height: 14px; }
}

@keyframes mobileCta-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(27,169,241,0.35); }
  50% { box-shadow: 0 2px 24px rgba(27,169,241,0.6), 0 0 40px rgba(27,169,241,0.15); }
}

/* --- Hero (Page Headers) --- */
.page-hero { position: relative; padding: clamp(4rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 6rem); background: var(--navy); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0.7) 0%, rgba(10,22,40,0.9) 100%); }
.page-hero__content { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 1rem; }
.page-hero h1 span { color: var(--blue-light); }
.page-hero p { color: var(--gray-300); font-size: 1.15rem; max-width: 600px; }
.page-hero .breadcrumb { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.85rem; }
.page-hero .breadcrumb a { color: var(--gray-400); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: var(--blue); }
.page-hero .breadcrumb span { color: var(--gray-500); }

/* --- Homepage Hero ---
   Pass 33: Desktop hero was sitting at min-height:90vh with 210px top
   padding, pushing the headline below the fold and burying the photo
   under a 95%-opaque overlay at the bottom. Apple-grade fix:
   - Tighter min-height (auto on desktop too, with a sensible cap)
   - Top padding cut in half so content lifts up under the booking banner
   - Overlay rebalanced: lighter at top (so the pool photo stays vivid),
     a clean fade-to-dark only behind the text block, and a soft vignette
     to anchor the type. */
.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: calc(var(--banner-h, 0px) + 96px);
  padding-bottom: 2.5rem;
}
@media (min-width: 1100px) {
  .hero { min-height: clamp(640px, 78vh, 820px); padding-top: calc(var(--banner-h, 0px) + 112px); }
}
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-top: calc(var(--banner-h, 0px) + 88px) !important;
    padding-bottom: 2rem !important;
    align-items: flex-start !important;
  }
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Pass 33: lighter top, soft mid, deeper only at the very bottom so
     the booking banner reads but the pool photo stays alive. Desktop
     gradient stops are reweighted vs the old all-dark wash. */
  background:
    radial-gradient(ellipse 78% 60% at 50% 62%, rgba(8,12,30,0.55) 0%, rgba(8,12,30,0.0) 70%),
    linear-gradient(180deg, rgba(8,12,30,0.32) 0%, rgba(8,12,30,0.36) 35%, rgba(8,12,30,0.55) 70%, rgba(8,12,30,0.82) 100%);
}
@media (max-width: 768px) {
  /* Mobile keeps a slightly heavier wash because the headline lives
     much closer to the bottom of the viewport. */
  .hero__overlay {
    background:
      radial-gradient(ellipse 90% 55% at 50% 65%, rgba(8,12,30,0.65) 0%, rgba(8,12,30,0.0) 75%),
      linear-gradient(180deg, rgba(8,12,30,0.45) 0%, rgba(8,12,30,0.55) 40%, rgba(8,12,30,0.78) 80%, rgba(8,12,30,0.92) 100%);
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  padding: 0 1.5rem 2rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .hero__content {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
  }
}
/* Social proof glass badge */
.hero__badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 0.45rem 1rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
}
.hero__badge svg { width: 14px; height: 14px; }
.hero__badge .badge-star { fill: #fbbf24; width: 16px; height: 16px; }
.hero__badge--google {
  background: rgba(255,255,255,0.12);
}
.hero__title { color: var(--white); font-size: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem); margin-bottom: 1.25rem; line-height: 1.08; letter-spacing: -0.025em; }
/* Hero accent word — "Dream" in blue */
.hero__title .hero-accent {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  font-style: italic;
}
/* Hero italic word — "Backyard" in elegant white italic */
.hero__title .hero-italic {
  color: #fff;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: none;
  -webkit-text-fill-color: #fff;
  position: relative;
  display: inline-block;
}
/* Subtle underline flourish on "Backyard" */
.hero__title .hero-italic::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 1px;
}
.hero__subtitle { color: rgba(255,255,255,0.92); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem); line-height: 1.7; margin-bottom: 2rem; max-width: 520px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; padding-bottom: 1rem; }
/* Glass outline pill CTA */
.hero__ctas .btn--glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white);
  border-radius: 100px;
  padding: 0.9rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__ctas .btn--glass:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}
/* Hero primary CTA as pill */
.hero__ctas .btn--primary.btn--lg {
  border-radius: 100px;
  background: linear-gradient(135deg, #1ba9f1, #2563eb);
  border: none;
  box-shadow: 0 4px 24px rgba(27,169,241,0.35);
}
.hero__ctas .btn--primary.btn--lg:hover {
  box-shadow: 0 8px 40px rgba(27,169,241,0.6);
  transform: translateY(-3px) scale(1.04);
  animation: shimmer 4s linear infinite;
}
/* Quote match link below hero CTAs */
.hero__quote-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 2rem;
  transition: color 0.3s;
}
.hero__quote-link span {
  color: rgba(45,212,191,0.7);
  font-weight: 600;
  transition: color 0.3s;
}
.hero__quote-link:hover {
  color: rgba(255,255,255,0.7);
}
.hero__quote-link:hover span {
  color: #2dd4bf;
}

/* Trust bar at bottom of hero */
.hero__trust-bar {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.5rem;
}
.hero__trust-bar span {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Legacy trust bar (services pages etc) */
.trust-bar { display: flex; justify-content: flex-start; gap: 2rem; flex-wrap: wrap; }
.trust-bar__item { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.7); font-size: 0.8rem; font-weight: 500; }
.trust-bar__icon { width: 18px; height: 18px; color: var(--blue); }

/* --- Urgency Banner --- */
.urgency-banner { background: var(--blue-gradient); color: var(--white); text-align: center; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; }
.urgency-banner a { color: var(--white); }

/* --- Service Cards --- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
.service-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); text-decoration: none; color: inherit; display: block; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.service-card__img-wrap { height: 200px; overflow: hidden; }
.service-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-card__img-wrap img { transform: scale(1.05); }
.service-card__body { padding: 1.25rem; }
.service-card__name { font-size: 1.15rem; margin-bottom: 0.5rem; }
.service-card__desc { font-size: 0.9rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 0.75rem; }
.service-card__link { color: #0c6b9e; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; }

/* --- Why Choose Us --- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.why-item { display: flex; gap: 1rem; margin-bottom: 2rem; }
.why-item__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(27,169,241,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }
.why-item__icon svg { width: 22px; height: 22px; }
.why-item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.why-item p { font-size: 0.9rem; }
.why-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.why-image img { width: 100%; height: auto; display: block; }

/* --- Stats --- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; text-align: center; padding: 2rem 0; }
.stat-item { }
.stat-item__number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--blue-light); }
.stat-item__label { font-size: 0.85rem; color: var(--gray-400); margin-top: 0.25rem; }

/* --- Portfolio Gallery --- */
.gallery-filters { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gallery-filters button { padding: 0.5rem 1.25rem; border: 1px solid var(--gray-300); border-radius: var(--radius-xl); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition); background: var(--white); color: var(--gray-600); }
.gallery-filters button.active, .gallery-filters button:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.gallery-item { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,22,40,0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 1rem; }
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__label { color: var(--white); font-size: 0.85rem; font-weight: 600; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1000; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; color: var(--white); font-size: 2rem; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.lightbox__close:hover { background: rgba(255,255,255,0.1); }

/* --- Process Steps --- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.process-step { text-align: center; padding: 2rem; position: relative; }
.process-step__number { width: 60px; height: 60px; border-radius: 50%; background: rgba(27,169,241,0.15); color: var(--blue); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.process-step h3 { margin-bottom: 0.75rem; }

/* --- Testimonials --- */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; }
.testimonial-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }
.testimonial-card__stars { display: flex; gap: 2px; margin-bottom: 1rem; }
.testimonial-card__stars svg { width: 18px; height: 18px; fill: #f59e0b; }
.testimonial-card__text { font-size: 1rem; line-height: 1.7; color: var(--gray-600); margin-bottom: 1.5rem; font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.testimonial-card__name { font-weight: 700; color: var(--gray-900); font-size: 0.95rem; }
.testimonial-card__location { font-size: 0.8rem; color: var(--gray-500); }
.testimonial-card__verified { font-size: 0.75rem; color: var(--blue); font-weight: 600; }

/* --- Team --- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.team-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); text-decoration: none; color: inherit; display: block; transition: all 0.3s ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.team-card__img { height: 280px; overflow: hidden; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 1.25rem; text-align: center; }
.team-card__name { font-size: 1.15rem; margin-bottom: 0.25rem; }
.team-card__role { color: var(--blue); font-weight: 600; font-size: 0.85rem; }

/* --- Service Areas --- */
.areas-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.area-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1.25rem; border-radius: var(--radius-xl); font-size: 0.9rem; font-weight: 500; border: 1px solid var(--gray-300); color: var(--gray-700); transition: all var(--transition); background: var(--white); text-decoration: none; }
.area-tag:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.section--navy .area-tag { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); background: transparent; }
.section--navy .area-tag:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* --- FAQ Accordion --- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; }
.faq-item__question { width: 100%; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; color: var(--gray-900); cursor: pointer; background: var(--white); text-align: left; }
.faq-item__question::after { content: '+'; font-size: 1.5rem; color: var(--blue); transition: transform 0.3s; font-weight: 400; }
.faq-item.open .faq-item__question::after { content: '−'; }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item__answer-inner { padding: 0 1.5rem 1.25rem; color: var(--gray-600); line-height: 1.7; }

/* --- Contact Form --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.4rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition); background: var(--white); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,169,241,0.15); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.checkbox-group label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 400; color: var(--gray-600); cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); }
.contact-info-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(27,169,241,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }
.contact-info-card__icon svg { width: 22px; height: 22px; }
.contact-info-card__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); }
.contact-info-card a { color: var(--blue); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.contact-info-card a:hover { color: var(--blue-dark); }

/* --- Comparison Table --- */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--gray-200); }
.compare-table th { font-weight: 700; font-size: 0.9rem; }
.compare-table thead th { background: var(--navy); color: var(--white); }
.compare-table thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.compare-table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }
.compare-table td:nth-child(2) { color: var(--blue); font-weight: 600; }
.check { color: var(--success); font-weight: 700; }
.cross { color: var(--gray-300); }

/* --- Service Page Content --- */
.service-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.service-content img { border-radius: var(--radius-xl); width: 100%; height: auto; box-shadow: var(--shadow-lg); }
.service-content h2 { margin-bottom: 1rem; }
.service-content p { margin-bottom: 1rem; }
.service-content ul { margin: 1rem 0; padding-left: 0; list-style: none; }
.service-content ul li { padding: 0.5rem 0 0.5rem 2rem; position: relative; }
.service-content ul li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.service-sidebar { position: sticky; top: 100px; }

/* --- CTA Section --- */
.cta-section { background: #111845; padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; }
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.8); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-section .btn { margin: 0 0.5rem; }

/* --- Footer --- */
.footer { background: #0e1338; color: rgba(255,255,255,0.85); padding: 4rem 0 0; border-top: 1px solid rgba(255,255,255,0.08); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer__brand p { font-size: 0.9rem; margin-top: 1rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
.footer__brand img { mix-blend-mode: screen; width: 200px; height: auto; object-fit: contain; max-height: 60px; }
.footer h4 { color: var(--white); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 0.5rem; }
.footer ul a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.875rem; transition: color var(--transition); }
.footer ul a:hover { color: var(--blue); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; }
.footer__license { color: rgba(255,255,255,0.6); }

/* --- Sticky Mobile CTA --- */
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(6,14,21,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.5rem 0.6rem; box-shadow: 0 -4px 30px rgba(0,0,0,0.5); }
.mobile-cta__inner { display: flex; gap: 0.5rem; }
.mobile-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-family: 'Cabinet Grotesk', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
}
.mobile-cta__btn:active { transform: scale(0.95); }
.mobile-cta__btn svg { flex-shrink: 0; }
/* Text button — green gradient with glow */
.mobile-cta__btn--text {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 15px rgba(37,211,102,0.4), 0 0 40px rgba(37,211,102,0.1);
  animation: textBuzz 4s ease-in-out infinite;
}
/* Call button — blue gradient with ring animation */
.mobile-cta__btn--call {
  background: linear-gradient(135deg, #1ba9f1 0%, #0d8ecf 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 15px rgba(27,169,241,0.4), 0 0 40px rgba(27,169,241,0.1);
  animation: callRing 3s ease-in-out infinite;
}
.mobile-cta__btn--call svg { animation: phoneShake 3s ease-in-out infinite; }
/* Contactless booking button — dark with blue accent and calendar icon */
.mobile-cta__btn--contactless {
  background: linear-gradient(135deg, #0A1628 0%, #1a2845 100%);
  color: #fff;
  border-color: rgba(27,169,241,0.35);
  box-shadow: 0 0 15px rgba(27,169,241,0.25), 0 0 40px rgba(10,22,40,0.2);
}
.mobile-cta__btn--contactless:hover, .mobile-cta__btn--contactless:focus {
  background: linear-gradient(135deg, #0A1628 0%, #1ba9f1 140%);
  border-color: rgba(27,169,241,0.6);
}
@keyframes textBuzz {
  0%, 90%, 100% { transform: translateX(0); }
  92% { transform: translateX(-2px); }
  94% { transform: translateX(2px); }
  96% { transform: translateX(-1px); }
  98% { transform: translateX(1px); }
}
@keyframes callRing {
  0%, 100% { box-shadow: 0 0 15px rgba(27,169,241,0.4), 0 0 40px rgba(27,169,241,0.1); }
  50% { box-shadow: 0 0 25px rgba(27,169,241,0.6), 0 0 60px rgba(27,169,241,0.2); }
}
@keyframes phoneShake {
  0%, 85%, 100% { transform: rotate(0deg); }
  87% { transform: rotate(15deg); }
  89% { transform: rotate(-10deg); }
  91% { transform: rotate(12deg); }
  93% { transform: rotate(-8deg); }
  95% { transform: rotate(5deg); }
  97% { transform: rotate(0deg); }
}

@media (max-width: 768px) {
  .mobile-cta { display: block; padding-bottom: env(safe-area-inset-bottom); }
  body { padding-bottom: 80px; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .why-grid, .service-content, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .why-grid > * { min-width: 0; overflow: hidden; }
  .process-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .services-grid { grid-template-columns: 1fr; gap: 1rem; }
  /* Before/After grid fix */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* Comparison widget: horizontal scroll on mobile */
  .comparison-widget { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-widget table { min-width: 600px; font-size: 0.85rem; }

  /* Hero CTAs - stack */
  .hero__cta-group { flex-direction: column; align-items: stretch; }
  .hero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding-top: calc(var(--banner-h, 0px) + 150px) !important;
    padding-bottom: 2rem !important;
  }
  .hero__content {
    padding-top: 0.5rem !important;
    padding-bottom: 4rem !important; /* Clear the sticky Text/Call bar */
    margin-top: 0 !important;
  }
  /* Shrink badges on mobile so title dominates */
  .hero__badges {
    gap: 0.35rem;
    margin-bottom: 0.35rem;
  }
  .hero__badge {
    padding: 0.25rem 0.6rem;
    font-size: 0.6rem;
  }
  /* TITLE = focal point */
  .hero__title {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0.4rem !important;
  }
  .hero__subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.5 !important;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding-bottom: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__ctas .btn {
    text-align: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0.9rem;
  }
  /* Make secondary CTA compact on mobile */
  .hero__ctas .btn--secondary,
  .hero__ctas .btn--outline {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.5rem;
    font-size: 0.9rem;
    min-height: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
    backdrop-filter: none;
  }
  .hero__trust-bar { gap: 1rem; }
  .hero__trust-bar span { font-size: 0.7rem; }

  /* Thumb-zone: right-align important CTAs */
  .section__cta, .cta-group { display: flex; flex-direction: column; align-items: flex-end; }

  /* Mobile header ordering for thumb reach */
  .header__inner { justify-content: space-between; }
  .header__mobile-cta { order: 2; margin-right: 0.5rem; margin-left: auto; }
  .hamburger { order: 3; }
  .header__logo { order: 1; }

  /* Sticky bottom bar: Call button (primary) on the right */
  .mobile-cta__inner { flex-direction: row; }
  .mobile-cta__btn--call { order: 2; }
  .mobile-cta__btn--text { order: 1; }

  /* Touch targets: min 44-48px */
  .btn, a.btn, button { min-height: 48px; min-width: 48px; }
  .footer__links a, .footer ul a { padding: 0.5rem 0; display: block; min-height: 44px; line-height: 44px; }
  .faq-item__question { min-height: 56px; }
  .dropdown-menu a { min-height: 44px; padding: 0.75rem 1rem; }

  /* Faster, snappier reveals on mobile */
  .reveal { transition-duration: 0.5s; transform: translateY(24px); }

  /* Smooth touch feedback */
  .btn:active, .service-card:active, .mobile-cta__btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Smooth scrolling */
  * { -webkit-overflow-scrolling: touch; }

  /* Card tap states */
  .service-card, .blog-card, .team-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 640px) {
  .est-cards { grid-template-columns: 1fr !important; }
  .est-card { padding: 1rem; }
  .estimate-tool__options { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { text-align: center; justify-content: center; }
  .hero__quote-link { margin-top: 0.25rem; font-size: 0.8rem; }
}

/* ===== MEGA MENU ===== */
.dropdown--mega { position: static; }
.dropdown-menu--mega {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  min-width: 640px;
  max-width: 720px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: rgba(14,19,56,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 1000;
}
/* Invisible bridge between trigger and menu to prevent hover gap */
.dropdown-menu--mega::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.dropdown--mega:hover .dropdown-menu--mega,
.dropdown--mega:focus-within .dropdown-menu--mega {
  display: grid;
}
.mega-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1ba9f1;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(27,169,241,0.2);
}
.mega-col a {
  display: block;
  padding: 0.35rem 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.mega-col a:hover { color: #1ba9f1; }

@media (max-width: 768px) {
  .dropdown-menu--mega { display: none !important; }
}

/* ===== MOBILE MENU GROUPS ===== */
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link { font-weight: 600; font-size: 1.05rem; }
.mobile-menu__group { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-menu__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1ba9f1;
  padding: 0.5rem 0 0.25rem;
  pointer-events: none;
}
.mobile-menu__group a {
  font-size: 0.95rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  color: rgba(255,255,255,0.75);
}

/* Remove hover effects on touch devices (they stick on mobile) */
@media (hover: none) {
  .service-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .btn--primary:hover::before { opacity: 0; }
  .team-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .testimonial-card:hover { transform: none; }
  .feature-card:hover { transform: none; }
  .area-tag:hover { transform: none; }
}

/* ========================================
   PREMIUM ANIMATIONS (Apple-inspired)
   ======================================== */

/* --- Scroll Reveal with staggered children --- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger children inside .stagger-children when parent becomes .visible */
.stagger-children.visible > * { opacity: 0; animation: stagger-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.stagger-children.visible > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { animation-delay: 80ms; }
.stagger-children.visible > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children.visible > *:nth-child(7) { animation-delay: 480ms; }
.stagger-children.visible > *:nth-child(8) { animation-delay: 560ms; }
@keyframes stagger-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- Hero parallax depth --- */
.hero__bg img, .page-hero__bg img { transition: transform 0.1s linear; will-change: transform; }

/* --- Gradient text accent (Apple style) --- */
/* gradient-text removed — replaced with solid blue accent */
.gradient-text { color: var(--blue); }

/* --- Floating badge pulse --- */
.hero__badge { animation: badge-float 4s ease-in-out infinite; }
@keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* --- Button shine effect on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; }
.btn--primary:hover::after { left: 120%; }

/* --- Card lift with glow --- */
.service-card:hover { box-shadow: 0 16px 48px rgba(27, 169, 241, 0.12), 0 4px 12px rgba(0,0,0,0.06); }
.team-card:hover { box-shadow: 0 16px 48px rgba(27, 169, 241, 0.12), 0 4px 12px rgba(0,0,0,0.06); }
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* --- Feature card hover reveal line --- */
.feature-card { position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--blue-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* --- Testimonial card subtle hover --- */
.testimonial-card { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* --- Scroll progress bar at top --- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--blue-gradient); z-index: 1001; width: 0%; transition: width 0.05s linear; pointer-events: none; }

/* --- Smooth image reveal on load --- */
.img-reveal { opacity: 0; transform: scale(1.02); transition: opacity 0.8s ease, transform 0.8s ease; }
.img-reveal.loaded { opacity: 1; transform: scale(1); }

/* --- Section divider wave --- */
.section-wave { display: block; width: 100%; line-height: 0; }
.section-wave svg { display: block; width: 100%; height: auto; }

/* --- FAQ smooth open --- */
.faq-item { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.faq-item.open { border-color: var(--blue); box-shadow: 0 2px 12px rgba(27,169,241,0.08); }
.faq-item__question { transition: color 0.2s ease; }
.faq-item:hover .faq-item__question { color: var(--blue-dark); }

/* --- Area tag ripple on hover --- */
.area-tag { transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.area-tag:hover { transform: translateY(-2px); }

/* --- Stat counter glow pulse --- */
.stat-item__number { transition: color 0.3s ease; }
.stat-item:hover .stat-item__number { text-shadow: 0 0 24px rgba(27,169,241,0.3); }

/* --- CTA section animated gradient border --- */
.cta-section { position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), var(--blue-dark), var(--blue), transparent); background-size: 200% 100%; animation: gradient-slide 4s linear infinite; }
@keyframes gradient-slide { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* --- Lightbox premium transition --- */
.lightbox { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease; }
.lightbox.open { opacity: 1; }
.lightbox img { transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox.open img { transform: scale(1); }

/* --- Location page specific --- */
.location-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.location-stat { text-align: center; padding: 1rem; background: rgba(255,255,255,0.05); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.1); }
.location-stat__number { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--blue-light); }
.location-stat__label { font-size: 0.8rem; color: var(--gray-400); margin-top: 0.25rem; }

/* --- Comparison guide pages --- */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.comparison-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--gray-200); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.comparison-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.comparison-card h3 { margin-bottom: 1rem; }
.comparison-card__badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--radius-xl); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; }
.comparison-card__badge--recommended { background: rgba(27,169,241,0.1); color: var(--blue); }
.comparison-card__badge--alternative { background: rgba(37,99,235,0.1); color: var(--blue-dark); }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.pros-list, .cons-list { list-style: none; padding: 0; }
.pros-list li, .cons-list li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; font-size: 0.9rem; }
.pros-list li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.cons-list li::before { content: '✗'; position: absolute; left: 0; color: var(--error); font-weight: 700; }

/* --- Content hub / guide pages --- */
.toc-sidebar { position: sticky; top: 100px; background: var(--gray-50); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--gray-200); }
.toc-sidebar h4 { margin-bottom: 0.75rem; font-size: 0.9rem; }
.toc-sidebar ul { list-style: none; padding: 0; }
.toc-sidebar li { margin-bottom: 0.4rem; }
.toc-sidebar a { color: var(--gray-600); text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); display: block; transition: all var(--transition); border-left: 2px solid transparent; }
.toc-sidebar a:hover, .toc-sidebar a.active { color: var(--blue); background: rgba(27,169,241,0.05); border-left-color: var(--blue); }

@media (max-width: 768px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .location-hero-stats { grid-template-columns: 1fr 1fr; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { transition: none; opacity: 1; transform: none; }
  .hero__badge { animation: none; }
  .btn--primary::after { display: none; }
  .cta-section::before { animation: none; }
  .stagger-children.visible > * { animation: none; opacity: 1; }
  .scroll-progress { display: none; }
}

/* --- Skip Link --- */
.skip-link { position: absolute; top: -100%; left: 0; background: var(--blue); color: var(--white); padding: 0.5rem 1rem; z-index: 999; }
.skip-link:focus { top: 0; }

/* --- Pricing Interactive --- */
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.pricing-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--gray-200); text-align: center; }
.pricing-card--featured { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); position: relative; }
.pricing-card--featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 1rem; border-radius: var(--radius-xl); }
.pricing-card__price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--gray-900); margin: 1rem 0; }
.pricing-card__price span { font-size: 1rem; font-weight: 400; color: var(--gray-500); }

/* --- Timeline (About) --- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
.timeline-item { position: relative; padding-bottom: 2rem; }
.timeline-item::before { content: ''; position: absolute; left: -2rem; top: 0.25rem; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--blue); margin-left: -6px; }
.timeline-item__year { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: 1.1rem; margin-bottom: 0.25rem; }

/* --- Map Container --- */
.map-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.map-container iframe { width: 100%; height: 300px; border: none; }

/* --- Before/After --- */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-radius: var(--radius-lg); overflow: hidden; }
.before-after__item { position: relative; }
.before-after__item img { width: 100%; height: 100%; object-fit: cover; }
.before-after__label { position: absolute; top: 1rem; left: 1rem; background: var(--navy); color: var(--white); padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }

/* --- Page-specific adjustments for service pages --- */
.service-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.feature-card { background: var(--gray-50); border-radius: var(--radius-md); padding: 1.5rem; border: 1px solid var(--gray-200); }
.feature-card h4 { margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9rem; }

/* ========================================
   PARTNER LOGO BANNER
   ======================================== */
.partner-banner { padding: 2.5rem 0; background: var(--white); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); overflow: hidden; max-width: 100vw; position: relative; }
.partner-banner::before,
.partner-banner::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  z-index: 2;
  pointer-events: none;
}
.partner-banner::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.partner-banner::after { right: 0; background: linear-gradient(to left, var(--white), transparent); }
.partner-banner__label { text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; margin-bottom: 1.5rem; }
.partner-banner__track { display: flex; gap: 4rem; animation: scroll-logos 30s linear infinite; width: max-content; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); }
.partner-banner__track:hover { animation-play-state: paused; }
.partner-banner__logo { height: 48px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: filter 0.4s ease; flex-shrink: 0; }
.partner-banner__logo:hover { filter: grayscale(0%) opacity(1); }
@keyframes scroll-logos {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

/* ========================================
   INTERACTIVE COMPARISON CHART
   ======================================== */
.comparison-widget { max-width: 900px; margin: 0 auto; }
.comparison-widget__header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; background: var(--navy); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1.25rem 1.5rem; align-items: center; }
.comparison-widget__header-cell { color: var(--white); font-weight: 700; font-size: 0.95rem; text-align: center; }
.comparison-widget__header-cell:first-child { text-align: left; }
.comparison-widget__header-cell.us { background: rgba(27,169,241,0.2); border-radius: var(--radius-md); padding: 0.75rem 1rem; }
.comparison-widget__header-input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--white); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.85rem; width: 100%; text-align: center; font-family: var(--font-body); }
.comparison-widget__header-input::placeholder { color: rgba(255,255,255,0.5); }
.comparison-widget__header-input:focus { outline: none; border-color: var(--blue); }
.comparison-widget__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 1rem 1.5rem; align-items: center; border-bottom: 1px solid var(--gray-200); transition: background 0.2s ease; }
.comparison-widget__row:nth-child(even) { background: var(--gray-50); }
.comparison-widget__row:hover { background: #dbeafe; }
.comparison-widget__feature { }
.comparison-widget__feature-name { font-weight: 700; font-size: 0.95rem; color: #1e293b; display: flex; align-items: center; gap: 0.5rem; line-height: 1.3; }
.comparison-widget__feature-name .recommended { /* PageSpeed contrast fix */  display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); padding: 0.15rem 0.5rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.comparison-widget__feature-desc { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.25rem; }
.comparison-widget__check { text-align: center; font-size: 1.25rem; }
.comparison-widget__check--yes { color: var(--success); }
.comparison-widget__check--no { color: var(--error); }
.comparison-widget__check--neutral { color: var(--gray-400); }
.comparison-widget__progress { max-width: 900px; margin: 1.5rem auto 0; display: flex; align-items: center; gap: 1rem; }
.comparison-widget__progress-bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.comparison-widget__progress-fill { height: 100%; background: var(--blue-gradient); border-radius: 4px; transition: width 0.4s ease; }
.comparison-widget__progress-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-700); white-space: nowrap; }

/* ========================================
   INSTANT ESTIMATE TOOL
   ======================================== */
.estimate-tool { max-width: 700px; margin: 0 auto; }
.estimate-tool__progress { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.estimate-tool__progress-dot { width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200); transition: all 0.3s ease; }
.estimate-tool__progress-dot.active { background: var(--blue); }
.estimate-tool__progress-dot.completed { background: var(--success); }
.estimate-tool__step { display: none; }
.estimate-tool__step.active { display: block; animation: fade-up 0.4s ease; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.estimate-tool__question { text-align: center; margin-bottom: 0.5rem; font-size: 1.5rem; font-weight: 800; color: var(--gray-900); }
.estimate-tool__hint { text-align: center; color: var(--gray-500); font-size: 0.95rem; margin-bottom: 2rem; }
.estimate-tool__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.estimate-tool__option { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
.estimate-tool__option:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.estimate-tool__option.selected { border-color: var(--blue); background: rgba(27,169,241,0.05); box-shadow: 0 0 0 3px rgba(27,169,241,0.15); }
.estimate-tool__option-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.estimate-tool__option-name { font-weight: 700; font-size: 1rem; color: var(--gray-900); margin-bottom: 0.25rem; }
.estimate-tool__option-desc { font-size: 0.8rem; color: var(--gray-500); }
.estimate-tool__option-badge { position: absolute; top: -10px; right: -10px; background: var(--blue); color: var(--white); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-xl); text-transform: uppercase; }
.estimate-tool__option-tier { font-size: 0.7rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.35rem; }
.estimate-tool__checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.estimate-tool__checkbox { display: flex; align-items: center; gap: 0.75rem; background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-md); padding: 1rem 1.25rem; cursor: pointer; transition: all 0.3s ease; }
.estimate-tool__checkbox:hover { border-color: var(--blue); }
.estimate-tool__checkbox.selected { border-color: var(--blue); background: rgba(27,169,241,0.05); }
.estimate-tool__checkbox-icon { font-size: 1.5rem; }
.estimate-tool__checkbox-name { font-weight: 600; font-size: 0.95rem; color: var(--gray-900); }
.estimate-tool__nav { display: flex; justify-content: space-between; margin-top: 2rem; }
.estimate-tool__nav .btn { min-width: 140px; justify-content: center; }
.estimate-tool__result { text-align: center; padding: 2rem; }
.estimate-tool__result-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); margin-bottom: 0.5rem; }
.estimate-tool__result-price { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--gray-900); }
.estimate-tool__result-note { font-size: 0.9rem; color: var(--gray-500); margin-top: 0.75rem; }
.estimate-tool__result-ctas { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

/* ========================================
   SOCIAL LINKS
   ======================================== */
.footer__socials { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); transition: all 0.3s ease; text-decoration: none; }
.footer__social-link:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); }
.footer__social-link svg { width: 18px; height: 18px; }

/* ========================================
   ADA WIDGET
   ======================================== */
.ada-widget { position: fixed; bottom: 90px; left: 20px; z-index: 89; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(27,169,241,0.3); transition: all 0.3s ease; border: none; }
.ada-widget:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(27,169,241,0.4); }
.ada-widget svg { width: 24px; height: 24px; }
.ada-panel { position: fixed; bottom: 150px; left: 20px; z-index: 88; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 1.5rem; width: 300px; max-height: 400px; overflow-y: auto; display: none; border: 1px solid var(--gray-200); }
.ada-panel.open { display: block; animation: fade-up 0.3s ease; }
.ada-panel h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.ada-panel__option { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); }
.ada-panel__option:last-child { border-bottom: none; }
.ada-panel__option-label { font-size: 0.9rem; font-weight: 500; color: var(--gray-700); }
.ada-panel__toggle { width: 44px; height: 24px; border-radius: 12px; background: var(--gray-300); position: relative; cursor: pointer; transition: background 0.3s; border: none; }
.ada-panel__toggle.active { background: var(--blue); }
.ada-panel__toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform 0.3s; box-shadow: var(--shadow-sm); }
.ada-panel__toggle.active::after { transform: translateX(20px); }
.ada-panel__slider { display: flex; align-items: center; gap: 0.5rem; }
.ada-panel__slider input[type="range"] { flex: 1; accent-color: var(--blue); }
.ada-panel__slider-value { font-size: 0.8rem; font-weight: 600; color: var(--gray-700); min-width: 32px; text-align: center; }

@media (max-width: 768px) {
  .estimate-tool__options { grid-template-columns: 1fr; }
  .estimate-tool__checkboxes { grid-template-columns: 1fr; }
  .comparison-widget__header { grid-template-columns: 1fr; gap: 0.5rem; }
  .comparison-widget__row { grid-template-columns: 1fr 1fr 1fr; font-size: 0.85rem; padding: 0.75rem 1rem; }
  .comparison-widget__feature-name { font-size: 0.85rem; }
  .comparison-widget__feature-desc { display: none; }
  .ada-widget { bottom: 100px; left: 12px; width: 42px; height: 42px; }
  .ada-panel { left: 12px; width: calc(100vw - 24px); bottom: 155px; }
}

/* ========================================
   HERO GOOGLE BADGE
   ======================================== */
.hero__badge--google {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}
.hero__badge--google .badge-star {
  width: 16px;
  height: 16px;
  fill: #fbbf24;
  flex-shrink: 0;
}

/* ========================================
   PREMIUM COMPARISON TABLE
   ======================================== */
.comparison-widget {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-200);
}

/* Gradient header */
.comparison-widget__header {
  background: linear-gradient(135deg, #060e15 0%, #0f2440 60%, #1a3a5c 100%);
  border-radius: 0; /* already handled by parent overflow:hidden + border-radius */
}

/* Us column — highlighted blue with glow */
.comparison-widget__header-cell.us {
  background: linear-gradient(135deg, rgba(27,169,241,0.35) 0%, rgba(37,99,235,0.25) 100%);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  box-shadow: 0 0 18px rgba(27,169,241,0.25) inset;
  font-size: 1rem;
}

/* Alternating row backgrounds */
.comparison-widget__row:nth-child(odd)  { background: #ffffff; }
.comparison-widget__row:nth-child(even) { background: #f8faff; }
.comparison-widget__row:hover {
  background: #edf4ff !important;
  transform: scale(1.005);
  box-shadow: 0 2px 12px rgba(27,169,241,0.08);
  transition: all 0.2s ease;
}

/* Us column glow — second cell of every row */
.comparison-widget__row > .comparison-widget__check:nth-child(2) {
  background: rgba(27,169,241,0.04);
  border-left: 1px solid rgba(27,169,241,0.1);
  border-right: 1px solid rgba(27,169,241,0.1);
}

/* Larger, more vibrant checkmarks */
.comparison-widget__check--yes {
  font-size: 1.55rem;
  color: #16a34a;
  text-shadow: 0 0 8px rgba(22,163,74,0.35);
  font-weight: 800;
}

/* More subtle X marks */
.comparison-widget__check--no {
  font-size: 1.3rem;
  color: #f87171;
  opacity: 0.65;
}

.comparison-widget__check--neutral {
  font-size: 1.2rem;
  color: var(--gray-400);
}

/* Gold RECOMMENDED badges */
.comparison-widget__feature-name .recommended { /* PageSpeed contrast fix */ 
  color: #d97706;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 99px;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ========================================
   SERVICE CARD HOVER LIFT
   ======================================== */
.service-card {
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.28s cubic-bezier(0.16,1,0.3,1);
}
.service-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14), 0 4px 16px rgba(27,169,241,0.1);
}

/* ========================================
   ANIMATION KEYFRAMES
   ======================================== */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes btn-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27,169,241,0); }
  50%       { box-shadow: 0 0 18px 4px rgba(27,169,241,0.45); }
}

/* .reveal CSS animation fallback (GSAP handles the JS version) */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  will-change: opacity, transform;
}

/* Pause animations ADA support */
body.ada--pause-animations .comparison-widget__row:hover {
  transform: none;
}

/* ===== ENHANCED LUXURY ANIMATIONS ===== */

/* Smooth reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Stagger children */
.stagger-children > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.7s; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }

/* Scale reveal for images */
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Glow hover on cards */
.service-card:hover, .plaster-card:hover, .team-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(27,169,241,0.12), 0 8px 24px rgba(0,0,0,0.08);
}

/* Magnetic button effect */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #1ba9f1, #2563eb, #1ba9f1);
  background-size: 200% 200%;
  animation: shimmer 3s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn--primary:hover::before { opacity: 1; }

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating animation for badges/labels */
.section__label, .page-hero__label {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Smooth image zoom on hover */
.service-card img, .gallery-item img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover img, .gallery-item:hover img {
  transform: scale(1.06);
}

/* Text shimmer for highlighted words */
/* Text shimmer ONLY on the cycling word — not Dream or Backyard */
/* waterShimmer removed — waterFlow handles the gradient animation */
@keyframes textShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 200% center; }
  100% { background-position: 0% center; }
}

/* Parallax-ready sections */
.section--parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Smooth page transitions */
body {
  animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden;
  max-width: 100vw;
  padding-top: 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Enhanced scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #1ba9f1, #2563eb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1ba9f1; }

/* Smooth scroll behavior */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== HERO ENTRANCE ANIMATION (CSS-only, no GSAP dependency) ===== */
.hero__content > * {
  opacity: 0;
  transform: translateY(20px);
}
.hero--animate > * {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero--animate > *:nth-child(1) { animation-delay: 0.1s; }
.hero--animate > *:nth-child(2) { animation-delay: 0.25s; }
.hero--animate > *:nth-child(3) { animation-delay: 0.4s; }
.hero--animate > *:nth-child(4) { animation-delay: 0.55s; }
.hero--animate > *:nth-child(5) { animation-delay: 0.65s; }
.hero--animate > *:nth-child(6) { animation-delay: 0.75s; }

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

/* Fallback: if JS doesn't add the class within 2s, show everything anyway */
@media (prefers-reduced-motion: reduce) {
  .hero__content > * { opacity: 1; transform: none; animation: none; }
}

/* Safety: if hero--animate class never gets added (GSAP doesn't load), 
   auto-animate with a longer delay via body-level animation */
@keyframes heroSafetyFallback {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__content > * {
  animation: heroSafetyFallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
/* When hero--animate IS applied, the earlier rules take priority due to lower delay */
.hero--animate > * {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Partner banner mobile fix - ensure sliding works */
@media (max-width: 768px) {
  .partner-banner { padding: 1.5rem 0; }
  .partner-banner__track { gap: 2.5rem; animation: scroll-logos 20s linear infinite !important; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .partner-banner__logo { height: 36px; }
}

/* Comparison chart mobile fixes */
@media (max-width: 768px) {
  .comparison-widget__row { padding: 0.75rem 1rem; grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .comparison-widget__feature-name { font-size: 0.85rem; flex-wrap: wrap; }
  .comparison-widget__feature-name .recommended { /* PageSpeed contrast fix */  font-size: 0.55rem; padding: 0.1rem 0.4rem; }
  .comparison-widget__header { padding: 1rem; grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .comparison-widget__check { font-size: 1.1rem; }
}

/* ===== HERO WORD CYCLE ANIMATION ===== */
.hero-word-cycle {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  perspective: 600px;
}
/* Verb container needs enough width for longest word + height for positioning */
.hero-word-cycle--verb {
  min-height: 1.1em;
  transition: width 0.3s ease;
  font-size: 0;
}
.hero-word-cycle--verb .hero-word-cycle__word {
  font-size: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem);
}

.hero-word-cycle__word {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s ease;
  will-change: transform, opacity, filter;
  white-space: nowrap;
  /* Water effect 1: flowing gradient shimmer */
  background: linear-gradient(90deg, #4dd0e1 0%, #1ba9f1 25%, #60c6f7 50%, #1ba9f1 75%, #4dd0e1 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: waterFlow 4s ease-in-out infinite;
  /* Water effect 2: subtle blur ripple on transition */
  filter: blur(0px);
}

.hero-word-cycle__word--active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Prevent blue selection box on animated text */
.hero-word-cycle__word::selection,
.hero-word-cycle__word *::selection {
  background: transparent;
}
.hero-word-cycle,
.hero-word-cycle__word {
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-word-cycle__word--exit {
  opacity: 0;
  transform: translateY(-30px);
  filter: blur(4px); /* Water ripple blur on exit */
}

/* Verb words — drop in from TOP, exit to BOTTOM */
.hero-word-cycle--verb .hero-word-cycle__word {
  transform: translateY(-40px);
}
.hero-word-cycle--verb .hero-word-cycle__word--active {
  transform: translateY(0);
}
.hero-word-cycle--verb .hero-word-cycle__word--exit {
  transform: translateY(40px);
}

/* Noun words — rise from BOTTOM, exit to TOP (opposite) */
.hero-word-cycle--noun .hero-word-cycle__word {
  transform: translateY(40px);
}
.hero-word-cycle--noun .hero-word-cycle__word--active {
  transform: translateY(0);
}
.hero-word-cycle--noun .hero-word-cycle__word--exit {
  transform: translateY(-40px);
}

/* Static noun styling */
.hero-static-noun {
  color: #fff;
  -webkit-text-fill-color: #fff;
  display: inline;
}
.hero-static-noun em {
  font-style: italic;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Water effect 1: flowing gradient like light on water surface */
@keyframes waterFlow {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Water droplet particles (CSS-only decoration) */
.hero-word-cycle::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(27,169,241,0.5), rgba(96,198,247,0.7), rgba(27,169,241,0.5), transparent);
  border-radius: 2px;
  opacity: 0;
  animation: waterLine 3s ease-in-out infinite;
}
@keyframes waterLine {
  0%, 100% { opacity: 0; transform: scaleX(0.3); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Water splash particles */
.hero-splash {
  position: absolute;
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(96, 198, 247, 0.8);
  animation: splash 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes splash {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word-cycle__word { transition: none; filter: none; transform: none; }
  .hero-word-cycle::after { animation: none; }
}

/* Combined reviews badge */
.hero__badge--reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

/* Mobile hero centering */
@media (max-width: 768px) {
  .hero__content {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1.25rem;
  }
  .hero__title { text-align: center; }
  .hero__subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  .hero__badge--reviews { margin-left: auto; margin-right: auto; }
  .hero__badge--gold { margin-left: auto; margin-right: auto; }

  /* Bigger touch targets for mobile nav */
  #mobile-menu nav a { font-size: 1.1rem; padding: 0.85rem 0; min-height: 48px; display: flex; align-items: center; }
}

/* Decluttered footer for middle-age audience */
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__links { columns: 2; }
  .footer__links li { break-inside: avoid; }
}

/* ===== SEXIER HERO ELEMENTS ===== */

/* Punchier CTA buttons */
.hero__ctas .btn--primary {
  background: linear-gradient(135deg, #1ba9f1, #0d8fd4) !important;
  color: #fff !important;
  font-weight: 800;
  padding: 1rem 2rem;
  border-radius: 14px;
  font-size: 1.05rem;
  box-shadow: 0 4px 24px rgba(27, 169, 241, 0.4);
  border: none;
  letter-spacing: 0.01em;
}
.hero__ctas .btn--secondary {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 14px;
  font-size: 1.05rem;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(8px);
}
.hero__ctas .btn--primary:hover { box-shadow: 0 6px 32px rgba(27, 169, 241, 0.6); transform: translateY(-2px); }
.hero__ctas .btn--secondary:hover { background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.5) !important; }

/* Hero title depth */
.hero__title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 4px 40px rgba(0,0,0,0.3) !important;
}

/* Cycling word - brighter, more vivid */
.hero-word-cycle__word {
  text-shadow: 0 2px 20px rgba(27,169,241,0.5) !important;
}

/* Dream accent - brighter */
.hero__title .hero-accent {
  text-shadow: 0 0 30px rgba(255,255,255,0.3);
}

/* Noun words - bolder italic */
.hero-noun {
  text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}

/* Rating badge - cleaner */
.hero__badge--reviews {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Mobile header - smaller instant estimate button */
@media (max-width: 1024px) {
  .header__mobile-cta {
    font-size: 0.7rem !important;
    padding: 0.45rem 0.75rem !important;
  }
}

/* ===== GOLDEN BADGE (hero) ===== */
.hero__badge--gold {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,168,83,0.4) !important;
  color: #d4a853 !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  animation: goldFloat 3s ease-in-out infinite;
}
.hero__badge--gold .badge-star { width: 14px; height: 14px; fill: #d4a853; }
@keyframes goldFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }


/* Mobile hero CTA centering */
@media (max-width: 768px) {
  .hero__ctas {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .hero__ctas .btn {
    width: 100% !important;
    max-width: 320px;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
}



/* ===== GLASS PILL NAVBAR — Mobile ===== */
@media (max-width: 1024px) {
  .header {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    border-radius: 16px !important;
    padding: 0 0.6rem 0 0.75rem !important;
  }
  .header--scrolled {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
  }
  .header__inner { padding: 0.45rem 0; gap: 0.25rem; }
  .header__logo img { height: 40px !important; width: auto; flex-shrink: 0; }
  .header__mobile-cta {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.7rem !important;
    border-radius: 100px !important;
    background: linear-gradient(135deg, #1ba9f1, #0d8fd4) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(27,169,241,0.25) !important;
    animation: none !important;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 0.25rem;
  }
  .hamburger { width: 36px !important; height: 36px !important; padding: 4px !important; flex-shrink: 0; }
}

/* Desktop nav link spacing */
@media (min-width: 1025px) {
  .header__nav { gap: 0.1rem; }
  .header__nav a { font-size: 1.1rem; font-weight: 600; padding: 0.5rem 0.75rem; }
  .header__phone { font-size: 1rem; white-space: nowrap; }
  .header .btn--primary.btn--sm { font-size: 1rem; padding: 0.6rem 1.3rem; white-space: nowrap; }
  .dropdown-trigger { white-space: nowrap; }
}

/* ===== HERO BADGES - Side by side ===== */
.hero__badges {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__badge--gold {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212,168,83,0.35);
  color: #d4a853;
}
.hero__badge--reviews {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}

/* Old noun override removed — handled by .hero-word-cycle--noun rules */

/* ===== COMPACT FOOTER ===== */
.footer { padding: 2.5rem 0 0 !important; }
.footer__grid { gap: 2rem !important; }
.footer__brand p { font-size: 0.8rem !important; line-height: 1.6 !important; }
.footer__bottom { padding: 1rem 0 !important; font-size: 0.75rem !important; }
@media (max-width: 768px) {
  .footer { padding: 2rem 0 0 !important; }
  .footer__grid { gap: 1.25rem !important; }
  .footer__brand p { font-size: 0.75rem !important; }
  .footer ul a { font-size: 0.8rem !important; }
}

/* ===== EMPHASIS DESIGN — Bold words with accent ===== */
.text-em {
  font-style: italic;
  position: relative;
  display: inline;
}
.text-em::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1ba9f1, transparent);
  border-radius: 2px;
}

/* ===== URGENCY BANNER ===== */
.urgency-banner {
  background: linear-gradient(90deg, #0a1628 0%, #1a2e50 50%, #0a1628 100%);
  border-bottom: 1px solid rgba(27,169,241,0.25);
  padding: 0.5rem 1rem;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}
.urgency-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}
@media (max-width: 600px) {
  .urgency-banner { padding: 0.4rem 0.75rem; }
  .urgency-banner__inner { font-size: 0.75rem; gap: 0.35rem; }
  .urgency-banner__inner svg { width: 12px; height: 12px; }
}
.urgency-banner__inner svg {
  color: #1ba9f1;
  flex-shrink: 0;
}
.urgency-banner__inner strong {
  color: #fff;
}
.urgency-banner__inner a {
  color: #1ba9f1;
  text-decoration: none;
  font-weight: 600;
}
.urgency-banner__inner a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   PASS 38 — LIGHT MODE OVERRIDES
   ============================================================
   Goal: convert the public site from dark navy to a clean, Apple-style
   light theme. Override here at the end of the cascade so individual
   surfaces flip without rewriting the whole file. Each rule below
   replaces a previously-dark surface with a light equivalent.
   The original dark rules above are kept in place in case we ever
   need to A/B back. */

/* --- Site chrome: header → glass-on-white ---
   Pass 38h: bumped opacity 0.85 → 0.94 so the pill reads as a solid light
   surface even when the hero image behind it is dark, AND so iOS Safari's
   "Auto Dark Mode for Websites" filter can't repaint it grey. */
.header {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 32px rgba(10,22,40,0.06);
  color-scheme: light;
}
.header--scrolled {
  background: rgba(255,255,255,0.97) !important;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(10,22,40,0.06);
}
/* Lock the whole page to light mode at the CSS level too.
   Pass 38k: iOS Safari Auto Dark Mode is ALSO inverting raster images
   (logo PNG was reading as white-on-dark on iPhone). Force every image
   to render with light color-scheme + neutral filter so iOS can't touch it. */
:root, html, body { color-scheme: light only !important; }
html { background-color: #ffffff !important; }
body { background-color: #ffffff; }
img, picture, svg, canvas {
  color-scheme: light only !important;
  filter: none !important;
  -webkit-filter: none !important;
}
.header__logo img {
  /* iOS Auto Dark sometimes invert-shifts logos. Pin it. */
  color-scheme: light only !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
}
@media (prefers-color-scheme: dark) {
  :root, html, body { color-scheme: light only !important; background-color: #ffffff !important; }
  /* Re-assert any surface that iOS auto-darken would otherwise filter. */
  .header { background: #ffffff !important; }
  .header__pill, .header__inner { background: transparent !important; }
  .urgency-banner { background: linear-gradient(90deg,#f8fafc 0%,#eef2f7 50%,#f8fafc 100%) !important; }
  .mobile-menu { background: #ffffff !important; }
  .footer { background: #f8fafc !important; }
  img, .header__logo img { filter: none !important; -webkit-filter: none !important; }
}
/* Pass 38k: Header pill goes SOLID white site-wide.
   Translucent 0.94 over a dark satellite hero (DS landing) was reading
   as a dark pill on iPhone. Solid white can never read dark. */
.header { background: #ffffff !important; }
.header--scrolled { background: #ffffff !important; }
/* Burger always navy/visible — no exceptions */
.hamburger span,
.header__menu-btn .hamburger span,
.menu-toggle span,
.nav-toggle span { background: #0A1628 !important; }
.hamburger svg, .header__menu-btn svg, .menu-toggle svg { color: #0A1628 !important; stroke: #0A1628 !important; }
.header__nav a, .header__nav a:visited {
  color: var(--gray-700, #1E293B) !important;
}
.header__nav a:hover, .header__nav a.active {
  color: #0071e3 !important;
}
.hamburger span { background: var(--navy, #0A1628) !important; }
.urgency-banner { background: linear-gradient(90deg, #f8fafc 0%, #eef2f7 50%, #f8fafc 100%) !important; color: var(--gray-700) !important; border-bottom: 1px solid rgba(0,0,0,0.06); }
.urgency-banner__inner { color: var(--gray-600) !important; }
.urgency-banner__inner strong { color: var(--navy, #0A1628) !important; }
.urgency-banner__inner svg { color: #0071e3 !important; }
.urgency-banner__inner a { color: #0071e3 !important; }
.urgency-banner__inner a:hover { color: var(--navy, #0A1628) !important; }

/* --- Mobile menu: slide-in becomes white card --- */
.mobile-menu {
  background: #ffffff !important;
  box-shadow: -8px 0 40px rgba(10,22,40,0.12);
}
.mobile-menu nav a {
  color: var(--gray-700, #1E293B) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.mobile-menu nav a:hover { color: #0071e3 !important; }
.mobile-menu__close { color: var(--gray-500, #475569) !important; }
.mobile-menu__close:hover, .mobile-menu__close:active {
  color: var(--navy, #0A1628) !important;
  background: rgba(0,0,0,0.05) !important;
}

/* --- Internal page hero: deep navy → soft light wash --- */
.page-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 60%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.page-hero__bg img { opacity: 0.18 !important; mix-blend-mode: multiply; }
.page-hero__overlay {
  background: linear-gradient(180deg, rgba(248,250,252,0.6) 0%, rgba(255,255,255,0.85) 100%) !important;
}
.page-hero h1 { color: var(--navy, #0A1628) !important; }
.page-hero h1 span { color: #0071e3 !important; }
.page-hero p { color: var(--gray-500, #475569) !important; }

/* --- Section accents --- */
.section--navy {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.section--navy h2, .section--navy h3, .section--navy h4 {
  color: var(--navy, #0A1628) !important;
}
.section--navy p, .section--navy li {
  color: var(--gray-600, #334155) !important;
}
.section--navy .text-muted, .section--navy .section__subtitle {
  color: var(--gray-500, #475569) !important;
}
.section--navy .area-tag {
  background: #ffffff !important;
  border: 1px solid rgba(10,22,40,0.10) !important;
  color: var(--navy, #0A1628) !important;
}
.section--navy .area-tag:hover {
  background: #0071e3 !important;
  color: #fff !important;
  border-color: #0071e3 !important;
}

/* --- CTA section: stay accent-blue but lighter, more inviting --- */
.cta-section {
  background: linear-gradient(135deg, #0071e3 0%, #2997ff 100%) !important;
}
.cta-section h2 { color: #ffffff !important; }
.cta-section p { color: rgba(255,255,255,0.92) !important; }

/* --- Footer: dark navy → off-white with top border --- */
.footer {
  background: #f8fafc !important;
  color: var(--gray-600, #334155) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
.footer__brand img { mix-blend-mode: normal !important; }
.footer__brand p { color: var(--gray-600, #334155) !important; }
.footer h4 { color: var(--navy, #0A1628) !important; }
.footer ul a { color: var(--gray-600, #334155) !important; }
.footer ul a:hover { color: #0071e3 !important; }
.footer__bottom, .footer__legal, .footer__base {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  color: var(--gray-500, #475569) !important;
}
.footer a { color: var(--gray-700, #1E293B); }
.footer a:hover { color: #0071e3 !important; }

/* --- Comparison/table headers: navy → light accent --- */
.compare-table thead th { background: #f1f5f9 !important; color: var(--navy, #0A1628) !important; }
.comparison-widget__header { background: #f8fafc !important; border-bottom: 1px solid rgba(0,0,0,0.06); }
.comparison-widget__header * { color: var(--navy, #0A1628) !important; }

/* --- Scrollbar track on dark backgrounds → fall back to neutral --- */
::-webkit-scrollbar-track { background: #f1f5f9 !important; }

/* --- Index hero: dark scrim over hero pool image → light wash --- */
.hero, .home-hero, .index-hero { background: #f8fafc !important; }
/* Pass 38f: hero overlay was a heavy white wash that flattened the pool photo.
   Light overall wash so the pool color breathes — then a focused soft halo
   right behind the text block (.hero__content) does the legibility work,
   like an Apple Maps callout sitting on top of imagery. */
/* Pass 38i: even lighter — user said haze still too heavy. Top barely there,
   middle clear, bottom only fades to feather into the next section. */
/* Pass 38k: kill the white overlay entirely per user feedback —
   the haze was washing out the pool image on iPhone. Only a tiny
   bottom feather to fade into the next section, nothing else. */
.hero__overlay, .home-hero__overlay {
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 80%,
    rgba(248,250,252,0.35) 100%) !important;
}
/* Localized backdrop blur behind the headline+subtitle so text reads cleanly
   without veiling the entire pool image */
.hero__content {
  position: relative;
}
/* Pass 38i: halo dialed back — the pool image should mostly read on its own;
   halo just gives the headline+subtitle a soft local backdrop.
   Desktop needs slightly more halo because the headline+subtitle stack is
   tall and the pool plaster underneath is bright; mobile needs less because
   the photo's mid-band is already calm. */
/* Pass 38k: halo behind H1 KILLED entirely per user feedback.
   The radial bloom was reading as a giant white circle on iPhone.
   Headline gets contrast from text-shadow + a tight pill-shaped white
   backdrop only behind the subtitle paragraph (which has long lines that
   need the most help on busy pool imagery). */
.hero__content::before { display: none !important; }
.hero h1, .home-hero h1 {
  text-shadow:
    0 1px 2px rgba(255,255,255,0.95),
    0 2px 6px rgba(255,255,255,0.75),
    0 0 18px rgba(255,255,255,0.55) !important;
}
.hero p, .home-hero p, .hero__subtitle {
  /* Inline white card behind the paragraph — sized to text only, not the whole hero.
     This is the Apple Maps callout pattern: tight, local, doesn't veil the image. */
  background: rgba(255,255,255,0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  padding: 10px 16px !important;
  border-radius: 14px !important;
  display: inline-block !important;
  max-width: min(640px, 92%) !important;
  text-shadow: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(10,22,40,0.08) !important;
}
/* mobile halo override is now inline with the desktop ::before rule above */
.hero__content > * { position: relative; z-index: 1; }
/* Drop the index-hero base bg to transparent so the actual pool image shows */
.hero, .home-hero, .index-hero { background: transparent !important; }
.hero h1, .home-hero h1 { color: var(--navy, #0A1628) !important; }
/* Only the cycle word should be blue — bare neighbor spans + .hero-static-noun stay navy */
.hero h1 .hero-word-cycle__word, .home-hero h1 .hero-word-cycle__word { color: #0071e3 !important; }
.hero h1 > span:not(.hero-word-cycle):not(.hero-static-noun):not(.hero-accent),
.home-hero h1 > span:not(.hero-word-cycle):not(.hero-static-noun):not(.hero-accent) {
  color: var(--navy, #0A1628) !important;
  -webkit-text-fill-color: var(--navy, #0A1628) !important;
}
.hero p, .home-hero p { color: var(--gray-600, #334155) !important; }

/* --- Navy text utility used in inline styles → keep but tone --- */
[style*="background:#0e1338"], [style*="background: #0e1338"],
[style*="background:#111845"], [style*="background: #111845"],
[style*="background:#0b1437"], [style*="background: #0b1437"] {
  filter: none;
}


/* --- Pass 38b: extend light-mode coverage ---------------------------- */

/* Hero trust badges — flip from dark glass to light glass + navy text */
.hero__badge,
.hero__badge--gold,
.hero__badge--reviews {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(10,22,40,0.08) !important;
  color: #0A1628 !important;
  box-shadow: 0 4px 18px rgba(10,22,40,0.10) !important;
  text-shadow: none !important;
}
.hero__badge--gold { color: #b8871a !important; }
.hero__badge--gold .badge-star { fill: #f5a623 !important; }

/* Hero subtitle + microcopy + quote link — readable on light wash */
.hero__subtitle {
  color: #334155 !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.85) !important;
}
.hero__microcopy {
  color: #475569 !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.85) !important;
}
.hero__quote-link { color: #475569 !important; }
.hero__quote-link span { color: #0071e3 !important; }
.hero__quote-link:hover span { color: #005bb5 !important; }
.hero__ctas a[href*="estimate-match"] {
  color: #475569 !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.85) !important;
}

/* "on Satellite" italic noun — was white, now navy */
.hero-static-noun,
.hero-static-noun em {
  color: #0A1628 !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.85) !important;
}

/* Hero word cycle (Design / Price / Build / Enjoy) — keep blue */
.hero-word-cycle__word { color: #0071e3 !important; }

/* Phone number in header — navy on light */
header a[href^="tel:"],
.nav-phone, .header-phone, .phone-link {
  color: #0A1628 !important;
}

/* Sticky bottom mobile CTA bar — keep brand colors but ensure readable */
.mobile-bottom-bar, .sticky-cta-bar, .mobile-cta-bar {
  background: rgba(255,255,255,0.96) !important;
  border-top: 1px solid rgba(10,22,40,0.08) !important;
  box-shadow: 0 -4px 20px rgba(10,22,40,0.08) !important;
}

/* Section--navy stat bars and dark inline backgrounds → off-white */
[style*="background:#0e1338"],
[style*="background: #0e1338"],
[style*="background:#111845"],
[style*="background: #111845"],
[style*="background:#0b1437"],
[style*="background: #0b1437"],
[style*="background:#0A1628"],
[style*="background: #0A1628"] {
  background: #f8fafc !important;
  color: #0A1628 !important;
}
[style*="background:#0e1338"] *,
[style*="background:#111845"] *,
[style*="background:#0b1437"] *,
[style*="background:#0A1628"] * {
  color: #0A1628 !important;
}
/* Keep primary CTAs readable: white text on blue, even inside flipped heroes.
   The light-theme override forces both color and -webkit-text-fill-color to
   navy on hero children, so the button has to reclaim both. */
[style*="background:#0e1338"] .btn--primary,
[style*="background: #0e1338"] .btn--primary,
[style*="background:#111845"] .btn--primary,
[style*="background: #111845"] .btn--primary,
[style*="background:#0b1437"] .btn--primary,
[style*="background: #0b1437"] .btn--primary,
[style*="background:#0A1628"] .btn--primary,
[style*="background: #0A1628"] .btn--primary,
[style*="background:#0e1338"] .btn--primary *,
[style*="background:#111845"] .btn--primary *,
[style*="background:#0b1437"] .btn--primary *,
[style*="background:#0A1628"] .btn--primary * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Inline white text on what was dark bg → make navy */
[style*="color:#fff"]:not(.btn):not(.btn--primary):not([class*="cta"]):not(header *):not(.hero__badge),
[style*="color: #fff"]:not(.btn):not(.btn--primary):not([class*="cta"]):not(header *):not(.hero__badge),
[style*="color:rgba(255,255,255"]:not(.btn):not(.btn--primary):not([class*="cta"]):not(header *):not(.hero__badge) {
  /* leave untouched — too risky to blanket-flip */
}

/* --- Pass 38c: kill remaining dark surfaces on light theme --- */

/* Sticky mobile Text/Call bar — was dark navy, now white card */
.mobile-cta {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid rgba(10,22,40,0.08) !important;
  box-shadow: 0 -4px 24px rgba(10,22,40,0.10) !important;
}

/* "on Satellite" italic noun — beat -webkit-text-fill-color with stronger selector */
.hero__title .hero-static-noun,
.hero__title .hero-static-noun em,
h1.hero__title .hero-static-noun,
h1.hero__title .hero-static-noun em {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.85) !important;
}

/* Catch any remaining inline white text in hero CTAs that should be readable */
.hero__ctas a[style*="color:rgba(255,255,255"],
.hero__ctas p[style*="color:rgba(255,255,255"] {
  color: #475569 !important;
}

/* ============================================================
   PASS 38D — APPLE-CLEAN COMPARISON TABLE RESTYLE
   Keep all 14 rows; visual cleanup only.
   - Flat light header, no gradients
   - SVG-based checks/Xs via pseudo-elements
   - Tone Recommended pill to subtle uppercase label
   - Hairline dividers, no row hover scale
   ============================================================ */

.comparison-widget {
  border-radius: 18px !important;
  border: 1px solid rgba(10, 22, 40, 0.06) !important;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 8px 32px rgba(10, 22, 40, 0.06) !important;
  background: #ffffff !important;
  overflow: hidden;
}

.comparison-widget__header {
  background: #fafbfd !important;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 18px 18px 0 0 !important;
  align-items: center;
}
.comparison-widget__header-cell {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #0A1628 !important;
  letter-spacing: -0.01em;
}
.comparison-widget__header-cell:first-child {
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
}
.comparison-widget__header-cell.us {
  background: rgba(27, 169, 241, 0.08) !important;
  border: 1px solid rgba(27, 169, 241, 0.18) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.9rem !important;
  box-shadow: none !important;
  color: #0A1628 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
}
.comparison-widget__header-cell.us svg { color: #1ba9f1 !important; }
.comparison-widget__header-input {
  background: transparent !important;
  border: 1px solid rgba(10, 22, 40, 0.12) !important;
  color: #0A1628 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 8px !important;
}
.comparison-widget__header-input::placeholder { color: #94a3b8 !important; }
.comparison-widget__header-input:focus { border-color: #1ba9f1 !important; outline: none; }

/* Rows — flat white, hairline divider only */
.comparison-widget__row {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(10, 22, 40, 0.05) !important;
  padding: 0.95rem 1.25rem !important;
  align-items: center;
  transition: background 0.15s ease !important;
}
.comparison-widget__row:nth-child(odd),
.comparison-widget__row:nth-child(even) { background: #ffffff !important; }
.comparison-widget__row:last-child { border-bottom: 0 !important; }
.comparison-widget__row:hover {
  background: #f8fafc !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Phenomenal column subtle tint — no borders, no glow */
.comparison-widget__row > .comparison-widget__check:nth-child(2) {
  background: rgba(27, 169, 241, 0.04) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Feature names */
.comparison-widget__feature-name {
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #0A1628 !important;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Tone Recommended pill — subtle uppercase amber label, no pill */
.comparison-widget__feature-name .recommended {
  background: transparent !important;
  border: 0 !important;
  color: #b45309 !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  padding: 0 !important;
  margin-left: 0.4rem;
}
.comparison-widget__feature-name .recommended::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #b45309;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Replace ✓ / ✗ glyphs with SVG icons (Apple-style circles) */
.comparison-widget__check {
  font-size: 0 !important;
  text-align: center;
  line-height: 0;
}
.comparison-widget__check::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  vertical-align: middle;
}
.comparison-widget__check--yes::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='%231ba9f1'/><path d='M6 10l3 3 5-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  text-shadow: none !important;
  color: transparent !important;
}
.comparison-widget__check--no::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='none' stroke='%23cbd5e1' stroke-width='1.5'/><path d='M7 7l6 6M13 7l-6 6' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round'/></svg>");
  opacity: 1 !important;
  color: transparent !important;
}
.comparison-widget__check--neutral::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='none' stroke='%23cbd5e1' stroke-width='1.5'/><path d='M6 10h8' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round'/></svg>");
  color: transparent !important;
}

/* ============================================================
   PASS 38D — PRICING ESTIMATE FORM (Apple-clean light mode)
   3 visual sections, hairline dividers, soft inputs
   ============================================================ */

.pricing-form__section { padding: 0.25rem 0 0.5rem; }
.pricing-form__section-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.pricing-form__section-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1ba9f1;
  letter-spacing: 0.05em;
}
.pricing-form__section-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0A1628;
  letter-spacing: -0.01em;
}
.pricing-form__divider {
  border: 0;
  border-top: 1px solid rgba(10, 22, 40, 0.07);
  margin: 1.5rem 0 1.5rem;
}
.pricing-form__label {
  display: block;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}
.pricing-form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  font-size: 0.7rem;
  margin-left: 0.4rem;
}
.pricing-form__input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: #ffffff;
  border: 1px solid rgba(10, 22, 40, 0.12);
  border-radius: 10px;
  color: #0A1628;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.pricing-form__input:focus {
  outline: none;
  border-color: #1ba9f1;
  box-shadow: 0 0 0 3px rgba(27, 169, 241, 0.12);
}
.pricing-form__input::placeholder { color: #94a3b8; }
select.pricing-form__input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  padding-right: 2.25rem;
}

/* Chip-style checkboxes */
.pricing-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pricing-form__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(10, 22, 40, 0.12);
  border-radius: 10px;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pricing-form__chip:hover { border-color: rgba(27, 169, 241, 0.5); background: #fafcff; }
.pricing-form__chip input[type="checkbox"] {
  accent-color: #1ba9f1;
  margin: 0;
}
.pricing-form__chip:has(input:checked) {
  background: rgba(27, 169, 241, 0.08);
  border-color: #1ba9f1;
  color: #0A1628;
}

.pricing-form__inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #334155;
  font-size: 0.88rem;
  cursor: pointer;
}
.pricing-form__inline-toggle input { accent-color: #1ba9f1; }

.pricing-form__legal {
  margin: 0.7rem 0 0;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.55;
}

.pricing-form__file {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #fafbfd;
  border: 1px dashed rgba(10, 22, 40, 0.18);
  border-radius: 10px;
  color: #475569;
  font-family: inherit;
  font-size: 0.85rem;
  box-sizing: border-box;
  cursor: pointer;
}

@media (max-width: 600px) {
  .pricing-form { padding: 1.25rem !important; }
  .pricing-form__section-header { margin-bottom: 1rem; }
  .pricing-form__section + hr,
  .pricing-form__divider { margin: 1.25rem 0; }
  .pricing-form .pricing-form__section > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .pricing-form .pricing-form__section > div[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Mobile — keep all rows readable */
@media (max-width: 768px) {
  .comparison-widget__header { padding: 0.85rem 0.7rem !important; }
  .comparison-widget__header-cell.us { padding: 0.5rem 0.4rem !important; font-size: 0.78rem !important; }
  .comparison-widget__header-input { font-size: 0.78rem !important; padding: 0.4rem 0.5rem !important; min-width: 0; width: 100% !important; }
  .comparison-widget__row { padding: 0.85rem 0.7rem !important; grid-template-columns: 1.5fr 0.75fr 0.75fr !important; }
  .comparison-widget__feature-name { font-size: 0.82rem !important; flex-wrap: wrap; }
  .comparison-widget__feature-name .recommended { font-size: 0.55rem !important; margin-left: 0; margin-top: 0.25rem; flex-basis: 100%; }
  .comparison-widget__check::before { width: 18px; height: 18px; background-size: 18px 18px; }
}

/* =============================================================
   PASS 38e — User feedback fixes (live-site cleanup)
   1. Burger SVG visibility (was invisible: stroke:none, fill:none)
   2. Hero word cycle: kill gradient, single solid blue
   3. Hero static noun "on Satellite": cleaner, no italic flourish noise
   4. Compact homepage top vertical stack (banner -> reviews -> H1 -> sub -> CTA)
   ============================================================= */

/* 1. Burger menu icon — give SVG a visible navy color on the white nav.
   Original site had black nav + white burger. We're light mode, so we
   need navy lines on the white pill. The hamburger button uses an SVG
   with stroke="currentColor" so we set color on the button. Some markup
   uses inline <span> bars; cover both. */
.hamburger,
.hamburger:link,
.hamburger:visited {
  color: #0A1628 !important;
}
.hamburger svg {
  stroke: #0A1628 !important;
  color: #0A1628 !important;
  fill: none !important;
  width: 22px !important;
  height: 22px !important;
}
.hamburger svg path,
.hamburger svg line,
.hamburger svg rect {
  stroke: #0A1628 !important;
  stroke-width: 2 !important;
}
.hamburger svg circle {
  fill: #0A1628 !important;
  stroke: none !important;
}
.hamburger__waves path,
.hamburger__waves line,
.hamburger__close path,
.hamburger__close line {
  stroke: #0A1628 !important;
  fill: none !important;
  stroke-width: 2 !important;
}
.hamburger span {
  background: #0A1628 !important;
}

/* 2. Hero word cycle — neutralize the multi-stop water gradient.
   The earlier rule at line 2261 set color:#0071e3 but the gradient at
   line 1660 still wins because of -webkit-text-fill-color: transparent.
   Force a clean SOLID blue. */
.hero-word-cycle__word,
.hero-word-cycle--verb .hero-word-cycle__word,
.hero-word-cycle__word--active {
  background: none !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0071e3 !important;
  color: #0071e3 !important;
  animation: none !important;
  /* White halo so the blue stays legible against busy pool photo */
  text-shadow: 0 1px 2px rgba(255,255,255,0.85), 0 2px 12px rgba(255,255,255,0.6) !important;
}
/* Same halo on the rest of the H1 (the bare span + on Satellite) — overrides line 1847's dark shadow */
.hero h1, .home-hero h1, .hero__title {
  text-shadow: 0 1px 2px rgba(255,255,255,0.85), 0 2px 12px rgba(255,255,255,0.6) !important;
}
/* Kill the water-droplet pseudo decoration so the headline is clean */
.hero-word-cycle::after {
  display: none !important;
}

/* 3. Hero static noun "on Satellite" — keep navy color but drop the italic
   flourish so the headline reads cohesive (one tone, one weight). */
.hero__title .hero-static-noun,
.hero__title .hero-static-noun em,
h1.hero__title .hero-static-noun,
h1.hero__title .hero-static-noun em {
  font-style: normal !important;
  font-weight: inherit !important;
  text-shadow: none !important;
}

/* 4. Compact the homepage hero vertical stack on mobile.
   Tightens: banner gap, badge row, reviews chip, H1, subtitle, CTAs. */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--banner-h, 0px) + 64px) !important;
    padding-bottom: 1.5rem !important;
  }
  .hero__badges {
    gap: 0.4rem !important;
    margin-bottom: 0.5rem !important;
    flex-wrap: wrap;
  }
  .hero__badge,
  .hero__badge--gold,
  .hero__badge--reviews {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  .hero__title {
    margin-top: 0.35rem !important;
    margin-bottom: 0.5rem !important;
    font-size: clamp(2.1rem, 8.5vw, 2.8rem) !important;
    line-height: 1.06 !important;
  }
  .hero__subtitle {
    margin-top: 0 !important;
    margin-bottom: 0.9rem !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }
  .hero__ctas {
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    gap: 0.6rem !important;
    padding-bottom: 0 !important;
  }
  /* Booking banner — slimmer */
  .urgency-banner,
  .urgency-banner__inner {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    font-size: 0.78rem !important;
  }
  /* Header pill — sits just under the slim banner (banner-h auto-set by app.js) */
  .header {
    top: 6px !important;
  }
}

/* Desktop — also a touch tighter so trust badges + headline + sub feel
   like one block, not three. */
@media (min-width: 1100px) {
  .hero__badges { margin-bottom: 1rem !important; }
  .hero__title { margin-bottom: 1rem !important; }
  .hero__subtitle { margin-bottom: 1.5rem !important; }
  .hero__ctas { margin-bottom: 1.5rem !important; }
}


/* ===================================================================
   Pass 38P — Home hero: match the design-studio white-on-photo treatment
   ===================================================================
   The hero background is a real pool photo (busy, dark/teal). Light-mode
   navy text from passes 38a/38b is illegible against it (see IMG_9732 —
   the "Price Your Dream Backyard on Satellite" reads as muddy black on
   teal water). Mirror the design-studio H1 system: white text + Apple
   TV+-style layered dark shadow, blue accent only on the cycling verb.
   Selectors are scoped to `.hero h1` so this never touches inner pages
   or the design-studio H1 (which already has its own scoped style). */

/* H1 base: white core, layered dark shadow. !important needed to beat
   the line-2305 .hero h1 navy rule and the line-2418 hero-static-noun
   navy rule. */
.hero .hero__title,
.hero h1.hero__title,
.home-hero .hero__title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.45),
    0 4px 24px rgba(0,0,0,0.35) !important;
}

/* All inner spans of the H1 inherit white — beats the line-2308
   "bare span → navy" override (which has specificity 0,4,1 thanks to its
   three :not() pseudo-classes). Match that specificity by chaining the
   same :not() filters, then add one extra qualifier so we win source order. */
.hero h1.hero__title > span:not(.hero-word-cycle):not(.hero-static-noun):not(.hero-accent),
.home-hero h1.hero__title > span:not(.hero-word-cycle):not(.hero-static-noun):not(.hero-accent) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.45),
    0 4px 24px rgba(0,0,0,0.35) !important;
}
/* All other inner spans (including .hero-word-cycle wrapper) — white core,
   except the cycling word itself which is overridden below to blue. */
.hero h1.hero__title .hero-word-cycle,
.home-hero h1.hero__title .hero-word-cycle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Cycling verb (Design / Price / Build / Enjoy) = Apple system-cyan,
   matching the "Seconds" treatment on design-studio. Glow-shadow stays
   so the blue word holds against busy water. */
.hero .hero__title .hero-word-cycle__word,
.home-hero .hero__title .hero-word-cycle__word {
  color: #5ac8fa !important;
  -webkit-text-fill-color: #5ac8fa !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 14px rgba(90,200,250,0.55),
    0 2px 8px rgba(0,0,0,0.45) !important;
}
.hero .hero__title .hero-word-cycle__word--active,
.home-hero .hero__title .hero-word-cycle__word--active {
  color: #5ac8fa !important;
  -webkit-text-fill-color: #5ac8fa !important;
}

/* "on Satellite" italic noun — drop the italic so the headline reads
   as one cohesive line, like design-studio. Stays white. */
.hero .hero__title .hero-static-noun,
.hero .hero__title .hero-static-noun em,
.home-hero .hero__title .hero-static-noun,
.home-hero .hero__title .hero-static-noun em,
h1.hero__title .hero-static-noun,
h1.hero__title .hero-static-noun em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-style: normal !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.45),
    0 4px 24px rgba(0,0,0,0.35) !important;
}

/* Subtitle ("Custom gunite pools from $55,555…") — was gray-on-white-halo
   which disappears on the photo. Flip to white-on-dark-shadow with a soft
   semi-translucent dark card so the long sentence reads cleanly. */
.hero .hero__subtitle,
.home-hero .hero__subtitle {
  color: #ffffff !important;
  background: rgba(10,22,40,0.32) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18) !important;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Microcopy + "Already have a quote?" link — white with shadow.
   These are inline-styled in the markup so we override hard. */
.hero .hero__microcopy,
.home-hero .hero__microcopy {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35) !important;
}
.hero .hero__ctas a[href*="estimate-match"],
.home-hero .hero__ctas a[href*="estimate-match"] {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35) !important;
}

/* "Want to talk to someone? Request a Consultation →" link */
.hero .hero__quote-link,
.home-hero .hero__quote-link {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35) !important;
}
.hero .hero__quote-link span,
.home-hero .hero__quote-link span {
  color: #5ac8fa !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 10px rgba(90,200,250,0.55) !important;
}

/* Hero overlay — bump the dark wash slightly so white type holds even on
   the brightest pool photos (some hero images are sun-blown). */
.hero .hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.22) 45%,
    rgba(0,0,0,0.38) 100%
  ) !important;
}

/* Trust badges — keep the white-glass card look (already correct on light
   theme) but tighten the shadow so they sit cleanly on photo. */
.hero .hero__badge,
.hero .hero__badge--gold,
.hero .hero__badge--reviews {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  color: #0A1628 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22) !important;
  text-shadow: none !important;
}
.hero .hero__badge--gold { color: #b8871a !important; }

/* Tighten the spacing rhythm so the hero reads as one composed block,
   matching the design-studio breathing room. */
@media (min-width: 1100px) {
  .hero .hero__badges { margin-bottom: 1rem !important; }
  .hero .hero__title { margin-bottom: 1.1rem !important; }
  .hero .hero__subtitle { margin-bottom: 1.5rem !important; }
}


/* ===================================================================
   Pass 38Q — fixes from user feedback (May 1, 4:40 PM)
   =================================================================== */

/* (1) Home hero crop: shift the bg image UP 50px exactly per user spec.
   object-position uses calc(50% + 50px) on the Y axis — a positive value
   moves the image's center DOWN inside its frame, which means the
   VISIBLE crop pulls the BOTTOM of the source image (the pool) up into
   view. 50px is the user's number, applied identically on every viewport. */
.hero .hero__bg img {
  object-position: 50% calc(50% + 50px) !important;
}

/* (5) Design studio trust-row: the navy-on-light treatment from Pass 38j
   reads as muddy black on the satellite photo. Flip to white + dark
   text-shadow so it matches the rest of the on-photo type system. */
#estimator-root .trust-row {
  color: rgba(255,255,255,0.95) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.45) !important;
}
#estimator-root .trust-row strong {
  color: #ffffff !important;
}
#estimator-root .trust-row .sep {
  color: rgba(255,255,255,0.55) !important;
}
/* Stars stay gold \u2014 they're the accent color. */
#estimator-root .trust-row .stars {
  color: #ffcc00 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}

/* (2) Design studio hero scrim: user wants a "light-mode backdrop with a
   10% black haze on top." The current scrim is a white gradient that
   washes the satellite to almost-nothing at the bottom. Replace with a
   uniform 10% black tint so the satellite stays vivid AND the floating
   white H1/chip have something to pop against. The address-card area
   below the scrim already has its own white surface, so no need to fade
   white into it through the scrim. */
#estimator-root .hero__scrim {
  background: rgba(0,0,0,0.10) !important;
}


/* ===================================================================
   Pass 38R — DS scrim/shift + home nav parity + home hero way up
   =================================================================== */

/* (DS-1) Darker scrim film + saturate the satellite for definition.
   The 10% black was too soft; user said the satellite reads "super
   duper white" with a film. Bump to 18% black AND saturate the
   imagery itself ~15% so colors (lawn green, roof red, water teal)
   pop without losing the calibrated daylight feel. */
#estimator-root .hero__scrim {
  background: rgba(0,0,0,0.18) !important;
}
#estimator-root #heroMap {
  filter: saturate(1.15) contrast(1.04) !important;
  -webkit-filter: saturate(1.15) contrast(1.04) !important;
}

/* (Home-Nav-1) Match the slim DS header on home. The home logo had
   inline style="height:auto" without a max-height, so it rendered at
   71px and inflated the whole header to 95px tall. Inline max-height
   added on index.html; this rule is a CSS belt-and-suspenders so any
   future page that forgets the inline still gets the slim chrome. */
.header__logo img {
  max-height: 44px !important;
  width: auto !important;
}

/* (Home-Nav-2) Dropdowns \u2014 kill dark mode, go light glass-on-white.
   Original: rgba(15,20,50,0.92) navy with white text. Now: white card
   with slate text. Matches the page-wide light-mode treatment so a
   hover doesn't suddenly drop the user into a dark surface. */
.header__nav .dropdown-menu {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(10,22,40,0.08) !important;
  box-shadow: 0 16px 48px rgba(10,22,40,0.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.header__nav .dropdown-menu a {
  color: #1E293B !important;
}
.header__nav .dropdown-menu a:hover {
  background: rgba(0,113,227,0.08) !important;
  color: #0071e3 !important;
}

/* Mega menu (Services dropdown) \u2014 same flip. */
.dropdown-menu--mega {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(10,22,40,0.08) !important;
  box-shadow: 0 20px 60px rgba(10,22,40,0.20) !important;
}
.mega-label {
  color: #0071e3 !important;
  border-bottom-color: rgba(0,113,227,0.20) !important;
}
.mega-col a {
  color: #1E293B !important;
}
.mega-col a:hover {
  color: #0071e3 !important;
}

/* (Home-Hero) Move the bg image WAY UP per user. Previous Pass 38Q used
   +50px which still left the pool grazing the bottom edge. User said
   "really, really high \u2014 make the pool the main thing." Push the visible
   crop further toward the bottom of the source image. +160px effectively
   anchors near the bottom of the photo so the pool, water, and beam fill
   the visible frame, with a sliver of fence/foliage above. */
/* Pass 38S v2 — desktop pulls a center crop via translateY hack so the pool
   dominates the visible frame; mobile bottom-anchors so the water and steps
   fill the shorter viewport. Pass 38AK reverted: this scope was wrong, the
   desktop "old backdrop" complaint was about /pages/design-studio, not home. */
.hero .hero__bg {
  transform: translateY(-340px);
  height: calc(100% + 680px);
  top: 0;
}
.hero .hero__bg img {
  object-position: 50% 50% !important;
}
@media (max-width: 768px) {
  .hero .hero__bg {
    transform: none;
    height: 100%;
    top: 0;
  }
  .hero .hero__bg img {
    object-position: 50% 100% !important;
  }
}

/* =========================================================
   PASS 38S — Interactive Before/After Slider
   Apple-style draggable handle. Click anywhere on the image
   to set position. Keyboard accessible.
   ========================================================= */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: #0b1220;
  cursor: ew-resize;
  box-shadow: 0 12px 32px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  isolation: isolate;
}
.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba-slider__after-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((100 - var(--pos, 50)) * 1%) 0 0);
  -webkit-clip-path: inset(0 calc((100 - var(--pos, 50)) * 1%) 0 0);
  will-change: clip-path;
}
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos, 50) * 1%);
  width: 3px;
  background: rgba(255,255,255,0.95);
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 2px 12px rgba(0,0,0,0.35);
}
.ba-slider__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: ew-resize;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease;
}
.ba-slider:hover .ba-slider__knob,
.ba-slider:focus-within .ba-slider__knob {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
}
.ba-slider__knob svg {
  width: 18px;
  height: 18px;
  color: #0b1220;
}
.ba-slider__chip {
  position: absolute;
  top: 0.85rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}
.ba-slider__chip--before { left: 0.85rem; }
.ba-slider__chip--after  { right: 0.85rem; background: rgba(37, 99, 235, 0.92); }
.ba-slider__caption {
  text-align: center;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-700, #334155);
}
.ba-slider__caption span {
  color: var(--gray-500, #64748b);
  font-weight: 500;
}
.ba-slider:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

/* Two-up grid for home & gallery */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 768px) {
  .ba-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ba-slider { aspect-ratio: 4 / 3; }
  .ba-slider__knob { width: 48px; height: 48px; }
}

/* ========== Pass 38T — Case Study Cards (under home before/after sliders) ========== */
.case-study {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-study .ba-slider {
  border-radius: 18px 18px 0 0;
}
.case-study__body {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 1.6rem 1.6rem 1.5rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.case-study__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 0.1rem;
}
.case-study__title {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}
.case-study__copy {
  font-size: 0.97rem;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
.case-study__meta {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-top: 0.4rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.02) 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 14px;
}
.case-study__investment {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.case-study__investment-label,
.case-study__timeline-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.case-study__investment-value {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.case-study__investment-note {
  font-size: 0.78rem;
  color: #64748b;
  font-style: italic;
}
.case-study__timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(37, 99, 235, 0.18);
  flex-shrink: 0;
}
.case-study__timeline-value {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}
.case-study__scope {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.case-study__scope li {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}
@media (max-width: 768px) {
  .case-study__body { padding: 1.25rem 1.25rem 1.2rem; gap: 0.7rem; }
  .case-study__title { font-size: 1.25rem; }
  .case-study__copy { font-size: 0.95rem; }
  .case-study__meta { padding: 0.85rem 0.95rem; gap: 0.85rem; }
  .case-study__investment-value { font-size: 1.4rem; }
  .case-study__timeline { padding-left: 0.85rem; }
}

/* ---- Pass 38U: case study spotlight + compact variants (gallery) ---- */
.case-study--spotlight {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.case-study--spotlight > .ba-slider {
  border-radius: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  height: 100%;
  min-height: 420px;
}
.case-study--spotlight .case-study__body {
  padding: 2rem 2.1rem 2.1rem;
}
.case-study--compact {
  /* compact card stays vertical: slider on top, slim body below */
}
.case-study--compact > .ba-slider {
  border-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  aspect-ratio: 4 / 3;
}
.case-study--compact .case-study__body {
  padding: 1.1rem 1.15rem 1.15rem;
  gap: 0.55rem;
}
.case-study--compact .case-study__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.case-study--compact .case-study__title {
  font-size: 1.15rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.case-study--compact .case-study__copy {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}
.case-study--compact .case-study__meta {
  padding: 0.7rem 0.85rem;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.case-study--compact .case-study__investment-label {
  font-size: 0.62rem;
}
.case-study--compact .case-study__investment-value {
  font-size: 1.2rem;
}
.case-study--compact .case-study__investment-note {
  font-size: 0.72rem;
}
.case-study--compact .case-study__timeline-label {
  font-size: 0.62rem;
}
.case-study--compact .case-study__timeline-value {
  font-size: 0.95rem;
}
.case-study--compact .case-study__scope { display: none; }

/* gallery 2x2 grid for compact cards */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

@media (max-width: 900px) {
  .case-study--spotlight {
    grid-template-columns: 1fr;
  }
  .case-study--spotlight > .ba-slider {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .case-study--spotlight .case-study__body {
    padding: 1.5rem 1.4rem 1.5rem;
  }
  .ba-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}
/* ---- end Pass 38U ---- */

/* ---- Pass 38V: kill leftover white text in footer + tighten hero gap ---- */
/* Override every inline rgba(255,255,255,...) color inside .footer */
.footer p,
.footer span,
.footer a,
.footer address,
.footer li,
.footer div {
  color: var(--gray-600, #334155) !important;
}
.footer a {
  color: var(--gray-700, #1E293B) !important;
}
.footer a:hover {
  color: #0071e3 !important;
}
/* Re-darken the small/secondary text */
.footer [style*="rgba(255, 255, 255, 0.5)"],
.footer [style*="rgba(255,255,255,0.5)"],
.footer [style*="rgba(255, 255, 255, 0.6)"],
.footer [style*="rgba(255,255,255,0.6)"],
.footer [style*="rgba(255, 255, 255, 0.58)"],
.footer [style*="rgba(255,255,255,0.58)"],
.footer [style*="rgba(255, 255, 255, 0.7)"],
.footer [style*="rgba(255,255,255,0.7)"] {
  color: var(--gray-500, #64748b) !important;
}
.footer [style*="rgba(255, 255, 255, 0.65)"],
.footer [style*="rgba(255,255,255,0.65)"],
.footer [style*="rgba(255, 255, 255, 0.8)"],
.footer [style*="rgba(255,255,255,0.8)"],
.footer [style*="rgba(255, 255, 255, 0.85)"],
.footer [style*="rgba(255,255,255,0.85)"] {
  color: var(--gray-700, #1E293B) !important;
}
/* Hairline borders (were white at low alpha) */
.footer [style*="border-top:1px solid rgba(255,255,255"],
.footer [style*="border-top: 1px solid rgba(255, 255, 255"],
.footer [style*="border-bottom:1px solid rgba(255,255,255"],
.footer [style*="border-bottom: 1px solid rgba(255, 255, 255"] {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Tighten the empty band between hero pool photo and partner banner.
   Desktop only — mobile hero is fine and collapsing it broke the bg. */
@media (min-width: 769px) {
  .hero {
    padding-bottom: 0.5rem !important;
  }
  .partner-banner {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  }
}

/* The hero <picture> wrapper was sizing to its content (520px on mobile),
   leaving a gray band below where .hero__bg parent kept going. Force the
   <picture> to fill its absolutely-positioned parent so the inner <img>
   height:100% actually resolves to the full hero height. */
.hero .hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* ---- end Pass 38V ---- */

/* ==========================================================================
   Pass 38W — Apple-style case study redesign + new .case-study--feature
   Goal: make case studies feel quieter, more refined, more confident.
   - lighter type weights, tighter rhythm, more whitespace
   - replace blue gradient "investment" chip with a hairline-divider stat row
   - refine scope pills to be subtler (more like Apple feature tags)
   - new --feature variant: slider left ~58%, copy right ~42%, full-width
   ========================================================================== */

/* shared refinements applied to ALL case studies (all variants) */
.case-study__body {
  /* slightly softer shadow + thinner border for an Apple-quiet feel */
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 36px rgba(15, 23, 42, 0.05);
}
.case-study__eyebrow {
  /* keep the eyebrow but cool the brand blue down a notch */
  color: #0071e3;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.case-study__title {
  /* pull weight back from 800 to 700; tighten leading */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.case-study__copy {
  color: #515b6b;
  line-height: 1.6;
}

/* ---- new investment block: hairline-divided stat row, no blue fill ---- */
.case-study__meta {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  padding: 1.1rem 0;
  margin-top: 0.6rem;
  gap: 1.5rem;
}
.case-study__investment-label,
.case-study__timeline-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8a94a6;
}
.case-study__investment-value {
  font-weight: 700;
  letter-spacing: -0.025em;
}
.case-study__investment-note {
  color: #8a94a6;
  font-style: normal;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}
.case-study__timeline {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  padding-left: 1.5rem;
  align-items: flex-end;
}
.case-study__timeline-value {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

/* ---- scope pills: more refined, glass-y, no bright bg ---- */
.case-study__scope {
  gap: 0.4rem 0.45rem;
  margin-top: 0.7rem;
}
.case-study__scope li {
  font-size: 0.76rem;
  font-weight: 500;
  color: #475569;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.07);
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
}

/* ---- spotlight refinements ---- */
.case-study--spotlight .case-study__body {
  padding: 2.4rem 2.4rem 2.2rem;
  gap: 0.9rem;
  justify-content: center;
}
.case-study--spotlight .case-study__title {
  font-size: 1.85rem;
}
.case-study--spotlight .case-study__copy {
  font-size: 1.02rem;
}
.case-study--spotlight .case-study__investment-value {
  font-size: 2rem;
}

/* ---- compact refinements (in 2x2 grid) ---- */
.case-study--compact .case-study__body {
  padding: 1.25rem 1.3rem 1.3rem;
  gap: 0.6rem;
}
.case-study--compact .case-study__meta {
  padding: 0.85rem 0;
  margin-top: 0.5rem;
  gap: 1rem;
}
.case-study--compact .case-study__timeline {
  padding-left: 1rem;
}
.case-study--compact .case-study__investment-value {
  font-size: 1.25rem;
}

/* ==========================================================================
   .case-study--feature — between spotlight and compact in size.
   Full-width (sits outside .ba-grid). 2-col on desktop, stacked on mobile.
   Slider left ~58%, copy right ~42% — slider gets more visual weight.
   ========================================================================== */
.case-study--feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
  margin-bottom: 2.5rem;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 36px rgba(15, 23, 42, 0.05);
}
.case-study--feature > .ba-slider {
  border-radius: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  height: 100%;
  min-height: 380px;
  aspect-ratio: auto;
}
.case-study--feature .case-study__body {
  /* body is already inside .case-study--feature box, so kill its own border/shadow */
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 2.1rem 2rem;
  gap: 0.85rem;
  justify-content: center;
  background: transparent;
}
.case-study--feature .case-study__title {
  font-size: 1.55rem;
}
.case-study--feature .case-study__copy {
  font-size: 0.97rem;
}
.case-study--feature .case-study__investment-value {
  font-size: 1.7rem;
}
.case-study--feature .case-study__scope {
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .case-study--feature {
    grid-template-columns: 1fr;
  }
  .case-study--feature > .ba-slider {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .case-study--feature .case-study__body {
    padding: 1.5rem 1.4rem 1.6rem;
  }
  .case-study--feature .case-study__title {
    font-size: 1.3rem;
  }
  .case-study--spotlight .case-study__body {
    padding: 1.6rem 1.4rem 1.6rem;
  }
  .case-study--spotlight .case-study__title {
    font-size: 1.45rem;
  }
  .case-study--spotlight .case-study__investment-value {
    font-size: 1.55rem;
  }
}
/* ---- end Pass 38W ---- */