/* ==========================================================================
   Integrity Pools — Weekly Pool Cleaning ad landing page
   Converted from the inline-style design prototype (see HANDOFF.md).
   Token names follow HANDOFF.md § Design Tokens.
   ========================================================================== */

:root {
  /* Brand */
  --navy:            #0b2440;
  --navy-deep:       #071a2e;
  --blue:            #0f6fb4;
  --blue-hover:      #0d5d97;
  --link-hover:      #0b2d5c;
  --blue-pale:       #dbeaf7;

  /* Text on light */
  --text:            #16283d;
  --text-muted:      #55708c;
  --text-muted-2:    #5a7089;
  --text-quote:      #35506f;
  --pill-text:       #26456b;

  /* Was #7b8ea3 / #8497ab / #93a5b8 / #9db0c4 — four near-identical greys that
     all failed WCAG AA on white (3.37 / 3.00 / 2.53 / 2.22 : 1). Collapsed onto
     one token that holds the original hue and saturation while clearing AA on
     both #fff (4.88:1) and the #f4f8fb section tint (4.57:1). See CODE-REVIEW.md #7. */
  --label:           #5f7389;

  /* Text on dark */
  --on-dark:         #e8f2fa;
  --on-dark-2:       #d7e7f5;
  --on-dark-3:       #cfe2f2;
  --on-dark-4:       #b9cfe3;
  --on-dark-eyebrow: #bcd8ef;
  --promo-text:      #dce9f6;

  /* Surfaces & borders */
  --surface-tint:    #f4f8fb;
  --input-bg:        #f8fbfd;
  --border:          #e3ebf3;
  --border-input:    #cfdae6;
  --border-pill:     #dae5ef;
  --border-stat:     #dfe8f1;

  /* Accents */
  --star:            #f0c33c;
  --success:         #1f8b46;
  --success-bg:      #e6f4ea;
  --error:           #b3261e;
  --error-bg:        #fdeceb;

  /* Type */
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii */
  --r-btn:  6px;
  --r-card: 10px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card:  0 10px 28px rgba(11, 36, 64, .05);
  --shadow-hover: 0 16px 36px rgba(11, 36, 64, .09);
  --shadow-form:  0 30px 70px rgba(3, 17, 32, .45);

  /* Layout */
  --gutter: 24px;
  --header-h: 86px;   /* sticky header height, used by scroll-margin */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* NOTE: the prototype wrapped everything in a div with `overflow-x: hidden`,
     which forced computed overflow-y to `auto` and made that div the nearest
     scroll container — silently killing every position:sticky on the page.
     The responsive rules below remove the horizontal overflow at its source,
     so no clip is needed. If one ever is, it belongs here on the root scroller,
     not on an intermediate wrapper. See CODE-REVIEW.md #1. */
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
p { margin: 0; }
img { max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--link-hover); }

input, button, select, textarea { font: inherit; }

/* One visible focus indicator for everything, replacing the prototype's
   `style-focus` attribute — which was authored on all three inputs but never
   read by any code, so it did nothing. See CODE-REVIEW.md #3. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.final-cta :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus { left: 0; }

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

.shell { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.shell--1140 { max-width: 1140px; }
.shell--1100 { max-width: 1100px; }
.shell--1000 { max-width: 1000px; }
.shell--900  { max-width: 900px; }

.section { padding-block: 78px; }
.section--tint { background: var(--surface-tint); }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 900; margin: 14px 0 16px; }
.section-head p  { font-size: 18px; line-height: 1.6; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  padding: 18px 30px;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn--blue  { background: var(--blue); color: #fff; }
.btn--navy  { background: var(--navy); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--outline-light { border: 1px solid rgba(255, 255, 255, .25); }
.btn--block { display: flex; width: 100%; }
.btn--lg { font-size: 19px; padding: 19px 32px; }

/* Hover only where hover actually exists. The prototype bound mouseenter /
   mouseleave in JS, which sticks the hover colour on touch devices because
   mouseleave frequently never fires after a tap. See CODE-REVIEW.md § smaller items. */
