/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* 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);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

img { display: block; max-width: 100%; height: auto; }

a { color: var(--navy-700); }

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

.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;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.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;
}

/* --------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: flex; align-items: center; gap: 1.2rem;
  padding-block: .85rem;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
}
.brand { display: block; flex: none; line-height: 0; }
.brand picture { display: block; }
.brand img { height: 50px; width: auto; }

.nav-links { display: none; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: .93rem; font-weight: 500; letter-spacing: -.01em;
  padding-block: .3rem; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"] { color: var(--sun); border-bottom-color: var(--sun); }

/* .header-cta.btn-sm, not .header-cta alone — .btn-sm's own padding rule sits
   later in the cascade and would otherwise win at equal specificity.
   Sized and shaped to match .mobile-menu > summary (the "Menu" pill) it
   sits beside, rather than a circle that reads as a different control. */
.header-cta.btn-sm {
  margin-left: auto; flex: none;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em; gap: 0;
}
/* Wider on desktop, where it sits alone at the end of a roomy nav row rather
   than tight against a "Menu" pill — the mobile size stays tight for space. */
@media (min-width: 940px) {
  .header-cta.btn-sm { margin-left: 0; padding: .8rem 2.3rem; font-size: .95rem; }
}

/* mobile menu — native details, no JS */
.mobile-menu { margin-left: auto; position: relative; }
.mobile-menu > summary {
  list-style: none; cursor: pointer;
  color: #fff; font-size: .88rem; font-weight: 600;
  padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu nav {
  position: absolute; right: 0; top: calc(100% + .6rem);
  background: var(--navy-800); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; padding: .5rem; min-width: 200px;
}
.mobile-menu nav a {
  color: rgba(255,255,255,.88); text-decoration: none;
  padding: .7rem .8rem; border-radius: var(--r-sm); font-weight: 600; font-size: .92rem;
}
.mobile-menu nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mobile-menu nav a[aria-current="page"] { color: var(--sun); }

@media (min-width: 940px) {
  .nav-links { display: flex; }
  .mobile-menu { display: none; }
}

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

.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;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sun { background: var(--sun); color: var(--navy-900); box-shadow: 0 6px 20px -6px rgba(245,179,30,.75); }
.btn-sun:hover { background: #FFC33F; transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(245,179,30,.9); }
.btn-sm { padding: .62rem 1.1rem; font-size: .9rem; }
@media (min-width: 420px) { .btn-sm { padding: .68rem 1.25rem; } }

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

.hero {
  position: relative;
  min-height: 560px;              /* min-height, never height — see file header */
  display: flex; align-items: flex-end;
  background: var(--navy-900);
}
.hero > picture, .hero > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.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%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(1.8rem, 3vw, 2.6rem);
}
.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;
}
.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;
}
.hero h1 em { font-style: normal; color: var(--sun); }
.hero-lede { color: rgba(255,255,255,.84); font-size: 1.05rem; margin: 0 0 1.6rem; max-width: 46ch; }
.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. */

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

.proof-card {
  position: relative;
  margin-top: calc(-1 * var(--proof-overlap, 3.2rem));
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  display: grid; grid-template-columns: 1fr;
  overflow: hidden;
}

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

.proof-stars { display: flex; gap: 2px; }
.proof-stars svg { width: 16px; height: 16px; color: var(--sun); flex: none; }

.proof-value {
  display: block; font-size: clamp(1.4rem, 3vw, 1.65rem); font-weight: 800;
  letter-spacing: -.035em; color: var(--navy-900); line-height: 1;
  margin-bottom: .28rem; font-variant-numeric: tabular-nums;
}
/* two classes (0-2-0) so this wins over .proof-value regardless of source order */
.proof-value.proof-value-rating { display: flex; align-items: center; gap: .5rem; }

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

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

@media (min-width: 820px) {
  .proof-card { grid-template-columns: repeat(3, 1fr); }
  .proof { border-top: 0; padding: 1.6rem 1.75rem; }
  .proof + .proof { border-left: 1px solid var(--line); }
}

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

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

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

.section-head { max-width: 640px; margin-bottom: 2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-ink); margin: 0 0 .7rem;
}
.section-navy .kicker { color: var(--sun); }
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 */
.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;
}
.page-title em { font-style: normal; color: var(--sun); }
h2 em { font-style: normal; color: var(--sun-ink); }
.section-navy h2 em, .final-cta h2 em { color: var(--sun); }
.lede { color: var(--ink-2); font-size: 1.02rem; margin: 0; max-width: 62ch; }
.section-navy .lede { color: rgba(255,255,255,.78); }

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

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

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

.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;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #C3D4E0; }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--navy-900);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.card-icon svg { width: 21px; height: 21px; color: var(--sun); }
.card h3 {
  font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem;
  display: flex; align-items: center; gap: .4rem;
}
.card h3 svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s ease, color .18s ease; }
.card:hover h3 svg { transform: translateX(3px); color: var(--sun-ink); }
.card p { font-size: .93rem; color: var(--ink-2); margin: 0; }

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

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

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

/* --------------------------------------------------------- reviews */

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
@media (min-width: 1040px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

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

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

.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);
}
.review-source a { color: var(--ink-2); text-decoration-color: var(--line); }
.review-source a:hover { color: var(--ink); }

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

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

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

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

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

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

