/*
  Shared stylesheet for every page (home, city pages, blog).
  One file, loaded once — this is what makes the brand refresh (or
  the next one) a single edit instead of N edits across N pages.
*/

/* Derived shades — NOT new brand colors. Computed from the two official
   tokens (--navy, --cyan) so gradients/shadows never hardcode a new hex. */
:root {
  --navy-soft: color-mix(in srgb, var(--navy) 78%, white);
  --navy-deep: color-mix(in srgb, var(--navy) 90%, black);
  --cyan-light: color-mix(in srgb, var(--cyan) 55%, white);
  --cyan-deep: color-mix(in srgb, var(--cyan) 80%, var(--navy));
  --surface-blue: color-mix(in srgb, var(--cyan) 30%, white);
  --border: color-mix(in srgb, var(--navy) 10%, white);
  --shadow: 0 10px 30px color-mix(in srgb, var(--navy) 12%, transparent);
  --shadow-lg: 0 20px 50px color-mix(in srgb, var(--navy) 18%, transparent);
  --radius: 18px;
}

/* ---------- Section color themes (navy → light blue → white cycle) --------
   Per client direction, page sections alternate: Talent navy, Talent light
   blue (derived from the brand cyan), then white — repeating down the page.
   Cards keep their own white backgrounds so content stays readable on any. */
.sec-white { background: var(--surface); }
.sec-blue { background: var(--surface-blue); }
.sec-navy {
  background: linear-gradient(150deg, var(--navy), var(--navy-deep) 60%, var(--cyan-deep));
  color: var(--white);
}
.sec-navy .section-head h2 { color: var(--white); }
.sec-navy .section-head p { color: color-mix(in srgb, var(--white) 82%, transparent); }
.sec-navy .eyebrow { color: var(--cyan-light); background: color-mix(in srgb, var(--white) 14%, transparent); }
.sec-navy .why-item h4 { color: var(--white); }
.sec-navy .why-item p { color: color-mix(in srgb, var(--white) 78%, transparent); }
.sec-blue .section-head p, .sec-blue .intro-inner p { color: color-mix(in srgb, var(--navy) 80%, white); }

/* Light cards must never inherit a dark section's white text — they carry
   their own colour so any card can sit inside any section theme. */
.service-card, .area-card, .review-card, .blog-card,
.faq-item, .stat-card, .quote-wrap { color: var(--text); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--text);
  line-height: 1.65;
  background: var(--surface);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  line-height: 1.2;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); color: var(--text); margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 17px; }

/* ---------- Coupon bar ---------- */
.coupon-bar {
  background: linear-gradient(90deg, var(--navy), var(--navy-deep) 60%, var(--cyan-deep));
  color: var(--white);
  text-align: center;
  font-size: 14px;
  font-weight: var(--fw-med);
  padding: 10px 44px 10px 16px;
  position: relative;
  z-index: 200;
}
.coupon-bar strong { color: var(--cyan-light); font-weight: var(--fw-bold); }
.coupon-bar .close-coupon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--white); opacity: .7; font-size: 18px; line-height: 1; padding: 4px;
}
.coupon-bar .close-coupon:hover { opacity: 1; }
.coupon-bar.hidden { display: none; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 190;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1180px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo-badge {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), var(--navy));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  padding: 7px;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
}
.logo-word small {
  display: block; font-family: var(--font-body); font-weight: var(--fw-med);
  font-size: 11px; color: var(--text-muted); letter-spacing: .03em;
}
nav.main-nav ul { display: flex; align-items: center; gap: 32px; }
nav.main-nav a { font-weight: var(--fw-med); font-size: 15px; color: var(--text); transition: color .2s; position: relative; }
nav.main-nav a:not(.btn-nav):after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--brand-accent); transition: width .25s;
}
nav.main-nav a:not(.btn-nav):hover:after { width: 100%; }
.btn-nav {
  background: linear-gradient(135deg, var(--cyan-deep), var(--navy));
  color: var(--white) !important;
  padding: 11px 22px; border-radius: 100px; font-weight: var(--fw-semi);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--navy) 30%, transparent);
  transition: transform .2s, box-shadow .2s;
}
.btn-nav:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--navy) 40%, transparent); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--cyan) 35%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--cyan) 25%, transparent), transparent 50%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 55%, var(--cyan-deep) 100%);
  color: var(--white);
  padding: 110px 0 160px;
  overflow: hidden;
}
.hero:before {
  content: ''; position: absolute; inset: 0 -80px;
  background-image: repeating-linear-gradient(120deg, color-mix(in srgb, var(--white) 3.5%, transparent) 0 2px, transparent 2px 40px);
  opacity: .6;
  animation: heroShimmer 16s ease-in-out infinite alternate;
}
@keyframes heroShimmer { from { transform: translateX(0); } to { transform: translateX(-56px); } }
.hero-inner { position: relative; z-index: 5; max-width: 760px; margin: 0 auto; text-align: center; }
.breadcrumb { font-size: 13px; color: color-mix(in srgb, var(--white) 70%, transparent); margin-bottom: 18px; }
.breadcrumb a { color: var(--cyan-light); font-weight: var(--fw-semi); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.badge {
  background: color-mix(in srgb, var(--white) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
  padding: 7px 16px; border-radius: 100px;
  font-size: 13px; font-weight: var(--fw-semi); letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero h1 { font-size: var(--fs-h1); margin-bottom: 20px; letter-spacing: -.01em; }
.hero p.sub { font-size: 19px; color: color-mix(in srgb, var(--white) 85%, transparent); max-width: 600px; margin: 0 auto 36px; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color: var(--navy);
  padding: 16px 34px; border-radius: 100px; font-weight: var(--fw-bold); font-size: 16px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--cyan) 40%, transparent);
  transition: transform .2s, box-shadow .2s;
  display: inline-block;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--cyan) 50%, transparent); }
