/* ============================================================
   PIONEER FAMILY POOLS — MAIN STYLESHEET
   Architecture: BEM methodology, mobile-first, CSS custom props
   Sections:
     0.  Custom properties (design tokens)
     1.  CSS reset & base
     2.  Typography
     3.  Utility classes
     4.  Layout primitives
     5.  Buttons & CTAs
     6.  Components
        6a. Scrolling banner
        6b. Promotions strip (#on-sale)
        6c. Hotspot image
        6d. Pool section
        6e. Spa & wellness section
        6f. Patio section
        6g. Quiz CTA section
        6h. Testimonials
        6i. Why choose us
     7.  Hero / slider
     8.  Responsive overrides (tablet & desktop breakpoints)
   ============================================================ */


/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colours */
  --color-primary:        #1f629c;
  --color-primary-dark:   #0d385e;
  --color-accent-green:   #1a6b4a;
  --color-accent-warm:    #7a5c4a;
  --color-accent-gold:    #c4954a;

  /* Neutrals */
  --color-bg:             #f8f7f4;
  --color-bg-dark:        #111111;
  --color-surface:        #ffffff;
  --color-border:         #dddddd;
  --color-text:           #111111;
  --color-text-muted:     #555555;
  --color-text-faint:     #aaaaaa;

  /* Spacing scale */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Section padding shorthand */
  --section-padding-y:    clamp(3rem, 7vw, 6rem);
  --section-padding-x:    5vw;

  /* Typography scale */
  --text-xs:    0.625rem;   /* 10px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.1rem;     /* ~18px */
  --text-xl:    1.375rem;   /* 22px */

  /* Heading scale (fluid) */
  --heading-h1: clamp(2.2rem, 5vw, 3.9rem);
  --heading-h2: clamp(2.6rem, 4.3vw, 4.4rem);
  --heading-h3: clamp(1.2rem, 2.5vw, 1.5rem);

  /* Font families */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  /* Borders & radii */
  --radius-sm:  2px;
  --radius-md:  4px;

  /* Transitions */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Slider */
  --slide-duration: 0.9s;
}


/* ============================================================
   1. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Web fonts */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-text);
  letter-spacing: -0.5px;
}

h1 { font-size: var(--heading-h1); }
h2 { font-size: var(--heading-h2); }
h3 { font-size: var(--heading-h3); }
h4 { font-size: var(--text-xl); font-weight: 700; }

/* Shared section heading used across sections */
.section-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
}

.section-subtitle {
  width: 65%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .section-subtitle {
    width: 100%;
  }
}

/* Eyebrow label — appears above headings site-wide */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* Eyebrow on dark backgrounds */
.eyebrow--light { color: rgba(255, 255, 255, 0.6); }
.eyebrow--accent { color: var(--color-accent-gold); }

/* Italic em inside display headings */
.heading-em {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: 0.52em;
  color: var(--color-accent-green);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-top: 0.2em;
}


/* ============================================================
   3. UTILITY CLASSES
   ============================================================ */

/* Colour */
.text-white  { color: #ffffff; }
.text-muted  { color: var(--color-text-muted); }
.text-faint  { color: var(--color-text-faint); }
.text-accent { color: var(--color-accent-green); }

/* Alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Spacing — margin-top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

/* Spacing — margin-bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

/* Visibility */
.hidden       { display: none !important; }
.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;
}

/* Body copy helper */
.body-copy {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 10px 0;
}


/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

/* Full-width constrained container */
.container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Narrower content container */
.content-wrap {
  width: 90%;
  max-width: 1400px;
  margin-inline: auto;
}

/* Generic section wrapper */
.section {
  padding-block: var(--section-padding-y);
  padding-inline: var(--section-padding-x);
}

/* Light background variant */
.section--light { background: var(--color-bg); }

/* Dark background variant */
.section--dark {
  background: var(--color-bg-dark);
  color: #ffffff;
}


/* ============================================================
   5. BUTTONS & CTAs
   ============================================================ */

/* ── Primary button (used site-wide) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), gap var(--transition-fast);
  width: fit-content;
}

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--light {
  background: #ffffff;
  color: var(--color-primary);
  border: 2px solid #ffffff;
}
.btn--light:hover { background: #f0f0f0; }

.btn--light-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn--primary-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

/* ── Arrow CTA — used inside hero/quiz sections ── */
.cta-arrow {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
  transition: width var(--transition-fast);
}

.cta-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.btn:hover .cta-arrow { width: 26px; }

/* ── Underline text link ── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-accent-warm);
  text-decoration: none;
  padding-bottom: 2px;
  position: relative;
  align-self: flex-start;
  transition: gap var(--transition-fast);
}

.text-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.text-link:hover { gap: 13px; }
.text-link:hover::after { transform: scaleX(1.06); }

/* Green accent variant */
.text-link--green { color: var(--color-accent-green); }

/* White variant (on dark/image) */
.text-link--white {
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.text-link--white::after { background: #ffffff; }
.text-link--white:hover  { border-color: #ffffff; }

.btn-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.btn-wrapper .btn {
  margin-right: 15px;
}

@media (max-width: 900px) {
  .btn-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
  .btn-wrapper .btn {
    margin: 15px 0;
  }
}


/* ============================================================
   6a. SCROLLING BANNER
   ============================================================ */

/* ── Marquee bar ─────────────────────────────────────── */
.marquee {
    background-color: var(--color-primary);
    overflow: hidden;
    white-space: nowrap;
    padding-block: 18px;
    position: relative;
}

/* Fade edges */
.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee::before {
    left: 0;
    background: linear-gradient( to right, var(--color-primary), transparent );
}
.marquee::after {
    right: 0;
    background: linear-gradient( to left, var(--color-primary), transparent );
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    animation: marqueeScroll 15s linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-inline: 0;
    padding-inline: 40px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.marquee__item:last-child {
    border-right: none;
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}


/* ============================================================
   6b. PROMOTIONS STRIP
   ============================================================ */

/* Horizontal-scrolling promotion cards */
.promos {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-block: 60px;
}

.promos__header {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
}

.promos__heading { margin-bottom: 20px; }

/* Arrow button group */
.promos__arrows { margin-top: 20px; }

.promos__arrow-btn {
  margin-inline: 7px;
  user-select: none;
}

.promos__arrow-btn img { width: 40px; height: auto; }

/* Scroll container */
.promos__scroll-outer { overflow: hidden; flex: 3; }

.promos__scroll-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 30px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  margin: 0;
}

/* Hide scrollbar */
.promos__scroll-track::-webkit-scrollbar { display: none; }

/* Individual promo card */
.promo-card {
  flex: 0 0 clamp(240px, 70vw, 400px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.promo-card__image {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}

/* Specific promo images — swap src for CMS-managed backgrounds if possible */
.promo-card__image--furniture { background-image: url("https://dev.pioneerpools.com/pioneer/wp-content/uploads/2021/02/Montana-Patios-Gallery.jpg"); }
.promo-card__image--hottub    { background-image: url("https://dev.pioneerpools.com/pioneer/wp-content/uploads/2016/11/winter-hottub-background.jpg"); }
.promo-card__image--coldplunge{ background-image: url("https://dev.pioneerpools.com/pioneer/wp-content/uploads/2025/10/cold_plunge_home.png"); }
.promo-card__image--liners    { background-image: url("https://dev.pioneerpools.com/pioneer/wp-content/uploads/2023/09/white-pacific-liner.jpg"); }

/* Underline-on-hover heading */
.promo-card__title {
  margin-top: 12px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-base);
}

.promo-card:hover .promo-card__title { text-decoration-color: currentColor; }


/* ============================================================
   6c. HOTSPOT IMAGE
   ============================================================ */

/* Wrapper holds the image + absolute hotspot markers */
.hotspot-section { position: relative; }

/* Inline heading block shown above image on mobile */
.hotspot-section__intro { padding-block: 45px; display: none; }

.hotspot-section__wrapper {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.9s ease forwards 0.35s;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.hotspot-section__img-wrap {
  position: relative;
  overflow: hidden;
}

/* Vignette overlay */
.hotspot-section__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.hotspot-section__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(0.7);
}

/* Overlay text — desktop (positioned inside wrapper) */
.hotspot-section__overlay-text {
  position: absolute;
  top: 5%;
  right: 0;
  max-width: 600px;
  opacity: 1;
}

/* ── Hotspot dot ── */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.hotspot--1 { left: 28%; top: 30%; }
.hotspot--2 { left: 28%; top: 54%; }
.hotspot--3 { left: 30%; top: 72%; }
.hotspot--4 { left: 70%; top: 76%; }

.hotspot__dot {
  width: 35px;
  height: 35px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.hotspot__dot::before {
  content: '+';
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #111;
  position: absolute;
  inset: auto;
  border: none;
  background: none;
  animation: none;
  z-index: 1;
}

.hotspot__dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  animation: ripple 2.4s ease-out infinite;
  animation-delay: 0.8s;
  z-index: 0;
}

@keyframes ripple {
  0%   { inset: -4px;  opacity: 1; }
  100% { inset: -16px; opacity: 0; }
}

.hotspot.is-active .hotspot__dot,
.hotspot__dot:hover {
  background: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
  transform: scale(1.15);
}

.hotspot.is-active .hotspot__dot::before {
  content: '×';
  color: #fff;
}

.hotspot.is-active .hotspot__dot::after {
  animation: none;
}

/* ── Tooltip — desktop ── */
.hotspot__tooltip {
  position: absolute;
  width: max-content;
  max-width: 400px;
  min-width: 200px;
  background: rgba(18, 18, 16, 0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  bottom: calc(100% + 16px);
  left: 50%;
  z-index: 20;
}

.hotspot--flip-down .hotspot__tooltip {
  bottom: auto;
  top: calc(100% + 16px);
}

.hotspot--flip-left .hotspot__tooltip {
  left: auto;
  right: 0;
  transform: translateY(6px);
}

.hotspot.is-active .hotspot__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.hotspot--flip-left.is-active .hotspot__tooltip {
  transform: translateY(0);
}

/* ── Tooltip text ── */
.hotspot__tooltip-label {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.45rem;
}

.hotspot__tooltip-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.hotspot__tooltip-body {
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .hotspot-section__img { aspect-ratio: 1 / 1; }
  .hotspot-section__overlay-text { display: none; }
  .hotspot-section__intro { display: flex; flex-direction: column; align-items: flex-start; }

  .hotspot--1 { left: 18%; top: 30%; }
  .hotspot--2 { left: 12%; top: 54%; }
  .hotspot--3 { left: 12%; top: 72%; }

  .hotspot__dot {
    width: 28px;
    height: 28px;
  }

  .hotspot__dot::after {
    animation: none;
  }

  .hotspot__tooltip {
    position: absolute !important;
    width: calc(100% - 48px) !important;
    max-width: 340px;
    min-width: 0;
    z-index: 100;
    transition: opacity 0.25s ease;
    /* No top/left/transform here — JS handles it */
  }

  .hotspot.is-active .hotspot__tooltip {
    opacity: 1;
    pointer-events: auto;
  }
}


.hotspot__dot {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hotspot {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   6d. POOL SECTION
   ============================================================ */

.pool-section {
  background: var(--color-bg);
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Centred section header */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.section-header .eyebrow { margin-bottom: 1.25rem; }

.section-header__sub {
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-inline: auto;
}

/* ── Tabs (shared by Pool & Spa sections) ── */
.tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.tabs-row {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}

.tab {
  background: none;
  border: none;
  padding: 0 0 14px;
  margin-inline: 1.8rem;
  font-size: var(--text-base);
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: var(--color-accent-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s ease;
}

.tab.is-active         { color: var(--color-text); }
.tab.is-active::after  { transform: scaleX(1); }
.tab:hover:not(.is-active) { color: var(--color-text-muted); }

/* ── Tab panels ── */
.tab-panel { display: none; }

.tab-panel.is-active {
  display: block;
  animation: panelReveal 0.38s ease forwards;
}

@keyframes panelReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card grids ── */
.card-grid             { display: grid; gap: 20px; }
.card-grid--4          { grid-template-columns: repeat(4, 1fr); }
.card-grid--3          { grid-template-columns: repeat(3, 1fr); }
.card-grid--2          { grid-template-columns: repeat(2, 1fr); }

/* ── Pool / generic image card ── */
.img-card {
  display: flex;
  flex-direction: column;
  margin-block: 20px;
}

.img-card-horizontal {
  flex-direction: row;
  align-items: center;
}

.img-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #cccccc;
}

.img-card__media-horizontal {
  flex: 1;
  height: 320px;
  overflow: hidden;
}

/* Aspect ratios per context */
.card-grid--3 .img-card__media { aspect-ratio: 4 / 5; }
.card-grid--2 .img-card__media { aspect-ratio: 3 / 2; }

.img-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.img-card:hover .img-card__media img { transform: scale(1.04); }

/* Fallback placeholder (shown when img fails) */
.img-card__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.img-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,0.92);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  padding: 5px 13px;
}

.img-card__body {
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.img-card__body-horizontal {
  padding: 0 2rem;
  border-top: none;
}

.img-card__title  { margin-top: var(--space-2); }

.img-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  text-transform: uppercase;
  font-weight: 400;
  color: #434343;
  text-decoration: none;
  padding-bottom: 2px;
  align-self: flex-start;
  position: relative;
  transition: gap var(--transition-fast);
}

.img-card__body li {
  list-style: circle;
}

.img-card__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: #434343;
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.img-card__link:hover { gap: 13px; }
.img-card__link:hover::after { transform: scaleX(1.08); }

@media (max-width: 900px) {

  .section-header {
    width: 95%;
  }

  .img-card-horizontal {
    flex-direction: column;
  }
  .img-card__media-horizontal {
    flex: auto;
    height: 200px;
    overflow: auto;
    margin-bottom: 40px;
  }
  .img-card__body-horizontal {
    padding: 0 1rem;
  }
}

/* ============================================================
   6e. SPA & WELLNESS SECTION
   ============================================================ */

.spa-section {
  background: var(--color-bg);
  padding: var(--section-padding-y) var(--section-padding-x);
}

.spa-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* ── Hero card (large left panel) ── */
.spa-hero {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

.spa-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.spa-hero:hover .spa-hero__img { transform: scale(1.04); }

/* Bottom-up gradient overlay */
.spa-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

.spa-hero__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.25rem 2rem;
}

/* Benefit pill tags */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.pill {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.45);
  padding: 5px 12px;
  background: rgba(255,255,255,0.08);
}

.spa-hero__title { color: #ffffff; }

.spa-hero__desc {
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  line-height: 1.68;
  margin-bottom: 1.2rem;
  max-width: 360px;
}

/* ── Stacked small cards (right column) ── */
.spa-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spa-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.spa-card__media {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 200px;
}

.spa-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.spa-card:hover .spa-card__img { transform: scale(1.04); }

.spa-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  pointer-events: none;
}

.spa-card__pills {
  position: absolute;
  bottom: 12px; left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spa-card__body {
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--color-border);
}

.spa-card__title {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: 15px;
  margin-top: 10px;
}

.spa-card__desc {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}


/* ============================================================
   6f. PATIO SECTION
   ============================================================ */

.patio-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* 3-col grid for patio cards */
.patio-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.patio-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: var(--space-5); }

/* Patio card (reuses img-card structure) */
.patio-card { display: flex; flex-direction: column; margin-block: 20px; }

.patio-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #d8d2c8;
}

.patio-grid--2 .patio-card__media { aspect-ratio: 7 / 4; }

.patio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.patio-card:hover .patio-card__img { transform: scale(1.04); }

.patio-card__body {
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--color-border);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.patio-card__title { font-size: 24px; letter-spacing: 0.04em; }

.patio-card__desc {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.9rem;
  flex: 1;
}


/* ============================================================
   6g. QUIZ CTA SECTION
   ============================================================ */

.quiz-cta-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Full-bleed background image (lazy-loaded <img> for better perf) */
.quiz-cta-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  /* Ken Burns zoom — activated when .is-loaded is added via IntersectionObserver */
  transform: scale(1.04);
  transition: transform 6s var(--ease-out-expo);
  will-change: transform;
}

.quiz-cta-section.is-loaded .quiz-cta-section__bg { transform: scale(1); }

/* Directional fade overlay — keeps right side of photo visible */
.quiz-cta-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 18, 12, 0.85) 0%,
    rgba(10, 18, 12, 0.45) 50%,
    rgba(10, 18, 12, 0) 100%
  );
}

