/* ============================================================
   HOME PAGE
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--sp-9)) 0 var(--sp-10);
  overflow: hidden;
  background: var(--blue-900);  /* fallback while the photo loads */
  min-height: 560px;
}
.hero__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Real Townsville pool photo, cropped to landscape. Sits behind the scrim.
   On first load it fades in from a soft blur + slight zoom — the JS-driven
   parallax takes over for scroll. (Variables let the entrance and parallax
   share a single transform without fighting each other.) */
.hero__photo {
  position: absolute; inset: 0;
  background-image: url('/assets/img/heros/home.jpg');
  background-size: cover;
  background-position: center 55%;
  opacity: 0;
  transform: scale(1.10);
  filter: blur(8px) saturate(0.85);
  transition:
    opacity 1100ms var(--ease-out),
    transform 1600ms var(--ease-out),
    filter   1100ms var(--ease-out);
}
body.is-loaded .hero__photo {
  opacity: 1;
  transform: scale(1.06);
  filter: blur(0) saturate(1);
}
/* Slow diagonal light shimmer — sun playing on water. */
.hero__shimmer {
  position: absolute; inset: 0;
  background-image: linear-gradient(115deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 62%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
  animation: heroShimmer 11s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes heroShimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 240% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__shimmer { animation: none; opacity: 0; }
}

/* Scrim — fades the left toward white so the headline reads cleanly while
   the caustic art still shows through on the right. Vertical fade on mobile. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.82) 28%,
      rgba(234, 244, 251, 0.42) 60%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.86) 42%,
        rgba(234, 244, 251, 0.45) 75%,
        rgba(255, 255, 255, 0.0) 100%);
  }
  .hero__art { background-position: center top; }
}

/* Wave at the bottom — kept as a brand flourish, simpler colour palette */
.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 100px;
  z-index: 1;
}
.hero__wave-path { transform-origin: center; }
.hero__wave-path--back  { animation: hero-wave 9s ease-in-out infinite; }
.hero__wave-path--front { animation: hero-wave 7s ease-in-out infinite reverse; }
@keyframes hero-wave {
  0%, 100% { transform: translateX(0)    scaleY(1); }
  50%      { transform: translateX(-30px) scaleY(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__wave-path { animation: none !important; }
}

.hero__inner { position: relative; z-index: 2; }

.hero__inner {
  position: relative;
  display: block;
  max-width: 720px;
  padding-block: var(--sp-6) var(--sp-7);
}
@media (max-width: 880px) {
  .hero { padding-top: calc(var(--nav-height) + var(--sp-7)); }
}

/* .hero__accent / .hero__line moved to base.css — used cross-page. */

.hero__lede {
  font-size: var(--fs-lg);
  margin: var(--sp-5) 0 var(--sp-6);
  max-width: 52ch;
  color: var(--sand-700);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Hero price strip — three pricing facts laid out as a row with dividers */
.hero__price-strip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(21, 101, 192, 0.18);
  border-radius: var(--r-asym-1);
  box-shadow: 0 8px 24px -16px rgba(21, 101, 192, 0.35);
  margin: var(--sp-5) 0 var(--sp-5);
}
.hero__price-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.hero__price-item strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--blue-700);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero__price-item em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--sand-700);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.hero__price-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--blue-200), transparent);
}
@media (max-width: 540px) {
  .hero__price-strip {
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .hero__price-divider { display: none; }
  .hero__price-item { min-width: 30%; }
}

/* Emergency callout — small, urgent, important. */
.hero__emergency {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(242, 109, 91, 0.10);
  border-left: 3px solid var(--coral-500);
  color: var(--blue-900);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-top: var(--sp-2);
  max-width: 100%;
}
.hero__emergency svg { color: var(--coral-600); flex-shrink: 0; }
.hero__emergency a { font-weight: 700; color: var(--blue-700); }
.hero__emergency a:hover { color: var(--blue-900); }

.hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--sand-700);
  font-weight: 500;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.hero__trust .ic-check {
  width: 18px;
  height: 18px;
  color: var(--blue-600);
  padding: 3px;
  background: var(--blue-50);
  border-radius: 14px 4px 14px 4px;
}
.hero__trust .ic-check path { stroke-width: 2.6; }