.btn-primary:before {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--white) 55%, transparent), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover:before { left: 125%; }
.btn-ghost {
  border: 1.5px solid color-mix(in srgb, var(--white) 50%, transparent);
  color: var(--white);
  padding: 15px 32px; border-radius: 100px; font-weight: var(--fw-semi); font-size: 16px;
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--white) 12%, transparent); border-color: color-mix(in srgb, var(--white) 80%, transparent); }

/* ---------- Optional real hero media + contrast overlay ---------- */
/* Only present when site.heroMedia is set; default keeps the animated bg. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* object-position favours the right side of the frame: on narrow screens the
   crop tightens and would otherwise pull the pool toy directly behind the
   headline, making it busy. Shifting the crop keeps open water behind the
   text at every width. Re-check this value if the hero photo is replaced. */
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Centre scrim: calms whatever the photo has behind the headline (a pool
       toy, a bright reflection) so the type always reads as the focal point,
       while the edges keep the photo's brightness. */
    radial-gradient(ellipse 75% 60% at 50% 45%,
      color-mix(in srgb, var(--navy) 46%, transparent),
      transparent 72%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--navy) 88%, transparent),
      color-mix(in srgb, var(--navy) 68%, transparent) 55%,
      color-mix(in srgb, var(--cyan-deep) 72%, transparent));
}

/* ---------- Rising bubbles (hero) ---------- */
.bubbles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.bubble {
  position: absolute; bottom: -40px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%,
    color-mix(in srgb, var(--white) 75%, transparent),
    color-mix(in srgb, var(--cyan-light) 35%, transparent) 68%, transparent);
  animation: bubbleRise linear infinite; will-change: transform, opacity;
}
.bubbles .bubble:nth-child(1) { left: 12%; width: 14px; height: 14px; animation-duration: 15s; animation-delay: 0s; }
.bubbles .bubble:nth-child(2) { left: 27%; width: 9px;  height: 9px;  animation-duration: 19s; animation-delay: 3s; }
.bubbles .bubble:nth-child(3) { left: 46%; width: 18px; height: 18px; animation-duration: 16s; animation-delay: 6s; }
.bubbles .bubble:nth-child(4) { left: 63%; width: 8px;  height: 8px;  animation-duration: 21s; animation-delay: 1.5s; }
.bubbles .bubble:nth-child(5) { left: 78%; width: 12px; height: 12px; animation-duration: 15s; animation-delay: 4.5s; }
.bubbles .bubble:nth-child(6) { left: 90%; width: 16px; height: 16px; animation-duration: 20s; animation-delay: 8s; }
@keyframes bubbleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .5; }
  50%  { transform: translateY(-42vh) translateX(10px); opacity: .32; }
  90%  { opacity: .12; }
  100% { transform: translateY(-82vh) translateX(-6px); opacity: 0; }
}

