/* =============================================
   WATER & SUSTAINABILITY — water.css
   London Water Delivery
   ============================================= */

/* ── HELPERS ── */
.ws-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#1387c5;margin-bottom:14px}
.ws-tag::before{content:'';width:24px;height:1px;background:#1387c5;display:block}
.ws-tag--white{color:rgba(255,255,255,.7)}
.ws-tag--white::before{background:rgba(255,255,255,.5)}
.ws-wave-svg{display:inline-block;vertical-align:middle;margin-left:6px;position:relative;top:-3px}
.ws-h2{font-size:clamp(32px,3.8vw,54px);font-weight:700;color:#162032;line-height:1.12;letter-spacing:-.025em;margin-bottom:24px}
.ws-h2 em{font-style:normal;font-weight:700;color:#1387c5}
.ws-h2--white{color:#fff}
.ws-h2--left{text-align:left}
.ws-p{font-size:16px;color:#5a6a80;line-height:1.9;font-weight:300;margin-bottom:16px}
.ws-sub{font-size:17px;color:#5a6a80;max-width:640px;line-height:1.8;font-weight:300;margin:0 auto 48px;text-align:center}
.ws-sub--white{color:rgba(255,255,255,.65)}
.ws--white{background:#fff}
.ws--light{background:#f0f6fc}
.ws--blue{background: linear-gradient(90deg, #109AD6 0%, #1A559B 100%);position:relative;overflow:hidden}


.section-wave-top {
    position: absolute;
    top: -61px;
    width: 100%;
}

/* ── SECTIONS ── */
.ws {
    padding: 50px 0 70px;
    position: relative;
}


.ws-ph-panel.reveal.reveal-delay1.is-visible {
    width: 40%;
}


section#waterHero .container {
    display: flex;
    align-content: center;
    align-items: center;
}

#certified .container {
  padding: 100px 0 140px;

}

.form-group label {
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    text-align: left;
}

#certified h2.ws-h2.ws-h2--white.reveal.is-visible {
  text-align: center;

}

.section-wave-bottom {
    line-height: 0;
    font-size: 0;
    position: absolute;
    bottom: 0;
    top: auto;
    width: 100%;
    z-index: 6;
    margin-top: 0px;
    transform: scaleY(-1);
}
.ws-grid{display:grid;gap:80px;align-items:start}
.ws-grid--2{grid-template-columns:1fr 1fr}

/* ── HERO ── */
.wh{position:relative;;display:flex;align-items:center;overflow:hidden;background:#EDF7FF}
#wh-canvas{position:absolute;inset:0;width:100%;height:100%}

/* orb wrapper — right side, overflows edge */
.wh-orb-wrap{position:absolute;right:-4vw;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1}

/* ripple rings — centred on the orb */
.wh-orb-ring{position:absolute;border-radius:50%;
  border:1px solid rgba(0,114,206,.13);
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  animation:orbRipple 8s ease-out infinite;pointer-events:none}
.wh-orb-ring--1{width:clamp(320px,38vw,570px);height:clamp(320px,38vw,570px);animation-delay:0s}
.wh-orb-ring--2{width:clamp(430px,52vw,750px);height:clamp(430px,52vw,750px);animation-delay:2s;border-color:rgba(0,114,206,.08)}
.wh-orb-ring--3{width:clamp(560px,66vw,980px);height:clamp(560px,66vw,980px);animation-delay:4s;border-color:rgba(0,114,206,.05)}
.wh-orb-ring--4{width:clamp(700px,82vw,1220px);height:clamp(700px,82vw,1220px);animation-delay:6s;border-color:rgba(0,114,206,.025)}
@keyframes orbRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* glass orb */
.wh-orb{
  position:absolute;
top: 0;
bottom: 0;
margin: auto;

  width:clamp(300px,36vw,540px);height:clamp(300px,36vw,540px);
  border-radius:50%;right: 0;
  background:radial-gradient(ellipse at 38% 32%,
    rgba(255,255,255,.92) 0%,rgba(210,238,254,.68) 32%,
    rgba(140,200,240,.3) 62%,rgba(0,114,206,.12) 100%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:
    inset -22px -22px 60px rgba(0,90,180,.08),
    inset 10px 10px 40px rgba(255,255,255,.72),
    0 20px 80px rgba(0,90,180,.13),
    0  4px 18px rgba(0,90,180,.07);
  overflow:hidden;
  animation:orbBob 9s ease-in-out infinite;
}
.wh-orb canvas{position:absolute;bottom:0;left:-10%;width:120%;height:54%}
.wh-orb-glare{position:absolute;top:10%;left:16%;width:38%;height:23%;
  background:rgba(255,255,255,.55);border-radius:50%;filter:blur(13px);transform:rotate(-22deg)}
.wh-orb-glare2{position:absolute;top:18%;left:56%;width:15%;height:10%;
  background:rgba(255,255,255,.3);border-radius:50%;filter:blur(8px)}
@keyframes orbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}

/* floating particles — very subtle on light bg */
.wh-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wh-pt{position:absolute;bottom:-10px;border-radius:50%;
  background:rgba(0,114,206,.2);
  animation:ptRise linear infinite}
@keyframes ptRise{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:.35}100%{transform:translateY(-100vh);opacity:0}}

/* hero text — dark on light */
.wh-body {
    position: relative;
    z-index: 2;
    width: 50%;
    padding: 70px 0 130px;
}
span.ws-tag.ws-tag--white.reveal.is-visible::before {
  display: none;
}
span.ws-tag.ws-tag--white.reveal.is-visible {
    text-align: center;
    margin: 10px auto;
    display: block;
}

.wh-breadcrumb{font-size:12px;color:#8a96a8;margin-bottom:22px}
.wh-breadcrumb a{color:#5a6a80;text-decoration:none;transition:color .2s}
.wh-breadcrumb a:hover{color:#1387c5}
.wh-breadcrumb span{margin:0 6px;opacity:.4}

.wh-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#0072CE;margin-bottom:20px}
.wh-tag::before{content:'';width:26px;height:1px;background:#0072CE;display:block}

.wh-h1{font-size:clamp(44px,6vw,82px);font-weight:700;color:#162032;
  line-height:1.07;letter-spacing:-.03em;margin:0 0 22px}
.wh-h1-line{display:block}
.wh-h1-italic{font-style:normal;font-weight:700;color:#1387c5}

.wh-sub{font-size:18px;color:#5a6a80;line-height:1.85;
  font-weight:300;max-width:460px;margin-bottom:36px}

.wh-btns{display:flex;gap:12px;flex-wrap:wrap}
.wh-btns .btn-outline-white{color:#1361AB;border-color:#1361AB;background:transparent}
.wh-btns .btn-outline-white:hover{background:#1361AB;color:#fff}

/* stats strip */
.wh-strip{display:flex;align-items:center;gap:0;
  margin-top:40px;padding-top:28px;
  border-top:1px solid rgba(0,114,206,.13)}
.wh-strip-item{padding-right:24px}
.wh-strip-sep{width:1px;height:32px;background:rgba(0,114,206,.13);margin-right:24px;flex-shrink:0}
.wh-strip-val{display:block;font-size:26px;font-weight:700;color:#162032;
  line-height:1;letter-spacing:-.02em}
  .wh-strip-val sup {
      font-size: 13px;
      color: #1387c5;
      margin-left: 7px;
      font-weight: 700;
      letter-spacing: .04em;
  }
.wh-strip-lbl{display:block;font-size:11px;color:#8a96a8;
  font-weight:300;margin-top:4px;letter-spacing:.03em}

/* hero wave */
.wh-wave{position:absolute;bottom:-2px;left:0;right:0;z-index:3}
.wh-wave svg{display:block;width:100%}

/* ── SOURCE ── */
.ws-quote {
    margin-top: 28px;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
}
.ws-quote svg{color:#1387c5;opacity:.5;margin-bottom:10px}
.ws-quote p{font-size:15px;font-style:italic;color:#2D3F55;line-height:1.7;font-weight:300;margin:0}

.ws-journey.reveal.reveal-delay1.is-visible {
    margin-top: 60px;
}
/* journey */
.ws-journey{position:relative}
.ws-journey-track{position:absolute;left:19px;top:0;bottom:60px;width:1px;background:linear-gradient(to bottom,#1387c5,rgba(16,154,214,.04))}
.ws-step{display:flex;gap:16px;position:relative;align-items:flex-start}
.ws-step-dot{width:40px;height:40px;border-radius:50%;
  background:#128dcc;border:1px solid #128dcc;display:
  flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;z-index:1;transition:all .25s}


.ws-step-dot:hover{background:#1387c5;border-color:#1387c5;transform:scale(1.1);    box-shadow: 0 4px 18px rgb(203 203 203 / 37%);}
.ws-step-body{padding:5px 0 30px;display:flex;flex-direction:column;gap:2px}

.ws-step-tag {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1387c5;
    font-weight: 600;
}
.ws-step-body strong{font-size:16px;font-weight:600;color:#1a2030}
.ws-step-body p{font-size:14px;color:#8a96a8;font-weight:300;line-height:1.7;margin:0}

/* ── CERTIFIED ── */
.ws-deco-drops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ws-deco-drops--r{left:auto;right:0}
.ws-deco-drop{position:absolute;animation:ddFloat 9s ease-in-out infinite}
.ws-deco-drop--a{width:90px;top:8%;left:3%;animation-delay:0s}
.ws-deco-drop--b{width:58px;top:55%;left:6%;animation-delay:2.5s}
.ws-deco-drop--c{width:130px;top:18%;right:2%;animation-delay:1.2s}
.ws-deco-drop--d{width:100px;top:12%;right:3%;animation-delay:.6s}
.ws-deco-drop--e{width:64px;top:62%;right:5%;animation-delay:2s}
@keyframes ddFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}

.ws-cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.ws-cert{background:rgba(255,255,255,0.1);border-radius:0 40px;padding:48px 28px;position:relative;overflow:hidden;transition:transform .3s,background .3s}
.ws-cert:hover{transform:translateY(-6px);background:rgba(255,255,255,.16)}
.ws-cert-num{position:absolute;top:12px;right:16px;font-size:68px;font-weight:700;color:rgba(255,255,255,.05);line-height:1;letter-spacing:-.04em;pointer-events:none}
.ws-cert-ico{width:52px;height:52px;background:rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ws-cert h3{font-size:18px;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.3}
.ws-cert p{font-size:14px;color:rgba(255,255,255,.58);font-weight:300;line-height:1.75;margin:0}

/* ── MINERALS — CANVAS CHART ── */
.ws-mineral-chart{margin-top:48px}
.wmc-area{position:relative;height:280px;padding-left:46px}
.wmc-yaxis{position:absolute;left:0;top:0;bottom:32px;display:flex;flex-direction:column-reverse;justify-content:space-between}
.wmc-yaxis span{font-size:10px;color:#b0bac6}
.wmc-gridlines{position:absolute;left:46px;right:0;top:0;bottom:32px;display:flex;flex-direction:column-reverse;justify-content:space-between;pointer-events:none}
.wmc-gridline{width:100%;height:1px;background:rgba(16,100,180,.08)}
.wmc-canvas-wrap{position:absolute;left:46px;right:0;top:0;bottom:32px}
#wmc-canvas{width:100%;height:100%;display:block}
.wmc-names{position:absolute;left:46px;right:0;bottom:0;height:28px;display:flex;gap:10px}
.wmc-names span{flex:1;text-align:center;font-size:11px;color:#5a6a80;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:20px;border-top:1px solid rgba(16,100,180,.1);flex-wrap:wrap;gap:10px}
.wmc-note{font-size:11px;color:#b0bac6;font-weight:300}
.wmc-pills{display:flex;gap:8px;flex-wrap:wrap}
.wmc-pill{font-size:10px;font-weight:600;padding:4px 10px;border-radius:20px;background:#fff;color:#1387c5;border:1px solid rgba(16,154,214,.2)}
@media(max-width:860px){
  .wmc-area{height:240px;padding-left:36px}
  .wmc-canvas-wrap{left:36px}
  .wmc-gridlines{left:36px}
  .wmc-names{left:36px;gap:6px}
  .wmc-names span{font-size:10px}
}
@media(max-width:560px){
  .wmc-area{height:190px;padding-left:28px}
  .wmc-canvas-wrap{left:28px}
  .wmc-gridlines{left:28px}
  .wmc-names{left:28px;gap:4px}
  .wmc-names span{font-size:9px}
  .wmc-yaxis span{font-size:9px}
  .wmc-note{display:none}
}
.ws-ph-panel {
    background: #fff;
    border-radius: 0 64px;
    padding: 44px 48px;
    box-shadow: 0 4px 40px rgba(39, 88, 135, .12);
    border: 1px solid #e4ecf4;
    position: sticky;
    top: 100px;
}
.ws-ph-top{text-align:center;padding-bottom:26px;margin-bottom:24px;border-bottom:1px solid #e4ecf4}
.ws-ph-big{font-size:84px;font-weight:700;color:#162032;line-height:1;letter-spacing:-.04em;margin-bottom:6px}
.ws-ph-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a96a8}
.ws-ph-bar{margin:16px 0 8px;height:10px;border-radius:6px;background:linear-gradient(90deg,#E24B4A,#EF9F27 30%,#68BE05 55%,#1387c5 78%);position:relative;overflow:visible}
.ws-ph-pip{position:absolute;top:-4px;left:0;transition:left 1.6s cubic-bezier(.16,1,.3,1)}
.ws-ph-pip::before{content:'';display:block;width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid #1387c5;transform:translateX(-50%);box-shadow:0 2px 8px rgba(16,154,214,.35)}
.ws-ph-scale{display:flex;justify-content:space-between;font-size:10px;color:#8a96a8;margin-top:6px}
.ws-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-mini{background:#f0f6fc;border-radius:0 12px;padding:14px 12px;transition:all .2s;cursor:default}
.ws-mini:hover{background:linear-gradient(135deg,#1387c5,#1A559B)}
.ws-mini:hover .ws-mini-v,.ws-mini:hover .ws-mini-l{color:#fff}
.ws-mini-v{font-size:26px;font-weight:700;color:#1a2030;line-height:1;margin-bottom:4px;transition:color .2s}
.ws-mini-v span{font-size:13px;font-weight:400}
.ws-mini-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8a96a8;transition:color .2s}

/* ── SUSTAINABILITY ── */
.ws-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.ws-prin{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:0 22px;padding:42px 30px 36px;position:relative;overflow:hidden;transition:transform .3s,background .3s}
.ws-prin:hover{transform:translateY(-6px);background:rgba(255,255,255,.14)}
.ws-prin-bg{position:absolute;top:-16px;right:-8px;font-size:150px;font-weight:700;color:rgba(255,255,255,.03);line-height:1;letter-spacing:-.04em;pointer-events:none;user-select:none}
.ws-prin-ico{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ws-prin--reduce .ws-prin-ico{background:rgba(16,154,214,.28)}
.ws-prin--reuse  .ws-prin-ico{background:rgba(104,190,5,.28)}
.ws-prin--recycle .ws-prin-ico{background:rgba(29,158,117,.28)}
.ws-prin-tag{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.ws-prin h3{font-size:21px;font-weight:600;color:#fff;margin-bottom:12px;line-height:1.2}
.ws-prin p{font-size:14px;color:rgba(255,255,255,.52);font-weight:300;line-height:1.85;margin:0 0 20px}
.ws-prin-bar{position:absolute;bottom:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ws-prin--reduce .ws-prin-bar{background:#1387c5}
.ws-prin--reuse  .ws-prin-bar{background:#68BE05}
.ws-prin--recycle .ws-prin-bar{background:#1D9E75}
.ws-prin:hover .ws-prin-bar{transform:scaleX(1)}

.ws-deposit{display:flex;align-items:center;gap:32px;padding:36px 44px;margin-top:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:0 18px;transition:background .3s}
.ws-deposit:hover{background:rgba(255,255,255,.14)}
.ws-deposit-ico{font-size:42px;flex-shrink:0;transition:transform .6s}
.ws-deposit:hover .ws-deposit-ico{transform:rotate(360deg)}
.ws-deposit h3{font-size:20px;font-weight:600;color:#fff;margin-bottom:8px}
.ws-deposit p{font-size:14px;color:rgba(255,255,255,.52);font-weight:300;line-height:1.75;max-width:640px;margin:0}

/* ── CTA ── */
.ws-cta{background:linear-gradient(135deg,#1387c5 0%,#0c6fc2 50%,#0a4f9a 100%);padding:60px 0;text-align:center;position:relative;overflow:hidden}
#ws-cta-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.ws-cta-ripples{position:absolute;inset:0;pointer-events:none}
.ws-cta-r{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);top:50%;left:50%;transform:translate(-50%,-50%) scale(0);animation:ctaRipple 9s ease-out infinite}
.ws-cta-r--1{width:300px;height:300px;animation-delay:0s}
.ws-cta-r--2{width:600px;height:600px;animation-delay:3s;border-color:rgba(255,255,255,.07)}
.ws-cta-r--3{width:900px;height:900px;animation-delay:6s;border-color:rgba(255,255,255,.04)}
@keyframes ctaRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.8}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ws-cta-inner{position:relative;z-index:2}
.ws-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* wave dividers */
.ws-wavediv{overflow:hidden;line-height:0}
.ws-wavediv svg{display:block;width:100%}
.ws-wavediv--toblue{background:#fff}
.ws--light + .ws-wavediv--toblue{background:#f0f6fc}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .ws-min-grid{grid-template-columns:1fr}
  .ws-ph-panel{position:static}
}
@media(max-width:860px){
  .wh-body{max-width:100%; width: 100%;padding:40px 0 40px}
  .wh-orb-wrap{display:none}
  .wh-strip{flex-wrap:wrap;gap:16px;padding-top:24px}
  .wh-strip-sep{display:none}
  .wh-strip-item{padding-right:0}
  .ws-grid--2{grid-template-columns:1fr;gap:4px}
  .ws-cert-grid{grid-template-columns:1fr;gap:14px}
  .ws-principles{grid-template-columns:1fr;gap:14px}
  .ws-deposit{flex-direction:column;text-align:center;padding:32px 24px}
  .wh-h1 {
      font-size: 70px;
      text-align: center;
  }
  .ws-h2{font-size:34px}
  .ws-ph-panel.reveal.reveal-delay1.is-visible {
    width: 100%;
    margin-bottom: 40px;
}

.wh-sub {
    text-align: center;
    margin: auto;
}

.wh-tag {
    display: flex;
    align-items: center;
    justify-content: center;
}


}


/* =============================================
   SUSTAINABILITY — new clean white layout
   ============================================= */
.ws-sust {
  background: #fff;
  padding: 10px 0 90px;
  position: relative;
  overflow: hidden;
}

/* decorative background circles */
.ws-sust-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ws-sust-circle--1 {
  width: 700px; height: 700px;
  border: 1px solid rgba(16,154,214,.06);
  top: -280px; right: -220px;
}
.ws-sust-circle--2 {
  width: 460px; height: 460px;
  border: 1px solid rgba(16,154,214,.05);
  top: -160px; right: -110px;
}
.ws-sust-circle--3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(16,154,214,.06), transparent 70%);
  top: -40px; right: 40px;
}

/* header: two-column */
.ws-sust-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}
.ws-sust-head-right p {
  font-size: 17px;
  color: #6b7c93;
  line-height: 1.85;
  font-weight: 300;
  max-width: 480px;
}

/* items list */
.ws-sust-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 52px;
}
.ws-sust-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid #f0f4f8;
  position: relative;
  transition: padding-left .3s;
  cursor: default;
}
.ws-sust-item:first-child { border-top: 1px solid #f0f4f8; }


/* animated left bar on hover */
.ws-sust-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.ws-sust-item:hover::before { transform: scaleY(1); }


/* icon box */
.ws-sust-ico {
  width: 64px; height: 64px;
  border-radius: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s;
}




/* text body */
.ws-sust-tag {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ws-sust-item--reduce  .ws-sust-tag { color: #1387c5; }
.ws-sust-item--reuse   .ws-sust-tag { color: rgb(104, 188, 6); }
.ws-sust-item--recycle .ws-sust-tag { color: #E0BB14; }

.ws-sust-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0d1f35;
  margin-bottom: 6px;
  line-height: 1.2;
}
.ws-sust-body p {
    font-size: 16px;
    color: #6b7c93;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    max-width: 500px;
}

/* right metric */
.ws-sust-metric { text-align: right; flex-shrink: 0; }
.ws-sust-metric-val {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: #0d1f35;
  letter-spacing: -.03em;
  line-height: 1;
  transition: color .3s;
}
.ws-sust-item:hover .ws-sust-metric-val { color: #1387c5; }
.ws-sust-metric-lbl {
  display: block;
  font-size: 11px;
  color: #aab4bf;
  font-weight: 300;
  margin-top: 5px;
  letter-spacing: .02em;
}

/* deposit pill */
.ws-sust-deposit {
  display: flex;
  align-items: center;
  gap: 18px;


}

section#quote .container {
    padding: 70px 0;
}
.ws-sust-deposit-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1387c5;
  flex-shrink: 0;
}
.ws-sust-deposit p {
  font-size: 16px;
  color: #4a6070;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}
.ws-sust-deposit strong { color: #0d1f35; font-weight: 600; }

/* responsive */
@media (max-width: 860px) {
  .ws-sust-head { grid-template-columns: 1fr; gap: 20px; }
  .ws-sust-item { grid-template-columns: 52px 1fr; gap: 20px; }
  .ws-sust-deposit { border-radius: 20px; padding: 24px 28px; }

  section#waterHero .container {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
}
.wh-sub {
    text-align: center;
}

.wh-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: center;
}

}



@media(max-width:560px){
  .wh-h1{font-size:60px}
  .wh-body{padding:20px 0 40px}
  .ws-ph-big{font-size:72px}
  .ws-cta{padding:80px 0}

  .ws-journey.reveal.reveal-delay1.is-visible {
    margin-top: 60px;
}

#quote .container {
    padding: 0 20px!important;
}
#certified .container {
    padding: 10px 30px 40px;
}
.ws-sust-head {
  margin-bottom: 28px!important;
}

.ws-sust-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: self-start;
    gap: 32px !important;
    padding: 32px 0;
    border-bottom: 1px solid #f0f4f8;
    position: relative;
    transition: padding-left .3s;
    cursor: default;
}

.ws-sust {
    background: #fff;
    padding: 30px 0 30px!important;
    position: relative;
    overflow: hidden;
}

.ws-sust-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    align-items: end;
    margin-bottom: 30px;
}
.ws-sust-deposit {
    border-radius: 20px;
    padding: 0;
}

.ws-sust-item {
    grid-template-columns: 52px 1fr;
    gap: 30px;
}
.ws-sust-item {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid #f0f4f8;
    position: relative;
    transition: padding-left .3s;
    cursor: default;
}


.ws-sust-metric-val {
    display: block;
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    color: #0d1f35;
    letter-spacing: -.03em;
    line-height: 1;
    transition: color .3s;
}


}