/* Plus Jakarta Sans, self-hosted: one variable woff2 (latin) covers weights 400-800. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ======================================================================
   Base and content-page styles (formerly /styles.css). Scoped to body.site-base, the
   pages that loaded that file, so the home page is unaffected. :where() keeps the
   original specificity, and source order is unchanged.
   ====================================================================== */
/* ==========================================================================
   Sunnyside Pool Services — design system
   Navy is the signature. Yellow is the only pop, reserved for the one CTA.

   Two rules that fixed real defects in the previous build:
   1. No `.section:nth-of-type(even)` striping. That selector (0-2-0) beat
      `.final-cta` (0-1-0) and stripped its background, leaving white text on
      a pale ground on every page. Section grounds are explicit classes now.
   2. Heroes use min-height, never a fixed height. The old 560px hero clipped
      its own H1 on mobile because the content measured 740px.
   ========================================================================== */

:where(:root:has(> body.site-base)) {
  /* brand */
  --navy-950: #071726;
  --navy-900: #0B2338;
  --navy-800: #10314C;
  --navy-700: #14456B;
  --sun:      #F5B31E;  /* accent on DARK grounds and fills only */
  /* Accent used as text or marks on LIGHT grounds. The old #DC9A05 measured
     2.42:1 on white — a WCAG AA failure at any size. This is 5.93:1 on white
     and 5.41:1 on mist. Never set accent text on light using --sun. */
  --sun-ink:  #8A5A00;
  /* Campaign-only warm/cool pair (cheerstosummer.html) — decorative fills and
     the hero-lead scrim only. Never used for body text: not contrast-checked
     for that use, unlike the tokens above. */
  --citrus: #F2762B;
  --lagoon: #0E6E7C;
  --sand:   #FFF6EB;

  /* surfaces + ink (neutrals carry a navy bias, not pure grey) */
  --paper: #FFFFFF;
  --mist:  #F1F5F8;
  --ink:   #0B2338;
  --ink-2: #4A6379;
  /* #7D93A6 was 3.18:1 on white and 2.90:1 on mist — an AA failure everywhere it
     carried text (.review-meta, .review-source, .prep h3). Darkened to clear 4.5:1
     on both grounds: 5.05:1 on white, 4.61:1 on mist. */
  --ink-3: #5D7183;
  --line:  #DCE5EC;

  /* one elevation system, used everywhere */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --sh-1: 0 1px 2px rgba(7,23,38,.06), 0 2px 8px rgba(7,23,38,.04);
  --sh-2: 0 2px 4px rgba(7,23,38,.06), 0 12px 28px -8px rgba(7,23,38,.12);
  --sh-3: 0 4px 8px rgba(7,23,38,.08), 0 32px 64px -16px rgba(7,23,38,.24);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1220px;
  --pad: clamp(1.1rem, 4vw, 3.2rem);
}

:where(.site-base, .site-base *),
:where(.site-base, .site-base *)::before,
:where(.site-base, .site-base *)::after { box-sizing: border-box; }

:where(html:has(> body.site-base)) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :where(html:has(> body.site-base)) { scroll-behavior: auto; }
  :where(.site-base, .site-base *),
:where(.site-base, .site-base *)::before,
:where(.site-base, .site-base *)::after { transition: none !important; animation: none !important; }
}

:where(body.site-base) {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(.site-base) img { display: block; max-width: 100%; height: auto; }

:where(.site-base) a { color: var(--navy-700); }

:where(.site-base) :where(a,
:where(.site-base) button,
:where(.site-base) input,
:where(.site-base) select,
:where(.site-base) textarea,
:where(.site-base) summary):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.site-base) .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sun); color: var(--navy-900);
  padding: .8rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
:where(.site-base) .skip-link:focus { left: 0; }

:where(.site-base) .container { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
:where(.site-base) .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(.site-base) .brand { display: block; flex: none; line-height: 0; }
:where(.site-base) .brand picture { display: block; }
:where(.site-base) .brand img { height: 50px; width: auto; }

/* --------------------------------------------------------- buttons */

:where(.site-base) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  padding: 1rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
:where(.site-base) .btn svg { width: 18px; height: 18px; flex: none; }
:where(.site-base) .btn-sun { background: var(--sun); color: var(--navy-900); box-shadow: 0 6px 20px -6px rgba(245,179,30,.75); }
:where(.site-base) .btn-sun:hover { background: #FFC33F; transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(245,179,30,.9); }
:where(.site-base) .btn-sm { padding: .62rem 1.1rem; font-size: .9rem; }
@media (min-width: 420px) { :where(.site-base) .btn-sm { padding: .68rem 1.25rem; } }

/* --------------------------------------------------------- hero */

:where(.site-base) .hero {
  position: relative;
  min-height: 560px;              /* min-height, never height — see file header */
  display: flex; align-items: flex-end;
  background: var(--navy-900);
}
:where(.site-base) .hero > picture,
:where(.site-base) .hero > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
:where(.site-base) .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,    rgba(7,23,38,.93) 0%, rgba(7,23,38,.58) 34%, rgba(7,23,38,.04) 68%),
    linear-gradient(to right,  rgba(7,23,38,.66) 0%, rgba(7,23,38,0) 58%),
    /* keeps the nav and eyebrow legible where they cross bright water */
    linear-gradient(to bottom, rgba(7,23,38,.5) 0%, rgba(7,23,38,0) 22%);
}
:where(.site-base) .hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(1.8rem, 3vw, 2.6rem);
}
:where(.site-base) .eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sun); background: rgba(245,179,30,.14); border: 1px solid rgba(245,179,30,.34);
  padding: .38rem .7rem; border-radius: 999px; margin: 0 0 1.1rem;
}
:where(.site-base) .hero h1 {
  font-size: clamp(2.05rem, 5.4vw, 3.5rem); font-weight: 800; letter-spacing: -.038em;
  line-height: 1.03; color: #fff; margin: 0 0 .9rem; max-width: 19ch; text-wrap: balance;
}
:where(.site-base) .hero h1 em { font-style: normal; color: var(--sun); }
:where(.site-base) .hero-lede { color: rgba(255,255,255,.84); font-size: 1.05rem; margin: 0 0 1.6rem; max-width: 46ch; }
:where(.site-base) .hero-sub { display: block; font-size: .87rem; color: rgba(255,255,255,.62); margin-top: .85rem; }

/* --------------------------------------------------------- proof card
   Floats over the bottom edge of the hero. The dark-to-light transition is
   the strongest structural moment on the page, so the card uses it rather
   than sitting below it — the proof reads as one object, and the rating
   leading it gets the emphasis it has earned.

   Anything the card overlaps must carry `has-proof-card`, which adds the
   bottom padding the overlap eats. Without it the card covers hero copy. */

:where(.site-base) .proof-bar { background: var(--paper); padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }

