/* ==========================================================================
   MR PURE WATER — default.html
   ==========================================================================
   Single stylesheet for the landing page. Organised as:

     1.  Base / reset / typography
     2.  Layout primitives          .container, .row
     3.  Utilities                  .is-hidden
     4.  Shared components          buttons, dividers, icons, media
     5.  Header + primary nav       .site-header, .contact-bar, .loc-tabs
     5d. Product dropdowns          .nav-submenu (PURE WATER / SOFT WATER)
     6.  Hero                       .hero
     7.  Offer headline + showcase  .offer-headline, .offer-showcase
     8.  Price strip                .price-strip
     9.  Offer                      .offer, .offer-feature
     10. Contaminants               .contaminants, .contaminant
     11. Benefits                   .benefits, .benefit
     12. Market support             .market-support, .shower-benefit
     13. Book banner                .book-banner
     14. Testimonials               .testimonials
     15. Filtration                 .wf and its sub-blocks
     16. Quality                    .quality-section
     17. Benefits slider            .benefits-slider, .benefit-card
     18. Contact CTA + lead form    .contact-cta, .lead-form
     19. Footer                     .site-footer
     19a. Footer nav variant        .site-footer__grid--nav, .site-footer__legal
     20. Submit toast               .submit-toast
     21. Visibility utilities      .u-* (last, so they win)

   Naming: BEM (block__element--modifier). Framework class names supplied by
   Bootstrap 4 (.container, .row, .col-*, .navbar*, .nav-*, .collapse) and
   Swiper (.swiper*) are left untouched and are the only non-BEM names here.

   Background images that live on the CDN are injected as custom properties
   from default.html (:root --img-*), because their URLs are built from the
   {{var.cdnUrl}} template variable and cannot be written in this file.

   Breakpoints used, smallest to largest:
     575  767  768  991  992  1199  1200  1376
   ========================================================================== */


/* ==========================================================================
   1. BASE / RESET / TYPOGRAPHY
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* NOTE: the default text colour is white. Any component on a light
     background must set its own colour explicitly. */
  color: #fff;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

p {
  font-family: 'Inter', sans-serif;
}

a:hover {
  text-decoration: none;
}

/* Telephone links render as plain white text everywhere they appear. */
a[href^="tel"],
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover,
a[href^="tel"]:active {
  color: #fff !important;
  text-decoration: none !important;
}

::placeholder {
  color: #2973ab;
  opacity: 1; /* Firefox dims placeholders by default */
}


/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

/* Overrides Bootstrap's .container widths. Declared once, here. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .container { max-width: 800px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1340px; }
}

/* Three elements are both a section and a .container (.contact-cta,
   .site-footer__grid, .benefits-slider__swiper). Each declares its own
   padding at every breakpoint, in its own section below. */

/* Bootstrap rows are vertically centred site-wide. */
.row {
  align-items: center;
}


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* Wins over any explicit display, including grid/flex children. */
.is-hidden { display: none !important; }

/* Responsive visibility utilities live at the very end of this file
   (section 21) so they always beat component display values. */


/* ==========================================================================
   4. SHARED COMPONENTS
   ========================================================================== */

/* --- Decorative rules ---------------------------------------------------- */

/* The thin flourish image used under several section headings. Full width
   only once the layout stacks. */
@media (max-width: 768px) {
  .divider-line { width: 100%; }
}

.heading-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.heading-divider__img {
  width: 300px;
}

/* Full-bleed image used as a band between two sections. */
.section-band {
  width: 100%;
}

/* --- Button text --------------------------------------------------------- */

.btn-text {
  color: #fff;
}

.btn-text--strong {
  font-weight: 800;
}

@media (max-width: 767px) {
  .btn-text { font-size: 12px; }
}

/* --- Arrow glyph carried by several buttons ------------------------------ */

.arrow-image {
  width: 30px;
  margin-left: 10px;
}

.eleks-swap-btn .arrow-image {
  margin-left: 5px;
}

@media (max-width: 991px) {
  .arrow-image { width: 35px; height: auto; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .arrow-image { width: 9px; }
}

/* --- Primary pill button (header + floating call) ------------------------ */

.eleks-swap-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 7px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50px;
  background: linear-gradient(90deg, #022468, #044ca9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .15);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (max-width: 768px) {
  .eleks-swap-btn {
    width: 200px;
    height: 50px;
    padding: 5px 20px;
  }
  .eleks-swap-btn .btn-text { font-size: 12px; }
}

/* --- Hero pill button ---------------------------------------------------- */

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 7px 20px;
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(90deg, #0398ea, #11aeb1);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .15);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (max-width: 767px) {
  .cta-btn { font-size: 12px; }
}

/* --- "Call us now" button ------------------------------------------------ */

.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding: 18px 36px;
  border-radius: 50px;
  background: linear-gradient(90deg, #3dc8c7, #108ee8);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.call-btn:hover {
  color: #fff;
}

/* The showcase copy is replaced by artwork on small screens. */
@media (max-width: 768px) {
  .call-btn--showcase { display: none; }
}

@media (max-width: 991px) {
  .call-btn {
    padding: 12px 30px;
    font-size: 14px;
  }
}

/* --- Floating click-to-call (mobile only) -------------------------------- */

.floating-btn {
  position: fixed;
  bottom: 25px;
  left: 20px;
  z-index: 99;
  width: auto !important;
  font-weight: bold;
}

@media (min-width: 768px) {
  .floating-btn { display: none !important; }
}

/* --- "Download our full catalog" CTA ------------------------------------- */

.catalog-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid #0553b5;
  border-radius: 50px;
  background: transparent;
  color: #0553b5;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.catalog-cta:hover,
.catalog-cta:focus {
  background: #0553b5;
  color: #fff;
  text-decoration: none;
}

.catalog-cta:focus-visible {
  outline: 3px solid #0aa2b3;
  outline-offset: 3px;
}

.catalog-cta__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On photo / gradient / dark backgrounds. */
.catalog-cta--light {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.catalog-cta--light:hover,
.catalog-cta--light:focus {
  background: #fff;
  color: #0553b5;
}

.catalog-cta--sm    { padding: 11px 20px; font-size: 13px; }
.catalog-cta--block { display: flex; width: 100%; }

/* Per-placement spacing. */
.catalog-cta--hero       { margin-top: 24px; }
.catalog-cta--offer      { margin: 40px 0 0 14px; }
.catalog-cta--filtration { margin-top: 12px; }
.catalog-cta--contact    { margin-top: 22px; }

/* Scoped to #navbarNav so it beats the drawer's own margin rule below 768px,
   which is also ID-scoped. */
#navbarNav .catalog-cta--nav { margin-top: 10px; }

@media (max-width: 991px) {
  .catalog-cta--offer { margin-left: 0; margin-top: 16px; }
}

@media (max-width: 767px) {
  .catalog-cta { padding: 12px 20px; font-size: 13px; }
}

/* --- Circular icon badge (shower benefits + benefit cards) --------------- */

.circle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  min-width: 72px;
  height: 78px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  background: #18a8da;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.circle-icon img {
  display: block;
  width: 78px;
  height: 78px;
  border-radius: 100%;
  object-fit: contain;
}

.circle-icon svg {
  display: block;
  width: 38px;
  height: 38px;
}

/* Card variant overlaps the image above it. */
.circle-icon--card {
  margin: 0 auto;
  margin-top: -39px;
}

@media (max-width: 767px) {
  .circle-icon { min-width: 70px; }
  .circle-icon img { width: 32px; height: 32px; }
}

/* --- Benefit copy block (shower benefits + benefit cards) ---------------- */

.benefit-copy {
  flex: 1 1 50%;
  padding: 14px 16px 20px;
}

.benefit-copy__title {
  margin: 0 0 10px;
  color: #111;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.benefit-copy__text {
  max-width: 520px;
  margin: 0;
  color: #555;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .benefit-copy__title { font-size: 16px; }
  .benefit-copy__text  { font-size: 14px; }
}

/* --- Video frame --------------------------------------------------------- */

.video-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.video-box video {
  display: block;
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 991px) {
  .video-box { margin-top: 20px; }
}

/* ==========================================================================
   5. HEADER + PRIMARY NAV
   ==========================================================================
   Layout is a single flex bar: logo left, everything else right. The right
   cluster stacks the contact bar above the nav row.

   Below 768px the Bootstrap collapse target becomes an off-canvas drawer,
   driven by .is-open from the nav script.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 1000; /* dropdowns + drawer paint above all page content */
  color: #fff;
}

@media (min-width: 992px) {
  .site-header {
    position: sticky;
    top: 0;
    background: #fff;
  }
}

.site-header__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
}

.site-header__logo {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  width: auto;
  max-width: 190px;
  height: auto;
}

