/* =========================================================
   Sundays Pools, v2 (pool-native rebuild)

   Palette is pixel-sampled from Colors + Logos.png.
   Four tokens only. No invented colors.

   Mobile-first. 375px is the base layout.
   ========================================================= */

:root {
  /* Palette, pixel-sampled */
  --navy: #1A2E4C;
  --navy-deep: #0F1E34;
  --navy-2: #243655;
  --sage: #6FA3A5;
  --sage-soft: #A4C1C3;
  --stone: #E7DED2;
  --stone-soft: #F0E8DE;
  --cream: #F5F2EC;
  --paper: #F5F2EC;

  /* Text */
  --ink: var(--navy-deep);
  --ink-soft: #3A4A66;
  --rule: rgba(15, 30, 52, 0.12);
  --rule-light: rgba(246, 241, 237, 0.18);

  /* Type */
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --script: 'Allura', cursive;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15, 30, 52, 0.08);
  --sh-2: 0 6px 20px rgba(15, 30, 52, 0.10);
  --sh-3: 0 14px 40px rgba(15, 30, 52, 0.16);

  /* Layout */
  --wrap: 1200px;
  --gutter: 20px;

  /* Sticky chrome heights, used by morphing nav */
  --topbar-height: 48px;
}
@media (max-width: 560px) {
  :root { --topbar-height: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.placeholder-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(245,242,236,0.9);
  background: rgba(15,30,52,0.6);
  padding: 3px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em; line-height: 1;
  text-align: center; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease,
              color .2s ease, padding .25s ease;
}

/* On-Time style reveal arrow, appears on hover, shifts content left */
.btn::after {
  content: "→";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: max-width .25s ease, opacity .2s ease, transform .25s ease, margin-left .25s ease;
  font-size: 17px;
  line-height: 1;
  margin-left: 0;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); padding-right: 32px; }
.btn:hover::after { max-width: 1em; opacity: 1; transform: translateX(0); margin-left: 4px; }
.btn:active { transform: translateY(0); }

/* Buttons that already contain an icon (phone calls) skip the reveal arrow */
.btn:has(.btn__phone-icon)::after,
.btn:has(.topbar__icon)::after,
.btn--no-arrow::after { display: none; }
.btn--no-arrow:hover { padding-right: 22px; }

.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--lg:hover { padding-right: 44px; }
.btn--lg:hover::after { font-size: 20px; }

.btn--cta { background: var(--navy); color: var(--cream); }
.btn--cta:hover { background: var(--navy-2); }

.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-2); }

.btn--sage { background: var(--sage); color: var(--navy-deep); }
.btn--sage:hover { background: var(--sage-soft); }

.btn--navy-outline {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.btn--navy-outline:hover {
  background: var(--navy); color: var(--cream);
  box-shadow: inset 0 0 0 2px var(--navy), var(--sh-2);
}

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: rgba(15,30,52,0.08); box-shadow: none; }

.btn--ghost-light {
  background: rgba(246,241,237,0.08); color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(246,241,237,0.5);
}
.btn--ghost-light:hover {
  background: rgba(246,241,237,0.14);
  box-shadow: inset 0 0 0 1.5px rgba(246,241,237,0.5), 0 4px 12px rgba(0,0,0,0.18);
}

.btn__phone-icon { font-size: 18px; }

/* =========================================================
   Sticky top bar
   ========================================================= */

.topbar {
  position: relative; z-index: 50;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px;
  background: var(--navy-deep); color: var(--cream);
  padding: 10px 16px;
  font-size: 14px; font-weight: 500;
}
.topbar__phone, .topbar__text, .topbar__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill);
  transition: background .2s; white-space: nowrap;
}
.topbar__phone:hover, .topbar__text:hover { background: rgba(246,241,237,0.08); }
.topbar__icon { font-size: 16px; }
.topbar__label { font-weight: 600; }
.topbar__value { font-family: var(--mono); font-size: 13px; }
.topbar__cta { background: var(--sage); color: var(--navy-deep); font-weight: 700; padding: 10px 16px; }
.topbar__cta:hover { background: var(--sage-soft); }
@media (max-width: 560px) {
  .topbar__label { display: none; }
  .topbar__value { font-size: 12px; }
  .topbar { padding: 8px 12px; }
}

/* =========================================================
   Header
   ========================================================= */

/* Morphing nav driven by --scroll-progress (set on :root by script.js).
   --scroll-progress runs from 0 at the top of the page to 1 after the user has
   scrolled past --scroll-morph-range. Every morphing value is a calc() against
   that variable, so the nav slides gradually with the scroll instead of snapping
   at a threshold. No CSS transition is needed: the variable change every frame
   IS the animation. */

.site-header {
  position: sticky;
  /* Topbar is normal-flow above this header. Once the topbar scrolls
     out of view, the header arrives at the viewport top and pins. */
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;

  /* width and padding shrink continuously */
  max-width: calc(var(--wrap) - (var(--wrap) - 760px) * var(--scroll-progress, 0));
  padding-top:    calc(18px - 10px * var(--scroll-progress, 0));
  padding-bottom: calc(18px - 10px * var(--scroll-progress, 0));
  padding-left:   calc(var(--gutter) - 2px * var(--scroll-progress, 0));
  padding-right:  calc(var(--gutter) - 2px * var(--scroll-progress, 0));
  margin: calc(8px * var(--scroll-progress, 0)) auto 0;

  /* surface morphs from solid cream into a frosted pill */
  background-color: rgba(245, 242, 236, calc(1 - 0.18 * var(--scroll-progress, 0)));
  border-radius: calc(999px * var(--scroll-progress, 0));
  box-shadow:
    0 calc(6px * var(--scroll-progress, 0)) calc(28px * var(--scroll-progress, 0)) rgba(15, 30, 52, calc(0.14 * var(--scroll-progress, 0))),
    0 0 0 calc(1px * var(--scroll-progress, 0)) rgba(15, 30, 52, 0.06);
  -webkit-backdrop-filter: blur(calc(16px * var(--scroll-progress, 0))) saturate(calc(1 + 0.3 * var(--scroll-progress, 0)));
  backdrop-filter: blur(calc(16px * var(--scroll-progress, 0))) saturate(calc(1 + 0.3 * var(--scroll-progress, 0)));

  will-change: max-width, padding, top;
}

/* Layout: logo at left, nav floats to center via auto margins, CTA + toggle hug the right.
   Auto margins recalculate every frame as max-width changes, so children glide together
   instead of jumping the way grid-template-columns would. */
.site-header > .logo { flex-shrink: 0; margin-right: calc(24px - 8px * var(--scroll-progress, 0)); }
.site-header > .nav { margin-left: auto; margin-right: auto; }
.site-header > .nav__cta { flex-shrink: 0; margin-left: auto; }
.site-header > .nav__toggle { flex-shrink: 0; margin-left: 12px; }

/* Children scale down with the same progress variable. */
.site-header .logo__svg {
  height: calc(64px - 18px * var(--scroll-progress, 0));
}
@media (min-width: 540px) {
  .site-header .logo__svg { height: calc(76px - 26px * var(--scroll-progress, 0)); }
}
@media (min-width: 900px) {
  .site-header .logo__svg { height: calc(88px - 34px * var(--scroll-progress, 0)); }
}
.site-header .nav {
  gap: calc(24px - 6px * var(--scroll-progress, 0));
  font-size: calc(14px - 1px * var(--scroll-progress, 0));
}
.site-header .nav__dropdown-toggle {
  font-size: calc(14px - 1px * var(--scroll-progress, 0));
}
.site-header .nav__cta {
  font-size: calc(14px - 1px * var(--scroll-progress, 0));
  padding-top:    calc(10px - 2px * var(--scroll-progress, 0));
  padding-bottom: calc(10px - 2px * var(--scroll-progress, 0));
  padding-left:   calc(16px - 2px * var(--scroll-progress, 0));
  padding-right:  calc(16px - 2px * var(--scroll-progress, 0));
}
.logo { display: inline-flex; align-items: center; color: var(--navy-deep); transition: transform 0.18s ease; }
.logo:hover { transform: scale(1.03); }
/* Mobile-first: default to smaller logo, scale up on larger screens */
.logo__svg { width: auto; height: 64px; display: block; color: inherit; }
.logo--light { color: var(--cream); }
@media (min-width: 540px) { .logo__svg { height: 76px; } }
@media (min-width: 900px) { .logo__svg { height: 88px; } }

.nav { display: none; gap: 24px; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; }
.nav a { color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; text-decoration: none; }
.nav a:hover { border-color: var(--navy-deep); }
.nav__cta { display: none; }
.nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: var(--r-sm); }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--navy-deep); }

/* Services dropdown */
.nav__has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav__dropdown-toggle {
  background: transparent; border: 0; padding: 8px 0;
  color: var(--ink); font-family: inherit;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.nav__dropdown-toggle:hover,
.nav__has-dropdown:hover .nav__dropdown-toggle,
.nav__dropdown-toggle.is-active {
  border-bottom-color: var(--navy-deep);
}
.nav__chev {
  transition: transform .18s ease;
  flex-shrink: 0;
}
.nav__has-dropdown:hover .nav__chev,
.nav__dropdown-toggle[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}
.nav__dropdown {
  list-style: none; padding: 8px; margin: 0;
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 30, 52, 0.06);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 50;
}
.nav__has-dropdown:hover .nav__dropdown,
.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(2px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav__dropdown li { margin: 0; padding: 0; }
.nav__dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 14px;
  border-bottom: 0 !important;
  white-space: nowrap;
}
.nav__dropdown li a:hover {
  background: var(--stone-soft);
  border-color: transparent;
}
.nav__dropdown li a.is-active {
  background: var(--stone);
  font-weight: 700;
}

@media (min-width: 960px) {
  .nav { display: inline-flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Mobile menu (when nav is open via toggle): dropdown expands inline */
@media (max-width: 959px) {
  .nav.is-open .nav__has-dropdown {
    flex-direction: column; align-items: stretch;
  }
  .nav.is-open .nav__dropdown-toggle {
    width: 100%; justify-content: space-between;
    padding: 8px 0;
  }
  .nav.is-open .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 16px;
    min-width: 0;
    transition: none;
    border-left: 2px solid var(--stone);
    margin-top: 4px;
  }
  .nav.is-open .nav__dropdown li a {
    padding: 8px 12px;
    border-radius: var(--r-sm);
  }
}

/* =========================================================
   2. HERO (water photography)
   ========================================================= */

.hero {
  position: relative;
  padding: 72px var(--gutter) 88px;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  min-height: 520px;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('img/pool-screened-3.jpg');
  background-size: cover;
  background-position: center;
}
.hero__water { display: none; }
.hero__ripples { display: none; }
/* Mobile: solid darkening overlay so text on top of photo stays legible */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,30,52,0.65) 0%, rgba(15,30,52,0.78) 100%);
}
/* Desktop: split look. Solid navy on the left fading to transparent on the right
   so the pool photo shows through the right side and stays muted on the left. */
@media (min-width: 900px) {
  .hero__scrim {
    background: linear-gradient(
      to right,
      rgba(15,30,52,0.95) 0%,
      rgba(15,30,52,0.92) 35%,
      rgba(15,30,52,0.55) 60%,
      rgba(15,30,52,0.20) 100%
    );
  }
}
.hero__inner {
  max-width: var(--wrap); margin: 0 auto;
  text-align: center; position: relative;
}
/* Desktop split: text shifts left so the right side of the hero shows the pool. */
@media (min-width: 900px) {
  .hero__inner { text-align: left; max-width: 1080px; }
  .hero__inner > * { margin-left: 0; max-width: 560px; }
  .hero__zipcheck { margin-left: 0; }
  .hero__ctas { justify-content: flex-start; }
}
.hero__eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 20px;
}
.hero__headline {
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero__script {
  display: block;
  font-family: var(--script);
  font-weight: 400;
  color: var(--sage-soft);
  font-size: 1.1em;
  line-height: 1;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.hero__sub {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: rgba(246,241,237,0.85);
  max-width: 620px; margin: 0 auto 28px;
}

/* ZIP check (mobile-first: stacked input + button with 48px touch targets) */
.hero__zipcheck {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 100%; margin: 0 auto 20px;
  padding: 8px; border-radius: var(--r-md);
  background: rgba(246,241,237,0.08);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(246,241,237,0.18);
  width: 100%;
}
.hero__zipcheck input {
  border: 0; outline: none;
  background: rgba(246,241,237,0.10); color: var(--cream);
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  text-align: center;
  letter-spacing: 0.05em;
  min-height: 48px;
  width: 100%;
}
.hero__zipcheck input::placeholder {
  color: rgba(246,241,237,0.55);
  font-weight: 500;
  letter-spacing: 0;
}
.hero__zipcheck input:focus {
  background: rgba(246,241,237,0.16);
  box-shadow: inset 0 0 0 2px var(--sage);
}
.hero__zipcheck .btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  min-height: 48px;
  border-radius: var(--r-sm);
  justify-content: center;
}

/* Desktop and up: switch to side-by-side pill layout */
@media (min-width: 540px) {
  .hero__zipcheck {
    flex-direction: row;
    gap: 8px;
    padding: 6px;
    border-radius: var(--r-pill);
    max-width: 440px;
  }
  .hero__zipcheck input {
    flex: 1;
    background: transparent;
    text-align: left;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    width: auto;
    min-height: 0;
    letter-spacing: 0;
  }
  .hero__zipcheck input:focus { background: rgba(246,241,237,0.10); box-shadow: none; }
  .hero__zipcheck .btn {
    width: auto;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    min-height: 0;
  }
}

/* ZIP coverage-check result banner */
.hero__zipresult {
  max-width: 440px;
  margin: -12px auto 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
  min-height: 0;
  border-radius: var(--r-sm);
  transition: padding .2s ease, background .2s ease, min-height .2s ease;
  text-align: center;
}
.hero__zipresult:empty { display: none; }
.hero__zipresult.is-covered,
.hero__zipresult.is-not-covered,
.hero__zipresult.is-invalid {
  padding: 10px 14px;
  background: rgba(246, 241, 237, 0.10);
  border: 1px solid rgba(246, 241, 237, 0.22);
  min-height: 40px;
}
.hero__zipresult.is-covered {
  background: rgba(111, 163, 165, 0.22);
  border-color: rgba(111, 163, 165, 0.55);
  color: var(--cream);
}
.hero__zipresult.is-not-covered {
  background: rgba(248, 71, 94, 0.15);
  border-color: rgba(248, 71, 94, 0.45);
}
.hero__zipresult.is-invalid {
  background: rgba(248, 71, 94, 0.10);
  border-color: rgba(248, 71, 94, 0.30);
}
.hero__zipresult strong { color: var(--cream); font-weight: 800; }
.hero__zipresult a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.hero__zipresult-icon {
  display: inline-block;
  width: 18px; height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--navy-deep);
  font-weight: 800; font-size: 11px;
  text-align: center;
  margin-right: 4px;
  vertical-align: middle;
}

.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 22px;
}
.hero__trust {
  font-size: 13px; color: rgba(246,241,237,0.7);
  letter-spacing: 0.02em;
  font-family: var(--mono);
}

/* =========================================================
   3. Trust strip
   ========================================================= */

.trust {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: center;
  padding: 24px var(--gutter);
  background: var(--paper);
  max-width: var(--wrap); margin: -30px auto 0;
  border-radius: var(--r-lg);
  position: relative; z-index: 1;
  box-shadow: var(--sh-2);
}
.trust__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 4px 8px; text-align: center;
}
.trust__item--license .trust__value { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.trust__value--mono { font-family: var(--mono); }
.trust__label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.trust__value {
  font-weight: 700; font-size: 13px; color: var(--navy-deep);
}
.trust__stars { color: var(--sage); letter-spacing: 2px; font-size: 14px; }
.trust__divider { width: 1px; height: 28px; background: var(--rule); }
@media (max-width: 700px) {
  .trust__divider { display: none; }
  .trust { margin-top: -18px; border-radius: var(--r-md); padding: 18px var(--gutter); }
}

/* =========================================================
   Section head
   ========================================================= */

.section__head {
  max-width: 720px; margin: 0 auto 40px; text-align: center;
  padding: 0 var(--gutter);
}
.section__eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 12px;
}
.section__title {
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 800;
  margin-bottom: 12px;
}
.section__sub {
  font-size: 17px; color: var(--ink-soft); line-height: 1.55;
}

/* =========================================================
   4. 10-POINT CHECKLIST
   ========================================================= */