:where(.site-base) .proof {
  display: block; padding: 1.35rem 1.5rem;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
:where(.site-base) .proof:first-child { border-top: 0; }

:where(.site-base) .proof-label { display: block; font-size: .84rem; color: var(--ink-2); }

:where(.site-base) a.proof { transition: background .16s ease; }
:where(.site-base) a.proof .proof-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
:where(.site-base) a.proof:hover { background: var(--mist); }
:where(.site-base) a.proof:hover .proof-label { color: var(--ink); text-decoration-color: var(--sun-ink); }

@media (min-width: 820px) {
  :where(.site-base) .proof { border-top: 0; padding: 1.6rem 1.75rem; }
  :where(.site-base) .proof + .proof { border-left: 1px solid var(--line); }
}

/* room for the overlap */
:where(.site-base) .hero.has-proof-card .hero-inner { padding-bottom: clamp(4.8rem, 8vw, 5.8rem); }
:where(.site-base) .section-navy.has-proof-card { padding-bottom: clamp(5rem, 8vw, 6.2rem); }

/* --------------------------------------------------------- sections */

:where(.site-base) .section { padding-block: clamp(2.8rem, 6vw, 4.5rem); }
:where(.site-base) .section-mist { background: var(--mist); }
:where(.site-base) .section-navy { background: var(--navy-900); color: #fff; }

:where(.site-base) .section-head { max-width: 640px; margin-bottom: 2rem; }
:where(.site-base) .section-head.center { margin-inline: auto; text-align: center; }
:where(.site-base) h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; letter-spacing: -.032em;
  line-height: 1.08; margin: 0 0 .6rem; text-wrap: balance;
}
/* page title for pages whose h1 is not inside a photographic hero */
:where(.site-base) .page-title {
  font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.036em;
  line-height: 1.05; margin: 0 0 .7rem; max-width: 20ch; text-wrap: balance;
}
:where(.site-base) .page-title em { font-style: normal; color: var(--sun); }
:where(.site-base) h2 em { font-style: normal; color: var(--sun-ink); }
:where(.site-base) .section-navy h2 em,
:where(.site-base) .final-cta h2 em { color: var(--sun); }
:where(.site-base) .lede { color: var(--ink-2); font-size: 1.02rem; margin: 0; max-width: 62ch; }
:where(.site-base) .section-navy .lede { color: rgba(255,255,255,.78); }

/* long-form body copy for legal/policy pages — no card, no grid, just text */
:where(.site-base) .policy-content { max-width: 68ch; }
:where(.site-base) .policy-content > * + * { margin-top: 1.1rem; }
:where(.site-base) .policy-content ul { margin: 0; padding-left: 1.2rem; }
:where(.site-base) .policy-content li { margin-top: .5rem; }
:where(.site-base) .policy-content li:first-child { margin-top: 0; }

/* --------------------------------------------------------- cards */

:where(.site-base) .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
:where(.site-base) .card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
@media (min-width: 1000px) { :where(.site-base) .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { :where(.site-base) .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

:where(.site-base) .card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:where(.site-base) .card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #C3D4E0; }
:where(.site-base) .card-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--navy-900);
  display: grid; place-items: center; margin-bottom: 1rem;
}
:where(.site-base) .card-icon svg { width: 21px; height: 21px; color: var(--sun); }
:where(.site-base) .card h3 {
  font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem;
  display: flex; align-items: center; gap: .4rem;
}
:where(.site-base) .card h3 svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s ease, color .18s ease; }
:where(.site-base) .card:hover h3 svg { transform: translateX(3px); color: var(--sun-ink); }
:where(.site-base) .card p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------- tick list */

:where(.site-base) .two-col { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
@media (min-width: 960px) { :where(.site-base) .two-col { grid-template-columns: .85fr 1.15fr; align-items: start; } }

:where(.site-base) .ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
:where(.site-base) .tick { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; }
:where(.site-base) .tick-mark {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sun);
  display: grid; place-items: center; margin-top: .15rem;
}
:where(.site-base) .tick-mark svg { width: 14px; height: 14px; color: var(--navy-900); }
:where(.site-base) .tick h3 { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .25rem; }
:where(.site-base) .tick p { font-size: .92rem; color: var(--ink-2); margin: 0; }

:where(.site-base) .review {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 1rem; margin: 0;
}
:where(.site-base) .review-feature { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: var(--sh-2); }
:where(.site-base) .review-mark { width: 26px; height: 26px; color: var(--sun); flex: none; }
:where(.site-base) .review blockquote { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink-2); flex: 1; }
:where(.site-base) .review-feature blockquote { color: rgba(255,255,255,.9); font-size: 1.02rem; }
:where(.site-base) .review figcaption { display: flex; align-items: center; gap: .7rem; }
:where(.site-base) .review-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy-900); color: var(--sun);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; flex: none;
}
:where(.site-base) .review-feature .review-avatar { background: var(--sun); color: var(--navy-900); }
:where(.site-base) .review-name { font-weight: 700; font-size: .92rem; letter-spacing: -.01em; }
:where(.site-base) .review-meta { font-size: .79rem; color: var(--ink-3); }
:where(.site-base) .review-feature .review-meta { color: rgba(255,255,255,.55); }
/* one review standing alone as a pull quote, rather than a grid of them */
:where(.site-base) .review-solo { max-width: 62rem; margin-inline: auto; margin-top: clamp(2.4rem, 4vw, 3.2rem); }
:where(.site-base) .review-solo .review-feature { padding: clamp(1.8rem, 4vw, 2.6rem); }
:where(.site-base) .review-solo blockquote { font-size: clamp(1.02rem, 1.6vw, 1.14rem); line-height: 1.62; }

:where(.site-base) .review-stars { display: flex; gap: .18rem; color: var(--sun); }
:where(.site-base) .review-stars svg { width: 17px; height: 17px; }

:where(.site-base) .review-source {
  margin: 1.3rem 0 0; font-size: .82rem; color: var(--ink-3); max-width: 70ch;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
:where(.site-base) .review-source a { color: var(--ink-2); text-decoration-color: var(--line); }
:where(.site-base) .review-source a:hover { color: var(--ink); }

/* --------------------------------------------------------- split + panel */

:where(.site-base) .split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { :where(.site-base) .split { grid-template-columns: 1.3fr 1fr; } }

:where(.site-base) .panel {
  background: var(--navy-900); color: #fff; border-radius: var(--r-lg);
  padding: 1.9rem; box-shadow: var(--sh-2);
}
:where(.site-base) .panel h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 .6rem; }
:where(.site-base) .panel p { font-size: .94rem; color: rgba(255,255,255,.78); margin: 0 0 1.2rem; }
:where(.site-base) .panel p:last-child { margin-bottom: 0; }
:where(.site-base) .panel ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
:where(.site-base) .panel li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; font-size: .92rem; color: rgba(255,255,255,.82); }
:where(.site-base) .panel li svg { width: 15px; height: 15px; color: var(--sun); margin-top: .3rem; }
:where(.site-base) .panel-link {
  color: var(--sun); font-weight: 700; font-size: .94rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
:where(.site-base) .panel-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
:where(.site-base) .panel-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------- steps */

:where(.site-base) .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
:where(.site-base) .step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; position: relative; overflow: hidden;
}
:where(.site-base) .step::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sun); }
:where(.site-base) .step h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.022em; margin: 0 0 .4rem; }
:where(.site-base) .step p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------- faq */

:where(.site-base) .faq-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 980px) { :where(.site-base) .faq-layout { grid-template-columns: 1fr 1.7fr; } }
:where(.site-base) .faq-list { display: grid; gap: .7rem; min-width: 0; }
:where(.site-base) .faq-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.35rem; box-shadow: var(--sh-1);
}
:where(.site-base) .faq-item > summary {
  list-style: none; cursor: pointer; font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.018em; display: flex; gap: 1rem; align-items: flex-start;
}
:where(.site-base) .faq-item > summary::-webkit-details-marker { display: none; }
:where(.site-base) .faq-item > summary::after {
  content: "+"; margin-left: auto; color: var(--sun-ink); font-weight: 800;
  font-size: 1.3rem; line-height: 1; flex: none;
}
:where(.site-base) .faq-item[open] > summary::after { content: "\2212"; }
:where(.site-base) .faq-item p { color: var(--ink-2); margin: .9rem 0 0; font-size: .96rem; }

/* Provenance matters but does not deserve a full section with a heading, a
   lede and four bordered cards — it was shouting louder than the answers it
   supports. One quiet line, set as a footnote. */