@media (min-width: 992px) {
  .site-header__logo { height: 140px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-header__logo img { max-width: 150px; }
}

@media (max-width: 767px) {
  .site-header__logo img { max-width: 140px; }
}

/* Right cluster: contact bar stacked above the nav row, right-aligned. */
.site-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 767px) {
  .site-header__right {
    flex: 0 0 auto;
    margin-top: 34px;
  }
}

/* Nav + CTA sit side by side. */
.site-header__nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header__nav-row .navbar {
  padding: 0;
}

@media (max-width: 768px) {
  .site-header__nav-row { margin-left: 10px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-header__nav-row .navbar { padding: .5rem .1rem; }
}

/* Only width band where the navbar is nudged off the logo. */
@media (min-width: 601px) and (max-width: 767px) {
  .site-header__nav-row .navbar { margin-left: 20px; }
}

/* Keep the bar horizontal below the nav breakpoint too. */
@media (max-width: 1199px) {
  .navbar-expand-xl {
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
  }
}

/* --- Menu items ---------------------------------------------------------- */

.site-header .navbar-nav {
  gap: 10px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-header .navbar-nav { gap: 0; }
}

.site-header .navbar-nav .nav-item {
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
  color: #fff;
  text-align: center;
}

/* Specificity of 3 classes beats Bootstrap's .navbar-light .navbar-nav
   .nav-link, so no !important is needed here. */
.site-header .navbar-nav .nav-link {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .site-header .navbar-nav .nav-link { font-size: 12px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-header .navbar-nav .nav-link {
    padding-right: .2rem;
    font-size: 10px;
  }
}

/* --- Hamburger ----------------------------------------------------------- */

.navbar-toggler {
  padding: .1rem .3rem;
}

@media (max-width: 991px) {
  .navbar-toggler { background: #fff; }
}

/* Hamburger owns the whole drawer range (see the NAV BREAKPOINT note in 5d). */
@media (max-width: 1199px) {
  .site-header__nav-row .navbar-toggler {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(0, 29, 70, .15);
    border-radius: 6px;
    background: #fff;
  }
}


/* ==========================================================================
   5a. CONTACT BAR (phone + email above the nav)
   ========================================================================== */

.contact-bar {
  background: linear-gradient(90deg, #1e8fd5, #17b6b2);
}

.contact-bar--desktop {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  padding: 5px 30px;
  border-radius: 0 0 8px 10px;
}

.contact-bar--mobile {
  padding: 8px 15px;
  border-radius: 0 0 10px 10px;
}

.contact-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.contact-bar__item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .contact-bar--mobile {
    padding: 10px;
    border-radius: 0;
  }
  .contact-bar__item { font-size: 13px; }
}


/* ==========================================================================
   5b. LOCATIONS MEGA-MENU (.loc-tabs)
   ==========================================================================
   Desktop: 760px flyout, left rail of counties + right panel of cities.
   Mobile:  accordion inside the drawer, tab/panel pairs re-ordered with
            display:contents.
   ========================================================================== */

.navbar-nav li.nav-item.has-loc-tabs {
  position: relative;
}

.navbar-nav li.nav-item.has-loc-tabs > .loc-tabs__toggle::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-top: -2px;
  margin-left: 7px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  transition: transform .2s ease;
}

.navbar-nav li.nav-item.has-loc-tabs:hover > .loc-tabs__toggle::after,
.navbar-nav li.nav-item.has-loc-tabs.is-open > .loc-tabs__toggle::after {
  transform: rotate(180deg);
}

/* --- Panel container ----------------------------------------------------- */

.navbar-nav .loc-tabs {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  width: 760px;
  min-height: 380px;
  padding: 0;
  float: none;
  border: 1px solid rgba(0, 29, 70, .10);
  border-top: 3px solid #044fb5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 29, 70, .18);
  font-family: 'Poppins', sans-serif;
}

.navbar-nav li.nav-item.has-loc-tabs:hover > .loc-tabs,
.navbar-nav li.nav-item.has-loc-tabs:focus-within > .loc-tabs,
.navbar-nav li.nav-item.has-loc-tabs.is-open > .loc-tabs {
  display: block;
}

/* --- Left rail (county tabs) --------------------------------------------- */

.navbar-nav .loc-tabs__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  padding: 14px 0;
  border-right: 1px solid rgba(0, 29, 70, .08);
  border-radius: 0 0 0 8px;
  background: #fafbfd;
  /* .nav-item centres its text; the menu contents are left-aligned. */
  text-align: left;
}

/* Each tab is an <a>; cancel the site's anchor float + padding. */
.navbar-nav .loc-tabs__nav > a.loc-tabs__tab {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 13px 18px 13px 22px !important;
  margin: 0 !important;
  float: none !important;
  border-left: 3px solid transparent;
  background: transparent !important;
  color: #001d46 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.navbar-nav .loc-tabs__nav > a.loc-tabs__tab:hover {
  background: rgba(4, 79, 181, .05) !important;
  color: #001d46 !important;
}

.navbar-nav .loc-tabs__nav > a.loc-tabs__tab.is-active {
  border-left-color: #ee7325;
  background: #fff !important;
  color: #ee7325 !important;
}

.navbar-nav .loc-tabs__tab .loc-tabs__tab-label {
  flex: 1 1 auto;
}

.navbar-nav .loc-tabs__tab .loc-tabs__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

.navbar-nav .loc-tabs__tab.is-active .loc-tabs__chevron {
  opacity: 1;
}

/* --- Right panel (city lists) -------------------------------------------- */

.navbar-nav .loc-tabs__panels {
  position: relative;
  min-height: 380px;
  margin-left: 240px;
}

.navbar-nav .loc-tabs__panel {
  display: none;
  padding: 22px 26px 24px;
  text-align: left;
}

.navbar-nav .loc-tabs__panel.is-active {
  display: block;
}

.navbar-nav .loc-tabs__cities {
  column-count: 2;
  column-gap: 22px;
}

.navbar-nav a.loc-tabs__city {
  display: block !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  float: none !important;
  background: transparent !important;
  color: #001d46 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.navbar-nav a.loc-tabs__city:hover,
.navbar-nav a.loc-tabs__city:focus {
  color: #ee7325 !important;
}

/* --- Drawer range: accordion inside the drawer --------------------------- */

@media (max-width: 1199px) {
  .navbar-nav li.nav-item.has-loc-tabs > .loc-tabs__toggle::after { display: none; }

  .navbar-nav .loc-tabs {
    display: none;
    position: static;
    flex-direction: column;
    width: auto;
    min-height: 0;
    margin: 4px 0 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Hover is unreliable on touch, so require .is-open. */
  .navbar-nav li.nav-item.has-loc-tabs:hover > .loc-tabs,
  .navbar-nav li.nav-item.has-loc-tabs:focus-within > .loc-tabs {
    display: none;
  }
  .navbar-nav li.nav-item.has-loc-tabs.is-open > .loc-tabs {
    display: flex;
  }

  /* display:contents lifts tabs and panels into the .loc-tabs flex context
     so they can be ordered tab -> panel -> tab -> panel. */
  .navbar-nav .loc-tabs__nav,
  .navbar-nav .loc-tabs__panels { display: contents; }

  .navbar-nav .loc-tabs__nav    > .loc-tabs__tab:nth-child(1)   { order: 1; }
  .navbar-nav .loc-tabs__panels > .loc-tabs__panel:nth-child(1) { order: 2; }
  .navbar-nav .loc-tabs__nav    > .loc-tabs__tab:nth-child(2)   { order: 3; }
  .navbar-nav .loc-tabs__panels > .loc-tabs__panel:nth-child(2) { order: 4; }
  .navbar-nav .loc-tabs__nav    > .loc-tabs__tab:nth-child(3)   { order: 5; }
  .navbar-nav .loc-tabs__panels > .loc-tabs__panel:nth-child(3) { order: 6; }

  .navbar-nav .loc-tabs__nav > a.loc-tabs__tab {
    padding: 14px 14px 14px 18px !important;
    border-bottom: 1px solid rgba(0, 29, 70, .08);
    font-size: 15px;
  }

  .navbar-nav .loc-tabs__tab .loc-tabs__chevron { opacity: 1; }
  .navbar-nav .loc-tabs__tab.is-active .loc-tabs__chevron { transform: rotate(90deg); }

  .navbar-nav .loc-tabs__panel {
    display: block !important;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: rgba(4, 79, 181, .03);
    opacity: 0;
    transition: max-height .35s ease, padding .25s ease, opacity .2s ease;
  }
  .navbar-nav .loc-tabs__panel.is-active {
    max-height: 1500px;
    padding: 12px 16px 16px 28px;
    opacity: 1;
  }

  .navbar-nav .loc-tabs__cities { column-count: 1; }
  .navbar-nav a.loc-tabs__city  { padding: 9px 0 !important; font-size: 14px; }
}


/* ==========================================================================
   5c. OFF-CANVAS DRAWER
   ==========================================================================
   Active below 1200px — see the NAV BREAKPOINT note in 5d.
   ========================================================================== */

/* Drawer-only chrome is hidden on desktop. */
#navbarNav .nav-sidebar__head,
#navbarNav .nav-sidebar__cta {
  display: none;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  border: 0;
  background: rgba(0, 20, 45, .5);
}

.nav-overlay[hidden] {
  display: none;
}

body.nav-open {
  overflow: hidden;
}

/* Below 768px the header has no room for the pill, so it moves into the
   drawer. Between 768 and 1199 the header keeps it and the drawer's copy is
   suppressed (see 5d) — otherwise both would show. */
@media (max-width: 767px) {
  .site-header__cta { display: none !important; }
}

@media (max-width: 1199px) {
  #navbarNav.navbar-collapse {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1100;
    width: 86%;
    max-width: 340px;
    height: 100%;
    padding: 0 0 24px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: -16px 0 40px rgba(0, 29, 70, .18);
    transform: translateX(100%); /* parked off-canvas */
    transition: transform .3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #navbarNav.navbar-collapse.is-open {
    transform: translateX(0);
  }

  .nav-sidebar__head {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 29, 70, .08);
  }

  .nav-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #001d46;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  #navbarNav .navbar-nav {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 6px 0;
    margin: 0;
  }

  #navbarNav .navbar-nav > li.nav-item {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 29, 70, .06);
  }

  #navbarNav .navbar-nav > li.nav-item > a.nav-link,
  #navbarNav .navbar-nav > li.nav-item > a.loc-tabs__toggle {
    display: block;
    padding: 14px 20px !important;
    color: #001d46 !important;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }

  #navbarNav .nav-sidebar__cta {
    display: inline-flex !important;
    align-self: flex-start;
    margin: 18px 20px 0;
  }
}