/* Content block */
.quiz-cta-section__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-8);
  max-width: 650px;
  display: flex;
  flex-direction: column;
}

.quiz-cta-section__heading {
  color: #ffffff;
  margin-block: var(--space-2);
}

.quiz-cta-section__heading em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
}

.quiz-cta-section__body {
  color: rgba(255, 255, 255, 0.85);
  max-width: 360px;
  margin-bottom: var(--space-3);
}

/* Entry animation — children fade up after .is-loaded applied */
.quiz-cta-section .eyebrow,
.quiz-cta-section__heading,
.quiz-cta-section__body {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
}

sup {
    font-size: 35%;
    line-height: 0;
    margin-left: .15em;
    top: -1.6em;
}

.quiz-cta-section.is-loaded .eyebrow        { opacity: 1; transform: none; transition-delay: 0.05s; }
.quiz-cta-section.is-loaded .quiz-cta-section__heading { opacity: 1; transform: none; transition-delay: 0.15s; }
.quiz-cta-section.is-loaded .quiz-cta-section__body    { opacity: 1; transform: none; transition-delay: 0.28s; }


/* ============================================================
   6h. TESTIMONIALS
   ============================================================ */

.testimonials {
    background: var(--color-surface);
    padding: var(--section-padding-y) var(--section-padding-x) 4rem;
}

/* ── Featured panel — full width ── */
.testimonials__featured {
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.testimonials__stars {
    display: flex;
    gap: 5px;
    margin-bottom: 1.75rem;
}
.testimonials__star { width: 14px; height: 14px; flex-shrink: 0; }

.testimonials__quote {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--color-text);
    margin-bottom: 2rem;
    animation: quoteReveal 0.35s ease forwards;
}

@keyframes quoteReveal {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.testimonials__quote::before { content: '\201C'; }
.testimonials__quote::after  { content: '\201D'; }

.testimonials__author-name {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 4px;
}
.testimonials__author-meta {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.testimonials__product-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.25rem;
}
.testimonials__product-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent-green);
    flex-shrink: 0;
}
.testimonials__product-name {
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-green);
    font-weight: 400;
}

/* ── List panel — horizontal row below featured ── */
.testimonials__list {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
    gap: 0;
}

.testimonials__list-item {
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}
.testimonials__list-item:first-child {
    border-left: none;
    padding-left: 0;
}
.testimonials__list-item:last-child {
    border-right: none;
}

.testimonials__list-item[aria-selected="false"] { opacity: 0.45; }
.testimonials__list-item[aria-selected="false"]:hover {
    opacity: 0.75;
    background: var(--color-surface);
}
.testimonials__list-item[aria-selected="true"] { opacity: 1; }

/* Active indicator — top border instead of left */
.testimonials__list-indicator {
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent-green);
    transition: width 0.3s ease;
}
.testimonials__list-item[aria-selected="true"] .testimonials__list-indicator {
    width: 48px;
}

.testimonials__list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.testimonials__list-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--color-text);
}
.testimonials__list-stars { display: flex; gap: 3px; flex-shrink: 0; }
.testimonials__list-star  { width: 10px; height: 10px; flex-shrink: 0; }
.testimonials__list-excerpt {
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonials__list-product {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-green);
    font-weight: 400;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.testimonials__list-item[aria-selected="true"] .testimonials__list-product { opacity: 1; }

/* Mobile pips */
.testimonials__pips {
    display: none;
    gap: 4px;
    margin-top: 2rem;
}
.testimonials__pip {
    height: 2px;
    flex: 1;
    background: var(--color-border);
    transition: background var(--transition-base);
}
.testimonials__pip[aria-selected="true"] { background: var(--color-accent-green); }

/* ── Mobile ── */
@media ( max-width: 768px ) {
    .testimonials__quote { font-size: 1.3rem; }
    .testimonials__list {
        grid-template-columns: 1fr;
    }
    .testimonials__list-item {
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding-left: 1rem;
    }
    .testimonials__list-item:first-child {
        padding-left: 1rem;
    }
    .testimonials__list-indicator {
        top: 50%;
        left: -1px;
        transform: translateY(-50%);
        width: 2px;
        height: 0;
        transition: height 0.3s ease;
    }
    .testimonials__list-item[aria-selected="true"] .testimonials__list-indicator {
        width: 2px;
        height: 48px;
    }
    .testimonials__pips { display: flex; }
}


/* ============================================================
   TESTIMONIAL BANNER
   Full-width, single-quote breather band
   ============================================================ */

.testimonial-banner {
  background: var(--color-primary-dark);
  padding: 4.5rem var(--section-padding-x);
}

.testimonial-banner__inner {
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}

.testimonial-banner__mark {
  font-family: var(--font-display);
  font-size: 190px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.15);
}

.testimonial-banner__quote {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.35;
  color: #ffffff;
  max-width: 850px;
  margin-bottom: 1.5rem;
}

.testimonial-banner__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.testimonial-banner__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Optional color variants — swap the dark background for other
   brand tones without touching the markup ── */
