/* ============================================================
   Kangen Water — Shared site styles
   Used on every page: reset, nav, footer, buttons, section/card
   components, mobile nav, underwater tint. Hero-only rules live
   in hero.css (loaded additionally on the home page).
   ============================================================ */

:root {
  --ink: #06283a;
  --ink-soft: rgba(6, 40, 58, 0.70);
  --ink-faint: rgba(6, 40, 58, 0.46);

  --aqua: #12b5e5;
  --mint: #17d6b0;
  --teal-deep: #0a7ea9;
  --accent-grad: linear-gradient(120deg, #0b82c4, #14c3a6);

  /* the Kangen-LPG Solutions identity, as specified by the client */
  --brand-gold: #c4ad5e;
  --brand-aqua: #83d1d8;
  --brand-deep: #144b66;

  /* headings: squared geometric; accent: elegant handwriting script; body: clean.
     All render Romanian comma-below ș/ț and German umlauts correctly. */
  --font-head: "Space Grotesk", "Poppins", sans-serif;
  --font-script: "Great Vibes", cursive;
  --font-body: "Quicksand", "Inter", system-ui, -apple-system, sans-serif;

  --bg-tint: #eaf6fd;
  --radius: 20px;
  --shadow-card: 0 18px 40px rgba(6, 40, 58, 0.08);

  --nav-h: 82px;
  /* The header surface, as RGB components so the scrolled state can take an
     alpha off the same value. A soft cool grey rather than white: it separates
     the bar from the page and gives the gold-and-aqua emblem something to sit
     against. Defined once -- the static bar, the scrolled bar and the mobile
     dropdown all read from here so they cannot drift apart. */
  --nav-surface: 231, 238, 243;
  --edge: clamp(20px, 5vw, 64px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* anchor jumps stop below the pinned header instead of underneath it */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 14px); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

/* highlighted accent lines (the "bottom" of a headline) use the elegant script */
.accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  display: inline-block;
  line-height: 1.25;
  font-size: 1.14em;
}

/* a faint blue wash over the whole page — like everything is gently underwater */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(120, 200, 240, 0.05) 0%, rgba(20, 110, 160, 0.10) 100%);
}

/* ---------------------------------------------------------- NAV
   The bar travels with the viewport, so the menu and the EN/RO/DE switch are
   one click away no matter how far down the page you are. On the home page it
   floats over the hero (fixed, out of flow); on inner pages it is a real block
   in the flow that sticks to the top once it reaches it. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* below the site-wide underwater wash (60) so the bar is tinted like
     everything else, above every page section */
  z-index: 50;
  height: var(--nav-h);
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav--static {
  position: sticky;
  top: 0;
  background: rgb(var(--nav-surface));
  box-shadow: 0 1px 0 rgba(6, 40, 58, 0.08);
}

/* as soon as the page scrolls, the bar earns its own surface so whatever
   passes underneath cannot muddy the links */
.nav.is-stuck {
  background: rgba(var(--nav-surface), 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
          backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 1px 0 rgba(6, 40, 58, 0.08), 0 14px 34px rgba(6, 40, 58, 0.07);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
/* The emblem ships as a picture; the wordmark is set in live type rather than
   baked into it. The full lockup is nearly square, so inside a 68px header its
   tagline would be illegible, and flat artwork softens on a retina screen.
   Stacking the two words keeps this no wider than the old KANGEN mark. */
.brand__mark {
  /* the emblem carries a ring, a K, a splash and a droplet -- below ~44px in a
     82px header those details start fighting each other */
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
/* "Kangen" over "LPG Solutions", matching the logo: LPG in gold, everything
   else in the brand's deep blue — the site ink is a different, darker navy. */
.brand__word,
.brand__sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  color: var(--brand-deep);
}
.brand__sub { margin-top: 1px; }
.brand__lpg { color: var(--brand-gold); }
/* Set in her own sentence case rather than letterspaced capitals: the same
   words come out ~45px narrower that way, which is what lets the header carry
   the slogan at all without stealing the menu from every laptop. */
.brand__tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.005em;
  color: rgba(20, 75, 102, 0.6);
  margin-top: 3px;
  white-space: nowrap;
}
.brand__tag b { font-weight: 800; color: rgba(20, 75, 102, 0.8); }
/* Once the menu is a hamburger the header is brand + film + language + toggle
   at full size, and a phone has no room to spare — the footer still shows it. */
@media (max-width: 1140px) { .nav .brand__tag { display: none; } }

.nav__links { display: flex; gap: 34px; }
.nav__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.25s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { transform: scaleX(1); }

/* The way into the film from anywhere. The hero has its own play button, but
   that one lives inside the waves design and vanishes when the hero is switched
   to photo mode -- and it never existed on the other fourteen pages. This is
   the reliable one: same place, every page, every hero mode, every language. */
.nav__video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(6, 40, 58, 0.10);
  background: rgba(6, 40, 58, 0.04);
  color: var(--teal-deep);
  font: 700 0.8rem/1 var(--font-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.2s ease;
}
.nav__video svg {
  width: 22px;
  height: 22px;
  padding: 5px 4px 5px 6px;
  box-sizing: border-box;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 4px 12px rgba(18, 181, 229, 0.32);
}
.nav__video:hover { color: var(--ink); background: rgba(6, 40, 58, 0.08); border-color: rgba(6, 40, 58, 0.18); }
/* The brand, seven links, this and the language pill all want the same row.
   The word is the least load-bearing part of it, so it is the first to go --
   the play mark on its own still reads as "video". */
/* Eight links, a brand, a video button and a language switch is a lot to fit
   on one row -- and German is the binding case ("Startseite", "Wasserarten",
   "Gesundheit"). So the row gives up width in stages as the viewport narrows,
   and hands over to the hamburger (below) while the labels are still on a
   single line, rather than wrapping or spilling past the edge. */
/* Staged width reclaim. The brand now carries three lines including the slogan,
   so each stage starts a little earlier than it used to; the aim is to keep all
   eight links visible down to the same 1141px as before. */
@media (max-width: 1500px) {
  .nav__links { gap: 22px; }
}
@media (max-width: 1360px) {
  .nav__links { gap: 17px; }
  .nav__video { padding: 6px; gap: 0; }
  .nav__video span { display: none; }
}
@media (max-width: 1200px) {
  .nav__links { gap: 13px; }
  .nav__links a { font-size: 0.88rem; }
}

/* Language switcher — one button, seven languages.
   A row of seven codes would be wider than three nav links and would push the
   hamburger breakpoint past every laptop, so the trigger wears the language
   you are reading and the rest live in a list under it. The list names each
   language in its own words: someone hunting for theirs scans for "Magyar". */
.lang {
  position: relative;
  flex-shrink: 0;
}
.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 6px 8px;
  border-radius: 999px;
  background: rgba(6, 40, 58, 0.04);
  border: 1px solid rgba(6, 40, 58, 0.10);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  font: 600 0.8rem/1 var(--font-body), sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.25s ease;
}
.lang__toggle:hover,
.lang.is-open .lang__toggle {
  color: var(--ink);
  background: rgba(6, 40, 58, 0.07);
  border-color: rgba(6, 40, 58, 0.18);
}
.lang__globe { width: 16px; height: 16px; opacity: 0.75; flex: none; }
.lang__code { font-variant-numeric: tabular-nums; }
.lang__caret {
  width: 13px; height: 13px; flex: none; opacity: 0.6;
  transition: transform 0.22s ease;
}
.lang.is-open .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 60;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(6, 40, 58, 0.10);
  box-shadow: 0 18px 42px rgba(6, 40, 58, 0.16);
}
.lang__menu[hidden] { display: none; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.86rem/1.15 var(--font-body), sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.2s ease;
}
.lang__btn:hover,
.lang__btn:focus-visible { color: var(--ink); background: rgba(6, 40, 58, 0.06); }
.lang__abbr {
  flex: none;
  width: 26px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.lang__name { white-space: nowrap; }
.lang__btn.is-active {
  color: #ffffff;
  background: var(--accent-grad);
  box-shadow: 0 4px 14px rgba(18, 181, 229, 0.30);
}
.lang__btn.is-active .lang__abbr { opacity: 0.8; }

/* mobile hamburger toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------- BUTTONS */
.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  --pad-y: 15px;
  --pad-x: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 0;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease;
}
.btn--primary {
  color: #ffffff;
  background: var(--accent-grad);
  box-shadow: 0 10px 30px rgba(18, 181, 229, 0.28);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(18, 181, 229, 0.40);
}
.btn--ghost {
  color: var(--ink);
  border: 1px solid rgba(6, 40, 58, 0.18);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 40, 58, 0.35);
  background: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------- PAGE HEADER (inner pages) */