/* ==========================================================================
   5d. PRODUCT DROPDOWNS (.nav-submenu)
   ==========================================================================
   The PURE WATER and SOFT WATER menus. A plain one-level flyout, unlike
   the two-level .loc-tabs mega-menu, but it borrows its visual language:
   3px #044fb5 top rule, white card, orange (#ee7325) active state.

   The toggles are <button class="nav-link">, not <a href>, because the
   drawer script closes the off-canvas menu on any `a[href]` click inside
   #navbarNav — an anchor toggle would close the drawer instead of opening
   the submenu.
   ========================================================================== */

/* ==========================================================================
   NAV BREAKPOINT — 1200px, not Bootstrap's 768px
   ==========================================================================
   The bar carries 8 top-level items now, not 5. Measured at the widest
   desktop scale it needs roughly:

     logo 190 + nav 830 + gap 16 + SCHEDULE INSTALL 205  =  ~1241px

   .container caps out at 1340 (1300 of content) from 1340px up, but only
   offers 1160 at a 1200px viewport. So the horizontal bar cannot fit much
   below 1200, and even there it only fits at a reduced scale. Everything
   under 1200 uses the off-canvas drawer instead, which is why 5b, 5c and
   the accordion block below all key off `max-width: 1199px`, and why the
   markup says `navbar-expand-xl` rather than `navbar-expand-md`.

   Two scale bands above the breakpoint:
     1200-1339  container is viewport-bound (1145-1284) -> compact
     1340+      container pinned at 1300 of content      -> comfortable

   Measured slack at each band's tightest point: 62px at 1200, 83px at
   1340. Both clear comfortably.

   NOTE: the `.u-hidden-mobile` / `.u-hidden-desktop` pairs stay on 768,
   because they pick the phone vs. desktop CATALOG flipbook edition — a
   device question, not a nav-layout one. Exactly one of each pair is
   visible inside the drawer at any width; see the guards at the end of 5d.
   ========================================================================== */

.site-header .navbar-nav--main .nav-link { white-space: nowrap; }

/* 1340+ : container pinned at 1300px of content. */
@media (min-width: 1340px) {
  .site-header .navbar-nav--main { gap: 6px; }
  .site-header .navbar-nav--main .nav-link { font-size: 13px; }
}

/* 1200-1339 : container is viewport-bound and tightest at 1200. Trim the
   type, the gap and the logo so the row still clears at that width. */
@media (min-width: 1200px) and (max-width: 1339px) {
  .site-header .navbar-nav--main { gap: 2px; }
  .site-header .navbar-nav--main .nav-link {
    padding-right: .35rem;
    padding-left: .35rem;
    font-size: 12px;
  }
  .site-header__logo img { max-width: 150px; }
}

/* --- SCHEDULE INSTALL pill ----------------------------------------------- */
/* It is a flex item next to the nav; without these it gets squeezed and the
   label breaks onto a second line inside a fixed 48px-tall pill. */

.site-header__cta {
  flex: 0 0 auto;
}

.site-header__cta .btn-text {
  white-space: nowrap;
}

/* --- Toggle -------------------------------------------------------------- */

.navbar-nav li.nav-item.has-submenu {
  position: relative;
}

/* A <button> inherits none of the anchor styling, so reset it to match. */
.site-header .navbar-nav .nav-submenu__toggle {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  line-height: inherit;
  cursor: pointer;
}

/* Same caret as .loc-tabs__toggle. */
.navbar-nav li.nav-item.has-submenu > .nav-submenu__toggle::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-top: -2px;
  margin-left: 7px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  transition: transform .2s ease;
}

.navbar-nav li.nav-item.has-submenu:hover > .nav-submenu__toggle::after,
.navbar-nav li.nav-item.has-submenu.is-open > .nav-submenu__toggle::after {
  transform: rotate(180deg);
}

/* --- Flyout -------------------------------------------------------------- */

.navbar-nav .nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1000;
  min-width: 280px;
  padding: 8px 0;
  margin: 0;
  border: 1px solid rgba(0, 29, 70, .10);
  border-top: 3px solid #044fb5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 29, 70, .18);
  font-family: 'Poppins', sans-serif;
  /* .nav-item centres its text; the menu contents are left-aligned. */
  text-align: left;
  list-style: none;
  transform: translateX(-50%);
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-submenu { min-width: 210px; }
}

.navbar-nav li.nav-item.has-submenu:hover > .nav-submenu,
.navbar-nav li.nav-item.has-submenu:focus-within > .nav-submenu,
.navbar-nav li.nav-item.has-submenu.is-open > .nav-submenu {
  display: block;
}

.navbar-nav .nav-submenu__item {
  margin: 0;
  list-style: none;
}

/* Cancel the site's global anchor float + padding, as .loc-tabs__city does. */
.navbar-nav a.nav-submenu__link {
  display: block !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  float: none !important;
  border-left: 3px solid transparent;
  background: transparent !important;
  color: #001d46 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.navbar-nav a.nav-submenu__link:hover,
.navbar-nav a.nav-submenu__link:focus {
  border-left-color: #ee7325;
  background: rgba(4, 79, 181, .05) !important;
  color: #ee7325 !important;
}

/* --- Drawer range: accordion inside the drawer --------------------------- */

@media (max-width: 1199px) {
  /* Match the drawer's `#navbarNav ... > a.nav-link` row exactly; the ID
     prefix is needed to reach that rule's specificity. */
  #navbarNav .navbar-nav > li.nav-item > button.nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px !important;
    border: 0;
    background: none;
    color: #001d46 !important;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  /* Caret parks at the right edge of the row and points down/right. */
  .navbar-nav li.nav-item.has-submenu > .nav-submenu__toggle::after {
    margin-top: 0;
    margin-left: auto;
  }

  #navbarNav .nav-submenu {
    display: none;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(4, 79, 181, .03);
    box-shadow: none;
    transform: none;
  }

  /* Hover is unreliable on touch, so require .is-open. */
  .navbar-nav li.nav-item.has-submenu:hover > .nav-submenu,
  .navbar-nav li.nav-item.has-submenu:focus-within > .nav-submenu {
    display: none;
  }
  #navbarNav li.nav-item.has-submenu.is-open > .nav-submenu {
    display: block;
  }

  #navbarNav a.nav-submenu__link {
    padding: 12px 16px 12px 34px !important;
    border-bottom: 1px solid rgba(0, 29, 70, .06);
    font-size: 14px;
  }
}

/* --- Buttons stacked at the foot of the drawer --------------------------- */

@media (max-width: 1199px) {
  /* 5c sets `align-self: flex-start` and .catalog-cta--block sets
     `width: 100%`. Together those resolve to the drawer's full 340px content
     box, and the 20px side margins then push the button 40px past the panel
     edge. Stretching to the line instead sizes it to (content box - margins). */
  #navbarNav .nav-sidebar__cta {
    align-self: stretch;
    width: auto;
  }

  /* Long label, narrow panel: let it wrap rather than overflow. */
  #navbarNav .catalog-cta--nav {
    height: auto;
    min-height: 44px;
    text-align: center;
    white-space: normal;
  }
}

/* The header keeps its own SCHEDULE INSTALL from 768 up, so the drawer's
   copy would be a duplicate in that band. Below 768 the header hides its
   pill and the drawer's copy is the only one. */
