/* Sewage treatment: underwater hero, glasses that clear, a path a droplet follows, gauges, plants */
.wt-hero { position: relative; min-height: 92svh; display: grid; align-items: end; padding: 140px 0 clamp(60px, 10vh, 110px); color: #fff; overflow: hidden;
  background: radial-gradient(70% 55% at 50% -5%, #3fb6d9 0%, #1677a8 35%, #0b4a78 65%, #062a4a 100%); }
.wt-rays i { position: absolute; top: -10%; width: 18%; height: 120%; left: var(--x); background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 75%); transform: skewX(var(--k)); filter: blur(10px); opacity: .5; animation: wt-ray 9s ease-in-out infinite alternate; animation-delay: var(--d); }
.wt-rays i:nth-child(1) { --x: 8%; --k: 18deg; --d: 0s; } .wt-rays i:nth-child(2) { --x: 28%; --k: 10deg; --d: -3s; width: 10%; }
.wt-rays i:nth-child(3) { --x: 46%; --k: 4deg; --d: -6s; } .wt-rays i:nth-child(4) { --x: 64%; --k: -6deg; --d: -2s; width: 12%; } .wt-rays i:nth-child(5) { --x: 80%; --k: -14deg; --d: -5s; }
@keyframes wt-ray { to { opacity: .18; transform: skewX(calc(var(--k) * -.4)) translateX(30px); } }
.wt-bubbles span { position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 60%); animation: wt-bub var(--t) linear infinite; animation-delay: var(--d); }
@keyframes wt-bub { to { transform: translate(var(--w), -110svh); opacity: 0; } }
.wt-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(6, 42, 74, .8)); }
.wt-hero__copy { position: relative; z-index: 1; display: grid; gap: 18px; }
.wt-hero__copy .crumbs { color: rgba(255, 255, 255, .7); }
.wt-kicker { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #a6e8ff; }
.wt-hero__lede { max-width: 50ch; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .85); }

.wt-what__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.wt-what__copy { display: grid; gap: 20px; }
.glasses { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); align-items: end; padding: 30px; border-radius: 26px; background: linear-gradient(180deg, #f4f7fb, #e9eef5); }
.glass { display: grid; gap: 12px; justify-items: center; text-align: center; }
.glass__water { position: relative; width: 100%; max-width: 130px; aspect-ratio: .62; border: 2px solid rgba(13, 20, 36, .18); border-top-color: transparent; border-radius: 6px 6px 18px 18px; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, .5)); box-shadow: inset 0 -6px 12px rgba(13, 20, 36, .08); }
.glass__water i { position: absolute; left: 0; right: 0; bottom: 0; height: 86%; background: var(--w0); transition: background 1.6s var(--ease); }
.glass__water i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sludge, 0%); background: linear-gradient(180deg, #5b4a2e, #3a2e1c); transition: height 2s var(--ease) .6s; }
.glass--raw { --w0: linear-gradient(180deg, #3a3326, #231e15); }
.glass--ec { --w0: linear-gradient(180deg, #8d8a7c, #6d6a5c); }
.glass--clear { --w0: linear-gradient(180deg, #8b8778, #6a675a); }
.glasses.is-on .glass--ec .glass__water i { background: linear-gradient(180deg, rgba(150, 150, 135, .75), rgba(120, 118, 100, .85)); }
.glasses.is-on .glass--clear .glass__water i { background: linear-gradient(180deg, rgba(220, 238, 246, .55), rgba(190, 220, 235, .65)); --sludge: 16%; }
.glass figcaption { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.glass figcaption b { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.glasses__note { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); }

.wt-path { padding: clamp(80px, 10vw, 130px) 0; background: #062a4a; color: #fff; }
.wt-path .eyebrow { color: #a6e8ff; }
.path { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 0 clamp(16px, 3vw, 40px); }
.path__line { position: relative; grid-row: 1; border-radius: 4px; }
.path__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: rgba(166, 232, 255, .15); }
.path__line i { position: absolute; left: 50%; top: 0; width: 4px; margin-left: -2px; height: calc(var(--pp, 0) * 100%); border-radius: 4px; background: linear-gradient(180deg, #3fb6d9, #a6e8ff); }
.path__drop { position: absolute; left: 50%; top: calc(var(--pp, 0) * 100%); width: 26px; height: 32px; margin: -16px 0 0 -13px; background: radial-gradient(circle at 40% 60%, #e9fbff, #3fb6d9 70%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: path('M13 0 C 13 0 26 15 26 21 A 13 11 0 0 1 0 21 C 0 15 13 0 13 0 Z'); box-shadow: 0 0 20px #3fb6d9; }
.path__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 7vh, 80px); counter-reset: st; }
.path__steps li { counter-increment: st; display: grid; gap: 8px; opacity: .35; transition: opacity .5s; }
.path__steps li.is-on { opacity: 1; }
.path__steps b { font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); }
.path__steps b::before { content: "0" counter(st) "  "; color: #a6e8ff; font-size: .5em; vertical-align: middle; letter-spacing: .1em; }
.path__steps p { max-width: 58ch; color: rgba(255, 255, 255, .78); }

.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 50px; }
.gauge { position: relative; margin: 0; display: grid; justify-items: center; gap: 10px; padding: 26px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); text-align: center; }
.gauge svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke: #e6eef5; stroke-width: 10; }
.gauge .gauge__run { stroke: #1f7fc8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.gauges.is-on .gauge__run { stroke-dashoffset: calc(1 - var(--v)); }
.gauge b { position: absolute; top: 76px; font-size: 28px; font-weight: 500; transform: translateY(-50%); color: var(--ink); }
.gauge figcaption { font-size: 14px; color: var(--muted); max-width: 18ch; }
.wt-lists { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
.wt-lists h3 { font-size: 20px; margin-bottom: 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.ticks li::before { content: ""; width: 8px; height: 5px; border: solid #1f7fc8; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); }

.wt-design__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.wt-design__grid > div:first-child { display: grid; gap: 16px; }
.wt-design__note { font-size: 13.5px; color: var(--muted); padding-left: 14px; border-left: 2px solid #1f7fc8; }
.tbl { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.tbl__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl__row:first-child { border-top: 0; }
.tbl__row--head { background: #062a4a; color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.tbl__row span:first-child { font-weight: 500; }
.tbl__row span:last-child { color: #1677a8; font-weight: 500; }

.plants { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plant { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.plant b { font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: #1677a8; }
.plant b small { font-size: 14px; letter-spacing: 0; color: var(--muted); }
.plant__bar { height: 6px; border-radius: 6px; background: #e6eef5; overflow: hidden; }
.plant__bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); background: linear-gradient(90deg, #3fb6d9, #1677a8); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.plant.is-in .plant__bar i { transform: scaleX(1); }
.plant h3 { font-size: 16px; line-height: 1.3; }
.plant p { font-size: 13.5px; color: var(--muted); }
.sg { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; cursor: grab; }
.sg__ph { flex: none; width: clamp(220px, 24vw, 320px); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 16px; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; background: var(--bg-soft); }
.sg__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sg__ph:hover img { transform: scale(1.05); }
.wt-dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }

@media (max-width: 1000px) {
  .wt-what__grid, .wt-design__grid, .wt-lists { grid-template-columns: 1fr; }
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .plants { grid-template-columns: 1fr; } .glasses { padding: 18px; } .tbl__row { font-size: 13px; padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .wt-rays i, .wt-bubbles span { animation: none; } }