@import url("/wp-content/uploads/cosmo/fonts/fonts.css");
/* ===========================================================================
   Cosmo Pools — Redesign Design System (single source of truth)
   Loaded site-wide by cosmo-ds-loader.php at priority 9999 (wins over Bricks/ACSS).
   Namespaced .bs-* / --cosmo-* to avoid AutomaticCSS collisions.

   v2 — Phase A correction (28 Jul 2026). Token values are now the EXACT values
   extracted from the Claude Design export (Cosmo Pools 2026) and the approved
   mockup cosmo-home-mockup-v2.html (v2.4). Corrected responsive breakpoints per
   plan §2.4 (audited clean 320→1600px). Legacy token names are kept as aliases
   so every existing .bs-* page inherits the corrections automatically.
   Rollback: uploads/cosmo/backups/design-system-2026-07-28-preA.css
   =========================================================================== */

:root {
  /* brand navies */
  --cosmo-navy-hero:   #0A2A4E;  /* hero gradient base */
  --cosmo-navy:        #0C2B4E;  /* headings, cards, topbar, seal */
  --cosmo-navy-deep:   #0A2240;  /* dark sections (awards, footer, why-cards) */
  --cosmo-blue-mid:    #0E4E78;  /* gradient partner */
  /* aqua system */
  --cosmo-aqua:        #13C0D2;  /* accent, stars, borders */
  --cosmo-aqua-deep:   #0AA0B4;  /* gradient end, eyebrows, links */
  --cosmo-aqua-bright: #3FD6E6;  /* hero highlight text */
  --cosmo-aqua-pale:   #7FE3EE;  /* eyebrows/links on dark */
  --cosmo-aqua-tint:   #E7F8FB;  /* icon chips */
  --cosmo-aqua-num:    #E2F4F8;  /* step numerals */
  --cosmo-cta-ink:     #053238;  /* text on aqua buttons */
  /* creams */
  --cosmo-bg:          #FBF8F1;  /* page background */
  --cosmo-bg-alt:      #F3EEE2;  /* alternate sections */
  --cosmo-line:        #F1ECE0;  /* hairlines */
  --cosmo-card-border: #EFE8D9;
  /* text */
  --cosmo-ink:         #2A3640;
  --cosmo-muted:       #7A8590;  /* on white */
  --cosmo-muted-2:     #8A929B;  /* labels */
  --cosmo-muted-dark:  #9FB3C8;  /* body on navy */
  --cosmo-muted-dark-2:#B9C9DA;  /* footer text */
  /* special */
  --cosmo-gold:        #C9A24B;  /* NSPI award gold */
  --cosmo-wa:          #25D366;  /* WhatsApp */
  --cosmo-white:       #ffffff;

  /* --- WCAG AA text tokens (added 31 Jul 2026, audit A11Y-01) ------------
     The aqua and muted greys above are correct as brand/decorative colours
     but fail 4.5:1 as text on the cream and white surfaces. These are the
     versions to use for TEXT. Contrast measured against #FFFFFF / #FBF8F1 /
     #F3EEE2, the three light surfaces in this system:
       --cosmo-aqua-text    5.80 / 5.47 / 5.01
       --cosmo-muted-text   5.25 / 4.95 / 4.53
     Do not use these for gradients — they are too dark for the aqua ramp. */
  --cosmo-aqua-text:   #00707E;  /* prices, links, eyebrows on light */
  --cosmo-muted-text:  #646D78;  /* labels, captions, dimensions on light */


  /* legacy aliases (existing pages reference these) */
  --cosmo-blue:        var(--cosmo-navy);
  --cosmo-blue-700:    var(--cosmo-blue-mid);
  --cosmo-aqua-600:    var(--cosmo-aqua-deep);
  --cosmo-sand:        var(--cosmo-bg);
  --cosmo-cream:       var(--cosmo-bg-alt);

  --cosmo-maxw:        1200px;
  --cosmo-maxw-wide:   1320px;   /* header / footer */
  --cosmo-gutter:      32px;
  --cosmo-radius:      18px;
  --cosmo-radius-lg:   22px;     /* large cards / trust strip */
  --cosmo-radius-sm:   12px;
  --cosmo-radius-pill: 999px;
  --cosmo-shadow:      0 24px 60px rgba(10,40,75,.12);   /* elevated */
  --cosmo-shadow-sm:   0 8px 24px rgba(10,40,75,.06);    /* card */

  --cosmo-font-head:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cosmo-font-body:  "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- base (design correction benefits every page) ---- */
body { background: var(--cosmo-bg); font-family: var(--cosmo-font-body);
  color: var(--cosmo-ink); overflow-x: hidden; }
img, video { max-width: 100%; }

@keyframes cpFadeDown { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
@keyframes cpPulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 50%{box-shadow:0 0 0 12px rgba(37,211,102,0);} }

/* ---- layout helpers ---- */
.bs-container { max-width: var(--cosmo-maxw); margin-inline: auto; padding-inline: var(--cosmo-gutter); }
.bs-container--wide { max-width: var(--cosmo-maxw-wide); }
.bs-section   { padding-block: 100px; }
.bs-section--sand  { background: var(--cosmo-bg); }
.bs-section--cream { background: var(--cosmo-bg-alt); }
.bs-section--blue  { background: var(--cosmo-navy); color:#fff; }
.bs-section--navydeep { background: var(--cosmo-navy-deep); color:#fff; }

/* ---- buttons (high specificity so they beat Bricks theme styles) ---- */
.bs-btn,
.brxe-button.bs-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--cosmo-font-head); font-weight:800; font-size:16px; line-height:1;
  padding:16px 28px; border-radius: var(--cosmo-radius-pill); border:0; cursor:pointer;
  text-decoration:none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bs-btn-primary,
.brxe-button.bs-btn.bs-btn-primary {
  background: linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep)) !important;
  color: var(--cosmo-cta-ink) !important;
  box-shadow: 0 12px 30px rgba(17,183,201,.5);
}
.bs-btn-primary:hover,
.brxe-button.bs-btn.bs-btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 16px 38px rgba(17,183,201,.6);
}
.bs-btn-navy,
.brxe-button.bs-btn.bs-btn-navy {
  background: linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep)) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(12,43,78,.35) !important;
}
.bs-btn-navy:hover,
.brxe-button.bs-btn.bs-btn-navy:hover {
  background: linear-gradient(160deg, #123A66, var(--cosmo-navy)) !important;
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12,43,78,.45) !important;
}
.bs-btn-secondary,
.brxe-button.bs-btn.bs-btn-secondary {
  background: transparent !important; color: var(--cosmo-navy) !important;
  box-shadow: inset 0 0 0 1.5px rgba(12,43,78,.35);
}
.bs-btn-secondary:hover { transform: translateY(-2px); }
.bs-btn-secondary--light,
.brxe-button.bs-btn.bs-btn-secondary--light {
  color:#fff !important; background: rgba(255,255,255,.1) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter: blur(4px);
}
.bs-btn-wa,
.brxe-button.bs-btn.bs-btn-wa {
  background: var(--cosmo-wa) !important; color:#fff !important;
  box-shadow: 0 14px 34px rgba(37,211,102,.4);
}
.bs-btn-wa:hover { transform: translateY(-2px); }
/* header-CTA responsive label swap (Get Instant Quote → Get Quote) */
.bs-cta-s { display:none; }

/* ---- typography ---- */
.bs-eyebrow { font-family:var(--cosmo-font-head); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; font-size:13px; color:var(--cosmo-aqua-text); }
.bs-eyebrow--pale { color: var(--cosmo-aqua-pale); }
.bs-h1 { font-family:var(--cosmo-font-head); font-weight:800; line-height:1.05;
  font-size:62px; color:var(--cosmo-navy); letter-spacing:-1px; text-wrap:balance; }
.bs-h2 { font-family:var(--cosmo-font-head); font-weight:800; line-height:1.1;
  font-size:40px; color:var(--cosmo-navy); letter-spacing:-.5px; }
.bs-lead { font-family:var(--cosmo-font-body); font-size:18px;
  line-height:1.6; color:var(--cosmo-muted-text); }
.bs-accent { color: var(--cosmo-aqua-bright); }

/* ---- top utility bar ---- */
.bs-topbar { display:flex; align-items:center; justify-content:space-between;
  background: var(--cosmo-navy); color:#CBDCEC; font-size:13px; letter-spacing:.2px;
  padding:8px 32px; }
.bs-topbar a { color:#fff; text-decoration:none; font-weight:700; }
.bs-topbar__side { display:flex; align-items:center; gap:22px; }
.bs-topbar__mark { color: var(--cosmo-aqua-pale); }
.bs-topbar__inner { display:flex; justify-content:space-between; align-items:center; width:100%;
  font-family:var(--cosmo-font-body); }

/* ---- header ---- */
.bs-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); border-bottom:1px solid #ECE6D8;
  box-shadow:0 2px 18px rgba(10,40,75,.05); }
/* NOTE (30 Jul 2026): this row is width-constrained. The inner caps at --cosmo-maxw-wide
   (1320px), and at any viewport wider than that the content is fixed: logo + nav(min-content)
   + side(395px incl. the NSPI seal text) + gaps. Before the logo was enlarged, the logo box was
   silently absorbing the shortfall via flex-shrink — it was being squeezed to ~half its declared
   190px. Enlarging the logo means the space has to be reclaimed honestly instead, so the nav gap
   and the inner padding came down. Budget at 1320px: 143 + (560 + 6*gap) + 395 + 2*24 <= 1320 - 2*padX. */
.bs-header__inner { max-width:var(--cosmo-maxw-wide); margin-inline:auto; display:flex;
  align-items:center; justify-content:space-between; gap:24px; padding:14px 24px; }
.bs-header__nav { display:flex; align-items:center; gap:18px; flex:1; justify-content:center; }
.bs-header__nav a { font-family:var(--cosmo-font-head); font-weight:600; font-size:15px;
  color:#1E3A56; text-decoration:none; white-space:nowrap; padding:6px 2px;
  border-bottom:2px solid transparent; }
.bs-header__nav a:hover { color:var(--cosmo-navy); border-bottom:2px solid var(--cosmo-aqua); }
.bs-header__side { display:flex; align-items:center; gap:16px; flex:none; }
.bs-logo { font-family:var(--cosmo-font-head); font-weight:800; font-size:26px; color:var(--cosmo-navy);
  text-decoration:none; letter-spacing:-.02em; }
.bs-logo b { color:var(--cosmo-aqua); }
.bs-logo-link { display:flex; align-items:center; flex:none; }
.bs-logo-link img { height:52px; width:auto; }
.bs-burger { display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; border:1px solid #D9D2C4; border-radius:12px; background:#fff;
  cursor:pointer; padding:0 12px; flex:none; }
.bs-burger span { display:block; height:2.5px; background:var(--cosmo-navy); border-radius:2px; }

/* NSPI seal (CSS-drawn, gold ring) */
.bs-sealwrap { display:flex; align-items:center; gap:10px; }
.bs-seal, .bs-nspi__seal { width:58px; height:58px; border-radius:50%; background:var(--cosmo-navy);
  border:2px solid var(--cosmo-gold); display:flex; flex-direction:column; align-items:center;
  justify-content:center; line-height:1; flex:none; box-shadow:0 4px 12px rgba(12,43,78,.25); }
.bs-seal__nspi { font-family:var(--cosmo-font-head); font-size:9px; font-weight:700;
  letter-spacing:2px; color:var(--cosmo-gold); }
.bs-seal__year { font-family:var(--cosmo-font-head); font-size:17px; font-weight:800;
  color:#fff; margin:1px 0; }
.bs-seal__winner { font-size:6.5px; font-weight:700; letter-spacing:1px; color:var(--cosmo-aqua-pale); }
.bs-sealtext { display:flex; flex-direction:column; line-height:1.25; }
.bs-sealtext__t { font-family:var(--cosmo-font-head); font-size:11px; font-weight:700;
  color:var(--cosmo-navy); text-transform:uppercase; letter-spacing:.5px; }
.bs-sealtext__s { font-size:10px; color:var(--cosmo-muted-text); }
.bs-nspi { display:flex; align-items:center; gap:10px; font-family:var(--cosmo-font-head);
  font-size:11px; line-height:1.15; color:var(--cosmo-navy); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }

/* ---- hero ---- */
.bs-hero { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle at 18% 22%, #2BA9C9 0%, transparent 48%),
    radial-gradient(circle at 82% 78%, #0C7CA8 0%, transparent 52%),
    linear-gradient(155deg, var(--cosmo-blue-mid) 0%, var(--cosmo-navy-hero) 100%); }
.bs-hero--full { min-height:88vh; display:flex; align-items:center; }
.bs-hero__media, .bs-hero video { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
.bs-hero__overlay { position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,30,55,.88) 0%, rgba(8,30,55,.55) 48%, rgba(8,30,55,.12) 100%),
    linear-gradient(0deg, rgba(8,30,55,.65) 0%, transparent 45%); }
.bs-hero--photo { background:url(/wp-content/uploads/cosmo/images/hero-villa.jpg) center/cover no-repeat; }
.bs-hero--photo::before { content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,30,55,.88) 0%, rgba(8,30,55,.55) 48%, rgba(8,30,55,.12) 100%),
    linear-gradient(0deg, rgba(8,30,55,.65) 0%, transparent 45%); }
.bs-hero__inner { position:relative; z-index:2; width:100%; max-width:var(--cosmo-maxw);
  margin-inline:auto; padding:96px 32px; }