@media (min-width: 768px) and (max-width: 1199px) {
  #navbarNav .nav-sidebar__cta.eleks-swap-btn { display: none !important; }
}

/* --- Breakpoint-swapped elements inside the drawer ----------------------- */
/* The 5c drawer rules are ID-scoped, so they outrank the plain-class
   .u-hidden-* utilities in section 21 regardless of source order. That is
   why the mobile menu showed BOTH catalog flipbook links and BOTH
   "DOWNLOAD OUR FULL CATALOG" buttons at once. Re-state the utilities at
   ID specificity so exactly one of each pair survives. These stay on 768:
   they choose the phone vs. desktop flipbook edition, not the nav layout. */

@media (max-width: 767px) { #navbarNav .u-hidden-mobile  { display: none !important; } }
@media (min-width: 768px) { #navbarNav .u-hidden-desktop { display: none !important; } }


/* ==========================================================================
   6. HERO
   ==========================================================================
   Stacking order: video (1) -> gradient overlay (2) -> copy (3).
   Below 768px the video and overlay drop to 0 and the overlay goes
   translucent so the artwork reads through.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 900px;
  margin-top: -40px;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Poster shows until the video paints, and if it never loads. */
  background-image: var(--img-hero-poster);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(12, 55, 135, .95) 0%,
    rgba(12, 55, 135, .90) 25%,
    rgba(12, 55, 135, .75) 40%,
    rgba(12, 55, 135, .40) 52%,
    rgba(12, 55, 135, .10) 62%,
    rgba(12, 55, 135, 0)  70%);
}

.hero__content {
  position: relative;
  z-index: 3;
}

.hero__title {
  color: #fff;
  font-size: 50px;
  font-weight: 400;
}

.hero__subtitle {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
}

.hero__eyebrow {
  margin-top: 20px !important;
  color: #1abdff;
  font-size: 20px;
  font-weight: 500;
}

.hero__text {
  max-width: 90%;
  color: #fff;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 1rem !important;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero__phone {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__phone-icon {
  width: 45px;
}

.hero__badges {
  width: 100%;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .hero {
    z-index: 0;
    min-height: 570px;
    padding: 0 0 60px;
    text-align: center;
    /* Last-resort artwork if neither the video nor its poster paints. */
    background: url('images/home/banner.png');
  }

  .hero__video { z-index: 0; background-image: var(--img-hero-poster-mobile); }

  .hero__overlay {
    z-index: 0;
    opacity: .85;
    background: linear-gradient(180deg,
      rgba(12, 55, 135, .85) 0%,
      rgb(12 55 135 / 72%) 45%,
      rgb(12 55 255 / 54%) 100%);
  }

  /* margin:0 also cancels Bootstrap's h1{margin-bottom:.5rem}, which the
     `*` reset does not outrank. */
  .hero__title { margin: 0; }

  .hero__title,
  .hero__subtitle { font-size: 40px; }

  .hero__text {
    max-width: 100%;
    font-size: 16px;
  }

  .hero__actions { display: none !important; }

  .hero .row { text-align: left; }
}


/* ==========================================================================
   7. OFFER HEADLINE + SHOWCASE
   ========================================================================== */

.offer-headline {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: -48px;
  padding: 18px 70px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #0e8090 0%, #14a9bb 55%, #34c1c6 100%);
  color: #fff;
  text-align: center;
}

.offer-headline__text {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.offer-headline__text--mobile {
  display: none;
}


.offer-showcase {
  position: relative;
  z-index: 10;
  margin: auto;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: var(--img-showcase);
  background-repeat: no-repeat;
  background-size: cover;
}

.offer-showcase__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 540px;
  padding: 0 70px;
}

/* Empty column: reserves the left half for the background artwork. */
.offer-showcase__media {
  flex: 1;
}

.offer-showcase__body {
  flex: 1;
  max-width: 520px;
}

.offer-showcase__title {
  margin: 0 0 25px !important;
  color: #0454b8;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.offer-showcase__title span {
  color: #14a9bb;
}