/* ---------- SECTION HEADS ---------- */
.section-head {
  text-align: center;
  margin-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 56ch;
  margin-inline: auto;
}
.section-head h2 { max-width: 22ch; }
.section-head p  { max-width: 52ch; margin-inline: auto; }
.section-head--start { align-items: flex-start; text-align: left; margin-inline: 0; }
.section-head--start h2,
.section-head--start p { margin-inline: 0; }

/* ---------- TRUST BAND (Stacey review + brand marquee combined) ---------- */
.trust-band {
  background: var(--white);
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.trust-band__quote {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(220px, auto);
  gap: var(--sp-5);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.trust-band__quote .proof__quote {
  width: 44px;
  height: 44px;
  color: var(--blue-200);
}
.trust-band__quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-base), 1.6vw, var(--fs-lg));
  line-height: 1.5;
  color: var(--blue-900);
  font-weight: 500;
  font-style: italic;
}
.trust-band__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.trust-band__cite strong {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--blue-800);
}
.trust-band__cite span {
  font-size: var(--fs-xs);
  color: var(--sand-500);
  letter-spacing: 0.04em;
}
.trust-band__cite a {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue-700);
}
.trust-band__brands-label {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-400);
  font-weight: 600;
  margin: var(--sp-6) 0 0;
}
.trust-band .brand-marquee { margin-top: var(--sp-3); }
@media (max-width: 880px) {
  .trust-band__quote { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust-band__quote .proof__quote { width: 32px; height: 32px; }
}

/* ---------- SERVICES PREVIEW ---------- */
.services-preview {
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
  padding: var(--sp-9) 0;
}
.services-preview .section-head { margin-bottom: var(--sp-7); }
.services-preview .section-head h2 {
  font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-4xl));
  letter-spacing: -0.02em;
}

/* The pair — 2 large bookable service cards, equal width, full container.
   Pills + icons live INSIDE the cards so nothing gets clipped. */
.services-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
@media (max-width: 720px) { .services-pair { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-asym-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  position: relative;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med), border-color var(--dur-med);
}
.services-pair > .svc-card:nth-child(even) { border-radius: var(--r-asym-4); }
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--blue-300);
}

.svc-card--featured {
  background: linear-gradient(160deg, var(--blue-50) 0%, var(--white) 60%);
  border-color: var(--blue-300);
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.06);
}

/* Top row: pill (left) + icon (right), inside the card */
.svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.svc-card__pill {
  display: inline-flex;
  align-items: center;
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  line-height: 1;
}
.svc-card__pill--accent {
  background: var(--blue-600);
  color: var(--white);
  border-color: var(--blue-700);
}
.svc-card__icon {
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: 14px 4px 14px 4px;
  color: var(--blue-600);
  flex-shrink: 0;
}
.svc-card__icon svg { width: 28px; height: 28px; }
.svc-card--featured .svc-card__icon {
  background: var(--blue-600);
  color: var(--white);
  border-color: var(--blue-700);
}

.svc-card h3 {
  font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.015em;
}
.svc-card > p {
  font-size: var(--fs-base);
  color: var(--sand-700);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
  flex: 1;  /* push the foot to the bottom so cards align */
}

