:root{
  --ink:#213A52;--ink-soft:rgba(33,58,82,.68);
  --indigo:#3A3480;--violet:#6C63C7;--violet-soft:#EDEBFA;--lav:#C9C3EE;--bronze:#A18355;
  --paper:#FCFBF9;--mist:#F3F6FA;--sky:#EAF4FB;--sky-2:#D9EBF6;--sky-3:#C4DFF0;
  --ocean:#2E6E93;--aqua:#7FB8D9;--lime:#B8D96E;
  --line:rgba(33,58,82,.12);--line-strong:rgba(33,58,82,.2);
  --glass-bg:rgba(255,255,255,.44);--glass-brd:rgba(255,255,255,.7);
  --glass-shadow:0 18px 44px rgba(46,110,147,.16);
  --gold:#C9A24B;
  --serif:'IvyPresto Display','Playfair Display',Georgia,serif;
  --sans:'Manrope','Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);--header-h:74px;--rad:22px;

    --rad:22px;
    --porcelain:#F7F4EE;
  --porcelain-2:#F2EEE6;
  --mist:#E8F1F8;
  --mist-2:#D9E8F4;
    --deep:#1B1740;

}
@font-face{font-family:'IvyPresto Display';font-weight:400 600;font-display:swap;src:local('IvyPresto Display');
  /* src:url('/wp-content/uploads/fonts/IvyPrestoDisplay.woff2') format('woff2'); */}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.72;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--ocean);color:#fff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 5vw}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ocean);margin-bottom:22px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(40px,6vw,80px)}