.checklist { padding: 88px 0; background: var(--cream); }
.check-list {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter);
  counter-reset: checkitem;
}
.check-item {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 24px 20px; background: var(--paper);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .2s, box-shadow .25s;
  position: relative;
  border-left: 3px solid var(--sage);
}
.check-item:hover { transform: translateX(2px); box-shadow: var(--sh-2); }
.check-item__num {
  font-family: var(--mono); font-weight: 700; font-size: 20px;
  color: var(--sage); align-self: start;
  padding-top: 2px;
  letter-spacing: -0.02em;
}
.check-item h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.check-item p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
@media (min-width: 720px) {
  .check-list { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   5. VISIT REPORT preview (THE pool-native signature)
   ========================================================= */

.report {
  padding: 96px 0;
  background: var(--navy-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.report::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(111,163,165,0.15), transparent 60%),
    radial-gradient(600px 300px at 90% 90%, rgba(111,163,165,0.08), transparent 70%);
  pointer-events: none;
}
.report__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 48px;
  padding: 0 var(--gutter);
  align-items: center;
  position: relative;
}
.report__copy .section__eyebrow { color: var(--sage); text-align: left; }
.report__title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 18px;
}
.report__lede {
  font-size: 18px; color: rgba(246,241,237,0.85); line-height: 1.6;
  margin-bottom: 22px;
}
.report__bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.report__bullets li {
  padding-left: 26px; position: relative;
  color: rgba(246,241,237,0.9); font-size: 15px; line-height: 1.5;
}
.report__bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sage);
  box-shadow: inset 0 0 0 3px var(--navy-deep);
}
.report__foot { font-style: italic; color: var(--sage-soft); font-size: 15px; }

/* The mocked email card */
.report__card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(15,30,52,0.05);
  margin: 0;
  max-width: 460px;
  justify-self: center;
  width: 100%;
}

/* Mouse-following 3D tilt (any element with [data-tilt]) */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
  will-change: transform;
}
[data-tilt].is-tilting {
  transition: box-shadow 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; transition: none; }
}
.report__card-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.report__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: 0.05em;
}
.report__from-name { font-size: 14px; font-weight: 700; }
.report__from-addr { font-size: 12px; color: var(--ink-soft); font-family: var(--mono); }
.report__time { font-size: 12px; color: var(--ink-soft); font-family: var(--mono); }
.report__subj { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

.report__photo {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); margin-bottom: 16px;
  background-image: url('img/pool.jpg');
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15,30,52,0.1);
}

.report__chem { margin-bottom: 16px; }
.report__chem-label, .report__tasks-label, .report__dose-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.report__chem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--cream); padding: 12px; border-radius: var(--r-md);
}
.chem { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.chem__name { font-size: 10px; color: var(--ink-soft); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.chem__val { font-size: 18px; font-weight: 800; color: var(--navy-deep); line-height: 1; }
.chem__unit { font-size: 10px; color: var(--ink-soft); }
.report__status { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--sage); }
.report__check { color: var(--sage); font-weight: 800; margin-left: 2px; }

.report__tasks, .report__dose { margin-bottom: 14px; }
.report__tasks ul, .report__dose ul { display: flex; flex-direction: column; gap: 4px; }
.report__tasks li, .report__dose li {
  font-size: 13px; padding-left: 18px; position: relative;
  color: var(--ink); line-height: 1.45;
}
.report__tasks li::before {
  content: "✓"; position: absolute; left: 0; color: var(--sage);
  font-weight: 800;
}
.report__dose li::before {
  content: "+"; position: absolute; left: 0; color: var(--navy);
  font-weight: 800;
}
.report__sig {
  padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-soft);
  font-family: var(--mono);
}

@media (min-width: 900px) {
  .report__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* =========================================================
   6. SERVICES, photo tiles
   ========================================================= */

.services { padding: 96px 0; }
.services__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
.tile {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .2s, box-shadow .25s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.tile__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
}
.tile--weekly .tile__photo {
  background-image: url('img/pool-clean.jpg');
  background-size: cover; background-position: center;
}
.tile--green .tile__photo {
  background: linear-gradient(180deg, rgba(15,30,52,0.15), rgba(15,30,52,0.5)),
              radial-gradient(circle at 50% 50%, #5B8447, #3F6331 70%, #263D1D);
}
.tile--repairs .tile__photo {
  background-image: url('img/pump-repair.jpg');
  background-size: cover; background-position: center 70%;
}
.tile--installs .tile__photo {
  background-image: url('img/system-rebuild.jpg');
  background-size: cover; background-position: center 70%;
}
.tile__body {
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.tile__title {
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
}
.tile__copy {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.tile__link {
  margin-top: auto; padding-top: 10px;
  font-weight: 600; font-size: 14px; color: var(--navy);
}
@media (min-width: 720px) { .services__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   7. GREEN TO CLEAN block
   ========================================================= */

.g2c { padding: 96px 0; background: var(--stone); }
.g2c__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding: 0 var(--gutter); align-items: center;
}
.g2c__ba-frame {
  position: relative; margin: 0;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--navy-deep);
}
.g2c__before, .g2c__after {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
}
.g2c__before {
  background: linear-gradient(135deg, #4a6b3a, #2d4322);
}
.g2c__after {
  background: linear-gradient(135deg, #6FA3A5, #2D5673);
}
.g2c__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(15,30,52,0.85); color: var(--cream);
}
.g2c__tag--after { background: var(--cream); color: var(--navy-deep); }
.g2c__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(15,30,52,0.9), transparent);
  color: var(--cream);
  padding: 28px 18px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  font-family: var(--mono);
}
.g2c__days { color: var(--sage-soft); font-weight: 800; }

.g2c__copy .section__eyebrow { text-align: left; }
.g2c__title {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 16px;
}
.g2c__lede { font-size: 17px; line-height: 1.6; margin-bottom: 20px; color: var(--ink); }
.g2c__points {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;
}
.g2c__points li {
  padding-left: 24px; position: relative; font-size: 15px; line-height: 1.55;
}
.g2c__points li::before {
  content: "✓"; position: absolute; left: 0; color: var(--navy);
  font-weight: 800;
}
.g2c__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (min-width: 900px) {
  .g2c__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
  .g2c__before, .g2c__after { aspect-ratio: 1 / 1; }
  .g2c__ba-frame { display: grid; grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   8. STORY
   ========================================================= */

.story {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 96px var(--gutter); align-items: center;
}
.story__media { position: relative; }
.story__photo {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  background-image: url('img/sam-family.jpg');
  background-size: cover;
  background-position: center 30%;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-2);
}
.story__stamp {
  position: absolute; bottom: -14px; right: -10px;
  background: var(--navy-deep); color: var(--cream);
  padding: 16px 24px; border-radius: var(--r-pill);
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; box-shadow: var(--sh-2);
  transform: rotate(-4deg);
  border: 2px solid var(--sage);
}
.story__owner {
  position: absolute; top: -14px; left: -10px;
  margin: 0; display: flex; align-items: center; gap: 12px;
  background: var(--cream); color: var(--ink);
  padding: 8px 16px 8px 8px; border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  border: 2px solid var(--sage);
  transform: rotate(-2deg);
}
.story__owner img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  display: block;
  -webkit-user-drag: none; user-select: none;
}
.story__owner figcaption {
  display: flex; flex-direction: column; line-height: 1.1;
}
.story__owner-name {
  font-weight: 700; font-size: 14px; color: var(--navy-deep);
}
.story__owner-role {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px;
}
@media (min-width: 600px) {
  .story__owner img { width: 68px; height: 68px; }
  .story__owner-name { font-size: 15px; }
}
.story__stamp-script {
  font-family: var(--script); font-size: 26px; line-height: 1;
  margin-bottom: 2px; color: var(--sage-soft);
}
.story__stamp-plain { font-weight: 800; letter-spacing: 0.2em; font-size: 11px; }
.story__copy .section__title, .story__copy .section__eyebrow { text-align: left; }
.story__copy .section__head { text-align: left; padding: 0; }
.story__lede { font-size: 18px; line-height: 1.6; font-weight: 500; margin-bottom: 16px; }
.story__body { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }
.story__body:last-of-type { margin-bottom: 24px; }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 6fr; gap: 80px; } }

/* =========================================================
   9. SERVICE AREAS
   ========================================================= */

.areas { padding: 96px 0; background: var(--cream); }
.areas__head { max-width: var(--wrap); margin: 0 auto 40px; text-align: center; padding: 0 var(--gutter); }
.areas__head .section__title, .areas__head .section__eyebrow, .areas__head .section__sub { text-align: center; }
.areas__grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter);
  align-items: center;
}
.areas__map {
  background: var(--stone); border-radius: var(--r-lg);
  padding: 14px; box-shadow: var(--sh-1);
}
.areas__map svg { width: 100%; height: auto; }
.areas__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform .15s, box-shadow .2s;
  border-left: 3px solid var(--sage);
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.chip__city { font-weight: 800; font-size: 16px; color: var(--navy-deep); }
.chip__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

/* =========================================================
   Google Maps service-area embed
   ========================================================= */
.areas__map-wrap {
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
}
.areas__map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  border: 3px solid var(--sage);
  background: var(--stone);
}
.areas__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.areas__map-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .areas__map-frame { aspect-ratio: 4 / 3; }
}

/* On-map ZIP coverage checker */
.areas__zipcheck {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1.5px solid var(--sage);
  box-shadow: var(--sh-1);
}
.areas__zipcheck input {
  border: 0; outline: none;
  background: rgba(15, 30, 52, 0.05); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  text-align: center;
  letter-spacing: 0.05em;
  min-height: 48px;
  width: 100%;
}
.areas__zipcheck input::placeholder {
  color: var(--ink-soft); font-weight: 500; letter-spacing: 0;
}
.areas__zipcheck input:focus {
  background: var(--stone-soft);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.areas__zipcheck .btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  min-height: 48px;
  border-radius: var(--r-sm);
  justify-content: center;
}

@media (min-width: 540px) {
  .areas__zipcheck {
    flex-direction: row;
    gap: 8px;
    padding: 6px;
    border-radius: var(--r-pill);
    max-width: 520px;
  }
  .areas__zipcheck input {
    flex: 1;
    text-align: left;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    width: auto;
    min-height: 0;
    letter-spacing: 0;
  }
  .areas__zipcheck input:focus { box-shadow: none; }
  .areas__zipcheck .btn {
    width: auto;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    min-height: 0;
  }
}

/* Result message below the on-map ZIP form (light-theme variant) */
.areas__zipresult {
  max-width: 520px;
  margin: 12px auto 0;
  padding: 0;
  font-size: 14px; line-height: 1.5;
  color: var(--ink);
  min-height: 0;
  border-radius: var(--r-sm);
  transition: padding .2s ease, background .2s ease, min-height .2s ease;
  text-align: center;
}
.areas__zipresult:empty { display: none; }
.areas__zipresult.is-covered,
.areas__zipresult.is-not-covered,
.areas__zipresult.is-invalid {
  padding: 12px 16px;
  border: 1.5px solid;
  min-height: 44px;
}
.areas__zipresult.is-covered {
  background: rgba(111, 163, 165, 0.14);
  border-color: var(--sage);
  color: var(--navy-deep);
}
.areas__zipresult.is-not-covered {
  background: rgba(248, 71, 94, 0.08);
  border-color: rgba(248, 71, 94, 0.45);
  color: var(--ink);
}
.areas__zipresult.is-invalid {
  background: rgba(248, 71, 94, 0.06);
  border-color: rgba(248, 71, 94, 0.30);
  color: var(--ink);
}
.areas__zipresult strong { color: var(--navy-deep); font-weight: 800; }
.areas__zipresult a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.areas__zipresult .hero__zipresult-icon {
  background: var(--sage); color: var(--navy-deep);
}

/* =========================================================
   Service-area city cards (paired with the Google Maps embed above)
   ========================================================= */
.areas__cities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 560px) { .areas__cities { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .areas__cities { grid-template-columns: repeat(4, 1fr); } }

.city-card {
  position: relative;
  padding: 28px 22px 24px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border-top: 4px solid var(--sage);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.city-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(111, 163, 165, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(111, 163, 165, 0.10) 0%, transparent 40%);
  pointer-events: none;
}
.city-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-top-color: var(--navy);
}
.city-card__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sage);
  position: relative;
  z-index: 1;
}
.city-card__name {
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--navy-deep);
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.city-card__zips {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.city-card__tag {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  font-family: var(--mono);
  position: relative;
  z-index: 1;
}

.areas__cta {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.areas__cta a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 900px) { .areas__grid { grid-template-columns: 5fr 4fr; gap: 48px; } }

/* =========================================================
   10. REVIEWS
   ========================================================= */

.reviews { padding: 96px 0; }
.reviews__stars {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 12px;
  font-family: var(--mono);
}
.reviews__rating { font-size: 28px; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.02em; }
.reviews__star-row { color: var(--sage); letter-spacing: 3px; font-size: 18px; }
.reviews__from { color: var(--ink-soft); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 640px; margin: 0 auto; padding: 0 var(--gutter);
}

/* Sticky scroll stack. Each card pins at a top offset.
   Later cards in the DOM paint on top of earlier ones,
   so they visually stack as they slide into view. */
.reviews__grid .review {
  position: sticky;
  box-shadow: 0 8px 32px rgba(15, 30, 52, 0.08);
}

/* MOBILE: single column, every card pins at the same top offset
   so later cards fully cover earlier ones as they slide up. */
.reviews__grid .review { top: 72px; }

/* DESKTOP: 2x2 grid. All four cards share the same top offset.
   Cards 3 and 4 sit below cards 1 and 2 in their columns, so
   when they pin at the same y, they fully cover their column partner. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .reviews__grid .review { top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__grid .review { position: static; }
}
.review {
  background: var(--paper);
  padding: 22px 24px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  gap: 14px;
}
.review__head { display: flex; align-items: flex-start; gap: 14px; }
.review__avatar {
  position: relative;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-family: var(--sans);
  font-weight: 500; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  background: #5F6368;
  text-transform: uppercase;
}
.review__avatar[data-color="teal"]   { background: #5D9B9F; }
.review__avatar[data-color="olive"]  { background: #A48B5D; }
.review__avatar[data-color="green"]  { background: #2E7D3E; }
.review__avatar[data-color="purple"] { background: #7E57C2; }
.review__avatar[data-guide]::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #4285F4
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    no-repeat center / 10px 10px;
  box-shadow: 0 0 0 2px var(--paper);
}
.review__who { min-width: 0; flex: 1; }
.review__name {
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  color: #202124; line-height: 1.25;
}
.review__meta {
  font-family: var(--sans);
  font-size: 12px; color: #5F6368;
  margin-top: 2px;
}
.review__menu {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #5F6368;
  margin-top: 2px;
}
.review__stars-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: -2px;
}
.review__stars {
  color: #FBBC05;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 1;
}
.review__time {
  font-family: var(--sans);
  font-size: 13px;
  color: #5F6368;
}
.review__text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: #202124;
  font-style: normal;
}
.review__section {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 2px;
}
.review__section-label {
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  color: #202124;
}
.review__section-value {
  font-family: var(--sans);
  font-size: 14px;
  color: #202124;
}
.reviews__foot { text-align: center; margin-top: 32px; font-weight: 700; padding: 0 var(--gutter); }
.reviews__foot a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .reviews__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    max-width: 1000px;
  }
}

/* =========================================================
   11. GALLERY with tabs
   ========================================================= */

.gallery { padding: 96px 0; background: var(--navy-deep); color: var(--cream); }
.gallery .section__eyebrow { color: var(--sage-soft); }
.gallery__tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: var(--wrap); margin: 0 auto 28px; padding: 0 var(--gutter);
}
.gtab {
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cream);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(246,241,237,0.2);
  transition: background .15s, box-shadow .15s;
}
.gtab:hover { background: rgba(246,241,237,0.06); }
.gtab.is-on { background: var(--sage); color: var(--navy-deep); box-shadow: none; }

.gallery__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}

/* Single-photo work card */
.work {
  margin: 0; position: relative;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-1);
  transition: transform .2s, box-shadow .25s;
}
.work:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.work img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.work__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(to bottom, transparent, rgba(15,30,52,0.85));
  color: var(--cream);
}
.work__tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-soft);
}
.work__title {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
}

@media (min-width: 720px) { .gallery__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   12. SEASONAL slot
   ========================================================= */

.seasonal { padding: 88px var(--gutter); background: var(--stone); }
.seasonal__inner {
  max-width: 960px; margin: 0 auto; text-align: center;
}
.seasonal__eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--paper); margin-bottom: 16px;
  box-shadow: var(--sh-1);
}
.seasonal__title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 14px;
}
.seasonal__sub {
  font-size: 17px; color: var(--ink-soft); line-height: 1.6;
  max-width: 720px; margin: 0 auto 24px;
}
.seasonal__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* =========================================================
   13. THE SUNDAYS PROMISE
   ========================================================= */

.promise {
  padding: 96px var(--gutter);
  background:
    linear-gradient(rgba(15, 30, 52, 0.35), rgba(19, 64, 97, 0.55)),
    url('img/pool-clean.jpg') center / cover no-repeat fixed;
  position: relative;
}
/* Mobile: drop fixed attachment for performance (iOS hates it) */
@media (max-width: 900px) {
  .promise {
    background:
      linear-gradient(rgba(15, 30, 52, 0.40), rgba(19, 64, 97, 0.60)),
      url('img/pool-clean.jpg') center / cover no-repeat;
  }
}
.promise__inner {
  max-width: 860px; margin: 0 auto; text-align: center;
  padding: 56px 32px; border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(15,30,52,0.30), 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  border: 2px solid var(--sage);
  backdrop-filter: blur(2px);
}
.promise__badge {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 16px;
  padding: 5px 14px;
  background: var(--cream);
  border-radius: var(--r-pill);
}
.promise__headline {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 16px;
}
.promise__script {
  font-family: var(--script); font-weight: 400;
  color: var(--sage); font-size: 1.2em; line-height: 1;
}
.promise__sub {
  font-size: 17px; color: var(--ink-soft); line-height: 1.6;
  max-width: 580px; margin: 0 auto;
}