.page-header {
  position: relative;
  padding: calc(var(--nav-h) + 9vh) var(--edge) 8vh;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #eaf7fe 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5fbff 55%, var(--bg-tint) 100%);
}
.page-header__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 16px;
}
.page-header h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.page-header p {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- SECTIONS */
.section {
  padding: 9vh var(--edge);
  background: #ffffff;
}
.section--tint { background: var(--bg-tint); }
.section__inner { max-width: 1160px; margin: 0 auto; }

.section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}
.section__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 14px;
}
.section__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: -0.01em;
}
.section__sub {
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- CARDS */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card {
  background: #ffffff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(6, 40, 58, 0.13); }
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card__icon svg { width: 25px; height: 25px; }
.card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.card p { color: var(--ink-soft); line-height: 1.6; font-size: 0.96rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card__source {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(6, 40, 58, 0.14);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-deep);
}

/* ---------------------------------------------------------- PROCESS STEPS */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.step { position: relative; text-align: center; padding: 0 10px; }
.step__num {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 14px 30px rgba(18, 181, 229, 0.32);
}
.step h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
.step p { color: var(--ink-soft); line-height: 1.6; font-size: 0.96rem; }
/* connector line between step circles */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 33px;
  left: calc(50% + 45px);
  width: calc(100% - 90px);
  height: 2px;
  background: linear-gradient(90deg, rgba(18, 181, 229, 0.55), rgba(18, 181, 229, 0.12));
}

/* ---------------------------------------------------------- pH SCALE */
.ph { max-width: 720px; margin: 0 auto 54px; }
.ph__title {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 46px;
}
.ph__bar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5484d 0%, #f2861e 22%, #f5c518 38%, #46a758 52%, #12b5e5 74%, #3b5bdb 100%);
}
.ph__marker { position: absolute; top: -9px; bottom: -9px; left: 64%; width: 3px; background: var(--ink); border-radius: 3px; }
.ph__marker span {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 5px 11px;
  border-radius: 999px;
}
.ph__marker span::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ink);
}
.ph__labels { display: flex; justify-content: space-between; margin-top: 16px; font-size: 0.82rem; color: var(--ink-faint); }