.bs-hero__copy { max-width:760px; }
.bs-hero .bs-h1 { color:#fff; margin:0 0 22px; }
.bs-hero .bs-lead { font-size:19px; color:#D6E3EE; max-width:600px; margin:0 0 34px; }
.bs-badge { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.12);
  border:1px solid rgba(127,227,238,.45); backdrop-filter:blur(6px); color:#CFEFF4;
  font-family:var(--cosmo-font-body); font-weight:600; font-size:13px; letter-spacing:.4px;
  padding:8px 15px; border-radius:var(--cosmo-radius-pill); margin-bottom:26px; }
.bs-badge__star { color: var(--cosmo-gold); }
.bs-cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.bs-hero .bs-btn { font-size:17px; padding:17px 30px; }

/* fallback play button (hero video autoplay-blocked) */
.bs-hero__play { position:absolute; z-index:3; bottom:26px; right:26px; display:none;
  align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45);
  color:#fff; font-family:var(--cosmo-font-head); font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:var(--cosmo-radius-pill); cursor:pointer; backdrop-filter:blur(6px); }
.bs-hero__play.is-visible { display:inline-flex; }

/* ---- trust strip (pulled up over the hero) ---- */
.bs-trust { position:relative; z-index:3; max-width:1160px; margin:-72px auto 0; padding:0 32px; }
.bs-trust__card { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius-lg); box-shadow:var(--cosmo-shadow);
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.bs-trust__item { display:flex; align-items:center; gap:14px; padding:26px 24px;
  border-right:1px solid var(--cosmo-line); }
.bs-trust__item:last-child { border-right:none; }
.bs-trust__ico { width:50px; height:50px; flex:none; border-radius:14px; background:var(--cosmo-aqua-tint);
  display:flex; align-items:center; justify-content:center; color:var(--cosmo-aqua-text); }
.bs-trust__txt { line-height:1.25; }
.bs-trust__t { font-family:var(--cosmo-font-head); font-weight:800; font-size:16px; color:var(--cosmo-navy); }
.bs-trust__s { font-size:13.5px; color:var(--cosmo-muted-text); }
.bs-trust__num { font-family:var(--cosmo-font-head); font-weight:800; font-size:22px; color:var(--cosmo-aqua-text); }

/* ---- section heads ---- */
.bs-section__head { max-width:760px; margin:0 auto 48px; text-align:center; }
.bs-section__head .bs-lead { margin-top:14px; }
.bs-center { text-align:center; }
.bs-sect-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:40px; }
.bs-seemore { font-family:var(--cosmo-font-head); font-weight:700; font-size:15px;
  color:var(--cosmo-aqua-text); border-bottom:2px solid var(--cosmo-aqua); padding-bottom:3px;
  text-decoration:none; }
.bs-seemore:hover { color:var(--cosmo-navy); }
.bs-seemore--pale { color: var(--cosmo-aqua-pale); }

/* ---- cards / grids ---- */
.bs-card { background:#fff; border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius);
  box-shadow:var(--cosmo-shadow-sm); overflow:hidden; }
.bs-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bs-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ---- instant-quote 3 steps ---- */
.bs-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.bs-step { position:relative; background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius); box-shadow:var(--cosmo-shadow-sm); padding:30px 26px; }
.bs-step__num { font-family:var(--cosmo-font-head); font-weight:800; font-size:46px;
  color:var(--cosmo-aqua-num); line-height:1; margin-bottom:8px; }
.bs-step__t { font-family:var(--cosmo-font-head); font-weight:700; font-size:19px;
  color:var(--cosmo-navy); margin:0 0 8px; }
.bs-step p, .bs-step__p { font-size:15px; line-height:1.55; color:#6B7680; margin:0; }

/* ---- shell / range cards ---- */
.bs-rangegrid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.bs-shell { background:#fff; border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius);
  box-shadow:var(--cosmo-shadow-sm); overflow:hidden; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease; }
.bs-shell:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(10,40,75,.12); }
.bs-shell .bs-media { height:200px; border-radius:0; position:relative;
  background:linear-gradient(150deg,#1B6E9B,#0C3A5E); }
.bs-shell__img { width:100%; height:200px; object-fit:cover; display:block; }
.bs-tag { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.95);
  color:var(--cosmo-navy); font-family:var(--cosmo-font-head); font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:var(--cosmo-radius-pill); }
.bs-shell__body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:4px; flex:1; }
.bs-shell__name { font-family:var(--cosmo-font-head); font-weight:800; font-size:21px; color:var(--cosmo-navy); }
.bs-shell__dims { color:var(--cosmo-muted-text); font-size:14px; margin-bottom:16px; }
.bs-price { margin-top:auto; border-top:1px solid var(--cosmo-line); padding-top:16px; display:grid; gap:6px; }
.bs-price__row { display:flex; justify-content:space-between; align-items:baseline; }
.bs-price__label { color:var(--cosmo-muted-text); font-size:13.5px; }
.bs-price__val { font-family:var(--cosmo-font-head); font-weight:800; font-size:17px; color:var(--cosmo-navy); }
.bs-price__val--aqua { color:var(--cosmo-aqua-text); }
.bs-shell__btns { display:flex; gap:10px; margin-top:16px; }
.bs-shell__btns .bs-btn { flex:1; padding:13px 16px; font-size:15px; }

/* ---- why-cosmo pillar cards (navy) ---- */
.bs-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bs-pillar { background:linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep));
  border-radius:var(--cosmo-radius-lg); padding:38px 32px; color:#fff; }
.bs-pillar__ico { width:56px; height:56px; border-radius:16px; background:rgba(63,214,230,.16);
  display:flex; align-items:center; justify-content:center; color:var(--cosmo-aqua-bright);
  margin-bottom:22px; }
.bs-pillar__t { font-family:var(--cosmo-font-head); font-weight:800; font-size:22px; color:#fff;
  margin:0 0 12px; }
.bs-pillar__t .bs-accent { color:var(--cosmo-aqua-bright); }
.bs-pillar p, .bs-pillar__p { font-size:15.5px; line-height:1.65; color:var(--cosmo-muted-dark-2); margin:0; }

/* ---- Award-Winning Pools (dark navy section, gold accents) ---- */
.bs-awgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.bs-awcard { display:block; background:var(--cosmo-navy); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--cosmo-radius); overflow:hidden; text-decoration:none;
  transition: transform .18s ease, border-color .18s ease; }
.bs-awcard:hover { transform:translateY(-4px); border-color:rgba(201,162,75,.55); }
.bs-awcard__media { position:relative; }
.bs-awcard__img { width:100%; height:172px; object-fit:cover; display:block; }
.bs-awcard__badge { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center;
  gap:6px; background:rgba(10,34,64,.92); border:1.5px solid var(--cosmo-gold); color:#fff;
  font-family:var(--cosmo-font-head); font-weight:700; font-size:11px; padding:5px 11px;
  border-radius:var(--cosmo-radius-pill); }
.bs-awcard__badge .bs-star, .bs-awcard__star { color:var(--cosmo-gold); }
.bs-awcard__body { padding:16px 18px 20px; }
.bs-awcard__cat { font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--cosmo-gold);
  text-transform:uppercase; margin-bottom:6px; }
.bs-awcard__name { font-family:var(--cosmo-font-head); font-weight:700; font-size:16px;
  color:#fff; margin:0; }

/* featured award card (National Pool of the Year) */
.bs-awfeat { display:grid; grid-template-columns:1.25fr 1fr; margin-bottom:26px;
  border-color:rgba(201,162,75,.45); }
.bs-awfeat__media { position:relative; min-height:340px; }
.bs-awfeat__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bs-awfeat__body { padding:40px 38px; display:flex; flex-direction:column; justify-content:center;
  gap:14px; background:linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep)); }
.bs-awfeat__sealrow { display:flex; align-items:center; gap:14px; }
.bs-awfeat__seal { width:64px; height:64px; border-radius:50%; background:var(--cosmo-navy-deep);
  border:2.5px solid var(--cosmo-gold); display:flex; flex-direction:column; align-items:center;
  justify-content:center; line-height:1; flex:none; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.bs-awfeat__seal .bs-seal__nspi { font-size:10px; }
.bs-awfeat__seal .bs-seal__year { font-size:19px; }
.bs-awfeat__seal .bs-seal__winner { font-size:7px; }
.bs-awfeat__title { font-family:var(--cosmo-font-head); font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cosmo-gold); line-height:1.5; }
.bs-awfeat__name { font-family:var(--cosmo-font-head); font-weight:800; font-size:28px;
  color:#fff; margin:6px 0 0; }
.bs-awfeat__story { font-size:15.5px; line-height:1.65; color:var(--cosmo-muted-dark); margin:0; }
.bs-awfeat__link { font-family:var(--cosmo-font-head); font-weight:700; font-size:15px;
  color:var(--cosmo-aqua-pale); }

/* ---- testimonials ---- */
.bs-tcard { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius-lg); box-shadow:var(--cosmo-shadow-sm); padding:32px 30px;
  display:flex; flex-direction:column; }
.bs-stars { color:var(--cosmo-aqua); font-size:20px; letter-spacing:2px; margin-bottom:14px; }
.bs-tcard__quote { font-size:16.5px; line-height:1.6; color:var(--cosmo-ink); margin:0 0 24px; flex:1; }
.bs-tcard__author { display:flex; align-items:center; gap:14px; margin-top:auto; }
.bs-avatar { width:54px; height:54px; border-radius:50%; background-size:cover; background-position:center;
  object-fit:cover; flex:none; }
.bs-tcard__name { font-family:var(--cosmo-font-head); font-weight:700; font-size:15.5px; color:var(--cosmo-navy); }
.bs-tcard__where { color:var(--cosmo-muted-text); font-size:13.5px; }