/* =========================================================
   14. INSTANT QUOTE wizard
   ========================================================= */

.quote { padding: 96px var(--gutter); background: var(--navy-deep); color: var(--cream); }
.quote__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.quote__eyebrow { color: var(--sage-soft); }
.quote__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 12px;
}
.quote__sub { color: rgba(246,241,237,0.8); font-size: 17px; margin-bottom: 36px; }

.wizard {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-xl); padding: 28px 20px 20px;
  text-align: left; box-shadow: var(--sh-3);
}
.wizard__head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.wizard__progress {
  flex: 1; height: 6px;
  background: var(--stone); border-radius: var(--r-pill); overflow: hidden;
}
.wizard__bar {
  height: 100%; width: 20%;
  background: var(--sage);
  border-radius: var(--r-pill);
  transition: width .35s ease;
}
.wizard__counter {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft); font-weight: 600; white-space: nowrap;
}

.wizard__step { display: none; }
.wizard__step.is-active { display: block; }
.wizard__legend {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: 6px; padding: 0;
}
.wizard__hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }

.cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* Mobile-first: stack on narrow screens, switch to multi-col at 520px+ */
.cards--two { grid-template-columns: 1fr !important; }
.cards--three { grid-template-columns: 1fr !important; }
@media (min-width: 520px) {
  .cards--two { grid-template-columns: 1fr 1fr !important; }
  .cards--three { grid-template-columns: repeat(3, 1fr) !important; }
}

.card { display: block; position: relative; cursor: pointer; }
.card input { position: absolute; opacity: 0; pointer-events: none; }
.card__body {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px; background: var(--stone);
  border-radius: var(--r-md); border: 2px solid transparent;
  transition: border-color .15s, background .15s, transform .1s;
  min-height: 80px; justify-content: center;
}
.card:hover .card__body { background: var(--stone-soft); transform: translateY(-1px); }
.card input:checked + .card__body {
  border-color: var(--navy);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(111,163,165,0.3);
}
.card__title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.card__meta { font-size: 12px; color: var(--ink-soft); font-family: var(--mono); }

/* Image variant: thumbnail to the right of text */
.card--with-img .card__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}
.card--with-img .card__text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
.card--with-img .card__img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--stone-soft);
  transition: transform .2s ease;
}
.card--with-img:hover .card__img { transform: scale(1.05); }
.card--with-img input:checked + .card__body .card__img {
  box-shadow: 0 0 0 2px var(--navy);
}

.form { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 12px; font-family: var(--mono);
  color: var(--ink-soft); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}
.field input {
  font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--rule);
  background: var(--stone); color: var(--ink);
  transition: border-color .15s, background .15s;
}
.field input:focus {
  outline: none; border-color: var(--navy); background: var(--paper);
}
.field input:invalid:not(:placeholder-shown) { border-color: #c73b3b; }

.wizard__nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.wizard__nav [data-back] { margin-right: auto; }

.wizard__result { text-align: center; padding: 20px 0 8px; }
.result__eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 10px;
}
.result__price {
  display: flex; align-items: baseline; justify-content: center;
  gap: 2px; flex-wrap: wrap;
  margin-bottom: 4px;
  padding: 0 8px;
}
.result__dollar { font-size: clamp(20px, 6vw, 28px); font-weight: 700; }
.result__amount {
  font-size: clamp(40px, 13vw, 72px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--navy-deep);
  word-break: break-word;
}
.result__per { font-size: clamp(14px, 4vw, 18px); font-weight: 500; color: var(--ink-soft); margin-left: 6px; }
.result__starting { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; padding: 0 8px; }
.result__breakdown {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  background: var(--stone); border-radius: var(--r-md);
  padding: 14px 16px; margin: 0 auto 24px;
  text-align: left;
  width: 100%; max-width: 360px;
  box-sizing: border-box;
}
.result__breakdown li {
  display: flex; justify-content: space-between; gap: 12px;
  min-width: 0;
}
.result__breakdown li > span:first-child { flex: 1; min-width: 0; }
.result__breakdown li > span:last-child { flex-shrink: 0; white-space: nowrap; }
.result__breakdown li.is-total {
  border-top: 1px solid var(--rule); padding-top: 8px;
  color: var(--navy-deep); font-weight: 700;
}
.result__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; padding: 0 8px; }
.result__ctas .btn { width: 100%; max-width: 320px; justify-content: center; }
.result__foot { font-size: 13px; color: var(--ink-soft); max-width: 420px; margin: 0 auto; line-height: 1.5; padding: 0 12px; }

@media (min-width: 540px) {
  .result__breakdown { font-size: 13px; padding: 16px 20px; max-width: 380px; }
  .result__breakdown li { gap: 24px; }
  .result__ctas .btn { width: auto; }
}

/* =========================================================
   15. FAQ
   ========================================================= */

.faq { padding: 96px 0; background: var(--cream); }
.faq__list {
  max-width: 820px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: 10px;
}
.q {
  background: var(--paper); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: hidden;
  border-left: 3px solid var(--sage);
}
.q__q {
  list-style: none; cursor: pointer;
  padding: 18px 52px 18px 22px; font-weight: 700; font-size: 16px;
  position: relative; user-select: none; line-height: 1.4;
}
.q__q::-webkit-details-marker { display: none; }
.q__q::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--sage);
  transition: transform .2s;
}
.q[open] .q__q::after { content: "–"; color: var(--navy); }
.q__a { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.q__a a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

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

.site-footer { background: var(--navy-deep); color: var(--cream); padding: 64px var(--gutter) 24px; }
.footer__top {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid var(--rule-light);
}
.footer__brand { max-width: 420px; }
.footer__tagline { margin-top: 12px; color: rgba(246,241,237,0.7); font-size: 14px; line-height: 1.6; }
.footer__phone { margin-top: 16px; font-family: var(--mono); font-size: 18px; font-weight: 600; }
.footer__phone a { color: var(--sage-soft); }
.footer__email { margin-top: 6px; font-size: 13px; font-family: var(--mono); }
.footer__email a { color: rgba(246,241,237,0.8); }
.footer__hours { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sage-soft); }

.footer__col h3 {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 14px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col a { color: var(--cream); font-size: 14px; opacity: 0.85; transition: opacity .15s; }
.footer__col a:hover { opacity: 1; }

.footer__bottom {
  max-width: var(--wrap); margin: 0 auto; padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(246,241,237,0.6); font-family: var(--mono);
}
.footer__note { color: var(--sage-soft); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}

/* =========================================================
   Reveal on scroll, directional (On-Time fade pattern)
   Pulled from Divi: fadeBottom, fadeLeft, fadeRight, fadeTop
   ========================================================= */

.will-reveal { opacity: 0; transition: opacity .85s ease, transform .85s ease; will-change: transform, opacity; }
.will-reveal[data-reveal="bottom"] { transform: translateY(28px); }
.will-reveal[data-reveal="left"]   { transform: translateX(-32px); }
.will-reveal[data-reveal="right"]  { transform: translateX(32px); }
.will-reveal[data-reveal="top"]    { transform: translateY(-28px); }
.will-reveal[data-reveal="fade"]   { transform: none; }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* Cascade children inside a revealing group (staggered in) */
.will-reveal.is-visible > * { animation: childFadeIn .6s ease both; }
.will-reveal.is-visible > *:nth-child(2) { animation-delay: .08s; }
.will-reveal.is-visible > *:nth-child(3) { animation-delay: .16s; }
.will-reveal.is-visible > *:nth-child(4) { animation-delay: .24s; }
.will-reveal.is-visible > *:nth-child(5) { animation-delay: .32s; }
.will-reveal.is-visible > *:nth-child(6) { animation-delay: .40s; }
.will-reveal.is-visible > *:nth-child(7) { animation-delay: .48s; }

@keyframes childFadeIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal, .will-reveal.is-visible > * {
    opacity: 1; transform: none; animation: none; transition: none;
  }
}

/* =========================================================
   Strong hover micro-interactions (more dynamic than defaults)
   ========================================================= */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Service tiles: lift more and glow */
  .tile {
    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                box-shadow .25s ease,
                border-color .25s ease;
  }
  .tile:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 36px rgba(15,30,52,0.18);
    border-color: var(--navy);
  }
  .tile:hover .tile__photo { transform: scale(1.04); }
  .tile__photo {
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
  }

  /* Work gallery cards: same lift behavior */
  .work {
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                box-shadow .22s ease,
                border-color .22s ease;
  }
  .work:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(15,30,52,0.20);
    border-color: var(--navy);
  }
  .work img {
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .work:hover img { transform: scale(1.06); }
  /* Slider tiles: image stays put, the divider does the moving */
  .work--slider img,
  .work--slider:hover img { transform: none; transition: none; }

  /* City chips: pop up and swap to navy */
  .chip {
    transition: transform .18s ease,
                background .18s ease,
                color .18s ease,
                box-shadow .18s ease,
                border-color .18s ease;
  }
  .chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15,30,52,0.18);
    border-color: var(--navy);
  }

  /* Phone/text top-bar links: subtle lift */
  .topbar__phone, .topbar__text, .topbar__cta {
    transition: transform .15s ease, color .15s ease;
  }
  .topbar__phone:hover, .topbar__text:hover, .topbar__cta:hover {
    transform: translateY(-1px);
  }

  /* Nav links: underline grows from center */
  .nav a {
    position: relative;
    border-bottom-color: transparent !important;
  }
  .nav a::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 4px;
    height: 2px;
    background: var(--navy-deep);
    transition: left .22s ease, right .22s ease;
  }
  .nav a:hover::after { left: 0; right: 0; }

  /* FAQ items: tilt slightly + stronger fill on hover */
  .faq-item {
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .faq-item:hover {
    border-color: var(--sage);
    box-shadow: 0 4px 14px rgba(15,30,52,0.08);
  }

  /* Footer column links: slide right on hover */
  .footer__col a {
    display: inline-block;
    transition: transform .15s ease, color .15s ease;
  }
  .footer__col a:hover { transform: translateX(3px); color: var(--sage-soft); }

  /* SVG city pins on the Florida map: enlarge and glow on hover */
  .areas__map g {
    transition: transform .2s ease;
    transform-origin: center;
    transform-box: fill-box;
    cursor: default;
  }
  .areas__map g:hover { transform: scale(1.18); }

  /* Trust bar items: subtle highlight on hover */
  .trust__item {
    transition: transform .15s ease, color .15s ease;
  }
  .trust__item:hover { transform: translateY(-1px); }

  /* Review card hover (stacked stickies still work — only when not pinned) */
  .review {
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .review:hover {
    border-color: var(--navy);
    box-shadow: 0 14px 40px rgba(15,30,52,0.18);
  }
}

/* =========================================================
   Skip-to-content link (visible only when keyboard-focused)
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 100;
  background: var(--navy-deep);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

/* =========================================================
   Footer social buttons (Google, Facebook, Instagram)
   ========================================================= */
.footer__social {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.footer__social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(246, 241, 237, 0.08);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(246, 241, 237, 0.15);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.footer__social-btn:hover {
  background: rgba(246, 241, 237, 0.16);
  border-color: rgba(246, 241, 237, 0.4);
  transform: translateY(-2px);
}
.footer__social-btn svg { flex-shrink: 0; }
.footer__social-label { line-height: 1; }
@media (max-width: 540px) {
  .footer__social-label { font-size: 12px; }
}

/* =========================================================
   Scripture pull-quote
   ========================================================= */
.verse {
  margin: 28px 0 24px;
  padding: 22px 24px;
  background: var(--cream);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.verse__quote {
  font-family: var(--script);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.35;
  color: var(--navy-deep);
  letter-spacing: -0.005em;
}
.verse__cite {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================
   Before/After draggable slider
   Progressive enhancement over any two-pane before/after block
   ========================================================= */

[data-ba-slider] {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* Keep the figure's aspect-ratio coming from its existing styles.
   Kill any grid/flex layout so before + after stack absolutely. */
[data-ba-slider].g2c__ba-frame,
[data-ba-slider].ba,
[data-ba-slider].work {
  display: block;
}
[data-ba-slider].ba { aspect-ratio: 2 / 1; }
[data-ba-slider].g2c__ba-frame { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  [data-ba-slider].g2c__ba-frame { aspect-ratio: 1 / 1; }
}

/* Before pane: fills the whole figure, sits under the clip */
[data-ba-slider] > .g2c__before,
[data-ba-slider] > .ba__before,
[data-ba-slider] > .work__before {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  width: 100%; height: 100%;
}
[data-ba-slider] > .work__before > img,
.ba-slider__after > .work__after > img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ba-slider__after > .work__after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* After pane wrapper: absolute + clipped from the right
   Moves with the handle via clip-path */
.ba-slider__after {
  position: absolute; inset: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
  pointer-events: none;
}
.ba-slider__after > .g2c__after,
.ba-slider__after > .ba__after {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  width: 100%; height: 100%;
}

/* Vertical divider line at the slider position */
.ba-slider__divider {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--cream);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  will-change: left;
}

/* Draggable handle button, vertically centered on the divider */
.ba-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy-deep, #0F1E34);
  border: none;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
  z-index: 3;
  padding: 0;
  will-change: left;
  transition: box-shadow 0.15s;
}
.ba-slider__handle:hover,
.ba-slider__handle:focus-visible {
  box-shadow: 0 4px 18px rgba(0,0,0,0.32), 0 0 0 2px var(--navy, #12345C);
  outline: none;
}
.ba-slider__handle:active { cursor: grabbing; }

/* Small hint on first paint to signal it's draggable */
[data-ba-slider]:not(.is-touched) .ba-slider__handle {
  animation: baNudge 2.2s ease-in-out 0.8s 2;
}
@keyframes baNudge {
  0%, 100% { transform: translate(-50%, -50%); }
  40% { transform: translate(calc(-50% - 8px), -50%); }
  70% { transform: translate(calc(-50% + 8px), -50%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-ba-slider] .ba-slider__handle { animation: none; }
}

/* Keep the caption above the handle */
[data-ba-slider] .g2c__caption { z-index: 4; }

/* Give the after wrapper an explicit z-index above the before's internal
   tag stacking. Without this, clip-path creates a new stacking context
   and the BEFORE tag (at z-index auto in parent) paints over the entire
   AFTER layer, making the "After" label never appear. */
[data-ba-slider] .ba-slider__after { z-index: 1; }

/* =========================================================
   SERVICE PAGES (pool-cleaning, green-to-clean, repairs, installs)
   Mobile-first. All sections share the same wrap width as the homepage.
   ========================================================= */

/* Active state for the current page in the primary nav */
.nav a.is-active {
  color: var(--navy-deep);
  font-weight: 700;
  border-bottom-color: var(--navy-deep);
}

/* =========================================================
   POOL-CLEANING PAGE: distinct hero + visual sections
   Different visual signature from homepage so visitors know
   they're on a service detail page, not the homepage.
   ========================================================= */

/* HERO: light cream/sage split layout. Pricing badge is the focal point.
   Mobile: stacked. Desktop: text left, price right. */
.pc-hero {
  position: relative;
  background:
    radial-gradient(circle at 90% 10%, rgba(111, 163, 165, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 5% 90%, rgba(111, 163, 165, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, var(--cream) 0%, var(--stone-soft) 100%);
  color: var(--ink);
  padding: 56px var(--gutter);
  overflow: hidden;
}
.pc-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.pc-hero__text { min-width: 0; }
.pc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 700;
  background: rgba(111, 163, 165, 0.10);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.pc-hero__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: pcDotPulse 2s ease-in-out infinite;
}
@keyframes pcDotPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-hero__eyebrow-dot { animation: none; }
}
.pc-hero__headline {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy-deep);
  margin-bottom: 18px;
}
.pc-hero__headline em {
  font-style: italic; color: var(--sage);
}
.pc-hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.65; color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 28px;
}
.pc-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.pc-hero__points {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 6px;
}
.pc-hero__points li {
  font-size: 14px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.pc-hero__points li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--sage); color: var(--cream);
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
@media (min-width: 540px) {
  .pc-hero__points { grid-template-columns: 1fr 1fr; }
}

/* Hero pricing badge: the visual focal point */
.pc-hero__price {
  background: var(--navy-deep);
  color: var(--cream);
  border: 4px solid var(--sage);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 30, 52, 0.20), 0 0 0 1px rgba(111, 163, 165, 0.30);
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}
.pc-hero__price::before {
  content: "WEEKLY";
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--sage);
  color: var(--navy-deep);
  font-family: var(--mono); font-weight: 800;
  font-size: 11px; letter-spacing: 0.18em;
  padding: 4px 14px;
  border-radius: var(--r-pill);
}
.pc-hero__price-from {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 4px;
}
.pc-hero__price-amount {
  font-size: clamp(72px, 14vw, 104px);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cream);
  margin-bottom: 4px;
  display: inline-flex; align-items: flex-start; justify-content: center;
}
.pc-hero__price-dollar {
  font-size: 0.4em; font-weight: 700;
  margin-top: 0.1em; margin-right: 2px;
  color: var(--sage-soft);
}
.pc-hero__price-per {
  font-size: 0.25em; font-weight: 600;
  color: var(--sage-soft);
  margin-left: 4px; align-self: flex-end;
}
.pc-hero__price-range {
  font-size: 12px; color: rgba(246, 241, 237, 0.65);
  margin-bottom: 14px; line-height: 1.5;
  padding: 0 12px;
}
.pc-hero__price-stars {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: 18px;
}
.pc-hero__price-star-row {
  color: #FBBC05; letter-spacing: 3px; font-size: 16px;
}
.pc-hero__price-star-text {
  font-size: 11px; color: rgba(246, 241, 237, 0.6);
}
.pc-hero__price-btn {
  display: block; width: 100%;
  background: var(--sage); color: var(--navy-deep);
}
.pc-hero__price-btn:hover { background: var(--sage-soft); }