/* ---------------------------------------------------------- STATS BAND */
.stats-band { background: linear-gradient(135deg, #06283a, #0a4e6b 55%, #0a7ea9); }
.stats {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  line-height: 1;
  background: linear-gradient(120deg, #8fe3ff, #5cf0cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { margin-top: 10px; color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; line-height: 1.4; }

/* ---------------------------------------------------------- PRODUCT CARDS */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.product-card {
  position: relative;
  background: linear-gradient(165deg, #ffffff, #f2fbff);
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(6, 40, 58, 0.13); }
.product-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent-grad);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.product-card__glass {
  width: 54px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 8px 8px 16px 16px;
  background: linear-gradient(180deg, rgba(18, 181, 229, 0.14), rgba(18, 181, 229, 0.4));
  border: 2px solid rgba(18, 181, 229, 0.5);
}
.product-card h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.product-card p { color: var(--ink-soft); line-height: 1.6; font-size: 0.96rem; margin-bottom: 20px; }

/* ---------------------------------------------------------- BLOG CARDS */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.blog-card {
  background: #ffffff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(6, 40, 58, 0.13); }
.blog-card__media {
  height: 140px;
  background: linear-gradient(140deg, #8fd9f5, #0f7fb8);
  position: relative;
}
.blog-card__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(6, 40, 58, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.blog-card__body { padding: 24px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-card__date { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 10px; letter-spacing: 0.02em; }
.blog-card h3 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; margin-bottom: 10px; line-height: 1.35; }
.blog-card p { color: var(--ink-soft); line-height: 1.6; font-size: 0.94rem; flex: 1; margin-bottom: 18px; }
.blog-card__link { color: var(--teal-deep); font-weight: 600; font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.blog-card__link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
.blog-card__link:hover { text-decoration: underline; }
.blog-card__link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------- CTA BANNER */
.cta-banner {
  position: relative;
  margin: 0 var(--edge);
  padding: 64px 40px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, #06283a, #0a4e6b 55%, #0a7ea9);
  color: #ffffff;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 15% 0%, rgba(56, 225, 255, 0.25), transparent 60%),
              radial-gradient(60% 80% at 100% 100%, rgba(87, 240, 207, 0.2), transparent 60%);
  pointer-events: none;
}
.cta-banner__content { position: relative; max-width: 560px; margin: 0 auto; }
.cta-banner h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; margin-bottom: 14px; }
.cta-banner p { color: rgba(255, 255, 255, 0.82); line-height: 1.6; margin-bottom: 30px; }
.cta-banner .btn--primary { background: #ffffff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.cta-banner .btn--primary:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32); }

/* ---------------------------------------------------------- CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.contact-form {
  display: grid;
  gap: 18px;
  background: #ffffff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.field { display: grid; gap: 8px; text-align: left; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea {
  font: inherit;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(6, 40, 58, 0.16);
  background: #fbfdff;
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--aqua);
  box-shadow: 0 0 0 4px rgba(18, 181, 229, 0.14);
}
.contact-info {
  display: grid;
  gap: 22px;
}
.contact-info__card {
  background: #ffffff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.contact-info__card h3 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 16px; }
.contact-info__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(6, 40, 58, 0.1); font-size: 0.94rem; }
.contact-info__row:last-child { border-bottom: 0; }
.contact-info__row span:first-child { color: var(--ink-faint); }
.contact-info__row a { color: var(--teal-deep); text-decoration: none; font-weight: 600; }
.contact-info__row a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- FOOTER */
.site-footer {
  background: #051f2e;
  color: rgba(234, 247, 255, 0.75);
  padding: 64px var(--edge) 0;
}
.site-footer__top {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer .brand { color: #ffffff; margin-bottom: 14px; }
/* the emblem was drawn to sit on either; the type is set explicitly, so the
   colour on .brand above cannot reach it by inheritance and has to be restated */
.site-footer .brand__word,
.site-footer .brand__sub { color: #ffffff; }
.site-footer .brand__tag { color: rgba(234, 247, 255, 0.60); }
.site-footer .brand__tag b { color: rgba(234, 247, 255, 0.85); }
.site-footer__brand p { max-width: 320px; line-height: 1.6; font-size: 0.92rem; }
.site-footer__links { display: flex; gap: 56px; flex-wrap: wrap; }
/* These are h2 — a footer column heading following the page's own h2s must
   not jump two levels — so the size is set here rather than inherited. */
.site-footer__col-title {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
  font-weight: 600;
}
.site-footer__links a, .site-footer__links span {
  display: block;
  color: rgba(234, 247, 255, 0.78);
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.site-footer__links a:hover { color: #ffffff; }
.site-footer__bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 0;
  font-size: 0.82rem;
  color: rgba(234, 247, 255, 0.45);
  text-align: center;
}

/* ---------------------------------------------------------- SKIP LINK (a11y) */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* visible keyboard focus everywhere, without boxing mouse users in */
:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- SMALL SHARED BITS */
.btn--sm { --pad-y: 11px; --pad-x: 22px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.btn--light:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }

/* Opens the video panel. Deliberately quieter than the contact buttons beside
   it -- it is an invitation to look, not the thing we are asking for -- but the
   play mark makes what it does unmistakable before the label is even read. */
.btn--play { background: none; color: var(--teal-deep); box-shadow: none; padding-left: 6px; gap: 11px; }
.btn--play::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  /* Two layers, not one: a single background layer takes a single image, so
     putting the gradient and the triangle together invalidates the whole
     declaration and the circle renders empty. Triangle on top, gradient under. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath fill='%23ffffff' d='M0 0v11l9-5.5z'/%3E%3C/svg%3E")
      no-repeat center / 9px 11px,
    var(--accent-grad);
  box-shadow: 0 6px 16px rgba(11, 130, 196, 0.35);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease;
}
.btn--play:hover { color: var(--ink); transform: none; }
.btn--play:hover::before { transform: scale(1.12); box-shadow: 0 9px 22px rgba(11, 130, 196, 0.45); }
/* on the dark banner the teal label disappears */
.cta-banner .btn--play { color: #fff; }
.cta-banner .btn--play:hover { color: #fff; }

.cards--2 { grid-template-columns: repeat(2, 1fr); }
.section--dark { background: linear-gradient(135deg, #06283a, #0a4e6b 55%, #0a7ea9); color: #fff; }
.section--dark .section__title { color: #fff; }
.section--dark .section__sub { color: rgba(255, 255, 255, 0.78); }
.section--dark .section__eyebrow { color: #5cf0cf; }
.section--flush { padding-top: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(18, 181, 229, 0.11);
  border: 1px solid rgba(18, 181, 229, 0.25);
  padding: 6px 13px;
  border-radius: 999px;
}

/* breadcrumb trail on inner pages */
.breadcrumb {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px var(--edge) 0;
  font-size: 0.84rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-deep); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb .sep { opacity: 0.45; }

/* callout / disclaimer box */
.notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 860px;
  margin: 40px auto 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: #f4fafe;
  border: 1px solid rgba(6, 40, 58, 0.10);
  border-left: 4px solid var(--aqua);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--teal-deep); margin-top: 2px; }
.notice strong { color: var(--ink); }
.notice--plain { border-left-color: rgba(6, 40, 58, 0.2); background: #fafcfe; }
/* .notice is a flex row built around a leading icon. When the notice is a
   sentence with inline <strong>/<a> instead, those become flex items and the
   sentence breaks into columns — so run it as normal text. */
.notice--flow { display: block; }

/* "where we stand" — research-integrity callout (independent vs. funded science) */
.stand {
  max-width: 880px;
  margin: 44px auto 0;
  padding: 28px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ecf9f3 0%, #f1fbfe 100%);
  border: 1px solid rgba(23, 214, 176, 0.22);
  border-left: 4px solid var(--mint);
  color: var(--ink-soft);
}
.stand > h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}
.stand p { line-height: 1.66; font-size: 0.95rem; margin: 0 0 12px; }
.stand p:last-child { margin-bottom: 0; }
.stand strong { color: var(--ink); }
.stand__list { list-style: none; margin: 14px 0 16px; padding: 0; }
.stand__list li {
  position: relative;
  padding: 4px 0 4px 28px;
  line-height: 1.58;
  font-size: 0.93rem;
  margin-bottom: 10px;
}
.stand__list li:last-child { margin-bottom: 0; }
.stand__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-grad);
}

/* ---------------------------------------------------------------- MARQUEE
   A ribbon of certifications and company facts that rolls past under the hero.
   It holds the same list twice and slides exactly one copy's width, so the wrap
   has no seam and nothing runs per frame -- the browser animates one transform
   on the compositor. The second copy is decorative: a screen reader and a
   crawler should meet the credentials once, not twice. */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 15px 0;
  background: linear-gradient(180deg, #eef8fc 0%, #e4f2f9 100%);
  border-top: 1px solid rgba(20, 75, 102, 0.10);
  border-bottom: 1px solid rgba(20, 75, 102, 0.10);
  /* fade both ends so items arrive and leave instead of being chopped off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-roll 52s linear infinite;
}
/* let a reader stop it to actually read one */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__row { display: flex; align-items: center; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 clamp(20px, 2.6vw, 38px);
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-deep);
}
.marquee__item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--brand-gold); }

@keyframes marquee-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 700px) {
  .marquee { padding: 12px 0; }
  .marquee__item { font-size: 0.82rem; gap: 7px; padding: 0 16px; }
  .marquee__item svg { width: 17px; height: 17px; }
}

/* Nothing should move for a visitor who asked for stillness, so the ribbon
   becomes a plain centred list of the same credentials. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: 100%; }
  .marquee__row { flex-wrap: wrap; justify-content: center; row-gap: 9px; }
  .marquee__row[aria-hidden="true"] { display: none; }
}
@media (max-width: 600px) {
  .stand { padding: 22px 20px; margin-top: 36px; }
  .stand > h3 { font-size: 1.08rem; }
}

/* ---------------------------------------------------------- DOCUMENTS
   A download library, so the job of this component is to make a long list
   scannable: heavy grouping, a quiet row, and one obvious action per row.
   Opening a document splits the page in two -- list left, document right --
   and the shell widens to pay for the second column.                        */
.docs-shell {
  max-width: 1160px;
  margin: 0 auto;
  transition: max-width 0.45s var(--ease-out);
}
.docs-shell.is-split { max-width: 1560px; }

.docs__hint {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.docs__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 8px;
}
.docs__search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}
.docs__search svg {
  position: absolute;
  left: 16px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.docs__search input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1px solid rgba(6, 40, 58, 0.14);
  border-radius: 999px;
  background: #fff;
  font: 400 0.95rem/1.2 var(--font-body);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.docs__search input:focus {
  outline: none;
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 4px rgba(18, 181, 229, 0.14);
}

.docs__country {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.docs__country[hidden] { display: none; }
.docs__country-label {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-right: 2px;
}
.docs__country-btn {
  padding: 9px 16px;
  border: 1px solid rgba(6, 40, 58, 0.14);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: 600 0.86rem/1 var(--font-body);
  color: var(--ink-soft);
  transition: color 0.2s ease, background 0.25s ease, border-color 0.2s ease;
}
.docs__country-btn:hover { color: var(--ink); border-color: rgba(6, 40, 58, 0.3); }
.docs__country-btn.is-active {
  color: #fff;
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(18, 181, 229, 0.3);
}

.docs__group { margin-top: 52px; }
.docs__group[hidden] { display: none; }
.docs__group-head {
  position: relative;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(6, 40, 58, 0.09);
  margin-bottom: 8px;
}
.docs__group-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 0 0 6px;
}
.docs__group-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 62ch;
}
.docs__count {
  position: absolute;
  right: 0; top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.docs__cat { margin-top: 28px; }
.docs__cat[hidden] { display: none; }
.docs__cat-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 10px;
}
.docs__list { list-style: none; margin: 0; padding: 0; }

/* The row holds two separate links -- read it here, or keep a copy -- so the
   card is the <li> and each action is a child with its own hit area. */
.doc {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
  border: 1px solid rgba(6, 40, 58, 0.1);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s var(--ease-out),
              background 0.25s ease;
}
.doc:hover {
  border-color: rgba(18, 181, 229, 0.5);
  box-shadow: 0 10px 26px rgba(6, 40, 58, 0.09);
  transform: translateY(-1px);
}
/* the document currently open in the reading pane */
.doc.is-active {
  border-color: var(--teal-deep);
  background: rgba(18, 181, 229, 0.05);
  box-shadow: 0 10px 26px rgba(18, 181, 229, 0.18);
}
.doc.is-active .doc__icon { background: var(--accent-grad); color: #fff; }
.doc[hidden] { display: none; }

.doc__open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 6px 14px 16px;
  border-radius: 13px 0 0 13px;
  text-decoration: none;
  color: inherit;
}
.doc__open:focus-visible,
.doc__dl:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: -3px; }
.doc__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(18, 181, 229, 0.1);
  color: var(--teal-deep);
}
.doc__icon svg { width: 20px; height: 20px; }
.doc__body { flex: 1; min-width: 0; }
.doc__title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  /* titles come from Enagic verbatim and some are long -- wrap, never clip */
  overflow-wrap: anywhere;
}
.doc__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.doc__meta em {
  font-style: normal;
  color: var(--teal-deep);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.doc__dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  border-left: 1px solid rgba(6, 40, 58, 0.07);
  border-radius: 0 13px 13px 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal-deep);
  text-decoration: none;
}
.doc__dl:hover { background: rgba(18, 181, 229, 0.08); }
.doc__dl svg { width: 15px; height: 15px; }
.doc:hover .doc__dl svg { animation: docNudge 0.6s ease; }
@keyframes docNudge {
  50% { transform: translateY(3px); }
}
.docs__empty {
  margin: 40px 0;
  text-align: center;
  color: var(--ink-soft);
}
.docs__empty[hidden] { display: none; }

/* ------------------------------------------------ the split reading view */
.docs-split { display: grid; }
.docs-split.is-split {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.docs-preview {
  position: sticky;
  /* clears the fixed header, then holds still while the list scrolls past */
  top: calc(var(--nav-h) + 14px);
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-h) - 40px);
  height: calc(100svh - var(--nav-h) - 40px);   /* svh where it is understood */
  min-height: 460px;
  margin-top: 52px;              /* line up with the first group heading */
  border: 1px solid rgba(6, 40, 58, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(6, 40, 58, 0.12);
  overflow: hidden;
  animation: docPreviewIn 0.35s var(--ease-out) both;
}
.docs-preview[hidden] { display: none; }
@keyframes docPreviewIn {
  from { opacity: 0; transform: translateY(12px); }
}

.docs-preview__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(6, 40, 58, 0.09);
}
.docs-preview__meta { flex: 1; min-width: 0; }
.docs-preview__eyebrow {
  margin: 0 0 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.docs-preview__title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.docs-preview__title:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
.docs-preview__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(6, 40, 58, 0.12);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.docs-preview__close:hover {
  color: var(--ink);
  border-color: rgba(6, 40, 58, 0.3);
  background: rgba(6, 40, 58, 0.04);
}
.docs-preview__close svg { width: 17px; height: 17px; }

.docs-preview__frame {
  flex: 1;
  min-height: 0;                 /* without this the iframe pushes the footer out */
  background: #eef4f8;
}
.docs-preview__frame iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}

.docs-preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid rgba(6, 40, 58, 0.09);
}
.docs-preview__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* Below this there is no room for two columns, and an embedded PDF is worse
   than the browser's own viewer -- so the rows stay plain links and the pane
   never opens. These rules only catch a viewport that shrank while it was. */
@media (max-width: 999px) {
  .docs__hint { display: none; }
  .docs-split.is-split { grid-template-columns: minmax(0, 1fr); }
  .docs-preview {
    position: static;
    height: 70vh;
    min-height: 380px;
    margin: 0 0 32px;
  }
}

@media (max-width: 640px) {
  .docs__group-head { padding-bottom: 34px; }
  .docs__count { top: auto; bottom: 10px; left: 0; right: auto; }
  .doc__open { gap: 11px; padding: 12px 4px 12px 13px; }
  .doc__dl { padding: 12px 13px; }
  .doc__icon { width: 34px; height: 34px; border-radius: 9px; }
  .doc__icon svg { width: 17px; height: 17px; }
  /* the label would crowd a narrow row; the arrow still says "download" */
  .doc__dl span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .doc:hover { transform: none; }
  .doc:hover .doc__dl svg { animation: none; }
  .docs-shell { transition: none; }
  .docs-preview { animation: none; }
}

/* ---------------------------------------------------------- SPLIT (image + copy) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
.split + .split { margin-top: clamp(56px, 8vw, 96px); }
.split--flip .split__media { order: 2; }
.split__media {
  border-radius: 24px;
  overflow: hidden;
  background: #eaf6fd;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  margin: 14px 0 16px;
  line-height: 1.15;
}
.split__body p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }
.split__list { list-style: none; display: grid; gap: 12px; margin: 22px 0 26px; }
.split__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; color: var(--ink-soft); }
.split__list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--mint); margin-top: 2px; }

/* ---------------------------------------------------------- PRODUCT CARD (with imagery) */
.product-card--rich { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-card--rich .product-card__tag { position: absolute; top: 16px; left: 16px; margin: 0; z-index: 2; }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #f2f8fc 100%);
  overflow: hidden;
}
/* Inset rather than width/height 100% + padding. The box's height comes from
   aspect-ratio, which is indefinite for percentage resolution, so both
   height:100% and max-height:100% silently fell back to auto and a tall photo
   ran out of the box. Four insets give the image a definite box, so
   object-fit:contain can actually contain. This was invisible while every
   product photo carried a white margin that made it near-square -- the
   transparent cut-outs are the products' true shape. */
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
  transition: transform 0.5s var(--ease-out);
}
.product-card--rich:hover .product-card__media img { transform: scale(1.05); }
.product-card__body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.product-card__body h3 { margin-bottom: 6px; }
.product-card__kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 12px;
}
/* The blurb absorbs the slack so the specs and buttons line up along the
   bottom of every card in a row. This used to be `.product-card__body p`,
   which also matched the kicker — a one-line label that then grew to 101px on
   the shortest card in a row, opening a gap under it that looked like a
   mistake. Only the blurb stretches. */
.product-card__body > p:not(.product-card__kicker) { flex: 1; }
.product-card__specs {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding-top: 16px;
  border-top: 1px dashed rgba(6, 40, 58, 0.14);
}
.product-card__specs li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.product-card__specs dt, .product-card__specs .k { color: var(--ink-faint); }
.product-card__specs dd, .product-card__specs .v { font-weight: 600; text-align: right; }
.product-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.product-card__actions .btn { flex: 1; min-width: 130px; }

/* ---------------------------------------------------------- SPEC SHEET */
/* A <dl>, so the pairing is in the markup and not just in the layout. The
   margin resets below undo the browser defaults a dl/dd carries. */
.spec-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 0;
  background: rgba(6, 40, 58, 0.10);
  border: 1px solid rgba(6, 40, 58, 0.10);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-sheet dd { margin: 0; }
.spec {
  background: #fff;
  padding: 22px 20px;
}
.spec__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.spec__value {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}
.spec__note { margin-top: 5px; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.45; }

/* ---------------------------------------------------------- PRODUCT DETAIL */
.pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}
.pd__media { position: sticky; top: 100px; }
.pd__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef6fb 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pd__stage img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.pd__thumbs { display: flex; gap: 12px; margin-top: 16px; }
.pd-thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(6, 40, 58, 0.10);
  border-radius: 14px;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.pd-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-active { border-color: var(--aqua); }

.pd__info .chip { margin-bottom: 16px; }
.pd__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.pd__kicker { color: var(--teal-deep); font-weight: 600; margin: 10px 0 20px; font-size: 1.05rem; }
.pd__lead { color: var(--ink-soft); line-height: 1.75; font-size: 1.05rem; }
.pd__features { list-style: none; display: grid; gap: 12px; margin: 26px 0; }
.pd__features li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; color: var(--ink-soft); }
.pd__features svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--mint); margin-top: 2px; }
.pd__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.pd__actions .btn { flex: 1; min-width: 160px; }