.testimonial-banner--green { background: var(--color-accent-green); }
.testimonial-banner--dark  { background: var(--color-bg-dark); }

@media (max-width: 900px) {
  .testimonial-banner__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .testimonial-banner__mark {
    font-size: 64px;
  }
  .testimonial-banner__quote {
    font-size: 19px;
  }
}



/* ============================================================
   STATS BAND
   Full-width, standalone stat strip
   ============================================================ */
 
.stats-band {
  background: var(--color-primary-dark);
  padding: 3.5rem var(--section-padding-x);
}
 
.stats-band__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-bottom: 2rem;
}
 
.stats-band__grid {
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
 
.stats-band__item {
  text-align: center;
}
 
.stats-band__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
 
.stats-band__num span {
  color: var(--color-accent-gold);
}
 
.stats-band__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
 
/* ── Optional color variants — swap the band's background without
   touching markup, e.g. for a different brand page ── */
.stats-band--green { background: var(--color-accent-green); }
.stats-band--dark  { background: var(--color-bg-dark); }
.stats-band--light {
  background: var(--color-bg);
}
.stats-band--light .stats-band__eyebrow { color: var(--color-text-muted); }
.stats-band--light .stats-band__num     { color: var(--color-text); }
.stats-band--light .stats-band__label   { color: var(--color-text-muted); }
 
@media (max-width: 900px) {
  .stats-band__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
}
 
@media (max-width: 640px) {
  .stats-band__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}


/* ============================================================
   6i. WHY CHOOSE US
   ============================================================ */

.why-us {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Two-col intro */
.why-us__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: end;
  margin-bottom: 4.5rem;
}

.why-us__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.why-us__intro strong { font-weight: 500; color: var(--color-text); }

/* Feature grid — 4 columns on desktop */
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.why-us__grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Feature item */
.why-us__item {
  background: var(--color-bg);
  padding: 2.25rem 1.75rem 2.5rem;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.why-us__item:hover { background: var(--color-surface); }

/* Ghost background number */
.why-us__item-ghost {
  position: absolute;
  bottom: -0.15em; right: -0.05em;
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--transition-fast);
}

.why-us__item:hover .why-us__item-ghost { opacity: 0.065; }

.why-us__item-num {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 0.02em;
  color: var(--color-accent-green);
  line-height: 1;
  margin-bottom: 1.5rem;
  position: relative;
}

.why-us__item-divider {
  width: 24px;
  height: 1px;
  background: var(--color-border);
  margin-bottom: 1.25rem;
}

.why-us__item-title {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0.65rem;
  position: relative;
}

.why-us__item-body {
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.72;
  flex: 1;
  position: relative;
}

/* Dark CTA card at end of grid */
.why-us__cta-card {
  background: var(--color-bg-dark);
  padding: 2.25rem 1.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast);
}

.why-us__cta-card:hover { background: #1a1a1a; }

.why-us__cta-heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-bg);
  line-height: 1.15;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.why-us__cta-body {
  font-size: var(--text-base);
  font-weight: 300;
  color: rgba(248, 247, 244, 0.55);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  flex: 1;
}

.why-us__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-bg);
  text-decoration: none;
  padding-bottom: 2px;
  position: relative;
  align-self: flex-start;
  transition: gap var(--transition-fast);
}

.why-us__cta-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: rgba(248, 247, 244, 0.4);
  transform-origin: left;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.why-us__cta-link:hover { gap: 14px; }
.why-us__cta-link:hover::after { background: var(--color-bg); }


/* ============================================================
   7. HERO / SLIDER
   ============================================================ */

.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.services-hero {
  min-height: 550px;
}

/* Individual slide */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--slide-duration) ease;
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Background image with Ken Burns zoom */
.hero__slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 6s ease;
}

.hero__slide.is-active .hero__slide-bg { transform: scale(1); }

/* Left-to-right dark overlay */
.hero__slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,10,9,0.75) 0%,
    rgba(10,10,9,0.35) 60%,
    rgba(10,10,9,0.1) 100%
  );
}

/* Slide background images */
.hero__slide:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/home_hero_background.webp'); }

.hero__slide-hot-tub-wellness:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/Caldera-Image_CONTEMPORARY_EST_COASTAL.webp'); }

.hero__slide-hot-tubs:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/caldera-hot-tub-home-design-banner.webp'); }

.hero__slide-swim-spa:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/EP_FitnessSystems_2023_E550_IceGray_Mocha_Lifestyle_Coffee_01B-1.webp'); }

.hero__slide-sauna:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/Untitled-design-9.webp'); }

.hero__slide-cold-plunge:nth-child(1) .hero__slide-bg {
  background-image: url('/wp-content/uploads/2026/06/caldera-cold-plunge-page-d-spot-brochure-form-desktop.webp');
  transform: scaleX(-1);
}

.hero__slide-cold-plunge:nth-child(1) .hero__slide-bg::after, .hero__slide-ep:nth-child(1) .hero__slide-bg::after {
  background: linear-gradient(
    to left,
    rgba(10,10,9,0.75) 0%,
    rgba(10,10,9,0.35) 60%,
    rgba(10,10,9,0.1) 100%
  );
}

.hero__slide-ig-pools:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/Makowski-Banner.webp'); }

.hero__slide-og-pools:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/PFP_Mont-18.jpg.webp'); }

.hero__slide-ag-pools:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/Customer-Phantom-Oval-Above-Ground-Pool-1.webp'); }

.hero__slide-pools:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/pools_home_hero.webp'); }

.hero__slide-fibreglass:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/fibreglass_hero_image.webp'); }

.hero__slide-vinyl:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/pools_intro.webp'); }

.hero__slide-ep:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/EP-RecSport-2020-R500-AlpineWhite-Mocha-Lifestyle-077.webp'); transform: scaleX(-1); }

.hero__slide-landscaping:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/pools_landscape.webp'); }

.hero__slide-pool-renos:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/5E2C71EF-D12F-498F-B3FF-1BDB0C7E1346.webp'); }

.hero__slide-safety-covers:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/Safety-Cover-Fall-Banner.webp'); }

.hero__slide-patio:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/V02-PFP-2020-Patio-Banner-Bkg.webp'); }

.hero__slide-services:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/MNP-CS-SUMMITRDG-36-1.webp'); }

.hero__slide-about:nth-child(1) .hero__slide-bg { background-image: url('/wp-content/uploads/2026/06/V-01-25-Boldt-Anniversary-Banners.webp'); }

.hero__slide-testimonials:nth-child(1) .hero__slide-bg { background-image: url('https://dev.pioneerpools.com/pioneer/wp-content/uploads/2025/01/V-01-25-PFP-Anniversary-Banners-1.jpg'); }



/* Slide copy */
.hero__content {
  position: absolute;
  bottom: 30%;
  left: 3rem;
  max-width: 640px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    transform var(--slide-duration) ease 120ms,
    opacity  var(--slide-duration) ease 120ms;
}

.hero__slide.is-active .hero__content {
  transform: translateY(0);
  opacity: 1;
}

.hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

.hero__heading {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 3rem;
}

/* Right-side slide nav (text titles) */
.hero__nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.hero__nav-titles {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 3rem;
  pointer-events: auto;
}

.hero__nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding-block: 1rem;
  position: relative;
}

/* Progress dash before each nav item */
.hero__nav-item::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: rgba(245,244,240,0.25);
  flex-shrink: 0;
  transition: width var(--transition-base), background var(--transition-base);
}

.hero__nav-item.is-active::before { width: 2.5rem; background: var(--color-accent-warm); }

.hero__nav-label {
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgb(230,230,230);
  text-align: right;
  max-width: 280px;
  transition: color var(--transition-base);
}

.hero__nav-item.is-active .hero__nav-label,
.hero__nav-item:hover    .hero__nav-label {
  color: #ffffff;
  text-decoration: underline;
}

/* Slide counter */
.hero__counter {
  position: absolute;
  bottom: 12%;
  right: 3rem;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: rgb(230,230,230);
}


/* ============================================================
   8. RESPONSIVE — TABLET & DESKTOP
   ============================================================ */

@media (min-width: 641px) {
  .marquee { display: flex; }
}