:where(.site-base) .section-sources { padding-block: 0 clamp(2.4rem, 5vw, 3.4rem); }
:where(.site-base) .sources-line {
  margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.65; color: var(--ink-3);
}
:where(.site-base) .sources-line span { font-weight: 700; color: var(--ink-2); }
:where(.site-base) .sources-line a { color: var(--ink-2); text-decoration-color: var(--line); overflow-wrap: anywhere; }
:where(.site-base) .sources-line a:hover { color: var(--ink); }

/* --------------------------------------------------------- message form */

:where(.site-base) .message-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem); box-shadow: var(--sh-2);
}
:where(.site-base) .message-form { display: grid; gap: 1.15rem; margin-top: 1.6rem; }
:where(.site-base) .form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 620px) { :where(.site-base) .form-row-2 { grid-template-columns: 1fr 1fr; } }

:where(.site-base) .field label { display: block; font-weight: 700; font-size: .88rem; letter-spacing: -.01em; margin-bottom: .4rem; color: var(--ink); }
:where(.site-base) .field-optional { font-weight: 500; color: var(--ink-3); }
:where(.site-base) .field input,
:where(.site-base) .field select,
:where(.site-base) .field textarea {
  width: 100%; display: block; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .8rem 1rem;
}
:where(.site-base) .field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
:where(.site-base) .field input:focus,
:where(.site-base) .field select:focus,
:where(.site-base) .field textarea:focus {
  outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(20,69,107,.14);
}
:where(.site-base) .field-hint { margin: .4rem 0 0; font-size: .82rem; color: var(--ink-3); }
:where(.site-base) .field-error { margin: .4rem 0 0; font-size: .85rem; font-weight: 700; color: #B3261E; }
:where(.site-base) .message-form .btn { justify-self: start; margin-top: .3rem; }

/* honeypot — hidden from sighted users and kept out of the tab order, but
   still present in the DOM for the bots Netlify's spam filter is catching */
:where(.site-base) .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

:where(.site-base) .link-alt {
  display: inline-block; margin-top: 1rem;
  color: rgba(255,255,255,.86); font-size: .92rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4);
}
:where(.site-base) .link-alt:hover { color: #fff; text-decoration-color: var(--sun); }

:where(.site-base) .final-cta-note a { color: var(--sun); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
:where(.site-base) .final-cta-note a:hover { color: #FFC33F; }

/* --------------------------------------------------------- contact */

:where(.site-base) .contact-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 780px) { :where(.site-base) .contact-grid { grid-template-columns: repeat(2, 1fr); } }
:where(.site-base) .contact-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem; box-shadow: var(--sh-1);
}
:where(.site-base) .contact-card h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; }
:where(.site-base) .contact-card p { font-size: .94rem; color: var(--ink-2); margin: 0 0 .9rem; }
:where(.site-base) .contact-value {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em;
  color: var(--navy-900); text-decoration: none; overflow-wrap: anywhere;
}
:where(.site-base) .contact-value:hover { color: var(--sun-ink); }

/* --------------------------------------------------------- service areas */

:where(.site-base) .area-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.3rem 0 0; padding: 0; list-style: none;
}
:where(.site-base) .area-list li {
  font-size: .88rem; font-weight: 600; color: var(--navy-900);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 0; overflow: hidden;
}
:where(.site-base) .area-list li a {
  display: block; padding: .42rem .9rem; color: inherit; text-decoration: none;
}
:where(.site-base) .area-list li a:hover,
:where(.site-base) .area-list li a:focus-visible { background: var(--mist); }

:where(.site-base) .location-groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.6rem 2rem;
}
:where(.site-base) .location-group h3 {
  font-size: 1rem; color: var(--sun-ink); margin: 0 0 .6rem;
}
:where(.site-base) .location-group .area-list { margin-top: 0; }

:where(.site-base) .prep {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
:where(.site-base) .prep h3 {
  grid-column: 1 / -1; font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
:where(.site-base) .prep p { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; font-size: .93rem; color: var(--ink-2); margin: 0; }
:where(.site-base) .prep svg { width: 15px; height: 15px; color: var(--sun-ink); margin-top: .3rem; }

/* --------------------------------------------------------- final cta */

:where(.site-base) .final-cta {
  background: var(--navy-900); color: #fff; text-align: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
:where(.site-base) .final-cta h2 { margin-inline: auto; max-width: 18ch; }
:where(.site-base) .final-cta p { color: rgba(255,255,255,.78); margin: 0 auto 1.8rem; max-width: 46ch; }
/* qualified with p to outrank `.final-cta p` (0-1-1), whose margin-bottom of
   1.8rem was otherwise beating this shorthand's 0 and leaving a phantom
   28.8px under the closing line at every width */
:where(.site-base) .final-cta p.final-cta-note { margin: 1.2rem auto 0; font-size: .88rem; color: rgba(255,255,255,.58); }

/* One call action on mobile, and it is the circular header button.
   The header is position:sticky, so it stays on screen through the whole
   scroll — any other call button is on screen at the same time rather than
   merely further down the page, so the hero button and the closing button
   would sit in the first viewport alongside it, duplicate yellow buttons. */
@media (max-width: 939px) {
  :where(.site-base) .hero .btn-sun,
:where(.site-base) /* Contact leads with .section-navy rather than .hero,
:where(.site-base) so it was missed when
     this rule was written and its intro button sat on screen alongside the
     header button — two call actions,
:where(.site-base) which is exactly what the rule exists
     to prevent. Scoped to a direct child of the intro container so the phone
     and email cards further down the page keep their links. */
  .section-navy > .container > .btn-sun,
:where(.site-base) /* only the phone-call buttons duplicate the header button — a final-cta
     button that leads somewhere else (e.g. the contact page's message form)
     is not a duplicate and stays visible */
  .final-cta a[href^="tel:"].btn-sun { display: none; }
  /* the closing section was sized around a button that is no longer there,
     leaving 77px of empty navy under the last line — only applies when
     that button is in fact hidden (no non-tel final-cta button present) */
  :where(.site-base) .final-cta:not(:has(a.btn-sun:not([href^="tel:"]))) { padding-bottom: clamp(1.8rem, 4vw, 2.4rem); }
}

/* --------------------------------------------------------- hero-lead
   cheerstosummer.html only: a photo hero with the lead form built in as
   a floating card, so the ask is above the fold instead of a scroll away. */

:where(.site-base) .hero-lead { position: relative; background: var(--navy-900); }
:where(.site-base) .hero-lead > picture,
:where(.site-base) .hero-lead > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
:where(.site-base) .hero-lead-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(7,23,38,.95) 0%, rgba(7,23,38,.85) 40%, rgba(14,110,124,.72) 72%, rgba(14,110,124,.52) 100%),
    linear-gradient(to bottom, rgba(7,23,38,.55) 0%, rgba(7,23,38,0) 24%);
}
:where(.site-base) .hero-lead-inner { position: relative; z-index: 2; padding-block: clamp(2.4rem, 6vw, 4rem) clamp(3.6rem, 7vw, 5rem); }
:where(.site-base) .hero-lead-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 960px) { :where(.site-base) .hero-lead-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; } }

:where(.site-base) .hero-lead h1 {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.036em;
  line-height: 1.05; color: #fff; margin: 0 0 .9rem; max-width: 19ch; text-wrap: balance;
}
:where(.site-base) .hero-lead h1 em { font-style: normal; color: var(--sun); }
:where(.site-base) .hero-lead-lede { color: rgba(255,255,255,.86); font-size: 1.05rem; margin: 0; max-width: 46ch; }

:where(.site-base) .hero-call-alt { display: block; margin-top: 1.1rem; font-size: .9rem; color: rgba(255,255,255,.72); }
:where(.site-base) .hero-call-alt a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
:where(.site-base) .hero-call-alt a:hover { text-decoration-color: var(--sun); }