/* ---------- Site-wide ambient bubbles (fixed layer, every page) ---------- */
/* Cyan-tinted so they read on BOTH light and dark backgrounds; very low
   opacity + pointer-events none = life without hurting readability. */
.ambient-bubbles { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.ambient-bubbles .bubble {
  animation-name: ambientRise;
  border: 1px solid color-mix(in srgb, var(--cyan) 65%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent),
              inset 0 0 6px color-mix(in srgb, var(--white) 55%, transparent);
  background: radial-gradient(circle at 32% 30%,
    color-mix(in srgb, var(--white) 90%, transparent),
    color-mix(in srgb, var(--cyan) 70%, transparent) 55%,
    color-mix(in srgb, var(--cyan) 30%, transparent) 78%, transparent);
}
.ambient-bubbles .bubble:nth-child(1)  { left: 4%;  width: 16px; height: 16px; animation-duration: 18s; animation-delay: 0s; }
.ambient-bubbles .bubble:nth-child(2)  { left: 12%; width: 10px; height: 10px; animation-duration: 24s; animation-delay: 5s; }
.ambient-bubbles .bubble:nth-child(3)  { left: 21%; width: 20px; height: 20px; animation-duration: 15s; animation-delay: 9s; }
.ambient-bubbles .bubble:nth-child(4)  { left: 30%; width: 12px; height: 12px; animation-duration: 21s; animation-delay: 2s; }
.ambient-bubbles .bubble:nth-child(5)  { left: 39%; width: 18px; height: 18px; animation-duration: 17s; animation-delay: 12s; }
.ambient-bubbles .bubble:nth-child(6)  { left: 48%; width: 11px; height: 11px; animation-duration: 25s; animation-delay: 7s; }
.ambient-bubbles .bubble:nth-child(7)  { left: 57%; width: 22px; height: 22px; animation-duration: 14s; animation-delay: 4s; }
.ambient-bubbles .bubble:nth-child(8)  { left: 66%; width: 13px; height: 13px; animation-duration: 20s; animation-delay: 10s; }
.ambient-bubbles .bubble:nth-child(9)  { left: 74%; width: 19px; height: 19px; animation-duration: 16s; animation-delay: 1s; }
.ambient-bubbles .bubble:nth-child(10) { left: 82%; width: 11px; height: 11px; animation-duration: 23s; animation-delay: 6s; }
.ambient-bubbles .bubble:nth-child(11) { left: 90%; width: 15px; height: 15px; animation-duration: 18s; animation-delay: 11s; }
.ambient-bubbles .bubble:nth-child(12) { left: 96%; width: 21px; height: 21px; animation-duration: 15s; animation-delay: 3s; }
.ambient-bubbles .bubble:nth-child(13) { left: 8%;  width: 24px; height: 24px; animation-duration: 19s; animation-delay: 14s; }
.ambient-bubbles .bubble:nth-child(14) { left: 34%; width: 14px; height: 14px; animation-duration: 22s; animation-delay: 8s; }
.ambient-bubbles .bubble:nth-child(15) { left: 61%; width: 16px; height: 16px; animation-duration: 17s; animation-delay: 13s; }
.ambient-bubbles .bubble:nth-child(16) { left: 87%; width: 23px; height: 23px; animation-duration: 20s; animation-delay: 2.5s; }
@keyframes ambientRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .5; }
  55%  { transform: translateY(-55vh) translateX(10px); opacity: .34; }
  92%  { opacity: .1; }
  100% { transform: translateY(-108vh) translateX(-8px); opacity: 0; }
}