/* Foot row: price (left) + book CTA (right) */
.svc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--blue-100);
}
.svc-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.svc-card__price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--blue-700);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.svc-card__price em {
  font-style: normal;
  color: var(--sand-500);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.svc-card__cta {
  font-weight: 700;
  color: var(--blue-700);
  white-space: nowrap;
  transition: color var(--dur-fast), gap var(--dur-fast);
}
.svc-card__cta:hover { color: var(--blue-900); }
.svc-card--featured .svc-card__cta { color: var(--blue-700); }

@media (max-width: 540px) {
  .svc-card__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .svc-card { padding: var(--sp-5); }
}

/* "Also handle" — supplementary services, less prominent */
.services-also {
  background: var(--blue-50);
  border-radius: var(--r-asym-5);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.services-also__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-800);
  border-right: 1px solid var(--blue-200);
  padding-right: var(--sp-5);
  white-space: nowrap;
}
.services-also__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.services-also__item h4 {
  font-size: var(--fs-base);
  color: var(--blue-900);
  margin-bottom: 4px;
  font-weight: 700;
  font-family: var(--font-body);
}
.services-also__item p {
  font-size: var(--fs-sm);
  color: var(--sand-700);
  margin: 0;
}
.services-also__item a {
  font-weight: 600;
  color: var(--blue-700);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .services-also { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5); }
  .services-also__label { border-right: none; border-bottom: 1px solid var(--blue-200); padding: 0 0 var(--sp-3); }
  .services-also__items { grid-template-columns: 1fr; }
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 880px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-asym-1);
  padding: var(--sp-6);
  transition: all var(--dur-med) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.services-grid > .service-card:nth-child(even) { border-radius: var(--r-asym-2); }
.services-grid > .service-card:nth-child(even) .service-card__icon { border-radius: 4px 14px 4px 14px; }
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-400), var(--sun-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--blue-200);
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
  background: var(--blue-50);
  /* Asymmetric radius — quietly distinctive */
  border-radius: 14px 4px 14px 4px;
  color: var(--blue-600);
  transition: transform var(--dur-med) var(--ease-out),
              background var(--dur-med);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card:hover .service-card__icon {
  transform: rotate(-4deg) scale(1.05);
  background: var(--sun-400);
  color: var(--blue-900);
}
.service-card h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.service-card p {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.service-card__price {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-700);
}

/* ---------- HOW IT WORKS ---------- */
.how { background: var(--blue-900); color: var(--sand-50); }
.how h2 { color: var(--white); }
.how .eyebrow { color: var(--sun-400); }
.how .eyebrow::before { background: var(--sun-400); }

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (max-width: 720px) { .how__steps { grid-template-columns: 1fr; } }

.how__step {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-asym-3);
  background: rgba(255,255,255,0.03);
  transition: background var(--dur-med), border-color var(--dur-med), transform var(--dur-med) var(--ease-out);
}
.how__steps > .how__step:nth-child(2) { border-radius: var(--r-asym-4); }
.how__step:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--sun-400);
  transform: translateY(-4px);
}
.how__num {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 800;
  line-height: 1;
  color: var(--sun-400);
  display: block;
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}
.how__step h3 { color: var(--white); margin-bottom: var(--sp-2); }
.how__step p { color: var(--sand-200); }

/* ---------- TRUST / STATS ---------- */
.trust { background: var(--sand-50); }
.trust__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.trust__stats > div {
  background: var(--white);
  padding: var(--sp-5);
  border-radius: var(--r-asym-1);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}
.trust__stats > div:nth-child(even) { border-radius: var(--r-asym-2); }
.trust__stats strong {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--blue-700);
  line-height: 1;
}
.trust__stats span {
  font-size: var(--fs-sm);
  color: var(--sand-500);
  font-weight: 500;
}

/* ---------- FINAL CTA ---------- */
.cta-final { background: var(--blue-50); }
.cta-final__card {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  border-radius: var(--r-asym-5);
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-final__card::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255, 208, 87, 0.18), transparent 60%);
  pointer-events: none;
}
.cta-final__card h2 { color: var(--white); margin-bottom: var(--sp-3); }
.cta-final__card p { color: var(--sand-200); margin: 0 auto var(--sp-5); max-width: 50ch; }
.cta-final__card .hero__cta { justify-content: center; }

.cta-final__card .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
}
.cta-final__card .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--white);
  color: var(--white);
}

/* ============================================================
   ENHANCED SECTIONS
   ============================================================ */

