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

  /* 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: 42px; 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 { margin-left: auto; }
@media (min-width: 940px) { .header-cta { margin-left: 0; } }

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

/* --------------------------------------------------------- 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); }
.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: .42rem .9rem;
}

.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(2.4rem, 5vw, 3.4rem) 1.5rem; }
.footer-top {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 620px) { .footer-top { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } }
.footer-brand picture { display: block; }
.footer-brand img { height: 46px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: .89rem; max-width: 32ch; margin: 0 0 1rem; }
.footer-tel {
  display: inline-block; color: var(--sun); font-weight: 800;
  font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none;
}
/* 44px tap targets, so the icons stay usable on a phone even though the glyph
   inside is 20px — the footer sits right above the fixed call dock. */
.footer-social { display: flex; gap: .35rem; margin-top: 1.1rem; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px;
  color: rgba(255,255,255,.72); border-radius: 50%;
  transition: color .18s ease, background-color .18s ease;
}
.footer-social a:first-child { margin-left: -10px; }
.footer-social a:hover { color: var(--sun); background: rgba(255,255,255,.07); }
.footer-social svg { width: 20px; height: 20px; }

.site-footer h2 {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sun); margin: 0 0 .9rem; font-weight: 600; line-height: 1.4;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .89rem; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--sun); }
/* three items now: copyright, ABN, signature. space-between would strand the
   ABN mid-row, so the first two group left and the signature is pushed right. */
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline;
  padding-top: 1.3rem; font-size: .8rem; color: rgba(255,255,255,.5);
}
.footer-abn { font-variant-numeric: tabular-nums; }
.footer-sig { color: var(--sun); font-weight: 700; }
/* only push it right once the row actually fits on one line — below that the
   three items stack and a right-aligned line looks stranded */
@media (min-width: 720px) { .footer-sig { margin-left: auto; } }

/* --------------------------------------------------------- mobile call dock */

.call-dock {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid rgba(11,35,56,.12);
}
.call-dock .btn { width: 100%; padding-block: .85rem; }
@media (min-width: 940px) { .call-dock { display: none; } }

/* One call action on mobile, and it is the dock.
   The dock is position:fixed, so any other call button is on screen at the
   same time rather than merely further down the page — the header pill, the
   hero button and the closing button all sat in the first viewport together,
   three identical yellow buttons. Below 940px the dock is the only one; it
   never leaves the screen, so nothing is lost by hiding the rest. The header
   pill also wrapped "0437 283 972" onto two lines at 390px and crowded the
   logo, which is the cramped top-right corner. */
@media (max-width: 939px) {
  .header-cta,
  .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
     fixed dock — 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 dock — 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); }
  /* keep the dock from covering the end of the page — 5.5rem left only 13px
     between the last footer line and the dock */
  .site-footer { padding-bottom: 6.5rem; }
}