/* ---------- Layered animated hero waves (dark → light transition) ---------- */
.hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; z-index: 2; overflow: hidden; pointer-events: none; }
.wave-layer { position: absolute; left: 0; bottom: 0; display: flex; width: 200%; height: 100%; will-change: transform; }
.wave-layer svg { flex: 0 0 50%; width: 50%; height: 100%; display: block; }
.wave-layer svg path { fill: currentColor; }
.wave-layer--back  { color: color-mix(in srgb, var(--cyan) 45%, white); opacity: .5;  height: 100%; animation: waveDrift 21s linear infinite; }
.wave-layer--mid   { color: color-mix(in srgb, var(--cyan) 22%, white); opacity: .7;  height: 92%;  animation: waveDrift 15s linear infinite reverse; }
.wave-layer--front { color: var(--surface-blue); height: 78%; animation: waveDrift 11s linear infinite; }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reusable ANIMATED wave divider between sections ---------- */
.wave-divider { position: absolute; left: 0; right: 0; height: 56px; line-height: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.wave-divider-track { display: flex; width: 200%; height: 100%; will-change: transform; animation: waveDrift 12s linear infinite; }
.wave-divider-track svg { flex: 0 0 50%; width: 50%; height: 100%; display: block; }
/* light → dark: sits at the top of a dark section, filled dark, poking up. */
.wave-divider--to-navy { top: 0; transform: translateY(-99%); color: var(--navy); }
.wave-divider--to-navy .wave-divider-track { animation-duration: 13s; }
/* dark → light: sits at the bottom of a dark section, filled light, over it. */
.wave-divider--to-light { bottom: 0; color: var(--surface-alt); }
.wave-divider--to-light .wave-divider-track { animation-duration: 10s; animation-direction: reverse; }
/* light → light transitions: divider sits INSIDE the top of the new section,
   filled with the PREVIOUS section's background, so the previous color
   "washes" into the new one like a waterline. */
/* scaleY(-1) mirrors the fill so the previous color touches the top edge and
   waves DOWN into the new section — same flowing look as the bottom divider,
   no detached stripe. */
.wave-divider--white-top { top: 0; color: var(--surface); transform: scaleY(-1); }
.wave-divider--white-top .wave-divider-track { animation-duration: 11s; }
.wave-divider--alt-top { top: 0; color: var(--surface-alt); transform: scaleY(-1); }
.wave-divider--alt-top .wave-divider-track { animation-duration: 9s; animation-direction: reverse; }
.wave-divider--blue-top { top: 0; color: var(--surface-blue); transform: scaleY(-1); }
.wave-divider--blue-top .wave-divider-track { animation-duration: 10s; animation-direction: reverse; }
.wave-divider--navy-top { top: 0; color: var(--navy); transform: scaleY(-1); }
.wave-divider--navy-top .wave-divider-track { animation-duration: 12s; }
.section { position: relative; }

.grad-text {
  background: linear-gradient(90deg, var(--cyan-light), var(--cyan) 45%, var(--white) 65%, var(--cyan) 85%, var(--cyan-light));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradGlint 7s ease-in-out infinite alternate;
}
@keyframes gradGlint { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- Hero floating light orbs ---------- */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .55; pointer-events: none; z-index: 1; }
.hero-orb.o1 { width: 340px; height: 340px; background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); top: -80px; left: -60px; animation: floatA 14s ease-in-out infinite; }
.hero-orb.o2 { width: 260px; height: 260px; background: radial-gradient(circle, var(--cyan-light) 0%, transparent 70%); bottom: -40px; right: -40px; animation: floatB 16s ease-in-out infinite; }
.hero-orb.o3 { width: 180px; height: 180px; background: radial-gradient(circle, var(--white) 0%, transparent 70%); top: 38%; right: 14%; opacity: .22; animation: floatC 12s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { transform: translate(0,0) scale(1);} 50% { transform: translate(30px,40px) scale(1.1);} }
@keyframes floatB { 0%, 100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-25px,-30px) scale(1.08);} }
@keyframes floatC { 0%, 100% { transform: translate(0,0);} 50% { transform: translate(-15px,20px);} }