:where(.site-base) .hero-form-card { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.1rem); box-shadow: var(--sh-3); }
:where(.site-base) .hero-form-card .message-form { margin-top: 1.2rem; }
:where(.site-base) .hero-form-note { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-3); text-align: center; }

:where(.site-base) .hero-lead-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
:where(.site-base) .hero-lead-wave svg { display: block; width: 100%; height: clamp(28px, 5vw, 52px); }

:where(.site-base) .section-sand { background: var(--sand); }

:where(.site-base) .tick-mark.alt { background: var(--citrus); }

/* info tiles that don't link anywhere (a focused lead-gen page keeps the
   click budget on the one form) get the card look without the "go" chevron
   or hover-lift a real link would use */
:where(.site-base) .card-static { cursor: default; }
:where(.site-base) .card-static:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--line); }

/* --------------------------------------------------------- water test tool */

:where(.site-base) .wq-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--sh-2);
}

:where(.site-base) .wq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
:where(.site-base) .wq-tab {
  font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
  padding: .75rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink-2); cursor: pointer;
}
:where(.site-base) .wq-tab.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
:where(.site-base) .wq-tab:hover:not(.is-active) { border-color: #C3D4E0; color: var(--ink); }

:where(.site-base) .wq-optional-heading { margin: .3rem 0 1.15rem; font-size: .82rem; font-weight: 700; color: var(--ink-3); }
:where(.site-base) .wq-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.15rem; margin-bottom: 1.4rem; }

:where(.site-base) #wq-form .btn { margin-top: .3rem; }

:where(.site-base) .wq-file-btn { cursor: pointer; }
:where(.site-base) .wq-file-btn:focus-within { outline: 3px solid var(--sun); outline-offset: 2px; }

:where(.site-base) .wq-photo-stage {
  margin-top: 1.2rem; border: 1.5px dashed var(--line); border-radius: var(--r);
  background: var(--mist); min-height: 180px; display: grid; place-items: center;
  padding: 1rem; overflow: hidden;
}
:where(.site-base) .wq-photo-placeholder { color: var(--ink-3); font-size: .9rem; margin: 0; text-align: center; }
:where(.site-base) .wq-canvas { max-width: 100%; height: auto; border-radius: var(--r-sm); cursor: crosshair; display: block; }
:where(.site-base) .wq-photo-hint { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-3); }

:where(.site-base) .wq-photo-result {
  margin-top: 1.2rem; padding: 1.2rem 1.35rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); display: flex; gap: 1rem; align-items: flex-start;
}
:where(.site-base) .wq-swatch {
  width: 40px; height: 40px; border-radius: 50%; flex: none; margin-top: .1rem;
  border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);
}
:where(.site-base) .wq-photo-result-text { flex: 1; min-width: 0; }
:where(.site-base) .wq-photo-result-text h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
:where(.site-base) .wq-photo-result-text p { margin: 0; font-size: .92rem; color: var(--ink-2); }
:where(.site-base) .wq-privacy-note { margin-top: 1rem; font-size: .82rem; color: var(--ink-3); }

/* chip levels are shared between the two tools; readings use ok/low/high/none,
   the photo tool uses ok/caution/alert/unclear — kept to the existing
   navy/sun-ink/error-red palette rather than a new traffic-light hue */
:where(.site-base) .wq-chip {
  display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; margin-bottom: .5rem;
}
:where(.site-base) .wq-chip--ok { color: var(--navy-800); background: var(--mist); border: 1px solid var(--line); }
:where(.site-base) .wq-chip--unclear { color: var(--ink-3); background: var(--mist); border: 1px solid var(--line); }
:where(.site-base) .wq-chip--low,
:where(.site-base) .wq-chip--caution { color: var(--sun-ink); background: rgba(138,90,0,.1); border: 1px solid rgba(138,90,0,.28); }
:where(.site-base) .wq-chip--high,
:where(.site-base) .wq-chip--alert { color: #B3261E; background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.26); }
:where(.site-base) .wq-chip--none { color: #B3261E; background: rgba(179,38,30,.12); border: 1px solid rgba(179,38,30,.34); }

:where(.site-base) .wq-priority { border-radius: var(--r-lg); padding: 1.5rem 1.7rem; }
:where(.site-base) .wq-priority-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .5rem; }
:where(.site-base) .wq-priority h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
:where(.site-base) .wq-priority p { margin: 0; font-size: .96rem; }
:where(.site-base) .wq-priority--ok { background: var(--navy-900); color: #fff; }
:where(.site-base) .wq-priority--ok .wq-priority-label { color: var(--sun); }
:where(.site-base) .wq-priority--ok p { color: rgba(255,255,255,.82); }
:where(.site-base) .wq-priority--mild { background: rgba(138,90,0,.08); border: 1.5px solid rgba(138,90,0,.3); }
:where(.site-base) .wq-priority--mild .wq-priority-label,
:where(.site-base) .wq-priority--mild h3 { color: var(--sun-ink); }
:where(.site-base) .wq-priority--major { background: rgba(179,38,30,.07); border: 1.5px solid rgba(179,38,30,.3); }
:where(.site-base) .wq-priority--major .wq-priority-label,
:where(.site-base) .wq-priority--major h3 { color: #B3261E; }

:where(.site-base) .wq-balance-note { margin: 1.2rem 0 0; padding: 1rem 1.2rem; background: var(--mist); border-radius: var(--r-sm); font-size: .9rem; color: var(--ink-2); }

:where(.site-base) .wq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
:where(.site-base) .wq-param { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.35rem; }
:where(.site-base) .wq-param h4 { margin: 0 0 .4rem; font-size: .98rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
:where(.site-base) .wq-param-value { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
:where(.site-base) .wq-param p { margin: 0; font-size: .9rem; color: var(--ink-2); }

:where(.site-base) .wq-disclaimer { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }
:where(.site-base) .wq-disclaimer a { color: var(--ink-2); }

:where(.site-base) .wq-results { margin-top: 1.6rem; }

/* readings form: grouped steps, inline validation, secondary actions */
:where(.site-base) .wq-step-heading {
  margin: 0 0 1rem; font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sun-ink);
}
:where(.site-base) .wq-field-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.8rem; }
:where(.site-base) #wq-form .form-row-2 { margin-bottom: 1.4rem; }
:where(.site-base) .wq-field-grid .field[hidden] { display: none; }
:where(.site-base) .field input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
:where(.site-base) .wq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
:where(.site-base) .wq-link-btn {
  font-family: inherit; font-size: .9rem; font-weight: 700; color: var(--ink-2);
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
:where(.site-base) .wq-link-btn:hover { color: var(--ink); text-decoration-color: var(--sun-ink); }

/* results: verdict → ordered plan → per-reading detail → hand-off */
:where(.site-base) .wq-priority:focus { outline: none; }
:where(.site-base) .wq-reasons { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .94rem; }
:where(.site-base) .wq-reasons li + li { margin-top: .25rem; }

:where(.site-base) .wq-plan { margin-top: 1.4rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
:where(.site-base) .wq-plan h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
:where(.site-base) .wq-plan-intro { margin: 0 0 1.1rem; font-size: .88rem; color: var(--ink-3); }
:where(.site-base) .wq-plan ol { list-style: none; counter-reset: wqstep; margin: 0; padding: 0; display: grid; gap: .9rem; }
:where(.site-base) .wq-plan li {
  counter-increment: wqstep; position: relative; padding-left: 2.6rem;
  font-size: .93rem; color: var(--ink-2); line-height: 1.5;
}
:where(.site-base) .wq-plan li::before {
  content: counter(wqstep); position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-900); color: #fff; font-size: .8rem; font-weight: 800;
}
:where(.site-base) .wq-plan-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-weight: 800; color: var(--ink); margin-bottom: .15rem; }

:where(.site-base) .wq-tip { margin: 1rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid var(--sun); background: var(--mist); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .88rem; color: var(--ink-2); }

:where(.site-base) .wq-detail-heading { margin: 1.8rem 0 0; font-size: 1rem; }
:where(.site-base) .wq-grid + .wq-handoff { margin-top: 1.6rem; }
:where(.site-base) .wq-param--low,
:where(.site-base) .wq-param--high,
:where(.site-base) .wq-param--none { border-left: 3px solid rgba(138,90,0,.45); }
:where(.site-base) .wq-param--none { border-left-color: #B3261E; }
:where(.site-base) .wq-chip--check { color: var(--ink-2); background: var(--mist); border: 1px dashed var(--ink-3); }

:where(.site-base) .wq-handoff {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem;
  padding: 1.4rem 1.6rem; border-radius: var(--r-lg); background: var(--mist); border: 1px solid var(--line);
}
:where(.site-base) .wq-handoff > div:first-child { flex: 1 1 280px; }
:where(.site-base) .wq-handoff h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
:where(.site-base) .wq-handoff p { margin: 0; font-size: .9rem; color: var(--ink-2); }
:where(.site-base) .wq-handoff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* --------------------------------------------------------- service request form */

:where(.site-base) .intake-step {
  margin: .6rem 0 -.2rem; font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sun-ink);
}
:where(.site-base) .choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.site-base) .choice-group legend { padding: 0; font-weight: 700; font-size: .88rem; letter-spacing: -.01em; margin-bottom: .6rem; color: var(--ink); }
:where(.site-base) .choice-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 620px) { :where(.site-base) .choice-grid { grid-template-columns: 1fr 1fr; } }
:where(.site-base) .choice {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-size: .94rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .16s ease, background .16s ease;
}
:where(.site-base) .choice:hover { border-color: #C3D4E0; color: var(--ink); }
:where(.site-base) .choice input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--navy-900); }
:where(.site-base) .choice:has(input:checked) { border-color: var(--navy-900); background: var(--mist); color: var(--ink); }
:where(.site-base) .choice:focus-within { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Sunnyside Pool Services — home page redesign */
/* ======================================================================
   Sunnyside — redesign mockup v2 ("2035")
   Palette: the live tokens from styles.css, unchanged.
   Direction: deep-water navy as the stage, sun yellow as light. Big
   editorial type, glass surfaces, ambient water light, and components
   that *do* something (intent router, live water check) instead of
   components that only decorate.
   ====================================================================== */
:root {
  /* palette, glass and status colours come from css/tokens.css */
  --display: var(--sans);
  --wrap: 1320px;
  --pad: clamp(1.1rem, 4.5vw, 3.5rem);
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.1,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--navy-950); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { flex: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; line-height: 1.02; font-weight: 700; text-wrap: balance; }
em.s { font-style: normal; font-weight: inherit; }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--sun); color: var(--navy-950); padding: .8rem 1.2rem; font-weight: 700; border-radius: 0 0 12px 0; }
.skip-link:focus { left: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* reveal on scroll — content is visible unless JS opts in */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------ buttons + bits */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: var(--h); padding: 0 1.6rem; border-radius: 999px; border: 0;
  font: 600 1rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-sun { background: var(--sun); color: var(--navy-950); box-shadow: 0 18px 40px -16px rgba(245,179,30,.75); }
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(245,179,30,.16), 0 22px 44px -16px rgba(245,179,30,.85); }
.btn-glass { background: var(--glass-2); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(14px); }
.btn-glass:hover { background: rgba(255,255,255,.16); }
.btn-sm { --h: 44px; padding: 0 1.15rem; font-size: .92rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sun-ink);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(245,179,30,.2); }
.dark .eyebrow, .hero .eyebrow { color: var(--sun); }

