/* ============================================================
   sections.css — chapter specific treatments
   ============================================================ */

/* ---------- 2. Hero — "every drop has a journey" ---------- */

.chapter--hero {
  min-height: 100svh;
  padding-block: 0;
  overflow: hidden;
  isolation: isolate;
}

/* decorative atmosphere sitting between the fixed Three.js canvas (z:0)
   and the hero copy — never intercepts pointer events, never affects
   layout of the page around it. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__ray {
  position: absolute;
  top: -20%;
  width: clamp(16rem, 30vw, 34rem);
  height: 150%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 45%,
    transparent 80%);
  filter: blur(6px);
  transform-origin: top center;
  opacity: 0.55;
  animation: hero-ray-drift 16s ease-in-out infinite;
}
.hero__ray--a { left: 8%; transform: rotate(9deg); animation-delay: 0s; }
.hero__ray--b { right: 4%; left: auto; transform: rotate(-13deg); animation-delay: -7s; opacity: 0.4; }
@keyframes hero-ray-drift {
  0%, 100% { transform: rotate(9deg) translateX(0); opacity: 0.4; }
  50% { transform: rotate(6deg) translateX(1.5%); opacity: 0.6; }
}
.hero__glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: clamp(20rem, 46vw, 46rem);
  height: clamp(20rem, 46vw, 46rem);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow), transparent 68%);
  filter: blur(24px);
  opacity: 0.5;
  animation: hero-glow-pulse 9s ease-in-out infinite;
}
@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 30%, transparent 68%, var(--bg) 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 45%, color-mix(in srgb, var(--bg) 60%, transparent) 100%);
}

.hero__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(6rem, 12vh, 8.5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 6vh, 4rem);
}

/* ---- chapter marker ---- */
.hero__chapter {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  align-self: flex-start;
}
.hero__chapter-drop {
  width: 7px; height: 7px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent);
  box-shadow: 0 0 16px var(--glow);
  flex: none;
}
.hero__chapter-num {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--accent);
  line-height: 1;
}
.hero__chapter-rule { width: 2.6rem; height: 1px; background: var(--rule); flex: none; }
.hero__chapter-label {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- headline + panel ---- */
.hero__core {
  display: grid;
  gap: clamp(2rem, 5vh, 3.2rem);
  max-width: 62rem;
}

.chapter--hero .hero__title {
  font-size: clamp(3rem, 2.1rem + 6.4vw, 8.4rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.chapter--hero .hero__title .line {
  display: block;
  overflow: hidden;
}
.chapter--hero .hero__title .line--glow {
  color: var(--accent);
  text-shadow: 0 0 46px var(--glow), 0 0 120px color-mix(in srgb, var(--accent) 35%, transparent);
}

.hero__panel {
  display: grid;
  gap: clamp(1.5rem, 3vh, 2.2rem);
  max-width: 40rem;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.4rem);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px 18px 18px 4px;
}
.hero__lede {
  font-size: var(--t-md);
  max-width: 38ch;
  color: var(--ink);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---- buttons ---- */
.hero__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease), color var(--mid) var(--ease);
}
.hero__btn-label { position: relative; z-index: 1; }

.hero__btn--primary {
  color: var(--abyss);
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--ice)));
  box-shadow: 0 8px 30px -10px var(--glow);
}
.hero__btn--primary .hero__btn-glint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 62%);
  transform: translateX(-120%);
}
.hero__btn--primary:hover,
.hero__btn--primary:focus-visible {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 40px -8px var(--glow);
}
.hero__btn--primary:hover .hero__btn-glint,
.hero__btn--primary:focus-visible .hero__btn-glint {
  transform: translateX(120%);
  transition: transform 0.85s var(--ease);
}

.hero__btn--secondary {
  color: var(--ink);
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
}
.hero__btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.hero__btn--secondary:hover,
.hero__btn--secondary:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.hero__btn--secondary:hover::before,
.hero__btn--secondary:focus-visible::before { transform: scaleX(1); }