@media (max-width: 1100px) {
  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .patio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .card-grid--4, .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {

  /* Hero */
  .hero { min-height: 650px; }

  .hero__content {
    bottom: 10%;
    left: 2rem;
  }

  /* Hotspot — square crop on mobile */
  .hotspot-section__img { aspect-ratio: 1 / 1; }
  .hotspot-section__overlay-text { display: none; }
  .hotspot-section__intro { display: flex; flex-direction: column; align-items: flex-start; }
  
  
  /* Spa grid stacks vertically */
  .tab { margin: 15px 1.8rem; }
  .spa-grid { grid-template-columns: 1fr; }
  .spa-hero  { min-height: 490px; }
  .spa-stack { flex-direction: row; }

  /* Section headings width */
  .section-header h1,
  .section-header h2 { width: 80%; margin-inline: auto; }

  /* Promos: hide manual arrows (swipe available) */
  .promos__arrows  { display: none; }
  .promos          { flex-direction: column; }
  .promos__header  { width: 100%; }

  /* Testimonials: collapse to single column */
  .testimonials__layout  { grid-template-columns: 1fr; }
  .testimonials__divider { display: none; }
  .testimonials__featured { min-height: auto; margin-bottom: 2.5rem; }
  .testimonials__pips     { display: flex; }

  /* Why Us */
  .why-us__top { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 740px) {

  /* Scrolling banner hidden on small screens */
  .marquee { display: none; }

  /* Card grids collapse to 1 col */
  .card-grid--4,.card-grid--3,
  .card-grid--2 { grid-template-columns: 1fr; }
  .card-grid--2 .img-card__media { aspect-ratio: 4 / 3; }

  /* Quiz CTA section */
  .quiz-cta-section {
    min-height: 480px;
    align-items: flex-end;
    padding-bottom: 56px;
  }
  .quiz-cta-section__overlay {
    background: linear-gradient(
      to top,
      rgba(10, 18, 12, 0.92) 0%,
      rgba(10, 18, 12, 0.55) 60%,
      rgba(10, 18, 12, 0.1) 100%
    );
  }
  .quiz-cta-section__content { padding: 0 28px; max-width: 100%; }
  .quiz-cta-section__body    { display: none; }

  /* Spa */
  .spa-section  { padding: 4rem 5vw; }
  .spa-stack    { flex-direction: column; }
  .spa-card     { margin-block: 20px; }
  .section-header h1 { width: 100%; }

  /* Patio */
  .patio-section { padding: 4rem 5vw; }
  .patio-grid,
  .patio-grid--2 { grid-template-columns: 1fr; gap: 14px; }

  /* Why Us */
  .why-us__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .quiz-cta-section { min-height: 420px; }
}




/* ============================================================
   WELLNESS PAGES
   ========================================================== */


.hts-section {
  background: white;
  padding: 96px 64px;
}

.hts-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Quote ── */
.hts-quote {
  border-left: 2px solid #b5a070;
  padding: 4px 0 4px 20px;
}

.hts-quote blockquote {
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.hts-quote cite {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  font-style: normal;
}

/* ── Images ── */
.hts-right {
  position: relative;
}

.hts-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hts-img--main {
  top: 0;
  right: 0;
  width: 72%;
  height: 58%;
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .hts-section { padding: 56px 24px; }
  .hts-inner { grid-template-columns: 1fr; gap: 48px; }
  .hts-heading { font-size: 36px; }
  .hts-img--main { width: 68%; height: 55%; }
}


/* ─── Section Wrapper ──────────────────────────── */
.scroll-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
  align-items: start;
  background: var(--color-bg);
}

/* ─── LEFT: Static Panel ───────────────────────── */
.panel-left {
  position: sticky;
  top: 80px;
  padding-top: 8px;
}

.testimonial {
  border-left: 2px solid #c9a96e;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
}

.testimonial blockquote {
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: rgb(15, 15, 15);
  margin-bottom: 12px;
}

.testimonial cite {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9a96e;
  font-style: normal;
}

/* ─── MIDDLE: Sticky Image ─────────────────────── */
.panel-mid {
  position: sticky;
  top: 80px;
}

.image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.image-frame img.active {
  opacity: 1;
  transform: scale(1);
}

/* ─── RIGHT: Scrolling Cards ───────────────────── */
.panel-right {
  display: flex;
  flex-direction: column;
  gap: 300px;
  padding-top: 80px;
}

.card {
  border: none;
  border-radius: 4px;
  padding: 45px;
  opacity: 0.35;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-dim), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card.active {
  opacity: 1;
  transform: translateY(0);
}

.card.active::before { opacity: 1; }

.card h3 {
  font-size: 35px;
  font-weight: 600;
  color: rgb(15, 15, 15);
  line-height: 1.3;
}

/* Mobile image (hidden on desktop) */
.card-image-mobile {
  display: none;
}

/* ─── MOBILE ───────────────────────────────────── */
@media (max-width: 900px) {
  .scroll-section {
    display: block;
    padding: 48px 20px 80px;
  }

  /* Left panel: static header block */
  .panel-left {
    position: static;
    margin-bottom: 0px;
  }

  /* Hide the sticky middle column entirely */
  .panel-mid { display: none; }

  /* Cards stack naturally */
  .panel-right { gap: 100px; }

  .card {
    opacity: 1;
    transform: none;
    padding: 10px 0;
  }

  .card.active {
    border-color: rgba(201,169,110,0.5);
  }

  /* Show image inside each card on mobile */
  .card-image-mobile {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .card-image-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


  /* ─── Section shell ─────────────────────────────────────────── */
  .product-carousel-section {
    padding: var(--section-padding-y) 0;
    overflow: hidden;
  }
 
  .carousel-outer {
    position: relative;
    padding-left: var(--section-padding-x);
  }
 
  /* Fade edges hint at scrollability */
  .carousel-outer::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to left, var(--color-bg), transparent);
    pointer-events: none;
    z-index: 2;
  }
 
  .carousel-track-wrapper {
    overflow: hidden; /* JS controls transform, not scroll */
  }
 
  .carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
 
  /* ─── Product Card ──────────────────────────────────────────── */
  .product-card {
    /* ~3.5 visible: (100vw - padding) / 3.5 ≈ 28vw, clamped */
    flex: 0 0 clamp(260px, 28vw, 380px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 28px 32px;
    box-shadow: var(--card-shadow);
    transition:
      box-shadow var(--transition-base),
      transform var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
 
  .product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
  }
 
  /* .product-card-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  } */
  
  .brand-logo {
    width: auto;
    height: 70px;
  }

  .card-badge {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 0;
    border-radius: 2px;
    background: transparent;
    color: rgb(15, 15, 15);
    z-index: 1;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    border: 1px solid rgb(200, 200, 200);
  }

  /* Badge interactive */
.card-badge[data-tooltip] {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.card-badge__icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tooltip bubble */
.card-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 10;
  white-space: normal;
}

/* Tooltip arrow */
.card-badge[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 10;
}

/* Show on hover (desktop) */
.card-badge[data-tooltip]:hover::after,
.card-badge[data-tooltip]:hover::before,
.card-badge[data-tooltip]:focus::after,
.card-badge[data-tooltip]:focus::before,
.card-badge[data-tooltip].is-active::after,
.card-badge[data-tooltip].is-active::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Flip tooltip if badge is near top of card */
.card-badge[data-tooltip].tooltip--below::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.card-badge[data-tooltip].tooltip--below::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #1a1a1a;
  transform: translateX(-50%) translateY(-4px);
}
.card-badge[data-tooltip].tooltip--below:hover::after,
.card-badge[data-tooltip].tooltip--below.is-active::after {
  transform: translateX(-50%) translateY(0);
}
.card-badge[data-tooltip].tooltip--below:hover::before,
.card-badge[data-tooltip].tooltip--below.is-active::before {
  transform: translateX(-50%) translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-badge[data-tooltip]::after,
  .card-badge[data-tooltip]::before { transition: none; }
}
 
  /* Product image */
  .card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-surface);
  }
 
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform 0.4s ease;
  }
 
  .product-card:hover .card-image img {
    transform: scale(1.03);
  }
 
  /* Card title */
  .card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-navy);
    text-transform: uppercase;
    padding-bottom: 12px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }
 
  /* Feature list */
  .card-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    flex: 1;
  }
 
  .card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.4;
  }
 
  /* Circle plus icon */
  .card-features li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    background:
      linear-gradient(var(--color-text-muted), var(--color-text-muted)) center/1px 8px no-repeat,
      linear-gradient(var(--color-text-muted), var(--color-text-muted)) center/8px 1px no-repeat;
    opacity: 0.6;
  }
 
  .product-card .btn {
    margin: 40px auto 0 auto;
  }

  .carousel-btn-wrapper {
    justify-content: space-around;
    margin-top: 50px;
  }
 
  /* ─── Navigation arrows ─────────────────────────────────────── */
  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 var(--section-padding-x);
  }
 
  .nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      border-color var(--transition-base),
      background var(--transition-base),
      transform var(--transition-base);
    color: var(--color-navy);
  }
 
  .nav-btn:hover:not(:disabled) {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: #fff;
    transform: scale(1.05);
  }
 
  .nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }
 
  .nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
  }
 
  /* ─── MOBILE ────────────────────────────────────────────────── */
  @media (max-width: 768px) {
 
    /* On mobile: native scroll with snap, no JS transform */
    .carousel-outer {
      padding-left: 0;
      margin-left: -15px;
    }
 
    .carousel-outer::after { width: 40px; }
 
    .carousel-track-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
 
    .carousel-track-wrapper::-webkit-scrollbar { display: none; }
 
    .carousel-track {
      /* Disable JS-driven transform on mobile; use native scroll */
      transform: none !important;
      transition: none !important;
      scroll-snap-type: x mandatory;
      overflow-x: auto;
      scrollbar-width: none;
      padding-right: var(--section-padding-x);
    }
 
    .carousel-track::-webkit-scrollbar { display: none; }
 
    .product-card {
      flex: 0 0 min(300px, 80vw);
      scroll-snap-align: start;
    }
 
    /* Hide prev/next buttons on mobile — native swipe handles it */
    .carousel-nav { display: none; }
  }
 
  @media (max-width: 480px) {
    .product-card { flex: 0 0 85vw; }
  }





 
  /* ─── Section shell ─────────────────────────────────────────── */
  .usecases-section {
    background: var(--color-bg);
    padding: var(--section-padding-y) 0;
  }
 
  .usecases-intro {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 420px;
    margin-bottom: 32px;
  }
 
  /* Scene counter pill */
  .scene-counter {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }
 
  .scene-counter span {
    color: var(--color-text);
    font-weight: 500;
  }
 
  /* ─── Scene list ────────────────────────────────────────────── */
  .scenes-list {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
  }
 
  /* ─── Individual scene ──────────────────────────────────────── */
  .scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 520px;
    border-bottom: 1px solid #e2ddd6;
    overflow: hidden;
 
    /* Entrance animation state */
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
 
  .scene.in-view {
    opacity: 1;
    transform: translateY(0);
  }
 
  /* Alternate: odd scenes = image left / text right
               even scenes = text left / image right */
  .scene:nth-child(even) { direction: rtl; }
  .scene:nth-child(even) > * { direction: ltr; }
 
  /* ── Image pane ─────────────────────────────────────────────── */
  .scene-image {
    position: relative;
    overflow: hidden;
    background: #f0ede8;
  }
 
  /* Lazy-load: real <img> hidden until loaded, replaced by LQIP bg */
  .scene-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease, transform 8s ease;
    transform: scale(1.06);
    will-change: opacity, transform;
  }
 
  .scene-image img.loaded {
    opacity: 1;
    transform: scale(1.0);
  }
 
  /* Subtle vignette on image */
  .scene-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right,  rgba(250,249,247,0.15) 0%, transparent 30%),
      linear-gradient(to bottom, transparent 60%, rgba(20,18,14,0.2) 100%);
    pointer-events: none;
    z-index: 1;
  }
 
  .scene-image::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
    background: var(--mood-color, transparent);
  }
 
  /* ── Text pane ──────────────────────────────────────────────── */
  .scene-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 52px;
    background: var(--color-bg);
    position: relative;
  }
 
  /* Vertical rule between panes */
  .scene-text::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 0;
    width: 1px;
    background: #e2ddd6;
  }
 
  .scene:nth-child(even) .scene-text::before {
    left: auto;
    right: 0;
  }
 
  .scene-number {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #c8601a;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
 
  .scene-number::after {
    content: '';
    flex: 0 0 40px;
    height: 1px;
    background: #c8601a;
    opacity: 0.5;
  }
 
  .scene-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 3.5vw, 52px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1e2d4a;
    margin-bottom: 20px;
  }
 
  .scene-title em {
    font-style: italic;
    font-weight: 300;
    color: #8c6a3f;
  }
 
  .scene-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--color-text-muted);
    max-width: 400px;
    margin-bottom: 36px;
  }
 
  /* ─── MOBILE ────────────────────────────────────────────────── */
  @media (max-width: 900px) {
 
    .usecases-header {
      grid-template-columns: 1fr;
      padding: 56px 48px 48px;
      gap: 32px;
    }
 
    .usecases-header-left {
      border-right: none;
      padding-right: 0;
      border-bottom: 1px solid #e2ddd6;
      padding-bottom: 32px;
    }
 
    .usecases-header-right { padding-left: 0; }
 
    /* Stack: image top, text bottom on mobile */
    .scene {
      grid-template-columns: 1fr;
      grid-template-rows: 56vw auto;
      min-height: unset;
    }
 
    /* Reset alternating direction on mobile */
    .scene:nth-child(even) { direction: ltr; }
 
    /* Image always on top */
    .scene-image { grid-row: 1; }
    .scene-text   { grid-row: 2; }
 
    .scene-text {
      padding: 36px 0px 40px;
    }
 
    .scene-text::before { display: none; }
 
    .scene:nth-child(even) .scene-text::before { display: none; }
 
    /* Remove right-side vignette on mobile */
    .scene-image::after {
      background: linear-gradient(to bottom, transparent 50%, rgba(20,18,14,0.25) 100%);
    }
  }
 
  @media (max-width: 480px) {
    .scene { grid-template-rows: 72vw auto; }
    .usecases-heading { font-size: 36px; }
  }


    .faq-section {
    background: #faf9f7;
    padding: var(--section-padding-y) var(--section-padding-x);
  }
 
  .faq-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
 
  /* ── Header ── */
  .faq-header {
    margin-bottom: 64px;
  }
 
  .faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
 
  .faq-eyebrow__rule {
    display: block;
    width: 32px;
    height: 1px;
    background: #3a5a3a;
    opacity: 0.5;
  }
 
  .faq-eyebrow__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #3a5a3a;
  }
 
  .faq-heading {
    font-size: 56px;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0 0 20px;
    text-transform: uppercase;
  }
 
  .faq-subheading {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: #777;
    max-width: 480px;
    margin: 0;
  }
 
  /* ── Grid ── */
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    margin-bottom: 64px;
  }
 
  /* ── Item ── */
  .faq-item {
    border-top: 1px solid #e0dbd2;
  }
 
  .faq-item:last-child {
    border-bottom: 1px solid #e0dbd2;
  }
 
  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    padding: 22px 0;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1a1a;
    transition: color 0.2s;
  }
 
  .faq-question:hover { color: #3a5a3a; }
 
  /* Plus/minus icon */
  .faq-icon {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid #c8c0b4;
    border-radius: 50%;
    transition: border-color 0.2s, transform 0.3s;
  }
 
  .faq-icon::before,
  .faq-icon::after {
    content: '';
    position: absolute;
    background: #1a1a1a;
    border-radius: 1px;
    transition: opacity 0.2s, transform 0.3s;
  }
 
  .faq-icon::before {
    width: 8px; height: 1px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
 
  .faq-icon::after {
    width: 1px; height: 8px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
 
  .faq-question[aria-expanded="true"] .faq-icon {
    border-color: #3a5a3a;
    transform: rotate(45deg);
  }
 
  .faq-question[aria-expanded="true"] { color: #3a5a3a; }
 
  /* Answer */
  .faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }
 
  .faq-answer.is-open {
    max-height: 300px;
  }
 
  .faq-answer p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.85;
    color: #666;
    padding-bottom: 22px;
    margin: 0;
  }
 
  /* ── CTA ── */
  .faq-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 48px;
    border-top: 1px solid #e0dbd2;
  }
 
  .faq-cta p {
    font-size: 14px;
    font-weight: 300;
    color: #999;
    margin: 0;
  }
 
  .faq-cta__link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
 
  .faq-cta__link:hover {
    color: #3a5a3a;
    border-color: #3a5a3a;
  }
 
  /* ── Mobile ── */
  @media (max-width: 860px) {
    .faq-section { padding: 64px 24px; }
    .faq-heading { font-size: 38px; }
    .faq-grid { grid-template-columns: 1fr; gap: 0; }
    .faq-col:first-child .faq-item:last-child { border-bottom: none; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .faq-answer,
    .faq-icon { transition: none; }
  }





  .fcb-section {
    position: relative;
    padding: 96px 64px;
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
 
  /* ── Background ── */
  .fcb-bg {
    position: absolute;
    inset: 0;
    background-color: #0e1f30;
    background-size: cover;
    background-position: center;
  }
 
  .fcb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(8, 16, 28, 0.75) 0%,
      rgba(8, 16, 28, 0.82) 100%
    );
  }
 
  /* ── Inner ── */
  .fcb-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }
 
  /* ── Header ── */
  .fcb-header {
    text-align: center;
  }
 
  .fcb-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
  }
 
  .fcb-heading {
    font-size: 58px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
  }
 
  .fcb-sub {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.7;
  }

  .fcb-terms {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.fcb-term {
  padding: 6px 20px;
  border: 1px solid #ccc;
  color: white;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  font-size: 12px;
}

.fcb-term.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}
 
  /* ── Card ── */
  .fcb-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: 1fr 1px auto;
    gap: 48px;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
 
  /* ── Field ── */
  .fcb-field { margin-bottom: 14px; }
 
  .fcb-field__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }
 
  .fcb-field__header label {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
  }
 
  .fcb-field__header span {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }
 
  /* Range slider */
  input[type=range] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    display: block;
  }
 
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.15s;
  }
 
  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
 
  input[type=range]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
  }
 
  input[type=range]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
    border-radius: 2px;
  }
 
  .fcb-field__hints {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
  }
 
  .fcb-field__hints span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
  }
 
  /* ── Footnote ── */
  .fcb-footnote {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
    line-height: 1.6;
  }
 
  .fcb-footnote__link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s, text-decoration-color 0.2s;
  }
 
  .fcb-footnote__link:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration-color: rgba(255, 255, 255, 0.5);
  }
 
  /* ── Divider ── */
  .fcb-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
  }
 
  /* ── Result ── */
  .fcb-right { text-align: center; }
 
  .fcb-result__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 8px;
  }
 
  .fcb-result__amount {
    font-family: 'DM Serif Display', serif;
    font-size: 60px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin: 0;
  }
 
  .fcb-result__period {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    margin: 4px 0 24px;
  }
 
  .fcb-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 2px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #fff;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
  }
 
  .fcb-btn:hover {
    background: transparent;
    color: #fff;
  }
 
  .fcb-trust {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.25);
    margin: 10px 0 0;
  }
 
  /* ── Mobile ── */
  @media (max-width: 860px) {
    .fcb-section { padding: 72px 24px; }
    .fcb-heading { font-size: 34px; }
 
    .fcb-card {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 28px 24px;
    }
 
    .fcb-divider {
      width: 100%;
      height: 1px;
      margin: 24px 0;
    }
 
    .fcb-right { text-align: left; }
    .fcb-result__amount { font-size: 48px; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    input[type=range]::-webkit-slider-thumb { transition: none; }
    .fcb-btn { transition: none; }
    .fcb-footnote__link { transition: none; }
  }




/* ============================================================
   POOL PAGES
   ========================================================== */

 /* ── Scroll container: 4x viewport height gives scroll room ── */
.ditl-wrap {
  position: relative;
  height: 750vh;
}
 
/* ── Sticky fullbleed frame ── */
.ditl-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
 
/* ── Background images — stack and crossfade ── */
.ditl-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: opacity;
}
.ditl-img.is-active { opacity: 1; }
 