/* ---------- Trust stat strip ---------- */
.stat-strip { position: relative; z-index: 6; max-width: 1000px; margin: -64px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { background: color-mix(in srgb, var(--white) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--white) 70%, transparent); border-radius: 16px; padding: 22px 16px; text-align: center; box-shadow: var(--shadow-lg); transition: transform .25s; }
.stat-card:hover { transform: translateY(-4px); }
.stat-card .num { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 26px; background: linear-gradient(135deg, var(--navy), var(--cyan-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 4px; }
.stat-card .label { font-size: 12px; color: var(--text-muted); font-weight: var(--fw-semi); letter-spacing: .02em; }

/* ---------- Intro ---------- */
.intro { padding: 80px 0 40px; }
.intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.intro-inner h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 18px; }
.intro-inner p { color: var(--text-muted); font-size: 17px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.chip { background: var(--white); border: 1px solid var(--border); color: var(--cyan-deep); font-size: 13px; font-weight: var(--fw-semi); padding: 6px 14px; border-radius: 100px; }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card:after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: 0 0 0 0 transparent; transition: box-shadow .3s; pointer-events: none; }
.service-card:hover:after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent), 0 20px 45px color-mix(in srgb, var(--cyan) 22%, transparent); }
.service-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--cyan), var(--navy));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--white);
  animation: iconBob 5.5s ease-in-out infinite;
}
.service-card:nth-child(2) .service-icon { animation-delay: .7s; }
.service-card:nth-child(3) .service-icon { animation-delay: 1.4s; }
.service-card:nth-child(4) .service-icon { animation-delay: 2.1s; }
@keyframes iconBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.service-card h3 { font-size: 18px; margin-bottom: 10px; }
.service-card p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- Before / After slider ---------- */
.ba-wrap { max-width: 900px; margin: 0 auto; }
.ba-frame { position: relative; width: 100%; aspect-ratio: 16/8; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ba-after { position: absolute; inset: 0; background: linear-gradient(160deg, var(--navy), var(--cyan) 55%, color-mix(in srgb, var(--cyan) 30%, white)); }
.ba-after:before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(120deg, color-mix(in srgb, var(--white) 8%, transparent) 0 2px, transparent 2px 34px); }
.ba-before { position: absolute; inset: 0; background: linear-gradient(160deg, #4d5a26, #7a8a3d 55%, #9aa855); clip-path: inset(0 50% 0 0); transition: clip-path .05s linear; }
.ba-before:before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(0,0,0,.15) 0, transparent 40%), radial-gradient(circle at 70% 65%, rgba(0,0,0,.12) 0, transparent 35%); }
.ba-tag { position: absolute; top: 16px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--white); background: color-mix(in srgb, var(--navy) 55%, transparent); padding: 6px 14px; border-radius: 100px; backdrop-filter: blur(4px); z-index: 3; }
.ba-tag-after { right: 16px; }
.ba-tag-before { left: 16px; }
.ba-slider { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: ew-resize; z-index: 4; }
.ba-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 1px; opacity: 0; }
.ba-slider::-moz-range-thumb { width: 1px; height: 1px; opacity: 0; border: none; }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); pointer-events: none; z-index: 5; }
/* Pulsing ring invites visitors to drag the comparison slider. */
.ba-handle:before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--white); z-index: -1; animation: pulseRing 2.6s ease-out infinite; }

/* ---------- Why choose ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; max-width: 900px; margin: 0 auto; }
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-check {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 14px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cyan) 35%, transparent);
  animation: checkGlow 3.4s ease-in-out infinite;
}
.why-item:nth-child(2n) .why-check { animation-delay: 1.1s; }
.why-item:nth-child(3n) .why-check { animation-delay: 2.2s; }
@keyframes checkGlow {
  0%, 100% { box-shadow: 0 6px 14px color-mix(in srgb, var(--cyan) 35%, transparent); }
  50% { box-shadow: 0 6px 24px color-mix(in srgb, var(--cyan) 65%, transparent); }
}
.why-item h4 { font-size: 16px; margin-bottom: 2px; }
.why-item p { color: var(--text-muted); font-size: 14px; }

/* ---------- Areas ---------- */
.areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.area-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.area-card:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--navy));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.area-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--cyan-light); }
.area-card:hover:before { transform: scaleX(1); }
.area-city { font-family: var(--font-heading); font-weight: var(--fw-semi); font-size: 17px; }
.area-state { color: var(--text-muted); font-size: 13px; }
.area-link { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--cyan-deep); }
.area-link svg { width: 14px; height: 14px; transition: transform .2s; }
.area-card:hover .area-link svg { transform: translateX(4px); }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s;
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.review-quote {
  position: absolute; top: -16px; left: 24px; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--navy)); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 24px; font-weight: var(--fw-bold); line-height: 1;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cyan) 40%, transparent);
  animation: iconBob 6s ease-in-out infinite;
}
.review-card:nth-child(2) .review-quote { animation-delay: 1s; }
.review-card:nth-child(3) .review-quote { animation-delay: 2s; }
.review-stars { background: linear-gradient(90deg, #f5b301, #ffd257); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 16px; margin-bottom: 12px; margin-top: 8px; letter-spacing: 2px; }
.review-card p.review-text { color: var(--text); font-size: 14.5px; margin-bottom: 18px; font-style: italic; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--navy)); }
.review-author strong { font-size: 14px; display: block; }
.review-author span { font-size: 12.5px; color: var(--text-muted); }
.review-tag { display: inline-block; margin-top: 14px; font-size: 11px; color: var(--text-muted); background: var(--surface-alt); padding: 3px 10px; border-radius: 100px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; font-weight: var(--fw-semi); font-size: 15.5px; cursor: pointer; }
.faq-q .plus { font-size: 22px; color: var(--cyan-deep); transition: transform .25s; flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 24px 20px; color: var(--text-muted); font-size: 14.5px; }
.faq-a a { color: var(--cyan-deep); font-weight: var(--fw-semi); }