/* ------------------------------------------------- CERTIFICATION SEALS */
.certs {
  max-width: 1160px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: clamp(26px, 4vw, 38px) clamp(20px, 4vw, 40px);
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #f4fafd 100%);
  text-align: center;
}
.certs__title {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink);
  margin-bottom: 22px;
}
.certs__row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 56px);
}
.cert { width: 150px; }
/* The seals are ~190px originals, so 108px stays inside their real resolution
   and keeps the lettering crisp. */
.cert img { width: 108px; height: 108px; margin: 0 auto 10px; display: block; }
.cert span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.certs__note {
  margin: 26px auto 0;
  max-width: 720px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
@media (max-width: 560px) {
  .certs__row { gap: 20px; }
  .cert { width: 96px; }
  .cert img { width: 76px; height: 76px; }
  .cert span { font-size: 0.7rem; }
}

/* ------------------------------------------------------- 360° TURNTABLE ----
   Twelve renders of the same machine, cross-dissolving. Driven by
   viewer360.js; on the product page it takes over the main stage. */
.viewer360 { position: absolute; inset: 0; }
.viewer360__stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.viewer360__stage.is-grabbing { cursor: grabbing; }
.viewer360__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the card; only flat studio margin is cropped */
  opacity: 0;
  transition: opacity 0.6s ease;  /* soft cross-dissolve between angles */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* keep manual drag snappy — no fade while grabbing */
.viewer360__stage.is-grabbing .viewer360__frame { transition: none; }
.viewer360__frame.is-active { opacity: 1; }
/* The stage holds both the turntable and the still photo; the thumbnail row
   picks which one is showing. The frames carry a flat studio backdrop, so in
   360 mode the stage matches it exactly rather than showing the usual card
   gradient behind a hard edge. */
.pd__stage--has360.is-360 { background: #cde3f4; }
.pd__stage--has360 .viewer360 { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.pd__stage--has360.is-360 .viewer360 { opacity: 1; visibility: visible; }
.pd__stage--has360.is-360 #pdMain { opacity: 0; }
/* .pd__stage img already claims padding + contain — win it back for a frame */
.pd__stage--has360 .viewer360__frame { padding: 0; object-fit: cover; }
/* the thumbnail that brings the turntable back */
.pd-thumb--360 { background: #cde3f4; overflow: hidden; }
.pd-thumb--360 span {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.pd-thumb--360 img { padding: 0; object-fit: cover; }
.viewer360__controls {
  position: absolute;   /* floats over the card so it adds no height */
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.viewer360__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(6, 40, 58, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(6, 40, 58, 0.12);
  transition: transform 0.2s var(--ease-out), background 0.2s ease;
}
.viewer360__btn:hover { transform: translateY(-2px); background: #fff; }
.viewer360__btn svg { width: 20px; height: 20px; }
.viewer360 .i-play { display: none; }
.viewer360.is-paused .i-pause { display: none; }
.viewer360.is-paused .i-play { display: inline-block; }
.viewer360__hint {
  position: absolute;   /* badge on the card, adds no height */
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- DIAGRAM ----
   A wide explanatory graphic. The lettering inside is small by nature, so
   the whole picture is a link to the full-size file — on a phone that is the
   only way to actually read one. */
.diagram-slot:empty { display: none; }
.diagram-slot { margin-top: clamp(38px, 6vw, 70px); }
.diagram { margin: 0; }
.diagram__link,
.prop__figure {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  box-shadow: var(--shadow-card);
}
.diagram__link img,
.prop__figure img { display: block; width: 100%; height: auto; }
.diagram__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  box-shadow: 0 6px 16px rgba(6, 40, 58, 0.12);
}
.diagram figcaption {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- WATER PROPERTIES ----
   One block per property: what the term means, then what is established. */
.props {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  max-width: 1100px;
  margin: 0 auto;
}
.prop {
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 40px);
}
.prop__title {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  color: var(--ink);
  margin: 0 0 22px;
}
.prop__figure { margin-bottom: 26px; }
.prop__part { margin: 0 0 18px; line-height: 1.72; color: var(--ink-soft); }
.prop__part:last-child { margin-bottom: 0; }
.prop__part > span {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 7px;
}
.prop__part--evidence {
  padding: 16px 20px;
  border-left: 3px solid rgba(11, 130, 196, 0.35);
  border-radius: 0 12px 12px 0;
  background: #f4fafd;
}

/* ------------------------------------------------- ABOUT OPENING PANEL ----
   The full lockup, the promise under it, and the three words we work by. */
.cover {
  text-align: center;
  padding: clamp(44px, 7vw, 88px) clamp(20px, 5vw, 60px) clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, #f2fafe 0%, #ffffff 100%);
}
.cover__logo {
  display: block;
  width: min(420px, 76vw);
  height: auto;
  margin: 0 auto clamp(22px, 4vw, 36px);
}
.cover__tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.3vw, 2.25rem);
  line-height: 1.28;
  color: var(--brand-deep);
  max-width: 900px;
  margin: 0 auto;
}
.cover__through {
  margin: clamp(22px, 3vw, 34px) 0 14px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cover__words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 5vw, 56px);
  margin: 0;
  padding: 0;
}
.cover__words li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* she calls them the three steps, so they are numbered — gold, from the
   logo's own palette, against the deep blue of the sentence above */
.cover__step {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--brand-gold);
  box-shadow: 0 6px 16px rgba(196, 173, 94, 0.45);
}
.cover__word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal-deep);          /* readable fallback */
}
/* Three abreast on a phone too — they are one sequence and read as one line.
   The longest word ("Conştientizare") sets the width, so the type scales with
   the viewport and the gap tightens instead of letting a second row appear. */
@media (max-width: 620px) {
  .cover__words {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(7px, 2.6vw, 18px);
  }
  .cover__words li { min-width: 0; gap: 8px; }
  .cover__step { width: 26px; height: 26px; font-size: 0.76rem; }
  .cover__word {
    font-size: clamp(0.58rem, 2.95vw, 1.05rem);
    letter-spacing: 0.005em;
    text-align: center;
    white-space: nowrap;
  }
}
/* the site's own emphasis treatment: a different colour from the sentence
   above it, and one that still passes contrast at this size */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .cover__word {
    background: var(--accent-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.pd-specs { max-width: 1160px; margin: clamp(48px, 8vw, 84px) auto 0; }
.pd-specs__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: 34px;
}
.pd-specs__note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: 0.86rem; color: var(--ink-faint); line-height: 1.6; font-style: italic; }

/* ---------------------------------------------------------- COMPARISON TABLE */
.compare {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(6, 40, 58, 0.10);
  box-shadow: var(--shadow-card);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.compare table { border-collapse: collapse; width: 100%; min-width: 760px; }
/* Visually redundant next to the section heading, but a table lifted out of
   the page by an extractor arrives without that heading. */
.compare caption {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.compare th, .compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(6, 40, 58, 0.08);
  font-size: 0.92rem;
  vertical-align: middle;
}
.compare thead th {
  background: #f4fafe;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  border-bottom: 2px solid rgba(18, 181, 229, 0.3);
}
.compare thead th small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.compare tbody th {
  font-weight: 600;
  color: var(--ink-soft);
  background: #fbfdff;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid rgba(6, 40, 58, 0.08);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover td { background: rgba(18, 181, 229, 0.04); }
.compare .is-flag { color: var(--mint); }
.compare .is-flag svg { width: 19px; height: 19px; }
.compare .is-off { color: rgba(6, 40, 58, 0.26); }
.compare__hint {
  display: none;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* ---------------------------------------------------------- WATER TYPES */
.wtypes { display: grid; gap: 22px; }
.wtype {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 28px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-left: 6px solid var(--wt, var(--aqua));
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.wtype:hover { transform: translateX(5px); box-shadow: 0 22px 46px rgba(6, 40, 58, 0.12); }
.wtype__side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wtype__ph {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wt, var(--aqua)) 14%, #fff);
  border: 2px solid color-mix(in srgb, var(--wt, var(--aqua)) 45%, #fff);
  text-align: center;
  line-height: 1.1;
}
.wtype__num {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wt, var(--aqua));
}
.wtype__unit { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.wtype__drink {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; text-align: center;
}
.wtype__drink.is-drink { color: #157347; background: rgba(70, 167, 88, 0.14); }
.wtype__drink.no-drink { color: #b4451c; background: rgba(229, 72, 77, 0.12); }
.wtype__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.wtype__body h3 { font-family: var(--font-head); font-size: 1.28rem; font-weight: 600; }
.wtype__badge {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--teal-deep); background: color-mix(in srgb, var(--aqua) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--aqua) 30%, #fff);
  padding: 4px 11px; border-radius: 999px;
}
.wtype__body p { color: var(--ink-soft); line-height: 1.65; font-size: 0.96rem; }
.wtype__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wtype__fact {
  flex: 1 1 220px; background: #f6fafd; border: 1px solid rgba(6, 40, 58, 0.07);
  border-radius: 12px; padding: 10px 14px;
}
.wtype__fact span { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.wtype__fact strong { font-weight: 600; color: var(--ink); font-size: 0.9rem; line-height: 1.4; }
.wtype__usesWrap { margin-top: 16px; }
.wtype__usesLabel { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
.wtype__uses { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.wtype__uses li {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--wt, var(--aqua)) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--wt, var(--aqua)) 22%, #fff);
  padding: 5px 12px;
  border-radius: 999px;
}
.wtype__tip {
  margin-top: 16px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft);
  background: color-mix(in srgb, var(--wt, var(--aqua)) 7%, #fff);
  border-left: 3px solid var(--wt, var(--aqua));
  border-radius: 0 10px 10px 0; padding: 10px 14px;
}
.wtype__tip span { font-weight: 700; color: var(--ink); }
.wtype__tip span::after { content: " —"; }

/* ---------------------------------------------------------- pH SCALE (five waters) */
.wscale { max-width: 960px; margin: 0 auto; padding: 66px 10px 0; }
.wscale__track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5484d 0%, #f2861e 26%, #f5c542 40%, #46a758 50%, #17b0c4 64%, #12b5e5 78%, #3b5bdb 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-bottom: 66px;
}
.wscale__pin { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.wscale__dot {
  width: 20px; height: 20px; margin: 1px; box-sizing: border-box; border-radius: 50%;
  background: var(--wt); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(6, 40, 58, 0.3);
}
.wscale__lab { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 130px; text-align: center; }
.wscale__lab b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--wt); font-weight: 700; }
.wscale__lab i { font-style: normal; font-size: 0.72rem; line-height: 1.25; color: var(--ink-faint); }
.wscale__pin.is-up .wscale__lab { bottom: 26px; }
.wscale__pin.is-down .wscale__lab { top: 26px; }
.wscale__pin .wscale__lab::after {
  content: ""; position: absolute; left: 50%; width: 2px; height: 9px;
  background: color-mix(in srgb, var(--wt) 55%, #fff); transform: translateX(-50%);
}
.wscale__pin.is-up .wscale__lab::after { top: 100%; }
.wscale__pin.is-down .wscale__lab::after { bottom: 100%; }
.wscale__ends { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }

/* ---------------------------------------------------------- WATER at-a-glance TABLE */
.wtable-wrap { max-width: 980px; margin: 0 auto 26px; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.wtable { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.92rem; min-width: 640px; }
.wtable thead th {
  text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(120deg, var(--ink), var(--teal-deep));
  padding: 14px 16px;
}
.wtable tbody th, .wtable tbody td { padding: 13px 16px; border-bottom: 1px solid rgba(6, 40, 58, 0.08); vertical-align: middle; }
.wtable tbody tr:last-child th, .wtable tbody tr:last-child td { border-bottom: none; }
.wtable tbody tr:nth-child(even) { background: #f7fbfe; }
.wtable tbody th { text-align: left; font-weight: 600; color: var(--ink); font-family: var(--font-head); white-space: nowrap; }
.wtable__dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--wt); margin-right: 9px; vertical-align: middle; }
.wtable__drink { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.wtable__drink.is-drink { color: #157347; background: rgba(70, 167, 88, 0.14); }
.wtable__drink.no-drink { color: #b4451c; background: rgba(229, 72, 77, 0.12); }

/* ---------------------------------------------------------- RESEARCH DIGEST (health page) */
.rgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rnote {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(6, 40, 58, 0.09);
  border-top: 4px solid var(--aqua);
  border-radius: var(--radius); padding: 26px 26px 22px;
  box-shadow: var(--shadow-card);
}
.rnote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rnote__type {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal-deep); background: color-mix(in srgb, var(--aqua) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--aqua) 28%, #fff);
  padding: 5px 11px; border-radius: 999px;
}
.rnote__year { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink-faint); }
.rnote__area { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua); margin-bottom: 6px; }
.rnote__title { font-family: var(--font-head); font-weight: 600; font-size: 1.16rem; line-height: 1.28; margin-bottom: 10px; color: var(--ink); }
.rnote__sum { color: var(--ink-soft); line-height: 1.6; font-size: 0.93rem; }
.rnote__find, .rnote__take { font-size: 0.9rem; line-height: 1.55; margin-top: 12px; }
.rnote__find { color: var(--ink); }
.rnote__find span, .rnote__take span {
  display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px;
}
.rnote__find span { color: var(--teal-deep); }
.rnote__take {
  color: var(--ink-soft); background: #f6fafd; border-left: 3px solid var(--aqua);
  border-radius: 0 10px 10px 0; padding: 10px 14px;
}
.rnote__take span { color: var(--ink-faint); }
.rnote__title a { color: inherit; text-decoration: none; }
.rnote__title a:hover { color: var(--teal-deep); text-decoration: underline; }
.rnote__cite {
  display: block; margin-top: auto; padding-top: 16px;
  font-style: normal; font-size: 0.76rem; color: var(--ink-faint); line-height: 1.45;
}
.rnote__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(6, 40, 58, 0.14);
}
.rnote__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 0.86rem; color: var(--teal-deep); text-decoration: none;
}
.rnote__more svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.rnote__more:hover svg { transform: translateX(4px); }
.rnote__src { font-size: 0.76rem; font-weight: 600; color: var(--ink-faint); text-decoration: none; white-space: nowrap; }
.rnote__src:hover { color: var(--teal-deep); text-decoration: underline; }

/* ---------------------------------------------------------- WATER STRIP (home teaser) */
.water-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
}
.wchip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-top: 4px solid var(--wt, var(--aqua));
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.wchip:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(6, 40, 58, 0.14); }
.wchip__ph {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wt, var(--aqua)) 14%, #fff);
  border: 2px solid color-mix(in srgb, var(--wt, var(--aqua)) 42%, #fff);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--wt, var(--aqua));
  line-height: 1;
}
.wchip__ph small { display: block; font-size: 0.58rem; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: 2px; font-weight: 600; }
.wchip__name { font-family: var(--font-head); font-weight: 600; font-size: 0.94rem; line-height: 1.25; }
.wchip__drink { font-size: 0.72rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------- FAQ (native accordion) */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq__item {
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.10);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(6, 40, 58, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq__item[open] { border-color: rgba(18, 181, 229, 0.4); box-shadow: 0 16px 36px rgba(6, 40, 58, 0.09); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 20px 58px 20px 24px;
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--teal-deep);
  border-bottom: 2px solid var(--teal-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__q:hover { color: var(--teal-deep); }
.faq__a { padding: 0 24px 22px; color: var(--ink-soft); line-height: 1.7; font-size: 0.96rem; }
.faq__a p + p { margin-top: 12px; }
.faq__a a { color: var(--teal-deep); font-weight: 600; }

/* ---------------------------------------------------------- TESTIMONIALS */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card {
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.08);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.quote-card__mark {
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: 0.7;
  color: rgba(18, 181, 229, 0.3);
  margin-bottom: 14px;
}
.quote-card p { color: var(--ink-soft); line-height: 1.72; font-size: 0.98rem; flex: 1; }
.quote-card__who { margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(6, 40, 58, 0.14); }
.quote-card__name { font-weight: 700; font-size: 0.95rem; }
.quote-card__role { font-size: 0.84rem; color: var(--ink-faint); margin-top: 3px; }

/* ---------------------------------------------------------- TIMELINE */
.timeline { max-width: 780px; margin: 0 auto; position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--aqua), rgba(18, 181, 229, 0.12));
}
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -34px; top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--aqua);
  box-shadow: 0 0 0 4px rgba(18, 181, 229, 0.12);
}
.tl-item__year { font-family: var(--font-head); font-weight: 700; color: var(--teal-deep); font-size: 0.95rem; letter-spacing: 0.04em; }
.tl-item__title { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; margin: 5px 0 7px; }
.tl-item p { color: var(--ink-soft); line-height: 1.65; font-size: 0.95rem; }

/* ---------------------------------------------------------- TRUST / CERTIFICATION STRIP */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}
.trust__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.trust__item svg { width: 26px; height: 26px; flex-shrink: 0; color: #5cf0cf; }
.trust__item h3 { font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; color: #fff; margin-bottom: 5px; }
.trust__item p { font-size: 0.86rem; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------- ARTICLE (long-form) */
.article { max-width: 740px; margin: 0 auto; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 26px;
}
.article__lead {
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-bottom: 30px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(6, 40, 58, 0.10);
}
.article__body { font-size: 1.04rem; line-height: 1.8; color: var(--ink-soft); }
.article__body > * + * { margin-top: 22px; }
.article__body h2 {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 46px;
  scroll-margin-top: 100px;
}
.article__body h3 {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 34px;
}
.article__body ul, .article__body ol { padding-left: 24px; display: grid; gap: 10px; }
.article__body li { line-height: 1.7; }
.article__body li::marker { color: var(--aqua); font-weight: 700; }
.article__body strong { color: var(--ink); font-weight: 700; }
.article__body a { color: var(--teal-deep); font-weight: 600; }
.article__body blockquote {
  margin: 34px 0;
  padding: 22px 28px;
  border-left: 4px solid var(--aqua);
  background: #f4fafe;
  border-radius: 0 16px 16px 0;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
}
.article__body figure { margin: 34px 0; }
.article__body figure img { width: 100%; border-radius: 18px; box-shadow: var(--shadow-card); }
.article__body figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--ink-faint); text-align: center; }
.article__body table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.article__body th, .article__body td { padding: 12px 14px; border-bottom: 1px solid rgba(6, 40, 58, 0.1); text-align: left; }
.article__body th { font-weight: 700; color: var(--ink); background: #f7fbfe; }

.article__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 40px;
  background: #eaf6fd;
}
.article__refs {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(6, 40, 58, 0.12);
}
.article__refs h2 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; }
.article__refs ol { padding-left: 20px; display: grid; gap: 11px; }
.article__refs li { font-size: 0.87rem; line-height: 1.6; color: var(--ink-faint); }
.article__refs a { color: var(--teal-deep); word-break: break-word; }

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 740px;
  margin: 46px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(6, 40, 58, 0.12);
}
.article-nav a {
  color: var(--teal-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.93rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 46%;
}
.article-nav a:hover { text-decoration: underline; }
.article-nav svg { width: 16px; height: 16px; flex-shrink: 0; }

/* blog filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-chip {
  border: 1px solid rgba(6, 40, 58, 0.16);
  background: #fff;
  color: var(--ink-soft);
  font: 600 0.88rem/1 var(--font-body);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-chip:hover { border-color: var(--aqua); color: var(--ink); }
.filter-chip.is-active { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(18, 181, 229, 0.3); }

.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__media { overflow: hidden; }
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__media img { transition: transform 0.5s var(--ease-out); }

/* ---------------------------------------------------------- FORM STATES */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--aqua); }
.field--check label { font-size: 0.86rem; line-height: 1.55; font-weight: 500; }
.field--check a { color: var(--teal-deep); font-weight: 600; }
.field__error { font-size: 0.82rem; color: #d33; font-weight: 600; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #d33; background: #fff8f8; }
.field.has-error .field__error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  display: none;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 0.94rem;
  line-height: 1.6;
  font-weight: 600;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #e9fbf4; color: #0a6b4a; border: 1px solid #9fe3c8; }
.form-status--err { background: #fdeeee; color: #9b2222; border: 1px solid #f0b6b6; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }

/* ---------------------------------------------------------- COOKIE CONSENT */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 160%);
  z-index: 120;
  width: min(720px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid rgba(6, 40, 58, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(6, 40, 58, 0.25);
  padding: 24px 26px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  transition: transform 0.5s var(--ease-out);
}
.cookie.is-open { transform: translate(-50%, 0); }
.cookie__text { flex: 1; min-width: 240px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.cookie__text strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: 1rem; margin-bottom: 6px; }
.cookie__text a { color: var(--teal-deep); font-weight: 600; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------- VIDEO INVITE
   Offered only to a visitor who has demonstrably been reading (see the
   reading-intent watcher in main.js), so it should feel like an offer rather
   than an ambush: it fades rather than slams, it can be dismissed four
   different ways, and it never appears on the contact or legal pages.
   Sits above the cookie bar (z120) and the underwater wash (z60). */
.invite {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, 3vh) 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.invite.is-open { opacity: 1; visibility: visible; transition: opacity 0.32s ease; }
.invite__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 26, 38, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.invite__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 40px 90px rgba(4, 26, 38, 0.42);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.42s var(--ease-out);
}
.invite.is-open .invite__panel { transform: none; }
.invite__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(6, 40, 58, 0.42);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.invite__close:hover { background: rgba(6, 40, 58, 0.72); transform: scale(1.06); }
.invite__close svg { width: 18px; height: 18px; }

/* --- player --- */
.invite__media {
  position: relative;
  background: #05202e;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  /* width has to be pinned: with only aspect-ratio and a max-height, the box
     satisfies the ratio by narrowing instead, leaving a gap beside the video. */
  width: 100%;
  aspect-ratio: 16 / 9;
  /* On a laptop a full-width 16:9 player is taller than the room left over, and
     narrowing the panel only makes the copy wrap taller -- it fights itself. So
     the player gives up height instead, cropping a little top and bottom (the
     subject is centred), down to a 2.6:1 floor past which it stops being worth
     watching and the note below is allowed to scroll instead. */
  max-height: max(340px, calc(100dvh - 420px));
}
.invite__video { width: 100%; height: 100%; display: block; object-fit: cover; background: #05202e; }
/* The play control only exists until the visitor uses it; after that the
   native controls take over, so it is removed rather than merely hidden. */
.invite__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 14px 34px rgba(4, 26, 38, 0.45);
  display: grid;
  place-items: center;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s ease;
}
.invite__play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: invitePulse 2.4s ease-out infinite;
}
.invite__play:hover { transform: scale(1.08); box-shadow: 0 18px 44px rgba(4, 26, 38, 0.55); }
.invite__play svg { width: 34px; height: 34px; margin-left: 4px; }
@keyframes invitePulse {
  0% { transform: scale(0.94); opacity: 0.9; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.invite__badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(4, 26, 38, 0.55);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.invite__sound {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 600 0.8rem/1 var(--font-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(4, 26, 38, 0.35);
}

/* --- copy --- */
.invite__body { padding: 26px clamp(22px, 4vw, 38px) clamp(22px, 4vw, 30px); }
.invite__eyebrow {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.invite__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
}
.invite__text { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; }
.invite__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.invite__dismiss {
  border: 0;
  background: none;
  padding: 8px 4px;
  cursor: pointer;
  font: 600 0.9rem/1 var(--font-body);
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.invite__dismiss:hover { color: var(--ink); }
.invite__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 40, 58, 0.10);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Scrolling the page behind an open dialog is disorienting and, on iOS, loses
   the visitor's place entirely. */
body.has-invite { overflow: hidden; }

/* Below this the copy itself is the tall part, so tighten it rather than the
   player -- which is already as small as it usefully gets. */
@media (min-width: 641px) and (max-height: 640px) {
  .invite__body { padding-top: 18px; }
  .invite__text { margin-bottom: 14px; }
  .invite__note { margin-top: 14px; padding-top: 11px; }
}

@media (max-width: 640px) {
  .invite { padding: 0; align-items: flex-end; }
  .invite__panel { max-height: 92dvh; border-radius: 22px 22px 0 0; width: 100%; }
  .invite__media { border-radius: 22px 22px 0 0; }
  .invite__play { width: 66px; height: 66px; }
  .invite__play svg { width: 27px; height: 27px; }
  .invite__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .invite, .invite__panel { transition: none; }
  .invite__play::after { animation: none; }
}

/* ---------------------------------------------------------- VIDEO CLIPS
   A compact row of distributor presentations on the home page. The thumbnails
   come from our own domain and the YouTube player is only built on click, so
   an ordinary visit sends nothing to Google. */
.section[hidden] { display: none; }
.clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.clips__lang:empty,
.clips__note:empty { display: none; }
.clips__lang {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}
.clips__note {
  margin-top: 26px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.clip {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(11, 130, 196, 0.12);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(6, 40, 58, 0.07);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.clip:hover,
.clip:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(6, 40, 58, 0.14); }
.clip__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #06283a;
}
.clip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out), opacity 0.25s ease;
}
.clip:hover .clip__media img { transform: scale(1.04); opacity: 0.9; }
.clip__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 10px 26px rgba(6, 40, 58, 0.4);
  transition: transform 0.25s var(--ease-out);
}
.clip__play svg { width: 22px; height: 22px; margin-left: 2px; }
.clip:hover .clip__play { transform: scale(1.1); }
.clip__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #fff;
  background: rgba(4, 26, 38, 0.78);
}
.clip__body { display: block; padding: 16px 18px 20px; }
.clip__title {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.clip__desc {
  display: block;
  margin-top: 7px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

/* --- video page --- */
.vfeature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
  margin-bottom: clamp(48px, 7vw, 80px);
}
.vfeature__art {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #06283a;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(6, 40, 58, 0.22);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.vfeature__art:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(6, 40, 58, 0.3); }
.vfeature__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfeature__art .clip__play { width: 74px; height: 74px; }
.vfeature__art .clip__play svg { width: 28px; height: 28px; }
.vfeature__label {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
/* h3 on the home page, where the section already owns the h2 — the styling
   follows the role, not the level. */
.vfeature__body h2,
.vfeature__body h3 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
}
/* On the home page the block sits under a centred section head, so it needs
   the gap that the video page gets from its own page header. */
#clipFeature .vfeature { margin-top: clamp(30px, 4vw, 44px); text-align: left; }
/* Heading for the short clips sitting under the featured film. */
.clips__head { margin-bottom: 20px; }
.clips__head[hidden] { display: none; }
.clips__head h3 {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: var(--ink);
}
.clips__head .clips__lang { margin-top: 6px; }
.vfeature__text { color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.vfeature__note { margin-top: 16px; font-size: 0.82rem; color: var(--ink-faint); }

.vgroup + .vgroup { margin-top: clamp(44px, 6vw, 72px); }
.vgroup__head { margin-bottom: 26px; }
.vgroup__head h2 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--ink);
}
.vgroup__head p { margin-top: 7px; color: var(--muted); font-size: 0.94rem; }
.clips__lang--center { margin-top: 26px; text-align: center; }

@media (max-width: 860px) {
  .vfeature { grid-template-columns: 1fr; }
}

/* --- lightbox --- */
.clipbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, 4vh) 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.clipbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s ease; }
.clipbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 26, 38, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.clipbox__panel {
  position: relative;
  width: min(1000px, 100%);
  transform: translateY(16px) scale(0.985);
  transition: transform 0.38s var(--ease-out);
}
.clipbox.is-open .clipbox__panel { transform: none; }
.clipbox__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.2s ease, transform 0.2s ease;
}
.clipbox__close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.clipbox__close svg { width: 18px; height: 18px; }
.clipbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* the player is never taller than the screen minus the chrome around it */
  max-height: calc(100dvh - 150px);
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.clipbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.clipbox__caption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 900px) {
  .clips { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 620px) {
  .clips { grid-template-columns: 1fr; gap: 18px; }
  .clipbox { padding: 16px 12px; }
  .clipbox__close { top: -44px; }
  .clip__play { width: 48px; height: 48px; }
  .clip__play svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .clip, .clipbox, .clipbox__panel, .clip__media img, .clip__play { transition: none; }
}

/* ---------------------------------------------------------- BACK TO TOP */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  box-shadow: 0 10px 26px rgba(18, 181, 229, 0.4);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------- LEGAL PAGES */
.legal { max-width: 800px; margin: 0 auto; font-size: 0.98rem; line-height: 1.8; color: var(--ink-soft); }
.legal h2 {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--ink);
  margin: 42px 0 14px;
  scroll-margin-top: 100px;
}
.legal h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 26px 0 10px; }
.legal p + p { margin-top: 14px; }
.legal ul, .legal ol { padding-left: 24px; margin: 14px 0; display: grid; gap: 9px; }
.legal li::marker { color: var(--aqua); }
.legal a { color: var(--teal-deep); font-weight: 600; word-break: break-word; }
.legal__updated { font-size: 0.86rem; color: var(--ink-faint); font-style: italic; margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 18px 0; }
.legal th, .legal td { padding: 11px 14px; border: 1px solid rgba(6, 40, 58, 0.12); text-align: left; vertical-align: top; }
.legal th { background: #f7fbfe; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------- 404 */
.err-page {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10vh var(--edge);
}
.err-page__code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------- FOOTER EXTRAS */
.site-footer__links .col--wide { min-width: 200px; }
.site-footer__legal {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
.site-footer__legal a { color: rgba(234, 247, 255, 0.6); text-decoration: none; font-size: 0.82rem; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.site-footer__note {
  max-width: 900px;
  margin: 0 auto 18px;
  font-size: 0.76rem;
  line-height: 1.65;
  color: rgba(234, 247, 255, 0.38);
  text-align: center;
}
.social { display: flex; gap: 12px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(234, 247, 255, 0.8);
  margin: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.social a:hover { background: var(--accent-grad); color: #fff; transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- REVEAL ON SCROLL */
/* Only hide the section if JavaScript is present to bring it back. Without the
   .js flag (crawlers, JS-off visitors, the pre-rendered HTML) everything is
   simply visible — content must never depend on an animation to be readable. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .water-strip { grid-template-columns: repeat(2, 1fr); }
  .rgrid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .compare__hint { display: block; }
}

/* Below this the eight links no longer fit on one line, so the menu collapses
   into the hamburger. It used to happen at 760px, which left the header
   visibly spilling past its own right edge between 760 and 900. The exact
   number is set by German: at 1110px "Wasserarten"/"Gesundheit" tip onto a
   second line, so the handover has to happen above that. */
@media (max-width: 1140px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgb(var(--nav-surface));
    box-shadow: 0 18px 40px rgba(6, 40, 58, 0.14);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }
  /* eight rows now, so the open menu needs room for all of them */
  .nav__links.is-open { max-height: 520px; opacity: 1; }
  .nav__links a {
    font-size: 0.95rem;
    padding: 15px var(--edge);
    text-align: center;
    border-bottom: 1px solid rgba(6, 40, 58, 0.06);
  }
  .nav__links a::after { display: none; }
}

/* Once the links have collapsed the header row is brand + film + language +
   menu, and those four keep their full size all the way down. They need 441px
   between them, so on any phone narrower than that the menu button was pushed
   off the right edge -- unreachable, and on the inner pages it dragged a
   horizontal scrollbar across the whole document. Each piece gives up a little
   so all four stay on screen. */
@media (max-width: 460px) {
  .nav { gap: 10px; }
  .brand { gap: 8px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__word,
  .brand__sub { font-size: 0.85rem; }
  .lang__toggle { padding: 6px 7px; gap: 4px; font-size: 0.74rem; letter-spacing: 0.04em; }
  .lang__globe { width: 15px; height: 15px; }
  .nav__toggle { width: 34px; }
}
/* "LPG Solutions" is a longer line than the old wordmark, so the tightest set
   of header sizes has to start earlier than it used to: measured, the row still
   ran a few pixels past the viewport anywhere between 361px and 400px. */
@media (max-width: 400px) {
  .nav { padding: 0 12px; gap: 7px; }
  .brand__mark { width: 27px; height: 27px; }
  .brand__word,
  .brand__sub { font-size: 0.75rem; }
  .lang__toggle { padding: 6px; gap: 3px; font-size: 0.68rem; }
  .lang__caret { display: none; }   /* the globe already says "language" */
}

@media (max-width: 760px) {
  :root { --nav-h: 68px; }

  .cards { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .step:not(:last-child)::after { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
  .cta-banner { margin: 0 16px; padding: 48px 24px; }

  .cards--2 { grid-template-columns: 1fr; }
  /* Two credential cards abreast never fitted a phone: a `1fr` track cannot
     shrink below its min-content, so the second column simply hung off the
     right edge and the whole About page scrolled sideways (149px in German). */
  .trust { grid-template-columns: minmax(0, 1fr); }
  .pd { grid-template-columns: 1fr; }
  .pd__media { position: static; }
  .wtype { grid-template-columns: 1fr; gap: 18px; text-align: left; padding: 24px; }
  .wtype:hover { transform: none; }
  .wtype__ph { width: 76px; height: 76px; }
  .wtype__side { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .wtype__num { font-size: 1.1rem; letter-spacing: -0.01em; }
  .wtype__fact { flex-basis: 100%; }
  .wscale { padding-top: 56px; }
  .wscale__track { margin-bottom: 56px; }
  .wscale__lab { max-width: 66px; }
  .wscale__lab i { display: none; }
  .wscale__lab b { font-size: 0.88rem; }
  .article__body h2 { font-size: 1.35rem; }
  .article__hero { aspect-ratio: 16 / 10; border-radius: 18px; }
  .article-nav a { max-width: 100%; }
  .cookie { padding: 20px; gap: 16px; bottom: 12px; }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1; }
  .to-top { right: 14px; bottom: 14px; }
  .timeline { padding-left: 28px; }
  .tl-item::before { left: -28px; width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}