@media (min-width: 880px) {
  .pc-hero { padding: 80px var(--gutter) 64px; }
  .pc-hero__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
  }
  .pc-hero__price { max-width: 380px; }
}

/* STAT STRIP under hero */
.pc-stats {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 24px var(--gutter);
}
.pc-stats__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  text-align: center;
}
.pc-stat__num {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--sage-soft);
  margin-bottom: 4px;
}
.pc-stat__label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246, 241, 237, 0.6);
}
@media (min-width: 720px) {
  .pc-stats__inner { grid-template-columns: repeat(4, 1fr); }
}

/* PILLAR GRID for the 10-point checklist */
.pc-pillars {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  max-width: var(--wrap); margin: 0 auto;
}
.pc-pillar {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 22px 20px;
  box-shadow: var(--sh-1);
  border-top: 3px solid var(--sage);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.pc-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-top-color: var(--navy);
}
.pc-pillar__icon {
  width: 44px; height: 44px;
  background: var(--sage); color: var(--cream);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  transition: background .2s, transform .2s;
}
.pc-pillar:hover .pc-pillar__icon {
  background: var(--navy);
  transform: rotate(-4deg);
}
.pc-pillar__num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--sage);
  font-weight: 700;
}
.pc-pillar h3 {
  font-size: 16px; font-weight: 800;
  color: var(--navy-deep); line-height: 1.2;
  letter-spacing: -0.01em;
}
.pc-pillar p {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
}
.pc-pillar--featured {
  background: var(--navy-deep); color: var(--cream);
  border-top-color: var(--sage);
}
.pc-pillar--featured h3 { color: var(--cream); }
.pc-pillar--featured p { color: rgba(246, 241, 237, 0.75); }
.pc-pillar--featured .pc-pillar__icon {
  background: var(--sage);
  color: var(--navy-deep);
}
.pc-pillar--featured .pc-pillar__num { color: var(--sage-soft); }
@media (min-width: 600px) {
  .pc-pillars { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .pc-pillars { grid-template-columns: repeat(5, 1fr); }
}

/* VISIT REPORT: magazine layout (photo on one side, content on the other).
   Photo is fully visible (no overlay) so it can be seen clearly.
   Mobile: photo on top (16:9), content below. Desktop: side-by-side. */
.pc-report {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  max-width: 100%;
  margin: 0;
}
.pc-report__media {
  position: relative;
  margin: 0;
  min-height: 300px;
  background:
    url('img/pool-screened-2.jpg') center / cover no-repeat;
  overflow: hidden;
}
.pc-report__media::after {
  /* Subtle bottom-up gradient so the tag has contrast on light water */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,30,52,0.30) 0%, transparent 40%);
  pointer-events: none;
}
.pc-report__media-tag {
  position: absolute;
  bottom: 16px; left: 16px;
  padding: 6px 14px;
  background: rgba(15, 30, 52, 0.85);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  z-index: 1;
}
.pc-report__content {
  padding: 56px var(--gutter);
  max-width: 600px;
  margin: 0 auto;
}
.pc-report__content .section__eyebrow {
  color: var(--sage); margin-bottom: 14px;
}
.pc-report__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy-deep);
  margin-bottom: 16px;
}
.pc-report__lede {
  font-size: 17px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.pc-report__list {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 12px;
}
.pc-report__list li {
  position: relative; padding-left: 28px;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-soft);
}
.pc-report__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  background: var(--sage);
  border-radius: 50%;
}
.pc-report__list li::after {
  content: "✓";
  position: absolute;
  left: 4px; top: 4px;
  color: var(--cream);
  font-size: 12px; font-weight: 800;
  line-height: 18px;
}
.pc-report__list strong { color: var(--ink); font-weight: 700; }
.pc-report__quote {
  font-family: var(--script);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.4;
  color: var(--navy-deep);
  border-left: 3px solid var(--sage);
  padding: 14px 18px;
  background: var(--stone-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

@media (min-width: 880px) {
  .pc-report {
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
    align-items: stretch;
  }
  .pc-report__media { min-height: 100%; }
  .pc-report__content {
    padding: 80px 64px;
    max-width: 620px;
    margin: 0;
    align-self: center;
  }
}

/* SCROLL-DRIVEN POOL DECAY: animated section that transforms a clean pool
   into a green algae-filled one as the user scrolls. Sticky panel + four
   step markers + IntersectionObserver state changes. */
.pc-decay {
  background: var(--stone);
  position: relative;
}
.pc-decay__head {
  max-width: 800px; margin: 0 auto;
  padding: 56px var(--gutter) 24px;
  text-align: center;
}
.pc-decay__head .section__eyebrow,
.pc-decay__head .section__title,
.pc-decay__head .section__sub { text-align: center; }
.pc-decay__hint {
  margin-top: 24px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 700;
}
.pc-decay__hint span {
  display: inline-block;
  animation: pcDecayBounce 1.6s ease-in-out infinite;
}
@keyframes pcDecayBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* The scroller is taller than the viewport so the user has scroll runway
   to advance through 4 day-states. Total height = 4 * step length. */
.pc-decay__scroller {
  position: relative;
  /* On mobile: each step is shorter so users can power through. */
  height: 320vh;
}
.pc-decay__step {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 80vh;
  pointer-events: none;
}
.pc-decay__step[data-step="0"] { top: 0; }
.pc-decay__step[data-step="1"] { top: 80vh; }
.pc-decay__step[data-step="2"] { top: 160vh; }
.pc-decay__step[data-step="3"] { top: 240vh; }

/* Sticky panel pinned to the viewport while the user scrolls.
   Sized generously so the pool + readout fill the panel without feeling cramped. */
.pc-decay__panel {
  position: sticky;
  top: 56px;
  height: 92vh;
  max-height: 880px;
  display: flex; flex-direction: column;
  padding: 24px var(--gutter);
  z-index: 1;
}

/* Progress dots above the split */
.pc-decay__progress {
  position: relative;
  display: flex; justify-content: space-between;
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 0 8px;
}
.pc-decay__progress-track {
  position: absolute;
  top: 50%; left: 8px; right: 8px;
  height: 2px;
  background: rgba(15, 30, 52, 0.12);
  transform: translateY(-50%);
  z-index: 0;
}
.pc-decay__progress-fill {
  position: absolute;
  top: 50%; left: 8px;
  height: 2px;
  width: 0%;
  background: var(--sage);
  transform: translateY(-50%);
  transition: width 0.6s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.pc-decay__progress-dot {
  position: relative; z-index: 2;
  background: var(--paper);
  border: 2px solid rgba(15, 30, 52, 0.12);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--mono); font-size: 10px;
  font-weight: 800; letter-spacing: 0.14em;
  color: var(--ink-soft);
  transition: all 0.3s ease;
}
.pc-decay__progress-dot.is-active {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--cream);
  transform: scale(1.1);
}
.pc-decay__progress-dot.is-passed {
  background: var(--sage-soft);
  border-color: var(--sage-soft);
  color: var(--navy-deep);
}

/* Split layout: pool visual + readout. Large max-width so the panel fills
   the space comfortably and the visual reads big on desktop. */
.pc-decay__split {
  flex: 1;
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
}

/* The animated pool: a circle (top-down view) that color-shifts by day */
.pc-decay__pool {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  position: relative;
}
.pc-decay__pool-deck {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--stone-soft) 0%, var(--stone) 60%, #C5B8A2 100%);
  padding: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(15,30,52,0.10),
    0 24px 60px rgba(15,30,52,0.18);
}
.pc-decay__pool-water {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* Continuous color interpolation tied to --decay-progress (0 → 1).
     Hue rotates blue (190°) → green (80°). Saturation drops slightly.
     Lightness drops to make it feel murky. CSS interpolates per-frame
     instead of jumping between 4 discrete states. */
  background: linear-gradient(180deg,
    hsl(
      calc(190 - var(--decay-progress, 0) * 110),
      calc((60 - var(--decay-progress, 0) * 25) * 1%),
      calc((55 - var(--decay-progress, 0) * 25) * 1%)
    ) 0%,
    hsl(
      calc(200 - var(--decay-progress, 0) * 115),
      calc((60 - var(--decay-progress, 0) * 25) * 1%),
      calc((38 - var(--decay-progress, 0) * 18) * 1%)
    ) 60%,
    hsl(
      calc(205 - var(--decay-progress, 0) * 115),
      calc((60 - var(--decay-progress, 0) * 25) * 1%),
      calc((26 - var(--decay-progress, 0) * 14) * 1%)
    ) 100%
  );
  box-shadow: inset 0 0 24px rgba(0,0,0,0.30);
}
.pc-decay__pool-shimmer {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 8% at 35% 25%, rgba(255,255,255,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 30% 4% at 70% 60%, rgba(255,255,255,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 20% 3% at 25% 75%, rgba(255,255,255,0.30) 0%, transparent 70%);
  /* Fades out as the pool degrades. Full at 0, gone by ~70% progress. */
  opacity: calc(1 - var(--decay-progress, 0) * 1.4);
  animation: pcShimmer 6s ease-in-out infinite;
}
@keyframes pcShimmer {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.pc-decay__pool-algae {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(50, 90, 30, 0.6) 0%, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(50, 90, 30, 0.5) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(60, 100, 40, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 10% 20%, rgba(40, 80, 30, 0.5) 0%, transparent 25%);
  /* Fades in as the pool decays. Mostly visible after ~40% progress. */
  opacity: calc(var(--decay-progress, 0) * 1.1);
  mix-blend-mode: multiply;
}
.pc-decay__pool-debris {
  position: absolute; inset: 0;
  /* Leaves only show in the second half of the decay. */
  opacity: calc((var(--decay-progress, 0) - 0.4) * 1.7);
}
.pc-decay__leaf {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  animation: pcLeafDrift 8s ease-in-out infinite;
}
.pc-decay__leaf:nth-child(2) { animation-delay: -3s; }
.pc-decay__leaf:nth-child(3) { animation-delay: -5s; }
@keyframes pcLeafDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -4px) rotate(8deg); }
}

/* The pool's water/shimmer/algae/debris all interpolate continuously
   via --decay-progress (set by JS on scroll). No discrete states needed. */

/* Readout panel — soft fade + slide when copy snaps to a new stage */
.pc-decay__readout {
  text-align: left;
  padding: 0;
  max-width: 480px;
  margin: 0 auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(.2,.8,.2,1);
}
.pc-decay__readout.is-changing {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.pc-decay__day-label {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); font-weight: 800;
  margin-bottom: 8px;
}
.pc-decay__title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--navy-deep); line-height: 1.12;
  margin-bottom: 14px;
}
.pc-decay__desc {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 22px;
  min-height: 4.8em;
}
.pc-decay__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 14px 16px;
  border: 1px solid var(--rule);
  margin-bottom: 16px;
}
.pc-decay__stat dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.pc-decay__stat dd {
  font-size: 20px; font-weight: 800;
  color: var(--navy-deep); line-height: 1;
  letter-spacing: -0.01em;
}
.pc-decay__stat dd small {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  margin-left: 2px; letter-spacing: 0;
}
.pc-decay__status {
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pc-decay__cost {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-soft); font-weight: 600;
  letter-spacing: 0.04em;
}

/* Day-state colorings for the cost message */
.pc-decay__pool[data-day="3"] ~ .pc-decay__readout .pc-decay__cost,
[data-day="3"] + .pc-decay__readout .pc-decay__cost {
  color: #C2553D;
}

/* Desktop: side-by-side, with the visual sized to fill more of the screen */
@media (min-width: 880px) {
  .pc-decay__scroller { height: 360vh; }
  .pc-decay__step { height: 90vh; }
  .pc-decay__step[data-step="1"] { top: 90vh; }
  .pc-decay__step[data-step="2"] { top: 180vh; }
  .pc-decay__step[data-step="3"] { top: 270vh; }

  .pc-decay__panel {
    top: 72px;
    height: 90vh;
    padding: 40px var(--gutter);
  }
  .pc-decay__split {
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
  }
  .pc-decay__pool { max-width: 480px; }
  .pc-decay__readout { padding-left: 0; max-width: 540px; }
  .pc-decay__title { font-size: clamp(30px, 3.6vw, 44px); }
  .pc-decay__desc { font-size: 17px; }
  .pc-decay__stat dd { font-size: 24px; }
}

@media (min-width: 1200px) {
  .pc-decay__pool { max-width: 540px; }
}

/* Reduced motion: disable the sticky scroll, just stack the 4 days as cards. */
@media (prefers-reduced-motion: reduce) {
  .pc-decay__scroller { height: auto; }
  .pc-decay__panel {
    position: static; height: auto;
    transition: none;
  }
  .pc-decay__pool-water,
  .pc-decay__pool-algae,
  .pc-decay__pool-debris,
  .pc-decay__pool-shimmer,
  .pc-decay__progress-fill { transition: none; animation: none; }
  .pc-decay__hint { display: none; }
}

.pc-decay__takeaway {
  max-width: 720px; margin: 0 auto;
  padding: 32px var(--gutter) 56px; text-align: center;
}
.pc-decay__takeaway p {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55; color: var(--navy-deep);
  font-weight: 600; margin-bottom: 18px;
}

/* =========================================================
   WHY SUNDAYS POOLS: photo mosaic + numbered differentiator list
   ========================================================= */
.pc-why {
  background: var(--paper);
  padding: 48px var(--gutter);
}
.pc-why__head {
  max-width: 800px; margin: 0 auto 20px;
  text-align: center;
}
.pc-why__head .section__eyebrow,
.pc-why__head .section__title,
.pc-why__head .section__sub { text-align: center; }
.pc-why__head .section__eyebrow { margin-bottom: 8px; }
.pc-why__head .section__title {
  font-size: clamp(24px, 3.4vw, 32px);
  margin-bottom: 8px;
}
.pc-why__head .section__sub { font-size: 15px; }
.pc-why__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 880px) {
  .pc-why { padding: 56px var(--gutter); }
  .pc-why__split { grid-template-columns: 0.95fr 1fr; gap: 48px; }
}

.pc-why__mosaic-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.pc-why__mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.pc-why__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--stone-soft);
  box-shadow: 0 0 0 1px rgba(15, 30, 52, 0.08), 0 8px 24px rgba(15, 30, 52, 0.10);
  aspect-ratio: 16 / 10;
}
.pc-why__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
@media (hover: hover) {
  .pc-why__tile:hover img { transform: scale(1.04); }
}

@media (min-width: 700px) {
  .pc-why__mosaic {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    max-width: 460px;
    aspect-ratio: 1 / 1;
  }
  .pc-why__tile { aspect-ratio: auto; }
  .pc-why__tile--feature {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
}
@media (min-width: 1100px) {
  .pc-why__mosaic { max-width: 480px; gap: 14px; }
}

/* Numbered differentiator list. Magazine-style, big numbers, tight spacing. */
.pc-why__list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: pcwhy;
  display: flex; flex-direction: column;
  gap: 14px;
}
.pc-why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  transition: padding 0.2s ease;
}
.pc-why__item:last-child {
  border-bottom: none; padding-bottom: 0;
}
.pc-why__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--sage);
  background: var(--stone-soft);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  line-height: 1;
  align-self: start;
  white-space: nowrap;
}
.pc-why__copy h3 {
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
  line-height: 1.2;
  margin-bottom: 4px;
}
.pc-why__copy p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 880px) {
  .pc-why__list { gap: 14px; }
  .pc-why__item { gap: 16px; padding-bottom: 14px; }
  .pc-why__copy p { font-size: 14px; }
}