/* Section head — left-aligned variant for asymmetric rhythm */
.section-head--start {
  text-align: left;
  align-items: flex-start;
  max-width: 640px;
}
.section-head--start h2 { line-height: 1.05; }

/* ---------- TRUST: split layout w/ map ---------- */
.trust {
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
  position: relative;
  padding: var(--sp-9) 0;
}
.trust .split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 880px) { .trust .split { grid-template-columns: 1fr; } }
.trust h2 {
  font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl));
  margin-bottom: var(--sp-4);
}

.suburb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-6);
  padding: 0;
}
.suburb-list li {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--blue-800);
  background: var(--white);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--blue-100);
}

.map-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-radius: 28px 8px 28px 8px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--white);
}
@media (max-width: 720px) {
  .map-wrap { grid-template-columns: 1fr; }
}
.coast-map {
  width: 100%;
  height: auto;
  display: block;
  background: var(--blue-100);
}
.coast-map .pin circle {
  filter: drop-shadow(0 2px 3px rgba(8, 66, 90, 0.30));
}

.map-key {
  list-style: none;
  margin: 0;
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--sp-3);
  background: var(--blue-50);
  align-content: center;
  font-size: var(--fs-sm);
  color: var(--blue-900);
}
.map-key li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.map-key li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--blue-600);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 22px;
}
.map-key li:first-child span { background: var(--sun-500); color: var(--blue-900); }

/* ---------- TRUST STRIP ---------- */
.strip {
  background: var(--blue-900);
  color: var(--sand-50);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.strip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.strip__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 140px;
}
.strip__num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--sun-400);
  letter-spacing: -0.02em;
}
.strip__label {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand-300);
}
.strip__sep {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
  flex: 0 0 1px;
}
@media (max-width: 720px) {
  .strip__sep { display: none; }
  .strip__row { gap: var(--sp-4); }
}

/* ---------- MEET BEN + RECENT POOLS (editorial split) ---------- */
.meet {
  background: var(--sand-50);
  padding: var(--sp-10) 0;
  position: relative;
}
.meet::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
  pointer-events: none;
}
.meet__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(var(--sp-6), 6vw, var(--sp-9));
  align-items: center;
}
@media (max-width: 880px) {
  .meet__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Photo cluster — one main tilted hero photo + 2 smaller below */
.meet__photos {
  display: grid;
  grid-template-rows: 1.6fr 1fr;
  gap: var(--sp-3);
}
.meet__photos-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.meet__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--blue-50);
}
.meet__photo--main {
  border-radius: 28px 8px 28px 8px;
  box-shadow: var(--sh-lg);
  transform: rotate(-1.2deg);
  transition: transform 600ms var(--ease-out);
}
.meet__photo--main:hover { transform: rotate(0deg); }
.meet__photo--main img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 60%;
}
.meet__photo--sub {
  border-radius: var(--r-asym-1);
  box-shadow: var(--sh-md);
}
.meet__photo--sub:nth-child(2) { border-radius: var(--r-asym-2); }
.meet__photo--sub img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.meet__photo--sub figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 39, 84, 0.78) 80%);
  color: var(--white);
  padding: var(--sp-5) var(--sp-3) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meet__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.meet__stamp {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  background: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px 4px 14px 4px;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - var(--sp-6));
}
.meet__stamp strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--blue-900);
}
.meet__stamp span {
  font-size: var(--fs-xs);
  color: var(--sand-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meet__body h2 {
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  margin: var(--sp-3) 0 var(--sp-4);
}
.meet__body p {
  font-size: var(--fs-lg);
  color: var(--sand-700);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.meet__points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.meet__points li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--blue-900);
  font-weight: 500;
}
.meet__points .ic-check {
  width: 22px; height: 22px;
  padding: 4px;
  background: var(--blue-50);
  border-radius: 14px 4px 14px 4px;
  color: var(--blue-600);
  flex-shrink: 0;
}

/* ---------- WORK / RECENT VISITS ---------- */
.work {
  background: var(--white);
  padding: var(--sp-9) 0;
}
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
@media (max-width: 880px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .work__grid { grid-template-columns: 1fr; } }

/* Feature variant — one large hero photo + 2 smaller stacked photos.
   Used on the home page Recent Visits section for a more editorial layout. */
.work__grid--feature {
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-4);
  min-height: 520px;
}
.work__grid--feature .work__tile { display: flex; flex-direction: column; }
.work__grid--feature .work__tile--feature {
  grid-row: 1 / span 2;
}
.work__grid--feature .work__photo {
  flex: 1;
  height: 100%;
  aspect-ratio: auto;
  min-height: 220px;
}
@media (max-width: 720px) {
  .work__grid--feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .work__grid--feature .work__tile--feature { grid-row: auto; }
  .work__grid--feature .work__photo { aspect-ratio: 4/3; }
}