/* ---------- Final CTA ---------- */
.final-cta { position: relative; background: linear-gradient(135deg, var(--navy), var(--navy-deep) 60%, var(--cyan-deep)); color: var(--white); text-align: center; padding: 104px 24px; overflow: hidden; }
.final-cta h2 { font-size: var(--fs-h2); max-width: 700px; margin: 0 auto 28px; }

/* ---------- Water accents: light orbs inside dark sections ---------- */
.water-accents { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.water-accents .orb { position: absolute; border-radius: 50%; filter: blur(55px); mix-blend-mode: screen; opacity: .5; }
.water-accents .orb-a { width: 260px; height: 260px; background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); top: -60px; left: -40px; animation: floatA 16s ease-in-out infinite; }
.water-accents .orb-b { width: 200px; height: 200px; background: radial-gradient(circle, var(--cyan-light) 0%, transparent 70%); bottom: -50px; right: -30px; animation: floatB 18s ease-in-out infinite; }
.final-cta .container, .video-section .container { position: relative; z-index: 2; }
/* Light-section variant: same drifting orbs, tuned for white/alt backgrounds. */
.water-accents--light .orb { mix-blend-mode: normal; opacity: .16; filter: blur(65px); }
.why .container { position: relative; z-index: 2; }

/* ---------- Video section (dark, aquatic; renders only if site.videoUrl) --- */
.video-section { position: relative; overflow: hidden; padding: 104px 0; }
.eyebrow--on-dark { color: var(--cyan-light); background: color-mix(in srgb, var(--white) 14%, transparent); }
.video-frame { max-width: 900px; margin: 0 auto; }
.video-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 20px;
  background: linear-gradient(160deg, var(--navy), var(--cyan-deep));
  box-shadow: var(--shadow-lg);
}
.video-thumb { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s ease, transform .4s ease; }
.video-facade:hover .video-thumb, .video-facade:focus-visible .video-thumb { opacity: 1; transform: scale(1.03); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 92%, white); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--navy) 45%, transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.video-play svg { margin-left: 4px; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.09); }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* "Coming soon" placeholder mode — aquatic frame, no external requests. */
.video-facade.is-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: default; }
.video-facade.is-placeholder:before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, color-mix(in srgb, var(--white) 4%, transparent) 0 2px, transparent 2px 38px);
}
.video-facade.is-placeholder:after {
  content: ''; position: absolute; width: 60%; height: 60%; top: -20%; left: -10%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 35%, transparent), transparent 70%);
  filter: blur(50px); pointer-events: none;
}
.video-facade.is-placeholder .video-play { position: static; transform: none; animation: playFloat 4.5s ease-in-out infinite; }
.video-facade.is-placeholder:hover .video-play, .video-facade.is-placeholder:focus-visible .video-play { transform: none; }
.video-soon {
  position: relative; font-family: var(--font-heading); font-weight: var(--fw-semi);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 85%, transparent);
}
@keyframes playFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Quote form ---------- */
.all-areas { position: relative; text-align: center; padding: 96px 0 50px; }
.all-areas a { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); color: var(--cyan-deep); font-size: 15px; }
.all-areas a svg { width: 16px; height: 16px; transition: transform .2s; }
.all-areas a:hover svg { transform: translateX(4px); }
.quote-wrap {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0;
  background: var(--surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg);
  max-width: 1040px; margin: 0 auto;
}
.quote-side { background: linear-gradient(160deg, var(--navy), var(--navy-deep) 70%, var(--cyan-deep)); color: var(--white); padding: 48px 40px; position: relative; }
.quote-side .ribbon { display: inline-block; background: var(--cyan); color: var(--navy); font-weight: 800; font-size: 13px; letter-spacing: .03em; padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; }
.quote-side h3 { font-size: 26px; margin-bottom: 14px; }
.quote-side p { color: color-mix(in srgb, var(--white) 85%, transparent); font-size: 14.5px; margin-bottom: 26px; }
.quote-side ul li { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 12px; color: color-mix(in srgb, var(--white) 90%, transparent); }
.quote-side ul li:before { content: '✓'; color: var(--cyan-light); font-weight: var(--fw-bold); }
.quote-form { padding: 48px 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12.5px; font-weight: var(--fw-semi); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14.5px;
  font-family: inherit; color: var(--text); transition: border-color .2s, box-shadow .2s; background: var(--surface);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 15%, transparent);
}
.submit-btn {
  width: 100%; background: linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color: var(--navy);
  font-weight: var(--fw-bold); font-size: 15.5px; padding: 15px; border-radius: 12px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--cyan) 35%, transparent); transition: transform .2s;
}
.submit-btn:hover { transform: translateY(-2px); }
.submit-btn[disabled] { opacity: .6; cursor: default; transform: none; }
/* Honeypot: kept in the DOM for bots, moved fully off-screen for people. */
.hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Inline error notice — brand tokens only (cyan-tinted, navy text). */
.form-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: var(--fw-semi); color: var(--navy); background: color-mix(in srgb, var(--cyan) 12%, white); border: 1px solid color-mix(in srgb, var(--cyan) 30%, white); }
.form-error[hidden] { display: none; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.show { display: block; }
.form-success .check {
  width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--navy));
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 28px; margin: 0 auto 16px;
}