/* Inground */
.ditl-img-0 { background-image: url('/wp-content/uploads/2026/06/inground_pools_Rudge_day_in_the_life_first.webp'); }
.ditl-img-1 { background-image: url('/wp-content/uploads/2026/06/inground_pools_Rudge_day_in_the_life_first.webp'); }
.ditl-img-2 { background-image: url('/wp-content/uploads/2026/06/Cimek-Banner.webp'); }
.ditl-img-3 { background-image: url('/wp-content/uploads/2026/06/PFP-Proudly-Canadian-Banner.ndd_.webp'); }
.ditl-img-4 { background-image: url('/wp-content/uploads/2026/06/PFP_Dornie2025-Gallery-12.jpg.webp'); }

/* Onground */
.ditl-og-img-0 { background-image: url('/wp-content/uploads/2026/06/PFP_Mur-6.jpg.webp'); }
.ditl-og-img-1 { background-image: url('/wp-content/uploads/2026/06/PFP_Mur-6.jpg.webp'); }
.ditl-og-img-2 { background-image: url('/wp-content/uploads/2026/06/hornidge_4715.jpg.webp'); }
.ditl-og-img-3 { background-image: url('/wp-content/uploads/2026/06/Martins_0867_Web.jpg-1.webp'); }
.ditl-og-img-4 { background-image: url('/wp-content/uploads/2026/06/Witter_3109.jpg.webp'); }

/* Above Ground */
.ditl-ag-img-0 { background-image: url('/wp-content/uploads/2026/06/Synergy-BackyardWeb.webp'); }
.ditl-ag-img-1 { background-image: url('/wp-content/uploads/2026/06/Ag-Gallery-web1.webp'); }
.ditl-ag-img-2 { background-image: url('/wp-content/uploads/2026/06/Ag-Gallery-web3.webp'); }
.ditl-ag-img-3 { background-image: url('/wp-content/uploads/2026/06/AG-Oval-Installation.webp'); }
.ditl-ag-img-4 { background-image: url('/wp-content/uploads/2026/06/Customer-Phantom-Oval-Above-Ground-Pool.webp'); }

/* Fibreglass */
.ditl-fibreglass-img-0 { background-image: url('/wp-content/uploads/2026/06/f-34-1-5371198_20180822_143823_1535209248968_001_1-cancun-deluxe-1.jpg.webp'); }
.ditl-fibreglass-img-1 { background-image: url('/wp-content/uploads/2026/06/f-34-1-5371198_20180822_143823_1535209248968_001_1-cancun-deluxe-1.jpg.webp'); }
.ditl-fibreglass-img-2 { background-image: url('/wp-content/uploads/2026/06/providence-14-ocean-blue-shallow-end-sun-1.jpg.webp'); }
.ditl-fibreglass-img-3 { background-image: url('/wp-content/uploads/2026/06/Delray-with-Royal-Spa-Sapphire-G2-AP2-1.jpg.webp'); }
.ditl-fibreglass-img-4 { background-image: url('/wp-content/uploads/2026/06/0236_Latham_26_04_heavenly_secondary_dusk-SRGB-Full.jpg.webp'); }
 
/* ── Dark overlay for text legibility ── */
.ditl-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.ditl-ag-overlay {
  background:
    linear-gradient(to left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100%);
}
 
/* ── UI layer: 3-column grid (time | line | content) ── */
.ditl-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 7px 1fr;
  align-items: stretch;
}
 
/* Left column: section label + large time */
.ditl-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 2rem 2.5rem 2.5rem;
}
.pools-section-header {
  position: absolute;
  top: 135px;
  left: 64px;
  text-align: left;
  max-width: 400px;
}
.pools-section-header h2 {
  color: white;
  text-align: left;
}
.pools-section-header .eyebrow {
  color: rgb(240, 240, 240);
  text-align: left;
}