.work__tile {
  margin: 0;
  border-radius: 22px 6px 18px 18px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.work__tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
/* Vary corners across tiles (anti-uniformity) */
.work__tile[data-shade="1"] { border-radius: 22px 6px 18px 18px; }
.work__tile[data-shade="2"] { border-radius: 6px 22px 18px 18px; }
.work__tile[data-shade="3"] { border-radius: 18px 18px 22px 6px; }
.work__tile[data-shade="4"] { border-radius: 18px 18px 6px 22px; }

.work__media {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}

/* Real photo variant — replaces the CSS-gradient placeholders. */
.work__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms var(--ease-out);
}
.work__tile:hover .work__photo { transform: scale(1.04); }
.work__media::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0, transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.35) 0, transparent 14%);
  mix-blend-mode: screen;
}
.work__media--green {
  background: linear-gradient(160deg, #9CB87A 0%, #4F7A3F 70%, #2E5A2A 100%);
}
.work__media--clear {
  background: linear-gradient(160deg, #C8E9F2 0%, #6FC2DC 60%, #1487B2 100%);
}
.work__media--haze {
  background: linear-gradient(160deg, #BBC8B7 0%, #8FA88F 60%, #5C7A6B 100%);
}
.work__media--bright {
  background: linear-gradient(160deg, #E8F4F8 0%, #8FCEDF 60%, #1487B2 100%);
}

.work__tile figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--sand-700);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.work__chip {
  background: var(--coral-500);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work__chip--ok { background: var(--blue-600); }

.work__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--sand-500);
  font-style: italic;
}

/* ---------- AFFILIATED BRANDS — infinite marquee ---------- */
.brands {
  background: var(--white);
  padding: var(--sp-9) 0;
  overflow: hidden;  /* keep the full-bleed marquee contained */
}

/* Marquee track — two identical sets side-by-side, animated -50%
   leftward for a seamless loop. Edge gradient mask fades the logos
   in/out so they appear to emerge from infinity. */
.brand-marquee {
  margin-top: var(--sp-7);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  padding: var(--sp-5) 0;
  animation: brand-marquee-scroll 36s linear infinite;
  will-change: transform;
}
/* Spacing as margin-right on each item (not flex gap), so the last item of
   each set carries a trailing gap. That makes 50% of the track width equal
   one full set + its trailing gap, which is what -50% must translate by for
   a seamless loop. With flex gap the trailing gap is missing and the wrap
   shows a ~half-gap jump every cycle. */
.brand-marquee__track > .brand-mark-link {
  margin-right: clamp(48px, 7vw, 96px);
  flex-shrink: 0;
}
.brand-marquee:hover .brand-marquee__track,
.brand-marquee:focus-within .brand-marquee__track {
  animation-play-state: paused;
}

@keyframes brand-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* Anchor wrapper — keeps marquee layout while making each brand clickable */
.brand-mark-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-fast);
  outline-offset: 4px;
}
.brand-mark-link:focus-visible {
  outline: 2px solid var(--blue-500);
  border-radius: 4px;
}
.brand-mark-link:hover .brand-mark { color: var(--blue-700); }
.brand-mark-link:hover .brand-mark__icon { color: var(--blue-500); transform: scale(1.05); }