h2{font-size:clamp(30px,4vw,52px);margin-bottom:24px}
h3{font-size:clamp(19px,2vw,24px)}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:640px}
section{position:relative}
.sec-pad{padding:clamp(76px,9vw,130px) 0}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:100px;font-weight:600;font-size:15px;letter-spacing:.01em;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.btn-solid{background:var(--indigo);color:#fff;box-shadow:0 10px 28px rgba(58,52,128,.28)}
.btn-solid:hover{transform:translateY(-2px);background:var(--violet);box-shadow:0 16px 36px rgba(108,99,199,.34)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-light{background:var(--paper);color:var(--indigo)}
.btn-light:hover{transform:translateY(-2px)}
.btn-ghost.on-dark{border-color:rgba(252,251,249,.35);color:var(--paper)}
.btn-ghost.on-dark:hover{border-color:#fff}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.glass{background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-brd);border-radius:var(--rad);box-shadow:var(--glass-shadow)}

/* ================= HERO (two-col: copy + compact lead form) ================= */
/* =====================================================
   HERO BANNER WITH FULL WATER HEALTH TEST FORM
===================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 90px;

  background:
    linear-gradient(
      172deg,
      var(--sky-2) 0%,
      var(--sky) 44%,
      var(--paper) 100%
    );
}


.hero-inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(300px, 0.78fr)
    minmax(560px, 1.22fr);

  align-items: start;
  gap: clamp(30px, 4vw, 64px);
}

.hero-copy {
  padding-top: clamp(24px, 5vh, 68px);
}

.hero-copy h1 {
  margin-bottom: 22px;
  font-size: clamp(36px, 5vw, 78px);
}

.hero-copy .lede {
  margin: 0 0 20px;
}


/* =====================================================
   FORM CARD
===================================================== */

.hero-form.form-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(26px, 3vw, 42px);

  scroll-margin-top: calc(var(--header-h) + 22px);
}

.hf-badge {
  display: inline-flex;
  align-items: center;

  margin-bottom: 18px;
  padding: 7px 14px;

  border-radius: 100px;
  background: var(--gold);

  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-form h3 {
  margin-bottom: 8px;
  font-size: clamp(23px, 2.6vw, 30px);
}

.hero-form .hf-sub {
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

b.price-tag {
  color:var(--ocean);    font-size: 28px;
    font-family:var(--serif)
}

.hero-form .fg {
  margin-bottom: 24px;
}

.fg-title {
  margin-bottom: 16px;
  padding-bottom: 8px;

  border-bottom: 1px solid var(--line);

  color: var(--ocean);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* =====================================================
   FORM FIELDS
===================================================== */

.f-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.f-row.tri {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.f-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.f-field.full {
  grid-column: 1 / -1;
}

.f-field label {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.f-field input,
.f-field select {
  width: 100%;
  padding: 13px 16px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.88);

  color: var(--ink);
  font-size: 15px;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.f-field input:focus,
.f-field select:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(46, 110, 147, 0.14);
}

.f-field .f-err {
  display: none;
  color: #b4541e;
  font-size: 12px;
}

.f-field.invalid input,
.f-field.invalid select {
  border-color: #d96c31;
}

.f-field.invalid .f-err {
  display: block;
}

.form-choice {
  margin-bottom: 20px;
}


/* =====================================================
   RADIO OPTIONS
===================================================== */

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.seg label {
  padding: 9px 18px;

  border: 1px solid var(--line-strong);
  border-radius: 100px;

  color: var(--ink);
  cursor: pointer;

  font-size: 13.5px;
  font-weight: 600;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.seg input:checked + label {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}

.seg input:focus-visible + label {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}


/* =====================================================
   SUBMIT AND SUCCESS
===================================================== */

.form-submit {
  width: 100%;
  justify-content: center;
}

.form-trust {
  margin-top: 16px;
  text-align: center;

  color: var(--ink-soft);
  font-size: 13px;
}

.form-ok {
  display: none;
  padding: 42px 10px;
  text-align: center;
}

.form-ok.show {
  display: block;
}

.form-ok .ok-i {
  display: grid;
  place-items: center;

  width: 64px;
  height: 64px;
  margin: 0 auto 20px;

  border-radius: 50%;
  background: var(--indigo);
}

.form-ok .ok-i svg {
  width: 28px;
  height: 28px;

  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-ok p {
  max-width: 400px;
  margin: 10px auto 0;

  color: var(--ink-soft);
  font-size: 14px;
}
.callback-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.callback-group legend {
  width: 100%;
  padding: 0;
}
del {
  margin-left: 6px;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  font-family:var(--serif);
  font-size: 20px;
}

.hero h1 em{
  font-style:italic;
  color:var(--ocean);
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1180px) {
  .hero-inner {
    grid-template-columns:
      minmax(270px, 0.72fr)
      minmax(500px, 1.28fr);

    gap: 30px;
  }

  .hero-form .f-row.tri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-form .f-row.tri .f-field:last-child {
    grid-column: 1 / -1;
  }
}


/* =====================================================
   MOBILE AND SMALL TABLET
===================================================== */

@media (max-width: 900px) {
  .hero {
    padding-bottom: 70px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero-form {
    order: 2;
  }

  .hero-form .f-row.tri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-form .f-row.tri .f-field:last-child {
    grid-column: auto;
  }


}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 680px) {
  .hero {
    padding-top: calc(var(--header-h) + 34px);
    padding-bottom: 50px;
  }

  .hero-form.form-card {
    padding: 24px 18px;
  }

  .hero-form .f-row,
  .hero-form .f-row.tri {
    grid-template-columns: 1fr;
  }

  .hero-form .f-row.tri .f-field:last-child {
    grid-column: auto;
  }

  .hero-form .seg {
    align-items: stretch;
  }

  .hero-form .seg label {
    flex: 1 1 100%;
    text-align: center;
  }

    .f-field input,
.f-field select {
  font-size: 10px;
}

.hero-copy {
    padding-left:0px !important;
}


}

@keyframes formPulse{0%{box-shadow:0 0 0 0 rgba(46,110,147,.45),var(--glass-shadow)}60%{box-shadow:0 0 0 14px rgba(46,110,147,0),var(--glass-shadow)}100%{box-shadow:0 0 0 0 rgba(46,110,147,0),var(--glass-shadow)}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:34px;text-align:left}.hero-form{order:2}}


.offerx{background:linear-gradient(180deg,var(--sky-2),var(--sky));color:var(--paper);overflow:hidden}
.offerx-grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(640px,84svh);margin: 0px 8rem;}
.offerx-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(50px,7vw,100px) clamp(24px,5vw,70px)}
.offerx-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#131722;background:var(--paper);border-radius:100px;padding:8px 18px}
.offerx h2{color:#213a52;font-size:clamp(30px,3.8vw,52px);margin:6px 0 0}
.offerx h2 .fifty{color:#2e6e93;font-style:italic}
.offerx .ox-sub{color:#213a52;font-size:clamp(15px,1.5vw,18px);max-width:440px}
.offerx .ox-sub b{color:#213a52}
.offerx .ox-cta{margin-top:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-paper{background:var(--paper);color:#131722}
.btn-paper:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.ox-tnc{font-size:11.5px;color:rgba(252,251,249,.38);margin-top:22px}
.hero-form.hf-glow{animation:hfGlow 1.1s var(--ease) 2}
@keyframes hfGlow{0%,100%{box-shadow:var(--glass-shadow)}50%{box-shadow:0 0 0 6px rgba(108,99,199,.35),0 24px 60px rgba(108,99,199,.4)}}
@media(max-width:880px){.offerx-grid{grid-template-columns:1fr}.offerx-stage{min-height:min(420px,90vw);padding:30px 0 56px}}

.offerx-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--sky-2),
    var(--sky)
  );
}

#dropCanvas {
  display: block;
  width: min(520px, 90%);
  height: auto;
  aspect-ratio: 1;
  cursor: crosshair;
  touch-action: none;
}

.ox-hint {
  position: absolute;
  right: 0;
  bottom: 100px;
  left:0;
  text-align: center;
  color: rgba(33, 58, 82, 0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 880px) {
  .offerx-grid {
    grid-template-columns: 1fr;
    margin: 0px;
  }

  .offerx-stage {
    min-height: min(500px, 110vw);
    padding: 24px 0 58px;
  }

  #dropCanvas {
    width: min(440px, 94vw);
  }

  .ox-hint {
    bottom: 18px;
    padding: 0 20px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }
}


.problem{background:var(--paper)}
/* generic problem/alert two-col */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.problem{background:var(--paper)}
/* ---- overlapping stack cards: each sticks and the next covers it as you scroll ---- */
.stack-wrap{position:relative;margin-top:clamp(46px,6vw,70px)}
.stack-card{position:sticky;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--rad)*1.3);
  box-shadow:0 30px 64px rgba(33,58,82,.16);padding:clamp(30px,3.6vw,50px);margin-bottom:28px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,56px);align-items:center}
.stack-card:nth-child(1){top:96px;z-index:1}
.stack-card:nth-child(2){top:122px;z-index:2}
.stack-card:nth-child(3){top:148px;z-index:3}
.stack-card:nth-child(4){top:174px;z-index:4}
.sc-idx{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ocean);margin-bottom:16px}
.sc-idx .sc-dot{width:8px;height:8px;border-radius:50%;background:var(--bronze)}
.stack-card h3{font-size:clamp(22px,2.6vw,32px);margin-bottom:12px}
.stack-card p{font-size:15px;color:var(--ink-soft)}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sc-chip{font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:100px;border:1px solid transparent}
.sc-chip.good{background:rgba(184,217,110,.24);color:#5B7A2E;border-color:rgba(184,217,110,.5)}
.sc-chip.bad{background:rgba(209,116,74,.14);color:#B4541E;border-color:rgba(209,116,74,.32)}
.sc-visual{border-radius:calc(var(--rad)*1.1);min-height:190px;display:flex;flex-direction:column;justify-content:center;padding:24px;position:relative;overflow:hidden}
.sc-visual .sv-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(33,58,82,.5);margin-bottom:14px}
/* mineral card visual */
/* pH scale visual */
.sc-visual.sv-ph{background:linear-gradient(160deg,#FBEEE6,var(--sky))}
.ph-scale{height:14px;border-radius:100px;background:linear-gradient(90deg,#D96C31 0%,#E3A24B 22%,#E9D77C 42%,#BFD98C 58%,#7FB8D9 75%,#6C63C7 100%);position:relative;margin:10px 0 12px}
.ph-marker{position:absolute;top:-9px;width:2px;height:32px;background:var(--ink)}
.ph-marker::after{content:attr(data-v);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;white-space:nowrap}
.ph-labels{display:flex;justify-content:space-between;font-size:10.5px;color:rgba(33,58,82,.5);letter-spacing:.04em}
/* ORP visual */
.sc-visual.sv-orp{background:linear-gradient(160deg,var(--violet-soft),var(--sky))}
.orp-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.orp-pole{flex:1;text-align:center;padding:14px 8px;border-radius:12px;font-size:12.5px;font-weight:700}
.orp-pole.pos{background:rgba(209,116,74,.14);color:#B4541E}
.orp-pole.neg{background:rgba(108,99,199,.14);color:var(--indigo)}
.orp-pole .op-v{font-family:var(--serif);font-size:20px;display:block;margin-bottom:4px}
@media(max-width:820px){
  .stack-card{position:relative;top:auto!important;grid-template-columns:1fr;margin-bottom:20px;box-shadow:0 16px 36px rgba(33,58,82,.1)}
}
.mini-banner{margin-top:10px;border-radius:var(--rad);padding:clamp(30px,4vw,50px);text-align:center;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px); padding-bottom: 10px;}
.mini-banner b{color:var(--ocean);font-weight:500}


.sv-mineral {
  overflow:hidden;
}

.sv-image {
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* =========================================
   PROBLEM HEADING + BOTTOM BANNER FIX
========================================= */

/* All direct content wrappers above canvas */
.problem-water > .wrap {
  position: relative;
  z-index: 2;
}

/* Top heading */
.problem-water > .problem-heading {
  position: relative;
  z-index: 5;
}

.problem-heading .eyebrow,
.problem-heading h2,
.problem-heading .lede {
  position: relative;
  z-index: 5;
  color: var(--ink);
}


/* Cards wrapper */
.problem-water > .stack-wrap {
  position: relative;
  z-index: 3;
}

/* Bottom heading/banner */
.problem-water > .problem-banner {
  position: relative;
  z-index: 6;
}


/* Canvas should remain behind everything */
.problem-water > .water-bg-canvas {
  z-index: 0;
}

.problem-water > .water-bg-veil {
  z-index: 1;
  pointer-events: none;
}



/* monsoon — hydron purple bg, rain + lightning */
.monsoon{background:linear-gradient(180deg, #1C1842 0%, #221F50 100%);color:var(--paper);overflow:hidden}
.monsoon .eyebrow{color:var(--lav)}
.monsoon h2{color:#fff}
.monsoon .lede{color:rgba(252,251,249,.72)}
#rainCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.mon-flash{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 60% 0%,rgba(233,235,250,.9),rgba(201,195,238,.3) 30%,transparent 60%);opacity:0;mix-blend-mode:screen}
.mon-inner{position:relative;z-index:2}
.mon-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:40px 0}
.mon-item{background:rgba(252,251,249,.08);border:1px solid rgba(252,251,249,.16);border-radius:16px;padding:22px 24px;font-size:15px;color:rgba(252,251,249,.82);backdrop-filter:blur(4px)}
/* stats card */
.mon-stats{margin-top:20px;padding:clamp(30px,4vw,50px);border-radius:calc(var(--rad)*1.2);background:rgba(252,251,249,.08);border:1px solid rgba(252,251,249,.18);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(20,15,50,.4)}
.mon-stats .ms-head{font-family:var(--serif);font-size:40px;color:#fff;margin-bottom:25px}
.mon-stats .ms-sub{font-size:14.5px;color:rgba(252,251,249,.66);margin-bottom:30px;max-width:560px}
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
.ms-stat{padding-right:16px;border-right:1px solid rgba(252,251,249,.16)}
.ms-stat:last-child{border-right:0}
.ms-stat .msn{font-family:var(--serif);font-size:34px;line-height:1;color:var(--lav);margin-bottom:10px}
.ms-stat p{font-size:13.5px;color:rgba(252,251,249,.74);line-height:1.55}
.ms-stat .msrc{display:block;font-size:11px;color:rgba(252,251,249,.42);margin-top:10px}
.mon-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.btn-light{background:var(--paper);color:#3A3480}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,15,50,.35)}
@media(max-width:720px){.ms-grid{grid-template-columns:1fr;gap:0}.ms-stat{border-right:0;border-bottom:1px solid rgba(252,251,249,.16);padding:18px 0}.ms-stat:last-child{border-bottom:0}}
/* checks */
/* checks */
.checks{background:var(--mist)}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:820px){.check-grid{grid-template-columns:1fr}}
.check-card.cc-wide{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:6px 22px;align-items:center;padding:24px 30px}
.check-card.cc-wide .cc-i{margin-bottom:0;grid-row:1/4}
.check-card.cc-wide .cc-n{margin-bottom:0;grid-row:1/4;align-self:center}
.check-card.cc-wide h3,.check-card.cc-wide .cc-q,.check-card.cc-wide p{grid-column:3}
.check-card.cc-wide .cc-q{margin-bottom:0}
@media(max-width:820px){.check-card.cc-wide{display:block}.check-card.cc-wide .cc-i{margin-bottom:16px}}
.check-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);padding:26px 26px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.check-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(46,110,147,.12)}
.check-card .cc-n{font-family:var(--serif);font-size:30px;color:var(--sky-3);line-height:1;margin-bottom:16px}
.check-card h3{margin-bottom:6px}
.check-card .cc-q{font-size:13.5px;font-weight:700;color:var(--ocean);margin-bottom:10px}
.check-card p{font-size:14.5px;color:var(--ink-soft)}
.check-card .cc-i{width:46px;height:46px;border-radius:13px;background:var(--sky);display:grid;place-items:center;margin-bottom:16px}
.check-card .cc-i svg{width:22px;height:22px;stroke:var(--ocean);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.check-video{grid-column:1/-1;position:relative;border-radius:calc(var(--rad)*1.2);min-height:400px;overflow:hidden;display:grid;place-items:center;gap:6px;text-align:center;background:linear-gradient(140deg,#1d2436,#2a3350);color:var(--paper)}
.check-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* ================= WATER GRADE ================= */

.grade {
  --grade-paper: #fcfbf9;
  --grade-lavender: #968ee2;
  --grade-violet: #6c63c7;
  --grade-serif: Georgia, "Times New Roman", serif;
  --grade-sans: Arial, Helvetica, sans-serif;
  --grade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grade-header-height: 80px;

  position: relative;
  color: var(--grade-paper);
  background:linear-gradient(180deg, #1C1842 0%, #221F50 100%);
  font-family: var(--grade-sans);
}

/* Scroll space for three grades */
.gpin {
  position: relative;
  height: 330svh;
}

/* Full-screen sticky stage */
.gstick {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding-top: var(--grade-header-height);
  overflow: hidden;
  /* Paint the dark background on the pinned element itself (not just the
     ancestor section). Prevents the page's light background from flashing
     through below/around the sticky stage during fast scroll on mobile. */
  background: linear-gradient(180deg, #1C1842 0%, #221F50 100%);
}

/* Changing background layers */
.gstick::before,
.gstick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--grade-ease);
}

.gstick::before {
  background: linear-gradient(
    180deg,
    #2a2463 0%,
    #221f4b 100%
  );
}

.gstick::after {
  background: linear-gradient(
    180deg,
    #1c1842 0%,
    #211e4f 100%
  );
}

.grade.g1 .gstick::before {
  opacity: 1;
}

.grade.g2 .gstick::after {
  opacity: 1;
}

.grade-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* Heading */
.grade-head {
  margin-bottom: clamp(20px, 3vh, 40px);
}

.grade-eyebrow {
  margin: 0 0 16px;
  color: var(--grade-lavender);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.grade h2,
.grade h3 {
  margin-top: 0;
  color: #fff;
  font-family: var(--grade-serif);
  font-weight: 500;
  line-height: 1.12;
}

.grade h2 {
  margin-bottom: 10px;
  font-size: clamp(26px, 3.4vw, 44px);
}

/* Three-column layout */
.ggrid {
  display: grid;
  grid-template-columns: 0.7fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
}

/* Grade navigation */
.grade-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid rgba(252, 251, 249, 0.16);
}

.gn-item {
  position: relative;
  width: 100%;
  padding: 14px 0 14px 24px;
  border: 0;
  background: transparent;
  color: rgba(252, 251, 249, 0.32);
  font-family: var(--grade-serif);
  font-size: clamp(20px, 2vw, 26px);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.5s var(--grade-ease),
    background 0.5s var(--grade-ease);
}

.gn-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 2px;
  height: 70%;
  background: var(--grade-lavender);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 0.4s var(--grade-ease);
}

.gn-item.on {
  color: #fff;
}

.gn-item.on::before {
  transform: translateY(-50%) scaleY(1);
}

.gn-item:focus-visible {
  outline: 2px solid var(--grade-lavender);
  outline-offset: 4px;
}

.gn-sub {
  display: block;
  max-height: 0;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(252, 251, 249, 0.55);
  font-family: var(--grade-sans);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition:
    opacity 0.4s var(--grade-ease),
    max-height 0.4s var(--grade-ease);
}

.gn-item.on .gn-sub {
  max-height: 40px;
  opacity: 1;
}

/* Particle glass */
.glass-wrap {
  position: relative;
  width: min(300px, 70vw);
}

#glassCanvas {
  display: block;
  width: 100%;
  aspect-ratio: 300 / 400;
}

.gmarks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.gmark {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(252, 251, 249, 0.4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 1px 8px rgba(10, 14, 24, 0.9);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, 50%);
  transition: color 0.5s var(--grade-ease);
}

.gmark::before {
  content: "";
  width: 52px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.gmark.on {
  color: #fff;
}

.gmark.m0 {
  bottom: 27%;
}

.gmark.m1 {
  bottom: 53%;
}

.gmark.m2 {
  bottom: 80%;
}

/* Right-side content */
.gtexts {
  position: relative;
  min-height: 280px;
}

.gtext {
  position: absolute;
  right: 0;
  bottom: 50%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(50%) translateX(26px);
  transition:
    opacity 0.55s var(--grade-ease),
    transform 0.55s var(--grade-ease);
}

.gtext.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(50%) translateX(0);
}

.gtext .gp-tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gtext.t0 .gp-tag {
  color: #f2c26b;
  background: rgba(242, 178, 90, 0.16);
  border: 1px solid rgba(242, 178, 90, 0.4);
}

.gtext.t1 .gp-tag {
  color: #7bdcc0;
  background: rgba(92, 190, 166, 0.14);
  border: 1px solid rgba(92, 190, 166, 0.4);
}

.gtext.t2 .gp-tag {
  color: #fff;
  background: var(--grade-violet);
}

.gtext h3 {
  margin-bottom: 14px;
  font-size: clamp(26px, 3vw, 42px);
}

.gtext p {
  max-width: 440px;
  margin: 0;
  color: rgba(252, 251, 249, 0.68);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
}

.grade-note {
  margin: clamp(20px, 4vh, 44px) 0 0;
  color: var(--grade-lavender);
  font-family: var(--grade-serif);
  font-size: clamp(17px, 1.8vw, 22px);
  font-style: italic;
  text-align: center;
}

/* Tablet/mobile */
@media (max-width: 880px) {
  .grade {
    --grade-header-height: 60px;
  }

  .gpin {
    height: 300svh;
  }

  .ggrid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    text-align: center;
  }

  .grade-head {
    text-align: center;
  }

  .grade-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border-left: 0;
  }

  .gn-item {
    width: auto;
    padding: 9px 15px;
    border: 1px solid rgba(252, 251, 249, 0.2);
    border-radius: 100px;
    font-size: 15px;
  }

  .gn-item::before,
  .gn-item .gn-sub {
    display: none;
  }

  .gn-item.on {
    color: #fff;
    background: rgba(252, 251, 249, 0.14);
  }

  .glass-wrap {
    width: min(200px, 52vw);
  }

  .gmark {
    font-size: 8.5px;
  }

  .gmark::before {
    width: 34px;
  }

  .gtexts {
    width: 100%;
    min-height: 190px;
  }

  .gtext p {
    margin: 0 auto;
  }

  .grade-note {
    display: none;
  }
}

@media (max-height: 720px) and (min-width: 881px) {
  .grade-head {
    margin-bottom: 14px;
  }

  .glass-wrap {
    width: min(230px, 50vh);
  }

  .grade-note {
    margin-top: 14px;
  }
}



/* ================= 7. HOW IT WORKS — circle images + dotted arrows ================= */
.how{background:var(--mist)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:60px;position:relative}
.how-step{padding:34px 28px;text-align:center;position:relative}
.how-circle{width:118px;height:118px;border-radius:50%;margin:0 auto 22px;position:relative;display:grid;place-items:center;background-size:cover;background-position:center;box-shadow:0 16px 36px rgba(46,110,147,.16);border:3px solid rgba(255,255,255,.9)}
.how-circle .hc-ic{position:relative;z-index:2;width:44px;height:44px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(20,25,45,.35))}
.how-step .hs-n{font-family:var(--serif);font-size:14px;letter-spacing:.16em;color:var(--ocean);margin-bottom:12px}
.how-step h3{margin-bottom:10px;font-size:19px}
.how-step p{font-size:14px;color:var(--ink-soft)}
.how-step ul{list-style:none;margin-top:10px;display:inline-flex;flex-direction:column;gap:6px;text-align:left}
.how-step li{font-size:13.5px;color:var(--ink-soft);padding-left:16px;position:relative}
.how-step li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
/* dotted connector arrow between circles */
.how-arrow{position:absolute;top:59px;right:-13px;width:26px;z-index:3;pointer-events:none;color:var(--aqua)}
.how-step:last-child .how-arrow{display:none}
@media(max-width:900px){
  .how-grid{grid-template-columns:1fr 1fr;gap:34px 26px}
  .how-arrow{display:none}
}
@media(max-width:560px){.how-grid{grid-template-columns:1fr}}




/* ================= 9. FINAL CTA ================= */
.final{background:linear-gradient(168deg,var(--sky-2),var(--sky-3));text-align:center;overflow:hidden}
.final h2 {
    font-size: 57px;
}

.test-water {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #EDF4FA;
}

.test-water > .water-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.test-water > .water-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(237,244,250,.18) 0%,
    rgba(247,244,238,.12) 48%,
    rgba(247,244,238,.30) 100%
  );
}


.problem-water {
  position: relative;
  isolation: isolate;
  background: #EDF4FA;
}

.problem-water > .water-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.problem-water > .water-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(237,244,250,.18) 0%,
    rgba(247,244,238,.12) 48%,
    rgba(247,244,238,.30) 100%
  );
}


/* =========================================
   REUSABLE ANIMATED WATER BACKGROUND
========================================= */



.final .lede{margin:24px auto 40px}
.footer{background:var(--sky-3);color:rgba(33,58,82,.7);padding:50px 0 36px;font-size:14px;border-top:1px solid var(--line)}
.foot-note{font-size:12px;margin-top:26px;max-width:760px;line-height:1.7;color:rgba(33,58,82,.5)}



/* ================= 3B. CINEMATIC STICKY ZOOM (Fovea pattern) ================= */
.cine {
  position: relative;
  height: 230svh;
  background: linear-gradient(180deg, var(--deep), #232052);
}

.cine-stick {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.cine-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--paper);
}

.cine-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 5vw;
}

.cine-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.cine-stick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(14, 17, 25, 0.82) 0%,
    rgba(14, 17, 25, 0.5) 42%,
    rgba(14, 17, 25, 0.62) 100%
  );
}

.cine-p1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) 5vw 8vh;
  transition: opacity 0.45s var(--ease);
  will-change: opacity;
}