.ditl-time-big {
  position: absolute;
  bottom: 30px;
  left: 64px;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(52px, 8vw, 88px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ditl-time-big.is-changing { opacity: 0; transform: translateY(8px); }
.ditl-ampm {
  font-size: 0.38em;
  vertical-align: super;
  color: rgba(255,255,255,0.65);
  margin-left: 3px;
}
 
/* Centre column: vertical line + dots */
.ditl-line-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ditl-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.25);
}
.ditl-dots {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 3rem 0;
  align-items: center;
}
.ditl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: background 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
  flex-shrink: 0;
}
.ditl-dot.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.5);
}
 
/* Right column: moment content */
.ditl-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 3rem 2.5rem 3.5rem;
  max-width: 560px;
}
.ditl-moment-time {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
  transition: opacity 0.35s ease;
}
.ditl-moment-title {
  font-size: clamp(20px, 3.2vw, 36px);
  font-weight: 400;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1rem;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ditl-moment-body {
  font-size: 15px;
  color: rgba(255,255,255,0.95);
  line-height: 1.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ditl-right.is-changing .ditl-moment-time,
.ditl-right.is-changing .ditl-moment-title,
.ditl-right.is-changing .ditl-moment-body {
  opacity: 0;
  transform: translateY(10px);
}
 
/* Progress pips — bottom right */
.ditl-scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ditl-scroll-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s ease;
}
.ditl-scroll-pip.is-active {
  background: rgba(255,255,255,0.85);
}
 
/* ── Mobile: stack layout ── */
@media (max-width: 600px) {
  .ditl-ui {
    grid-template-columns: 120px 1px 1fr;
  }
  .ditl-left {
    padding: 1.5rem 1rem 1.5rem 1.25rem;
  }
  .ditl-right {
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  }
  .ditl-moment-body {
    font-size: 13px;
  }
}




/* Timeline */
.process-timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* Vertical line */
.process-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #ddd;
}

.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 24px;
  padding-bottom: 3rem;
  position: relative;
}
.process-step:last-child {
  padding-bottom: 0;
}

/* Number circle */
.process-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  position: relative;
  z-index: 1;
}
.process-num-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8f7f4;
  border: 1px solid #3B6D11;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #3B6D11;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Step content */
.process-content {
  padding-top: 6px;
  padding-bottom: 0;
}
.process-step-body {
  font-size: 14px;
  color: #666;
  line-height: 1.75;
  margin-bottom: 0.5rem;
}
.process-step-time {
  font-size: 11px;
  color: #aaa;
  letter-spacing: 0.05em;
}

.process-close {
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.process-coda {
  font-size: 14px;
  color: #777;
  line-height: 1.75;
  font-style: italic;
  max-width: 400px;
}

@media (max-width: 600px) {
  .process { padding: 3.5rem 1.25rem; }
  .process-timeline::before { left: 17px; }
  .process-step { grid-template-columns: 36px 1fr; gap: 0 16px; }
  .process-num-circle { width: 28px; height: 28px; font-size: 11px; }
  .process-close { grid-template-columns: 1fr; }
}




.gallery {
  background: #f8f7f4;
  padding: 5rem 2.5rem;
}

/* Grid */
.gallery-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

/* Each cell */
.gallery-item {
  overflow: hidden;
  border-radius: 3px;
  background: #e8e6e1;
  position: relative;
  grid-column: span 4;
  aspect-ratio: 1/1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img {
  transform: scale(1.03);
}

/* Lightbox overlay */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
}
.gallery-item:hover::after {
  background: rgba(0,0,0,0.08);
}

/* CTA row */
.gallery-cta {
  max-width: 1100px;
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid #e8e6e1;
}
.gallery-cta-text {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  color: #888;
  font-style: italic;
}
.gallery-cta-link {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3B6D11;
  text-decoration: none;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(59,109,17,0.3);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.gallery-cta-link:hover {
  border-color: #3B6D11;
}

/* Native lightbox dialog */
.gallery-dialog {
  border: none;
  background: rgba(0,0,0,0.92);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-dialog::backdrop {
  background: rgba(0,0,0,0.92);
}
.gallery-dialog img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
}
.gallery-dialog-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s ease;
}
.gallery-dialog-close:hover {
  background: rgba(255,255,255,0.1);
}

/* Mobile */
@media (max-width: 680px) {
  .gallery { padding: 3.5rem 1.25rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery-item:nth-child(1) { grid-column: span 2; aspect-ratio: 4/3; grid-row: span 1; }
  .gallery-item:nth-child(2) { grid-column: span 1; aspect-ratio: 1/1; }
  .gallery-item:nth-child(3) { grid-column: span 1; aspect-ratio: 1/1; }
  .gallery-item:nth-child(4) { grid-column: span 1; aspect-ratio: 1/1; }
  .gallery-item:nth-child(5) { grid-column: span 1; aspect-ratio: 1/1; }
  .gallery-item:nth-child(6) { grid-column: span 2; aspect-ratio: 16/9; }
  .gallery-cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
}





  .accessories__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: stretch;
  }
  .fibreglass-accessories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-accessories__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .accessories__card {
    background: #fff;
  }
  .service-item-accessories__grid .accessories__card {
    position: relative;
  }
  .service-item-accessories__grid .img-card__link {
    position: absolute;
    bottom: 20px;
    left: 2rem;
  }

  .accessories__image {
    position: relative;
    overflow: hidden;
  }
  .accessories__image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
  }
  .accessories__body {
    padding: 1.75rem 2rem 2rem;
  }
  .service-item-accessories__grid .accessories__body {
    padding: 2.7rem 2rem 3rem;
  }
  @media (max-width: 960px) {
    .accessories__grid { grid-template-columns: 1fr; }
  }



.brands-section {
  padding: 2.5rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.brands-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 2rem;
}

.brands-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.brand-cell {
  flex: 1;
  min-width: 120px;
  max-width: 250px;
  padding: 0 2rem;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.brand-cell:last-child {
  border-right: none;
}

.landscape-brand-logo {
  height: 100px;
  width: auto;
  object-fit: contain;
}

.landscape-brand-logo__small {
  height: 55px;
}

/* Responsive: stack to 2-3 columns on smaller screens */
@media (max-width: 640px) {
  .brands-row {
    gap: 1.5rem;
  }
  .brand-cell {
    border-right: none;
    min-width: 140px;
    max-width: 160px;
    padding: 0.5rem 1rem;
    height: 60px;
  }
}




/* ============================================================
   SERVICE PAGES
   ========================================================== */

.po-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    border-bottom: 1px solid #e5e7eb;
}

/* ─── Image side ─────────────────────────────────────────────────── */
.po-hero__image {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    background: #c8d8e4;
}

.po-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.po-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 79, 138, .08);
}

/* ─── Content side ───────────────────────────────────────────────── */
.po-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    background: #fff;
}

.po-hero__eyebrow {
    margin-bottom: 18px;
}

.po-hero__heading {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #111827;
    line-height: 1.05;
    margin: 0 0 18px;
}

.po-hero__body {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 400px;
}

.po-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a4f8a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    padding: 13px 24px;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.po-hero__cta:hover {
    background: #164278;
    color: #fff;
    text-decoration: none;
}

.po-hero__cta:active {
    transform: scale(.98);
}

.po-hero__cta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform .15s;
}

.po-hero__cta:hover svg {
    transform: translateX(3px);
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .po-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .po-hero__image {
        min-height: 280px;
    }

    .po-hero__content {
        padding: 48px 36px;
    }

    .po-hero__heading {
        font-size: 38px;
    }
}

@media (max-width: 600px) {
    .po-hero__content {
        padding: 40px 24px;
    }

    .po-hero__heading {
        font-size: 32px;
    }

    .po-hero__body {
        font-size: 15px;
    }
}   

.po-section {
    padding: 80px 0;
    border-top: 1px solid #e5e7eb;
}

.po-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.po-section__eyebrow {
    margin-bottom: 12px;
}

.po-section__eyebrow::before,
.po-section__eyebrow::after {
    content: '';
    display: block;
    height: 1px;
    width: 32px;
    background: #d1d5db;
}

.po-section__heading {
    font-size: 32px;
    letter-spacing: -.02em;
    color: #111827;
    margin: 0 0 10px;
}

.po-section__sub {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 0 40px;
    max-width: 560px;
}

.po-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.po-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f3f4f6;
}