/* ---- scroll cue ---- */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  align-self: flex-start;
  color: var(--ink-soft);
  transition: color var(--fast);
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-label {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__scroll-track {
  position: relative;
  width: 1px;
  height: 2.6rem;
  background: var(--rule);
  overflow: hidden;
}
.hero__scroll-drop {
  position: absolute;
  left: -1.5px;
  top: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  animation: hero-scroll-fall 2.4s var(--ease) infinite;
}
@keyframes hero-scroll-fall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(2.8rem); opacity: 0; }
}
.hero__scroll-arrow { font-size: var(--t-sm); animation: hero-scroll-nudge 2.4s var(--ease) infinite; }
@keyframes hero-scroll-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* one orchestrated load sequence */
[data-load] { opacity: 0; transform: translateY(18px); }
body.is-ready [data-load] {
  animation: rise 1s var(--ease) forwards;
}
body.is-ready [data-load="1"] { animation-delay: 0.10s; }
body.is-ready [data-load="2"] { animation-delay: 0.22s; }
body.is-ready [data-load="3"] { animation-delay: 0.46s; }
body.is-ready [data-load="4"] { animation-delay: 0.58s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* GSAP takes over the headline lines once it boots (see hero.js); until
   then, or if it never loads, the CSS rise animation above still delivers
   a full, legible entrance. */
body.hero-gsap-ready .chapter--hero .hero__title .line { opacity: 1; transform: none; animation: none; }

/* ---- light theme: sky-blue water lab atmosphere ----
   The dark-theme tokens (--ink, --accent, --glow, --bg) already swap via
   [data-theme="lab"] in base.css. These rules only sharpen the hero's own
   read against a bright tank instead of a deep one — nothing here reaches
   outside .chapter--hero, and nothing here touches the dark theme. */
[data-theme="lab"] .chapter--hero .hero__title { color: #102A43; }
[data-theme="lab"] .chapter--hero .hero__title .line--glow {
  color: #0B7A7A;
  text-shadow: 0 0 40px rgba(11, 140, 140, 0.28), 0 0 90px rgba(11, 140, 140, 0.14);
}
[data-theme="lab"] .chapter--hero .hero__lede { color: #243B53; }
[data-theme="lab"] .chapter--hero .hero__chapter-num { color: #0B7A7A; }
[data-theme="lab"] .chapter--hero .hero__chapter-label,
[data-theme="lab"] .chapter--hero .hero__scroll-label { color: #486581; }
[data-theme="lab"] .chapter--hero .hero__scroll { color: #486581; }
[data-theme="lab"] .chapter--hero .hero__scroll:hover { color: #102A43; }

[data-theme="lab"] .chapter--hero .hero__panel {
  background: rgba(255, 255, 255, 0.42);
  border-left-color: rgba(11, 140, 140, 0.4);
  box-shadow: 0 30px 70px -40px rgba(16, 42, 67, 0.35);
}
[data-theme="lab"] .chapter--hero .hero__btn--secondary { color: #102A43; }

/* rays and glow read as sunlit water rather than deep-sea light */
[data-theme="lab"] .hero__ray {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(11, 140, 140, 0.10) 45%,
    transparent 80%);
  opacity: 0.7;
}
[data-theme="lab"] .hero__glow { opacity: 0.35; background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 68%); }
[data-theme="lab"] .hero__vignette {
  background:
    linear-gradient(180deg, rgba(238, 245, 249, 0.35) 0%, transparent 28%, transparent 70%, var(--bg) 100%),
    radial-gradient(120% 90% at 50% 28%, transparent 40%, rgba(238, 245, 249, 0.55) 100%);
}

/* ---------- 4. Purification process — Part 5 ---------- */
#purification { min-height: 190svh; }
.purification { row-gap: clamp(3rem, 8vh, 7rem); }
.purification__head {
  grid-column: 2 / 7;
  position: sticky;
  top: 24vh;
  align-self: start;
}
.purification__eyebrow {
  color: var(--accent);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.purification__head .chapter__title { text-transform: uppercase; }
.purification__sequence {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  padding-left: 2.25rem;
}
.purification__progress {
  position: absolute;
  left: 0.35rem;
  top: 0.7rem;
  bottom: 3.8rem;
  width: 1px;
  background: var(--rule);
  transform-origin: top;
}
.purification__progress span {
  display: block;
  width: 3px;
  height: 100%;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.purification__stages { display: grid; gap: 0.8rem; }
.purification__stage-card { position: relative; }
.purification__stage-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -2.25rem;
  top: 1.15rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.purification__stage-card.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--glow), 0 0 18px var(--glow);
}
.purification__stage-card button {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.1rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.purification__stage-card button:hover,
.purification__stage-card button:focus-visible,
.purification__stage-card.is-active button {
  background: var(--glass-bg);
  border-color: var(--glass-edge);
  box-shadow: 0 18px 40px -32px var(--glow);
}
.purification__stage-card button:hover { transform: translateX(0.2rem); }
.purification__stage-number { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.purification__stage-copy { display: grid; gap: 0.42rem; }
.purification__stage-copy strong { font-size: var(--t-base); font-weight: 500; }
.purification__stage-copy span,
.purification__stage-copy em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.45; }
.purification__stage-copy em { font-style: normal; font-size: var(--t-xs); color: var(--accent); }
.purification__note {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* ---------- 5. What is removed — scale line ---------- */
.scaleline { grid-column: 2 / 13; grid-row: 2; position: relative; padding-top: 2.5rem; }
.scaleline__track { height: 1px; background: var(--rule); }
.scaleline ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.4rem;
}
.scaleline li { display: grid; gap: 0.4rem; justify-items: start; position: relative; }
.scaleline li::before {
  content: "";
  display: block;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 20px var(--glow);
  margin-bottom: 0.6rem;
}
.scaleline li[data-size="sediment"]::before { width: 44px; height: 44px; }
.scaleline li[data-size="cyst"]::before     { width: 30px; height: 30px; }
.scaleline li[data-size="bacteria"]::before { width: 20px; height: 20px; }
.scaleline li[data-size="virus"]::before    { width: 11px; height: 11px; }
.scaleline li[data-size="ion"]::before      { width: 5px;  height: 5px;  }
.scaleline span { font-size: var(--t-sm); }
.scaleline em { font-style: normal; font-size: var(--t-xs); color: var(--ink-soft); }

/* ---------- 6. Filter laboratory — Part 6 ---------- */
#laboratory { min-height: 170svh; }
.filter-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.filter-lab__head {
  grid-column: 2 / 7;
  position: sticky;
  top: 22vh;
  align-self: start;
}
.filter-lab__eyebrow {
  color: var(--accent);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.filter-lab__head .chapter__title { text-transform: uppercase; }
.filter-lab__visual {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 72%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.filter-lab__visual::before,
.filter-lab__visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.filter-lab__visual::before {
  inset: 12% 21%;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 60px -22px var(--glow), inset 0 0 42px -22px var(--glow);
  transform: perspective(24rem) rotateX(64deg) rotateZ(-12deg);
}
.filter-lab__visual::after {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
  box-shadow: 0 0 20px var(--glow);
}
.filter-lab__visual-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
.filter-lab__readout,
.filter-lab__scale {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.filter-lab__readout { left: 1.25rem; top: 1.25rem; }
.filter-lab__readout strong { color: var(--accent); font-weight: 500; }
.filter-lab__scale { right: 1.25rem; bottom: 1.25rem; justify-items: end; }
.filter-lab__scale i { display: block; width: 4rem; height: 1px; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.filter-lab__sequence {
  grid-column: 9 / 13;
  grid-row: 2;
  position: relative;
  padding-left: 2rem;
}
.filter-lab__rail {
  position: absolute;
  left: 0.3rem;
  top: 0.8rem;
  bottom: 4.2rem;
  width: 1px;
  background: var(--rule);
}
.filter-lab__rail span {
  display: block;
  width: 3px;
  height: 100%;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.filter-lab__stages { display: grid; gap: 0.7rem; }
.filter-lab__stage { position: relative; }
.filter-lab__stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -2rem;
  top: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.filter-lab__stage.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--glow), 0 0 16px var(--glow);
}
.filter-lab__stage button {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  width: 100%;
  padding: 0.9rem 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.filter-lab__stage button:hover,
.filter-lab__stage button:focus-visible,
.filter-lab__stage.is-active button {
  background: var(--glass-bg);
  border-color: var(--glass-edge);
  box-shadow: 0 16px 36px -30px var(--glow);
}
.filter-lab__stage button:hover { transform: translateX(0.18rem); }
.filter-lab__stage-index { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.filter-lab__stage button > span:last-child { display: grid; gap: 0.3rem; }
.filter-lab__stage strong { font-size: var(--t-base); font-weight: 500; }
.filter-lab__stage small,
.filter-lab__stage em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.42; }
.filter-lab__stage em { color: var(--accent); font-size: var(--t-xs); font-style: normal; }
.filter-lab__note { margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- 7. Water quality laboratory — Part 7 ---------- */
#quality { min-height: 180svh; }
.quality-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.quality-lab__head {
  grid-column: 2 / 7;
  position: sticky;
  top: 22vh;
  align-self: start;
}
.quality-lab__eyebrow {
  color: var(--accent);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quality-lab__head .chapter__title { text-transform: uppercase; }
.quality-lab__visual {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 72%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.quality-lab__visual::before,
.quality-lab__visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.quality-lab__visual::before {
  inset: 16% 24%;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50% 50% 42% 42%;
  box-shadow: 0 0 70px -28px var(--glow), inset 0 0 45px -24px var(--glow);
  transform: perspective(24rem) rotateX(58deg) rotateZ(-8deg);
}
.quality-lab__visual::after {
  left: 14%;
  right: 14%;
  top: 53%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.65;
  box-shadow: 0 0 22px var(--glow);
}
.quality-lab__sample {
  position: absolute;
  bottom: 19%;
  width: 4.2rem;
  height: 10rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-top: 0;
  border-radius: 0 0 1.8rem 1.8rem;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--accent) 20%, transparent));
  box-shadow: inset 0 -18px 26px -18px var(--glow), 0 0 24px -18px var(--glow);
}
.quality-lab__sample span {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.6rem;
  height: 42%;
  border-radius: 0 0 1.3rem 1.3rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 -8px 18px -14px var(--accent);
}
.quality-lab__sample--a { left: 31%; transform: rotate(-5deg); }
.quality-lab__sample--b { right: 31%; transform: rotate(5deg); opacity: 0.64; }
.quality-lab__scan {
  position: absolute;
  z-index: 1;
  left: 20%;
  right: 20%;
  top: 22%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--glow);
  opacity: 0.8;
  animation: quality-scan 6s var(--ease) infinite;
}
@keyframes quality-scan {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50% { transform: translateY(13rem); opacity: 0.85; }
}
.quality-lab__readout,
.quality-lab__metrics {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quality-lab__readout { left: 1.25rem; top: 1.25rem; }
.quality-lab__readout strong { color: var(--accent); font-weight: 500; }
.quality-lab__metrics { right: 1.25rem; bottom: 1.25rem; justify-items: end; }
.quality-lab__metrics span { display: flex; gap: 0.55rem; }
.quality-lab__metrics b { color: var(--accent); font-weight: 500; }
.quality-lab__sequence {
  grid-column: 9 / 13;
  grid-row: 2;
  position: relative;
  padding-left: 2rem;
}
.quality-lab__rail {
  position: absolute;
  left: 0.3rem;
  top: 0.8rem;
  bottom: 4.1rem;
  width: 1px;
  background: var(--rule);
}
.quality-lab__rail span {
  display: block;
  width: 3px;
  height: 100%;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.quality-lab__parameters { display: grid; gap: 0.7rem; }
.quality-lab__parameter { position: relative; }
.quality-lab__parameter::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -2rem;
  top: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.quality-lab__parameter.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--glow), 0 0 16px var(--glow);
}
.quality-lab__parameter button {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 0.8rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.quality-lab__parameter button:hover,
.quality-lab__parameter button:focus-visible,
.quality-lab__parameter.is-active button {
  background: var(--glass-bg);
  border-color: var(--glass-edge);
  box-shadow: 0 16px 36px -30px var(--glow);
}
.quality-lab__parameter button:hover { transform: translateX(0.18rem); }
.quality-lab__index { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.quality-lab__parameter button > span:last-child { display: grid; gap: 0.3rem; }
.quality-lab__parameter strong { font-size: var(--t-base); font-weight: 500; }
.quality-lab__parameter small,
.quality-lab__parameter em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.42; }
.quality-lab__parameter em { color: var(--accent); font-size: var(--t-xs); font-style: normal; }
.quality-lab__parameter i { color: var(--ink-soft); font-size: var(--t-xs); font-style: normal; letter-spacing: 0.1em; }
.quality-lab__note { margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- 8. Clean handling and packaging — Part 8 ---------- */
#handling { min-height: 180svh; }
.handling-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.handling-lab__head {
  grid-column: 2 / 7;
  position: sticky;
  top: 22vh;
  align-self: start;
}
.handling-lab__eyebrow {
  color: var(--accent);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.handling-lab__head .chapter__title { text-transform: uppercase; }
.handling-lab__visual {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 74%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.handling-lab__visual::before,
.handling-lab__visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.handling-lab__visual::before {
  left: 11%;
  right: 11%;
  bottom: 27%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  box-shadow: 0 0 18px var(--glow);
}
.handling-lab__visual::after {
  inset: 13% 18%;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 50%;
  transform: perspective(24rem) rotateX(62deg) rotateZ(-8deg);
  box-shadow: inset 0 0 50px -30px var(--glow);
}
.handling-lab__conveyor {
  position: absolute;
  z-index: 1;
  left: 15%;
  right: 15%;
  bottom: 22%;
  height: 3.4rem;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 40%, transparent);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, transparent 0 2.2rem, color-mix(in srgb, var(--accent) 18%, transparent) 2.2rem 2.3rem);
  box-shadow: inset 0 0 18px -12px var(--ink), 0 0 22px -18px var(--glow);
}
.handling-lab__conveyor span {
  position: absolute;
  bottom: 0.35rem;
  width: 1.9rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-top: 0;
  border-radius: 0 0 0.8rem 0.8rem;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--accent) 22%, transparent));
  animation: handling-conveyor 12s linear infinite;
}
.handling-lab__conveyor span:nth-child(1) { left: 12%; animation-delay: -1s; }
.handling-lab__conveyor span:nth-child(2) { left: 47%; animation-delay: -5s; }
.handling-lab__conveyor span:nth-child(3) { left: 82%; animation-delay: -9s; }
@keyframes handling-conveyor {
  0% { transform: translateX(-0.3rem); opacity: 0.35; }
  45% { opacity: 0.85; }
  100% { transform: translateX(0.3rem); opacity: 0.35; }
}
.handling-lab__nozzle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 24%;
  width: 0.8rem;
  height: 5.4rem;
  border-inline: 1px solid color-mix(in srgb, var(--ink-soft) 60%, transparent);
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
}
.handling-lab__nozzle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.5rem;
  width: 3rem;
  height: 0.5rem;
  transform: translateX(-50%);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-bg);
}
.handling-lab__nozzle i {
  position: absolute;
  left: 50%;
  bottom: -0.75rem;
  width: 0.3rem;
  height: 0.65rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--glow);
  animation: handling-drop 3.8s var(--ease) infinite;
}
@keyframes handling-drop {
  0%, 25% { opacity: 0; transform: translate(-50%, -0.4rem) scale(0.7); }
  48% { opacity: 1; }
  78%, 100% { opacity: 0; transform: translate(-50%, 4.7rem) scale(1); }
}
.handling-lab__droplet { display: none; }
.handling-lab__readout,
.handling-lab__label {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.handling-lab__readout { left: 1.25rem; top: 1.25rem; }
.handling-lab__readout strong { color: var(--accent); font-weight: 500; }
.handling-lab__label { right: 1.25rem; bottom: 1.25rem; justify-items: end; }
.handling-lab__label b { color: var(--accent); font-weight: 500; }
.handling-lab__sequence {
  grid-column: 9 / 13;
  grid-row: 2;
  position: relative;
  padding-left: 2rem;
}
.handling-lab__rail {
  position: absolute;
  left: 0.3rem;
  top: 0.8rem;
  bottom: 4.1rem;
  width: 1px;
  background: var(--rule);
}
.handling-lab__rail span {
  display: block;
  width: 3px;
  height: 100%;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.handling-lab__stages {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.handling-lab__stage { position: relative; }
.handling-lab__stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -2rem;
  top: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.handling-lab__stage.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--glow), 0 0 16px var(--glow);
}
.handling-lab__stage button {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 0.8rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.handling-lab__stage button:hover,
.handling-lab__stage button:focus-visible,
.handling-lab__stage.is-active button {
  background: var(--glass-bg);
  border-color: var(--glass-edge);
  box-shadow: 0 16px 36px -30px var(--glow);
}
.handling-lab__stage button:hover { transform: translateX(0.18rem); }
.handling-lab__index { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.handling-lab__stage button > span:last-child { display: grid; gap: 0.3rem; }
.handling-lab__stage strong { font-size: var(--t-base); font-weight: 500; }
.handling-lab__stage small,
.handling-lab__stage em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.42; }
.handling-lab__stage em { color: var(--accent); font-size: var(--t-xs); font-style: normal; }
.handling-lab__note { margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- 9. Water storage and materials — Part 9 ---------- */
#storage, #materials { min-height: 175svh; }
.storage-lab, .materials-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.storage-lab__head, .materials-lab__head {
  grid-column: 2 / 7;
  position: sticky;
  top: 22vh;
  align-self: start;
}
.storage-lab__eyebrow, .materials-lab__eyebrow {
  color: var(--accent);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.storage-lab__head .chapter__title, .materials-lab__head .chapter__title { text-transform: uppercase; }
.storage-lab__visual, .materials-lab__visual {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 74%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.storage-lab__visual::before, .materials-lab__visual::before {
  content: "";
  position: absolute;
  inset: 14% 18%;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 50%;
  transform: perspective(24rem) rotateX(62deg) rotateZ(-8deg);
  box-shadow: inset 0 0 45px -28px var(--glow);
}
.storage-lab__shelf {
  position: absolute;
  z-index: 1;
  left: 13%;
  right: 13%;
  bottom: 25%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 20px var(--glow), 0 2rem 0 -0.4rem var(--rule), 0 4rem 0 -0.4rem var(--rule);
}
.storage-lab__shelf span {
  position: absolute;
  bottom: 0.3rem;
  width: 2.5rem;
  height: 5.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-bottom: 0;
  border-radius: 1.2rem 1.2rem 0 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 15%, transparent));
}
.storage-lab__shelf span:nth-child(1) { left: 16%; }
.storage-lab__shelf span:nth-child(2) { left: 47%; height: 6.5rem; }
.storage-lab__shelf span:nth-child(3) { left: 78%; height: 4.8rem; }
.storage-lab__vessel { position: absolute; z-index: 1; border: 1px solid var(--glass-edge); border-radius: 50%; opacity: 0.7; }
.storage-lab__vessel--a { left: 23%; top: 27%; width: 4rem; height: 4rem; }
.storage-lab__vessel--b { right: 22%; top: 34%; width: 3rem; height: 3rem; }
.storage-lab__readout, .materials-lab__readout {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  top: 1.25rem;
  display: grid;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.storage-lab__readout strong, .materials-lab__readout strong { color: var(--accent); font-weight: 500; }
.storage-lab__markers { position: absolute; right: 1.25rem; bottom: 1.25rem; display: flex; gap: 0.45rem; }
.storage-lab__markers i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.storage-lab__sequence, .materials-lab__choices {
  grid-column: 9 / 13;
  grid-row: 2;
  position: relative;
  padding-left: 2rem;
}
.storage-lab__rail { position: absolute; left: 0.3rem; top: 0.8rem; bottom: 4rem; width: 1px; background: var(--rule); }
.storage-lab__rail span { display: block; width: 3px; height: 100%; margin-left: -1px; background: var(--accent); box-shadow: 0 0 16px var(--glow); transform: scaleY(0); transform-origin: top; transition: transform var(--mid) var(--ease); }
.storage-lab__principles, .materials-lab__list { display: grid; gap: 0.7rem; }
.storage-lab__principle { position: relative; }
.materials-lab__list li { position: relative; }
.storage-lab__principle::before, .materials-lab__list li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -2rem;
  top: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.storage-lab__principle.is-active::before, .materials-lab__list li.is-active::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--glow), 0 0 16px var(--glow); }
.storage-lab__principle button, .materials-lab__list button {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 0.8rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.storage-lab__principle button:hover, .storage-lab__principle button:focus-visible, .storage-lab__principle.is-active button,
.materials-lab__list button:hover, .materials-lab__list button:focus-visible, .materials-lab__list li.is-active button { background: var(--glass-bg); border-color: var(--glass-edge); box-shadow: 0 16px 36px -30px var(--glow); }
.storage-lab__principle button:hover, .materials-lab__list button:hover { transform: translateX(0.18rem); }
.storage-lab__index, .materials-lab__list button > span { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.storage-lab__principle button > span:last-child, .materials-lab__list button > span:last-child, .materials-lab__list button { display: grid; gap: 0.3rem; }
.storage-lab__principle strong, .materials-lab__list strong { font-size: var(--t-base); font-weight: 500; }
.storage-lab__principle small, .storage-lab__principle em, .materials-lab__list small, .materials-lab__list em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.42; }
.storage-lab__principle em, .materials-lab__list em { color: var(--accent); font-size: var(--t-xs); font-style: normal; }
.storage-lab__note, .materials-lab__note { margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }
.materials-lab__cross-section { position: absolute; inset: 22% 27%; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 45% 45% 20% 20%; box-shadow: inset 0 -3rem 2rem -2.5rem var(--glow), 0 0 30px -20px var(--glow); }
.materials-lab__sample { position: absolute; left: 50%; top: 30%; width: 5rem; height: 9rem; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); border-top: 0; border-radius: 0 0 1.8rem 1.8rem; background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--accent) 22%, transparent)); }
.materials-lab__sample span { position: absolute; top: -1.8rem; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--ink-soft); font-size: var(--t-xs); letter-spacing: 0.1em; }
.materials-lab__sample i { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.7rem; height: 42%; border-radius: 0 0 1.2rem 1.2rem; background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- 10. Container comparison — Part 10 ---------- */
#comparison { min-height: 175svh; }
.comparison-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.comparison-lab__head { grid-column: 2 / 8; position: sticky; top: 22vh; align-self: start; }
.comparison-lab__eyebrow { color: var(--accent); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.comparison-lab__head .chapter__title { text-transform: uppercase; }
.comparison-lab__gallery {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 74%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.comparison-lab__gallery::before { content: ""; position: absolute; inset: 13% 14%; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 50%; transform: perspective(24rem) rotateX(60deg); box-shadow: inset 0 0 46px -28px var(--glow); }
.comparison-lab__gallery-line { position: absolute; left: 10%; right: 10%; bottom: 25%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 18px var(--glow); }
.comparison-lab__container { position: absolute; z-index: 1; bottom: 25%; width: 3.2rem; height: 8rem; transform: translate(-50%, 0); border: 1px solid color-mix(in srgb, var(--ink-soft) 55%, transparent); border-top: 0; border-radius: 0 0 1.2rem 1.2rem; background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--accent) 15%, transparent)); transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease), opacity var(--mid) var(--ease); opacity: 0.45; }
.comparison-lab__container i { position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.45rem; height: 35%; border-radius: 0 0 0.8rem 0.8rem; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.comparison-lab__container span { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); color: var(--ink-soft); font-size: 0.62rem; letter-spacing: 0.08em; white-space: nowrap; }
.comparison-lab__container--glass { left: 12%; height: 8.4rem; border-color: color-mix(in srgb, #bdeaf5 60%, transparent); }
.comparison-lab__container--steel { left: 27%; height: 7.2rem; background: linear-gradient(100deg, rgba(255,255,255,0.1), rgba(120,160,175,0.26), rgba(255,255,255,0.08)); }
.comparison-lab__container--hdpe { left: 42%; height: 7.8rem; width: 3.8rem; }
.comparison-lab__container--pet { left: 58%; height: 8.8rem; width: 2.8rem; border-radius: 0 0 0.9rem 0.9rem; }
.comparison-lab__container--pp { left: 73%; height: 6.8rem; width: 3.8rem; }
.comparison-lab__container--copper { left: 88%; height: 7.7rem; border-color: color-mix(in srgb, #c98d62 55%, transparent); background: linear-gradient(100deg, rgba(120,55,30,0.13), rgba(207,139,94,0.35), rgba(90,40,24,0.12)); }
.comparison-lab__container.is-active { opacity: 1; transform: translate(-50%, -0.45rem) scale(1.08); border-color: var(--accent); box-shadow: 0 0 0 5px var(--glow), 0 0 26px -8px var(--glow); }
.comparison-lab__gallery:has(+ .comparison-lab__panel) .comparison-lab__container { animation: comparison-breathe 8s ease-in-out infinite; }
@keyframes comparison-breathe { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 0.25rem; } }
.comparison-lab__readout { position: absolute; z-index: 2; left: 1.25rem; top: 1.25rem; display: grid; gap: 0.3rem; color: var(--ink-soft); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.comparison-lab__readout strong { color: var(--accent); font-weight: 500; }
.comparison-lab__panel { grid-column: 9 / 13; grid-row: 2; position: relative; padding-left: 2rem; }
.comparison-lab__materials { display: grid; gap: 0.45rem; padding-left: 0; }
.comparison-lab__materials button { display: grid; grid-template-columns: 2rem 1fr; gap: 0.7rem; width: 100%; padding: 0.72rem 0.8rem; border: 1px solid transparent; border-radius: 4px; text-align: left; transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease); }
.comparison-lab__materials button:hover, .comparison-lab__materials button:focus-visible, .comparison-lab__materials button.is-active { background: var(--glass-bg); border-color: var(--glass-edge); box-shadow: 0 12px 30px -25px var(--glow); }
.comparison-lab__materials button:hover { transform: translateX(0.18rem); }
.comparison-lab__materials button span { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.comparison-lab__materials button strong { align-self: center; font-size: var(--t-sm); font-weight: 500; }
.comparison-lab__attributes { display: grid; gap: 0; margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.comparison-lab__attributes div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.8rem; padding: 0.62rem 0; border-bottom: 1px solid var(--rule); }
.comparison-lab__attributes dt { color: var(--ink-soft); font-size: var(--t-xs); }
.comparison-lab__attributes dd { color: var(--ink); font-size: var(--t-sm); text-align: right; }
.comparison-lab__note { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- 11. Everyday habits — Part 11 ---------- */
#habits { min-height: 185svh; }
.habits-lab { row-gap: clamp(3rem, 8vh, 6rem); }
.habits-lab__head { grid-column: 2 / 7; position: sticky; top: 22vh; align-self: start; }
.habits-lab__eyebrow { color: var(--accent); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.habits-lab__head .chapter__title { text-transform: uppercase; }
.habits-lab__visual {
  grid-column: 2 / 8;
  grid-row: 2;
  min-height: clamp(19rem, 52vh, 36rem);
  position: sticky;
  top: 16vh;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass-bg) 76%, transparent);
  box-shadow: inset 0 0 80px -42px var(--glow), 0 28px 70px -58px var(--ink);
}
.habits-lab__visual::before { content: ""; position: absolute; inset: 15% 17%; border: 1px solid color-mix(in srgb, var(--accent) 23%, transparent); border-radius: 50%; transform: perspective(24rem) rotateX(62deg); box-shadow: inset 0 0 46px -28px var(--glow); }
.habits-lab__glass, .habits-lab__bottle, .habits-lab__container { position: absolute; z-index: 1; bottom: 25%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--accent) 19%, transparent)); box-shadow: inset 0 -20px 24px -20px var(--glow); }
.habits-lab__glass { left: 24%; width: 4.5rem; height: 7rem; border-top: 0; border-radius: 0 0 1.3rem 1.3rem; }
.habits-lab__bottle { left: 49%; width: 3.4rem; height: 9rem; border-radius: 1rem 1rem 0.9rem 0.9rem; }
.habits-lab__container { right: 22%; width: 4.2rem; height: 6.7rem; border-radius: 0.6rem; opacity: 0.72; }
.habits-lab__glass i, .habits-lab__bottle i, .habits-lab__container i { position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.45rem; height: 40%; border-radius: 0 0 0.75rem 0.75rem; background: color-mix(in srgb, var(--accent) 23%, transparent); }
.habits-lab__bottle::before { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; top: -1rem; height: 1.1rem; border: 1px solid var(--glass-edge); border-bottom: 0; border-radius: 0.45rem 0.45rem 0 0; }
.habits-lab__droplet { position: absolute; z-index: 2; left: 51%; top: 21%; width: 0.45rem; height: 0.65rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); box-shadow: 0 0 14px var(--glow); animation: habits-drop 4.4s var(--ease) infinite; }
@keyframes habits-drop { 0%, 20% { opacity: 0; transform: translateY(-0.5rem) rotate(-45deg) scale(0.7); } 45% { opacity: 1; } 78%, 100% { opacity: 0; transform: translateY(5.4rem) rotate(-45deg) scale(1); } }
.habits-lab__readout, .habits-lab__label { position: absolute; z-index: 3; display: grid; gap: 0.3rem; color: var(--ink-soft); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.habits-lab__readout { left: 1.25rem; top: 1.25rem; }
.habits-lab__readout strong { color: var(--accent); font-weight: 500; }
.habits-lab__label { right: 1.25rem; bottom: 1.25rem; }
.habits-lab__label b { color: var(--accent); font-weight: 500; }
.habits-lab__sequence { grid-column: 9 / 13; grid-row: 2; position: relative; padding-left: 2rem; }
.habits-lab__rail { position: absolute; left: 0.3rem; top: 0.8rem; bottom: 4rem; width: 1px; background: var(--rule); }
.habits-lab__rail span { display: block; width: 3px; height: 100%; margin-left: -1px; background: var(--accent); box-shadow: 0 0 16px var(--glow); transform: scaleY(0); transform-origin: top; transition: transform var(--mid) var(--ease); }
.habits-lab__list { display: grid; gap: 0.7rem; }
.habits-lab__habit { position: relative; }
.habits-lab__habit::before { content: ""; position: absolute; z-index: 1; left: -2rem; top: 1.1rem; width: 0.6rem; height: 0.6rem; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.habits-lab__habit.is-active::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--glow), 0 0 16px var(--glow); }
.habits-lab__habit button { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; width: 100%; padding: 0.85rem 0.8rem 0.95rem; border: 1px solid transparent; border-radius: 4px; text-align: left; transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease); }
.habits-lab__habit button:hover, .habits-lab__habit button:focus-visible, .habits-lab__habit.is-active button { background: var(--glass-bg); border-color: var(--glass-edge); box-shadow: 0 16px 36px -30px var(--glow); }
.habits-lab__habit button:hover { transform: translateX(0.18rem); }
.habits-lab__index { color: var(--accent); font-family: var(--display); font-size: var(--t-md); font-style: italic; }
.habits-lab__habit button > span:last-child { display: grid; gap: 0.3rem; }
.habits-lab__habit strong { font-size: var(--t-base); font-weight: 500; }
.habits-lab__habit small, .habits-lab__habit em { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.42; }
.habits-lab__habit em { color: var(--accent); font-size: var(--t-xs); font-style: normal; }
.habits-lab__note { margin-top: 1.8rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.5; }

/* ---------- 13. Finale — Part 12 ---------- */
#drop { min-height: 155svh; }
.finale {
  grid-column: 2 / 12;
  display: grid;
  gap: clamp(2rem, 5vh, 4.5rem);
  justify-items: start;
}
.finale__head { max-width: 52rem; }
.finale__eyebrow { color: var(--accent); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.finale__title { margin-top: 0.8rem; text-transform: uppercase; }
.finale__journey { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.finale__journey li { position: relative; display: grid; gap: 0.45rem; padding: 1rem 0.8rem 0; color: var(--ink-soft); opacity: 0.62; transition: color var(--mid) var(--ease), opacity var(--mid) var(--ease); }
.finale__journey li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); transition: width var(--mid) var(--ease); }
.finale__journey li.is-active { color: var(--ink); opacity: 1; }
.finale__journey li.is-active::before { width: 100%; }
.finale__journey span { color: var(--accent); font-size: var(--t-xs); letter-spacing: 0.12em; }
.finale__journey strong { font-size: var(--t-sm); font-weight: 500; }
.finale__stage {
  width: 100%;
  min-height: clamp(19rem, 56vh, 40rem);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: radial-gradient(circle at 54% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--glass-bg) 72%, transparent), color-mix(in srgb, var(--bg) 45%, transparent));
  box-shadow: inset 0 0 100px -50px var(--glow), 0 28px 70px -58px var(--ink);
}
.finale__stage::before { content: ""; position: absolute; inset: 15% 18%; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 50%; transform: perspective(30rem) rotateX(62deg); box-shadow: inset 0 0 52px -30px var(--glow); }
.finale__stage::after { content: "FINAL WATER / SETTLED"; position: absolute; left: 1.25rem; bottom: 1.15rem; color: var(--ink-soft); font-size: var(--t-xs); letter-spacing: 0.12em; }
.finale__stage .finale__drop { left: 50%; top: 18%; width: 1rem; height: 1.35rem; transform: translateX(-50%) rotate(-45deg); box-shadow: 0 0 26px var(--glow); }
.finale__cta { width: min(100%, 48rem); display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.6rem); border: 1px solid var(--glass-edge); border-left: 2px solid color-mix(in srgb, var(--accent) 52%, transparent); border-radius: 4px 18px 18px 4px; background: color-mix(in srgb, var(--glass-bg) 78%, transparent); backdrop-filter: blur(14px); }
.finale__cta h3 { max-width: 28ch; font-family: var(--display); font-size: var(--t-lg); line-height: 1.05; font-weight: 400; text-transform: uppercase; }
.finale__cta p { max-width: 42ch; color: var(--ink-soft); font-size: var(--t-sm); }
.finale__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.35rem; }
.finale__actions .hero__btn { min-height: 3.1rem; }
.finale__link { color: var(--accent); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.finale__link:hover, .finale__link:focus-visible { color: var(--ink); }
.finale__drop {
  position: absolute;
  left: -4px; top: 0;
  width: 9px; height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent);
  box-shadow: 0 0 22px var(--glow);
}