.offer-showcase__price-card {
  width: 430px;
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .offer-headline { padding: 14px 20px; }

  .offer-headline__text          { display: none; }
  .offer-headline__text--mobile  { display: block; font-size: 24px; }

  .offer-showcase {
    background: var(--img-showcase-mobile);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .offer-showcase__content {
    flex-direction: column;
    min-height: 700px;
    padding: 40px 0;
    text-align: center;
  }

  .offer-showcase__media { display: none; }

  .offer-showcase__title { font-size: 22px; }

  .offer-showcase__price-card { width: 100%; }
  .offer-showcase__price-card img { width: 90%; }
}


/* ==========================================================================
   8. PRICE STRIP
   ========================================================================== */

.price-strip {
  display: flex;
  width: 100%;
  min-height: 95px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.price-strip__regular {
  position: relative;
  flex: 0 0 43%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 40px;
  background: #03236f;
  color: #fff;
}

/* Arrow notch pointing into the promo half. */
.price-strip__regular::after {
  content: '';
  position: absolute;
  top: 0;
  right: -40px;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 55px solid transparent;
  border-bottom: 52px solid transparent;
  border-left: 40px solid #03236f;
}

.price-strip__promo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 40px 20px 60px;
  background: #0aa2b3;
  color: #fff;
}

.price-strip__label {
  font-size: 30px;
  font-weight: 500;
}

.price-strip__was {
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

.price-strip__now {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.price-strip__installed {
  font-size: 30px;
  font-weight: 500;
}

.price-strip__installed--sale {
  font-size: 42px;
  font-weight: 800;
}

@media (max-width: 991px) {
  .price-strip { flex-direction: column; }

  .price-strip__regular,
  .price-strip__promo {
    width: 100%;
    gap: 4px;
    padding: 20px;
    flex-wrap: wrap;
    text-align: center;
  }

  .price-strip__regular::after { display: none; }

  .price-strip__label,
  .price-strip__installed { font-size: 24px; }

  .price-strip__was,
  .price-strip__now { font-size: 36px; }

  .price-strip__installed--sale { font-size: 36px; }
}


/* ==========================================================================
   9. OFFER (features + video)
   ========================================================================== */

.offer {
  padding: 80px 0 0;
  background: #fff;
}

.offer__heading {
  margin-bottom: 60px;
  text-align: center;
}

.offer__title {
  margin: 0;
  color: #0454b8;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.offer__title span {
  display: block;
  color: #12a7b8;
}

.offer__price {
  margin-top: 10px;
  color: #f29d1c;
  font-size: 40px;
  font-weight: 800;
}

.offer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.offer__features-title {
  margin-bottom: 40px;
  color: #111;
  font-size: 24px;
  font-weight: 600;
}

.offer__feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px 30px;
}

.offer-feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.offer-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.offer-feature__icon img {
  width: 80px;
}

.offer-feature__title {
  margin: 0 0 6px;
  color: #101827;
  font-size: 16px;
  font-weight: 800;
}

.offer-feature__text {
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .offer__grid         { grid-template-columns: 1fr; }
  .offer__feature-grid { grid-template-columns: 1fr; }
  .offer__title        { font-size: 30px; }
  .offer__features-title { font-size: 20px; }
}

/* ==========================================================================
   10. CONTAMINANTS ("what's hiding in your water")
   ==========================================================================
   Three columns on wide screens: list | artwork | list. Below 1200px it
   collapses to one column and the artwork moves to the top.
   ========================================================================== */

.contaminants {
  padding: 80px 20px;
  background: #fff;
}

.contaminants__heading {
  margin-bottom: 60px;
  text-align: center;
}

.contaminants__title {
  margin: 0 0 15px;
  color: #0553b5;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
}

.contaminants__title span {
  color: #0aa2b3;
}

.contaminants__intro {
  color: #222;
  font-size: 22px;
}

.contaminants__grid {
  display: grid;
  grid-template-columns: 1fr 520px 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1400px;
  margin: auto;
}

.contaminants__list {
  display: flex;
  flex-direction: column;
}

.contaminants__figure img {
  display: block;
  width: 100%;
}

.contaminant {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid #d8d8d8;
}

.contaminant__body {
  text-align: right;
}

.contaminant__name {
  margin: 0 0 8px;
  color: #000;
  font-size: 20px;
  font-weight: 800;
}

.contaminant__desc {
  margin: 0;
  color: #000;
  font-size: 17px;
}

.contaminant__icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Right-hand column reads icon-first, text left-aligned. */
.contaminants__list--right .contaminant       { justify-content: flex-start; }
.contaminants__list--right .contaminant__body { text-align: left; }

@media (max-width: 1200px) {
  .contaminants__grid   { grid-template-columns: 1fr; }
  .contaminants__figure { order: -1; }
  .contaminants__title  { font-size: 30px; }

  .contaminant       { justify-content: center; }
  .contaminant__body { text-align: left; }

  /* Stacked, both columns read icon-first. */
  .contaminants__list--left .contaminant {
    flex-direction: row-reverse;
    justify-content: left;
  }
}


/* ==========================================================================
   11. BENEFITS ("pure drinking water at every tap")
   ==========================================================================
   Two columns of benefits flanking a centred logo. The first and last item
   of each column are pushed outwards to suggest a ring.
   ========================================================================== */

.benefits {
  padding: 100px 20px;
  background: var(--img-benefits-bg);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.benefits__title {
  margin: 0 0 20px;
  color: #fff;
  font-size: 60px;
  font-weight: 700;
}

.benefits__intro {
  max-width: 760px;
  margin: 25px auto 70px;
  color: #fff;
  font-size: 25px;
  line-height: 1.6;
}

.benefits__ring {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  min-height: 420px;
}

.benefits__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  max-width: 360px;
}

.benefits__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefits__logo img {
  width: 100%;
  max-width: 320px;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #1c4a33;
  font-weight: 600;
}

.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
}

.benefit__icon img {
  width: 80px;
}

.benefit__icon--green { background: #124c2c; }
.benefit__icon--gold  { background: #b49336; }

.benefit__title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.benefit__text {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.benefits__column--right .benefit__title,
.benefits__column--right .benefit__text {
  text-align: left;
}

.benefits__column--left .benefit {
  flex-direction: row-reverse;
  text-align: right;
}

.benefits__column--left .benefit__title,
.benefits__column--left .benefit__text {
  text-align: right;
}

@media (min-width: 769px) {
  .benefits__column--left  > .benefit:first-child,
  .benefits__column--left  > .benefit:last-child  { transform: translateX(50px); }

  .benefits__column--right > .benefit:first-child,
  .benefits__column--right > .benefit:last-child  { transform: translateX(-50px); }
}

@media (max-width: 768px) {
  .benefits__title { font-size: 30px; }

  .benefits__ring {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    height: auto;
    gap: 30px;
  }

  .benefits__column {
    width: 100%;
    max-width: 100%;
    gap: 30px;
  }

  .benefits__logo {
    order: -1;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }

  .benefit { padding-left: 0; }

  .benefits__column--left .benefit {
    flex-direction: row;
    text-align: left;
  }

  .benefits__column--left .benefit__title,
  .benefits__column--left .benefit__text {
    text-align: left;
  }

  .benefit__title { font-size: 16px; }
  .benefits__column--left .benefit__title,
  .benefits__column--left .benefit__text { font-size: 16px; }
}


/* ==========================================================================
   12. MARKET SUPPORT ("better water for showers & baths")
   ========================================================================== */

.market-support {
  padding: 100px 20px;
  background: #fafafa;
}

.market-support__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.market-support__map {
  position: relative;
}

.market-support__map-img {
  width: 100%;
}

.market-support__title {
  color: #0553b5;
  font-size: 50px;
  font-weight: 700;
}

.market-support__title span {
  color: #0aa2b3;
}

.shower-benefits {
  width: 100%;
  max-width: 900px;
}

.shower-benefit {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 34px 0;
  border-bottom: 1px solid #d4d4d4;
}

.shower-benefit--last {
  border-bottom: none;
}

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

@media (max-width: 768px) {
  .market-support { padding: 50px 20px; }

  .market-support__title {
    margin-top: 10px;
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .shower-benefit { gap: 18px; padding: 24px 0; }
}


/* ==========================================================================
   13. BOOK BANNER
   ==========================================================================
   Artwork with the CTAs pulled up over the bottom of the image.
   ========================================================================== */

.book-banner {
  position: relative;
}

.book-banner__img {
  width: 100%;
}

.book-banner__actions {
  display: flex;
  flex-flow: column;
  gap: 10px;
  padding: 20px;
  text-align: center;
  transform: translateY(-100%);
}

.book-banner__cta {
  padding: 10px 12px;
  border-radius: 4px;
  color: #fff;
}

.book-banner__cta:hover {
  color: #fff;
}

.book-banner__cta--primary {
  background: #f29d1c;
}

.book-banner__cta--secondary:hover {
  text-decoration: underline !important;
}

@media (min-width: 768px) {
  .book-banner__actions {
    flex-flow: row;
    width: fit-content;
    padding: 16px 0;
    transform: translate(8vw, -8vw);
  }

  .book-banner__cta { padding: 8px 10px; }
}

@media (min-width: 1220px) {
  .book-banner__actions { padding: 16px 0 32px; }

  .book-banner__cta {
    padding: 8px 14px;
    font-size: 22px;
    font-weight: bold;
  }
}


/* ==========================================================================
   14. TESTIMONIALS
   ==========================================================================
   The cards themselves are injected by the Trustindex widget; only the
   heading block is styled here.
   ========================================================================== */

.testimonials {
  padding: 80px 20px;
  background: var(--img-testimonials-bg);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.testimonials__header {
  margin-bottom: 50px;
  text-align: center;
}

.testimonials__title {
  margin: 0;
  color: #0553b5;
  font-family: 'Inter', sans-serif;
  font-size: 50px;
  font-weight: 800;
  text-transform: uppercase;
}

.testimonials__title span {
  color: #0aa2b3;
}

.testimonials__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonials__stars {
  color: #0aa2b3;
  font-size: 28px;
  letter-spacing: 4px;
}

.testimonials__rating-text {
  margin: 0;
  color: #222;
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .testimonials__title       { font-size: 30px; }
  .testimonials__stars       { font-size: 25px; }
  .testimonials__rating-text { font-size: 12px; }
}

/* ==========================================================================
   15. FILTRATION — multi-layer full-purification section
   ==========================================================================
   Everything is scoped under .wf so the whole section can be lifted out.

     .wf        -> full page width, carries the background gradient
     .wf__inner -> the grid, capped at --wf-max and centred

   The cutaway render (info-filter-4.png, and info-filter-4-mobile.png below
   700px) sits in .wf__visual as a background layer inside .wf__inner: it
   bleeds past the inner padding (--wf-px) to the full width of the content
   container, with the intro copy and layer cards on top of it.

   Layer cards are a single column on mobile (head -> copy -> full-width
   image -> contaminant chips). From 700px up the media moves to a
   full-height column on the right and the chips flow under the copy.
   ========================================================================== */

.wf {
  /* --- palette --- */
  --wf-navy:      #0e2a6e;
  --wf-blue:      #1a5ce0;
  --wf-blue-dark: #123fa3;
  --wf-teal:      #17a2c4;
  --wf-sky:       #1b9ae8;
  --wf-orange:    #f2681c;
  --wf-ink:       #46536e;
  --wf-ink-soft:  #63708a;
  --wf-line:      #dbe8fa;
  --wf-line-soft: #eaf2fd;
  --wf-surface:   #ffffff;
  --wf-tint:      #eaf3ff;
  --wf-bg-a:      #f2f8ff;
  --wf-bg-b:      #e6f0fd;

  /* --- type --- */
  --wf-font-head: "Poppins", "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wf-font-body: "Inter", "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- geometry --- */
  --wf-radius:   16px;
  --wf-radius-s: 12px;
  --wf-gap:      16px;
  --wf-pad:      20px;
  --wf-px:       16px;    /* inner horizontal padding; image bleeds past it */
  --wf-max:      1600px;  /* content width cap — background ignores this */
  --wf-media:    100%;    /* layer card image: full width until 1376px, square column above */

  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(180deg, var(--wf-bg-a) 0%, var(--wf-bg-b) 100%);
  font-family: var(--wf-font-body);
  color: var(--wf-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* the capped, centred content grid */
.wf .wf__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-gap);
  max-width: var(--wf-max);
  margin-inline: auto;
  padding: 28px var(--wf-px) 32px;
  overflow: hidden; /* contains the full-bleed visual */
}

.wf *,
.wf *::before,
.wf *::after { box-sizing: border-box; }

.wf p,
.wf h2,
.wf h3,
.wf ul,
.wf ol,
.wf figure { margin: 0; padding: 0; }

.wf ul,
.wf ol { list-style: none; }

.wf img { display: block; max-width: 100%; height: auto; }

.wf__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Shared icon defaults. Presentation attributes inside each <symbol> override
  these where an element needs to be filled instead of stroked. */
.wf .wf__ic {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stacking: the visual is layer 0, everything else sits above it ---------- */
.wf .wf__intro-head,
.wf .wf__intro-body,
.wf .wf__layers,
.wf .wf__trio,
.wf .wf__panel {
  position: relative;
  z-index: 1;
}

/* Panels ------------------------------------------------------------------ */
.wf .wf__panel {
  background: var(--wf-surface);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  padding: var(--wf-pad);
}

/* Headings with flanking rules ------------------------------------------- */
.wf .wf__rule-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--wf-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-navy);
  text-align: center;
}
.wf .wf__rule-heading::before,
.wf .wf__rule-heading::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wf-line), transparent);
}

/* ===================== INTRO ===================== */
.wf .wf__eyebrow {
  font-family: var(--wf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wf-blue);
  margin-bottom: 10px;
}

.wf .wf__title {
  font-family: var(--wf-font-head);
  font-size: clamp(30px, 7.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--wf-navy);
  margin-bottom: 14px;
}

.wf .wf__lede {
  font-size: 16px;
  color: var(--wf-ink);
  max-width: 34ch;
}

/* ===================== BACKGROUND VISUAL ===================== */
.wf .wf__visual {
  position: relative;
  z-index: 0;
  /* break out of the inner padding, edge to edge within the content cap */
  margin-inline: calc(var(--wf-px) * -1);
  text-align: center;
  pointer-events: none;
}

.wf .wf__visual picture { display: block; }

.wf .wf__visual-img {
  width: 100%;
  max-width: none;
  height: auto;
  /* fade the bottom edge out instead of painting a colour over it, so the
    transition always matches the section gradient wherever it lands */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, #000 86%, rgba(0, 0, 0, 0) 100%);
}

/* soft top fade so the render melts into the section background */
.wf .wf__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--wf-bg-a) 0%, rgba(242, 248, 255, 0) 12%);
}