.cine-p1 > div {
  max-width: 900px;
  text-align: center;
}

.cine-eyebrow {
  margin-bottom: 22px;
  color: var(--aqua);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cine-p1 h2 {
  margin-bottom: 24px;
  color: #fff;
  font-size: clamp(30px, 4vw, 58px);
}

.cine-p1 p {
  color: rgba(252, 251, 249, 0.72);
  font-size: clamp(16px, 1.5vw, 19px);
}

.cine-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.cine-chip {
  padding: 8px 16px;
  border: 1px solid rgba(252, 251, 249, 0.22);
  border-radius: 100px;
  background: rgba(252, 251, 249, 0.06);
  color: rgba(252, 251, 249, 0.88);
  font-size: 12.5px;
  font-weight: 600;
}

.cine-p2 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 5vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
  will-change: opacity;
}

.cine-p2 .cp-idx {
  color: rgba(252, 251, 249, 0.18);
  font-family: var(--serif);
  font-size: clamp(60px, 12vw, 150px);
  line-height: 1;
}

.cine-phrase {
  position: relative;
  height: clamp(70px, 10vw, 130px);
  margin: 6px 0 16px;
}

.cine-word {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}

.cine-word.on {
  opacity: 1;
  transform: translateY(0);
}

.cine-steps {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.cine-step {
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: rgba(252, 251, 249, 0.2);
  transition: background 0.4s;
}

.cine-step.on {
  background: var(--aqua);
}

.cine-sub {
  position: relative;
  width: min(600px, 100%);
  min-height: clamp(130px, 14vw, 180px);
}

.cine-subline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: rgba(252, 251, 249, 0.72);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.cine-subline.on {
  opacity: 1;
}

.cine-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 3;
  color: rgba(252, 251, 249, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.4s var(--ease);
  animation: cineHintBob 2s ease-in-out infinite;
}

@keyframes cineHintBob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

@media (max-width: 820px) {
  .cine {
    height: 250svh;
  }

  .cine-p1 {
    padding-inline: 6vw;
  }

  .cine-p1 h2 {
    font-size: 28px;
  }

  .cine-p2 {
    padding-inline: 6vw;
  }

  .cine-word {
    font-size: clamp(35px, 12vw, 48px);
    white-space: normal;
  }

  .cine-step {
    width: 32px;
    margin-top: 70px !important;
    margin-bottom: 20px !important;
  }

  .cine-sub {
    width: 100%;
    min-height: 250px;
  }

  .cine-subline {
    font-size: 14px;
    line-height: 1.58;
    overflow-wrap: anywhere;
  }
}

/* =====================================================
   HERO FORM COMPACT VERSION
   Keeps left text + right form layout
===================================================== */

.hero-inner{
  align-items:center;
}


/* Right form size */
.hero-form.form-card{
  padding:24px 30px;
}


/* Form heading */
.hero-form h2{
  font-size:34px;
  line-height:1.1;
  margin-bottom:8px;
}

.hero-form .hf-sub{
  margin-bottom:16px;
  font-size:13px;
}


/* Reduce spacing */
.hero-form .fg{
  margin-bottom:14px;
}

.hero-form .fg-title{
  margin-bottom:8px;
  padding-bottom:6px;
}


/* Inputs smaller */
.hero-form .f-row{
  gap:12px;
  margin-bottom:10px;
}

.hero-form .f-field input,
.hero-form .f-field select{
  height:42px;
  padding:9px 14px;
}


/* Email not full width */
.hero-form .f-field.full{
  grid-column:auto;
}


/* Personal details:
Name | Phone | Email
*/
.hero-form .fg:first-child .f-row{
  grid-template-columns:1fr 1fr;
}


/* Location:
City | Pincode
*/
.hero-form .fg:nth-child(2) .f-row{
  grid-template-columns:1fr 1fr;
}


/* Callback buttons */
.hero-form .seg{
  gap:6px;
}

.hero-form .seg label{
  padding:7px 12px;
  font-size:12px;
}


/* CTA */
.hero-form .form-submit{
  padding:12px 20px;
}


/* Trust text */
.hero-form .form-trust{
  margin-top:8px;
  font-size:11.5px;
}
/* Reduce outer empty space and bring columns closer */

.hero .wrap{
  max-width:1500px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}


.hero-inner {
    grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1fr);
    gap: 90px;
}