.arrow-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; }
.arrow-link svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------ header */
.hdr { position: fixed; z-index: 200; left: 0; right: 0; top: var(--flag, 0px); color: #fff; transition: top .4s var(--ease), background .4s var(--ease), box-shadow .4s; }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,23,38,.9), rgba(7,23,38,0)); transition: opacity .4s; }
.hdr.scrolled { --flag: 0px !important; background: rgba(7,23,38,.86); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 1px 0 var(--glass-line), 0 20px 40px -24px rgba(0,0,0,.6); }
.hdr.scrolled::before { opacity: 0; }
.hdr-strip { font-size: .8rem; color: var(--on-dark-3); border-bottom: 1px solid rgba(255,255,255,.07); overflow: hidden; max-height: 40px; transition: max-height .4s var(--ease), opacity .3s; }
.hdr.scrolled .hdr-strip { max-height: 0; opacity: 0; border-color: transparent; }
.hdr-strip .wrap { display: flex; align-items: center; gap: 1.6rem; height: 38px; }
.hdr-strip a { color: var(--on-dark-2); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.hdr-strip a:hover { color: #fff; }
.hdr-strip .st svg { width: 13px; height: 13px; color: var(--sun); display: block; }
.hdr-strip .strip-right { margin-left: auto; }
.hdr-strip a b { color: #fff; font-weight: 600; }
.hdr-strip .strip-right { font-weight: 700; color: var(--sun); }
@media (max-width: 560px) { .hdr-strip .wrap > span:first-child { display: none; } .hdr-strip .wrap { gap: 1rem; } }
.hdr-strip .hide-sm { display: none; }
@media (min-width: 900px) { .hdr-strip .hide-sm { display: inline; } }
@media (max-width: 640px) { .hdr-strip { display: none; } }
.hdr-main { display: flex; align-items: center; gap: 1.5rem; height: 84px; transition: height .4s var(--ease); }
.hdr.scrolled .hdr-main { height: 72px; }
.brand { line-height: 0; flex: none; }
.brand img { height: 54px; width: auto; transition: height .4s var(--ease); }
.hdr.scrolled .brand img { height: 46px; }
.hdr-nav { display: none; margin-left: auto; }
.hdr-nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav-top {
  position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .9rem; border: 0; background: none; cursor: pointer;
  color: var(--on-dark-2); font: 500 .96rem var(--sans); text-decoration: none; border-radius: 999px; transition: color .2s;
}
.nav-top::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; border-radius: 2px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-top:hover, .nav-top[aria-expanded="true"] { color: #fff; }
.nav-top:hover::after, .nav-top[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-top .chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-top[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: rgba(7,23,38,.97); backdrop-filter: blur(24px);
  border-top: 1px solid var(--glass-line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.mega.open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.mega-inner { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; padding-block: 2.2rem 2.6rem; }
.mega-label { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 1rem; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.mega-link { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem; border-radius: 18px; text-decoration: none; color: #fff; transition: background .25s; }
.mega-link:hover { background: var(--glass); }
.mega-link .mi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(245,179,30,.13); color: var(--sun); flex: none; }
.mega-link .mi svg { width: 20px; height: 20px; }
.mega-link b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.mega-link span span { display: block; font-size: .86rem; color: var(--on-dark-3); margin-top: .15rem; }
.mega-link.all .mi { background: var(--glass-2); color: #fff; }
.mega-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem; border-radius: 24px; text-decoration: none; color: var(--navy-950); background: var(--sun); position: relative; overflow: hidden; }
.mega-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; border: 20px solid rgba(7,23,38,.08); }
.mega-card .mega-label { color: rgba(7,23,38,.7); margin: 0; }
.mega-card b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.mega-card > span { font-size: .93rem; color: rgba(7,23,38,.8); }
.mega-go { margin-top: auto; padding-top: .8rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.mega-go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.mega-card:hover .mega-go svg { transform: translateX(4px); }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.hdr-req { display: none !important; }
.hdr-call span { display: none; }
.hdr-call { width: 44px; padding: 0; }
.menu-btn {
  display: inline-flex; align-items: center; gap: .6rem; height: 44px; padding: 0 1rem 0 .9rem;
  border-radius: 999px; border: 0; background: var(--glass-2); color: #fff; font: 600 .92rem var(--sans); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.menu-btn .lines { position: relative; width: 18px; height: 10px; }
.menu-btn .lines::before, .menu-btn .lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--sun);
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-btn .lines::before { top: 0; } .menu-btn .lines::after { top: 8px; }
[aria-expanded="true"] .lines::before { top: 4px; transform: rotate(45deg); }
[aria-expanded="true"] .lines::after { top: 4px; transform: rotate(-45deg); }
@media (min-width: 1140px) {
  .hdr-nav { display: block; }
  .hdr-actions { margin-left: 1rem; }
  .hdr-req { display: inline-flex !important; }
  .hdr-call { width: auto; padding: 0 1.15rem; }
  .hdr-call span { display: inline; }
  .menu-btn { display: none; }
}
@media (max-width: 420px) { .brand img { height: 44px; } .menu-btn { padding: 0 .85rem; } }

/* ------------------------------------------------ full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 150; background: var(--navy-950); color: #fff;
  overflow-y: auto; visibility: hidden; opacity: 0;
  clip-path: circle(0% at calc(100% - 60px) 40px);
  transition: clip-path .8s var(--ease), opacity .4s var(--ease), visibility 0s .8s;
}
.menu.open { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 60px) 40px); transition: clip-path .8s var(--ease), opacity .3s var(--ease); }
.menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 0%, rgba(20,69,107,.9), transparent 70%),
              radial-gradient(40% 40% at 10% 100%, rgba(245,179,30,.10), transparent 70%);
}
.menu-inner { position: relative; display: grid; gap: 3rem; padding-top: 7rem; padding-bottom: 3rem; min-height: 100%; }
.menu-index { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.menu-index li { counter-increment: idx; border-bottom: 1px solid var(--glass-line); }
.menu-index a {
  display: flex; align-items: baseline; gap: 1.1rem; padding: .9rem 0; text-decoration: none;
  font-size: clamp(2.1rem, 6vw, 4.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05;
  color: rgba(255,255,255,.9); transition: color .3s, padding .4s var(--ease);
}
.menu-index a::before { content: "0" counter(idx); font-size: .8rem; letter-spacing: .1em; color: var(--on-dark-3); font-weight: 500; transform: translateY(-1.4em); }
.menu-index a:hover { color: var(--sun); padding-left: .6rem; }
.menu-index a em.s { color: var(--sun); }
.js .menu .menu-index li { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .menu.open .menu-index li { opacity: 1; transform: none; }
.menu.open .menu-index li:nth-child(1) { transition-delay: .15s; }
.menu.open .menu-index li:nth-child(2) { transition-delay: .2s; }
.menu.open .menu-index li:nth-child(3) { transition-delay: .25s; }
.menu.open .menu-index li:nth-child(4) { transition-delay: .3s; }
.menu.open .menu-index li:nth-child(5) { transition-delay: .35s; }
.menu.open .menu-index li:nth-child(6) { transition-delay: .4s; }
.menu-side { display: grid; gap: 2.5rem; align-content: start; }
.menu-side h2 { font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: .9rem; line-height: 1.4; }
.menu-contact { display: grid; gap: .5rem; }
.menu-contact a.big { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; text-decoration: none; }
.menu-contact a.big:hover { color: var(--sun); }
.menu-contact p, .menu-contact a.small { color: var(--on-dark-2); text-decoration: none; font-size: .98rem; }
@media (min-width: 960px) { .menu-inner { grid-template-columns: 1.5fr 1fr; gap: 5rem; align-items: start; padding-top: 9rem; } }

/* intent router — used in the hero and the menu */
.intents { display: grid; gap: .5rem; }
.intent {
  position: relative; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 18px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: #fff; text-decoration: none;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.intent:hover { background: var(--glass-2); transform: translateX(4px); }
.intent .dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(245,179,30,.14); color: var(--sun); flex: none; }
.intent .dot svg { width: 19px; height: 19px; }
.intent b { display: block; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; line-height: 1.3; }
.intent span.sub { display: block; font-size: .84rem; color: var(--on-dark-3); }
.intent .go { margin-left: auto; width: 18px; height: 18px; color: var(--on-dark-3); transition: color .3s, transform .3s var(--ease); }
.intent:hover .go { color: var(--sun); transform: translateX(3px); }

/* ------------------------------------------------ hero */
.hero { position: relative; min-height: min(100svh, 920px); color: #fff; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero { background: var(--navy-950); }
.waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.waves .flow { animation: flow 24s linear infinite; }
@keyframes flow { to { transform: translateX(-240px); } }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 20% 30%, rgba(7,23,38,.95), rgba(7,23,38,0) 70%),
    radial-gradient(50% 60% at 90% 0%, rgba(20,69,107,.55), rgba(20,69,107,0) 70%),
    linear-gradient(0deg, rgba(7,23,38,1) 0%, rgba(7,23,38,0) 30%);
}
.hero-grid { display: grid; gap: 2.5rem; padding-top: clamp(7.5rem, 12vw, 10rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); align-items: end; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; margin: 1.4rem 0 1.6rem; }
.hero h1 em.s { color: var(--sun); display: block; }
.hero-lede { max-width: 34rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--on-dark-2); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.hero-panel {
  border-radius: 28px; padding: 1.25rem; background: rgba(7,23,38,.42); backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 40px 80px -40px rgba(0,0,0,.7);
}
.hero-panel h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: .2rem .3rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero-panel h2 small { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); white-space: nowrap; }
.proof {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: 22px; overflow: hidden; background: var(--glass-line);
}
.proof > * { background: rgba(7,23,38,.72); padding: 1.1rem 1.25rem; text-decoration: none; display: grid; gap: .15rem; align-content: start; }
.proof strong { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.03em; display: flex; align-items: center; gap: .5rem; line-height: 1.15; }
.proof span { font-size: .85rem; color: var(--on-dark-3); line-height: 1.4; }
.proof .stars { color: var(--sun); display: inline-flex; gap: 1px; }
.proof .stars svg { width: 14px; height: 14px; }
a.proof-link:hover { background: rgba(20,69,107,.75); }
@media (min-width: 760px) { .proof { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: 1fr 400px; gap: 4rem; } }
@media (max-width: 520px) { .hero-ctas .btn { flex: 1 1 100%; } .proof .stars { display: none; } }

/* ------------------------------------------------ sections */
.sec { padding-block: clamp(5rem, 11vw, 9.5rem); position: relative; }
.light { background: var(--paper); color: var(--ink); }
.mist { background: var(--mist); color: var(--ink); }
.dark { background: var(--navy-950); color: #fff; }
.sec-title { font-size: clamp(2.3rem, 5.4vw, 4.6rem); letter-spacing: -.05em; line-height: .98; margin-top: 1.1rem; }
.sec-title em.s { color: var(--sun-ink); }
.dark .sec-title em.s { color: var(--sun); }
.sec-lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 36rem; margin-top: 1.4rem; }
.dark .sec-lede { color: var(--on-dark-2); }

/* services index — editorial rows */
.svc-grid { display: grid; gap: 3rem; }
.svc-head { align-self: start; }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: .9fr 1.3fr; gap: 5rem; } .svc-head { position: sticky; top: 8rem; } }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc {
  position: relative; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: 1.6rem 0; text-decoration: none; color: var(--ink);
}
.svc .n { font-size: .82rem; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; align-self: start; padding-top: .55rem; }
.svc h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.045em; transition: transform .5s var(--ease); }
.svc p { grid-column: 2; color: var(--ink-2); max-width: 34rem; font-size: 1rem; }
.svc .go {
  grid-row: 1 / span 2; grid-column: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background .35s var(--ease), transform .5s var(--ease), box-shadow .35s;
}
.svc .go svg { width: 20px; height: 20px; }
.svc:hover h3 { transform: translateX(8px); }
.svc:hover .go { background: var(--sun); box-shadow: none; transform: rotate(-45deg); }
@media (hover: hover) and (min-width: 1000px) {
  .svc p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
  .svc:hover p, .svc:focus-visible p { max-height: 6rem; opacity: 1; margin-top: .4rem; }
  .svc-list li:first-child .svc p { max-height: 6rem; opacity: 1; margin-top: .4rem; }
  .svc-list:hover li:first-child .svc:not(:hover) p { max-height: 0; opacity: 0; margin-top: 0; }
}

/* every visit — the service record */
.visit-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .visit-grid { grid-template-columns: 1fr 1.05fr; gap: 5rem; } }
.plans { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.plan { padding: .7rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--glass-line); font-size: .95rem; font-weight: 500; color: var(--on-dark-2); }
.plan b { color: #fff; font-weight: 600; }
.record {
  position: relative; border-radius: 32px; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, rgba(20,69,107,.55), rgba(16,49,76,.25) 60%), var(--navy-900);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 60px 120px -50px rgba(0,0,0,.8);
  overflow: hidden;
}
.record::after {
  content: ""; position: absolute; width: 360px; height: 360px; right: -160px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,179,30,.22), transparent 65%); pointer-events: none;
}
.record-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--glass-line); }
.record-top b { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.record-top span { font-size: .8rem; color: var(--on-dark-3); display: block; }
.status { display: inline-flex !important; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(245,179,30,.14); color: var(--sun) !important; font-size: .78rem !important; font-weight: 600; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.checks { list-style: none; margin: 0; padding: .6rem 0 0; display: grid; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; padding: .62rem 0; font-size: .96rem; color: var(--on-dark-2); border-bottom: 1px dashed rgba(255,255,255,.08); transition: color .4s; }
.checks li:last-child { border-bottom: 0; }
.checks .box { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); display: grid; place-items: center; margin-top: 1px; transition: background .4s var(--ease), box-shadow .4s; }
.checks .box svg { width: 14px; height: 14px; color: var(--navy-950); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); }
.checks li.done .box, .no-js .checks .box { background: var(--sun); box-shadow: none; }
.checks li.done .box svg, .no-js .checks .box svg { opacity: 1; transform: none; }
.checks li.done { color: #fff; }
.record-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.1rem; }
.record-foot div { border-radius: 16px; padding: .9rem 1rem; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); font-size: .86rem; color: var(--on-dark-2); }
.record-foot b { display: block; color: #fff; font-weight: 600; font-size: .95rem; margin-bottom: .1rem; }

/* process */
.steps { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; gap: 2.5rem; position: relative; }
.step { position: relative; padding-top: 2.4rem; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.step::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--sun);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease);
}
.step.in::after, .no-js .step::after { transform: scaleX(1); }
.steps .step:nth-child(2)::after { transition-delay: .25s; }
.steps .step:nth-child(3)::after { transition-delay: .5s; }
.step .num { font-family: var(--display); font-weight: 700; letter-spacing: -.05em; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .8; color: var(--line); -webkit-text-stroke: 1.5px var(--navy-900); display: block; margin-bottom: 1.2rem; }
.step .num[data-n]::before { content: attr(data-n); } /* decorative: the list is already numbered for screen readers */
.step h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.04em; margin-bottom: .7rem; }
.step p { color: var(--ink-2); max-width: 24rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

/* about — statement */
.statement { font-size: clamp(1.7rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.14; max-width: 62rem; margin-top: 1.6rem; text-wrap: pretty; }
.statement .w { color: rgba(255,255,255,.36); /* 3.3:1 on navy-950: large-text AA even before a word lights up */ transition: color .5s var(--ease); }
.statement .w.lit { color: #fff; }
.statement em.s.w.lit { color: var(--sun); }
.about-foot { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--glass-line); }
.est { display: flex; align-items: center; gap: 1.2rem; }
.est .yr { display: grid; font-size: 3.4rem; font-weight: 700; letter-spacing: -.05em; line-height: .9; color: var(--sun); padding-right: 1.2rem; border-right: 1px solid var(--glass-line); }
.est .yr small { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: .45rem; }
.est b { display: block; font-weight: 600; font-size: 1.05rem; }
.est span span { color: var(--on-dark-3); font-size: .9rem; }
.pillars { display: grid; gap: 1.8rem; }
.pillar h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; display: flex; gap: .7rem; align-items: center; margin-bottom: .45rem; line-height: 1.25; }
.pillar h3::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--sun); flex: none; }
.pillar p { color: var(--on-dark-2); font-size: .97rem; }
@media (min-width: 760px) { .pillars { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }
@media (min-width: 1150px) { .about-foot { grid-template-columns: 280px 1fr; gap: 4rem; } .pillars { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* quick water check */
.check { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .check { grid-template-columns: .9fr 1.1fr; gap: 5rem; } }
.meter {
  border-radius: 32px; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--navy-900); color: #fff;
  box-shadow: 0 60px 120px -50px rgba(7,23,38,.6); position: relative; overflow: hidden;
}
.meter::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(20,69,107,.9), transparent 65%); pointer-events: none; }
.meter > * { position: relative; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.seg button { border: 0; background: transparent; color: var(--on-dark-2); font: 500 .86rem var(--sans); padding: .5rem .9rem; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--navy-950); font-weight: 600; }
.meter-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.meter-top b { font-weight: 600; letter-spacing: -.02em; }
.reading { padding: 1.2rem 0; border-top: 1px solid var(--glass-line); }
.reading-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.reading-head label { font-weight: 500; color: var(--on-dark-2); font-size: .95rem; }
.reading-head output { font-size: 2rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.reading-head output small { font-size: .85rem; font-weight: 500; color: var(--on-dark-3); margin-left: .25rem; letter-spacing: 0; }
.track { position: relative; height: 34px; }
.track .band { position: absolute; top: 13px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); left: 0; right: 0; }
.track .ok { position: absolute; top: 13px; height: 8px; border-radius: 8px; background: rgba(245,179,30,.55); }
input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(245,179,30,.35), 0 6px 16px rgba(0,0,0,.4); }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(245,179,30,.35), 0 6px 16px rgba(0,0,0,.4); }
.scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--on-dark-3); margin-top: .2rem; }
.verdict { margin-top: 1.2rem; border-radius: 20px; padding: 1.1rem 1.2rem; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); display: grid; grid-template-columns: 14px 1fr; gap: .9rem; align-items: start; }
.verdict .lamp { width: 14px; height: 14px; border-radius: 50%; margin-top: .35rem; background: var(--sun); box-shadow: 0 0 18px var(--sun); transition: background .3s, box-shadow .3s; }
.verdict.warn .lamp { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.verdict b { display: block; font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.verdict p { color: var(--on-dark-2); font-size: .92rem; margin-top: .2rem; }
.meter-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.meter-foot small { color: var(--on-dark-3); font-size: .8rem; max-width: 22rem; }

/* reviews */
.rev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; }
.score { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); }
.score .big { font-size: 4.2rem; font-weight: 700; letter-spacing: -.06em; line-height: .9; }
.score .stars { color: var(--sun); display: flex; gap: 2px; }
.score .stars svg { width: 18px; height: 18px; }
.score small { display: block; color: var(--ink-3); font-size: .86rem; margin-top: .25rem; }
.rev-stage { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 2rem; }
.rev-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev { scroll-snap-align: start; margin: 0; display: grid; gap: 1.8rem; align-content: start; }
.rev blockquote { margin: 0; font-size: clamp(1.45rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.18; max-width: 60rem; text-wrap: pretty; }
.rev blockquote::before { content: "“"; color: var(--sun-ink); margin-right: .05em; }
.rev blockquote::after { content: "”"; color: var(--sun-ink); }
.rev figcaption { display: flex; align-items: center; gap: .8rem; color: var(--ink-3); font-size: .95rem; }
.rev figcaption b { color: var(--ink); font-weight: 600; }
.initial { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: var(--sun); font-weight: 600; flex: none; }
.rev-nav { display: flex; align-items: center; gap: 1rem; }
.rev-dots { display: flex; gap: .4rem; flex: 1; }
.rev-dots button { flex: 1; max-width: 70px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: var(--line); cursor: pointer; position: relative; overflow: hidden; }
.rev-dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--navy-900); transform-origin: left; animation: fill 7s linear forwards; }
.rev-stage.paused .rev-dots button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } }
.rev-arrows { display: flex; gap: .5rem; }
.rev-arrows button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .3s; }
.rev-arrows button:hover { background: var(--sun); box-shadow: none; }
.rev-arrows svg { width: 20px; height: 20px; }
.rev-src { font-size: .85rem; color: var(--ink-3); margin-top: 2rem; }
.rev-src a { color: var(--navy-700); }