/* ===================== BENEFITS ===================== */
.wf .wf__benefits { display: grid; gap: 18px; }

.wf .wf-benefit {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.wf .wf-benefit__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wf-tint);
  color: var(--wf-blue);
}
.wf .wf-benefit__icon .wf__ic { width: 22px; height: 22px; }

.wf .wf-benefit__title {
  font-family: var(--wf-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--wf-navy);
  margin-bottom: 3px;
}

.wf .wf-benefit__text { font-size: 14.5px; color: var(--wf-ink); }

/* ===================== CTA ===================== */
.wf .wf__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  padding: 15px 26px;
  border-radius: 50px;
  background: linear-gradient(90deg, #3dc8c7, #108ee8);
  box-shadow: 0 6px 18px rgba(18, 63, 163, .28);
  color: #fff;
  font-family: var(--wf-font-head);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wf .wf__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(18, 63, 163, .34);
}
.wf .wf__cta:focus-visible {
  outline: 3px solid var(--wf-navy);
  outline-offset: 3px;
}

.wf .wf__cta-arrow {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== LAYER CARDS ===================== */
.wf .wf__layers { display: grid; gap: var(--wf-gap); }

.wf .wf__layers-heading { color: var(--wf-blue); margin-bottom: 4px; }

/* mobile: one column — head, copy, full-width media, chips */
.wf .wf-layer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "desc"
    "media"
    "chips";
  background: var(--wf-surface);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  padding: var(--wf-pad);
}

.wf .wf-layer__head {
  grid-area: head;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.wf .wf__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wf-blue);
  color: #fff;
  font-family: var(--wf-font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.wf .wf-layer__title {
  font-family: var(--wf-font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--wf-blue);
  line-height: 1.15;
}

.wf .wf-layer__sub {
  font-family: var(--wf-font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wf-navy);
  margin-top: 2px;
  line-height: 1.25;
}

.wf .wf-layer__desc {
  grid-area: desc;
  font-size: 14.5px;
  color: var(--wf-ink);
  max-width: 60ch;
}

.wf .wf-layer__media {
  grid-area: media;
  margin-top: 16px;
  border-radius: var(--wf-radius-s);
  overflow: hidden;
  border: 1px solid var(--wf-line);
  background: var(--wf-line-soft);
}
.wf .wf-layer__media img {
  width: 100%;
  height: 128px;
  object-fit: cover;
}

/* layer accents */
.wf .wf-layer--second .wf__badge { background: var(--wf-teal); }
.wf .wf-layer--second .wf-layer__title { color: var(--wf-teal); }
.wf .wf-layer--middle .wf__badge { background: var(--wf-sky); }
.wf .wf-layer--middle .wf-layer__title { color: var(--wf-sky); }
.wf .wf-layer--inner .wf__badge { background: var(--wf-orange); }
.wf .wf-layer--inner .wf-layer__title { color: var(--wf-orange); }

/* contaminant chips */
.wf .wf-layer__chips {
  grid-area: chips;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 16px 8px;
  margin-top: 18px;
}

.wf .wf-chip {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--wf-navy);
}
.wf .wf-chip .wf__ic { color: var(--wf-blue); width: 26px; height: 26px; }
.wf .wf-layer--second .wf-chip .wf__ic { color: var(--wf-teal); }
.wf .wf-layer--middle .wf-chip .wf__ic { color: var(--wf-sky); }
.wf .wf-layer--inner  .wf-chip .wf__ic { color: var(--wf-orange); }

/* ===================== HOW IT WORKS ===================== */
.wf .wf__how-heading { color: var(--wf-navy); }

.wf .wf__steps { display: grid; gap: 4px; }

.wf .wf-step__head {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.wf .wf-step__title {
  font-family: var(--wf-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wf-blue);
  line-height: 1.2;
}

.wf .wf-step__body {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
}

.wf .wf-step__art {
  width: 100%;
  height: auto;
  max-height: 84px;
  color: var(--wf-blue);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wf .wf-step__text { font-size: 14.5px; color: var(--wf-ink); }

.wf .wf__step-sep {
  display: grid;
  place-items: center;
  padding: 12px 0;
}
.wf .wf__step-chevron {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
  fill: none;
  stroke: #b9d0f0;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== REDUCTION TARGETS ===================== */
.wf .wf__targets { padding: 0; overflow: hidden; }

.wf .wf__card-heading {
  font-family: var(--wf-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wf-blue);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 18px;
}

/* mobile: the targets card gets a solid navy header bar */
.wf .wf__card-heading--bar {
  background: linear-gradient(180deg, var(--wf-blue) 0%, var(--wf-blue-dark) 100%);
  color: #fff;
  margin: 0;
  padding: 16px 20px;
}

.wf .wf__targets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 10px;
  padding: 18px 16px;
}

.wf .wf__target-col { display: grid; gap: 12px; align-content: start; }

.wf .wf-target {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--wf-navy);
}
.wf .wf-target .wf__ic { width: 20px; height: 20px; color: var(--wf-blue); }

.wf .wf__target-col--extra {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-line);
  justify-items: center;
}
.wf .wf__target-col--extra .wf-target { font-size: 12.5px; }