.faq-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .faq-layout { grid-template-columns: 1fr 1.7fr; } }
.faq-list { display: grid; gap: .7rem; min-width: 0; }
.faq-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.35rem; box-shadow: var(--sh-1);
}
.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;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; margin-left: auto; color: var(--sun-ink); font-weight: 800;
  font-size: 1.3rem; line-height: 1; flex: none;
}
.faq-item[open] > summary::after { content: "\2212"; }
.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. */
.section-sources { padding-block: 0 clamp(2.4rem, 5vw, 3.4rem); }
.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);
}
.sources-line span { font-weight: 700; color: var(--ink-2); }
.sources-line a { color: var(--ink-2); text-decoration-color: var(--line); overflow-wrap: anywhere; }
.sources-line a:hover { color: var(--ink); }

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

.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);
}
.message-form { display: grid; gap: 1.15rem; margin-top: 1.6rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 620px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

.field label { display: block; font-weight: 700; font-size: .88rem; letter-spacing: -.01em; margin-bottom: .4rem; color: var(--ink); }
.field-optional { font-weight: 500; color: var(--ink-3); }
.field input, .field select, .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;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(20,69,107,.14);
}
.field-hint { margin: .4rem 0 0; font-size: .82rem; color: var(--ink-3); }
.field-error { margin: .4rem 0 0; font-size: .85rem; font-weight: 700; color: #B3261E; }
.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 */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.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);
}
.link-alt:hover { color: #fff; text-decoration-color: var(--sun); }

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

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

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

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

.area-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.3rem 0 0; padding: 0; list-style: none;
}
.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;
}
.area-list li a {
  display: block; padding: .42rem .9rem; color: inherit; text-decoration: none;
}
.area-list li a:hover, .area-list li a:focus-visible { background: var(--mist); }

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

.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);
}
.prep h3 {
  grid-column: 1 / -1; font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.prep p { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; font-size: .93rem; color: var(--ink-2); margin: 0; }
.prep svg { width: 15px; height: 15px; color: var(--sun-ink); margin-top: .3rem; }

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

.final-cta {
  background: var(--navy-900); color: #fff; text-align: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.final-cta h2 { margin-inline: auto; max-width: 18ch; }
.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 */
.final-cta p.final-cta-note { margin: 1.2rem auto 0; font-size: .88rem; color: rgba(255,255,255,.58); }

/* --------------------------------------------------------- footer */

.site-footer { background: var(--navy-950); color: rgba(255,255,255,.72); padding-block: clamp(1.6rem, 3.4vw, 2.2rem) 1.3rem; }
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.footer-brand picture { display: block; }
.footer-brand img { height: 46px; width: auto; }
/* 44px tap targets, so the icons stay usable on a phone even though the glyph
   inside is 20px. */
.footer-social { display: flex; gap: .1rem; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: rgba(255,255,255,.72); border-radius: 50%; font-size: 1.15rem; line-height: 1;
  transition: color .18s ease, background-color .18s ease;
}
.footer-social a:hover { color: var(--sun); background: rgba(255,255,255,.07); }
/* the call link is the footer's one CTA, so it keeps brand yellow at rest
   instead of only picking it up on hover like the social icons beside it. */
.footer-social a.footer-call { color: var(--sun); }
.footer-social svg { width: 20px; height: 20px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.footer-allpages {
  color: var(--sun); text-decoration: underline; text-decoration-color: rgba(245,179,30,.4);
  font-weight: 700; font-size: .92rem;
}
.footer-allpages:hover { text-decoration-color: var(--sun); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline;
  padding-top: 1rem; font-size: .78rem; color: rgba(255,255,255,.5);
}

/* 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) {
  .hero .btn-sun,
  /* Contact leads with .section-navy rather than .hero, so it was missed when
     this rule was written and its intro button sat on screen alongside the
     header button — two call actions, 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,
  /* 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) */
  .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. */

.hero-lead { position: relative; background: var(--navy-900); }
.hero-lead > picture, .hero-lead > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.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%);
}
.hero-lead-inner { position: relative; z-index: 2; padding-block: clamp(2.4rem, 6vw, 4rem) clamp(3.6rem, 7vw, 5rem); }
.hero-lead-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 960px) { .hero-lead-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; } }

.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;
}
.hero-lead h1 em { font-style: normal; color: var(--sun); }
.hero-lead-lede { color: rgba(255,255,255,.86); font-size: 1.05rem; margin: 0; max-width: 46ch; }

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

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

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

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

.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 */
.card-static { cursor: default; }
.card-static:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--line); }

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

.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);
}

.wq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.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;
}
.wq-tab.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.wq-tab:hover:not(.is-active) { border-color: #C3D4E0; color: var(--ink); }

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

#wq-form .btn { margin-top: .3rem; }

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

.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;
}
.wq-photo-placeholder { color: var(--ink-3); font-size: .9rem; margin: 0; text-align: center; }
.wq-canvas { max-width: 100%; height: auto; border-radius: var(--r-sm); cursor: crosshair; display: block; }
.wq-photo-hint { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-3); }

.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;
}
.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);
}
.wq-photo-result-text { flex: 1; min-width: 0; }
.wq-photo-result-text h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.wq-photo-result-text p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.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 */
.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;
}
.wq-chip--ok { color: var(--navy-800); background: var(--mist); border: 1px solid var(--line); }
.wq-chip--unclear { color: var(--ink-3); background: var(--mist); border: 1px solid var(--line); }
.wq-chip--low, .wq-chip--caution { color: var(--sun-ink); background: rgba(138,90,0,.1); border: 1px solid rgba(138,90,0,.28); }
.wq-chip--high, .wq-chip--alert { color: #B3261E; background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.26); }
.wq-chip--none { color: #B3261E; background: rgba(179,38,30,.12); border: 1px solid rgba(179,38,30,.34); }

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

.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); }

.wq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.wq-param { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.35rem; }
.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; }
.wq-param-value { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.wq-param p { margin: 0; font-size: .9rem; color: var(--ink-2); }

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

.wq-results { margin-top: 1.6rem; }