/* Service hero (smaller than homepage hero, same visual language) */
.svc-hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--cream);
  padding: 88px var(--gutter) 64px;
  overflow: hidden;
  isolation: isolate;
}
.svc-hero__media {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(15, 30, 52, 0.65), rgba(15, 30, 52, 0.85)),
    url('img/pool-screened-3.jpg') center / cover no-repeat;
}
.svc-hero__inner {
  max-width: 800px; margin: 0 auto;
  text-align: center;
}
.svc-hero__eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 18px;
}
.svc-hero__headline {
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.1; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 18px;
}
.svc-hero__script {
  display: block; margin-top: 8px;
  font-family: var(--script); font-weight: 400;
  color: var(--sage-soft); font-size: 0.7em; line-height: 1;
  letter-spacing: -0.01em;
}
.svc-hero__sub {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65; color: rgba(246, 241, 237, 0.85);
  max-width: 640px; margin: 0 auto 28px;
}
.svc-hero__sub strong { color: var(--cream); font-weight: 800; }
.svc-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 22px;
}
.svc-hero__trust {
  font-family: var(--mono); font-size: 12px;
  color: rgba(246, 241, 237, 0.6);
  letter-spacing: 0.04em; line-height: 1.6;
}
@media (min-width: 768px) {
  .svc-hero { padding: 120px var(--gutter) 88px; }
}

/* Generic service-page section */
.svc-section {
  padding: 72px var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
}
.svc-section--alt { background: var(--stone); }
.svc-section--alt + .svc-section--alt { margin-top: 0; }
@media (min-width: 768px) {
  .svc-section { padding: 96px var(--gutter); }
}
/* When .svc-section--alt has the alt background, break out of the wrap */
section.svc-section--alt {
  max-width: 100%;
  padding-left: 0; padding-right: 0;
}
section.svc-section--alt > .section__head,
section.svc-section--alt > .svc-pricing,
section.svc-section--alt > .svc-diff,
section.svc-section--alt > .svc-faq {
  max-width: var(--wrap);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Mid-page CTA strip */
.svc-cta-strip {
  background: var(--navy);
  color: var(--cream);
  padding: 32px var(--gutter);
}
.svc-cta-strip__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  align-items: center; text-align: center;
}
.svc-cta-strip__text {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: var(--cream);
}
.svc-cta-strip__btns {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.svc-cta-strip .btn--navy-outline {
  color: var(--cream);
  box-shadow: inset 0 0 0 2px rgba(246, 241, 237, 0.6);
}
.svc-cta-strip .btn--navy-outline:hover {
  background: rgba(246, 241, 237, 0.14);
  color: var(--cream);
  box-shadow: inset 0 0 0 2px var(--cream), var(--sh-2);
}
@media (min-width: 720px) {
  .svc-cta-strip__inner {
    flex-direction: row; justify-content: space-between; text-align: left;
  }
}

/* Visit report grid (single-column on mobile) */
.svc-report-grid {
  max-width: 760px; margin: 0 auto;
}
.svc-report-grid__copy { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

/* Bullet list shared by report and pricing factors */
.svc-bullet-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.svc-bullet-list li {
  position: relative; padding-left: 24px;
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
}
.svc-bullet-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--sage); font-weight: 800; font-size: 16px;
}
.svc-bullet-list strong { color: var(--ink); font-weight: 700; }

.svc-quote {
  margin-top: 16px; padding: 16px 20px;
  background: var(--paper); border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
  font-family: var(--script); font-size: clamp(18px, 2.6vw, 22px);
  color: var(--navy-deep); line-height: 1.4;
}

/* Pricing block */
.svc-pricing {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  max-width: 960px; margin: 0 auto;
}
.svc-pricing__card {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 2px solid var(--sage);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--sh-2);
}
.svc-pricing__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 12px;
}
.svc-pricing__amount {
  font-size: clamp(48px, 9vw, 72px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--navy-deep); margin-bottom: 10px;
}
.svc-pricing__amount span {
  font-size: 0.4em; font-weight: 600;
  color: var(--ink-soft); margin-left: 4px;
}
.svc-pricing__note { font-size: 14px; color: var(--ink-soft); }

/* Factors panel: lives in the right column on desktop */
.svc-pricing__factors {
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  padding: 28px 24px;
}
.svc-pricing__factors h3 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; margin: 0 0 10px;
  color: var(--navy-deep);
  line-height: 1.2;
}
.svc-pricing__factors-lede {
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 18px;
}
.svc-pricing__list {
  display: grid; gap: 14px; margin: 0;
}
.svc-pricing__row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--sage);
}
.svc-pricing__row dt {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.svc-pricing__row dd {
  margin: 0; font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Principles callout: sits below the grid, full width, navy treatment */
.svc-pricing__principles {
  max-width: 960px; margin: 32px auto 0;
  background: var(--navy-deep);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  box-shadow: var(--sh-2);
}
.svc-pricing__principles-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-soft); margin: 0 0 8px;
}
.svc-pricing__principles h3 {
  font-size: clamp(22px, 3.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em; margin: 0 0 22px;
  color: var(--cream);
  line-height: 1.25;
}
.svc-pricing__principles-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: grid; gap: 16px;
}
.svc-pricing__principles-list li {
  display: grid;
  grid-template-columns: 36px 1fr; gap: 14px;
  align-items: start;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(245, 241, 235, 0.88);
}
.svc-pricing__principles-list strong {
  display: block;
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
}
.svc-pricing__principles-num {
  font-family: var(--mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--sage-soft);
  background: rgba(164, 193, 195, 0.12);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  text-align: center;
  line-height: 1;
}
.svc-pricing__warranty {
  display: grid; gap: 10px;
  padding: 16px 18px;
  background: rgba(164, 193, 195, 0.10);
  border-left: 3px solid var(--sage-soft);
  border-radius: var(--r-sm);
}
.svc-pricing__warranty p {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: rgba(245, 241, 235, 0.92);
}
.svc-pricing__warranty-tag {
  display: inline-flex; align-items: center;
  width: max-content;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-soft);
  padding: 4px 10px;
  background: rgba(164, 193, 195, 0.18);
  border-radius: var(--r-pill);
  font-weight: 700;
}

@media (min-width: 768px) {
  .svc-pricing { grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
  .svc-pricing__principles { padding: 40px 36px; }
  .svc-pricing__principles-list { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
}

/* "Why weekly" section: 2-column grid of reason blocks */
.svc-why {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  max-width: var(--wrap); margin: 0 auto;
}
.svc-why__item {
  padding: 24px;
  background: var(--paper);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
  box-shadow: var(--sh-1);
}
.svc-why__item h3 {
  font-size: 19px; font-weight: 800;
  color: var(--navy-deep); margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.svc-why__item p {
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
}
@media (min-width: 720px) {
  .svc-why { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* "What makes us different" cards */
.svc-diff {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: var(--wrap); margin: 0 auto;
}
.svc-diff__card {
  padding: 28px 24px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border-top: 4px solid var(--sage);
}
.svc-diff__card h3 {
  font-size: 20px; font-weight: 800;
  color: var(--navy-deep); margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.svc-diff__card p {
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
}
@media (min-width: 720px) { .svc-diff { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .svc-diff { grid-template-columns: repeat(3, 1fr); } }

/* Service-page review cards (simpler than homepage stack) */
.svc-review-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  max-width: var(--wrap); margin: 0 auto 24px;
}
.svc-review {
  background: var(--paper); padding: 24px;
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  border-top: 3px solid var(--sage);
}
.svc-review__stars { color: #FBBC05; letter-spacing: 2px; font-size: 16px; margin-bottom: 10px; }
.svc-review__text {
  font-style: italic; font-size: 15px; line-height: 1.65;
  color: var(--ink); margin-bottom: 14px;
}
.svc-review__author { font-size: 13px; color: var(--ink-soft); }
.svc-review-foot {
  text-align: center; max-width: var(--wrap);
  margin: 0 auto; padding: 0 var(--gutter);
}
.svc-review-foot a {
  color: var(--navy); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (min-width: 720px) { .svc-review-grid { grid-template-columns: 1fr 1fr; } }

/* FAQ on service pages reuses .q markup but with svc-faq wrapper for max-width */
.svc-faq {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}

/* Final CTA section — uses the parallax-section pattern (fixed photo, content scrolls past) */
.svc-final-cta {
  padding: 96px var(--gutter);
  background:
    linear-gradient(rgba(15, 30, 52, 0.55), rgba(15, 30, 52, 0.78)),
    url('img/pool-clean.jpg') center / cover no-repeat fixed;
  color: var(--cream);
  text-align: center;
  position: relative;
}
/* iOS Safari fallback: drop fixed attachment, bump overlay slightly to compensate */
@media (max-width: 900px) {
  .svc-final-cta {
    background:
      linear-gradient(rgba(15, 30, 52, 0.62), rgba(15, 30, 52, 0.84)),
      url('img/pool-clean.jpg') center / cover no-repeat;
  }
}
.svc-final-cta__inner { max-width: 760px; margin: 0 auto; }
.svc-final-cta__eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 14px;
}
.svc-final-cta__title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; margin-bottom: 18px;
  color: var(--cream);
}
.svc-final-cta__sub {
  font-size: 17px; line-height: 1.6;
  color: rgba(246, 241, 237, 0.88);
  max-width: 580px; margin: 0 auto 28px;
}
.svc-final-cta__btns {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-bottom: 24px;
}
.svc-final-cta__foot {
  font-family: var(--mono); font-size: 12px;
  color: rgba(246, 241, 237, 0.6);
  letter-spacing: 0.02em;
}

/* =========================================================
   GREEN TO CLEAN page styles
   ========================================================= */

/* Hero: dark moody overlay over an algae-recovery photo. */
.gtc-hero {
  position: relative;
  min-height: 540px;
  padding: 88px var(--gutter) 64px;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.gtc-hero__media {
  position: absolute; inset: 0;
  background-image: url('img/pool-screened-1.jpg');
  background-size: cover; background-position: center;
  z-index: -2;
  filter: saturate(0.85);
}
.gtc-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15, 30, 52, 0.86) 0%, rgba(15, 60, 45, 0.78) 70%, rgba(15, 30, 52, 0.92) 100%);
  z-index: -1;
}
.gtc-hero__inner {
  max-width: 760px; margin: 0 auto;
  text-align: left;
}
.gtc-hero__eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 16px;
}
.gtc-hero__headline {
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 800;
  margin-bottom: 20px;
}
.gtc-hero__headline em {
  font-style: italic; font-family: var(--script);
  font-weight: 400; color: var(--sage-soft);
  font-size: 1.15em; line-height: 0.9;
}
.gtc-hero__sub {
  font-size: 17px; line-height: 1.6;
  color: rgba(245, 242, 236, 0.9);
  margin-bottom: 28px; max-width: 640px;
}
.gtc-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 28px;
}
.gtc-hero__trust {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  font-size: 14px; color: rgba(245, 242, 236, 0.85);
}
.gtc-hero__trust li::before {
  content: "\2713  ";
  color: var(--sage-soft); font-weight: 800; margin-right: 6px;
}
.gtc-hero__trust strong { color: var(--cream); font-weight: 700; }
@media (min-width: 760px) {
  .gtc-hero { padding: 120px var(--gutter) 88px; min-height: 620px; }
  .gtc-hero__trust { grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 13px; }
}

/* Before/After slider section. Reuses the [data-ba-slider] JS hooks. */
.gtc-ba-section {
  background: var(--paper);
  padding: 64px var(--gutter);
}
.gtc-ba-section .section__head { margin-bottom: 32px; }
.gtc-ba {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--stone-soft);
  box-shadow: var(--sh-2);
  max-width: 920px; margin: 0 auto;
  aspect-ratio: 16 / 10;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.gtc-ba > .gtc-ba__before,
.gtc-ba > .gtc-ba__after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gtc-ba > .gtc-ba__after {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
  pointer-events: none;
  filter: saturate(1.05) brightness(1.02);
}
.gtc-ba__divider {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--cream);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}
.gtc-ba__handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy-deep);
  border: 2px solid var(--navy-deep);
  cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 18px rgba(0,0,0,0.30);
  z-index: 3;
  padding: 0;
}
.gtc-ba__handle:hover,
.gtc-ba__handle:focus-visible {
  outline: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.40), 0 0 0 4px var(--sage-soft);
}
.gtc-ba__handle:active { cursor: grabbing; }
.gtc-ba__label {
  position: absolute; top: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(15, 30, 52, 0.65);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  z-index: 2; pointer-events: none;
}
.gtc-ba__label--before { left: 12px; }
.gtc-ba__label--after { right: 12px; }
.gtc-ba__caption {
  text-align: center; max-width: 720px;
  margin: 16px auto 0;
  font-size: 14px; color: var(--ink-soft);
  font-style: italic;
}

/* 7-day process timeline */
.gtc-process {
  list-style: none; padding: 0; margin: 0;
  max-width: 880px; margin-left: auto; margin-right: auto;
  counter-reset: gtcproc;
  display: flex; flex-direction: column;
  gap: 18px;
}
.gtc-process__step {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 18px; align-items: start;
  padding: 18px;
  background: var(--cream);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
  box-shadow: var(--sh-1);
}
.gtc-process__num {
  font-family: var(--mono); font-size: 13px;
  font-weight: 800; letter-spacing: 0.14em;
  color: var(--cream);
  background: var(--sage);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  text-align: center;
  align-self: start;
  white-space: nowrap;
}
.gtc-process__copy h3 {
  font-size: 18px; font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px; line-height: 1.25;
}
.gtc-process__copy p {
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .gtc-process__step { grid-template-columns: 96px 1fr; gap: 24px; padding: 22px 28px; }
  .gtc-process__copy h3 { font-size: 19px; }
  .gtc-process__copy p { font-size: 15px; }
}

/* Pricing tiers by severity */
.gtc-tiers {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 1080px; margin: 0 auto;
}
.gtc-tier {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 26px 22px;
  box-shadow: var(--sh-1);
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gtc-tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.gtc-tier--featured {
  border-color: var(--sage);
  background: linear-gradient(180deg, var(--cream) 0%, var(--stone-soft) 100%);
  position: relative;
}
.gtc-tier--featured::before {
  content: "Most common";
  position: absolute; top: -12px; left: 22px;
  background: var(--sage); color: var(--cream);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-weight: 700;
}
.gtc-tier__badge {
  font-family: var(--mono); font-size: 12px;
  font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage); margin-bottom: 10px;
}
.gtc-tier__price {
  font-size: 38px; font-weight: 800;
  color: var(--navy-deep);
  line-height: 1; margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.gtc-tier__price span {
  font-size: 15px; font-weight: 500;
  color: var(--ink-soft);
  margin-left: 6px; letter-spacing: 0;
}
.gtc-tier__desc {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 12px 0 16px;
}
.gtc-tier__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--ink);
}
.gtc-tier__list li::before {
  content: "\2713  "; color: var(--sage); font-weight: 800;
}
.gtc-tiers__note {
  text-align: center; max-width: 720px;
  margin: 28px auto 0;
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6;
}
.gtc-tiers__note a { color: var(--navy); text-decoration: underline; }
@media (min-width: 760px) {
  .gtc-tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  /* The Drain+Acid Wash tier is a category jump from the standard three,
     so it spans the full row beneath them rather than sitting alongside. */
  .gtc-tier--drain { grid-column: 1 / -1; }
  .gtc-tier__price { font-size: 42px; }
}

/* =========================================================
   ACID WASH section (green-to-clean.html signature feature)
   Plaster Years Slider: visitor drags 0 to 20 years and watches
   plaster age. Plus 4-day process and honest-limits dark card.
   Mobile-first.
   ========================================================= */

.aw-section { background: var(--stone-soft); }


/* =========================================================
   ACID WASH: Plaster Years Slider (signature interactive)
   Drag the slider 0-20 years and watch the plaster surface
   age. Stains fade in starting year 3, calcium starts year 5,
   cracks start year 12. Readout updates with the right
   recommendation for that age. Replaces the old Reveal Brush.
   ========================================================= */

.aw-years {
  max-width: 740px;
  margin: 0 auto 26px;
}

.aw-years__hint {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 0 0 12px;
}

.aw-years__stage {
  position: relative;
  width: 100%;
  /* Belt and suspenders: padding-bottom for guaranteed aspect ratio in
     every browser (back to IE 9), aspect-ratio for modern browsers, and
     min-height so the SVG can never collapse to zero. */
  padding-bottom: 46.67%; /* 280 / 600 = 0.4667 */
  aspect-ratio: 600 / 280;
  min-height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: #EAF1ED;
}

.aw-years__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.aw-years__plaster,
.aw-years__stains,
.aw-years__calcium,
.aw-years__cracks,
.aw-years__shimmer {
  transition: opacity 0.32s ease;
}
.aw-years__plaster {
  transition: opacity 0.32s ease, fill 0.32s ease;
}

.aw-years__controls {
  margin-top: 18px;
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 18px 20px 20px;
  box-shadow: var(--sh-1);
}

.aw-years__slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.aw-years__year-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  white-space: nowrap;
  min-width: 84px;
}
.aw-years__year-label strong {
  color: var(--accent, #C0392B);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.aw-years__slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  background: linear-gradient(90deg, var(--sage) 0%, #C0392B 100%);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.aw-years__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--navy-deep);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 30, 52, 0.25);
  transition: transform 0.15s ease;
}
.aw-years__slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}
.aw-years__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--navy-deep);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 30, 52, 0.25);
}
.aw-years__slider:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 6px;
  border-radius: 4px;
}

