/* ==========================================================================
   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 */
  --icon-tint:       #bcd8ef;   /* secondary fill in the inline section icons */
  --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__meta { 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__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; }

/* form_embed.js sets an explicit pixel height once the iframe reports its own.
   min-height only guards the window before that message arrives. */
.lead-card__embed { width: 100%; min-height: 420px; border: 0; display: block; }

.lead-card__note { font-size: 13.5px; color: var(--label); text-align: center; margin-top: 12px; }

/* --------------------------------------------------------------------------
   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__icon { display: block; width: 52px; height: 52px; 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__icon { display: block; width: 44px; height: 44px; 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; }

/* --------------------------------------------------------------------------
   Sticky mobile CTA bar — HANDOFF.md § Responsive asks for this on phones.
   Named for calling originally; the page now converts on the form only.
   -------------------------------------------------------------------------- */

.cta-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;
}
.cta-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; }
  /* Hidden on phones so the logo and CTA get the full bar; the sticky CTA
     bar below carries the conversion. */
  .site-header__meta { 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; max-width: 100%; }
  /* 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; }

  .cta-bar { display: flex; }
}

/* A long figure word ("Full-Service") overruns a 95px column on the narrowest
   phones. Step it down rather than let it spill past the divider. */
@media (max-width: 359px) {
  :root { --gutter: 14px; }

  .stats__figure { font-size: 20px; }

  /* "Get a Free Estimate" is a longer label than the header used to carry, and
     at 320px it overran the bar by 9px. Trim the logo and the button so the
     row fits without changing the wording. */
  .site-header__logo { height: 34px; }
  .site-header__cta { font-size: 12px; padding: 10px 12px; letter-spacing: .02em; }
}

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

/* 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) {
  /* The left copy is two grid items so phones can slot the form between them.
     On desktop the form spans both rows, so its height is distributed across
     them — which pushed row 1 far taller than the eyebrow, H1 and lead need and
     opened a void in the middle of the copy. The two 1fr spacer rows absorb
     that surplus instead, above and below the copy rather than through it, so
     the block stays whole and sits centred against the form. Row gap moves to a
     margin so the spacers do not add gaps of their own. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 56px;
    row-gap: 0;
    padding-block: 64px 72px;
  }
  .hero__intro  { grid-column: 1; grid-row: 2; }
  .hero__detail { grid-column: 1; grid-row: 3; margin-top: 26px; }
  .hero__form   { grid-column: 2; grid-row: 1 / -1; 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, .cta-bar, .hero__bg, .hero__scrim, .final-cta__bg, .final-cta__scrim { display: none !important; }
  .hero, .final-cta { background: #fff !important; color: #000 !important; }
}

/* --------------------------------------------------------------------------
   Thank-you page (/thank-you-chat/)
   -------------------------------------------------------------------------- */

.confirm { position: relative; background: var(--navy); color: #fff; }
.confirm__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
}
.confirm__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,29,52,.92), rgba(9,29,52,.86));
}
.confirm__inner {
  position: relative;
  padding-block: 76px 82px;
  text-align: center;
}
.confirm__icon {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid;
  place-items: center;
  font-size: 36px;
  margin: 0 auto 24px;
}
.confirm h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 900;
  margin-bottom: 18px;
  text-wrap: balance;
}
.confirm__lead {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--on-dark-3);
  max-width: 60ch;
  margin: 0 auto;
}
.confirm__note {
  margin-top: 26px;
  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: 9px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--on-dark-eyebrow);
}