/* ---------- Footer detail ---------- */
.footer__mark { font-size: var(--t-lg); line-height: 1; }
.footer__mark i { font-style: normal; color: var(--accent); }
.footer__line { font-size: var(--t-sm); color: var(--ink-soft); max-width: 34ch; margin-top: 0.75rem; }
.footer__nav h3 { color: var(--ink-soft); margin-bottom: 0.9rem; }
.footer__nav li { padding: 0.25rem 0; font-size: var(--t-sm); }
.footer__nav a { color: var(--ink-soft); transition: color var(--fast); }
.footer__nav a:hover { color: var(--accent); }

/* ============================================================
   UTILITY PAGES — 403.html, 404.html, cookiepolicy.html
   Static pages that reuse the site tokens from base.css and the
   .hero__btn buttons above. No JavaScript, no 3D scene: they must
   stay light because the server may show them for any broken URL.
   ============================================================ */

/* Page shell: header bar, growing main area, footer bar */
.utility-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--glow), transparent 70%),
    var(--bg);
}
.utility-page__bar,
.utility-page__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: clamp(0.9rem, 2vw, 1.6rem) var(--gutter);
}
.utility-page__bar { border-bottom: 1px solid var(--rule); }
.utility-page__foot {
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.utility-page__foot a { transition: color var(--fast); }
.utility-page__foot a:hover,
.utility-page__foot a:focus-visible { color: var(--accent); }
.utility-page__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

/* Main area: centres the glass panel (error pages) */
.utility-page__main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter);
}
.utility-page__panel {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--glass-edge);
  border-radius: 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
}
.utility-page__code {
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.utility-page__title {
  margin: 0.6rem 0 1rem;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.utility-page__text { max-width: 52ch; color: var(--ink-soft); }
.utility-page__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; }

/* Long-form policy text (cookiepolicy.html) */
.policy { max-width: 52rem; margin-inline: auto; width: 100%; }
.policy__updated { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--ink-soft); }
.policy h2 {
  margin: 2.25rem 0 0.6rem;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.15;
}
.policy p,
.policy li { color: var(--ink-soft); max-width: 68ch; }
.policy p + p,
.policy ul + p,
.policy__table-wrap + p { margin-top: 0.8rem; }
.policy ul { margin-top: 0.6rem; padding-left: 1.1rem; list-style: disc; }
.policy li { padding: 0.15rem 0; }
.policy a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.policy code {
  padding: 0.1em 0.4em;
  border-radius: 0.35em;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  font-size: 0.9em;
}

/* Storage table: scrolls inside its own wrapper so the page never scrolls sideways */
.policy__table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--glass-edge); border-radius: 0.75rem; }
.policy__table-wrap table { min-width: 34rem; font-size: var(--t-sm); }
.policy__table-wrap th,
.policy__table-wrap td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.policy__table-wrap tr:last-child td { border-bottom: 0; }
.policy__table-wrap th { color: var(--ink); font-weight: 500; background: var(--glass-bg); }
.policy__table-wrap td { color: var(--ink-soft); }