/* Move left content slightly inward */
.hero-copy{
  padding-left:20px;
}


/* Keep form from stretching too far */
.hero-form.form-card{
  max-width:720px;
}
/* Email full width */
.hero-form .f-field.full {
  grid-column: 1 / -1;
}

/* ================= MOBILE HERO FORM FIX ================= */

@media (max-width:900px){

  .hero-inner{
    display:flex;
    flex-direction:column;
    gap:30px;
  }


  .hero-copy{
    width:100%;
    padding-right:0;
  }


  .hero-form,
  .hero-form.form-card{
    display:block !important;
    width:100%;
    max-width:100%;
    opacity:1;
    visibility:visible;
    order:2;
  }


  .hero-form form{
    display:block;
  }


  .hero-form .f-row{
    grid-template-columns:1fr;
  }


  .hero-form .seg{
    flex-wrap:wrap;
  }

  .hero-form .fg:first-child .f-row {
    grid-template-columns: 1fr;
}

.final h2 {
    font-size: 25px;
}

.check-video{
  display: none !important;
}


}

@media (max-width:600px){


.check-video{
  display: none !important;
}
.check-card.cc-wide .cc-n {
    margin-bottom: 16px;
    align-self: center;
}
.cine-p1 p {
    color: rgba(252, 251, 249, 0.72);
    font-size: 14px;
}

.mon-stats .ms-head {
    line-height: 40px;
    font-size: 30px;
}
}