.po-checklist__icon {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.po-checklist__icon svg {
    width: 17px;
    height: 17px;
}

.po-checklist__text {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
    padding-top: 4px;
}

.po-prep {
    background: #f0f4f9;
    padding: 32px 36px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.po-prep__icon-wrap {
    width: 52px;
    height: 52px;
    background: #1a4f8a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.po-prep__icon-wrap svg {
    width: 24px;
    height: 24px;
}

.po-prep__title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

.po-prep__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.po-prep__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}

.po-prep__bullet {
    width: 6px;
    height: 6px;
    background: #1a4f8a;
    flex-shrink: 0;
    margin-top: 8px;
}

.po-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.po-info-card {
    border: 1.5px solid #e5e7eb;
    padding: 28px 28px 32px;
    background: #fff;
}

.po-info-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.po-info-card__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.po-info-card__icon svg {
    width: 18px;
    height: 18px;
}

.po-info-card__icon--exclusion {
    background: #fef2f2;
    color: #dc2626;
}

.po-info-card__icon--info {
    background: #eff6ff;
    color: #1d4ed8;
}

.po-info-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.po-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.po-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.po-info-list__marker {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-info-list__marker--x svg {
    width: 14px;
    height: 14px;
    color: #d1d5db;
}

.po-info-list__marker--dot {
    padding-top: 8px;
}

.po-info-list__marker--dot::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    background: #9ca3af;
}

.po-policy {
    margin-top: 48px;
    padding: 20px 24px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.po-policy__icon {
    width: 36px;
    height: 36px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #92400e;
}

.po-policy__icon svg {
    width: 18px;
    height: 18px;
}

.po-policy__text {
    font-size: 14px;
    color: #78350f;
    line-height: 1.7;
}

.po-policy__text strong {
    font-weight: 700;
    color: #78350f;
}

@media (max-width: 900px) {
    .po-info-grid {
        grid-template-columns: 1fr;
    }

    .po-prep {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .po-section { padding: 60px 0; }
    .po-section__container { padding: 0 20px; }
    .po-section__heading { font-size: 26px; }
    .po-checklist { grid-template-columns: 1fr; }
    .po-info-card { padding: 20px; }
}




	.liner-tabs {
	padding: 20px 0;
	width:100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	}

	/* Circular tabs */
	.liner-tabs__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 40px;
	width: 45%;
	}

	.liner-tab {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid transparent;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	}

  .cover-tab {
    border-radius: 0;
  }

	.liner-tab img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	/* Active state */
	.liner-tab.active {
	border-color: #0aa39f;
	transform: scale(1.1);
	}

	/* Hover */
	.liner-tab:hover {
	transform: scale(1.05);
	}

	/* Preview image */
	.liner-tabs__content {
	width: 50%;
	}

	.liner-panel {
	display: none;
	}

	.liner-panel.active {
	display: block;
	}

	.liner-panel img {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	/* Mobile */
	@media (max-width: 768px) {
	.liner-tab {
		width: 65px;
		height: 65px;
	}
	.liner-tabs__nav, .liner-tabs__content { width: 100%; }
	}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
  
/* ─────────────────────────────────────────────────────────────
   ABOUT US PAGE
───────────────────────────────────────────────────────────── */
 
/* stat bar — about-page specific, but uses token-driven spacing */
.about-stats{display:flex;gap:clamp(24px,4vw,56px);margin-top:var(--space-8);
  padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,0.15)}
.about-stat__num{font-family:var(--font-display);font-size:clamp(32px,5vw,58px);
  font-weight:700;color:#fff;line-height:1}
.about-stat__num span{color:var(--color-accent-gold)}
.about-stat__label{font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-top:4px}
 
/* ─────────────────────────────────────────────────────────────
   INTRO SPLIT  — dark panel + image
   (spa-style: re-uses .spa-grid concept with tokens)
───────────────────────────────────────────────────────────── */
.about-split{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.about-split__text{ padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4.5rem); display:flex;flex-direction:column;justify-content:center}
.about-split__visual{position:relative;overflow:hidden;background:var(--color-accent-green)}
.about-split__visual-ph{width:100%;height:100%;min-height:400px;
  background: url("/wp-content/uploads/2026/06/EP-RecSport-2023-R220-AlpineWhite-Gray-Gallery-7.webp"); background-position: center; background-size: cover;
  display:flex;align-items:center;justify-content:center}
 
/* ─────────────────────────────────────────────────────────────
   TIMELINE  — new component, uses tokens throughout
───────────────────────────────────────────────────────────── */
.timeline-section{padding:var(--section-padding-y) var(--section-padding-x);
  background:var(--color-bg)}
.timeline-header{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);
  align-items:end;margin-bottom:clamp(3rem,6vw,5rem)}
.timeline-header p{font-size:15px;font-weight:300;line-height:1.8;
  color:var(--color-text-muted);max-width:440px}
.timeline{position:relative;display:flex;flex-direction:column}
.timeline::before{content:'';position:absolute;left:90px;top:0;bottom:0;width:1px;
  background:var(--color-border)}
.tl-row{display:grid;grid-template-columns:180px 1fr;gap:var(--space-6);
  padding:var(--space-6) 0;border-bottom:1px solid var(--color-border);position:relative}
.tl-row:first-child{padding-top:0}
.tl-row:last-child{border-bottom:none}
.tl-year{font-family:var(--font-display);font-size:clamp(40px,5vw,60px);font-weight:300;
  color:var(--color-border);line-height:1;text-align:right;padding-right:var(--space-5);
  position:relative}
.tl-year::after{content:'';position:absolute;right:-8px;top:14px;width:16px;height:16px;
  border-radius:50%;background:var(--color-accent-green);border:3px solid var(--color-bg);z-index:1}
.tl-body{padding-top:4px}
.tl-body h3{font-size:18px;font-weight:700;letter-spacing:0.04em;
  color:var(--color-text);margin-bottom:var(--space-1)}
.tl-body p{font-size:var(--text-base);line-height:1.8;color:var(--color-text-muted);
  max-width:540px}
 
/* ─────────────────────────────────────────────────────────────
   TEAM MOSAIC  — new component
───────────────────────────────────────────────────────────── */
.team-section{padding:var(--section-padding-y) var(--section-padding-x);
  background:var(--color-surface)}
.team-inner{display:grid;grid-template-columns:5fr 4fr;gap:clamp(3rem,5vw,5rem);
  align-items:center}
.team-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 200px;gap:12px}
.mosaic-block{overflow:hidden}
.mosaic-block--tall{grid-row:1/3}
.mosaic-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.mosaic-ph span{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:0.15em;
  text-transform:uppercase;opacity:0.35;color:#fff;text-align:center;padding:8px}
.ph-green{background:linear-gradient(135deg,#0d3024,#1a6b4a)}
.ph-bark{background:linear-gradient(135deg,#2b2018,#111111)}
.ph-warm{background:linear-gradient(135deg,#3d2c1e,#7a5c4a)}
.team-copy h2{margin-bottom:var(--space-3)}
.team-copy p{font-size:15px;font-weight:300;line-height:1.85;color:var(--color-text-muted)}
.team-copy p+p{margin-top:var(--space-3)}
/* mini stats — re-uses .about-stat pattern */
.team-stats{display:flex;gap:var(--space-6);margin-top:var(--space-6);
  padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.team-stat__num{font-family:var(--font-display);font-size:clamp(28px,3.5vw,40px);
  font-weight:700;line-height:1;color:var(--color-accent-green)}
.team-stat__label{font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--color-text-muted);margin-top:4px}
 
/* ─────────────────────────────────────────────────────────────
   COMMUNITY BAND  (mirrors .quiz-cta-section approach)
───────────────────────────────────────────────────────────── */
.community-section{position:relative;overflow:hidden;
  background:var(--color-primary);
  padding:var(--section-padding-y) var(--section-padding-x);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.community-section p{font-size:15px;font-weight:300;line-height:1.85;
  color:rgba(255,255,255,0.75);margin-bottom:var(--space-5)}
 
/* ─────────────────────────────────────────────────────────────
   LOCATIONS GRID
───────────────────────────────────────────────────────────── */
.locations-section{padding:var(--section-padding-y) var(--section-padding-x);
  background:var(--color-bg)}
.locations-header{margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.locations-header p{font-size:15px;color:var(--color-text-muted);line-height:1.7;
  max-width:480px;margin-top:var(--space-3)}
.locations-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.loc-item{background:var(--color-surface);padding:24px 20px;
  border-left:3px solid transparent;transition:border-color var(--transition-fast),background var(--transition-fast)}
.loc-name{font-family:var(--font-display);font-size:15px;font-weight:400; text-transform:uppercase;color:var(--color-text);margin-bottom:3px}
.loc-region{font-size:var(--text-xs);color:var(--color-accent-green);}
 

 
/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .why-us__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .about-split,.community-section{grid-template-columns:1fr}
  .about-split__visual-ph{min-height:280px}
  .timeline-header{grid-template-columns:1fr;gap:var(--space-4)}
  .timeline::before{left:60px}
  .tl-row{grid-template-columns:120px 1fr;gap:var(--space-4)}
  .team-inner{grid-template-columns:1fr;gap:var(--space-5)}
  .team-mosaic{grid-template-rows:200px 160px}
  .locations-grid{grid-template-columns:repeat(3,1fr)}
  .footer-cta-bar{flex-direction:column;align-items:flex-start}
  .why-us__top{grid-template-columns:1fr;gap:var(--space-4)}
  .btn-wrapper{flex-direction:column;align-items:stretch}
  .btn-wrapper .btn{margin:8px 0}
  .section-header{width:95%}
}
@media(max-width:600px){
  .about-stats{gap:var(--space-5);flex-wrap:wrap}
  .why-us__grid{grid-template-columns:1fr}
  .locations-grid{grid-template-columns:repeat(2,1fr)}
  .tl-row{grid-template-columns:1fr;gap:var(--space-2)}
  .timeline::before{display:none}
  .tl-year{text-align:left;font-size:28px;padding-right:0}
  .tl-year::after{display:none}
}





/* ─────────────────────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────────────────────── */
.testimonials-section { padding-block: var(--section-padding-y); }

/* ── Tab count badge ── */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 6px;
    margin-left: 5px;
    min-width: 20px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.tab.is-active .tab-count {
    background: var(--color-accent-green);
    color: #fff;
}

/* ── Meta / count label ── */
.testimonials-meta {
    margin-bottom: var(--space-5);
}
.testimonials-meta__count {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* ── Card grid ── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Individual card — re-uses .img-card border/padding DNA ── */
.testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}
.testimonial-card:hover {
    border-color: var(--color-accent-green);
}

/* ── Stars ── */
.testimonial-card__stars { display: flex; gap: 3px; }

/* ── Quote ── */
.testimonial-card__quote {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.75;
    color: var(--color-text);
    margin: 0;
    flex: 1;
}
.testimonial-card__quote::before { content: '\201C'; }
.testimonial-card__quote::after  { content: '\201D'; }

/* ── Footer ── */
.testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    flex-wrap: wrap;
}
.testimonial-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-green);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.testimonial-card__name {
    display: block;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.testimonial-card__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    margin-top: 1px;
}
.testimonial-card__product {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-green);
    font-weight: 400;
}
.testimonial-card__product-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-green);
    flex-shrink: 0;
}

/* ── Hidden / filtered state ── */
.testimonial-card[hidden] { display: none !important; }

/* ── Empty state ── */
.testimonials-empty,
.testimonials-empty-msg {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    padding: var(--space-8) 0;
    text-align: center;
    grid-column: 1 / -1;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .testimonials-stats__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonials-stats__inner { grid-template-columns: repeat(2, 1fr); }
    .tab { margin-inline: 0.7rem; }
}




/* ─────────────────────────────────────────────────────────────
   PROMOTIONS
───────────────────────────────────────────────────────────── */



/* ═══════════════════════════════════════════════════════════
   PROMO GRID CARDS  (extends .img-card / .spa-card patterns)
═══════════════════════════════════════════════════════════ */
.promos-section{padding:var(--section-padding-y) var(--section-padding-x);}
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
 
.promo-card{display:flex;flex-direction:column;background:var(--color-surface)}
 
.promo-card__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.promo-card__media-ph{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:var(--text-xs);
  letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.3)}
 
.promo-card__body{padding:1.4rem 1.6rem 1.8rem;border-top:1px solid var(--color-border);
  flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.promo-card__title{font-family:var(--font-display);font-size:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.02em;margin-bottom:4px}
.promo-card__desc{font-size:var(--text-base);font-weight:300;
  color:var(--color-text-muted);line-height:1.75;flex:1;margin-bottom:var(--space-3)}

  /* ═══════════════════════════════════════════════════════════
   PROMO GRID — ENHANCEMENTS
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PROMOTIONS PAGE & IN THE COMMUNITY PAGE — HERO BACKGROUND
═══════════════════════════════════════════════════════════ */
.hero__slide-promotions:nth-child(1) .hero__slide-bg {
  background-image: url('/wp-content/uploads/2026/06/permacon_process.webp');
}

.hero__slide-community:nth-child(1) .hero__slide-bg {
  background-image: url('/wp-content/uploads/2026/07/community_hero.webp');
}

.promo-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.promo-feature-grid--sparse {
  grid-template-columns: 1fr;
  max-width: 700px;
  margin-inline: auto;
}

/* Shorter min-height than the full single-column .spa-hero,
   since these now sit two-per-row instead of full width */
.spa-hero--card {
  min-height: 360px;
}

/* Fallback background if a promo has no image set yet */
.spa-hero--no-image {
  background: var(--color-bg-dark);
}

@media (max-width: 900px) {
  .promo-feature-grid {
    grid-template-columns: 1fr;
  }
}




/* ═══════════════════════════════════════════════════════════
   CABANA CLUB CTA  (email signup band)
═══════════════════════════════════════════════════════════ */
.cabana-band{ padding:clamp(3rem,6vw,5rem) var(--section-padding-x);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center; background:var(--color-bg)}
.cabana-form{display:flex;flex-direction:column;gap:var(--space-2)}
.cabana-form__row{display:flex;gap:0}
.cabana-form__input{flex:1;padding:16px 20px;font-family:var(--font-body);
  font-size:var(--text-md);border:2px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.1);outline:none;
  transition:border-color var(--transition-fast)}
.cabana-form__input::placeholder{color:rgba(0,0,0,0.45)}
.cabana-form__input:focus{border-color:rgba(255,255,255,0.8)}
.cabana-form__note{font-size:var(--text-xs);}
.cabana-perks{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-4)}
.cabana-perk{display:flex;align-items:center;gap:10px;
  font-size:var(--text-base);}
.cabana-perk::before{content:'';flex-shrink:0;width:5px;height:5px;
  border-radius:50%;background:var(--color-accent-gold)}

@media(max-width:640px){
  .cabana-form__row{flex-direction:column}
}




/* ═══════════════════════════════════════════════════════════
   BRAND LANDING PAGES
═══════════════════════════════════════════════════════════ */

/* Berlin Gardens */
.bg-hero__bg{ background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2023/09/Holland-with-CT-2-1200x800.jpg'); }
.bg-split__visual-ph{
  background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2023/09/Holland-with-CT-2-1024x683.jpg');
  background-position:center; background-size:cover;
}
.bg-spa-hero__img{ background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2022/07/27162733/Berlin-Gardens-Harbor-3-Banner-2000x1000-1.jpg'); background-size:cover; background-position:center; }
.bg-spa-card__img{ background-size:cover; background-position:center; }
.bg-card-1{ background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2022/07/27163259/Berlin-Gardens-Casual-Back-2-1200x1000-1.jpg'); }
.bg-card-2{ background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2023/03/DSC00450-2-1024x902.jpg'); }
.bg-card-3{ background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2025/11/Agora-Cabinets-Banner.jpg'); }
.bg-community{ background-color:var(--color-accent-green); }
.fill-img{ width:100%; height:100%; object-fit:cover; display:block; }

.berlin-gardens-split__visual-ph {
  background-image:url('https://cdn.berlingardensllc.com/wp-content/uploads/2023/09/2Z5A7609-1-scaled.jpg');
}

/* CR. Plastics */
.crp-hero__bg{ background-image:url('/wp-content/uploads/2026/07/crplastics_hero.webp'); }

.cr-plastics-split__visual-ph { background-image:url('/wp-content/uploads/2026/07/CRP_HeadOffice_intro.webp'); }

.crp-cta__bg { background-image:url('/wp-content/uploads/2026/07/crplastics_cta_image.webp'); }

/* Treasure Garden */
.treasure-garden-hero__bg{ background-image:url('https://treasuregarden.com/img/Menu_Cantilever.jpg'); }
.treasure-garden-split__visual-ph{ background-image:url('https://treasuregarden.com/wp-content/uploads/fabric.jpg'); background-position:center; background-size:cover; }
.treasure-garden-spa-hero__img{ background-image:url('https://treasuregarden.com/img/Menu_Cantilever.jpg'); background-size:cover; background-position:center 30%; }
.treasure-garden-community{ background:var(--color-primary-dark); }



/* Hot Spring */
.hotspring-hero__bg { background-image:url('/wp-content/uploads/2026/08/HotSpring_2024_Highlife_Aria_AlpineWhite_Java_Lifestyle_Summer.webp'); }
.hotspring-heritage__bg { background-image:url('/wp-content/uploads/2026/08/HSS-Highlife-Aria-AlpineWhite-Charcoal-SpaLifestyle-0389-2024CP.webp'); }
.hotspring-quiz__bg { background-image:url('/wp-content/uploads/2026/08/hotspring_hot_tub_lifestyle.webp'); }

/* Caldera */
.caldera-hero__bg { background-image:url('/wp-content/uploads/2026/08/Caldera_2022_Utopia_Geneva_DSC03070.webp'); }
.caldera-heritage__bg { background-image:url('/wp-content/uploads/2026/08/Caldera_2022_Utopia_Geneva_DSC02572.webp'); }
.caldera-quiz__bg { background-image:url('/wp-content/uploads/2026/06/Caldera-Image_CRAFTSMAN.webp'); }

.icon-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}
 
.icon-tooltip__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-text-faint);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--transition-fast, 0.2s ease);
}
 
.icon-tooltip:hover .icon-tooltip__indicator,
.icon-tooltip:focus-visible .icon-tooltip__indicator {
  background: var(--color-primary);
}
 
.icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 210px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  padding: 9px 13px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 10;
  white-space: normal;
  text-align: left;
}
 
.icon-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 10;
}
 
.icon-tooltip:hover::after,
.icon-tooltip:hover::before,
.icon-tooltip:focus-visible::after,
.icon-tooltip:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
 
/* Flip below when the icon sits near the top of its container
   (e.g. the first feature row in a card) */
.icon-tooltip.tooltip--below::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.icon-tooltip.tooltip--below::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #1a1a1a;
  transform: translateX(-50%) translateY(-4px);
}
.icon-tooltip.tooltip--below:hover::after,
.icon-tooltip.tooltip--below:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
 