/* Common wordmark base */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-2xl));
  letter-spacing: -0.005em;
  color: var(--sand-500);
  white-space: nowrap;
  transition: color var(--dur-med);
  user-select: none;
}
.brand-mark sup {
  font-size: 0.4em;
  font-weight: 600;
  margin-left: 2px;
  vertical-align: super;
  opacity: 0.7;
}
.brand-mark__icon {
  width: 28px;
  height: 28px;
  color: var(--sand-400);
  flex-shrink: 0;
  transition: color var(--dur-med), transform var(--dur-med) var(--ease-out);
}

/* On hover the marquee items light up to brand-blue */
.brand-marquee:hover .brand-mark { color: var(--blue-800); }
.brand-marquee:hover .brand-mark__icon { color: var(--blue-600); }

/* Per-brand identity treatments — distinctive but not pretending to be
   the real licensed logos. Swap each <span class="brand-mark"> for an
   <img> when proper SVGs are sourced from each brand's media kit. */
.brand-mark--astralpool {
  letter-spacing: 0.12em;
}
.brand-mark--zodiac {
  letter-spacing: 0.18em;
  font-weight: 900;
}
.brand-mark--magnapool {
  letter-spacing: -0.01em;
  font-style: italic;
}
.brand-mark--magnapool .brand-mark__icon { color: var(--blue-400); }
.brand-mark--viron {
  letter-spacing: 0.22em;
  font-weight: 700;
}
.brand-mark--fluidra {
  letter-spacing: 0.06em;
}

/* Fluidra-style trailing dots motif */
.brand-mark__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.brand-mark__dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.brand-mark__dots i:nth-child(2) { opacity: 0.8; }
.brand-mark__dots i:nth-child(3) { opacity: 0.95; }
.brand-mark__dots i:nth-child(4) { opacity: 1; transform: scale(1.15); }

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .brand-mark { font-size: var(--fs-lg); gap: 8px; }
  .brand-mark__icon { width: 22px; height: 22px; }
  .brand-marquee__track > .brand-mark-link { margin-right: 56px; }
}

/* ---------- REVIEWS / TESTIMONIALS ---------- */
.reviews {
  background: var(--white);
  padding: var(--sp-9) 0;
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (max-width: 880px) { .reviews__grid { grid-template-columns: 1fr; } }

/* Single-quote variant — used when only one review is real. Centres the
   quote and lets it breathe instead of stretching across 3 columns. */
.reviews__grid--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.reviews__grid--single .quote {
  padding: var(--sp-7);
  font-size: var(--fs-lg);
}
.reviews__grid--single blockquote {
  font-size: var(--fs-lg);
  line-height: 1.55;
}

.quote {
  margin: 0;
  padding: var(--sp-6);
  background: var(--sand-50);
  border-radius: 6px 22px 6px 22px;
  border-left: 3px solid var(--blue-400);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 16px;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--blue-300);
  opacity: 0.6;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--blue-900);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
.quote figcaption strong {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--blue-800);
  font-size: var(--fs-base);
}
.quote figcaption span {
  font-size: var(--fs-sm);
  color: var(--sand-500);
}
.quote--accent {
  background: var(--blue-700);
  border-left-color: var(--sun-400);
}
.quote--accent::before { color: rgba(255,208,87,0.55); }
.quote--accent blockquote { color: var(--sand-50); }
.quote--accent figcaption { border-top-color: rgba(255,255,255,0.12); }
.quote--accent figcaption strong { color: var(--white); }
.quote--accent figcaption span  { color: var(--blue-200); }

.reviews__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--sand-500);
}
.reviews__note code {
  font-family: var(--font-mono);
  background: var(--sand-100);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- WAVE DIVIDERS ---------- */
/* Inserted between sections that change background. Subtle, not gimmicky. */
.wave-divider {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
}