/* suburbs */
.areas { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .areas { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background .3s, color .3s;
}
.chip:hover { background: var(--sun); color: var(--navy-950); }
.chip.all { background: #fff; color: var(--navy-950); font-weight: 600; }
.map { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.map svg { width: 100%; height: 100%; }
.map .ping { transform-box: fill-box; transform-origin: center; animation: ping 3.2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

/* advice */
.qs { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.qs li { border-bottom: 1px solid var(--line); }
.qs a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; text-decoration: none; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; transition: padding .4s var(--ease), color .3s; }
.qs a:hover { padding-left: .8rem; color: var(--navy-700); }
.qs a svg { width: 22px; height: 22px; color: var(--sun-ink); flex: none; transition: transform .3s var(--ease); }
.qs a:hover svg { transform: translateX(4px); }
.advice-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; }

/* final call */
.finale { text-align: center; overflow: hidden; }
.finale::before {
  content: ""; position: absolute; left: 50%; bottom: -60%; width: 1200px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(245,179,30,.24), rgba(245,179,30,0)); pointer-events: none;
}
.finale h2 { font-size: clamp(3rem, 10vw, 9rem); letter-spacing: -.06em; line-height: .9; position: relative; }
.finale h2 em.s { color: var(--sun); }
.finale p { color: var(--on-dark-2); max-width: 36rem; margin: 1.8rem auto 0; font-size: 1.15rem; position: relative; }
.finale .hero-ctas { justify-content: center; position: relative; }
.finale .fine { font-size: .92rem; color: var(--on-dark-3); margin-top: 1.4rem; }
.finale .fine a { color: #fff; }

/* footer */
.foot { position: relative; background: var(--navy-950); color: var(--on-dark-2); font-size: .96rem; padding-top: 5.5rem; }
.foot-waves { position: absolute; left: 0; top: 0; width: 100%; height: 90px; }
.foot a { text-decoration: none; }
.foot-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--glass-line); }
.foot-brand img { width: 260px; height: auto; margin-bottom: 1.4rem; }
.foot-brand p { max-width: 24rem; }
.social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: #fff; transition: background .3s, color .3s; }
.social a:hover { background: var(--sun); color: var(--navy-950); }
.social svg { width: 18px; height: 18px; }
.foot-contact { border-radius: 28px; padding: clamp(1.4rem, 3vw, 2rem); background: linear-gradient(160deg, rgba(20,69,107,.5), rgba(16,49,76,.2)); box-shadow: inset 0 0 0 1px var(--glass-line); display: grid; gap: .35rem; align-content: start; }
.foot-label, .foot h2 { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); margin: 0 0 .6rem; line-height: 1.4; }
.foot-phone { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; color: #fff; line-height: 1.05; }
.foot-phone:hover { color: var(--sun); }
.foot-mail { color: var(--on-dark-2); overflow-wrap: anywhere; }
.foot-mail:hover { color: #fff; }
.foot-hours { color: var(--on-dark-3); font-size: .92rem; margin: .35rem 0 0; }
.foot-ctas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.foot-cols { display: grid; gap: 2.5rem; padding-block: 3rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot ul.two { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.foot ul .span { grid-column: 1 / -1; }
.foot ul a:hover { color: var(--sun); }
.foot .more { color: var(--sun); font-weight: 600; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.6rem; border-top: 1px solid var(--glass-line); font-size: .85rem; color: var(--on-dark-3); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-legal a:hover { color: #fff; }
.totop { color: var(--on-dark-2); }
@media (min-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .foot-cols { grid-template-columns: 1fr 1.4fr 1fr; gap: 3rem; }
}

/* Utilities that replaced one-off inline styles (kept !important so they behave exactly like the inline styles did). */
.u-lede-sm { font-size:1.06rem !important; margin-bottom:1.6rem !important; }
.u-mw-20ch { max-width:20ch !important; }
.u-mt-12 { margin-top:1.2rem !important; }
.u-mb-10 { margin-bottom:1rem !important; }
.u-fs-106 { font-size:1.06rem !important; }
.u-fs-h3 { font-size:clamp(1.4rem,3vw,1.9rem) !important; }
.u-mw-22ch { max-width:22ch !important; }
.u-mb-14 { margin-bottom:1.4rem !important; }
.u-mw-none { max-width:none !important; }
.u-block-mt-08 { display:block !important; margin-top:.8rem !important; }
.u-mt-20 { margin-top:2rem !important; }
.u-c-navy-700 { color:var(--navy-700) !important; }
.u-mw-16ch { max-width:16ch !important; }
.u-mw-640 { max-width:640px !important; }
.u-mx-auto { margin-inline:auto !important; }
.u-mb-04 { margin-bottom:.4rem !important; }
.u-fs-094 { font-size:.94rem !important; }
.u-w-full { width:100% !important; }
.u-mt-22 { margin-top:2.2rem !important; }
.u-c-sun { color:var(--sun) !important; }
.u-delay-06 { animation-delay:.6s !important; }
.u-delay-12 { animation-delay:1.2s !important; }
.u-delay-18 { animation-delay:1.8s !important; }
.u-items-start { align-items:start !important; }
.u-fs-11-mb-15 { font-size: 1.1rem !important; margin-bottom: 1.5rem !important; }
.u-mt-18 { margin-top:1.8rem !important; }
.u-py-hero { padding-block:clamp(4rem,10vw,6rem) !important; }
.u-mw-640-center { max-width:640px !important; text-align:center !important; }

/* Enquiry forms (contact, intake, cheerstosummer): markers, inline errors, sending state */
.message-form .field-req { color: #B3261E; font-weight: 700; margin-left: .15rem; }
.message-form .form-note { margin: 0; font-size: .82rem; color: var(--ink-3); }
.message-form .field input, .message-form .field select, .message-form .field textarea { font-size: 16px; min-height: 48px; } /* 16px stops iOS zooming in */
.message-form .field input::placeholder, .message-form .field textarea::placeholder { color: #8A97A3; opacity: 1; }
.message-form .field [aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.message-form .choice-group.has-error .choice { border-color: #E3B4B0; }
.message-form .field-error:empty { display: none; }
.message-form .contact-method { display: grid; gap: .4rem; }
.message-form .contact-method .field-hint { margin: 0; }
.message-form button[type="submit"][disabled] { opacity: .7; cursor: progress; }
@media (max-width: 619px) { .message-form button[type="submit"] { justify-self: stretch; width: 100%; min-height: 52px; } }