@media (prefers-reduced-motion: reduce) {
  .icon-tooltip::after,
  .icon-tooltip::before { transition: none; }
}
 


/* ============================================================
   LOCATIONS PAGES
   Styles for archive-location.php and single-location.php.
   Append to the end of main.css.
   ============================================================ */

/* ── Shared: breadcrumb (single page) ───────────────────────── */
.location-breadcrumb{
  padding:16px var(--section-padding-x);
  font-size:var(--text-xs); letter-spacing:0.04em; text-transform:uppercase;
  color:var(--color-text-faint); border-bottom:1px solid var(--color-border);
}
.location-breadcrumb a{ color:var(--color-text-muted); }
.location-breadcrumb a:hover{ color:var(--color-primary); }




/* ============================================================
   SINGLE LOCATION — /locations/{slug}/
   ============================================================ */

/* ── Hero badges + quick meta (extends .po-hero) ── */
.location-hero__badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.location-status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; text-transform:uppercase; font-weight:600;
  padding:6px 14px; background:#eafaf0; color:#1e7a3d;
}
.location-status-badge__dot{ width:6px; height:6px; border-radius:50%; background:#1e7a3d; }
.location-status-badge.is-closed{ background:#fdecec; color:#b3261e; }
.location-status-badge.is-closed .location-status-badge__dot{ background:#b3261e; }

.location-hero__meta{ display:flex; flex-direction:column; gap:6px; margin-bottom:28px; }
.location-hero__meta-row{ display:flex; align-items:center; gap:10px; font-size:15px; color:#4b5563; }
.location-hero__meta-row svg{ width:16px; height:16px; color:#1a4f8a; flex-shrink:0; }
.location-hero__meta-row a{ color:#111827; font-weight:600; }

/* ── Details + sidebar layout ── */
.location-main{
  display:grid; grid-template-columns:2fr 1fr; gap:56px;
  max-width:1300px; margin:0 auto; padding:var(--section-padding-y) var(--section-padding-x);
  align-items:start;
}
.location-main__body p{ font-size:15px; line-height:1.85; color:var(--color-text-muted); margin-bottom:1.3rem; }
.location-main__body h2{ font-size:28px; margin-bottom:1rem; }

.location-serving{
  margin-top:2rem; padding:1.6rem 1.8rem; background:var(--color-bg);
  border-left:3px solid var(--color-accent-green);
}
.location-serving h4{ font-size:14px; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; color:var(--color-text); }
.location-serving p{ margin:0; font-size:14px; color:var(--color-text-muted); }

/* ── Sidebar card ── */
.location-sidebar{ position:sticky; top:24px; display:flex; flex-direction:column; gap:20px; }
.location-sidebar__card{ border:1px solid var(--color-border); background:var(--color-surface); padding:1.8rem; }
.location-sidebar__card h4{ font-weight: 400; text-transform:uppercase; color:var(--color-primary); margin-bottom:1.1rem; }

/* Hours table */
.location-hours-table{ width:100%; border-collapse:collapse; font-size:14px; }
.location-hours-table tr{ border-bottom:1px solid var(--color-border); }
.location-hours-table tr:last-child{ border-bottom:none; }
.location-hours-table td{ padding:9px 10px; color:var(--color-text-muted); text-align: left; }
.location-hours-table td:first-child{ color:var(--color-text); font-weight:400; padding-left:0; }
.location-hours-table tr.is-today td{ color:var(--color-text); font-weight:700; }
.location-hours-table tr.is-today td:first-child{ color:black; }
.location-hours-hidden-note{ font-size:14px; color:var(--color-text-muted); font-style:italic; margin:0; }

/* Contact list */
.location-contact-list{ display:flex; flex-direction:column; gap:12px; }
.location-contact-item{ display:flex; flex-direction:column; gap:3px; font-size:14px; }
.location-contact-item span{ font-size:11px; text-transform:uppercase; color:var(--color-text-faint); }
.location-contact-item a{ margin: 5px 0; color: rgb(15, 15, 15); }
.location-contact-item__links{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.location-contact-item__links a{ display:inline-flex; align-items:center; gap:6px; }
.location-contact-icon{ width:13px; height:13px; flex-shrink:0; opacity:0.75; }

.location-sidebar .btn{ width:100%; justify-content:center; }

/* ── Map ── */
.location-map-section{ background:var(--color-bg); }
.location-map{ width:100%; aspect-ratio:16/6; min-height:360px; border:0; display:block; }
.po-hero__map{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ── Highlights section wrapper (grid itself is .po-checklist, already styled) ── */
.location-highlights{ padding:var(--section-padding-y) var(--section-padding-x); background:var(--color-surface); }

@media (max-width:900px){
  .location-main{ grid-template-columns:1fr; }
  .location-main__body { order: 2; }
  .location-sidebar{ position:static; order: 1; }
  .location-map{ aspect-ratio:4/3; min-height:280px; }
}