.aw-years__ticks {
  display: flex;
  justify-content: space-between;
  margin: 0 2px 16px;
  padding: 0 12px 0 96px;
}
.aw-years__ticks span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.7;
}

.aw-years__readout {
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 30, 52, 0.18);
}

.aw-years__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 0 0 8px;
}

.aw-years__detail {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.aw-years__rec {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy-deep);
  font-weight: 700;
  margin: 0;
}

.aw-years__foot {
  text-align: center;
  max-width: 760px;
  margin: 22px auto 56px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (min-width: 600px) {
  .aw-years__year-label { min-width: 96px; font-size: 12px; }
  .aw-years__year-label strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-years__plaster,
  .aw-years__stains,
  .aw-years__calcium,
  .aw-years__cracks { transition: none; }
}

.aw-process-head {
  text-align: center;
  margin-bottom: 28px;
}
.aw-process-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 6px 0 8px;
  letter-spacing: -0.012em;
}
.aw-process-sub {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

.aw-process {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto 56px;
}

.aw-process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  background: var(--cream);
  padding: 20px 22px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border-left: 3px solid var(--sage);
}

.aw-process__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  align-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

.aw-process__copy h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.aw-process__copy p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.aw-limits {
  max-width: 880px;
  margin: 0 auto;
  background: var(--navy-deep);
  color: var(--cream);
  padding: 28px 28px 30px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.aw-limits__h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
}
.aw-limits__h em {
  font-style: italic;
  color: #C0392B;
  font-weight: 800;
}

.aw-limits__lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.85);
  margin: 0 0 18px;
}

.aw-limits__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}

.aw-limits__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.92);
}

.aw-limits__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
}

.aw-limits__list strong { color: #FFFFFF; }
.aw-limits__list a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aw-limits__cta {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.9);
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(245, 242, 236, 0.2);
}
.aw-limits__cta a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .aw-process__step { padding: 22px 26px; }
  .aw-process__copy h4 { font-size: 18px; }
}

/* =========================================================
   REPAIRS page styles
   ========================================================= */

.rep-hero {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 72px var(--gutter) 56px;
  overflow: hidden;
}
.rep-hero__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: 32px; align-items: center;
}
.rep-hero__copy { min-width: 0; }
.rep-hero__eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 16px;
}
.rep-hero__headline {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 800;
  margin-bottom: 18px;
}
.rep-hero__headline em {
  font-style: italic; font-family: var(--script);
  font-weight: 400; color: var(--sage-soft);
  font-size: 1.15em; line-height: 0.9;
}
.rep-hero__sub {
  font-size: 16px; line-height: 1.6;
  color: rgba(245, 242, 236, 0.85);
  margin-bottom: 24px;
}
.rep-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.rep-hero__trust {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  font-size: 14px; color: rgba(245, 242, 236, 0.85);
}
.rep-hero__trust li::before {
  content: "\2713  "; color: var(--sage-soft); font-weight: 800; margin-right: 6px;
}
.rep-hero__trust strong { color: var(--cream); font-weight: 700; }
.rep-hero__media {
  position: relative; margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
}
.rep-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (min-width: 880px) {
  .rep-hero { padding: 96px var(--gutter) 80px; }
  .rep-hero__inner { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .rep-hero__trust { grid-template-columns: 1fr; gap: 10px; }
  .rep-hero__media { aspect-ratio: 4 / 5; }
}

/* Diagnostic accordion uses existing .q styles */
.rep-diag {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}

/* Repair categories grid with card-tilt */
.rep-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 18px;
  max-width: var(--wrap); margin: 0 auto;
}
.rep-card {
  background: var(--cream);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
  transform-style: preserve-3d;
  transition: box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.rep-card.is-tilting { box-shadow: 0 24px 60px rgba(15, 30, 52, 0.22); }
.rep-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--stone-soft);
}
.rep-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.rep-card__body { padding: 22px 22px 24px; }
.rep-card__tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 10px;
  font-weight: 700;
}
.rep-card__title {
  font-size: 22px; font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 8px; line-height: 1.2;
  letter-spacing: -0.01em;
}
.rep-card__copy {
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.rep-card__price {
  font-family: var(--mono); font-size: 13px;
  font-weight: 700; color: var(--navy-deep);
  background: var(--stone-soft);
  display: inline-block;
  padding: 6px 12px; border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}
@media (min-width: 700px) {
  .rep-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1000px) {
  /* 7-card layout: 4 cards on the top row, 3 cards on the bottom row,
     bottom row centered. Uses a 12-col grid so the bottom 3 cards
     (each 3 cols wide) sit in cols 2-10 with a 1.5-col offset. */
  .rep-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 22px 18px;
  }
  .rep-grid > .rep-card:nth-child(1) { grid-column: 1 / span 3; }
  .rep-grid > .rep-card:nth-child(2) { grid-column: 4 / span 3; }
  .rep-grid > .rep-card:nth-child(3) { grid-column: 7 / span 3; }
  .rep-grid > .rep-card:nth-child(4) { grid-column: 10 / span 3; }
  .rep-grid > .rep-card:nth-child(5) { grid-column: 2 / span 3; }
  .rep-grid > .rep-card:nth-child(6) { grid-column: 5 / span 3; }
  .rep-grid > .rep-card:nth-child(7) { grid-column: 8 / span 3; }
}

/* Brands strip */
.rep-brands-section {
  text-align: center;
}
.rep-brands {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  max-width: 880px; margin: 0 auto;
}
.rep-brand {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 22px 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800;
  font-size: 16px; letter-spacing: 0.06em;
  color: var(--navy-deep);
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rep-brand:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.rep-brands__note {
  margin: 28px auto 0;
  max-width: 680px;
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6; text-align: center;
}
.rep-brands__note a { color: var(--navy); text-decoration: underline; }
@media (min-width: 600px) { .rep-brands { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .rep-brands { grid-template-columns: repeat(8, 1fr); gap: 14px; } }

/* =========================================================
   EQUIPMENT INSTALLATIONS page styles
   ========================================================= */

.ei-hero {
  background: var(--cream);
  padding: 72px var(--gutter) 56px;
  position: relative;
  overflow: hidden;
}
.ei-hero::before {
  content: "";
  position: absolute; top: 0; right: -10%;
  width: 60%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(111, 163, 165, 0.18) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.ei-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: 32px; align-items: center;
}
.ei-hero__copy { min-width: 0; }
.ei-hero__eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 16px;
}
.ei-hero__headline {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 800;
  color: var(--navy-deep); margin-bottom: 18px;
}
.ei-hero__headline em {
  font-style: italic; font-family: var(--script);
  font-weight: 400; color: var(--sage);
  font-size: 1.15em; line-height: 0.9;
}
.ei-hero__sub {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.ei-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.ei-hero__trust {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px;
  font-size: 14px; color: var(--ink-soft);
}
.ei-hero__trust li::before {
  content: "\2713  "; color: var(--sage); font-weight: 800; margin-right: 6px;
}
.ei-hero__trust strong { color: var(--navy-deep); font-weight: 700; }
.ei-hero__media {
  position: relative; margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
}
.ei-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ei-hero__caption {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(15, 30, 52, 0.92);
  color: var(--cream);
  padding: 14px 18px;
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sh-2);
  border-left: 3px solid var(--sage);
}
.ei-hero__caption-num {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sage-soft);
  line-height: 1;
}
.ei-hero__caption-text {
  font-size: 12px; color: rgba(245, 242, 236, 0.9);
  line-height: 1.4; max-width: 160px;
}
@media (min-width: 880px) {
  .ei-hero { padding: 96px var(--gutter) 80px; }
  .ei-hero__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* Parallax photo moment */
.ei-parallax {
  position: relative;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.ei-parallax__bg {
  position: absolute; inset: 0;
  background-image: url('img/pool-screened-3.jpg');
  background-size: cover; background-position: center;
  background-attachment: fixed;
  z-index: -2;
}
.ei-parallax__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15, 30, 52, 0.78) 0%, rgba(26, 46, 76, 0.72) 100%);
  z-index: -1;
}
.ei-parallax__card {
  background: var(--cream);
  border-left: 4px solid var(--sage);
  padding: 36px 28px;
  border-radius: var(--r-md);
  max-width: 640px;
  box-shadow: var(--sh-3);
}
.ei-parallax__eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 12px;
}
.ei-parallax__title {
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.15; font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.ei-parallax__body {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.ei-parallax__sig {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 700;
}
@media (min-width: 880px) {
  .ei-parallax { min-height: 560px; padding: 120px var(--gutter); }
  .ei-parallax__card { padding: 48px 44px; }
}
@media (max-width: 880px) {
  .ei-parallax__bg { background-attachment: scroll; }
}

/* Tier comparison */
.ei-tiers {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 1100px; margin: 0 auto;
}
.ei-tier {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 26px 22px 28px;
  box-shadow: var(--sh-1);
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.ei-tier:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.ei-tier--featured {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
  color: var(--cream);
  position: relative;
  transform: scale(1.02);
}
.ei-tier__badge {
  font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage); margin-bottom: 12px;
}
.ei-tier--featured .ei-tier__badge { color: var(--sage-soft); }
.ei-tier__price {
  font-size: 36px; font-weight: 800;
  color: var(--navy-deep);
  line-height: 1; margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.ei-tier--featured .ei-tier__price { color: var(--cream); }
.ei-tier__price span {
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  margin-left: 6px; letter-spacing: 0;
}
.ei-tier--featured .ei-tier__price span { color: var(--sage-soft); }
.ei-tier__name {
  font-size: 18px; font-weight: 800;
  color: var(--navy-deep);
  margin: 14px 0 8px;
  letter-spacing: -0.01em;
}
.ei-tier--featured .ei-tier__name { color: var(--cream); }
.ei-tier__desc {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.ei-tier--featured .ei-tier__desc { color: rgba(245, 242, 236, 0.82); }
.ei-tier__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--ink);
}
.ei-tier--featured .ei-tier__list { color: rgba(245, 242, 236, 0.95); }
.ei-tier__list li::before { content: "\2713  "; color: var(--sage); font-weight: 800; }
.ei-tier--featured .ei-tier__list li::before { color: var(--sage-soft); }
.ei-tier__flag {
  margin-top: 16px;
  font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--sage-soft); color: var(--navy-deep);
  display: inline-block;
  padding: 6px 12px; border-radius: var(--r-sm);
  align-self: flex-start;
}
.ei-tiers__note {
  text-align: center; max-width: 720px;
  margin: 28px auto 0;
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6;
}
.ei-tiers__note a { color: var(--navy); text-decoration: underline; }
@media (min-width: 760px) {
  .ei-tiers { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ei-tier__price { font-size: 40px; }
}

/* ROI explainer */
.ei-roi {
  display: grid; grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1080px; margin: 0 auto;
}
.ei-roi__col {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 24px 22px;
  box-shadow: var(--sh-1);
  border-top: 3px solid var(--rule);
}
.ei-roi__col--old {
  border-top-color: #C0392B;
  background: #FBF1EF;
}
.ei-roi__col--new {
  border-top-color: var(--sage);
  background: var(--stone-soft);
}
.ei-roi__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
  font-weight: 700;
}
.ei-roi__big {
  font-size: 44px; font-weight: 800;
  color: var(--navy-deep);
  line-height: 1; margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.ei-roi__big span {
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  margin-left: 6px; letter-spacing: 0;
}
.ei-roi__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--ink);
}
.ei-roi__list li::before { content: "\00B7  "; color: var(--sage); font-weight: 800; }
.ei-roi__delta {
  background: var(--navy-deep);
  color: var(--cream);
  border-radius: var(--r-md);
  padding: 28px 22px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--sh-2);
}
.ei-roi__delta-label {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-soft); margin-bottom: 10px;
}
.ei-roi__delta-num {
  font-size: 64px; font-weight: 800;
  color: var(--cream);
  line-height: 1; margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.ei-roi__delta-note {
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 242, 236, 0.85);
  max-width: 280px; margin: 0 auto;
}
@media (min-width: 760px) {
  .ei-roi { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .ei-roi__big { font-size: 48px; }
  .ei-roi__delta-num { font-size: 72px; }
}

/* Install process timeline */
.ei-process {
  list-style: none; padding: 0; margin: 0;
  max-width: 880px; margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column;
  gap: 18px;
  position: relative;
}
.ei-process__step {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 20px; align-items: start;
  padding: 22px 24px;
  background: var(--cream);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
  box-shadow: var(--sh-1);
}
.ei-process__num {
  font-family: var(--mono); font-size: 22px;
  font-weight: 800;
  color: var(--cream);
  background: var(--navy-deep);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.ei-process__copy h3 {
  font-size: 19px; font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px; line-height: 1.25;
}
.ei-process__copy p {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .ei-process__step { padding: 26px 30px; }
  .ei-process__copy h3 { font-size: 20px; }
}

/* =========================================================
   GREEN TO CLEAN: severity picker (signature feature)
   ========================================================= */

.gtc-severity {
  background: var(--paper);
  padding: 64px var(--gutter);
}
.gtc-severity .section__head { margin-bottom: 28px; }

.gtc-severity__deck {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 920px;
  margin: 0 auto 28px;
}
.gtc-severity__card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 12px 8px 14px;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
  font-family: var(--sans);
  color: var(--ink);
  font: inherit;
}
.gtc-severity__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.gtc-severity__card.is-active {
  border-color: var(--navy-deep);
  background: var(--stone-soft);
  box-shadow: var(--sh-2);
}
.gtc-severity__card:focus-visible {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(111, 163, 165, 0.35);
}
.gtc-severity__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(15, 30, 52, 0.18), inset 0 -8px 14px rgba(0, 0, 0, 0.1);
  background: linear-gradient(160deg, #B5DDE6 0%, #4FA7C9 100%);
}
.gtc-severity__card--clear .gtc-severity__swatch {
  background: linear-gradient(160deg, #BFE3EE 0%, #4FA7C9 65%, #2D6E94 100%);
}
.gtc-severity__card--tint .gtc-severity__swatch {
  background: linear-gradient(160deg, #B0D4C2 0%, #6B9F8E 60%, #3F6F60 100%);
}
.gtc-severity__card--algae .gtc-severity__swatch {
  background: linear-gradient(160deg, #8DAE7A 0%, #5C8B4A 55%, #335424 100%);
}
.gtc-severity__card--green .gtc-severity__swatch {
  background: linear-gradient(160deg, #4D6B3A 0%, #2D4421 60%, #14250D 100%);
}
.gtc-severity__card--black .gtc-severity__swatch {
  background: linear-gradient(160deg, #25342A 0%, #0D1410 60%, #000000 100%);
}
.gtc-severity__name {
  font-size: 12px; font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.gtc-severity__hint {
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gtc-severity__panel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background: var(--cream);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: var(--sh-2);
  min-height: 180px;
}
.gtc-severity__detail {
  display: none;
}
.gtc-severity__detail.is-active {
  display: block;
  animation: gtc-fade-in 0.32s ease both;
}
@keyframes gtc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gtc-severity__detail-tier {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage); font-weight: 700;
  margin-bottom: 10px;
}
.gtc-severity__detail-h {
  font-size: 20px; font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: 10px;
}
.gtc-severity__detail p {
  font-size: 15px; line-height: 1.65;
  color: var(--ink-soft);
}
.gtc-severity__detail a {
  color: var(--navy);
  text-decoration: underline;
  font-weight: 600;
}

.gtc-severity__foot {
  text-align: center;
  margin: 22px auto 0;
  max-width: 600px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}
.gtc-severity__foot a { color: var(--navy); text-decoration: underline; }

@media (min-width: 700px) {
  .gtc-severity__deck { gap: 12px; }
  .gtc-severity__card { padding: 16px 12px 18px; gap: 10px; }
  .gtc-severity__name { font-size: 14px; }
  .gtc-severity__hint { font-size: 10px; }
  .gtc-severity__detail-h { font-size: 22px; }
  .gtc-severity__detail p { font-size: 16px; }
}

/* =========================================================
   REPAIRS: Sam's Diagnostic Pad (signature feature)
   Tap a component on the equipment-pad SVG to learn what it
   does, how it fails, what the repair runs, and Sam's first
   diagnostic move. Mobile-first: stage on top, panel below.
   ========================================================= */

.rep-pad-section { background: var(--stone-soft); }

.rep-pad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.rep-pad__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 460;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--cream);
}

.rep-pad__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.rep-pad__hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(46px, 8vw, 72px);
  height: clamp(46px, 8vw, 72px);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.rep-pad__hot:focus-visible { outline: none; }
.rep-pad__hot:focus-visible .rep-pad__hot-ring {
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(15, 30, 52, 0.18);
}

.rep-pad__hot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(15, 30, 52, 0.35);
  background: rgba(245, 242, 236, 0.0);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.rep-pad__hot:hover .rep-pad__hot-ring {
  background: rgba(111, 163, 165, 0.18);
  border-color: var(--sage);
}
.rep-pad__hot[aria-pressed="true"] .rep-pad__hot-ring {
  background: rgba(192, 57, 43, 0.14);
  border-style: solid;
  border-color: #C0392B;
  transform: scale(1.06);
  animation: rep-pad-pulse 2.1s ease-in-out infinite;
}

@keyframes rep-pad-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.42); }
  50% { box-shadow: 0 0 0 12px rgba(192, 57, 43, 0); }
}

.rep-pad__hot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-deep);
  background: var(--cream);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 30, 52, 0.15);
}
.rep-pad__hot[aria-pressed="true"] .rep-pad__hot-label {
  background: var(--navy-deep);
  color: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  .rep-pad__hot-ring,
  .rep-pad__hot[aria-pressed="true"] .rep-pad__hot-ring { animation: none; transition: none; }
}