/* ---------- Footer ---------- */
footer { position: relative; background: var(--navy); color: color-mix(in srgb, var(--white) 75%, transparent); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 36px; margin-bottom: 48px; }
.footer-brand .logo { color: var(--white); margin-bottom: 14px; }
.footer-brand .logo-word { color: var(--white); }
.footer-brand p { font-size: 14px; color: color-mix(in srgb, var(--white) 60%, transparent); max-width: 280px; margin-bottom: 18px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--white) 8%, transparent);
  display: flex; align-items: center; justify-content: center; transition: background .2s;
  animation: footerFloat 2.8s ease-in-out infinite;
}
.footer-social a:nth-child(2) { animation-delay: .5s; }
.footer-social a:nth-child(3) { animation-delay: 1s; }
.footer-social a:hover { background: var(--cyan); color: var(--navy); animation-play-state: paused; }
footer h4 { color: var(--white); font-size: 15px; margin-bottom: 18px; }
/* Footer links float like objects on water — staggered so they don't move in
   unison. transform doesn't affect clickability (the hit area floats along),
   and hovering pauses the bob so aiming is effortless. */
footer ul li { margin-bottom: 10px; animation: footerFloat 3s ease-in-out infinite; }
footer ul li:nth-child(2) { animation-delay: .4s; }
footer ul li:nth-child(3) { animation-delay: .8s; }
footer ul li:nth-child(4) { animation-delay: 1.2s; }
footer ul li:nth-child(5) { animation-delay: 1.6s; }
footer ul li:nth-child(6) { animation-delay: 2s; }
footer ul li:hover { animation-play-state: paused; }
@keyframes footerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
footer ul li a { font-size: 14px; color: color-mix(in srgb, var(--white) 65%, transparent); transition: color .2s; }
footer ul li a:hover { color: var(--cyan-light); }
.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: color-mix(in srgb, var(--white) 50%, transparent);
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 300;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.5);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.08); }
/* Per client: no pulsing ring on the chat button — steady is friendlier for
   the mostly text-message-first US audience. (pulseRing is still used by the
   before/after handle below.) */