/* ---- CTA band ---- */
.bs-cta-band { background:
    radial-gradient(circle at 78% 30%, var(--cosmo-aqua) 0%, transparent 45%),
    linear-gradient(135deg, var(--cosmo-blue-mid), var(--cosmo-navy-deep));
  color:#fff; text-align:center; }
.bs-cta-band .bs-h2 { color:#fff; font-size:46px; line-height:1.08; }
.bs-cta-band .bs-lead { color:#CFE0EC; }
.bs-cta-band .bs-cta-row { justify-content:center; }
.bs-cta-band .bs-btn { font-size:18px; padding:18px 36px; }

/* ---- footer ---- */
.bs-footer { background:var(--cosmo-navy-deep); color:var(--cosmo-muted-dark-2); }
.bs-footer__wrap { max-width:var(--cosmo-maxw-wide); margin-inline:auto; padding:64px 32px 0; }
.bs-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:44px 40px; padding-block:0; }
.bs-footer h4 { font-family:var(--cosmo-font-head); font-weight:700; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cosmo-aqua-pale); margin:0 0 20px; }
.bs-footer a { color:var(--cosmo-muted-dark-2); text-decoration:none; display:block; margin-bottom:13px;
  font-size:15px; }
.bs-footer a:hover { color:#fff; }
.bs-footer__logo { font-family:var(--cosmo-font-head); font-weight:800; font-size:24px; color:#fff;
  letter-spacing:.3px; }
.bs-footer__logo b { color:var(--cosmo-aqua); }
.bs-footer__blurb { margin:16px 0 22px; font-size:15px; line-height:1.7; max-width:300px;
  color:var(--cosmo-muted-dark); }
.bs-footer__award { display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(201,162,75,.4); border-radius:12px; padding:12px 16px; }
.bs-footer__award .bs-seal { width:44px; height:44px; background:var(--cosmo-navy); }
.bs-footer__award .bs-seal__nspi { font-size:8px; letter-spacing:1.5px; }
.bs-footer__award .bs-seal__year { font-size:13px; }
.bs-footer__award-t { font-family:var(--cosmo-font-head); font-size:13px; font-weight:700; color:#fff; }
.bs-footer__award-s { font-size:12px; color:#8FA6BD; }
.bs-foot-contact { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.bs-foot-ico { color:var(--cosmo-aqua); flex:none; }
.bs-footer__bar { border-top:1px solid rgba(255,255,255,.1); margin-top:52px; padding:24px 0 30px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:13px; color:#7E92A8; }
.bs-footer__bar a { display:inline; margin:0; font-size:13px; color:#7E92A8; }

/* ---- floating WhatsApp (pulsing) ---- */
.bs-wa-float, a.brxe-text-basic.bs-wa-float { position:fixed; right:24px; bottom:24px;
  z-index:1100; display:inline-flex !important; align-items:center; justify-content:center;
  gap:9px; background:var(--cosmo-wa); color:#fff !important;
  font-family:var(--cosmo-font-head); font-weight:700; font-size:14.5px; line-height:1;
  padding:13px 19px 13px 15px; border-radius:var(--cosmo-radius-pill);
  text-decoration:none !important; box-shadow:0 10px 28px rgba(37,211,102,.45);
  animation:cpPulse 2.6s infinite; transition:transform .15s; }
.bs-wa-float svg { width:22px; height:22px; flex:none; display:block; }
.bs-wa-float span { white-space:nowrap; }
.bs-wa-float:hover { transform:translateY(-2px); color:#fff; }

/* ---- probe (verifies the stylesheet is live) ---- */
.bs-probe { background: var(--cosmo-aqua); }

/* ===========================================================================
   Legacy components (other pages) — values corrected, class names unchanged
   =========================================================================== */
.bs-media { background-size:cover; background-position:center; border-radius:var(--cosmo-radius-sm); }
.bs-media--16x9 { aspect-ratio:16/10; }
.bs-media--4x3  { aspect-ratio:4/3; }
.bs-media--sq   { aspect-ratio:1/1; }
/* Header logo. Painted with background-size:contain, so the ARTWORK is sized by the
   HEIGHT (cosmo-logo.png is 898x566, ratio 1.586) and the width just has to be wide
   enough not to clip it — 143 = 90 x 1.586, i.e. no dead space. It is also a flex item,
   so flex:0 0 auto stops the row squeezing it below the declared size.
   30 Jul 2026: 60px -> 90px (+50%, Roger). Phone step-down lives in the 600px block. */
.bs-logo-img { display:block; flex:0 0 auto; width:143px; height:90px; background:url(/wp-content/uploads/cosmo/images/cosmo-logo.png) left center/contain no-repeat; }
.bs-nspi-img { display:block; width:150px; height:52px; background:url(/wp-content/uploads/cosmo/images/nspi-logo.png) right center/contain no-repeat; }

/* filter chips */
.bs-rfilter { font-family:var(--cosmo-font-head); font-weight:600; font-size:15px;
  padding:9px 18px; border-radius:var(--cosmo-radius-pill); border:1px solid var(--cosmo-card-border);
  background:#fff; color:var(--cosmo-navy); cursor:pointer; }
.bs-rfilter.is-active { background:var(--cosmo-navy); color:#fff; border-color:var(--cosmo-navy); }
.bs-fcard.is-hidden { display:none; }
.bs-filterrow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }

/* FAQ accordion */
.bs-faq__item { border-bottom:1px solid var(--cosmo-line); }
.bs-faq__q { display:flex; justify-content:space-between; gap:16px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:20px 0; font-family:var(--cosmo-font-head);
  font-weight:700; font-size:18px; color:var(--cosmo-navy); }
.bs-faq__a { max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--cosmo-muted-text); }
.bs-faq__item.open .bs-faq__a { max-height:400px; padding-bottom:20px; }
.bs-faq__q::after { content:"+"; color:var(--cosmo-aqua-text); font-size:22px; }
.bs-faq__item.open .bs-faq__q::after { content:"–"; }

/* modal */
.bs-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center;
  justify-content:center; background:rgba(12,43,78,.6); padding:24px; }
.bs-modal.open { display:flex; }
.bs-modal__panel { background:#fff; border-radius:var(--cosmo-radius); max-width:920px; width:100%;
  max-height:90vh; overflow:auto; position:relative; }
.bs-modal__close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.85); cursor:pointer; font-size:18px; z-index:2; }
.bs-modal__img { height:300px; border-radius:var(--cosmo-radius) var(--cosmo-radius) 0 0; }
.bs-modal__body { padding:30px; }
.bs-modal__specs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.bs-tag--inline { position:static; display:inline-block; margin-bottom:10px; }

/* project cards */
.bs-proj { border-radius:var(--cosmo-radius); overflow:hidden; box-shadow:var(--cosmo-shadow-sm);
  background:#fff; border:1px solid var(--cosmo-card-border); }
.bs-proj .bs-media { height:300px; border-radius:0; }
.bs-proj__body { padding:22px; }
.bs-proj__suburb { font-family:var(--cosmo-font-head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cosmo-aqua-text); }
.bs-proj__title { font-family:var(--cosmo-font-head); font-weight:800; font-size:22px; color:var(--cosmo-navy); margin:6px 0 8px; }

/* prices table */
.bs-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--cosmo-radius); overflow:hidden; box-shadow:var(--cosmo-shadow-sm); }
.bs-table th { background:var(--cosmo-navy); color:#fff; font-family:var(--cosmo-font-head); text-align:left; padding:16px 20px; font-size:14px; }
.bs-table td { padding:16px 20px; border-top:1px solid var(--cosmo-line); }
.bs-table tr:nth-child(even) td, .bs-table tbody tr:nth-child(even) { background:var(--cosmo-bg-alt); }
.bs-table td:last-child { color:var(--cosmo-aqua-text); font-weight:800; font-family:var(--cosmo-font-head); }
.bs-table td:first-child { font-weight:800; color:var(--cosmo-navy); font-family:var(--cosmo-font-head); }
.bs-ptable { background:#fff; border-radius:var(--cosmo-radius); overflow:hidden; box-shadow:var(--cosmo-shadow-sm); }
.bs-ptr { display:grid; grid-template-columns:1.4fr repeat(6,1fr); }
.bs-ptr--head { background:var(--cosmo-navy); }
.bs-ptr--head .bs-ptd { color:#fff; font-family:var(--cosmo-font-head); font-weight:700; font-size:14px; border:0; }
.bs-ptd { padding:15px 18px; border-top:1px solid var(--cosmo-line); font-size:15px; color:var(--cosmo-ink); }
.bs-ptr:nth-child(even):not(.bs-ptr--head) { background:var(--cosmo-bg-alt); }
.bs-ptd--first { font-weight:800; color:var(--cosmo-navy); font-family:var(--cosmo-font-head); }
.bs-ptd--last { color:var(--cosmo-aqua-text); font-weight:800; font-family:var(--cosmo-font-head); }

/* stats band */
.bs-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center; }
.bs-stat__n { font-family:var(--cosmo-font-head); font-weight:800; font-size:44px; color:var(--cosmo-aqua-text); line-height:1; }
.bs-stat__l { color:var(--cosmo-muted-text); margin-top:8px; }

/* two-column feature */
.bs-split { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.bs-split .bs-media { height:420px; }

/* pull quote */
.bs-pull { font-family:var(--cosmo-font-head); font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1.3; color:var(--cosmo-navy); }
.bs-pull__by { font-size:16px; font-weight:600; color:var(--cosmo-muted-text); margin-top:16px; }

/* numbered process */
.bs-process { display:grid; gap:18px; }
.bs-pstep { display:flex; gap:18px; align-items:flex-start; background:#fff; border-radius:var(--cosmo-radius-sm); padding:20px 24px; box-shadow:var(--cosmo-shadow-sm); border:1px solid var(--cosmo-card-border); }
.bs-pstep__n { font-family:var(--cosmo-font-head); font-weight:800; font-size:24px; color:var(--cosmo-cta-ink); background:var(--cosmo-aqua); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }

/* before/after */
.bs-ba { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bs-ba__item .bs-media { height:320px; }
.bs-ba__lbl { font-family:var(--cosmo-font-head); font-weight:700; color:var(--cosmo-navy); margin-bottom:8px; }

/* contact */
.bs-contact { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; }
.bs-formcard { background:#fff; border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius); box-shadow:var(--cosmo-shadow-sm); padding:36px; }
.bs-field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.bs-field label { font-family:var(--cosmo-font-head); font-weight:600; font-size:14px; color:var(--cosmo-navy); }
.bs-field input, .bs-field textarea { border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius-sm); padding:13px 16px; font-family:var(--cosmo-font-body); font-size:16px; }
.bs-input { border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius-sm); padding:13px 16px; color:#94a2ad; font-size:16px; background:#fff; }
.bs-input--area { min-height:120px; }
.bs-row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bs-contactcard { background:var(--cosmo-navy); color:#fff; border-radius:var(--cosmo-radius); padding:36px; }
.bs-contactcard h4 { color:#fff; }
.bs-cc-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.bs-cc-ico { color:var(--cosmo-aqua); flex:none; font-size:20px; }
.bs-cc-lbl { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); }
.bs-cc-val { font-family:var(--cosmo-font-head); font-weight:700; font-size:18px; }

/* guides */
.bs-guide { background:#fff; border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius); box-shadow:var(--cosmo-shadow-sm); overflow:hidden; }
.bs-guide .bs-media { height:170px; border-radius:0; }
.bs-guide__body { padding:22px; }
.bs-guide__t { font-family:var(--cosmo-font-head); font-weight:800; font-size:19px; color:var(--cosmo-navy); margin-bottom:8px; }

/* breadcrumb + page hero */
.bs-crumb { color:var(--cosmo-muted-text); font-size:14px; margin-bottom:14px; }
.bs-crumb a { color:var(--cosmo-aqua-text); text-decoration:none; }
.bs-phero { background:var(--cosmo-navy); color:#fff; }
.bs-phero .bs-h1, .bs-phero .bs-h2 { color:#fff; }
.bs-phero .bs-lead { color:rgba(255,255,255,.85); }
.bs-phero--photo { position:relative; background-size:cover; background-position:center; }
.bs-phero--photo::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(8,30,55,.9), rgba(8,30,55,.55)); }
.bs-phero--photo .bs-container { position:relative; z-index:2; }

/* meta row */
.bs-metarow { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.bs-meta__l { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--cosmo-aqua-text); font-weight:700; font-family:var(--cosmo-font-head); }
.bs-meta__v { font-family:var(--cosmo-font-head); font-weight:700; color:var(--cosmo-navy); font-size:18px; margin-top:4px; }

/* gallery */
.bs-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bs-gallery .bs-media { height:220px; }

/* suburbs */
.bs-suburbs { display:flex; flex-wrap:wrap; gap:12px; }
.bs-suburbs span { background:#fff; border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius-pill); padding:8px 18px; font-family:var(--cosmo-font-head); font-weight:600; color:var(--cosmo-navy); }

/* prose */
.bs-prose p { color:var(--cosmo-muted-text); line-height:1.7; margin-bottom:16px; font-size:17px; }

/* ===========================================================================
   Fibreglass Pools / Instant Estimate (page 669) — v3 chip-filter build
   (2026-07-29, mockup cosmo-pools-page-mockup-v2.html). Replaces the
   2026-07-01 restyle layer (bricks-child assets + iq-hero injection) entirely.
   Page hero, sticky chip bar, bs-fp cards, installed-photo galleries +
   lightbox. Quote modal (.cosmo-qmodal) kept verbatim — logic untouched.
   Rollback: backups/design-system-2026-07-29-preFP.css
   =========================================================================== */
/* page hero (compact navy, no video) */
.bs-fp-phero { color:#fff; background:
    radial-gradient(circle at 80% 20%, #2BA9C9 0%, transparent 45%),
    linear-gradient(155deg, var(--cosmo-blue-mid) 0%, var(--cosmo-navy-hero) 100%); }
.bs-fp-phero__inner { max-width:var(--cosmo-maxw) !important; margin-inline:auto !important;
  padding:72px var(--cosmo-gutter) 150px !important; width:100%; }
.bs-fp-phero__eyebrow { display:block; margin-bottom:14px; }
.bs-fp-phero__h1, h1.brxe-heading.bs-fp-phero__h1 { font-family:var(--cosmo-font-head); font-weight:800;
  font-size:clamp(34px,4.6vw,54px); line-height:1.06; letter-spacing:-.5px;
  margin:0 0 16px; max-width:720px; color:#fff; }
.bs-fp-phero__h1 .bs-fp-aqua { color:var(--cosmo-aqua-bright); }
.bs-fp-phero__lead { font-size:18px; line-height:1.6; color:#D6E3EE; max-width:640px; margin:0; }
/* Site-wide sticky header (Roger, 2026-07-29): the whole #brx-header block
   (topbar + nav) stays pinned while scrolling, matching the approved mockups.
   .bs-header's own sticky was trapped inside this wrapper and never stuck. */
#brx-header { position:sticky; top:0; z-index:1000; }
.admin-bar #brx-header { top:32px; }
@media (max-width:782px) { .admin-bar #brx-header { top:46px; } }
/* sticky glassy chip bar (pulled up over the hero) */
.bs-fbar-outer { position:sticky; top:var(--bs-fbar-top, 89px); z-index:900; margin-top:-64px;
  padding:0 32px; width:100%; }
.bs-fbar { max-width:1160px; margin-inline:auto; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius-lg); box-shadow:0 24px 60px rgba(10,40,75,.14);
  padding:18px 24px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.bs-fbar__group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bs-fbar__label { font-family:var(--cosmo-font-head); font-weight:700; font-size:12px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--cosmo-muted-text); margin-right:2px; }
.bs-chip { font-family:var(--cosmo-font-head); font-weight:700; font-size:14px; line-height:1.2;
  padding:9px 17px; border-radius:var(--cosmo-radius-pill); border:1.5px solid #E4DCC9;
  background:#fff; color:var(--cosmo-navy); cursor:pointer; transition:all .18s; }
.bs-chip:hover { border-color:var(--cosmo-aqua); }
.bs-chip.on { background:linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep));
  color:#fff; border-color:var(--cosmo-navy); }
.bs-chip--feat.on { background:linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep));
  color:var(--cosmo-cta-ink); border-color:var(--cosmo-aqua-deep); }
.bs-fbar__spacer { flex:1; }
.bs-fbar__count { font-family:var(--cosmo-font-head); font-weight:800; font-size:15px;
  color:var(--cosmo-aqua-text); white-space:nowrap; }
.bs-fbar__reset { display:none; font-family:var(--cosmo-font-head); font-weight:700; font-size:13px;
  color:var(--cosmo-muted-text); background:none; border:0; cursor:pointer;
  text-decoration:underline; padding:0; }
.bs-fbar__reset.show { display:inline; }
/* grid + cards */
.bs-fp-section, section.brxe-section.bs-fp-section { padding:56px 0 90px !important;
  background:var(--cosmo-bg); }
.bs-fp-grid, .brxe-container.bs-fp-grid { display:grid !important;
  grid-template-columns:repeat(3,1fr) !important; gap:26px !important; align-items:stretch !important; position:relative;
  max-width:var(--cosmo-maxw) !important; margin-inline:auto !important;
  padding-inline:var(--cosmo-gutter) !important; width:100%; }
.bs-fp-card, .brxe-block.bs-fp-card { background:#fff !important;
  border:1px solid var(--cosmo-card-border) !important; border-radius:var(--cosmo-radius) !important;
  overflow:hidden; box-shadow:var(--cosmo-shadow-sm);
  transition:transform .18s, box-shadow .18s, opacity .3s;
  display:flex; flex-direction:column; align-items:stretch !important; padding:0 !important; height:100%; }
.bs-fp-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(10,40,75,.12); }
.bs-fp-card.bs-fp-hide { display:none !important; }
.bs-fp-card.bs-fp-enter { animation:bsFpIn .42s cubic-bezier(.2,.8,.25,1) both; }
@keyframes bsFpIn { from{opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1; transform:none;} }
.bs-fp-media { position:relative; width:100%; background:linear-gradient(160deg,#F7FBFD,#E8F2F7);
  padding:18px; height:210px; display:flex; align-items:center; justify-content:center; flex:none; }
.bs-fp-media img { max-height:100%; height:auto; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(10,40,75,.18)); }
.bs-fp-tags { position:absolute; top:12px; left:12px; display:flex; gap:6px; }
.bs-fp-tag { font-family:var(--cosmo-font-head); font-weight:700; font-size:11px;
  background:rgba(12,43,78,.92); color:var(--cosmo-aqua-pale); padding:5px 11px;
  border-radius:var(--cosmo-radius-pill); }
.bs-fp-body { width:100%; padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1;
  align-items:stretch; }
.bs-fp-name, h2.brxe-heading.bs-fp-name { font-family:var(--cosmo-font-head) !important;
  font-weight:800; font-size:21px; line-height:1.25; color:var(--cosmo-navy); margin:0; }
.bs-fp-dims { font-size:13.5px; color:var(--cosmo-muted-text); }
/* installed-photo gallery row (existing Bricks image-gallery, restyled) */
.bs-fp-gal { display:flex; align-items:center; gap:7px; margin-top:2px; }
.bs-fp-gal.bs-fp-gal--empty { display:none; }
.bs-fp-gal__label { font-family:var(--cosmo-font-head); font-weight:700; font-size:10.5px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--cosmo-muted-text); margin-right:2px; }
.bs-fp-gal ul.brxe-image-gallery { display:flex !important; gap:7px !important; margin:0 !important;
  padding:0 !important; list-style:none; flex-wrap:nowrap; }
.bs-fp-gal li.bricks-layout-item { position:relative; width:44px !important; height:44px !important;
  border-radius:10px; overflow:hidden; border:1.5px solid var(--cosmo-card-border); background:#fff;
  flex:none; margin:0 !important; cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s; }
.bs-fp-gal li.bricks-layout-item:nth-child(n+5) { display:none; }
.bs-fp-gal li.bricks-layout-item:hover { transform:translateY(-2px) scale(1.05);
  border-color:var(--cosmo-aqua); box-shadow:0 6px 14px rgba(17,183,201,.28); }
.bs-fp-gal li figure { margin:0; width:100%; height:100%; }
.bs-fp-gal li a { display:block; width:100%; height:100%; }
.bs-fp-gal li img { width:100% !important; height:100% !important; object-fit:cover; display:block; }
.bs-fp-gal li[data-more]::after { content:attr(data-more); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; background:rgba(12,43,78,.68); color:#fff;
  font-family:var(--cosmo-font-head); font-weight:800; font-size:13px; pointer-events:none; }
/* prices */
.bs-fp-price { border-top:1px solid var(--cosmo-line); margin-top:auto; padding-top:12px;
  display:flex; flex-direction:column; gap:5px; width:100%; }
.bs-fp-price__row { display:flex; flex-direction:row; justify-content:space-between;
  align-items:baseline; font-size:13.5px; color:var(--cosmo-muted-text); width:100%; }
.bs-fp-price__val { font-family:var(--cosmo-font-head); font-weight:800; font-size:17px;
  color:var(--cosmo-navy); }
.bs-fp-price__val--aqua { color:var(--cosmo-aqua-text); }
.bs-fp-price__val .jet-listing-dynamic-field__content { display:inline; font:inherit; color:inherit; }
/* explainer */
.bs-fp-explain, h6.brxe-heading.bs-fp-explain { font-family:var(--cosmo-font-body) !important;
  font-weight:400 !important; font-size:12.5px !important; line-height:1.5; text-align:left;
  color:var(--cosmo-muted-text); margin:2px 0 0; }
/* buttons */
.bs-fp-btns { display:flex; flex-direction:row; gap:10px; margin-top:12px; align-items:center;
  width:100%; }
.bs-fp-cta, .brxe-button.bricks-button.bs-fp-cta { flex:1; text-align:center;
  background:linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep)) !important;
  color:var(--cosmo-cta-ink) !important; font-family:var(--cosmo-font-head) !important;
  font-weight:800; font-size:14.5px; padding:12px 14px;
  border-radius:var(--cosmo-radius-pill) !important; border:0 !important;
  box-shadow:0 8px 18px rgba(17,183,201,.35); transition:transform .15s; }
.bs-fp-cta:hover, .brxe-button.bricks-button.bs-fp-cta:hover { transform:translateY(-1px); }
.bs-fp-more a { font-family:var(--cosmo-font-head); font-weight:700; font-size:13.5px;
  color:var(--cosmo-aqua-text); border-bottom:2px solid var(--cosmo-aqua); padding-bottom:2px;
  text-decoration:none; white-space:nowrap; }
.bs-fp-more a:hover { color:var(--cosmo-navy); }
/* empty state */
.bs-fp-empty { display:none; text-align:center; padding:70px 20px; color:var(--cosmo-muted-text);
  font-size:17px; grid-column:1 / -1; }
.bs-fp-empty.show { display:block; }
/* lightbox (JS-built, ids fplb/fplbImg/fplbCap/fplbPrev/fplbNext/fplbClose) */
.bs-fp-lb { position:fixed; inset:0; z-index:2000; display:none; align-items:center;
  justify-content:center; background:rgba(8,26,46,.88); backdrop-filter:blur(8px); padding:28px; }
.bs-fp-lb.open { display:flex; }
.bs-fp-lb figure { position:relative; max-width:min(920px,94vw); margin:0;
  animation:bsFpIn .3s cubic-bezier(.2,.8,.25,1); }
.bs-fp-lb img { max-width:100%; max-height:78vh; border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.5); display:block; margin:0 auto; }
.bs-fp-lb figcaption { text-align:center; color:#CFEFF4; font-family:var(--cosmo-font-head);
  font-weight:700; font-size:15px; margin-top:16px; }
.bs-fp-lb-btn { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border-radius:50%; border:1.5px solid rgba(127,227,238,.5); background:rgba(12,43,78,.8);
  color:var(--cosmo-aqua-pale); font-size:20px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .15s; }
.bs-fp-lb-btn:hover { background:var(--cosmo-navy); }
.bs-fp-lb-prev { left:-64px; }
.bs-fp-lb-next { right:-64px; }
.bs-fp-lb-close { position:fixed; top:22px; right:26px; width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4); background:rgba(12,43,78,.8); color:#fff; font-size:20px;
  cursor:pointer; }
@media (max-width:800px) {
  .bs-fp-lb { padding:16px; }
  .bs-fp-lb-prev { left:8px; top:auto; bottom:-64px; transform:none; }
  .bs-fp-lb-next { right:8px; top:auto; bottom:-64px; transform:none; }
}
/* CTA band (reuses .bs-cta-band gradient) */
.bs-fp-ctaband { padding:70px 0 !important; }
.bs-fp-ctaband .bs-h2, .bs-fp-ctaband h2.brxe-heading { color:#fff;
  font-size:clamp(28px,3.4vw,40px); margin:0 0 14px; }
.bs-fp-ctaband__p { color:#CFE0EC; max-width:520px; margin:0 auto 26px; font-size:17px;
  line-height:1.6; }
/* responsive (mockup breakpoints) */
@media (max-width:1000px) {
  .bs-fp-grid, .brxe-container.bs-fp-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:860px) {
  .bs-fbar-outer { padding:0 20px; }
  .bs-fp-phero__inner { padding:56px 20px 130px !important; }
}
@media (max-width:620px) {
  .bs-fp-grid, .brxe-container.bs-fp-grid { grid-template-columns:1fr !important; }
}
@media (max-width:600px) {
  .bs-fbar { padding:14px 16px; gap:12px; }
  .bs-chip { font-size:13px; padding:8px 13px; }
}
/* quote modal (iframe over the existing quote-pop-up flow) — UNCHANGED from v1 */
.cosmo-qmodal__panel { max-width:780px; width:100%; height:90vh; max-height:90vh; padding:0; overflow:hidden; }
.cosmo-qmodal__frame { width:100%; height:100%; border:0; display:block; background:#fff; }
.cosmo-qmodal .bs-modal__close { background:#fff; box-shadow: var(--cosmo-shadow-sm); }
@media (max-width:600px){ .cosmo-qmodal__panel { height:100vh; max-height:100vh; border-radius:0; } }

/* ===========================================================================
   Responsive — CORRECTED breakpoints (plan §2.4; audited clean 320→1600px).
   These replace the design's original 1000/991 tiers.
   =========================================================================== */
@media (max-width:1360px) {
  .bs-header__nav { gap:16px; }
  .bs-header__nav a { font-size:14px; }
  .bs-header__inner { gap:16px; }
  .bs-header__inner .bs-btn { padding:12px 18px; }
}
@media (max-width:1320px) {
  .bs-sealtext { display:none; }
}
@media (max-width:1150px) {
  .bs-header__nav { display:none; }
  .bs-burger { display:flex; }
  /* mobile dropdown nav (burger toggles .bs-nav-open on the header inner) */
  .bs-nav-open .bs-header__nav { display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:#fff; padding:18px var(--cosmo-gutter);
    box-shadow:var(--cosmo-shadow); gap:4px; }
  .bs-nav-open .bs-header__nav a { padding:10px 2px; width:100%; }
  .bs-header__inner { position:relative; }
}
@media (max-width:1100px) {
  .bs-h1 { font-size:52px; }
}
@media (max-width:1000px) {
  .bs-topbar { display:none; }
  .bs-awgrid { grid-template-columns:repeat(3,1fr); }
  .bs-rangegrid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px) {
  .bs-footer__grid { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:920px) {
  .bs-trust__card { grid-template-columns:repeat(2,1fr); }
  .bs-trust__item { border-bottom:1px solid var(--cosmo-line); }
}
@media (max-width:860px) {
  .bs-section { padding-block:60px; }
  .bs-container { padding-inline:20px; }
  .bs-hero__inner { padding-inline:20px; }
  .bs-trust { padding-inline:20px; }
  .bs-h2 { font-size:30px; }
  .bs-grid-3, .bs-grid-4, .bs-pillars, .bs-split, .bs-contact, .bs-ba, .bs-metarow,
  .bs-gallery, .bs-stats { grid-template-columns:1fr; }
  .bs-awgrid { grid-template-columns:repeat(2,1fr); }
  .bs-awfeat { grid-template-columns:1fr !important; }
  .bs-split .bs-media { height:auto; }
}
@media (max-width:760px) {
  .bs-hero--full { min-height:600px; }
  .bs-hero__inner { padding-block:84px; }
  .bs-h1 { font-size:42px; }
}
@media (max-width:720px) {
  .bs-steps { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .bs-rangegrid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .bs-header__inner { padding:10px 14px; gap:10px; }
  .bs-logo-link img { height:38px; }
  /* Phone step-down for the header logo. 90px overflows the header row between ~346px
     and ~370px wide (the seal only hides at 345px), so phones get 76px / 121px — still
     ~27% up on the old 60px, and clean from 320px up. */
  .bs-logo-img { width:121px; height:76px; }
  .bs-seal, .bs-nspi__seal { width:46px; height:46px; border-width:1.5px; }
  .bs-seal__nspi { font-size:7px; letter-spacing:1.2px; }
  .bs-seal__year { font-size:13px; }
  .bs-seal__winner { font-size:5.5px; }
  .bs-header__inner .bs-btn { font-size:13px; padding:10px 14px; box-shadow:0 6px 14px rgba(17,183,201,.35); }
  .bs-header__side { gap:10px; }
  .bs-burger { width:40px; height:40px; padding:0 10px; gap:4px; }
  .bs-trust__item { padding:18px 16px; gap:10px; }
  .bs-trust__card { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bs-trust__ico { width:42px; height:42px; }
  .bs-wa-float span { display:none; }
  .bs-wa-float, a.brxe-text-basic.bs-wa-float { width:54px; height:54px; padding:0; }
}
@media (max-width:560px) {
  .bs-h1 { font-size:34px; }
  .bs-awgrid { grid-template-columns:1fr; }
  .bs-footer__grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .bs-cta-l { display:none; }
  .bs-cta-s { display:inline; }
}
@media (max-width:390px) {
  .bs-header__inner { gap:8px; }
  .bs-seal, .bs-nspi__seal { width:40px; height:40px; }
  .bs-seal__year { font-size:11px; }
  .bs-header__inner .bs-btn { font-size:12px; padding:9px 12px; }
  .bs-trust__card { grid-template-columns:1fr; }
  .bs-trust__item { border-right:none; border-bottom:1px solid var(--cosmo-line); }
}
@media (max-width:345px) {
  .bs-header__inner .bs-seal, .bs-header__inner .bs-sealwrap { display:none; }
}

/* ===========================================================================
   Phase B additions — utilities + Bricks/Jet element glue for the new home
   =========================================================================== */
/* spacing / width utilities used by the generated Bricks content */
.bs-mb16 { margin-bottom:16px; }
.bs-mb36 { margin-bottom:36px; }
.bs-mb44 { margin-bottom:44px; }
.bs-mb48 { margin-bottom:48px; }
.bs-center-block { margin-inline:auto; max-width:620px; }
.bs-maxw-520 { max-width:520px; }
.bs-maxw-560 { max-width:560px; }
.bs-maxw-920 { max-width:920px; }
.bs-btn-lg, .brxe-button.bs-btn.bs-btn-lg { font-size:18px; padding:18px 36px; }
.bs-finenote { font-size:13.5px; color:#9AA4AD; margin-top:16px; }
.bs-awsub { font-size:16px; line-height:1.6; color:var(--cosmo-muted-dark); margin:14px 0 0; max-width:520px; }
.bs-avatar--ph { display:flex; align-items:center; justify-content:center; background:var(--cosmo-aqua-tint);
  color:var(--cosmo-aqua-text); font-family:var(--cosmo-font-head); font-weight:800; font-size:16px; }
/* headings/leads on the dark award section */
.bs-section--navydeep .bs-h2 { color:#fff; }
/* Bricks image element inside range card (figure wrapper) */
.bs-shell__img, .bs-shell__img img { width:100%; height:200px; object-fit:cover; display:block; border-radius:0; }
/* JetEngine dynamic price fields inherit the price-value look */
.bs-price__val .jet-listing-dynamic-field__content { display:inline; font:inherit; color:inherit; }
/* CTA-band WhatsApp button svg alignment */
.bs-btn-wa svg { flex:none; }
/* empty award grid placeholder keeps the section tidy until the loop is wired */
.bs-awgrid:empty { display:none; }
/* visually-hidden helper (logo link accessible text) */
.bs-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Bricks image elements inside award cards (class lands on the <figure>) */
.bs-awfeat__img img { width:100%; height:100%; object-fit:cover; display:block; }
.bs-awcard__img img { width:100%; height:172px; object-fit:cover; display:block; }

/* FP build addendum (2026-07-29): let the installed-photo row wrap on very
   narrow phones so the 4th thumb never clips the card edge. */
@media (max-width:380px) {
  .bs-fp-gal { flex-wrap:wrap; }
  .bs-fp-gal ul.brxe-image-gallery { flex-wrap:wrap !important; }
}

/* ===========================================================================
   Pool-shell single template (1267) — v2.4 rebuild (2026-07-29).
   Hero, render panel, conditional view-option cards, installed gallery
   (shares .bs-fp-gal + the site-wide lightbox), price panel, spec tiles,
   related-shells loop. Quote CTA keeps modal-link → leadform, untouched.
   Rollback: backups/1267_content-2026-07-29-preSD.json
   =========================================================================== */
.bs-sd-hero { color:#fff; background:
    radial-gradient(circle at 80% 20%, #2BA9C9 0%, transparent 45%),
    linear-gradient(155deg, var(--cosmo-blue-mid) 0%, var(--cosmo-navy-hero) 100%); }
.bs-sd-hero__inner { max-width:var(--cosmo-maxw); margin-inline:auto;
  padding:48px var(--cosmo-gutter) 96px; }
.bs-sd-back { display:inline-block; font-family:var(--cosmo-font-head); font-weight:700;
  font-size:13.5px; color:var(--cosmo-aqua-pale); text-decoration:none; margin-bottom:20px; }
.bs-sd-back:hover { color:#fff; }
.bs-sd-eyebrow { display:block; margin-bottom:10px; }
.bs-sd-h1, h1.brxe-post-title.bs-sd-h1 { font-family:var(--cosmo-font-head); font-weight:800;
  font-size:clamp(32px,4vw,48px); line-height:1.08; letter-spacing:-.5px; color:#fff;
  margin:0 0 10px; }
.bs-sd-dims { font-size:16.5px; color:#D6E3EE; }
/* main two-column, pulled up over the hero */
.bs-sd-main { padding:0 var(--cosmo-gutter) 40px; }
.bs-sd-grid { max-width:var(--cosmo-maxw); margin:-56px auto 0; display:grid;
  grid-template-columns:1.15fr .85fr; gap:30px; align-items:start; position:relative; z-index:5; }
/* left: render + view options + gallery */
.bs-sd-render { background:linear-gradient(160deg,#F7FBFD,#E8F2F7);
  border:1px solid var(--cosmo-card-border); border-radius:var(--cosmo-radius-lg);
  box-shadow:var(--cosmo-shadow); padding:26px; display:flex; align-items:center;
  justify-content:center; min-height:340px; }
.bs-sd-render img { max-height:420px; height:auto; width:auto; max-width:100%;
  object-fit:contain; filter:drop-shadow(0 14px 24px rgba(10,40,75,.18)); }
.bs-sd-views { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.bs-sd-view { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius); padding:14px 14px 12px; display:grid;
  grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.bs-sd-view__cap { grid-column:1 / -1; font-family:var(--cosmo-font-head); font-weight:700;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--cosmo-muted-text); }
.bs-sd-view__img { margin:0; }
.bs-sd-view__img:first-of-type:last-of-type { grid-column:1 / -1; }
.bs-sd-view__img a { display:block; }
.bs-sd-view__img img { width:100%; height:120px; object-fit:contain; background:#F7FBFD;
  border-radius:10px; display:block; transition:transform .15s; }
.bs-sd-view__img a:hover img { transform:scale(1.03); }
.bs-sd-galwrap { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius); padding:16px; margin-top:14px; }
.bs-sd-galwrap .bs-fp-gal { margin-top:10px; }
.bs-fp-gal--lg { flex-wrap:wrap; }
.bs-fp-gal--lg ul.brxe-image-gallery { flex-wrap:wrap !important; }
.bs-fp-gal--lg li.bricks-layout-item { width:64px !important; height:64px !important; }
.bs-fp-gal--lg li.bricks-layout-item:nth-child(n+5) { display:block; }
/* right: price panel + description + specs */
.bs-sd-panel { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:var(--cosmo-radius-lg); box-shadow:var(--cosmo-shadow);
  padding:26px; display:flex; flex-direction:column; gap:12px; }
.bs-sd-panel__label { font-size:12px; }
.bs-sd-panel .bs-fp-price { margin-top:0; border-top:0; padding-top:0; gap:8px; }
.bs-sd-panel .bs-fp-price__row { font-size:14.5px; }
.bs-sd-panel .bs-fp-price__val { font-size:22px; }
.bs-sd-cta, .brxe-button.bricks-button.bs-sd-cta { width:100%; font-size:15.5px; padding:14px; }
.bs-sd-alllink { text-align:center; }
.bs-sd-alllink a { font-family:var(--cosmo-font-head); font-weight:700; font-size:13.5px;
  color:var(--cosmo-aqua-text); border-bottom:2px solid var(--cosmo-aqua);
  padding-bottom:2px; text-decoration:none; }
.bs-sd-alllink a:hover { color:var(--cosmo-navy); }
.bs-sd-desc { margin-top:18px; }
.bs-sd-desc p { color:var(--cosmo-muted-text); line-height:1.7; font-size:16px; margin:0; }
.bs-sd-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.bs-sd-spec { background:#fff; border:1px solid var(--cosmo-card-border);
  border-radius:12px; padding:13px 16px; }
.bs-sd-spec__l { font-family:var(--cosmo-font-head); font-weight:700; font-size:11px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--cosmo-muted-text); }
.bs-sd-spec__v { font-family:var(--cosmo-font-head); font-weight:800; font-size:19px;
  color:var(--cosmo-navy); margin-top:2px; }
/* related shells */
.bs-sd-rel { background:var(--cosmo-bg-alt); padding:60px var(--cosmo-gutter) 84px; margin-top:64px; }
.bs-sd-rel__inner { max-width:var(--cosmo-maxw); margin-inline:auto; }
.bs-sd-rel__inner .bs-h2 { font-size:30px; margin:0 0 26px; }
.bs-sd-relgrid, .brxe-container.bs-sd-relgrid { display:grid !important;
  grid-template-columns:repeat(6,1fr) !important; gap:14px !important;
  align-items:stretch !important; max-width:none !important; width:100%;
  padding:0 !important; margin:0 !important; }
.bs-sd-relcard, .brxe-block.bs-sd-relcard { background:#fff !important;
  border:1px solid var(--cosmo-card-border) !important;
  border-radius:var(--cosmo-radius) !important; overflow:hidden; padding:0 !important;
  box-shadow:var(--cosmo-shadow-sm); display:flex; flex-direction:column;
  align-items:stretch !important; height:100%;
  transition:transform .18s, box-shadow .18s; }
.bs-sd-relcard:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,40,75,.12); }
.bs-sd-relcard__media { width:100%; background:linear-gradient(160deg,#F7FBFD,#E8F2F7); height:118px;
  display:flex; align-items:center; justify-content:center; padding:12px; flex:none; }
.bs-sd-relcard__media img { max-height:100%; height:auto; width:auto; max-width:100%;
  object-fit:contain; }
.bs-sd-relcard__body { width:100%; padding:12px 13px 14px; display:flex; flex-direction:column;
  gap:8px; flex:1; }
.bs-sd-relcard__dims { font-size:12px; color:var(--cosmo-muted-text); text-align:center; }
.bs-sd-relcard__btn, .brxe-button.bricks-button.bs-sd-relcard__btn {
  background:none !important; border:0 !important; padding:0 !important;
  color:var(--cosmo-navy) !important; font-family:var(--cosmo-font-head) !important;
  font-weight:800; font-size:14.5px; line-height:1.3; text-align:center;
  box-shadow:none !important; border-radius:0 !important; }
.bs-sd-relcard:hover .bs-sd-relcard__btn { color:var(--cosmo-aqua-text) !important; }
.bs-sd-relcard__dims { margin-top:auto; }
/* responsive */
@media (max-width:1000px) {
  .bs-sd-grid { grid-template-columns:1fr; margin-top:-44px; }
  .bs-sd-relgrid, .brxe-container.bs-sd-relgrid { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:860px) {
  .bs-sd-hero__inner { padding:40px 20px 84px; }
  .bs-sd-main { padding:0 20px 30px; }
  .bs-sd-rel { padding:48px 20px 64px; }
}
@media (max-width:620px) {
  .bs-sd-views { grid-template-columns:1fr; }
  .bs-sd-relgrid, .brxe-container.bs-sd-relgrid { grid-template-columns:repeat(2,1fr) !important; }
}

/* wf-addendum:r-fibreglass-pools */
/* ===========================================================================
   Cosmo Pools v2.4 — Fibreglass Pool Prices page (.bs-fgp-*)  2026-07-29 r2
   Pricing-focused rebuild: dynamic gallery cards + live every-shell table.
   Only the .bs-fgp- namespace plus page-scoped overrides via the
   .bs-fgp-hero / .bs-fgp-cta wrappers. Never redefines a bare bs- class.
   =========================================================================== */
.bs-fgp-hero .bs-cta-row { margin-top: 26px; }
.bs-fgp-hero .bs-btn-secondary,
.bs-fgp-hero a.brxe-button.bricks-button.bs-btn-secondary {
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important;
}
.bs-fgp-hero a.brxe-button.bricks-button.bs-btn-secondary:hover { background: rgba(255,255,255,.24) !important; color: #fff !important; }
.bs-fgp-intro strong { color: var(--cosmo-aqua); }

/* --- gallery cards (square, centre-centre photos) --- */
.bs-fgp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.bs-fgp-card, .brxe-block.bs-fgp-card {
  align-items: stretch !important; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--cosmo-radius); overflow: hidden;
  box-shadow: var(--cosmo-shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.bs-fgp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,40,75,.14); }
.bs-fgp-media {
  width: 100%; aspect-ratio: 1 / 1; flex: none;
  background-size: cover; background-position: center center; background-color: #E8F2F7;
}
.bs-fgp-body { width: 100%; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bs-fgp-name, h3.brxe-heading.bs-fgp-name { font-size: 22px; line-height: 1.2; margin: 0; color: var(--cosmo-navy); }
.bs-fgp-dims { font-size: 13.5px; color: var(--cosmo-muted-text); }
.bs-fgp-price, .brxe-block.bs-fgp-price {
  align-items: stretch !important; display: flex; flex-direction: column; gap: 6px;
  width: 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid #E3EDF3;
}
.bs-fgp-price__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; font-size: 14px; color: var(--cosmo-muted-text); }
.bs-fgp-price__val { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 18px; color: var(--cosmo-navy); }
.bs-fgp-price__val--aqua { color: var(--cosmo-aqua-text); }
.bs-fgp-btns { display: flex; gap: 14px; align-items: center; width: 100%; margin-top: auto; padding-top: 14px; }
.bs-fgp-quote, a.brxe-button.bs-fgp-quote { flex: 1; text-align: center; font-size: 15px; padding: 12px 16px; }
.bs-fgp-more { font-family: var(--cosmo-font-head); font-weight: 700; font-size: 14.5px; }
.bs-fgp-more a { color: var(--cosmo-navy); text-decoration: none; }
.bs-fgp-more a:hover { color: var(--cosmo-aqua-text); }

/* --- live price table --- */
.bs-fgp-summary { text-align: center; font-size: 15px; color: var(--cosmo-muted-text); margin: 0 0 18px; }
.bs-fgp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.bs-fgp-table {
  width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: var(--cosmo-radius); overflow: hidden; box-shadow: var(--cosmo-shadow-sm);
}
.bs-fgp-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--cosmo-muted-text); padding: 0 4px 10px; }
.bs-fgp-table thead th {
  background: var(--cosmo-navy); color: #fff; font-family: var(--cosmo-font-head);
  font-weight: 700; font-size: 14px; text-align: left; padding: 14px 16px;
}
.bs-fgp-table tbody th, .bs-fgp-table tbody td {
  padding: 12px 16px; font-size: 14.5px; text-align: left; border-top: 1px solid #EDF3F7; color: var(--cosmo-ink, #23323f);
}
.bs-fgp-table tbody tr:nth-child(even) { background: var(--cosmo-bg-alt); }
.bs-fgp-table tbody th a { color: var(--cosmo-navy); font-family: var(--cosmo-font-head); font-weight: 700; text-decoration: none; }
.bs-fgp-table tbody th a:hover { color: var(--cosmo-aqua-text); text-decoration: underline; }
.bs-fgp-td-price { font-family: var(--cosmo-font-head); font-weight: 800; white-space: nowrap; color: var(--cosmo-navy); }
.bs-fgp-td-price--aqua { color: var(--cosmo-aqua-text); }
.bs-fgp-note { margin-top: 22px; }

/* --- CTA band line spacing (page-scoped fix) --- */
.bs-fgp-cta .bs-h2 { line-height: 1.28; margin-bottom: 16px; }
.bs-fgp-cta .bs-lead { line-height: 1.75; margin: 0 auto 26px; max-width: 640px; }

/* responsive */
@media (max-width: 1000px) { .bs-fgp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .bs-fgp-tablewrap { margin-inline: -20px; padding-inline: 20px; } }
@media (max-width: 620px)  { .bs-fgp-grid { grid-template-columns: 1fr; } }

/* wf-addendum:r-relining */
/* ============================================================
   Cosmo Pools v2.4 — r-relining page addendum (.bs-rl-*)
   Load AFTER design-system.css. Does not redefine any bs- class.
   ============================================================ */

/* Two-up service-card grid: the page has exactly two relining
   services (fibreglass + marbelite). bs-grid-3 left an empty
   third column, so this namespaced grid centres two bs-shell
   cards at a comfortable width instead. */
.bs-rl-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 880px;
  margin-inline: auto;
}

/* Collapse at the same breakpoint the design system uses for
   bs-grid-3 / bs-ba (max-width: 860px). */
@media (max-width: 860px) {
  .bs-rl-grid2 { grid-template-columns: 1fr; }
}


/* wf-addendum:r-contact */
/* ===========================================================================
   r-contact addendum (bs-ct-*) — Cosmo Pools v2.4
   Only styles the anchors added to the navy contact card. Without this,
   the new tel:/wa.me/mailto links in .bs-cc-val render browser-default blue
   on the navy card. Does NOT redefine any existing bs- class.
   =========================================================================== */
.bs-ct-link { color: #fff; text-decoration: none; }
.bs-ct-link:hover,
.bs-ct-link:focus-visible { color: var(--cosmo-aqua-bright); text-decoration: underline; text-underline-offset: 3px; }


/* wf-addendum:r-guides */
/* Cosmo Pools v2.4 — r-guides page addendum (.bs-gd-*)
   Loaded after design-system.css. Does NOT redefine any existing bs- class. */

/* Anchor offset so #faq jumps land below the sticky site header */
.bs-gd-anchor { scroll-margin-top: 90px; }


/* wf-addendum:r-pretoria */
/* =========================================================
   r-pretoria addendum — v2.4 wiring pass (.bs-pt-* namespace)
   Load after design-system.css. Does not redefine any bs- class.
   ========================================================= */

/* Centred "see more" link row under the Recent Work grid */
.bs-pt-more { margin-top: 40px; text-align: center; }

/* Closing line under the suburbs chips: spacing + inline link styling
   (design system has no base anchor style for body copy) */
.bs-pt-outside { margin-top: 28px; }
.bs-pt-outside a {
  color: var(--cosmo-aqua-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--cosmo-aqua);
  padding-bottom: 1px;
}
.bs-pt-outside a:hover { color: var(--cosmo-navy); }


/* wf-addendum:awards-projects */
/* ===========================================================================
   Cosmo Pools v2.4 — NSPI Awards page (.bs-aw-*) + Projects (.bs-proj-card*)
   2026-07-29. New namespaces only; reuses bs-metarow/bs-prose/bs-pull etc.
   =========================================================================== */
/* --- awards: 2025 winning-pool cards --- */
.bs-aw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 34px; }
.bs-aw-card, .brxe-block.bs-aw-card {
  align-items: stretch !important; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--cosmo-radius); overflow: hidden; box-shadow: var(--cosmo-shadow-sm);
}
.bs-aw-card__photo { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center center; background-color: #E8F2F7; }
.bs-aw-card__body { width: 100%; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bs-aw-card__title, h3.brxe-heading.bs-aw-card__title { font-size: 22px; line-height: 1.2; margin: 0; color: var(--cosmo-navy); }
.bs-aw-card__area { font-size: 13.5px; color: var(--cosmo-muted-text); }
.bs-aw-gal { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-aw-gal a { display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; }
.bs-aw-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-aw-list { border-top: 1px solid #E3EDF3; padding-top: 14px; margin-top: auto; width: 100%; }
.bs-aw-list__label { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 14px; color: var(--cosmo-navy); margin-bottom: 10px; }
.bs-aw-certs { display: flex; flex-wrap: wrap; gap: 14px; }
.bs-aw-cert { margin: 0; width: calc(50% - 7px); display: flex; gap: 10px; align-items: flex-start; }
.bs-aw-cert a { flex: none; display: block; width: 74px; border-radius: 6px; overflow: hidden; box-shadow: var(--cosmo-shadow-sm); }
.bs-aw-cert img { width: 100%; height: auto; display: block; }
.bs-aw-cert figcaption { font-size: 12.5px; color: var(--cosmo-muted-text); line-height: 1.45; }
.bs-aw-cert figcaption strong { display: block; font-family: var(--cosmo-font-head); color: var(--cosmo-navy); font-size: 13.5px; margin-bottom: 2px; }

/* --- awards: 2024 legacy certificate cards --- */
.bs-aw-lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.bs-aw-legacy, .brxe-block.bs-aw-legacy {
  align-items: stretch !important; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--cosmo-radius); overflow: hidden; box-shadow: var(--cosmo-shadow-sm);
}
.bs-aw-cert-lg { width: 100%; background: #F2F7FA; }
.bs-aw-cert-lg a { display: block; }
.bs-aw-cert-lg img { width: 100%; height: auto; display: block; }
.bs-aw-legacy__body { padding: 14px 16px 18px; width: 100%; }
.bs-aw-legacy__body h4, .bs-aw-legacy__body .brxe-heading { margin: 0 0 6px; font-size: 16.5px; line-height: 1.25; color: var(--cosmo-navy); }
.bs-aw-legacy__cat { font-size: 13px; color: var(--cosmo-muted-text); line-height: 1.45; }

/* --- projects grid cards --- */
.bs-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 10px; }
.bs-proj-card, .brxe-block.bs-proj-card {
  align-items: stretch !important; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--cosmo-radius); overflow: hidden;
  box-shadow: var(--cosmo-shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.bs-proj-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,40,75,.14); }
.bs-proj-card__photo { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center center; background-color: #E8F2F7; }
.bs-proj-card__body { width: 100%; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bs-proj-card__area { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--cosmo-aqua-text); font-family: var(--cosmo-font-head); font-weight: 700; }
.bs-proj-card__title, h3.brxe-heading.bs-proj-card__title { font-size: 21px; line-height: 1.22; margin: 0; color: var(--cosmo-navy); }
.bs-proj-card__exc { font-size: 14.5px; color: var(--cosmo-muted-text); line-height: 1.6; }
.bs-proj-card__more { margin-top: auto; padding-top: 10px; font-family: var(--cosmo-font-head); font-weight: 700; font-size: 14.5px; }
.bs-proj-card__more a { color: var(--cosmo-navy); text-decoration: none; }
.bs-proj-card__more a:hover { color: var(--cosmo-aqua-text); }

/* --- project single: big gallery --- */
.bs-aw-biggal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.bs-aw-biggal a { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.bs-aw-biggal img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- CTA band line spacing (shared by these pages) --- */
.bs-aw-cta .bs-h2 { line-height: 1.28; margin-bottom: 16px; }
.bs-aw-cta .bs-lead { line-height: 1.75; margin: 0 auto 26px; max-width: 640px; }

/* responsive */
@media (max-width: 1000px) {
  .bs-aw-grid { grid-template-columns: 1fr; }
  .bs-aw-lgrid { grid-template-columns: repeat(2, 1fr); }
  .bs-proj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bs-proj-grid { grid-template-columns: 1fr; }
  .bs-aw-lgrid { grid-template-columns: 1fr; }
  .bs-aw-cert { width: 100%; }
  .bs-aw-biggal { grid-template-columns: repeat(2, 1fr); }
}

/* wf-addendum:r-about */
/* ===========================================================================
   Cosmo Pools v2.4 — About page addendum (2026-07-29). Ethics list + navy-band
   secondary button legibility (shared .bs-phero scope, matches fgp hero fix).
   =========================================================================== */
.bs-ab-ethics { max-width: 780px; margin: 0 auto; }
.bs-ab-ethics ul { margin: 0; padding-left: 1.2em; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
.bs-ab-ethics li { line-height: 1.6; }
.bs-phero .bs-btn-secondary,
.bs-phero a.brxe-button.bricks-button.bs-btn-secondary {
  background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important;
}
.bs-phero a.brxe-button.bricks-button.bs-btn-secondary:hover { background: rgba(255,255,255,.24) !important; color: #fff !important; }
.bs-phero .bs-cta-row { margin-top: 24px; }
@media (max-width: 700px) { .bs-ab-ethics ul { grid-template-columns: 1fr; } }

/* wf-addendum:relining-pages */
/* ===========================================================================
   Cosmo Pools v2.4 — Fibreglass & Marbelite relining pages (.bs-rl2-*) +
   before/after comparison widget (.bs-cmp) + relining chooser hub. 2026-07-29.
   =========================================================================== */
/* numbered process steps */
.bs-rl2-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.bs-rl2-step { display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: var(--cosmo-radius); box-shadow: var(--cosmo-shadow-sm); padding: 20px 22px; }
.bs-rl2-step__n { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--cosmo-aqua); color: var(--cosmo-navy); font-family: var(--cosmo-font-head); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.bs-rl2-step__b { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--cosmo-muted-text); line-height: 1.6; }
.bs-rl2-step__t { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 17px; color: var(--cosmo-navy); }

/* what's-included cards */
.bs-rl2-inc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.bs-rl2-inc__card { background: #fff; border-radius: var(--cosmo-radius); box-shadow: var(--cosmo-shadow-sm); padding: 20px 22px; }
.bs-rl2-inc__t { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 16.5px; color: var(--cosmo-navy); margin-bottom: 10px; }
.bs-rl2-inc__card ul { margin: 0; padding-left: 1.1em; }
.bs-rl2-inc__card li { font-size: 14px; color: var(--cosmo-muted-text); line-height: 1.55; margin-bottom: 6px; }

/* lead-gen form card */
.bs-rl2-formcard { max-width: 820px; margin: 30px auto 0; background: #fff; border-radius: var(--cosmo-radius); box-shadow: var(--cosmo-shadow-sm); padding: 28px; }

/* before / after comparison */
.bs-cmp { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--cosmo-radius); overflow: hidden; box-shadow: var(--cosmo-shadow-sm); margin-top: 30px; cursor: ew-resize; touch-action: pan-y; --bs-cmp-pos: 50%; }
.bs-cmp__before, .bs-cmp__after { position: absolute; inset: 0; background-size: cover; background-position: center center; }
.bs-cmp__after { clip-path: polygon(var(--bs-cmp-pos) 0%, 100% 0%, 100% 100%, var(--bs-cmp-pos) 100%); }
.bs-cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--bs-cmp-pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.45); pointer-events: none; }
.bs-cmp__handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--cosmo-navy); font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.bs-cmp__lbl { position: absolute; bottom: 14px; padding: 6px 14px; border-radius: 999px; font-family: var(--cosmo-font-head); font-weight: 700; font-size: 13px; background: rgba(8,30,55,.72); color: #fff; pointer-events: none; }
.bs-cmp__lbl--b { left: 14px; }
.bs-cmp__lbl--a { right: 14px; }

/* chooser hub */
.bs-rl2-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bs-rl2-choice { background: #fff; border-radius: var(--cosmo-radius); overflow: hidden; box-shadow: var(--cosmo-shadow-sm); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.bs-rl2-choice:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,40,75,.14); }
.bs-rl2-choice__img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center center; }
.bs-rl2-choice__b { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bs-rl2-choice__t, h2.brxe-heading.bs-rl2-choice__t { font-size: 24px; margin: 0; color: var(--cosmo-navy); }
.bs-rl2-choice__b p { font-size: 14.5px; color: var(--cosmo-muted-text); line-height: 1.6; margin: 0; }
.bs-rl2-choice__ul ul { margin: 4px 0 0; padding-left: 1.1em; }
.bs-rl2-choice__ul li { font-size: 14px; color: var(--cosmo-muted-text); line-height: 1.55; margin-bottom: 5px; }
.bs-rl2-choice__btn { margin-top: auto; align-self: flex-start; }

/* responsive */
@media (max-width: 900px) {
  .bs-rl2-steps { grid-template-columns: 1fr; }
  .bs-rl2-inc { grid-template-columns: repeat(2, 1fr); }
  .bs-rl2-choose { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bs-rl2-inc { grid-template-columns: 1fr; }
  .bs-cmp { aspect-ratio: 4 / 3; }
  .bs-rl2-formcard { padding: 18px; }
}

/* rl2 form field normalisation — uniform inputs incl. the address autocomplete */
.bs-rl2-formcard input.jet-form-builder__field:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),
.bs-rl2-formcard select.jet-form-builder__field {
  width: 100%; height: 46px; padding: 0 14px !important; font-size: 15px !important;
  line-height: 44px !important; text-indent: 0 !important;
  border: 1px solid #D6E2EA !important; border-radius: 10px !important; background: #fff !important;
  box-sizing: border-box; color: #23323F;
}
.bs-rl2-formcard textarea.jet-form-builder__field {
  width: 100%; min-height: 90px; padding: 12px 14px !important; font-size: 15px !important;
  line-height: 1.5 !important; border: 1px solid #D6E2EA !important; border-radius: 10px !important;
  background: #fff !important; box-sizing: border-box;
}
.bs-rl2-formcard .jet-form-builder__field:focus {
  border-color: var(--cosmo-aqua-deep) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(20,140,170,.14) !important;
}
.bs-rl2-formcard .jet-form-builder__label-text { margin-bottom: 6px; display: inline-block; }
/* rl2 address height fix — JFB autocomplete css wins on height without !important */
.bs-rl2-formcard input.jet-form-builder__field:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]) {
  height: 46px !important; line-height: 44px !important;
}
/* rl2 address flex fix — JFB address row is a flex column with a fixed height,
   so the input gets flex-shrunk to ~21px; control it via basis instead. */
.bs-rl2-formcard .jet-form-builder-row.field-type-address-field { height: auto !important; }
.bs-rl2-formcard .field-type-address-field input.jet-form-builder__field {
  flex: 0 0 46px !important; min-height: 46px !important;
}

/* wf-addendum:r-contact-form */
/* ===========================================================================
   r-contact — live JetFormBuilder form #98 inside the white .bs-formcard.
   Mirrors the relining-page (.bs-rl2-formcard) field normalisation so the JFB
   inputs match v2.4, incl. the address-field flex fix. Scoped to .bs-ct-form —
   does NOT redefine any existing bs- class and does not touch the form itself.
   =========================================================================== */
.bs-ct-form { margin-top: 22px; }
.bs-ct-form .jet-form-builder-row { margin-bottom: 18px; }
.bs-ct-form .jet-form-builder__label,
.bs-ct-form .jet-form-builder__label-text {
  font-family: var(--cosmo-font-head); font-weight: 600; font-size: 14px;
  color: var(--cosmo-navy); margin-bottom: 6px; display: inline-block;
}
.bs-ct-form input.jet-form-builder__field:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),
.bs-ct-form select.jet-form-builder__field {
  width: 100%; height: 46px !important; padding: 0 14px !important; font-size: 15px !important;
  line-height: 44px !important; text-indent: 0 !important;
  border: 1px solid var(--cosmo-card-border) !important; border-radius: var(--cosmo-radius-sm) !important;
  background: #fff !important; box-sizing: border-box; color: #23323F;
}
.bs-ct-form textarea.jet-form-builder__field {
  width: 100%; min-height: 120px; padding: 12px 14px !important; font-size: 15px !important;
  line-height: 1.5 !important; border: 1px solid var(--cosmo-card-border) !important;
  border-radius: var(--cosmo-radius-sm) !important; background: #fff !important; box-sizing: border-box;
}
.bs-ct-form .jet-form-builder__field:focus {
  border-color: var(--cosmo-aqua-deep) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(20,140,170,.14) !important;
}
/* JFB address row is a flex column with a fixed height — control via basis */
.bs-ct-form .jet-form-builder-row.field-type-address-field { height: auto !important; }
.bs-ct-form .field-type-address-field input.jet-form-builder__field {
  flex: 0 0 46px !important; min-height: 46px !important;
}
/* select2 (if a select ever gets added to form 98) */
.bs-ct-form .select2-container .select2-selection--single,
.bs-ct-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; }
.bs-ct-form .select2-selection__rendered { line-height: 44px !important; }
/* submit button — match .bs-btn-primary */
.bs-ct-form .jet-form-builder__submit,
.bs-ct-form button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--cosmo-font-head); font-weight: 800; font-size: 16px; line-height: 1;
  padding: 16px 28px; border-radius: var(--cosmo-radius-pill); border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep)) !important;
  color: var(--cosmo-cta-ink) !important; box-shadow: 0 12px 30px rgba(17,183,201,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bs-ct-form .jet-form-builder__submit:hover,
.bs-ct-form button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(17,183,201,.6); }
.bs-ct-form .jet-form-builder__required-mark,
.bs-ct-form .jet-form-builder__field-error { color: #C8452D; }
@media (max-width: 620px) {
  .bs-ct-form .jet-form-builder__submit,
  .bs-ct-form button[type=submit] { width: 100%; }
}
/* wf-addendum:guides */
/* ===========================================================================
   Guide pages addendum (.bs-gd2-* namespace) — Cosmo Pools v2.4
   Serves /r-guide-salt-water/, /r-guide-pool-maintenance/ and
   /r-guide-fibreglass-vs-concrete/. Does NOT redefine any existing bs- class.
   =========================================================================== */

/* three-column comparison grid */
.bs-gd2-cmp { background: #fff; border: 1px solid var(--cosmo-card-border); border-radius: var(--cosmo-radius);
  box-shadow: var(--cosmo-shadow-sm); overflow: hidden; }
.bs-gd2-cmp__r { display: grid; grid-template-columns: 0.85fr 1fr 1fr; }
.bs-gd2-cmp__r:not(.bs-gd2-cmp__r--head):nth-child(even) { background: var(--cosmo-bg-alt); }
.bs-gd2-cmp__c { padding: 15px 20px; font-size: 15px; line-height: 1.55; color: var(--cosmo-muted-text);
  border-top: 1px solid var(--cosmo-line); }
.bs-gd2-cmp__c--k { font-family: var(--cosmo-font-head); font-weight: 700; color: var(--cosmo-navy); }
.bs-gd2-cmp__r--head { background: var(--cosmo-navy); }
.bs-gd2-cmp__r--head .bs-gd2-cmp__c { color: #fff; font-family: var(--cosmo-font-head); font-weight: 700;
  font-size: 14px; border-top: 0; letter-spacing: .01em; }
.bs-gd2-cmp__c[data-l]::before { content: attr(data-l); display: none; }

/* do / don't + bullet cards */
.bs-gd2-list { padding: 26px 28px; align-self: stretch; }
.bs-gd2-list__t { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 19px;
  color: var(--cosmo-navy); margin-bottom: 12px; }
.bs-gd2-list__ul ul { margin: 0; padding-left: 1.15em; }
.bs-gd2-list__ul li { font-size: 15.5px; line-height: 1.6; color: var(--cosmo-muted-text); margin-bottom: 10px; }
.bs-gd2-list__ul li strong { color: var(--cosmo-navy); }
.bs-gd2-list__ul li::marker { color: var(--cosmo-aqua-text); }

/* prose + eyebrow legibility on the deep-navy band */
.bs-section--navydeep .bs-prose p { color: var(--cosmo-muted-dark-2); }
.bs-section--navydeep .bs-eyebrow { color: var(--cosmo-aqua-bright); }

/* back-to-guides strip */
.bs-gd2-backsec { padding-top: 34px; padding-bottom: 46px; text-align: center; }
.bs-gd2-back { font-family: var(--cosmo-font-head); font-weight: 700; font-size: 16px;
  text-decoration: none; color: var(--cosmo-aqua-text); }
.bs-gd2-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the water-balance table inherits .bs-table, but its last column is a target
   value rather than a price — keep the aqua emphasis, drop the price weight */
.bs-gd2-cmp + .bs-finenote { text-align: center; }

@media (max-width: 860px) {
  .bs-gd2-cmp__r { grid-template-columns: 0.9fr 1fr 1fr; }
  .bs-gd2-cmp__c { padding: 13px 14px; font-size: 14px; }
}
@media (max-width: 700px) {
  /* stack each row; the header row is replaced by per-cell data-l labels */
  .bs-gd2-cmp__r--head { display: none; }
  .bs-gd2-cmp__r { grid-template-columns: 1fr; padding: 4px 0 10px; }
  .bs-gd2-cmp__r:not(.bs-gd2-cmp__r--head):nth-child(even) { background: var(--cosmo-bg-alt); }
  .bs-gd2-cmp__c { border-top: 0; padding: 6px 18px; }
  .bs-gd2-cmp__c--k { padding-top: 14px; font-size: 17px; }
  .bs-gd2-cmp__c[data-l]::before { display: block; font-family: var(--cosmo-font-head); font-weight: 700;
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cosmo-aqua-text);
    margin-bottom: 2px; }
  .bs-gd2-list { padding: 20px 22px; }
}
/* wf-addendum:legal-docs */
/* ===========================================================================
   Privacy Policy (#3) / Disclaimer (#1294) / Warranties (#1297).
   The live content is kept verbatim — this only gives it v2.4 typography and
   a readable measure. Scoped to .bs-lg-doc; redefines nothing existing.
   =========================================================================== */
.bs-lg-doc__body h1, .bs-lg-doc__body h2 { font-family: var(--cosmo-font-head); color: var(--cosmo-navy);
  line-height: 1.2; margin: 0 0 18px; }
.bs-lg-doc__body h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.bs-lg-doc__body h2 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; margin-top: 34px; }
.bs-lg-doc__body h3, .bs-lg-doc__body h4 { font-family: var(--cosmo-font-head); font-weight: 700;
  font-size: 18px; color: var(--cosmo-navy); margin: 26px 0 10px; }
.bs-lg-doc__body p, .bs-lg-doc__body li { color: var(--cosmo-muted-text); line-height: 1.7; font-size: 16.5px; }
.bs-lg-doc__body p { margin: 0 0 16px; }
.bs-lg-doc__body ul, .bs-lg-doc__body ol { margin: 0 0 18px; padding-left: 1.4em; }
.bs-lg-doc__body li { margin-bottom: 9px; }
.bs-lg-doc__body li::marker { color: var(--cosmo-aqua-text); }
.bs-lg-doc__body strong { color: var(--cosmo-navy); }
.bs-lg-doc__body a { color: var(--cosmo-aqua-text); text-decoration: underline; text-underline-offset: 3px; }
.bs-lg-doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.bs-lg-doc__body td, .bs-lg-doc__body th { border: 1px solid var(--cosmo-line); padding: 10px 12px;
  font-size: 15.5px; color: var(--cosmo-muted-text); vertical-align: top; }

/* the fixed .bs-wa-float sat on top of the now-live legal links in the footer
   bar, making "10-Year Guarantee" unclickable — shift the bar's right group clear */
@media (min-width: 861px) { .bs-footer__bar { padding-right: 180px; } }
@media (max-width: 860px) { .bs-footer__bar { padding-bottom: 74px; } }
/* wf-addendum:jfb-buttons */
/* ===========================================================================
   Global JetFormBuilder action-button styling — Cosmo Pools v2.4
   ---------------------------------------------------------------------------
   JetFormBuilder ships NO visual styling for its action buttons (its own
   frontend/main.css only sets `display:inline-flex; justify-content:flex-start`)
   and the Bricks/ACSS reset strips the UA default, so every on-page JFB form
   — /concrete-pools/, the relining pages, /instant-estimate/, form #6171 and
   #516 wherever they are embedded — rendered its submit as bare text.
   These rules give every JFB action button the .bs-btn-primary look site-wide.

   SPECIFICITY NOTE: JFB's frontend/main.css is enqueued AFTER design-system.css
   and carries `button.jet-form-builder__submit` (0,1,1). The selectors below are
   therefore scoped with `.jet-form-builder` (the <form> class) to reach (0,2,1)
   and win on specificity instead of leaning on !important.

   SCOPE NOTE: only action buttons (submit / next / prev / update / switch-state)
   are targeted. Repeater and file-upload controls carry their own
   `jet-form-builder-repeater__*` / `jet-form-builder-file-upload__*` classes and
   are deliberately left alone. Page-scoped blocks such as `.bs-ct-form` stay in
   place and remain visually identical — this only fills the global gap.
   =========================================================================== */
.jet-form-builder button.jet-form-builder__action-button,
.jet-form-builder button.jet-form-builder__next-page,
.jet-form-builder button.jet-form-builder__prev-page {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--cosmo-font-head); font-weight: 800; font-size: 16px; line-height: 1;
  padding: 16px 28px; border: 0; border-radius: var(--cosmo-radius-pill);
  width: auto; max-width: 100%; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep));
  color: var(--cosmo-cta-ink);
  box-shadow: 0 12px 30px rgba(17,183,201,.5);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.jet-form-builder button.jet-form-builder__action-button:hover,
.jet-form-builder button.jet-form-builder__next-page:hover,
.jet-form-builder button.jet-form-builder__prev-page:hover {
  transform: translateY(-2px); box-shadow: 0 16px 38px rgba(17,183,201,.6);
}
.jet-form-builder button.jet-form-builder__action-button:focus-visible,
.jet-form-builder button.jet-form-builder__next-page:focus-visible,
.jet-form-builder button.jet-form-builder__prev-page:focus-visible {
  outline: 3px solid rgba(20,140,170,.5); outline-offset: 2px;
}

/* the "Back" step of a multi-step form is the quiet twin (matches .bs-btn-secondary) */
.jet-form-builder button.jet-form-builder__prev-page,
.jet-form-builder button.jet-form-builder__button-prev {
  background: transparent; color: var(--cosmo-navy);
  box-shadow: inset 0 0 0 1.5px rgba(12,43,78,.35);
}
.jet-form-builder button.jet-form-builder__prev-page:hover,
.jet-form-builder button.jet-form-builder__button-prev:hover {
  background: rgba(12,43,78,.04); box-shadow: inset 0 0 0 1.5px rgba(12,43,78,.55);
}

/* disabled + in-flight (JFB toggles [disabled] while the submit request runs) */
.jet-form-builder button.jet-form-builder__action-button[disabled],
.jet-form-builder button.jet-form-builder__next-page[disabled],
.jet-form-builder button.jet-form-builder__prev-page[disabled] {
  opacity: .55; cursor: not-allowed; transform: none;
  box-shadow: 0 6px 16px rgba(17,183,201,.22);
}

/* the wrappers are flex rows at width:100% — keep the button hugging its label
   on desktop and going full width on phones */
.jet-form-builder .jet-form-builder__action-button-wrapper,
.jet-form-builder .jet-form-builder__submit-wrap { align-items: center; }
@media (max-width: 620px) {
  .jet-form-builder button.jet-form-builder__action-button,
  .jet-form-builder button.jet-form-builder__next-page,
  .jet-form-builder button.jet-form-builder__prev-page { width: 100%; }
  .jet-form-builder .jet-form-builder__next-page-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
}


/* --- A11Y-01: WhatsApp float label ------------------------------------
   White on WhatsApp green (#25D366) is 1.98:1 — the single worst contrast
   on the site, on a control that appears on all 115 pages. The green stays
   (it is what makes the button recognisable at a glance); the label moves to
   the dark ink already defined for aqua buttons. #053238 on #25D366 = 6.97:1. */
.bs-wa-float,
.bs-wa-float a,
.bs-wa-float span,
[class*="wa-float"] a,
[class*="whatsapp"] .bs-cta__label {
  color: var(--cosmo-cta-ink) !important;
}
.bs-wa-float svg,
[class*="wa-float"] svg { fill: var(--cosmo-cta-ink); }



/* --- A11Y-03: target size ----------------------------------------------
   WCAG 2.1 AA is 2.5.8 Target Size (Minimum) = 24x24 CSS px. 44x44 is 2.5.5,
   which is AAA. Measured on /instant-estimate/, admin bar excluded:
   268 interactive elements, 8 fail AA, 166 fail AAA.

   The 8 real AA failures are all the same shape — an inline text link inside a
   Bricks text or heading span, rendering 16-18px tall: the topbar phone number,
   the three footer-bar links, and the four estimate-modal headings. Fixed by
   giving the anchor a real box.

   Deliberately NOT chasing the 166 AAA cases: the nav links are 40px tall and
   perfectly usable, and padding them out would break the header row, whose
   budget (6*navGap + 2*padX <= 174 at the 1320px cap) has no slack. */

.bs-topbar__side a,
.bs-footer__bar a,
.popup--quotetype-subheading a,
.bs-sealtext a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Controls that can afford a comfortable target get one — this is free here
   and takes them past AAA as a bonus. */
.bs-chip,
.bs-filter button,
.jet-form-builder button[type="submit"],
.jet-form-builder input[type="submit"] { min-height: 44px; }

/* Skip links are only visible on focus, which is exactly when a keyboard user
   needs to be able to hit them. They measured 20x10. */
.skip-link,
a[href^="#main"],
a[href^="#content"] {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
}


/* wf-addendum:tiling-page */
/* ===========================================================================
   Cosmo Pools v2.4 — Pool Tiling page (/pool-tiling/) + third chooser card.
   Reuses .bs-rl2-* components; adds only what tiling needs. 2026-07-31.
   =========================================================================== */
/* three-up chooser hub (fibreglass / marbelite / tiling) */
.bs-rl2-choose--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .bs-rl2-choose--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .bs-rl2-choose--three { grid-template-columns: 1fr; } }

/* two-image mosaic/tiling detail gallery */
.bs-tl-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.bs-tl-gal__img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--cosmo-radius);
  box-shadow: var(--cosmo-shadow-sm); background-size: cover; background-position: center center; }
@media (max-width: 700px) { .bs-tl-gal { grid-template-columns: 1fr; } }


/* ================================================================== */
/* wf-addendum:ie3-cro (2026-08-03) — Instant Estimate mobile CRO      */
/* Rev-3 concept: hide-on-scroll header + compact one-row sticky      */
/* filter + bottom sheet, hero rework, trust/review/value elements,   */
/* CTA wording microcopy, end-of-list help bar.                       */
/* Page-scoped where it changes existing behaviour (body.page-id-669) */
/* ================================================================== */

/* ---- header hide-on-scroll (body class toggled by the 669 loader JS only) ---- */
#brx-header { transition: transform .28s ease; }
body.bs-hdr-hide #brx-header { transform: translateY(-105%); }
body.page-id-669 .bs-fbar-outer { transition: top .28s ease; }

/* ---- hero: tighter, benefit-led ---- */
body.page-id-669 .bs-fp-phero__eyebrow { display: none; }
.bs-ie3-steps { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; flex-wrap: nowrap; white-space: nowrap; }
.bs-ie3-steps span { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cosmo-font-head); font-weight: 700; font-size: 13px; color: #fff; opacity: .95; }
.bs-ie3-steps i { font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cosmo-aqua); color: var(--cosmo-cta-ink); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.bs-ie3-steps em { font-style: normal; color: rgba(255,255,255,.45); font-size: 15px; }
.bs-ie3-trust { display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; font-family: var(--cosmo-font-head); font-size: 13px; color: rgba(255,255,255,.85);
  flex-wrap: nowrap; white-space: nowrap; }
.bs-ie3-trust b { color: #fff; }
.bs-ie3-trust i { font-style: normal; color: rgba(255,255,255,.35); }
.bs-ie3-stars { color: #FFC94A; letter-spacing: -1px; }

/* ---- compact one-row filter bar ---- */
body.page-id-669 .bs-fbar { flex-wrap: nowrap !important; padding: 10px 14px; gap: 10px; }
body.page-id-669 .bs-fbar__label { display: none; }
body.page-id-669 .bs-fbar__group { flex-wrap: nowrap; flex: 0 0 auto; gap: 7px; }
.bs-ie3-scroll { display: flex; align-items: center; gap: 10px; overflow-x: auto; flex: 1 1 auto;
  min-width: 0; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bs-ie3-scroll::-webkit-scrollbar { display: none; }
body.page-id-669 .bs-chip { flex: 0 0 auto; font-size: 13px; padding: 8px 14px; }
.bs-ie3-fbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--cosmo-font-head); font-weight: 700; font-size: 13px; line-height: 1.2;
  padding: 9px 15px; border-radius: var(--cosmo-radius-pill); border: 1.5px solid var(--cosmo-navy);
  background: linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep)); color: #fff; cursor: pointer; }
.bs-ie3-fbtn svg { width: 13px; height: 13px; fill: currentColor; }
body.page-id-669 .bs-fbar__count { font-size: 13.5px; }
@media (max-width: 780px) {
  body.page-id-669 .bs-fbar-outer { padding: 0 12px; }
  body.page-id-669 .bs-fbar { padding: 8px 10px; gap: 8px; border-radius: 16px; }
  body.page-id-669 .bs-chip { font-size: 12.5px; padding: 7px 12px; }
  body.page-id-669 .bs-fbar__reset { display: none !important; } /* lives in the sheet on mobile */
}

/* ---- bottom sheet ---- */
.bs-ie3-veil { position: fixed; inset: 0; background: rgba(10,26,42,.5); z-index: 1200;
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.bs-ie3-veil.open { opacity: 1; pointer-events: auto; }
.bs-ie3-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201; background: #fff;
  border-radius: 22px 22px 0 0; padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .3s ease; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 -18px 50px rgba(10,40,75,.25); }
.bs-ie3-sheet.open { transform: translateY(0); }
.bs-ie3-sheet .bs-ie3-grab { width: 44px; height: 5px; border-radius: 3px; background: #E4DCC9; margin: 0 auto 14px; }
.bs-ie3-sheet h5 { font-family: var(--cosmo-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--cosmo-muted-text); margin: 14px 0 9px; }
.bs-ie3-sheet .bs-ie3-grp { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-ie3-apply { display: block; width: 100%; margin-top: 20px; border: 0; cursor: pointer;
  font-family: var(--cosmo-font-head); font-weight: 800; font-size: 15px; padding: 15px;
  border-radius: var(--cosmo-radius-pill);
  background: linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep)); color: #fff; }
.bs-ie3-clear { display: block; width: 100%; margin-top: 10px; background: none; border: 0; cursor: pointer;
  font-family: var(--cosmo-font-head); font-size: 13px; color: var(--cosmo-muted-text); text-decoration: underline; }

/* ---- social proof line + value strip ---- */
.bs-ie3-proof { display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: var(--cosmo-maxw); margin: 22px auto 0; padding: 0 var(--cosmo-gutter);
  font-family: var(--cosmo-font-head); font-size: 13.5px; color: var(--cosmo-muted-text); text-align: center; }
.bs-ie3-proof b { color: var(--cosmo-navy); }
.bs-ie3-avs { display: inline-flex; }
.bs-ie3-avs i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cosmo-bg);
  margin-left: -7px; display: inline-block; }
.bs-ie3-avs i:first-child { margin-left: 0; }
.bs-ie3-value { max-width: var(--cosmo-maxw); margin: 14px auto 0; padding: 0 var(--cosmo-gutter); }
.bs-ie3-value > div { border: 1.5px dashed var(--cosmo-aqua-deep); border-radius: var(--cosmo-radius);
  background: #fff; padding: 14px 18px; }
.bs-ie3-value h6 { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 14px;
  color: var(--cosmo-navy); margin: 0 0 10px; text-align: center; }
.bs-ie3-value h6 b { color: var(--cosmo-aqua-text); }
.bs-ie3-value__row { display: flex; gap: 14px; justify-content: center; }
.bs-ie3-value__row span { flex: 1; text-align: center; font-size: 12.5px; line-height: 1.4;
  color: var(--cosmo-muted-text); max-width: 260px; }
@media (max-width: 640px) {
  .bs-ie3-value__row { gap: 8px; }
  .bs-ie3-value__row span { font-size: 11px; }
}

/* ---- review + why bands (relocated into the grid by the loader) ---- */
.bs-fp-grid > .bs-ie3-rev, .bs-fp-grid > .bs-ie3-why { grid-column: 1 / -1; }
.bs-ie3-rev__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--cosmo-font-head); font-weight: 800; font-size: 15px; color: var(--cosmo-navy);
  padding: 4px 2px 10px; }
.bs-ie3-rev__head small { font-weight: 700; font-size: 13px; color: var(--cosmo-muted-text); }
.bs-ie3-rev__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bs-ie3-rev__row::-webkit-scrollbar { display: none; }
.bs-ie3-rev__row figure { flex: 0 0 320px; scroll-snap-align: start; margin: 0; background: #fff;
  border: 1px solid var(--cosmo-card-border); border-radius: var(--cosmo-radius);
  box-shadow: var(--cosmo-shadow-sm); padding: 15px 17px; }
@media (max-width: 640px) { .bs-ie3-rev__row figure { flex-basis: 84%; } }
.bs-ie3-rev__row figcaption { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bs-ie3-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--cosmo-font-head); font-weight: 800; font-size: 13px; }
.bs-ie3-rev__row figcaption b { font-family: var(--cosmo-font-head); font-size: 13.5px; color: var(--cosmo-navy); display: block; }
.bs-ie3-rev__row figcaption em { font-style: normal; font-size: 11px; color: var(--cosmo-muted-text); display: block; }
.bs-ie3-rev__row blockquote { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cosmo-muted-text); }
.bs-ie3-why > div { background: linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep));
  border-radius: var(--cosmo-radius); padding: 20px 18px; color: #EAF4F8; }