.rep-pad__panel {
  background: var(--cream);
  border-left: 4px solid var(--navy-deep);
  border-radius: var(--r-md);
  padding: 22px 22px 24px;
  box-shadow: var(--sh-2);
  min-height: 280px;
}

.rep-pad__detail[hidden] { display: none; }
.rep-pad__detail {
  animation: gtc-fade-in 0.34s ease both;
}

.rep-pad__detail-cat {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 700;
  margin-bottom: 6px;
}
.rep-pad__detail-h {
  font-size: 26px; font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.012em; line-height: 1.18;
  margin-bottom: 10px;
}
.rep-pad__detail-lede {
  font-size: 15.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.rep-pad__detail-row {
  margin-bottom: 16px;
}
.rep-pad__detail-row:last-child { margin-bottom: 0; }

.rep-pad__detail-row-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 8px;
}

.rep-pad__symptoms {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}
.rep-pad__symptoms li {
  position: relative;
  padding: 10px 12px 10px 30px;
  background: var(--stone-soft);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rep-pad__symptoms li::before {
  content: "";
  position: absolute;
  left: 12px; top: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(111, 163, 165, 0.25);
}
.rep-pad__symptoms strong { color: var(--navy-deep); }

.rep-pad__detail-row--split {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px dashed rgba(15, 30, 52, 0.18);
}
.rep-pad__detail-price {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.rep-pad__detail-move {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
}

.rep-pad__foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 18px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.rep-pad__foot a { color: var(--navy-deep); font-weight: 700; text-decoration: underline; }

@media (min-width: 760px) {
  .rep-pad__hot-label { font-size: 12px; padding: 4px 11px; }
  .rep-pad__detail-row--split { grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
  .rep-pad__panel { padding: 26px 28px 28px; }
}

@media (min-width: 1024px) {
  .rep-pad {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .rep-pad__stage { aspect-ratio: 800 / 460; }
  .rep-pad__panel { min-height: 100%; }
}

/* =========================================================
   EQUIPMENT INSTALLS: pad reveal (signature feature)
   ========================================================= */

.ei-reveal-section {
  background: var(--paper);
  padding: 64px var(--gutter);
}
.ei-reveal-section .section__head { margin-bottom: 32px; }

.ei-reveal {
  position: relative;
  max-width: 980px; margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--navy-deep);
}
.ei-reveal__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ei-reveal__door {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  padding: 0;
}
.ei-reveal__door:focus-visible { outline: 3px solid var(--sage); outline-offset: -6px; }

.ei-reveal__slat {
  position: absolute;
  top: 0; bottom: 0;
  width: 20%;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 14px, rgba(0,0,0,0.3) 14px, rgba(0,0,0,0.3) 16px),
    linear-gradient(90deg, #243655 0%, #1A2E4C 50%, #0F1E34 100%);
  border-right: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.05);
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.ei-reveal__slat--1 { left: 0%;  transition-delay: 0s;    }
.ei-reveal__slat--2 { left: 20%; transition-delay: 0.08s; }
.ei-reveal__slat--3 { left: 40%; transition-delay: 0.16s; }
.ei-reveal__slat--4 { left: 60%; transition-delay: 0.24s; }
.ei-reveal__slat--5 { left: 80%; transition-delay: 0.32s; }

.ei-reveal__door-cta {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--cream);
  color: var(--navy-deep);
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 12px;
  font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  z-index: 1;
  transition: transform 0.25s ease, opacity 0.3s ease;
}
.ei-reveal__door:hover .ei-reveal__door-cta { transform: translate(-50%, -50%) scale(1.04); }
.ei-reveal__door-cta-icon { font-size: 16px; line-height: 1; }

.ei-reveal.is-open .ei-reveal__slat--1 { transform: translateY(-110%); transition-delay: 0s; }
.ei-reveal.is-open .ei-reveal__slat--2 { transform: translateY(-110%); transition-delay: 0.08s; }
.ei-reveal.is-open .ei-reveal__slat--3 { transform: translateY(-110%); transition-delay: 0.16s; }
.ei-reveal.is-open .ei-reveal__slat--4 { transform: translateY(-110%); transition-delay: 0.24s; }
.ei-reveal.is-open .ei-reveal__slat--5 { transform: translateY(-110%); transition-delay: 0.32s; }
.ei-reveal.is-open .ei-reveal__door {
  pointer-events: none;
}
.ei-reveal.is-open .ei-reveal__door-cta {
  opacity: 0;
  transition-delay: 0s;
}

.ei-reveal__pin {
  position: absolute;
  z-index: 6;
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.ei-reveal.is-open .ei-reveal__pin {
  opacity: 1;
  transition-delay: 0.85s;
  pointer-events: auto;
}
.ei-reveal__pin-dot {
  flex-shrink: 0;
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sage-soft);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 2px rgba(15, 30, 52, 0.7), 0 0 16px rgba(164, 193, 195, 0.6);
  animation: ei-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes ei-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(15, 30, 52, 0.7), 0 0 16px rgba(164, 193, 195, 0.6); }
  50%      { box-shadow: 0 0 0 2px rgba(15, 30, 52, 0.7), 0 0 26px rgba(164, 193, 195, 0.95); }
}
.ei-reveal__pin-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: rgba(15, 30, 52, 0.92);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ei-reveal__pin--heater   { top: 56%; left: 22%; }
.ei-reveal__pin--filter   { top: 30%; left: 50%; }
.ei-reveal__pin--pump     { top: 56%; left: 76%; }
.ei-reveal__pin--plumbing { top: 88%; left: 48%; }
.ei-reveal__pin--reverse  { flex-direction: row-reverse; }

.ei-reveal__caption {
  text-align: center;
  max-width: 720px; margin: 16px auto 0;
  font-size: 14px; color: var(--ink-soft);
  font-style: italic;
}

@media (max-width: 600px) {
  .ei-reveal__pin-label { font-size: 10px; padding: 4px 8px; }
  .ei-reveal__pin-dot { width: 11px; height: 11px; }
  .ei-reveal__door-cta { font-size: 11px; padding: 11px 16px; }
}

/* =========================================================
   ABOUT page styles
   ========================================================= */

.abt-hero {
  padding: 56px 22px 40px;
  background: var(--cream);
}
.abt-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
  align-items: center;
}
.abt-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: 14px;
}
.abt-hero__headline {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.abt-hero__headline em {
  font-family: 'Allura', cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--sage);
  font-size: 1.15em;
}
.abt-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.abt-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.abt-hero__media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.abt-hero__media img {
  width: 100%;
  height: auto;
  display: block;
}
.abt-hero__caption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 12px 16px;
  background: var(--cream);
  margin: 0;
  border-top: 1px solid rgba(15, 30, 52, 0.08);
}

@media (min-width: 900px) {
  .abt-hero__inner { grid-template-columns: 1.15fr 1fr; gap: 48px; }
  .abt-hero__headline { font-size: 44px; }
}

.abt-story {
  max-width: 760px;
  margin: 0 auto;
}
.abt-story p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.abt-story p:last-child { margin-bottom: 0; }
.abt-story strong { color: var(--navy-deep); }

.abt-story__portrait {
  margin: 0 0 24px 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.abt-story__portrait img {
  width: 180px; height: 180px; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  border: 4px solid var(--cream);
  outline: 2px solid var(--sage);
  box-shadow: var(--sh-2);
  display: block;
  -webkit-user-drag: none; user-select: none;
}
.abt-story__portrait figcaption {
  margin-top: 14px;
  display: flex; flex-direction: column; line-height: 1.2;
}
.abt-story__portrait-name {
  font-family: var(--script); font-size: 28px; line-height: 1;
  color: var(--navy-deep);
}
.abt-story__portrait-role {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 6px;
}
@media (min-width: 720px) {
  .abt-story__portrait {
    float: right;
    margin: 4px 0 16px 32px;
    width: 220px;
  }
  .abt-story__portrait img { width: 220px; height: 220px; }
}

.abt-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.abt-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  background: var(--cream);
  padding: 22px 24px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border-left: 3px solid var(--sage);
}
.abt-list__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  align-self: start;
  padding-top: 4px;
}
.abt-list__copy h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.abt-list__copy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.abt-list__copy a { color: var(--navy); text-decoration: underline; }

.abt-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.abt-team__card {
  background: var(--cream);
  padding: 22px 24px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.abt-team__card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.abt-team__card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.abt-team__card a { color: var(--navy); text-decoration: underline; }

@media (min-width: 760px) {
  .abt-team { grid-template-columns: repeat(3, 1fr); }
}

.abt-why {
  max-width: 760px;
  margin: 0 auto;
}
.abt-why p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.abt-why p:last-child { margin-bottom: 0; }
.abt-why strong { color: var(--navy-deep); }
.abt-why a { color: var(--navy); text-decoration: underline; }

/* A Week at Sundays Pools: flipping day cards. */
.abt-week-section { background: var(--stone-soft); }

.abt-week {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .abt-week { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .abt-week { grid-template-columns: repeat(7, 1fr); gap: 12px; }
}

.abt-week__card {
  perspective: 800px;
  aspect-ratio: 1;
}

.abt-week__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  font-family: var(--sans);
  display: block;
}
.abt-week__inner:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 4px;
  border-radius: var(--r-md);
}
.abt-week__inner--static {
  cursor: default;
  transform-style: flat;
  transition: none;
}

.abt-week__card.is-flipped .abt-week__inner {
  transform: rotateY(180deg);
}

.abt-week__face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--sh-1);
}

.abt-week__face--front {
  background: linear-gradient(160deg, var(--cream) 0%, #EDE6D6 100%);
  color: var(--navy-deep);
  gap: 8px;
}
.abt-week__face--back {
  background: var(--navy-deep);
  color: var(--cream);
  transform: rotateY(180deg);
  padding: 14px 14px 16px;
  gap: 6px;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}
.abt-week__face--off {
  background: linear-gradient(160deg, #6FA3A5 0%, #4A8083 100%);
  color: var(--cream);
  position: relative;
  padding: 14px 12px;
  gap: 6px;
}

.abt-week__short {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.abt-week__long {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.abt-week__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-top: auto;
  opacity: 0.85;
}

.abt-week__day-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
}
.abt-week__activity {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 242, 236, 0.92);
}

.abt-week__face--off .abt-week__short,
.abt-week__face--off .abt-week__long {
  color: #FFFFFF;
}
.abt-week__face--off .abt-week__activity {
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
.abt-week__off-mark {
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 2px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .abt-week__inner { transition: none; }
}

/* =========================================================
   ABOUT: Sam's Library (signature interactive)
   Six "books" on a shelf. Click a book to open it; the page
   panel below swaps to show that chapter. Each book has its
   own --book-color and --book-tint set inline for spine gradient.
   ========================================================= */

.abt-library-section { background: var(--stone-soft); }

.abt-library {
  max-width: 1100px;
  margin: 0 auto;
}

.abt-library__shelf-wrap {
  position: relative;
  margin-bottom: 28px;
}

.abt-library__shelf {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  align-items: flex-end;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.abt-library__shelf::-webkit-scrollbar { display: none; }

.abt-library__rail {
  height: 9px;
  background:
    linear-gradient(180deg, rgba(159, 136, 101, 0.55) 0%, rgba(122, 104, 73, 0.85) 50%, rgba(90, 75, 50, 0.95) 100%);
  border-radius: 0 0 4px 4px;
  margin: 0 8px;
  box-shadow: 0 6px 14px rgba(15, 30, 52, 0.18);
}

.abt-library__book {
  position: relative;
  width: 58px;
  height: 200px;
  border: none;
  background: linear-gradient(90deg, var(--book-color) 0%, var(--book-tint) 100%);
  cursor: pointer;
  border-radius: 3px 3px 0 0;
  padding: 12px 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,0.18),
    inset 1px 0 0 rgba(255,255,255,0.1),
    -2px 0 4px rgba(0,0,0,0.12);
  color: var(--cream);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.34s ease;
  flex-shrink: 0;
}
.abt-library__book::after {
  /* Subtle paper-edge stripe on the right (representing the book's pages). */
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; right: -3px;
  width: 3px;
  background: linear-gradient(180deg, #F2EAD7 0%, #DBD0B7 100%);
  border-radius: 0 2px 2px 0;
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.1);
}
.abt-library__book:hover {
  transform: translateY(-10px);
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,0.18),
    inset 1px 0 0 rgba(255,255,255,0.1),
    -2px 6px 16px rgba(0,0,0,0.22);
}
.abt-library__book[aria-pressed="true"] {
  transform: translateY(-22px) rotateZ(-2deg);
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,0.2),
    inset 1px 0 0 rgba(255,255,255,0.12),
    -3px 10px 22px rgba(0,0,0,0.32);
}
.abt-library__book:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 4px;
}

.abt-library__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}
.abt-library__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.03em;
  line-height: 1.18;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (min-width: 600px) {
  .abt-library__book { width: 70px; height: 240px; }
  .abt-library__title { font-size: 13px; }
}
@media (min-width: 900px) {
  .abt-library__shelf { gap: 8px; }
  .abt-library__book { width: 82px; height: 270px; }
  .abt-library__title { font-size: 14.5px; }
}

.abt-library__page {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 26px 28px;
  box-shadow: var(--sh-2);
  max-width: 800px;
  margin: 0 auto;
  border-left: 4px solid var(--navy-deep);
  min-height: 200px;
}

.abt-library__entry[hidden] { display: none; }
.abt-library__entry { animation: abt-library-fade 0.34s ease both; }

.abt-library__entry-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 0 0 8px;
}
.abt-library__entry-h {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.abt-library__entry p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

@keyframes abt-library-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .abt-library__book,
  .abt-library__entry { transition: none; animation: none; }
}

/* =========================================================
   FAQ page styles
   ========================================================= */

.faq-page-hero {
  padding: 48px 22px 28px;
  text-align: center;
  background: var(--cream);
}
.faq-page-hero h1 {
  font-size: 36px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.faq-page-hero p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

.faq-cat {
  max-width: 880px;
  margin: 0 auto 36px;
  padding: 0 22px;
}
.faq-cat__h {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 28px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sage);
  scroll-margin-top: 90px;
}
.faq-cat__h.is-target {
  animation: faq-cat-flash 1.4s ease-out;
}
@keyframes faq-cat-flash {
  0%   { background: rgba(111, 163, 165, 0.0); padding-left: 0; }
  20%  { background: rgba(111, 163, 165, 0.18); padding-left: 8px; }
  100% { background: rgba(111, 163, 165, 0.0); padding-left: 0; }
}

/* Sundays Concierge: chat-style FAQ navigator. Bot avatar + bubble + reply
   chips. Tapping a chip reveals a response bubble and scrolls to the
   matching FAQ category. Unique to this site. */
.faq-concierge {
  max-width: 880px;
  margin: 0 auto 36px;
  padding: 0 22px;
}

.faq-concierge__heading {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}

.faq-concierge__chat {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  box-shadow: var(--sh-2);
}

.faq-concierge__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  animation: faq-concierge-in 0.32s ease-out both;
}
.faq-concierge__row[hidden] { display: none; }

.faq-concierge__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage), var(--navy-deep));
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Allura', cursive;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 30, 52, 0.18);
}

.faq-concierge__bubble {
  background: var(--stone-soft);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  max-width: 540px;
}
.faq-concierge__bubble p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.faq-concierge__replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 6px 48px;
}
.faq-concierge__reply {
  background: #FFFFFF;
  border: 1.5px solid rgba(15, 30, 52, 0.2);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.faq-concierge__reply:hover {
  border-color: var(--sage);
  background: var(--stone-soft);
  transform: translateY(-1px);
}
.faq-concierge__reply.is-active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--cream);
}

@keyframes faq-concierge-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-concierge__row { animation: none; }
  .faq-cat__h.is-target { animation: none; }
}

/* =========================================================
   LEGAL page styles (privacy, terms)
   ========================================================= */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 60px;
}
.legal-page h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.legal-page__updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.legal-page h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 32px 0 10px;
  letter-spacing: -0.01em;
}
.legal-page h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 22px 0 8px;
}
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-page p { margin-bottom: 14px; }
.legal-page ul, .legal-page ol {
  padding-left: 22px;
  margin-bottom: 14px;
}
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--navy); text-decoration: underline; }
.legal-page strong { color: var(--navy-deep); }

/* =========================================================
   LOCATION (SEO) page styles
   ========================================================= */

.loc-hero {
  padding: 48px 22px 36px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--stone-soft) 100%);
  text-align: center;
}
.loc-hero h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 auto 14px;
  max-width: 760px;
}
.loc-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 22px;
}
.loc-hero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 760px) {
  .loc-hero h1 { font-size: 40px; }
}