@keyframes pulseRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Focus visibility (keyboard) — meets AA, doesn't affect mouse --- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.area-card:focus-visible, .blog-card:focus-visible, .video-facade:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 10px;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card .blog-date { font-size: 12.5px; color: var(--text-muted); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .03em; }
.blog-card h3 { font-size: 18px; }
.blog-card p { color: var(--text-muted); font-size: 14.5px; }
.blog-card .read-more { margin-top: auto; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--cyan-deep); }
.blog-post-header { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.blog-post-header .blog-date { color: var(--text-muted); font-size: 13.5px; font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; display: block; }
.blog-post-header h1 { font-size: var(--fs-h2); }
.blog-post-body { max-width: 720px; margin: 0 auto; font-size: 16.5px; color: var(--text); }
.blog-post-body h2 { font-size: 22px; margin: 32px 0 14px; }
.blog-post-body h3 { font-size: 18px; margin: 24px 0 10px; }
.blog-post-body p { margin-bottom: 18px; color: var(--text); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 18px 22px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a { color: var(--cyan-deep); font-weight: var(--fw-semi); }

/* ---------- Simple policy page ---------- */
.policy-body { max-width: 760px; margin: 0 auto; font-size: 16px; color: var(--text); }
.policy-body h2 { font-size: 20px; margin: 32px 0 12px; }
.policy-body p { margin-bottom: 16px; color: var(--text-muted); }
.policy-body ul { margin: 0 0 16px 20px; }
.policy-body li { margin-bottom: 8px; color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid, .blog-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .quote-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  nav.main-nav {
    position: fixed; top: 0; right: -100%; width: 78%; height: 100vh; background: var(--white);
    flex-direction: column; padding: 100px 32px 32px; transition: right .3s ease; box-shadow: -10px 0 40px rgba(0,0,0,.15);
  }
  nav.main-nav.open { right: 0; }
  nav.main-nav ul { flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
  nav.main-nav .btn-nav { width: 100%; text-align: center; }
  .menu-toggle { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 70px 0 120px; }
  .section { padding: 60px 0; }
  .quote-side, .quote-form { padding: 34px 26px; }
  .stat-strip { grid-template-columns: 1fr 1fr; margin-top: -40px; gap: 10px; }
  .stat-card { padding: 16px 10px; }
  .stat-card .num { font-size: 21px; }
  /* Slightly smaller waves + FAB so the floating button never crowds content. */
  .hero-waves { height: 80px; }
  .video-section, .final-cta { padding: 80px 0; }
  .whatsapp-float { bottom: 18px; right: 18px; width: 54px; height: 54px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  /* Fewer ambient bubbles + shorter dividers on small screens (perf + air). */
  .ambient-bubbles .bubble:nth-child(2n) { display: none; }
  .wave-divider svg { height: 36px; }
}

/* ---------- Legacy fallback: browsers WITHOUT color-mix() ---------------- */
/* On very old browsers (pre-2023), any property using color-mix() is dropped
   entirely — which could leave white text on white. This block restores a
   clean, readable, on-brand experience there: solid token colors, decorative
   layers hidden. Modern browsers never apply any of this. */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  header { background: var(--white); }
  .hero, .final-cta, .coupon-bar, .quote-side, .sec-navy { background: var(--navy); }
  .sec-blue { background: var(--cyan); }
  .hero-overlay { background: var(--navy); opacity: .8; }
  footer { color: var(--white); }
  footer ul li a, .footer-brand p, .footer-bottom, .coupon-bar strong,
  .breadcrumb, .breadcrumb a, .hero p.sub { color: var(--white); }
  .btn-primary, .submit-btn, .video-play, .why-check { background: var(--cyan); box-shadow: none; }
  .btn-nav { background: var(--navy); box-shadow: none; }
  .grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--cyan); animation: none; }
  .stat-card { background: var(--white); border-color: var(--surface-alt); }
  .stat-card .num { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--navy); }
  .service-card, .area-card, .review-card, .blog-card, .faq-item,
  .form-group input, .form-group select, .form-group textarea { border-color: var(--surface-alt); }
  .video-facade { background: var(--navy); }
  .ba-after { background: var(--cyan); }
  .ba-tag { background: var(--navy); }
  .eyebrow { background: var(--surface-alt); }
  .badge { background: var(--navy); border-color: var(--white); }
  .hero-orb, .bubbles, .ambient-bubbles, .water-accents,
  .wave-layer--back, .wave-layer--mid { display: none; }
}

/* ---------- Respect reduced-motion: freeze all animation, keep content ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-orb, .bubble, .wave-layer, .water-accents .orb,
  .wave-divider-track, .service-icon, .ba-handle:before,
  footer ul li, .footer-social a { animation: none !important; }
  .ambient-bubbles { display: none !important; }
}