.bs-ie3-why h6 { font-family: var(--cosmo-font-head); font-weight: 800; font-size: 15px; color: #fff;
  margin: 0 0 14px; text-align: center; }
.bs-ie3-why__row { display: flex; gap: 14px; }
.bs-ie3-why__row span { flex: 1; text-align: center; font-size: 11.5px; line-height: 1.4; opacity: .92; }
.bs-ie3-why__row span b { display: block; font-family: var(--cosmo-font-head); font-size: 13px;
  color: #FFC94A; margin-bottom: 2px; }
.bs-ie3-why__row span .ic { display: block; font-size: 20px; margin-bottom: 4px; }

/* ---- CTA microcopy: explainer becomes ticks BELOW the buttons ---- */
body.page-id-669 .bs-fp-explain, body.page-id-669 h6.brxe-heading.bs-fp-explain {
  order: 99; margin: 10px 0 0 !important; text-align: center; font-size: 11px !important;
  font-weight: 600 !important; color: var(--cosmo-muted-text) !important; letter-spacing: 0 !important;
  text-transform: none !important; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
body.page-id-669 .bs-fp-explain span { white-space: nowrap; }

/* ---- end-of-list help bar ---- */
.bs-ie3-help { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
  max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--cosmo-card-border);
  border-radius: 18px; box-shadow: 0 16px 44px rgba(10,40,75,.28); display: flex; align-items: center;
  gap: 12px; padding: 11px 14px; transform: translateY(140%); transition: transform .35s ease; }
.bs-ie3-help.show { transform: translateY(0); }
.bs-ie3-help .t { flex: 1; min-width: 0; }
.bs-ie3-help .t b { display: block; font-family: var(--cosmo-font-head); font-size: 13.5px; color: var(--cosmo-navy); }
.bs-ie3-help .t span { display: block; font-size: 11px; color: var(--cosmo-muted-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-ie3-help a.bs-ie3-helpbtn { flex: 0 0 auto; font-family: var(--cosmo-font-head); font-weight: 800;
  font-size: 13px; padding: 11px 16px; border-radius: var(--cosmo-radius-pill); text-decoration: none;
  background: linear-gradient(135deg, var(--cosmo-aqua), var(--cosmo-aqua-deep)); color: var(--cosmo-cta-ink); }
/* keep it clear of the WhatsApp FAB if one is present */
@media (min-width: 900px) { .bs-ie3-help { bottom: 18px; } }

/* ---- small-phone fit for the nowrap hero rows ---- */
@media (max-width: 520px) {
  .bs-ie3-steps { gap: 6px; margin-top: 13px; }
  .bs-ie3-steps span { font-size: 11px; gap: 4px; }
  .bs-ie3-steps i { width: 17px; height: 17px; font-size: 9.5px; }
  .bs-ie3-steps em { font-size: 12px; }
  .bs-ie3-trust { font-size: 11.5px; gap: 6px; }
  .bs-ie3-help .t b { font-size: 12.5px; }
}
@media (max-width: 420px) {
  .bs-ie3-trust { font-size: 10.5px; gap: 5px; }
}
/* end wf-addendum:ie3-cro */
/* ================================================================== */
/* wf-addendum:ie3-cro-fix1 (2026-08-03) — mobile width + sticky fix   */
/* The nowrap hero rows (steps/trust) could exceed the viewport on     */
/* phones, widening the document: horizontal panning appeared and the  */
/* zoomed-out layout viewport broke the sticky filter bar. Rows now    */
/* wrap; page-scoped overflow-x:clip guards catch any residual ink     */
/* overflow. clip (not hidden) — it never creates a scroll container,  */
/* so position:sticky inside is unaffected.                            */
/* ================================================================== */

.bs-ie3-steps { flex-wrap: wrap; white-space: normal; row-gap: 7px; max-width: 100%; }
.bs-ie3-steps span { white-space: nowrap; }
.bs-ie3-trust { flex-wrap: wrap; white-space: normal; row-gap: 5px; max-width: 100%; }
.bs-ie3-trust b, .bs-ie3-trust i, .bs-ie3-trust .bs-ie3-stars { white-space: nowrap; }

/* page-scoped containment: nothing on 669 may widen the document */
body.page-id-669 #brx-content { overflow-x: clip; }
body.page-id-669 .bs-fp-phero { overflow-x: clip; }
body.page-id-669 .bs-fp-phero__inner,
body.page-id-669 .bs-ie3-proof,
body.page-id-669 .bs-ie3-value,
body.page-id-669 .bs-ie3-rev,
body.page-id-669 .bs-ie3-why { max-width: 100%; min-width: 0; }
body.page-id-669 .bs-ie3-rev__row,
body.page-id-669 .bs-ie3-why__row,
body.page-id-669 .bs-ie3-value__row { max-width: 100%; }
/* end wf-addendum:ie3-cro-fix1 */


/* ================================================================== */
/* wf-addendum:ie3-cro-hero (2026-08-03) — photo hero + install strip  */
/* Option G: Delta patio photo bottom-aligned behind the hero copy,    */
/* 7-photo swipeable strip of real installs (wired to the fp lightbox),*/
/* and the NSPI Pool of the Year 2025 Winner emphasis.                 */
/* ================================================================== */

body.page-id-669 .bs-fp-phero {
  background-color: #0A2547;
  background-image:
    linear-gradient(180deg, rgba(10,26,42,.60) 0%, rgba(10,26,42,.44) 45%, rgba(10,26,42,.82) 100%),
    url('/wp-content/uploads/2023/04/Delta-Patio-Installed-2-1024x576.jpeg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* award emphasis in the trust strip */
.bs-ie3-trust .bs-ie3-award b { color: #FFC94A; }
.bs-ie3-trust .bs-ie3-award { white-space: nowrap; }

/* installed-pools strip */
.bs-ie3-strip { display: flex; gap: 9px; overflow-x: auto; margin-top: 16px; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bs-ie3-strip::-webkit-scrollbar { display: none; }
.bs-ie3-strip a { flex: 0 0 auto; display: block; }
.bs-ie3-strip img { width: 132px; height: 88px; object-fit: cover; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.35); display: block; }
.bs-ie3-strip a:hover img { border-color: rgba(255,255,255,.75); }
.bs-ie3-striplabel { font-size: 10.5px; color: rgba(255,255,255,.75); margin-top: 7px; text-align: left; }

@media (min-width: 900px) {
  .bs-ie3-stripwrap { max-width: 1100px; margin-inline: auto; }
  .bs-ie3-strip img { width: 196px; height: 124px; }
  .bs-ie3-striplabel { text-align: center; }
}
/* end wf-addendum:ie3-cro-hero */


/* ================================================================== */
/* wf-addendum:ie3-cro-polish (2026-08-03) — Roger's refinement pass   */
/* Smaller prices, navy CTA, pool-count moved under the bar, chip      */
/* scroll affordance, review-scroller sizing.                          */
/* ================================================================== */

/* prices: label-sized but still bold */
body.page-id-669 .bs-fp-price__val { font-size: 13.5px; }

/* card CTA: header's navy Get-Quote treatment, white text */
body.page-id-669 .bs-fp-cta,
body.page-id-669 .brxe-button.bricks-button.bs-fp-cta {
  background: linear-gradient(160deg, var(--cosmo-navy), var(--cosmo-navy-deep)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(12,43,78,.35) !important;
}
body.page-id-669 .bs-fp-cta:hover,
body.page-id-669 .brxe-button.bricks-button.bs-fp-cta:hover {
  background: linear-gradient(160deg, #123A66, var(--cosmo-navy)) !important;
  box-shadow: 0 10px 26px rgba(12,43,78,.45) !important;
}

/* pool count: tiny note hanging under the bar, out of the row */
body.page-id-669 .bs-fbar { position: relative; }
body.page-id-669 .bs-fbar__spacer { display: none; }
body.page-id-669 .bs-fbar__count {
  position: absolute; right: 14px; bottom: -21px;
  font-size: 10.5px; font-weight: 600; color: var(--cosmo-muted-text);
  background: rgba(255,255,255,.94); padding: 2px 10px;
  border-radius: var(--cosmo-radius-pill); box-shadow: 0 4px 10px rgba(10,40,75,.10);
}

/* chip scroller: edge shadows say "there's more" (scrolling-shadows trick) */
body.page-id-669 .bs-ie3-scroll {
  background:
    linear-gradient(90deg, rgba(255,255,255,.95) 30%, rgba(255,255,255,0)) left / 26px 100% no-repeat local,
    linear-gradient(270deg, rgba(255,255,255,.95) 30%, rgba(255,255,255,0)) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10,40,75,.18), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,40,75,.18), transparent) right / 12px 100% no-repeat scroll;
}
/* pulsing chevron (injected by the loader; hides after first scroll / at end) */
.bs-ie3-more {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: var(--cosmo-navy); color: #fff; font-size: 15px; line-height: 21px;
  text-align: center; font-family: var(--cosmo-font-head); font-weight: 700;
  box-shadow: 0 4px 10px rgba(10,40,75,.30);
  animation: bsIe3Nudge 1.6s ease-in-out infinite;
  transition: opacity .25s;
}
.bs-ie3-more.hide { opacity: 0; animation: none; }
@keyframes bsIe3Nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(3px); }
}

/* review scroller: comfortable card width for a long row */
.bs-ie3-rev__row figure { flex: 0 0 300px; }
@media (max-width: 640px) { .bs-ie3-rev__row figure { flex-basis: 82%; } }
.bs-ie3-rev__head small { white-space: nowrap; }
/* end wf-addendum:ie3-cro-polish */
/* ================================================================== */
/* wf-addendum:ie3-cro-fix2 (2026-08-03) — chip overlap on small       */
/* phones. Two-part fix: (1) hard anti-shrink guards so chip groups    */
/* can never collapse onto each other; (2) drop the                    */
/* background-attachment:local scroll-shadow trick (known Chrome paint */
/* glitches on mobile/emulated renderers) — the fade affordance moves  */
/* onto the chevron badge, which the loader already hides after the    */
/* first scroll / at the end.                                          */
/* ================================================================== */

body.page-id-669 .bs-ie3-scroll .bs-fbar__group {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  flex-wrap: nowrap !important;
}
body.page-id-669 .bs-fbar .bs-chip {
  flex: 0 0 auto !important;
  position: static !important;
  transform: none !important;
}

/* kill the scrolling-shadows backgrounds from the polish block */
body.page-id-669 .bs-ie3-scroll { background: none !important; }

/* edge fade now travels with the chevron (both vanish together) */
.bs-ie3-more::before {
  content: ""; position: absolute; right: -6px; top: -15px; bottom: -15px;
  width: 58px; z-index: -1; pointer-events: none;
  background: linear-gradient(270deg, rgba(255,255,255,.95) 35%, rgba(255,255,255,0));
}

/* pool-count pill: solid background so it reads cleanly over content
   that scrolls beneath the pinned bar */
body.page-id-669 .bs-fbar__count { background: #fff; }
/* end wf-addendum:ie3-cro-fix2 */


/* wf-addendum:ie3-cro-av (2026-08-03) — photo avatars in the proof line */
.bs-ie3-avs img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--cosmo-bg); margin-left: -7px; display: inline-block; vertical-align: middle; }
.bs-ie3-avs img:first-child { margin-left: 0; }
/* end wf-addendum:ie3-cro-av */


/* wf-addendum:ie3-cro-av2 (2026-08-03) — single large proof avatar */
.bs-ie3-avs--one img { width: 44px !important; height: 44px !important; margin-left: 0 !important; }
/* end wf-addendum:ie3-cro-av2 */