@media (hover: hover) {
  .btn--blue:hover  { background: var(--navy); color: #fff; }
  .btn--navy:hover  { background: var(--blue); color: #fff; }
  .btn--white:hover { background: var(--blue-pale); color: var(--navy); }
  .btn--blue.btn--keep-blue:hover { background: var(--blue-hover); color: #fff; }
}

/* --------------------------------------------------------------------------
   Promo bar + header
   -------------------------------------------------------------------------- */

.promo {
  background: var(--navy);
  color: var(--promo-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.promo__cta {
  color: #fff;
  background: var(--blue);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
@media (hover: hover) { .promo__cta:hover { background: var(--blue-hover); color: #fff; } }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header__logo { height: 52px; width: auto; display: block; }
.site-header__right { display: flex; align-items: center; gap: 24px; }
.site-header__phone-wrap { display: flex; flex-direction: column; gap: 2px; }
.site-header__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}
.site-header__phone {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  color: var(--navy);
}
.site-header__cta {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--r-btn);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s ease;
}
@media (hover: hover) { .site-header__cta:hover { background: var(--navy); color: #fff; } }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

/* Sits inside the hero, between the supporting paragraph and the checklist —
   the position these badges occupy on the reference page this layout was
   adapted from. Left-aligned to the hero copy, not centred. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(11, 36, 64, .10), 0 4px 14px rgba(11, 36, 64, .06);
}
.trust-pill__icon { flex: 0 0 auto; display: block; }
.trust-pill__stars { color: var(--star); font-size: 16.5px; letter-spacing: 1.5px; }

@media (max-width: 719px) {
  .hero__trust { gap: 8px; margin-bottom: 22px; }
  .trust-pill { padding: 8px 14px; font-size: 13.5px; gap: 8px; }
  .trust-pill__stars { font-size: 14.5px; letter-spacing: .5px; }
  .trust-pill__icon { width: 15px; height: 17px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--navy); color: #fff; }
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(9,29,52,.95) 0%, rgba(9,29,52,.82) 45%, rgba(9,29,52,.55) 100%);
}
.hero__grid {
  position: relative;
  display: grid;
  gap: 26px;
  padding-block: 48px 56px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-eyebrow);
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(32px, 6.2vw, 54px);
  line-height: 1.04;
  font-weight: 900;
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--on-dark-2);
}
.hero__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-dark-4);
  margin-bottom: 26px;
  max-width: 56ch;
}
.checklist { display: grid; gap: 12px; margin-bottom: 30px; }
.checklist__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--on-dark);
}
.checklist__tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Lead form card
   -------------------------------------------------------------------------- */

.lead-card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 30px 28px;
  box-shadow: var(--shadow-form);
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.lead-card h2 { font-size: 27px; font-weight: 800; line-height: 1.15; margin-bottom: 8px; }
.lead-card__sub { font-size: 15px; color: #61779a; margin-bottom: 22px; }

.lead-form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
/* Scoped to the label class, not `.field > span` — the error span is also a
   direct child, and the descendant selector both outranked it and forced the
   error text to uppercase label-grey instead of red. */
.field__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label);
}
.field input {
  border: 1px solid var(--border-input);
  border-radius: var(--r-btn);
  padding: 14px;
  font-size: 16px;            /* 16px minimum stops iOS Safari zooming on focus */
  color: var(--text);
  background: var(--input-bg);
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.field input:hover { border-color: #b6c7d8; }
.field input:focus {
  border-color: var(--blue);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 111, 180, .28);
}
.field input[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.field__error { font-size: 13px; font-weight: 600; color: var(--error); min-height: 0; }
.field__error:empty { display: none; }

.lead-form__submit { margin-top: 6px; }
.lead-form__submit[disabled] { opacity: .72; cursor: progress; }

.form-error {
  background: var(--error-bg);
  border: 1px solid #f3c2be;
  color: #8c1d18;
  border-radius: var(--r-btn);
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.45;
}
.form-error:empty { display: none; }

.lead-card__note { font-size: 13.5px; color: var(--label); text-align: center; margin-top: 12px; }
.lead-card__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.lead-card__divider span:first-child,
.lead-card__divider span:last-child { flex: 1; height: 1px; background: var(--border); }
.lead-card__divider-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}
.lead-card__phone {
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  color: var(--navy);
}
.lead-card__fine { font-size: 12.5px; color: var(--label); text-align: center; margin-top: 14px; line-height: 1.5; }
.lead-card__consent {
  font-size: 12.5px;
  color: var(--label);
  line-height: 1.5;
  margin-top: 2px;
}

.thanks { text-align: center; padding: 18px 0; }
.thanks__icon {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid;
  place-items: center;
  font-size: 30px;
  margin: 0 auto 18px;
}
.thanks h2 { font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.thanks h2:focus { outline: none; }
.thanks p { font-size: 16px; line-height: 1.6; color: #4c6280; margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Stat bar
   -------------------------------------------------------------------------- */

.stats { background: var(--surface-tint); border-bottom: 1px solid var(--border); }
/* Three columns at every width — on phones the cells stack their figure above
   the label rather than dropping to one column per row. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block: 20px;
  text-align: center;
}
.stats__cell { display: flex; align-items: center; justify-content: center; gap: 12px; }
.stats__cell--mid { border-left: 1px solid var(--border-stat); border-right: 1px solid var(--border-stat); }
.stats__figure {
  font-family: var(--font-head);
  font-size: 27px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  flex: 0 0 auto;
}
.stats__label { font-size: 14.5px; color: var(--text-muted-2); font-weight: 600; text-align: left; line-height: 1.35; }

/* Two label lengths. The full wording would run 4–5 lines inside a ~118px
   phone column, so the short form is swapped in below 720px. `display: none`
   drops the hidden one from the accessibility tree, so only one is announced. */
.stats__label--short { display: none; }

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

.cards { display: grid; gap: 22px; }
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .card:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
}
.card img { height: 52px; width: auto; margin-bottom: 18px; }
.card h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--text-muted-2); }

.center-cta { text-align: center; margin-top: 40px; }

/* --------------------------------------------------------------------------
   What sets us apart
   -------------------------------------------------------------------------- */

.split { display: grid; gap: 40px; align-items: center; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); display: block; }
.photo-grid__wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.photo-grid__small { aspect-ratio: 4 / 3; }

.split h2 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 900; margin: 14px 0 30px; }
.feature-list { display: grid; gap: 26px; }
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature img { height: 44px; width: auto; flex: 0 0 auto; }
.feature h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.feature p { font-size: 16px; line-height: 1.65; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Service area
   -------------------------------------------------------------------------- */

.area { text-align: center; }
.area h2 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 900; margin: 14px 0 18px; }
.area p { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin-bottom: 24px; }
.area__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.area__pills li {
  background: #fff;
  border: 1px solid var(--border-pill);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pill-text);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.reviews__head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.reviews__head h2 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 900; margin-top: 14px; }
.reviews__grid { display: grid; gap: 32px; align-items: start; }
.reviews__rail img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; margin-bottom: 22px; }
.rating {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  gap: 18px;
}
.rating__score { font-family: var(--font-head); font-size: 46px; font-weight: 900; color: var(--navy); line-height: 1; }
.rating__source { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rating__source img { height: 20px; width: auto; margin: 0; border-radius: 0; }
.rating__source span { font-size: 14.5px; font-weight: 600; color: var(--text-muted-2); }

.stars { color: var(--star); letter-spacing: 2px; }
.stars--sm { font-size: 15px; letter-spacing: 1.5px; }
.stars--md { font-size: 18px; }

.review-list { display: grid; gap: 18px; }
.review {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.review__avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
}
.review__avatar--navy { background: var(--navy); }
.review__avatar--blue { background: var(--blue); }
.review__name { font-family: var(--font-head); font-weight: 800; font-size: 16.5px; color: var(--navy); }
.review__source { height: 22px; width: auto; margin-left: auto; }
.review p { font-size: 16.5px; line-height: 1.7; color: var(--text-quote); }
.review p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Associations
   -------------------------------------------------------------------------- */

.assoc { background: var(--surface-tint); border-top: 1px solid var(--border); padding-block: 54px; text-align: center; }
.assoc h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 30px;
}
.assoc__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; }
.assoc__row img { height: 58px; width: auto; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.final-cta { position: relative; background: var(--navy); color: #fff; }
.final-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.final-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,29,52,.9), rgba(9,29,52,.82)); }
.final-cta__inner { position: relative; max-width: 820px; margin: 0 auto; padding: 82px var(--gutter); text-align: center; }
.final-cta h2 { font-size: clamp(28px, 5vw, 44px); font-weight: 900; margin-bottom: 18px; text-wrap: balance; }
.final-cta p { font-size: 19px; line-height: 1.6; color: var(--on-dark-3); margin-bottom: 32px; }
.final-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Mobile call bar — HANDOFF.md § Responsive asks for this on phones.
   -------------------------------------------------------------------------- */

.call-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.call-bar .btn { flex: 1 1 0; font-size: 16px; padding: 14px 12px; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .section { padding-block: 56px; }
  .section-head { margin-bottom: 34px; }
  .lead-card { padding: 24px 20px; }
}

/* Phones: single column throughout, call bar on, header slimmed. */
@media (max-width: 719px) {
  :root { --gutter: 18px; --header-h: 68px; }

  body { padding-bottom: 76px; }   /* clears the fixed call bar */

  .promo { font-size: 13.5px; gap: 10px; padding: 9px 14px; }

  .site-header { padding: 10px var(--gutter); gap: 12px; }
  .site-header__logo { height: 38px; }
  .site-header__right { gap: 12px; }
  /* The 24px phone number and the FREE ESTIMATE button both fit only on wider
     phones. The fixed call bar covers both jobs below this width. */
  .site-header__phone-wrap { display: none; }
  .site-header__cta { padding: 11px 16px; font-size: 13.5px; }

  .hero__grid { padding-block: 34px 42px; gap: 28px; }
  .hero__eyebrow { font-size: 11.5px; letter-spacing: .08em; padding: 7px 13px; margin-bottom: 16px; }
  .hero__body { margin-bottom: 22px; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* Figure stacked above a centred label, dividers between the three columns. */
  .stats__grid { gap: 0; padding-block: 22px; }
  .stats__cell {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 7px;
    padding-inline: 5px;
  }
  .stats__figure { font-size: 23px; }
  /* A phone column is ~108px of usable text width; "Cleaning, chemicals" alone
     measures 141px, so the comp's two-line wrap isn't reachable at this width
     without shrinking the type into illegibility. Kept at a readable 13px and
     balanced instead. */
  .stats__label { text-align: center; font-size: 13px; line-height: 1.32; text-wrap: balance; }
  .stats__label--long { display: none; }
  .stats__label--short { display: inline; }

  .split { gap: 30px; }
  .feature { gap: 14px; }

  .assoc__row { gap: 26px; }
  .assoc__row img { height: 44px; }

  .final-cta__inner { padding-block: 56px; }
  .final-cta__actions .btn { flex: 1 1 100%; }

  .review { padding: 22px 20px; }
  .rating { padding: 20px; gap: 14px; }
  .rating__score { font-size: 38px; }

  .call-bar { display: flex; }
}

/* Small tablets / large phones: 2-up cards, stat bar still stacked. */
@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
}

/* Tablet: two-column split sections come back. */
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
  .reviews__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 40px; }
  /* Now genuinely sticky — nothing between this and the root creates a scroll
     container any more. See CODE-REVIEW.md #1. */
  .reviews__rail { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Desktop: full two-column hero with the form beside the copy. */
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: 56px;
    row-gap: 26px;
    padding-block: 64px 72px;
  }
  .hero__intro  { grid-column: 1; grid-row: 1; }
  .hero__detail { grid-column: 1; grid-row: 2; }
  .hero__form   { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { gap: 56px; }
  .reviews__grid { gap: 48px; }
  .assoc__row { gap: 46px; }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .promo, .site-header, .call-bar, .hero__bg, .hero__scrim, .final-cta__bg, .final-cta__scrim { display: none !important; }
  .hero, .final-cta { background: #fff !important; color: #000 !important; }
}