.loc-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 22px 48px;
}
.loc-content h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.012em;
  margin: 36px 0 12px;
}
.loc-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 22px 0 8px;
}
.loc-content p, .loc-content li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.loc-content p { margin-bottom: 16px; }
.loc-content ul, .loc-content ol { padding-left: 22px; margin-bottom: 18px; }
.loc-content li { margin-bottom: 6px; }
.loc-content a { color: var(--navy); text-decoration: underline; }
.loc-content strong { color: var(--navy-deep); }

.loc-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0;
}
.loc-services__card {
  background: var(--cream);
  padding: 18px 20px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--sage);
}
.loc-services__card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.loc-services__card p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.loc-services__card a {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
}

@media (min-width: 720px) {
  .loc-services { grid-template-columns: repeat(2, 1fr); }
}

.loc-areas {
  background: var(--stone-soft);
  padding: 24px;
  border-radius: var(--r-md);
  margin: 28px 0;
}
.loc-areas h3 { margin-top: 0; }
.loc-areas ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
}
.loc-areas li {
  font-size: 14px;
  margin: 0;
  padding-left: 16px;
  position: relative;
}
.loc-areas li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.loc-cross {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 22px 24px;
  border-radius: var(--r-md);
  margin: 28px 0 36px;
}
.loc-cross h3 {
  color: #FFFFFF;
  margin: 0 0 12px;
}
.loc-cross p {
  color: rgba(245, 242, 236, 0.9);
  margin-bottom: 12px;
}
.loc-cross ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0;
}
.loc-cross li {
  color: rgba(245, 242, 236, 0.9);
  margin: 0;
}
.loc-cross a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.loc-map {
  margin: 28px 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--stone-soft);
  position: relative;
}
.loc-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}
.loc-map__caption {
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--cream);
  border-top: 1px solid rgba(15, 30, 52, 0.08);
  margin: 0;
}
@media (min-width: 760px) {
  .loc-map iframe { height: 420px; }
}

/* =========================================================
   CONTACT page styles (signature feature: Sam's Response Window)
   ========================================================= */

.ct-hero {
  padding: 48px 22px 40px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--stone-soft) 100%);
}
.ct-hero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.ct-hero__copy {
  max-width: 540px;
}
.ct-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: 12px;
}
.ct-hero__headline {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.ct-hero__headline em {
  font-family: 'Allura', cursive;
  font-style: normal;
  font-weight: 400;
  color: var(--sage);
  font-size: 1.18em;
}
.ct-hero__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.ct-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}
.ct-hero__bullets li {
  font-size: 14.5px;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  align-items: center;
}
.ct-hero__bullets li span {
  color: var(--sage);
  font-weight: 800;
}
.ct-hero__or {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 30, 52, 0.18);
}
.ct-hero__or a {
  color: var(--navy-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ct-hero__reason {
  margin-bottom: 0;
}
.ct-hero__form {
  margin-top: 16px;
}

@media (min-width: 1000px) {
  .ct-hero__split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: start;
  }
  .ct-hero__copy {
    position: sticky;
    top: 100px;
    align-self: start;
  }
  .ct-hero__reason,
  .ct-hero__form {
    grid-column: 2;
  }
  .ct-hero__copy {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .ct-hero__headline { font-size: 38px; }
}

/* Sam's Response Window: clock face on the left, live readout on the right.
   Hour and minute hands rotate via inline transforms updated by JS. */
.ct-window-section { background: var(--stone-soft); }

.ct-window {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  background: var(--cream);
  padding: 28px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.ct-window__face {
  display: flex;
  justify-content: center;
}

.ct-window__dial {
  width: clamp(180px, 50vw, 240px);
  aspect-ratio: 1;
}
.ct-window__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hands rotate via the SVG `transform` attribute (set by JS). We do NOT
   set CSS transform-origin or transform-box here. On Safari and Chrome,
   when those CSS properties exist the browser sometimes recomputes the
   rotation around the line's bounding-box center (y ≈ 83) instead of the
   SVG-attribute rotation center (100, 100), which makes the hands look
   detached from the dial. Leaving CSS transform-* unset means the SVG
   `transform="rotate(deg 100 100)"` is the only signal — and that always
   rotates around the dial center. The cost is no CSS transition between
   minute snaps, which is fine since the second hand updates every second
   and the others tick once per minute. */
.ct-window__hand-h,
.ct-window__hand-m,
.ct-window__hand-s {
  /* subtle drop-shadow gives the hands depth on the dark dial */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

.ct-window__readout {
  text-align: center;
}
.ct-window__day {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 0 0 6px;
}
.ct-window__time {
  font-size: 38px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.ct-window__status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(111, 163, 165, 0.12);
  margin-bottom: 12px;
}
.ct-window__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(111, 163, 165, 0.6);
  animation: ct-window-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
.ct-window__pulse--off {
  background: #C0392B;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.6);
}
@keyframes ct-window-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 163, 165, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(111, 163, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 163, 165, 0); }
}
.ct-window__status {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ct-window__expectation {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto 12px;
  max-width: 380px;
}
.ct-window__tz {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0.6;
  margin: 0 0 14px;
}
.ct-window__back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid rgba(15, 30, 52, 0.25);
  border-radius: 999px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ct-window__back:hover {
  border-color: var(--navy-deep);
  background: var(--cream);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .ct-window__pulse { animation: none; }
}

.ct-window__foot {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 18px auto 0;
}

@media (min-width: 760px) {
  .ct-window {
    grid-template-columns: auto 1fr;
    gap: 36px;
    padding: 32px 36px;
  }
  .ct-window__readout { text-align: left; }
  .ct-window__expectation { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-window__hand-h,
  .ct-window__hand-m { transition: none; }
}

/* Contact form section */
.ct-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.ct-reason {
  border: none;
  margin: 0 0 24px;
  padding: 0;
}
.ct-reason__legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 12px;
  padding: 0;
}
.ct-reason__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .ct-reason__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .ct-reason__grid { grid-template-columns: 1fr 1fr 1fr; }
}

.ct-reason__card {
  position: relative;
  cursor: pointer;
  display: block;
}
.ct-reason__card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-reason__card > span {
  display: block;
  padding: 14px 16px;
  background: var(--cream);
  border: 2px solid rgba(15, 30, 52, 0.12);
  border-radius: var(--r-md);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ct-reason__card:hover > span {
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}
.ct-reason__card input:checked + span {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
  color: var(--cream);
  box-shadow: var(--sh-2);
}
.ct-reason__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.ct-reason__sub {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ct-reason__card input:checked + span .ct-reason__title { color: var(--cream); }
.ct-reason__card input:checked + span .ct-reason__sub { color: rgba(245, 242, 236, 0.78); }

.ct-form {
  background: var(--cream);
  padding: 26px 24px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.ct-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 600px) {
  .ct-form__row { grid-template-columns: 1fr 1fr; }
}

.ct-form__field {
  display: flex;
  flex-direction: column;
}
.ct-form__field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.ct-form__field input,
.ct-form__field textarea {
  font-family: var(--sans);
  font-size: 16px;
  padding: 11px 14px;
  border: 1.5px solid rgba(15, 30, 52, 0.18);
  border-radius: var(--r-sm);
  background: #FFFFFF;
  color: var(--navy-deep);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ct-form__field input:focus,
.ct-form__field textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(111, 163, 165, 0.22);
}
.ct-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.ct-form__pref {
  border: none;
  padding: 0;
  margin: 16px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
}
.ct-form__pref legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  margin-right: 12px;
  padding: 0;
}
.ct-form__pref label {
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-form__submit {
  width: 100%;
  margin-top: 4px;
}

.ct-form__legal {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  margin: 12px 0 0;
}
.ct-form__legal a { color: var(--navy); text-decoration: underline; }

/* Inline submission states. The form, success, and error panels are
   siblings; JS toggles which one is visible. Keeps the visitor on the
   page instead of redirecting to formspree.io. */
.ct-form__result {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  text-align: center;
  animation: ct-form-fade-in 0.42s cubic-bezier(.2,.8,.2,1);
}
.ct-form__result--success { border-left: 4px solid var(--sage); }
.ct-form__result--error { border-left: 4px solid #b3503e; }

.ct-form__result-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.ct-form__result--success .ct-form__result-icon {
  background: var(--sage); color: var(--cream);
}
.ct-form__result--error .ct-form__result-icon {
  background: #f4ddd5; color: #b3503e;
}

.ct-form__result-title {
  font-size: 22px; font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.ct-form__result-body {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.ct-form__result-body a { color: var(--navy); font-weight: 600; }
.ct-form__result-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.ct-form__result-meta a { color: var(--navy); font-weight: 700; }
.ct-form__result-action { margin-top: 4px; }

/* Submitting state: lock the button, show "Sending..." */
.ct-form__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

@keyframes ct-form-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-form__result { animation: none; }
}

/* Honeypot: invisible to humans, visible to bots. Positioned offscreen
   rather than display:none because some scrapers detect display:none and
   skip the field. Anything an offscreen field receives is bot input. */
.ct-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Direct channel cards */
.ct-channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .ct-channel-grid { grid-template-columns: 1fr 1fr; }
}

.ct-channel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 18px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-decoration: none;
  border-left: 3px solid var(--sage);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ct-channel:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.ct-channel__icon {
  grid-row: span 2;
  font-size: 28px;
  color: var(--sage);
  width: 44px;
  text-align: center;
}
.ct-channel__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-deep);
}
.ct-channel__sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* =========================================================
   SITE SECURITY DEFAULTS
   These rules apply to every page on every site we build.
   Real protection (drag-to-save, accidental UI text-select),
   not security theater. Right-click and DevTools are NOT
   blocked because that hurts accessibility for zero security
   gain (bypassed in 5 seconds with View Source).
   ========================================================= */

/* Block drag-and-drop of images out of the page (to other tabs,
   the desktop, file managers). Doesn't block right-click → Save
   Image As, by design: blocking that breaks accessibility. */
img,
svg image,
picture {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* Prevent unintended text selection on UI elements. Body text,
   paragraphs, FAQ answers, form fields stay selectable so the
   visitor can copy useful info. */
.btn,
button:not(textarea):not(input),
.nav a,
.topbar,
.topbar a,
.site-header .logo,
.footer__social-btn,
.nav__toggle,
.nav__dropdown-toggle,
.ct-reason__card,
.ct-reason__card span,
.ct-channel,
.ct-channel__name,
.ct-channel__sub,
.faq-concierge__reply,
.faq-concierge__avatar,
.abt-week__inner,
.abt-week__face,
.rep-pad__hot,
.rep-pad__hot-label,
.gtc-severity__card,
.rep-card,
.ei-tier__badge,
[role="button"] {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent the iOS long-press magnifier and selection callout on
   buttons specifically. Has no effect on text content. */
button,
.btn,
.nav a,
.faq-concierge__reply,
.ct-reason__card,
.abt-week__inner {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ASK BOT, Sam's assistant chat widget
   Floating bottom-right button + popup panel.
   ========================================================= */
.ask-bot {
  position: fixed; right: 16px; bottom: 16px;
  z-index: 9000;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}
.ask-bot__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy-deep, #0F1E34); color: var(--cream, #F5F2EC);
  border: 2px solid var(--sage, #6FA3A5);
  padding: 12px 18px; border-radius: 999px;
  box-shadow: var(--sh-2, 0 8px 24px rgba(0,0,0,0.18));
  cursor: pointer;
  font-weight: 600; font-size: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  position: relative;
}
.ask-bot__toggle:hover { transform: translateY(-2px); }
.ask-bot__toggle:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
.ask-bot__toggle-icon { display: inline-flex; }
.ask-bot__toggle-pulse {
  position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--sage);
  opacity: 0; pointer-events: none;
  animation: ask-bot-pulse 2.6s ease-out infinite;
}
@keyframes ask-bot-pulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.18); }
  100% { opacity: 0;    transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-bot__toggle-pulse { animation: none; display: none; }
  .ask-bot__toggle:hover { transform: none; }
}

.ask-bot--open .ask-bot__toggle-pulse { display: none; }

.ask-bot__panel {
  position: absolute; bottom: calc(100% + 12px); right: 0;
  width: min(380px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 120px));
  background: var(--cream, #F5F2EC);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.22);
  border: 1px solid rgba(15, 30, 52, 0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ask-bot-rise 220ms ease-out;
}
.ask-bot__panel[hidden] { display: none; }
@keyframes ask-bot-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-bot__panel { animation: none; }
}

.ask-bot__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--navy-deep, #0F1E34); color: var(--cream, #F5F2EC);
  border-bottom: 2px solid var(--sage, #6FA3A5);
}
.ask-bot__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sage, #6FA3A5); color: var(--navy-deep, #0F1E34);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.ask-bot__head-text { flex: 1; line-height: 1.2; }
.ask-bot__head-name { margin: 0; font-weight: 700; font-size: 14px; }
.ask-bot__head-status {
  margin: 2px 0 0; font-size: 11px; color: rgba(245, 242, 236, 0.75);
  display: inline-flex; align-items: center; gap: 6px;
}
.ask-bot__head-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage, #6FA3A5);
  box-shadow: 0 0 0 0 rgba(111, 163, 165, 0.6);
  animation: ask-bot-status 2s ease-out infinite;
}
@keyframes ask-bot-status {
  0%   { box-shadow: 0 0 0 0 rgba(111, 163, 165, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(111, 163, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 163, 165, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-bot__head-dot { animation: none; }
}
.ask-bot__close {
  background: transparent; border: 0; color: var(--cream, #F5F2EC);
  font-size: 24px; line-height: 1; padding: 4px 8px;
  border-radius: 8px; cursor: pointer;
}
.ask-bot__close:hover { background: rgba(255,255,255,0.1); }
.ask-bot__close:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.ask-bot__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}

.ask-bot__msg { display: flex; flex-direction: column; gap: 8px; }
.ask-bot__msg--user { align-items: flex-end; }
.ask-bot__msg--bot { align-items: flex-start; }

.ask-bot__bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
}
.ask-bot__msg--user .ask-bot__bubble {
  background: var(--navy-deep, #0F1E34); color: var(--cream, #F5F2EC);
  border-bottom-right-radius: 4px;
}
.ask-bot__msg--bot .ask-bot__bubble {
  background: #fff; color: var(--ink, #1A2D4A);
  border: 1px solid rgba(15, 30, 52, 0.08);
  border-bottom-left-radius: 4px;
}

.ask-bot__msg--typing .ask-bot__bubble {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 14px 16px;
}
.ask-bot__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(15, 30, 52, 0.4);
  animation: ask-bot-typing 1.2s ease-in-out infinite;
}
.ask-bot__dot:nth-child(2) { animation-delay: 0.18s; }
.ask-bot__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes ask-bot-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-bot__dot { animation: none; opacity: 0.6; }
}

.ask-bot__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 100%;
}
.ask-bot__chip {
  background: rgba(111, 163, 165, 0.12);
  color: var(--navy-deep, #0F1E34);
  border: 1px solid rgba(111, 163, 165, 0.4);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; line-height: 1.3; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background 140ms ease, transform 140ms ease;
  font-family: inherit;
}
.ask-bot__chip:hover {
  background: rgba(111, 163, 165, 0.22);
  transform: translateY(-1px);
}
.ask-bot__chip:focus-visible {
  outline: 2px solid var(--sage, #6FA3A5); outline-offset: 2px;
}

.ask-bot__form {
  display: flex; align-items: stretch; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(15, 30, 52, 0.08);
  background: #fff;
}
.ask-bot__label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ask-bot__input {
  flex: 1;
  border: 1px solid rgba(15, 30, 52, 0.18);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px; font-family: inherit;
  color: var(--ink, #1A2D4A);
  background: var(--cream, #F5F2EC);
  outline: none;
}
.ask-bot__input::placeholder { color: rgba(15, 30, 52, 0.45); }
.ask-bot__input:focus {
  border-color: var(--sage, #6FA3A5);
  box-shadow: 0 0 0 3px rgba(111, 163, 165, 0.18);
}
.ask-bot__send {
  background: var(--navy-deep, #0F1E34); color: var(--cream, #F5F2EC);
  border: 0; border-radius: 50%;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 140ms ease, transform 140ms ease;
}
.ask-bot__send:hover { background: var(--sage, #6FA3A5); color: var(--navy-deep, #0F1E34); transform: translateY(-1px); }
.ask-bot__send:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.ask-bot__fineprint {
  margin: 0; padding: 8px 14px 12px;
  font-size: 11px; line-height: 1.4;
  color: var(--ink-soft, #5A6A82);
  background: #fff;
  text-align: center;
  border-top: 1px solid rgba(15, 30, 52, 0.04);
}
.ask-bot__fineprint a { color: var(--navy-deep, #0F1E34); font-weight: 600; }

@media (max-width: 520px) {
  .ask-bot { right: 12px; bottom: 12px; }
  .ask-bot__toggle-label { display: none; }
  .ask-bot__toggle { padding: 14px; }
  .ask-bot__panel {
    width: calc(100vw - 24px);
    height: min(560px, calc(100vh - 100px));
  }
}