/* =========================================================
   FINAL MOBILE FIX: CINEMATIC + WATER GRADE
   Added after the existing stylesheet so desktop and old
   scroll interactions remain unchanged.
========================================================= */

@media (max-width: 900px) {

  /* ---------- CINEMATIC STICKY SECTION ---------- */

  #cine.cine {
    position: relative;
    height: 250vh !important;
    height: 250dvh !important;
    min-height: 250vh !important;
    min-height: 250dvh !important;
    background: #1b1740 !important;
  }

  #cine .cine-stick {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden;
    background: #0e1119;
  }

  #cine .cine-bg-video,
  #cine .cine-layer,
  #cine .cine-inner {
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
  }

  #cine .cine-bg-video {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
  }

  #cine .cine-inner {
    max-width: none;
    margin: 0;
    padding: 0 !important;
  }

  #cine .cine-stick::after {
    background: linear-gradient(
      180deg,
      rgba(14, 17, 25, 0.52) 0%,
      rgba(14, 17, 25, 0.42) 42%,
      rgba(14, 17, 25, 0.76) 100%
    );
  }

  #cine .cine-p1,
  #cine .cine-p2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  #cine .cine-p1 {
    align-items: center;
    justify-content: center;
    padding:
      max(calc(var(--header-h) + 22px), calc(env(safe-area-inset-top) + 82px))
      20px
      max(40px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  }

  #cine .cine-p1 > div {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  #cine .cine-eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.17em;
  }

  #cine .cine-p1 h2 {
    margin-bottom: 16px;
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.06;
  }

  #cine .cine-p1 p {
    font-size: 13.5px;
    line-height: 1.52;
  }

  #cine .cine-chips {
    gap: 7px;
    margin-top: 18px;
  }

  #cine .cine-chip {
    padding: 6px 10px;
    font-size: 10px;
  }

  #cine .cine-p2 {
    align-items: flex-start;
    justify-content: center;
    padding:
      max(calc(var(--header-h) + 20px), calc(env(safe-area-inset-top) + 80px))
      22px
      max(38px, calc(env(safe-area-inset-bottom) + 22px)) !important;
  }

  #cine .cine-phrase {
    position: relative;
    flex: 0 0 auto;
    width: 100% !important;
    height: clamp(108px, 28vw, 142px) !important;
    margin: 0 0 12px;
  }

  #cine .cine-word {
    width: 100%;
    max-width: 8.5ch;
    font-size: clamp(42px, 13vw, 62px);
    line-height: 0.98;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  #cine .cine-steps {
    flex: 0 0 auto;
    gap: 8px;
    margin: 0 0 18px !important;
  }

  #cine .cine-step {
    width: 38px;
    height: 3px;
    margin: 0 !important;
  }

  #cine .cine-sub {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    min-height: 118px !important;
  }

  #cine .cine-subline {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.52;
    overflow-wrap: normal;
    word-break: normal;
  }

  #cine .cine-hint {
    bottom: max(15px, env(safe-area-inset-bottom));
    font-size: 9px;
  }


  /* ---------- WATER GRADE STICKY SECTION ---------- */

  #waterGrade.grade {
    position: relative;
    overflow: clip;
    background: linear-gradient(180deg, #1c1842 0%, #221f50 100%);
  }

  #waterGrade .gpin {
    position: relative;
    height: 300vh !important;
    height: 300dvh !important;
    min-height: 300vh !important;
    min-height: 300dvh !important;
  }

  #waterGrade .gstick {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    padding:
      max(calc(var(--header-h) + 14px), calc(env(safe-area-inset-top) + 82px))
      0
      max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  #waterGrade .grade-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  #waterGrade .grade-head {
    flex: 0 0 auto;
    margin: 0 0 10px;
    text-align: center;
  }

  #waterGrade .grade-eyebrow {
    margin: 0 0 4px;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.15em;
  }

  #waterGrade .grade-head h2 {
    margin: 0;
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1.04;
  }

  #waterGrade .ggrid {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    text-align: center;
  }

  #waterGrade .grade-nav {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 6px !important;
    border-left: 0;
  }

  #waterGrade .gn-item {
    width: auto;
    min-width: 0;
    padding: 7px 12px !important;
    border: 1px solid rgba(252, 251, 249, 0.22);
    border-radius: 999px;
    font-size: clamp(12.5px, 3.8vw, 15px);
    line-height: 1.2;
    white-space: nowrap;
  }

  #waterGrade .gn-item::before,
  #waterGrade .gn-sub {
    display: none !important;
  }

  #waterGrade .glass-wrap {
    flex: 0 0 auto;
    width: min(165px, 42vw, 22dvh) !important;
    max-width: 100%;
    margin: 0 auto;
  }

  #waterGrade #glassCanvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 400;
  }

  #waterGrade .gmark {
    font-size: 7.4px;
    line-height: 1.15;
    letter-spacing: 0.1em;
  }

  #waterGrade .gmark::before {
    width: 28px;
  }

  #waterGrade .gtexts {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 178px !important;
    min-height: 178px !important;
    overflow: hidden;
  }

  #waterGrade .gtext {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(18px);
  }

  #waterGrade .gtext.on {
    opacity: 1;
    transform: translateX(0);
  }

  #waterGrade .gtext .gp-tag {
    margin-bottom: 8px;
    padding: 6px 11px;
    font-size: 8.5px;
    line-height: 1.25;
    letter-spacing: 0.13em;
  }

  #waterGrade .gtext h3 {
    margin-bottom: 7px;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.04;
  }

  #waterGrade .gtext p {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    font-size: 12.8px;
    line-height: 1.42;
  }

  #waterGrade .grade-note {
    display: none !important;
  }
}