/* ===================== FEATURE CARDS ===================== */
.wf .wf-feature {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.wf .wf-feature__art {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 4px 0 16px;
  color: var(--wf-blue);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf .wf-feature__art .wf-feature__fill {
  fill: #d8e8fd;
  stroke: none;
}

.wf .wf-feature__text {
  font-size: 15px;
  color: var(--wf-ink);
  max-width: 32ch;
}

/* the flow card puts its heading under the art, matching the mockup */
.wf .wf-feature--flow { grid-template-rows: auto auto auto; }
.wf .wf-feature--flow .wf__card-heading { order: 2; margin: 4px 0 12px; }
.wf .wf-feature--flow .wf-feature__art { order: 1; margin-top: 0; }
.wf .wf-feature--flow .wf-feature__text { order: 3; }

/* ===================== PERFORMANCE ===================== */
/* mobile: navy card, stacked rows */
.wf .wf__perf {
  background: linear-gradient(165deg, #123a92 0%, var(--wf-navy) 100%);
  border-color: transparent;
  padding: 26px 22px;
}

.wf .wf__perf-heading { color: #fff; margin-bottom: 8px; }
.wf .wf__perf-heading::before,
.wf .wf__perf-heading::after { display: none; }

.wf .wf__perf-list { display: grid; }

.wf .wf__perf-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.wf .wf__perf-list > .wf__perf-item:first-child { border-top: 0; }

.wf .wf__perf-icon {
  display: grid;
  place-items: center;
  grid-row: 1;
  color: #fff;
}
.wf .wf__perf-icon .wf__ic { width: 34px; height: 34px; stroke-width: 1.4; }

.wf .wf__perf-title {
  grid-column: 2;
  font-family: var(--wf-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
}

.wf .wf__perf-text {
  grid-column: 2;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
  TABLET
  ========================================================================== */
@media (min-width: 700px) {
  .wf {
    --wf-gap: 20px;
    --wf-pad: 24px;
    --wf-px: 24px;
  }
  .wf .wf__inner { padding: 36px var(--wf-px) 40px; }

  .wf .wf__benefits { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .wf .wf-benefit { grid-template-columns: 1fr; }
  .wf .wf__cta { justify-self: start; width: auto; }

  /* the layer image stays full width inside the card until 1376px */
  .wf .wf-layer__media img { height: 150px; }

  .wf .wf-layer__chips {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }

  .wf .wf__trio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wf-gap); }
  .wf .wf__targets { grid-column: 1 / -1; }
  .wf .wf__targets-grid { grid-template-columns: repeat(4, 1fr); gap: 0 18px; padding: 20px 24px; }
  .wf .wf__target-col--extra {
    grid-column: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    justify-items: start;
  }

  .wf .wf__perf-list { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
}

/* ==========================================================================
  DESKTOP
  ========================================================================== */
@media (min-width: 1080px) {
  .wf {
    --wf-gap: 22px;
    --wf-pad: 28px;
    --wf-px: 40px;
  }

  .wf .wf__inner {
    /* the layers column is a little wider than before to hold four cards
       with the media column alongside the copy */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 0.92fr) minmax(0, 1.2fr);
    grid-template-areas:
      "head .    layers"
      "body .    layers"
      "how  how  how"
      "trio trio trio"
      "perf perf perf";
    align-items: start;
    column-gap: 26px;
    row-gap: var(--wf-gap);
    padding: 48px var(--wf-px) 44px;
  }

  .wf .wf__intro-head { grid-area: head; }
  .wf .wf__intro-body { grid-area: body; }
  .wf .wf__layers     { grid-area: layers; }
  .wf .wf__how        { grid-area: how; }
  .wf .wf__trio       { grid-area: trio; }
  .wf .wf__perf       { grid-area: perf; }

  /* the render spans every column across both hero rows, behind the content */
  .wf .wf__visual {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: -28px;
    margin-left: -200px;
  }

  /* fade left/right edges so the flanking copy and cards stay legible */
  .wf .wf__visual::after {
    background:
      linear-gradient(90deg,
        var(--wf-bg-a) 0%,
        rgba(242, 248, 255, .45) 14%,
        rgba(242, 248, 255, 0) 30%,
        rgba(242, 248, 255, 0) 70%,
        rgba(242, 248, 255, .45) 86%,
        var(--wf-bg-a) 100%),
      linear-gradient(180deg, var(--wf-bg-a) 0%, rgba(242, 248, 255, 0) 10%);
  }


  .wf .wf__title { font-size: clamp(38px, 3.2vw, 46px); margin-bottom: 18px; }
  .wf .wf__lede  { font-size: 17px; }

  /* left column stacks back to a vertical benefit list on desktop */
  .wf .wf__benefits { grid-template-columns: 1fr; gap: 20px; }
  .wf .wf-benefit  { grid-template-columns: 46px 1fr; }

  /* the "4-layer advantage" rule heading is mobile-only */
  .wf .wf__layers-heading { display: none; }

  .wf .wf__layers { gap: 18px; }
  .wf .wf-layer  { padding: 20px; column-gap: 18px; }
  .wf .wf-layer__title { font-size: 16px; }
  .wf .wf-layer__desc { font-size: 13.5px; }
  .wf .wf-layer__chips {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 14px 6px;
    margin-top: 16px;
  }
  .wf .wf-chip { font-size: 10.5px; }
  .wf .wf-chip .wf__ic { width: 24px; height: 24px; }

  /* how it works: horizontal with chevron separators */
  .wf .wf__how { padding: 30px 40px 34px; }
  .wf .wf__how-heading { font-size: 22px; letter-spacing: .02em; margin-bottom: 26px; }
  .wf .wf__steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0 20px;
  }
  .wf .wf__step-sep { padding: 0; align-self: center; }
  .wf .wf__step-chevron { transform: none; width: 28px; height: 28px; }
  .wf .wf-step__head { grid-template-columns: 40px 1fr; margin-bottom: 16px; }
  .wf .wf-step__head .wf__badge { width: 40px; height: 40px; font-size: 18px; }
  .wf .wf-step__title { font-size: 17px; }
  .wf .wf-step__body { grid-template-columns: 64px 1fr; gap: 22px; }
  .wf .wf-step__art { max-height: 96px; }
  .wf .wf-step__text { font-size: 15px; }

  /* trio: targets | whole-home | high-flow */
  .wf .wf__trio { grid-template-columns: 1.5fr 1fr 1fr; }
  .wf .wf__targets { grid-column: auto; padding: 0; }
  .wf .wf__card-heading--bar {
    background: none;
    color: var(--wf-blue);
    padding: 26px 24px 0;
  }
  .wf .wf__targets-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 22px 20px 26px;
  }
  .wf .wf__target-col { gap: 14px; padding: 0 12px; }
  .wf .wf__target-col + .wf__target-col { border-left: 1px solid var(--wf-line); }
  .wf .wf-target { font-size: 11.5px; }

  .wf .wf-feature { padding: 28px 24px 30px; }

  /* performance: light panel, five across */
  .wf .wf__perf {
    background: var(--wf-surface);
    border-color: var(--wf-line);
    padding: 28px 30px 32px;
  }
  .wf .wf__perf-heading { color: var(--wf-navy); font-size: 20px; margin-bottom: 22px; }
  .wf .wf__perf-heading::before,
  .wf .wf__perf-heading::after { display: block; }

  .wf .wf__perf-list { grid-template-columns: repeat(5, 1fr); column-gap: 0; }
  .wf .wf__perf-item {
    grid-template-columns: 46px 1fr;
    padding: 0 20px;
    border-top: 0;
  }
  .wf .wf__perf-list > .wf__perf-item + .wf__perf-item { border-left: 1px solid var(--wf-line); }
  .wf .wf__perf-icon { color: var(--wf-navy); }
  .wf .wf__perf-icon .wf__ic { width: 40px; height: 40px; }
  .wf .wf__perf-title { color: var(--wf-blue); font-size: 13px; }
  .wf .wf__perf-text {
    grid-column: 1 / -1;
    margin-top: 10px;
    color: var(--wf-ink);
    font-size: 13.5px;
  }
}

/* ==========================================================================
  WIDE DESKTOP — layer image moves beside the copy as a perfect square
  ========================================================================== */
@media (min-width: 1376px) {
  .wf { --wf-media: clamp(150px, 11vw, 180px); }

  .wf .wf-layer {
    grid-template-columns: minmax(0, 1fr) var(--wf-media);
    grid-template-areas:
      "head  media"
      "desc  media"
      "chips media";
    align-content: start;
    column-gap: 20px;
  }

  .wf .wf-layer__media {
    margin-top: 0;
    align-self: center;
    width: var(--wf-media);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .wf .wf-layer__media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

/* ==========================================================================
  MOTION PREFERENCES
  ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wf .wf__cta { transition: none; }
  .wf .wf__cta:hover { transform: none; }
}

/* ==========================================================================
   16. QUALITY ("protect your plumbing, appliances & home")
   ========================================================================== */

.quality-section {
  padding: 100px 20px;
  background: var(--img-quality-bg) no-repeat center / cover;
}

.quality-section__title {
  color: #0553b5;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2;
}

.quality-section__title span {
  color: #0aa2b3;
}

.quality-section__text {
  margin-bottom: 35px;
  color: #555;
  font-size: 18px;
  line-height: 1.7;
}

.quality-section__media {
  position: relative;
}

.quality-section__media img {
  width: 100%;
}

@media (max-width: 768px) {
  .quality-section { padding: 50px 20px; }
  .quality-section__title { font-size: 30px; }
}


/* ==========================================================================
   17. BENEFITS SLIDER
   ========================================================================== */

.benefits-slider {
  overflow: hidden;
}

/* This element is a .swiper AND a .container. Swiper's own `padding:0`
   used to win purely on stylesheet load order; it is stated explicitly
   here so the layout no longer depends on that. */
.benefits-slider__swiper {
  position: relative;
  margin: auto;
  padding: 0;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid #d8dde5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  text-align: center;
}

.benefit-card__image {
  flex: 1 1 50%;
  min-height: 175px;
  overflow: hidden;
}

.benefit-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefits-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  transform: translateY(-50%);
  color: #18a8da;
  font-size: 70px;
  font-weight: 300;
  cursor: pointer;
}

.benefits-slider__arrow--prev { left: 0; }
.benefits-slider__arrow--next { right: 0; }

@media (max-width: 991px) {
  /* This element is also a .container, so it owns its horizontal padding. */
  .benefits-slider__swiper { padding: 0 40px; }
  .benefit-card__image { min-height: 220px; }
}

@media (max-width: 768px) {
  .benefits-slider__swiper { padding: 0 20px; }
}

@media (max-width: 767px) {
  .benefit-card { min-height: 420px; }
  .benefits-slider__arrow { font-size: 50px; }
}


/* ==========================================================================
   18. CONTACT CTA + LEAD FORM
   ========================================================================== */

/* This section is also a .container, so it owns its padding at every width.
   Note the 576-768px band has no vertical padding — preserved from the
   original stylesheet. */
.contact-cta {
  padding: 80px 0;
}

@media (max-width: 768px) { .contact-cta { padding: 0 20px; } }
@media (max-width: 575px) { .contact-cta { padding: 40px 0; } }

.contact-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 570px;
  gap: 60px;
  margin: auto;
  padding: 60px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(90deg, #087adc 0%, #0aa2b3 100%);
}

.contact-cta__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-cta__eyebrow {
  color: #fff;
  font-size: 20px;
  letter-spacing: 1px;
}

.contact-cta__kicker {
  margin-top: 20px;
  color: #f29d1c;
  font-size: 20px;
  font-weight: 800;
}

.contact-cta__title {
  max-width: 650px;
  margin: 15px 0 35px !important;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
}

.contact-cta__price {
  width: 400px;
}

.contact-cta__details {
  margin-top: 25px;
}

.contact-cta__detail {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.contact-cta__detail-text {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.contact-cta__technician {
  position: absolute;
  left: 430px;
  bottom: 0;
  height: 375px;
}

/* --- Lead form ----------------------------------------------------------- */

.lead-form {
  padding: 50px;
  border-radius: 20px;
  background: #fff;
}

.lead-form__title {
  margin-bottom: 30px;
  color: #032464;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
}

/* Segmented control. The radios are visually hidden but still focusable
   targets for their labels. */
.lead-form__modes {
  display: flex;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
}

.lead-form__modes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lead-form__mode {
  flex: 1;
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  color: #0b89ce;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background .2s, color .2s;
}

.lead-form__modes input:checked + .lead-form__mode {
  background: #fff;
  color: #0b89ce;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.lead-form input,
.lead-form textarea {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
  color: #000;
  font-size: 16px;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: #000;
}

.lead-form textarea {
  height: 130px;
  margin-bottom: 20px;
  resize: none;
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.lead-form__full {
  margin-bottom: 15px;
}

.lead-form__appointment {
  display: grid;
  gap: 12px;
}

.lead-form__field label {
  display: block;
  margin-bottom: 4px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
}

.lead-form__submit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 35px;
  border: none;
  border-radius: 50px;
  background: #032465;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 991px) {
  .contact-cta__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 25px;
    border-radius: 15px;
  }

  .contact-cta__intro   { text-align: left; }
  .contact-cta__eyebrow { font-size: 16px; }

  .contact-cta__title {
    margin: 10px 0 25px !important;
    font-size: 28px;
    line-height: 1.2;
  }

  .contact-cta__price   { width: 100%; max-width: 350px; }
  .contact-cta__details { width: 100%; }

  .contact-cta__detail {
    justify-content: left;
    gap: 12px;
    margin-bottom: 15px;
  }

  .contact-cta__detail-text {
    font-size: 18px;
    word-break: break-word;
  }

  .contact-cta__technician {
    display: block;
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 20px auto 0;
  }

  .lead-form        { padding: 30px 20px; border-radius: 15px; }
  .lead-form__title { margin-bottom: 25px; font-size: 24px; }
  .lead-form__row   { grid-template-columns: 1fr; gap: 12px; }

  .lead-form input,
  .lead-form textarea { padding: 14px 16px; font-size: 15px; }

  .lead-form__submit {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .contact-cta__inner { gap: 0; padding: 25px 15px; }

  .contact-cta__title       { font-size: 22px; }
  .contact-cta__detail      { flex-direction: row; gap: 8px; text-align: left; }
  .contact-cta__detail-text { font-size: 20px; }

  .lead-form         { padding: 20px 15px; }
  .lead-form__title  { font-size: 20px; }
  .lead-form__submit { font-size: 15px; }
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--img-footer-bg) no-repeat top center;
  background-size: cover;
  color: #fff;
}

/* This element is also a .container, so it owns its padding at every width. */
.site-footer__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 60px;
  padding: 180px 20px 70px;
}

.site-footer__col--brand {
  padding-left: 0;
  text-align: center;
}

/* Contact column stacks its rows. */
.site-footer__col--contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__logo {
  width: 280px;
  max-width: 100%;
  margin-bottom: 25px;
}

.site-footer__heading {
  margin-bottom: 25px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__item {
  margin-bottom: 14px;
}

.site-footer__link {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: .3s;
}

.site-footer__link:hover {
  opacity: .8;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #06256f;
  font-size: 22px;
  text-decoration: none;
}

.site-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.site-footer__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #18b5e7;
  font-size: 18px;
}

.site-footer__contact-text {
  font-size: 18px;
  line-height: 1.5;
}

.site-footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  text-align: center;
}

@media (max-width: 991px) {
  .site-footer {
    padding: 100px 0 0;
    background: var(--img-footer-bg-mobile) no-repeat top center;
    background-size: cover;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
  }

  .site-footer__col { padding-left: 40px; }
  .site-footer__col--brand { padding-left: 0; }

  .site-footer__contact {
    align-items: center;
    justify-content: left;
  }
}

@media (max-width: 768px) {
  /* .container's horizontal padding wins here in the original cascade,
     which drops the tall top padding on small screens. */
  .site-footer__grid { padding-top: 0; }
}

@media (max-width: 767px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 35px; }

  .site-footer__logo    { width: 220px; margin: auto auto 20px; }
  .site-footer__heading { margin-bottom: 15px; }
  .site-footer__item    { margin-bottom: 10px; }

  .site-footer__link,
  .site-footer__contact-text { font-size: 16px; }

  .site-footer__contact { justify-content: center; text-align: left; }

  .site-footer__bottom { padding: 18px; font-size: 15px; }
}


/* ==========================================================================
   19a. FOOTER — FIVE-COLUMN NAV VARIANT
   ==========================================================================
   The footer menu now mirrors the header, so the two header dropdowns get
   a column each: brand | Pure Water | Soft Water | Company | Contact.
   Sitemap/Privacy/Terms moved out of a column of their own and into
   .site-footer__legal, an inline row above the copyright line.

   These rules come after section 19 so they win at equal specificity.
   ========================================================================== */

.site-footer__grid--nav {
  grid-template-columns: 1.15fr 1fr 1fr .95fr 1.15fr;
  gap: 40px;
}

/* 30px headings do not fit five columns. */
.site-footer__grid--nav .site-footer__heading {
  margin-bottom: 18px;
  font-size: 22px;
}

.site-footer__grid--nav .site-footer__item { margin-bottom: 10px; }
.site-footer__grid--nav .site-footer__link { font-size: 16px; }

/* --- Legal row ----------------------------------------------------------- */

.site-footer__legal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 30px;
  padding: 0 20px 26px;
  margin: 0;
  list-style: none;
}

.site-footer__legal-item {
  position: relative;
}

/* Hairline separator between items, drawn in the gap. */
.site-footer__legal-item + .site-footer__legal-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background: rgba(255, 255, 255, .3);
}

.site-footer__legal .site-footer__link { font-size: 16px; }

/* --- Responsive ---------------------------------------------------------- */

/* Hold all five columns down to the tablet breakpoint — wrapping to a
   second row leaves a ragged half-empty band. */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-footer__grid--nav { gap: 24px; }
  .site-footer__grid--nav .site-footer__heading { font-size: 19px; }
  .site-footer__grid--nav .site-footer__link,
  .site-footer__grid--nav .site-footer__contact-text { font-size: 14px; }
  .site-footer__grid--nav .site-footer__logo { width: 200px; }
  .site-footer__grid--nav .site-footer__contact-icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .site-footer__grid--nav { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .site-footer__grid--nav { grid-template-columns: 1fr; gap: 35px; }
  .site-footer__grid--nav .site-footer__heading { font-size: 20px; }

  .site-footer__legal { gap: 8px 22px; padding-bottom: 18px; }
  .site-footer__legal-item + .site-footer__legal-item::before { left: -12px; }
}


/* ==========================================================================
   20. SUBMIT TOAST
   ========================================================================== */

.submit-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 14px;
  max-width: 90%;
  padding: 16px 20px;
  border-radius: 12px;
  background: #124c2c;
  color: #fff;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: opacity .3s ease, transform .3s ease;
}

.submit-toast.is-visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.submit-toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #b49336;
  font-size: 18px;
  font-weight: 700;
}

.submit-toast__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.submit-toast__text strong {
  font-size: 15px;
  font-weight: 700;
}

.submit-toast__text span {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 400;
}

.submit-toast__close {
  flex-shrink: 0;
  margin-left: 6px;
  border: none;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}

.submit-toast__close:hover {
  opacity: 1;
}


/* ==========================================================================
   21. VISIBILITY UTILITIES
   ==========================================================================
   Last in the file on purpose: these are single-class selectors that must
   beat component `display` values of equal specificity (.catalog-cta is
   inline-flex, .catalog-cta--block is flex).
   ========================================================================== */

/* Swap a whole element between breakpoints (element is display:block). */
.u-desktop-only { display: block; }
.u-mobile-only  { display: none; }

@media (max-width: 767px) {
  .u-desktop-only { display: none; }
  .u-mobile-only  { display: block; }
}

/* Hide only — leaves the element's own display value intact when visible,
   which is what the inline-flex catalog buttons need. */
@media (max-width: 767px) { .u-hidden-mobile  { display: none; } }
@media (min-width: 768px) { .u-hidden-desktop { display: none; } }