/* Short-height phones, including older iPhones */
@media (max-width: 900px) and (max-height: 740px) {

  #cine .cine-p1,
  #cine .cine-p2 {
    padding-top:
      max(calc(var(--header-h) + 10px), calc(env(safe-area-inset-top) + 70px)) !important;
    padding-bottom:
      max(24px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }

  #cine .cine-p1 h2 {
    font-size: 26px;
    margin-bottom: 11px;
  }

  #cine .cine-p1 p {
    font-size: 12.5px;
    line-height: 1.44;
  }

  #cine .cine-chips {
    margin-top: 12px;
  }

  #cine .cine-phrase {
    height: 53px !important;
    margin-bottom: 8px;
  }

  #cine .cine-word {
    max-width: 14ch;
    font-size: 38px;
  }

  #cine .cine-steps {
    margin-bottom: 12px !important;
  }

  #cine .cine-sub {
    min-height: 92px !important;
  }

  #cine .cine-subline {
    font-size: 12.5px;
    line-height: 1.42;
  }

  #waterGrade .gstick {
    padding-top:
      max(calc(var(--header-h) + 8px), calc(env(safe-area-inset-top) + 68px)) !important;
    padding-bottom:
      max(10px, calc(env(safe-area-inset-bottom) + 4px)) !important;
  }

  #waterGrade .grade-head {
    margin-bottom: 6px;
  }

  #waterGrade .grade-eyebrow {
    font-size: 8px;
  }

  #waterGrade .grade-head h2 {
    font-size: 23px;
    margin: 1rem;
  }

  #waterGrade .ggrid {
    gap: 5px !important;
  }

  #waterGrade .gn-item {
    padding: 6px 10px !important;
    font-size: 12px;
  }

  #waterGrade .glass-wrap {
    width: min(138px, 38vw, 19dvh) !important;
  }

  #waterGrade .gtexts {
    height: 160px !important;
    min-height: 160px !important;
  }

  #waterGrade .gtext .gp-tag {
    margin-bottom: 6px;
    padding: 5px 9px;
    font-size: 7.5px;
  }

  #waterGrade .gtext h3 {
    margin-bottom: 5px;
    font-size: 22px;
  }

  #waterGrade .gtext p {
    font-size: 11.5px;
    line-height: 1.34;
  }
}


/* Very narrow phones */
@media (max-width: 380px) {

  #cine .cine-p1,
  #cine .cine-p2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #cine .cine-word {
    font-size: 36px;
  }

  #waterGrade .grade-wrap {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }

  #waterGrade .gn-item {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 11.5px;
  }

  #waterGrade .gtext p {
    font-size: 11.2px;
  }
}
/* WATER GRADE: REDUCE ONLY BOTTOM EMPTY SPACE */

@media (max-width: 880px) {
  #waterGrade .grade-wrap {
    justify-content: center !important;
  }

  #waterGrade .ggrid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    gap: 12px !important;
  }

  #waterGrade .grade-wrap,
  #waterGrade .grade-head,
  #waterGrade .glass-wrap,
  #waterGrade .gtexts {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #waterGrade .glass-wrap {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #waterGrade .gtexts {
    padding-top: 12px !important;
  }
}