/* ═══════════════════════════════════════════════════════════════════════
   Source to Glass — Powered by COREMIN™

   Palette and type taken from naturalminerals.co rather than invented: the
   navy, the water cyan and the nature green are the parent brand's own, and
   Inter is the face it already uses. Light ground, photographic, bright —
   this is a sibling of that site, not a different company.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — from the parent site's stylesheet */
  --navy-900: #071e70;   /* deepest, headlines on light */
  --navy-800: #0a2d8a;
  --navy-600: #1a4db5;
  --cyan:     #1c8ccc;   /* water */
  --cyan-600: #1577ad;
  --green:    #6cc049;   /* nature */
  --green-700:#4caf50;

  /* Ground */
  --paper:    #ffffff;
  --paper-2:  #f4f7fc;   /* section alternate */
  --paper-3:  #e8ecf8;   /* chips, rails */
  --line:     #dbe3f2;
  --line-2:   #eef2fa;

  /* Ink */
  --ink:      #0b1736;
  --ink-2:    #40527e;
  /* Measured against white: 4.96:1. The previous #7685ab was 3.68 and
     failed AA for the breadcrumbs, captions, counts and price units that
     all use it. The brand colours below are unchanged — these are the
     text-safe variants, because #1c8ccc at 3.70 is fine as a fill and not
     as small type. */
  --ink-3:    #626f96;

  /* Gold, for the Powered by COREMIN tiers only */
  --cyan-text:  #1577ad;   /* 4.91:1 on white — eyebrows, small links */
  --green-text: #357a38;   /* 5.26:1 on white — ticks, affirmatives */

  --gold:     #b8924a;
  --gold-2:   #d9bb7c;

  /* One superfamily, two optical roles. IBM Plex Sans and IBM Plex Mono are
     designed together, so a lot code sits against prose sharing the same
     skeleton instead of looking bolted on — which is what Inter beside Plex
     Mono did. Plex is variable, open source, has a well-drawn rupee and
     tabular numerals, and has a Devanagari sibling if Hindi or Marathi is
     ever needed. Change these two lines to change the whole site. */
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(11,23,54,.06), 0 2px 8px rgba(11,23,54,.04);
  --shadow:    0 4px 12px rgba(11,23,54,.07), 0 16px 40px rgba(11,23,54,.07);
  --shadow-lg: 0 8px 24px rgba(11,23,54,.10), 0 32px 72px rgba(11,23,54,.12);

  /* Type scale. Twelve steps, and nothing outside them. Before this there
     were thirty-one distinct sizes in this file and seven more inline, which
     is how a page ends up looking almost-aligned everywhere. */
  --t-2xs:  12.5px;   /* mono micro-labels */
  --t-xs:   13.5px;   /* captions, chips, legends */
  --t-sm:   14px;   /* meta, fine print */
  --t-ms:   15px;   /* dense body, table cells */
  --t-base: 16px;     /* card body, lists */
  --t-md:   17px;   /* body copy */
  --t-lg:   19px;   /* lede */
  --t-xl:   clamp(19px, 2.2vw, 23px);
  --t-2xl:  clamp(23px, 3.1vw, 31px);
  --t-3xl:  clamp(27px, 4.2vw, 42px);
  --t-4xl:  clamp(31px, 5vw, 52px);
  --t-5xl:  clamp(34px, 6.2vw, 64px);

  /* Spacing. Everything that is not a one-off sits on this. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-sec: clamp(56px, 8vh, 96px);     /* section rhythm */
  --s-gut: clamp(24px, 4vw, 56px);     /* column gutter */

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Measure — the one number that fixes "dead right column" */
  --measure: 68ch;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  /* The UA default is margin: 8px, and without this reset every full-bleed
     band — nav, page heroes, the navy footer, the CTA — stopped 8px short of
     the viewport on both sides, leaving a white sliver down each edge. The
     negative-margin bleed trick below assumes the body starts at x=0. */
  margin: 0;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.7;
  padding-inline: 20px;
  padding-block: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1180px; margin: 0 auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; color: var(--navy-900); }
h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.014em; }
h4 { font-size: var(--t-lg); letter-spacing: -.01em; }
p  { margin: 0; max-width: 66ch; }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-text);
}
.mono  { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.tm    { font-size: .52em; vertical-align: .62em; letter-spacing: 0; font-weight: 600; }

a { color: var(--cyan-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 6px 0; }
.skip:focus { left: 0; text-decoration: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-base); font-weight: 600; font-family: var(--sans);
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--navy-900); color: #fff; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:hover { background: var(--navy-800); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cyan { background: var(--cyan-600); }
.btn-cyan:hover { background: #12648f; }
.btn-ghost { background: #fff; color: var(--navy-900); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--cyan); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.24); }

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: rgba(255,255,255,.88); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-2);
  margin-inline: -20px; padding-inline: 20px;
}
.nav-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding-block: 13px; }
.logo { height: 38px; width: auto; flex: none; }
.nav-links { display: flex; gap: 25px; margin-left: auto; }
.nav-links a { color: var(--ink-2); font-size: var(--t-base); font-weight: 500; text-decoration: none; transition: color .18s; white-space: nowrap; }
.nav-links a:hover { color: var(--navy-900); text-decoration: none; }
@media (max-width: 1000px) { .nav-links { display: none; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-art { min-width: 0; display: grid; justify-items: center; }
@media (max-width: 940px) { .hero-art { order: -1; } }

/* ── Trust strip ───────────────────────────────────────────────────── */
.trust-strip {
  margin-inline: -20px; padding-inline: 20px;
  background: var(--navy-900); color: #fff;
}
.trust-in {
  max-width: 1180px; margin: 0 auto; padding-block: 22px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}
@media (max-width: 900px) { .trust-in { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 460px) { .trust-in { grid-template-columns: 1fr; } }
.trust-in div { min-width: 0; }
.trust-in .n { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.15; }
.trust-in .l { font-size: var(--t-sm); color: rgba(255,255,255,.62); margin-top: 4px; letter-spacing: .02em; }

/* ── Sections ──────────────────────────────────────────────────────── */
section { padding-block: clamp(54px, 8vh, 94px); }
.band { margin-inline: -20px; padding-inline: 20px; background: var(--paper-2); }
.band > .wrap { max-width: 1180px; }
.sec-head { margin-bottom: 40px; max-width: 70ch; }
.sec-head h2 { margin-top: 12px; }
.sec-head p { margin-top: 17px; color: var(--ink-2); font-size: var(--t-lg); }
.center { margin-inline: auto; text-align: center; }
.center p { margin-inline: auto; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 20px; }
.c2 { grid-template-columns: repeat(2, 1fr); }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .c3 { grid-template-columns: 1fr; } .c2 { grid-template-columns: 1fr; } }
@media (max-width: 520px)  { .c4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 2.6vw, 30px); min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c6d4ee; }
.card h3 { margin: 14px 0 11px; }
.card p { font-size: var(--t-base); color: var(--ink-2); }
.card ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--t-base); color: var(--ink-2); }
.card li .tick { color: var(--green-text); font-weight: 700; }

.icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #e8f4fd, #d7ebfa); color: var(--cyan-600);
}
.icon svg { width: 24px; height: 24px; }
.icon-green { background: linear-gradient(145deg, #eaf7e4, #dcf0d2); color: var(--green-700); }
.icon-navy  { background: linear-gradient(145deg, #e4e9f8, #d4ddf4); color: var(--navy-600); }

.chip {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  padding: 5px 11px; border-radius: 999px;
  background: var(--paper-3); color: var(--navy-800); white-space: nowrap;
}

/* ── Powered by COREMIN — the centrepiece ──────────────────────────── */
.coremin {
  position: relative; overflow: hidden;
  margin-inline: -20px; padding-inline: 20px; color: #fff;
  background:
    radial-gradient(900px 520px at 82% 0%, rgba(28,140,204,.30), transparent 60%),
    radial-gradient(700px 480px at 10% 100%, rgba(184,146,74,.20), transparent 60%),
    linear-gradient(165deg, #071e70 0%, #0a1f52 60%, #061634 100%);
}
.coremin h2, .coremin h3 { color: #fff; }
.coremin .sec-head p { color: rgba(255,255,255,.72); }
.coremin .eyebrow { color: var(--gold-2); }
.mark-line {
  font-size: var(--t-lg); font-weight: 600; color: var(--gold-2);
  letter-spacing: -.01em; margin-top: 18px;
}
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 24px 22px; min-width: 0;
  transition: transform .22s, background .22s, border-color .22s;
}
.tier:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(217,187,124,.5); }
.tier .crest { width: 38px; height: 38px; margin-bottom: 16px; }
.tier h3 { font-size: var(--t-xl); margin-bottom: 7px; }
.tier .for { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-2); }
.tier p { font-size: var(--t-ms); color: rgba(255,255,255,.66); margin-top: 11px; }

.art-note { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-top: 14px; }

/* ── The chain ─────────────────────────────────────────────────────── */
.split2 { display: grid; grid-template-columns: 1fr 352px; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 920px) { .split2 { grid-template-columns: 1fr; } }
.split2 > * { min-width: 0; }

.rowline { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-ms); }
.rowline:last-child { border-bottom: 0; }
.rowline dt { color: var(--ink-3); }
.rowline dd { margin: 0; font-family: var(--mono); font-size: var(--t-sm); text-align: right; color: var(--ink); }

.cert { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-sm); }
.cert .head { display: flex; justify-content: space-between; align-items: start; gap: 14px; border-bottom: 1px solid var(--line-2); padding-bottom: 16px; }
.verified {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--green-700);
  background: #eef9e8; border: 1px solid #cfeac0; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}

/* ── Phone / scan demo ─────────────────────────────────────────────── */
.modes { display: inline-flex; gap: 0; background: var(--paper-3); border-radius: 999px; padding: 4px; }
.modes button {
  background: transparent; border: 0; color: var(--ink-2); cursor: pointer; border-radius: 999px;
  font-family: var(--sans); font-size: var(--t-ms); font-weight: 600; padding: 9px 18px; transition: all .2s;
}
.modes button[aria-pressed="true"] { background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm); }
.mode-note { margin-top: 14px; font-size: var(--t-base); color: var(--ink-2); min-height: 3.2em; }

.phone {
  width: 100%; max-width: 348px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 30px; padding: 11px;
  background: linear-gradient(165deg, #fff, #eef3fb); box-shadow: var(--shadow-lg);
}
.screen { background: #fff; border-radius: 21px; overflow: hidden; height: 552px; display: flex; flex-direction: column; border: 1px solid var(--line-2); }
.screen-top { padding: 13px 15px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; flex: none; background: var(--paper-2); }
.screen-top .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.screen-top .url { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-body { padding: 18px 16px; overflow-y: auto; flex: 1; }
.idle { display: grid; place-items: center; height: 100%; text-align: center; gap: 16px; padding: 22px; }
.idle svg { width: 88px; height: auto; }

.mineral-row { display: grid; grid-template-columns: 64px 1fr 58px; gap: 9px; align-items: center; font-size: var(--t-sm); padding: 5px 0; }
.mineral-bar { height: 4px; background: var(--paper-3); border-radius: 999px; position: relative; overflow: hidden; }
.mineral-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 999px; display: block; }
.mineral-row .v { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); text-align: right; }

.offer { margin-top: 18px; padding: 15px; border-radius: 12px; border: 1px solid #ecd9b0; background: linear-gradient(140deg, #fdf7ea, #faf0dc); }
.offer .amt { font-size: var(--t-2xl); font-weight: 700; color: #946f22; letter-spacing: -.02em; }
.offer .cond { margin-top: 9px; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.75; }
.offer .by { margin-top: 10px; font-size: var(--t-2xs); color: var(--ink-3); border-top: 1px solid #ecd9b0; padding-top: 9px; }
.listing { margin-top: 15px; display: grid; gap: 8px; }
.listing .v { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: var(--t-sm); }
.listing .v .d { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); }
.gate { margin-top: 15px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; font-size: var(--t-sm); color: var(--ink-2); }

/* ── Margin model ──────────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }
.calc > * { min-width: 0; }
.slider { margin-bottom: 26px; }
.slider .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.slider label { font-size: var(--t-ms); font-weight: 600; color: var(--ink-2); }
.slider output { font-size: var(--t-2xl); font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.slider input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 5px; background: var(--paper-3); border-radius: 999px; }
.slider input[type=range]::-moz-range-track { height: 5px; background: var(--paper-3); border-radius: 999px; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--cyan); margin-top: -7.5px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.slider input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--cyan); border-radius: 50%; border: 3px solid #fff; }
.slider .hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }

.readout { background: linear-gradient(165deg, #071e70, #0a2d8a); color: #fff; border-radius: 18px; padding: clamp(24px, 3.2vw, 36px); box-shadow: var(--shadow); }
.readout .big-l { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.readout .big { font-size: var(--t-5xl); font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.readout .sp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.17); }
.readout .sp div { min-width: 0; }
.readout .sp .l { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.readout .sp .n { font-size: var(--t-2xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.caveat { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.17); font-size: var(--t-sm); color: rgba(255,255,255,.58); line-height: 1.75; }

/* ── Minerals ──────────────────────────────────────────────────────── */
/* Explicit counts rather than auto-fit: there are ten minerals, and auto-fit
   put eight on the first row and left an orphan pair on the second. Five and
   two both divide ten. */
.grid-min { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 900px) { .grid-min { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-min { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grid-min { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Direct child only. `.grid-min div` also matched the .sym/.nm/.am divs
   inside each cell, so every mineral rendered as three nested bordered
   boxes instead of one card. */
.grid-min > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 14px; text-align: center; min-width: 0; box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s; }
.grid-min > div:hover { transform: translateY(-3px); border-color: var(--cyan); }
.grid-min .sym { font-size: var(--t-2xl); font-weight: 700; color: var(--cyan-600); letter-spacing: -.03em; }
.grid-min .nm { font-size: var(--t-sm); color: var(--ink-2); margin-top: 7px; font-weight: 500; }
.grid-min .am { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); margin-top: 3px; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
details { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 4px 20px; margin-bottom: 11px; transition: border-color .2s; }
details[open] { border-color: #c6d4ee; box-shadow: var(--shadow-sm); }
details summary { cursor: pointer; font-weight: 700; font-size: var(--t-lg); color: var(--navy-900); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-block: 16px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-family: var(--mono); color: var(--cyan); font-size: var(--t-xl); flex: none; font-weight: 400; }
details[open] summary::after { content: '–'; }
details p { padding-bottom: 18px; color: var(--ink-2); font-size: var(--t-md); }

/* ── Enquiry ───────────────────────────────────────────────────────── */
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 54px); align-items: start; }
@media (max-width: 860px) { .enq { grid-template-columns: 1fr; } }
.enq > * { min-width: 0; }
form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2.8vw, 32px); box-shadow: var(--shadow); }
.who-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.who-pick label { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; font-size: var(--t-base); font-weight: 600; color: var(--ink); transition: all .2s; position: relative; }
.who-pick input { position: absolute; opacity: 0; pointer-events: none; }
.who-pick label:has(input:checked) { border-color: var(--cyan); background: #f2f9fe; color: var(--navy-900); }
.who-pick label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.who-pick .k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); display: block; font-weight: 500; }
.who-pick .t { display: block; margin-top: 4px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: var(--t-ms); font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field textarea { width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); padding: 12px 14px; font-family: var(--sans); font-size: var(--t-base); transition: border-color .18s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(28,140,204,.12); }
.sent { margin-top: 15px; padding: 14px 16px; border-radius: 10px; font-size: var(--t-base); border: 1.5px solid var(--green); background: #f3fbef; color: #2f6d1f; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ────────────────────────────────────────────────────────── */
footer { margin-inline: -20px; padding-inline: 20px; background: var(--navy-900); color: rgba(255,255,255,.62); }
.foot-in { max-width: 1180px; margin: 0 auto; padding-block: 48px 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
footer p, footer li { font-size: var(--t-ms); line-height: 1.85; }
footer h4 { font-size: var(--t-sm); letter-spacing: .13em; text-transform: uppercase; color: #fff; margin: 0 0 12px; font-weight: 600; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer a { color: rgba(255,255,255,.62); }
footer a:hover { color: #fff; }
.legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.14); }

/* Two columns, so the disclosures sit on the same grid as the link columns
   above and each line lands near 58 characters. This block used to be one
   paragraph at max-width 92ch, which ran the full 1180px and read as a slab
   of text pinned to nothing. */
/* Same track definition as .foot-grid above, each disclosure spanning two of
   them, so the columns land on the link columns rather than merely being two
   equal halves that nearly line up. */
.legal-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5) 32px; }
.legal-cols > div { min-width: 0; grid-column: span 2; }
@media (max-width: 900px) { .legal-cols { grid-template-columns: 1fr 1fr; } .legal-cols > div { grid-column: span 1; } }
@media (max-width: 760px) { .legal-cols { grid-template-columns: 1fr; } }
.legal h4 { color: rgba(255,255,255,.82); margin-bottom: var(--s-2); }
.legal p { max-width: 58ch; font-size: var(--t-sm); color: rgba(255,255,255,.48); line-height: 1.78; }
.legal b { color: rgba(255,255,255,.75); font-weight: 600; }
.legal em { font-style: normal; color: rgba(255,255,255,.68); }
.legal-copy { margin-top: var(--s-6); padding-top: var(--s-4);
              border-top: 1px solid rgba(255,255,255,.09);
              max-width: none !important; color: rgba(255,255,255,.34) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Multi-page additions — nav, page heroes, and the page-specific blocks
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Nav: brand lockup, active state, mobile drawer ────────────────── */
.nav-brand { display: flex; align-items: center; gap: 13px; flex: none; text-decoration: none; }
.nav-brand:hover { text-decoration: none; }

.nav-links a { position: relative; padding-block: 4px; }
.nav-links a.is-on { color: var(--navy-900); font-weight: 600; }
.nav-links a.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--cyan); border-radius: 2px;
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.nav-panel { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-in { position: relative; }

@media (max-width: 1000px) {
  .nav-burger {
    display: grid; gap: 5px; margin-left: auto; padding: 10px; cursor: pointer;
    border-radius: 8px; border: 1px solid var(--line); background: #fff;
  }
  .nav-burger span { display: block; width: 20px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--cyan); outline-offset: 2px; }
  .nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-panel {
    display: none; position: absolute; left: -20px; right: -20px; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 10px 20px 20px;
  }
  .nav-toggle:checked ~ .nav-panel { display: flex; }
  .nav-links { display: flex; flex-direction: column; gap: 0; margin: 0; }
  .nav-links a { padding-block: 14px; border-bottom: 1px solid var(--line-2); font-size: var(--t-md); }
  .nav-links a.is-on::after { display: none; }
  .nav-panel .btn { margin-top: 16px; justify-content: center; }
}

.btn-sm { padding: 10px 20px; font-size: var(--t-base); }

/* ── Page hero — every page but home ───────────────────────────────── */
.page-hero {
  /* The bubbles inside are absolutely positioned, so this has to be their
     containing block — without it they anchor to the viewport. And the copy
     needs a stacking context above them, or they drift over the headline. */
  position: relative; overflow: hidden; isolation: isolate;
  margin-inline: -20px; padding-inline: 20px;

  /* These were a pale gradient while the home hero was a full-bleed
     photograph, so the inner pages read as a different, flatter site. Same
     navy ground now, with the lake used as texture rather than as a picture:
     heavily darkened and desaturated so it reads as depth behind the type,
     not as a competing image. */
  background:
    radial-gradient(900px 520px at 84% 6%, rgba(28,140,204,.34), transparent 62%),
    radial-gradient(700px 480px at 4% 100%, rgba(108,192,73,.14), transparent 62%),
    linear-gradient(165deg, #0a2d8a 0%, #071e70 48%, #061634 100%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../img/lake.jpg') center 42% / cover;
  opacity: .20;
  filter: saturate(.5) contrast(1.05);
  mix-blend-mode: luminosity;
}
.page-hero-in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding-block: clamp(40px, 6vh, 72px) clamp(34px, 5vh, 58px); }
.page-hero h1 { font-size: var(--t-4xl); max-width: 22ch; margin-top: var(--s-3); color: #fff; text-shadow: 0 2px 24px rgba(4,14,46,.4); }
/* Matches .lede and .t-lede: the class was renamed and the old selector
   silently stopped applying, which collided the lede with the headline. */
.page-hero .lede,
.page-hero .t-lede { margin-top: var(--s-4); font-size: var(--t-lg); color: rgba(255,255,255,.86); max-width: 56ch; }
/* .70 not .58: measured at 4.12:1 on the hero navy, which fails AA for
   11px type. */
.crumb { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.70); }
.crumb a { color: rgba(255,255,255,.72); }
.crumb a:hover { color: #fff; }

/* ── Closing CTA band ──────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  margin-inline: -20px; padding-inline: 20px; color: #fff;
  background:
    radial-gradient(700px 400px at 85% 15%, rgba(28,140,204,.34), transparent 62%),
    linear-gradient(160deg, #071e70, #0a1f52);
}
.cta-in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding-block: clamp(46px, 7vh, 76px); text-align: center; }
.cta-in h2 { color: #fff; margin-bottom: 16px; }
.cta-in p { color: rgba(255,255,255,.72); margin-inline: auto; margin-bottom: 30px; }
.cta-in .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Prose — see the retuned block further down for sizing ─────────── */
.prose p, .prose li, .prose ul, .prose ol { color: var(--ink-2); }
.prose p { max-width: none; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .updated { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 34px; }
.callout {
  margin: 26px 0; padding: 20px 22px; border-radius: 12px;
  background: var(--paper-2); border-left: 3px solid var(--cyan);
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { background: #fff8ec; border-left-color: var(--gold); }

/* ── Program cards ─────────────────────────────────────────────────── */
.prog { position: relative; display: flex; flex-direction: column; }
.prog.featured { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(28,140,204,.12), var(--shadow); }
.prog .flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase;
  background: var(--cyan-600); color: #fff; padding: 4px 13px; border-radius: 999px; white-space: nowrap;
}
.prog .price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 4px; }
.prog .price .n { font-size: var(--t-3xl); font-weight: 700; color: var(--navy-900); letter-spacing: -.035em; line-height: 1; }
.prog .price .u { font-size: var(--t-ms); color: var(--ink-3); font-weight: 500; }
.prog .fit { font-size: var(--t-ms); color: var(--ink-3); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.prog .btn { margin-top: 22px; justify-content: center; }

/* ── Comparison table ──────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
table.cmp th, table.cmp td { padding: 15px 18px; text-align: left; font-size: var(--t-base); border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.cmp thead th { background: var(--paper-2); font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
table.cmp tbody th { font-weight: 600; color: var(--ink); width: 30%; }
table.cmp td { color: var(--ink-2); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp .yes { color: var(--green-text); font-weight: 700; }
table.cmp .no  { color: var(--ink-3); }

/* ── Numbered timeline ─────────────────────────────────────────────── */
.timeline { display: grid; gap: 0; }
.tl-step { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 32px; position: relative; }
.tl-step:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 60px; bottom: 0;
  width: 2px; background: linear-gradient(var(--cyan), var(--line));
}
.tl-step .num {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--cyan); color: var(--navy-900);
  font-weight: 700; font-size: var(--t-xl); position: relative; z-index: 1; box-shadow: var(--shadow-sm);
}
.tl-step .body { padding-top: 10px; min-width: 0; }
.tl-step h3 { margin-bottom: 9px; }
.tl-step p { font-size: var(--t-base); color: var(--ink-2); }

/* ── Role columns (the three-tier network) ─────────────────────────── */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } }
.role { padding: clamp(22px, 2.6vw, 30px); border-right: 1px solid var(--line); min-width: 0; }
.role:last-child { border-right: 0; }
@media (max-width: 860px) { .role { border-right: 0; border-bottom: 1px solid var(--line); } .role:last-child { border-bottom: 0; } }
.role .tag { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-text); }
.role h3 { margin: 10px 0 12px; }
.role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.role li { font-size: var(--t-base); color: var(--ink-2); display: grid; grid-template-columns: 16px 1fr; gap: 9px; }
.role li .tick { color: var(--green-text); font-weight: 700; }

/* ── Figures and scenes ────────────────────────────────────────────── */
.figure { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-sm); margin: 0; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: var(--t-ms); color: var(--ink-3); line-height: 1.7; }
.figure--flush { padding: 0; overflow: hidden; }
.figure--flush figcaption { margin: 0; padding: 16px 22px; }
.scene { display: block; width: 100%; height: auto; }

/* ── Reveal on scroll (progressive: visible if JS never runs) ──────── */

/* ── Home hero: layout ─────────────────────────────────────────────── */
/* These were briefly deleted along with the dead `.hero` block. Only the
   rules prefixed `.hero ` were dead; `.hero-in`, `.hero-grid` and
   `.hero-copy` are the layout the `.hero-scenic` markup actually uses, and
   without them the copy column collapsed and the product shot fell below
   the fold. */
.hero-in { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2;
           padding-block: clamp(44px, 7vh, 80px) clamp(40px, 6vh, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr;
             gap: clamp(26px, 4.5vw, 64px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy { min-width: 0; }
.hero-scenic h1 { margin: var(--s-4) 0 0; }
.hero-scenic h1 em { font-style: normal; }
.hero-scenic .t-lede { margin-top: var(--s-5); font-size: clamp(16.5px, 2vw, 19.5px); }

/* ── Home hero: full-bleed scene, copy over it ─────────────────────── */
.hero-scenic { position: relative; margin-inline: -20px; padding-inline: 20px; overflow: hidden; isolation: isolate; }
.hero-scenic .hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(5,16,54,.90) 0%, rgba(7,30,112,.74) 38%, rgba(7,30,112,.22) 66%, rgba(7,30,112,.05) 100%),
    linear-gradient(180deg, rgba(5,16,54,.34) 0%, transparent 34%);
}
.hero-scenic .hero-scenic h1, .hero-scenic h2 { color: #fff; }
.hero-scenic h1 { text-shadow: 0 2px 28px rgba(5,16,54,.4); max-width: 17ch; }
.hero-scenic h1 em { font-style: normal; color: #7fd4ff; }
.hero-scenic .eyebrow { color: #8fdcff; }
.hero-scenic .art-note { color: rgba(255,255,255,.52); }

/* The marks under the hero copy — GMP, HACCP and the rest. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.badges span {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
}

/* ── Industry split: image one side, copy the other ────────────────── */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4.5vw, 62px); align-items: center; }
@media (max-width: 900px) { .alt-row { grid-template-columns: 1fr; } }
.alt-row > * { min-width: 0; }
.alt-row.flip .alt-art { order: 2; }
@media (max-width: 900px) { .alt-row.flip .alt-art { order: 0; } }
.alt-row h2 { font-size: var(--t-2xl); }
.alt-row .pitch {
  margin-top: 22px; padding: 18px 20px; border-radius: 12px;
  background: linear-gradient(135deg, #eef7ff, #e6f1fb); border-left: 3px solid var(--cyan);
  font-size: var(--t-md); color: var(--navy-800); font-weight: 500; max-width: 54ch;
}
.alt-row .complexes { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════
   The real brand assets
   ═══════════════════════════════════════════════════════════════════════ */

/* The logo carries its own wordmark and the Powered by COREMIN line, so it
   needs more height than a bare mark would. */
.logo { height: 46px; width: auto; }
@media (max-width: 560px) { .logo { height: 38px; } }

/* On navy the blue half of the wordmark all but disappears, so the footer
   mark sits on a light plate rather than being recoloured — the logo has a
   fixed two-colour build and inverting it would break it. */
.logo-plate {
  display: inline-block; background: #fff; border-radius: 10px;
  padding: 10px 14px; line-height: 0; box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.logo-plate img { height: 42px; width: auto; display: block; }

/* ── Hero, on the Great Salt Lake plate ────────────────────────────── */
.hero-scenic .hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../img/lake-hero.jpg');
  background-size: cover;
  background-position: 58% 52%;
  transform: scale(1.06);
}
@media (max-width: 760px) {
  .hero-scenic .hero-photo {
    background-image: url('../img/lake-hero-tall.jpg');
    background-position: 56% 45%;
  }
}
/* A slow pan, so the plate is not perfectly still behind the type. */
@keyframes panlake {
  from { transform: scale(1.1) translate3d(-2.6%, 0, 0); }
  to   { transform: scale(1.1) translate3d(2.6%, -1.4%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scenic .hero-photo { animation: panlake 20s ease-in-out infinite alternate; }
}

/* The scrim has to do real work here: the photograph is bright on the left,
   where the headline sits. */
.hero-scenic .hero-scrim {
  background:
    linear-gradient(97deg, rgba(4,14,46,.93) 0%, rgba(6,24,88,.84) 34%, rgba(7,30,112,.40) 62%, rgba(7,30,112,.10) 100%),
    linear-gradient(180deg, rgba(4,14,46,.52) 0%, transparent 28%, rgba(4,14,46,.30) 100%);
}
@media (max-width: 940px) {
  .hero-scenic .hero-scrim {
    background:
      linear-gradient(180deg, rgba(4,14,46,.78) 0%, rgba(6,24,88,.80) 46%, rgba(4,14,46,.90) 100%);
  }
}

/* ── The product shot ──────────────────────────────────────────────── */
.product-shot {
  width: 100%; max-width: 396px; height: auto; display: block;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(4,14,46,.42), 0 2px 0 rgba(255,255,255,.14);
}
@media (max-width: 940px) { .product-shot { max-width: 282px; } }

.photo { display: block; width: 100%; height: auto; }
.photo-round { border-radius: 16px; }

/* A photograph used as a section plate, with the caption under it. */
.plate { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption {
  padding: 15px 20px; font-size: var(--t-ms); color: var(--ink-3);
  background: #fff; border-top: 1px solid var(--line-2); line-height: 1.65;
}

/* ── A photographic band, for the about page ───────────────────────── */
.photo-band {
  margin-inline: -20px; padding-inline: 20px; position: relative; isolation: isolate;
  color: #fff; overflow: hidden;
}
.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('../img/lake.jpg') center 48% / cover;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4,14,46,.92) 0%, rgba(7,30,112,.74) 48%, rgba(7,30,112,.32) 100%);
}
.photo-band h2, .photo-band h3 { color: #fff; }
.photo-band p { color: rgba(255,255,255,.80); }
.photo-band .eyebrow { color: #8fdcff; }
.photo-band .rowline { border-bottom-color: rgba(255,255,255,.16); }
.photo-band .rowline dt { color: rgba(255,255,255,.58); }
.photo-band .rowline dd { color: #fff; }

/* ── The chain, laid out rather than hidden behind tabs ────────────── */

/* The whole run at a glance, above the detail. */
.chain-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0; margin-bottom: clamp(32px, 5vh, 52px);
}
.chain-pip { display: flex; align-items: center; gap: 10px; flex: none; }
.chain-pip .dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-900); color: #fff; font-size: var(--t-ms); font-weight: 700; flex: none;
}
.chain-pip .lbl { font-size: var(--t-ms); font-weight: 600; color: var(--navy-900); white-space: nowrap; }
.chain-link {
  flex: 1 1 28px; min-width: 20px; max-width: 72px; height: 2px; margin-inline: 14px;
  background: linear-gradient(90deg, var(--cyan), var(--line));
}
@media (max-width: 820px) { .chain-strip { display: none; } }

.chain { list-style: none; margin: 0; padding: 0; }

.chain-step { display: grid; grid-template-columns: 62px 1fr; gap: clamp(16px, 2.6vw, 30px); position: relative; }
.chain-step:not(:last-child) { padding-bottom: clamp(20px, 3vh, 30px); }

.chain-rail { position: relative; display: flex; justify-content: center; }
/* The line runs from under this step's node to the top of the next one. */
.chain-step:not(:last-child) .chain-rail::after {
  content: ""; position: absolute; top: 56px; bottom: calc(-1 * clamp(20px, 3vh, 30px));
  width: 2px; background: linear-gradient(var(--cyan), #c6d4ee);
}
.chain-num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--cyan); color: var(--navy-900);
  font-weight: 700; font-size: var(--t-xl); flex: none; position: relative; z-index: 1;
  box-shadow: var(--shadow-sm);
}

.chain-body {
  min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-sm);
  transition: border-color .22s, box-shadow .22s;
}
.chain-body:hover { border-color: #c6d4ee; box-shadow: var(--shadow); }
.chain-body h3 { margin: 9px 0 12px; }
.chain-body > .muted { font-size: var(--t-base); max-width: 70ch; }
.chain-body em { font-style: normal; font-weight: 600; color: var(--navy-800); }

/* The three facts per stage, as a row that becomes a stack. */
.chain-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0 0;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
@media (max-width: 680px) { .chain-facts { grid-template-columns: 1fr; } }
.chain-facts > div { background: var(--paper-2); padding: 13px 15px; min-width: 0; }
.chain-facts dt {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 5px;
}
.chain-facts dd { margin: 0; font-size: var(--t-ms); color: var(--ink); font-weight: 500; line-height: 1.45; }

/* On a dark band the cards have to invert. */
.coremin .chain-body, .photo-band .chain-body {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
}
.coremin .chain-facts, .photo-band .chain-facts { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.coremin .chain-facts > div, .photo-band .chain-facts > div { background: rgba(255,255,255,.05); }
.coremin .chain-facts dd, .photo-band .chain-facts dd { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   Utilities and layout components
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Text roles ────────────────────────────────────────────────────── */
.t-eyebrow { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
             letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-text); }
.t-lede    { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.62; }
.t-body    { font-size: var(--t-md); color: var(--ink-2); }
.t-small   { font-size: var(--t-base); color: var(--ink-2); }
.t-note    { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.7; }
.t-mono    { font-family: var(--mono); }
.t-center  { text-align: center; }
.t-lead-in { font-size: var(--t-md); font-weight: 600; color: var(--navy-800); }

/* ── Spacing, on the scale ─────────────────────────────────────────── */
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)} .mt-8{margin-top:var(--s-8)}
.mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)} .mb-5{margin-bottom:var(--s-5)}
.mb-6{margin-bottom:var(--s-6)} .mb-7{margin-bottom:var(--s-7)}

/* A stack sets rhythm once instead of margin on every child. */
.stack > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.full { width: 100%; }
.measure { max-width: var(--measure); }

/* ── Ticked list, used on five pages and hand-rolled on each ───────── */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3);
            font-size: var(--t-base); color: var(--ink-2); }
.ticks li::before { content: "✓"; color: var(--green-text); font-weight: 700; line-height: 1.5; }
.ticks.lg li { font-size: var(--t-md); }
.ticks strong { display: block; color: var(--ink); margin-bottom: 2px; }
.ticks-x li::before { content: "✕"; color: var(--ink-3); }

/* ── Page hero: give the dead right half something to do ───────────── */
.page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-gut); align-items: center;
}
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.page-hero h1 { max-width: 20ch; }
.page-hero .t-lede { max-width: 54ch; }

/* The figure that fills it: a few numbers worth knowing on arrival. */
.hero-facts {
  background: rgba(255,255,255,.10); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: 0 18px 50px rgba(4,14,46,.38);
}
.hero-facts dl { margin: 0; display: grid; gap: var(--s-3); }
.hero-facts > p { margin-bottom: var(--s-4); }
.hero-facts .row { display: flex; justify-content: space-between; align-items: baseline;
                   gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.16); }
.hero-facts .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-facts dt { font-size: var(--t-ms); color: rgba(255,255,255,.74); }
.hero-facts dd { margin: 0; font-size: var(--t-md); font-weight: 700; color: #ffffff;
                 text-align: right; font-variant-numeric: tabular-nums; }

/* ── Document layout: sticky contents rail + prose ─────────────────── */
.doc {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 940px) { .doc { grid-template-columns: 1fr; } }

.doc-nav { position: sticky; top: 96px; }
@media (max-width: 940px) {
  .doc-nav { position: static; border: 1px solid var(--line); border-radius: var(--r-md);
             padding: var(--s-4); background: var(--paper-2); margin-bottom: var(--s-6); }
}
.doc-nav h2 { font-size: var(--t-xs); font-family: var(--mono); letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); font-weight: 500; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.doc-nav a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  font-size: var(--t-ms); color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; transition: background .18s, color .18s, border-color .18s;
}
.doc-nav a:hover { background: var(--paper-2); color: var(--navy-900); text-decoration: none; }
.doc-nav a.is-on { background: #eef6fd; color: var(--navy-900); font-weight: 600; border-left-color: var(--cyan); }

.doc-body { min-width: 0; }
.doc-body > section { padding-block: 0; scroll-margin-top: 96px; }
.doc-body > section + section { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line-2); }

/* ── FAQ: grouped, filterable, and it uses the whole width ─────────── */
.faq-head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
            justify-content: space-between; margin-bottom: var(--s-5); }
.faq-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.faq-filter button {
  font-family: var(--sans); font-size: var(--t-ms); font-weight: 600;
  padding: 8px 16px; border-radius: var(--r-full); cursor: pointer;
  background: #fff; color: var(--ink-2); border: 1.5px solid var(--line);
  transition: all .18s;
}
.faq-filter button:hover { border-color: var(--cyan); color: var(--navy-900); }
.faq-filter button[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid details { margin: 0; }
.faq-grid details[hidden] { display: none; }
.faq-count { font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); }

/* ── Section heads, standardised ───────────────────────────────────── */
.sec-head p { max-width: var(--measure); }
.sec-head.center p { margin-inline: auto; }

/* ── Key-value rows, used on six pages ─────────────────────────────── */
.kv { margin: 0; }
.kv .row { display: flex; justify-content: space-between; gap: var(--s-3);
           padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-ms); }
.kv .row:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-family: var(--mono); font-size: var(--t-sm); text-align: right; color: var(--ink); }

/* ── Pull quote, for breaking up long prose ────────────────────────── */
.pull {
  margin: var(--s-6) 0; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg); background: linear-gradient(135deg, #f2f8fd, #e8f1fb);
  border-left: 3px solid var(--cyan);
}
.pull p { font-size: var(--t-lg); color: var(--navy-800); font-weight: 500; margin: 0; max-width: none; }
.pull cite { display: block; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); font-style: normal; }

/* ── Progress bar for long documents ───────────────────────────────── */
.read-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0;
            background: linear-gradient(90deg, var(--cyan), var(--green)); z-index: 70;
            transition: width .1s linear; }

/* ── Prose, retuned to the scale ───────────────────────────────────── */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-7); margin-bottom: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose p  { margin-bottom: var(--s-4); font-size: var(--t-md); }
.prose ul, .prose ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); font-size: var(--t-md); }
.prose li { margin-bottom: var(--s-2); }
.doc-body .prose { max-width: none; }
.doc-body .prose p, .doc-body .prose li { max-width: var(--measure); }

/* Two more roles that were being written inline on five pages. */
.x { color: var(--ink-3); font-weight: 700; }
.measure-sm { max-width: 48ch; }

/* ── Typography inside the inline SVGs ─────────────────────────────── */
/* These carried hardcoded font-family attributes, so a change to --sans
   left fifteen labels on the old face. Inline SVG inherits CSS, so the
   diagrams now follow the tokens like everything else. */
.scene text, .figure svg text { font-family: var(--sans); }
.scene text.m, .figure svg text.m,
.scene tspan.m, .figure svg tspan.m { font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════════
   Motion

   Three rules this layer follows:

   1. Nothing here is load-bearing. Every animated thing is readable and
      usable with the animation removed — `.reveal` is only hidden once JS
      has added `.js` to <html>, so a failed script leaves a working page.
   2. Motion points at meaning: a thing that enters, a value that changes, a
      state that toggles. Nothing loops forever in the corner of the eye.
   3. One easing and two durations, so the site moves in one voice.

   The whole layer is switched off under prefers-reduced-motion at the foot
   of this file.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ease: cubic-bezier(.22, .68, .32, 1);      /* settle, no overshoot */
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* decisive entrances */
  --dur:  .42s;
  --dur-slow: .72s;
}

/* ── Entrances ─────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.in { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* Directional variants, for things that read better arriving from a side. */
.js .reveal-l { opacity: 0; transform: translateX(-26px); }
.js .reveal-r { opacity: 0; transform: translateX(26px); }
.js .reveal-l.in, .js .reveal-r.in { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* Scale-in, for cards and figures that should feel like they settle. */
.js .reveal-pop { opacity: 0; transform: scale(.965) translateY(14px); }
.js .reveal-pop.in { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* A group staggers its own children, so markup does not carry delays. */
.js .stagger > * { opacity: 0; transform: translateY(18px); }
.js .stagger.in > * { opacity: 1; transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }
.js .stagger.in > *:nth-child(1) { transition-delay: 0s }
.js .stagger.in > *:nth-child(2) { transition-delay: .07s }
.js .stagger.in > *:nth-child(3) { transition-delay: .14s }
.js .stagger.in > *:nth-child(4) { transition-delay: .21s }
.js .stagger.in > *:nth-child(5) { transition-delay: .28s }
.js .stagger.in > *:nth-child(6) { transition-delay: .35s }
.js .stagger.in > *:nth-child(7) { transition-delay: .42s }
.js .stagger.in > *:nth-child(8) { transition-delay: .49s }

/* ── Nav: condenses once you leave the top ─────────────────────────── */
.nav { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-in { transition: padding-block var(--dur) var(--ease); }
.nav .logo { transition: height var(--dur) var(--ease); }
.nav.is-stuck { box-shadow: 0 1px 0 rgba(11,23,54,.06), 0 6px 24px rgba(11,23,54,.07); background: rgba(255,255,255,.94); }
.nav.is-stuck .nav-in { padding-block: 9px; }
.nav.is-stuck .logo { height: 38px; }
@media (max-width: 560px) { .nav.is-stuck .logo { height: 32px; } }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
/* A light sweep on hover, drawn with a pseudo-element so it costs nothing. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }

/* ── Links that lead somewhere: the arrow moves ────────────────────── */
.go { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.go::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.go:hover { text-decoration: none; }
.go:hover::after { transform: translateX(5px); }

/* ── Cards lift, and their icon leans in ───────────────────────────── */
.card .icon { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.card:hover .icon { transform: translateY(-2px) scale(1.06); }

.tier { will-change: transform; }
.tier .crest { transition: transform var(--dur-slow) var(--ease); }
.tier:hover .crest { transform: rotate(-6deg) scale(1.08); }

/* ── Programme cards ───────────────────────────────────────────────── */
.prog { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.prog:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.prog .flag { animation: flagIn .6s var(--ease-out) both; }
@keyframes flagIn { from { opacity: 0; transform: translate(-50%, -8px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ── Accordion: <details> does not animate on its own ──────────────── */
details summary::after { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
details[open] summary::after { transform: rotate(180deg); }
details[open] > p { animation: openDown .34s var(--ease-out) both; }
@keyframes openDown { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
details { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }

/* ── FAQ filter: cards re-enter when the set changes ───────────────── */
.faq-grid details.just-shown { animation: popIn .4s var(--ease-out) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(8px) } to { opacity: 1; transform: none } }
.faq-filter button { transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                                 border-color var(--dur) var(--ease), transform .12s var(--ease); }
.faq-filter button:active { transform: scale(.96); }

/* ── Chain: the rail draws itself as the step arrives ──────────────── */
.js .chain-step .chain-rail::after { transform: scaleY(0); transform-origin: top; }
.js .chain-step.in .chain-rail::after { transform: scaleY(1);
  transition: transform .7s var(--ease-out) .18s; }
.js .chain-num { transform: scale(.7); opacity: 0; }
.js .chain-step.in .chain-num { transform: none; opacity: 1;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.chain-pip .dot { transition: transform var(--dur) var(--ease); }
.chain-strip:hover .chain-pip .dot { transform: scale(1.08); }

/* ── Timeline, same treatment ──────────────────────────────────────── */
.js .tl-step .num { transform: scale(.7); opacity: 0; }
.js .tl-step.in .num { transform: none; opacity: 1;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }

/* ── Mineral bars grow to their value ──────────────────────────────── */
.mineral-bar i { transform-origin: left; animation: growX .9s var(--ease-out) both; }
@keyframes growX { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ── The margin readout reacts when you move a slider ──────────────── */
.readout .big { transition: transform .18s var(--ease); }
.readout .big.bump { transform: scale(1.035); }
.slider input[type=range]::-webkit-slider-thumb { transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 0 0 7px rgba(28,140,204,.16); }

/* ── Phone screen: content fades in after the "scan" ───────────────── */
.screen-body > * { animation: screenIn .34s var(--ease-out) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ── Hero: a staged entrance on load ───────────────────────────────── */
.js .hero-scenic .hero-copy > * { animation: heroUp .78s var(--ease-out) both; }
.js .hero-scenic .hero-copy > *:nth-child(1) { animation-delay: .06s }
.js .hero-scenic .hero-copy > *:nth-child(2) { animation-delay: .16s }
.js .hero-scenic .hero-copy > *:nth-child(3) { animation-delay: .26s }
.js .hero-scenic .hero-copy > *:nth-child(4) { animation-delay: .36s }
.js .hero-scenic .hero-copy > *:nth-child(5) { animation-delay: .46s }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }

.js .hero-scenic .product-shot { animation: shotIn 1.1s var(--ease-out) .2s both; }
@keyframes shotIn { from { opacity: 0; transform: translateY(34px) scale(.96) } to { opacity: 1; transform: none } }

/* The page-hero summary card slides in beside the headline. */
.js .page-hero .hero-facts { animation: cardIn .8s var(--ease-out) .18s both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

/* ── Photographic plates: a slow push in, on scroll ────────────────── */
.plate img { transition: transform 1.2s var(--ease); }
.plate:hover img { transform: scale(1.035); }

/* ── Contents rail ─────────────────────────────────────────────────── */
.doc-nav a { transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                          border-color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.doc-nav a.is-on { padding-left: 16px; }

/* ── Form ──────────────────────────────────────────────────────────── */
.field input, .field textarea { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.who-pick label { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .14s var(--ease); }
.who-pick label:active { transform: scale(.985); }
.sent { animation: openDown .4s var(--ease-out) both; }

/* ── Footer links ──────────────────────────────────────────────────── */
footer a { transition: color var(--dur) var(--ease); }
.nav-links a { transition: color var(--dur) var(--ease); }
.nav-links a.is-on::after { animation: underline .42s var(--ease-out) both; transform-origin: left; }
@keyframes underline { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ── Everything above, off ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal-l, .js .reveal-r, .js .reveal-pop,
  .js .stagger > *, .js .chain-num, .js .tl-step .num {
    opacity: 1 !important; transform: none !important;
  }
  .js .chain-step .chain-rail::after { transform: scaleY(1) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Text on dark surfaces

   This block exists because of a bug worth not repeating. The home hero's
   lede was styled by `.hero-scenic .lede`; the class was later renamed to
   `.t-lede` and that selector silently stopped matching, so the lede fell
   back to its default `color: var(--ink-2)` — dark blue-grey ink on a dark
   navy photograph. Nothing errored and the page returned 200.

   So rather than style each role per container, every dark band carries
   `.on-dark` and the roles are inverted once, here. A role added later is
   covered by adding one line to this block, and a renamed class fails
   visibly in one place instead of invisibly in five.
   ═══════════════════════════════════════════════════════════════════════ */

.on-dark { color: rgba(255,255,255,.80); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255,255,255,.80); }
.on-dark a:not(.btn) { color: #9fd9ff; }
.on-dark a:not(.btn):hover { color: #fff; }

.on-dark .t-lede { color: rgba(255,255,255,.86); }
.on-dark .t-body, .on-dark .muted { color: rgba(255,255,255,.78); }
.on-dark .t-small { color: rgba(255,255,255,.75); }
.on-dark .t-note, .on-dark .faint { color: rgba(255,255,255,.60); }
.on-dark .t-eyebrow { color: #8fdcff; }
.on-dark .t-lead-in { color: #fff; }
.on-dark strong, .on-dark b { color: rgba(255,255,255,.95); }
.on-dark .x { color: rgba(255,255,255,.45); }

.on-dark .kv .row, .on-dark .rowline { border-bottom-color: rgba(255,255,255,.16); }
.on-dark .kv dt, .on-dark .rowline dt { color: rgba(255,255,255,.58); }
.on-dark .kv dd, .on-dark .rowline dd { color: #fff; }
.on-dark .ticks li { color: rgba(255,255,255,.78); }
.on-dark .ticks strong { color: #fff; }

/* The home hero sits over a photograph, so its measure is held tighter than
   a hero on a flat ground — long lines over a moving image are hard work. */
.hero-scenic .t-lede { max-width: 46ch; }
.hero-scenic h1 { max-width: 15ch; }

/* ── The mechanism: four steps, connected ──────────────────────────── */
.mech { list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 1000px) { .mech { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (max-width: 560px)  { .mech { grid-template-columns: 1fr; } }

.mech-step { position: relative; min-width: 0; }
/* The rule between steps reads as a chain rather than four loose cards. */
/* Centred on the 34px numeral, not guessed: 34/2 - 1 for the 2px rule. */
.mech-step:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; left: calc(100% + 4px);
  width: calc(var(--s-5) - 8px); height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--cyan), #c6d4ee);
}
@media (max-width: 1000px) { .mech-step:nth-child(2n)::after { display: none; } }
@media (max-width: 560px)  { .mech-step::after { display: none !important; } }

.mech-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.mech-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--navy-900); color: #fff; font-size: var(--t-ms); font-weight: 700;
}
.mech-icon { width: 24px; height: 24px; color: var(--cyan-text); flex: none; }
.mech-step h3 { margin: var(--s-2) 0 var(--s-3); font-size: var(--t-xl); }
.mech-step .t-small { max-width: 42ch; }

/* ── Disclaimers and compliance notes ──────────────────────────────── */
/* The block is centred under a centred section; the TEXT is not. Centred
   text has no consistent left edge to return to, which is tolerable for a
   two-line lede and bad for six lines of fine print — which is what this
   was before. */
.disclaimer {
  max-width: 62ch; margin-inline: auto;
  padding-left: var(--s-4); border-left: 2px solid var(--line);
  text-align: left;
}
.disclaimer p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.75; max-width: none; }
.disclaimer p + p { margin-top: var(--s-3); }
.disclaimer strong { color: var(--ink-2); font-weight: 600; }
.sec-head.center + .disclaimer, .cards + .disclaimer { margin-top: var(--s-6); }
.on-dark .disclaimer { border-left-color: rgba(255,255,255,.2); }
.on-dark .disclaimer p { color: rgba(255,255,255,.58); }

/* ═══════════════════════════════════════════════════════════════════════
   Ambient water motion

   The motion layer above is all entrances and interactions — things that
   happen because the reader did something. This layer is the opposite: slow,
   continuous, and about the subject rather than the interface.

   It is adapted from the vocabulary the live site already uses (bubbles
   rising, a drop bobbing, ripples, a wave edge), because for a water brand
   that ambient motion is on-message rather than decoration. It is the one
   place this site deliberately loops.

   Two rules keep it honest:
     - nothing animates while off screen; `.ambient` only runs once JS adds
       `.live`, which an observer removes again when it scrolls away.
     - the whole layer stops under prefers-reduced-motion, with the elements
       left in a sensible static position.
   ═══════════════════════════════════════════════════════════════════════ */

.ambient * { animation-play-state: paused; }
.ambient.live * { animation-play-state: running; }

/* ── Bubbles ───────────────────────────────────────────────────────── */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bubbles i {
  position: absolute; bottom: -8%; display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.28) 58%, rgba(255,255,255,.04) 74%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 -2px 6px rgba(255,255,255,.22);
  opacity: 0;
  animation: bubble-rise linear infinite;
}
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(.7); }
  8%   { opacity: .8; }
  85%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-115%) translateX(42px) scale(1.15); }
}

/* ── The wave edge between the hero and the page ───────────────────── */
.wave-edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; pointer-events: none; }
.wave-edge svg { display: block; width: 200%; height: clamp(38px, 5vw, 68px); }
.wave-edge .w1 { animation: wave-move 11s linear infinite; }
.wave-edge .w2 { animation: wave-move 17s linear infinite reverse; opacity: .55; }
@keyframes wave-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── A drop that bobs, and a thing that floats ─────────────────────── */
@keyframes drop-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes floaty   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }
.drop-bob { animation: drop-bob 4.5s ease-in-out infinite; }

/* ── Ripple, for the scan affordance ───────────────────────────────── */
.ripple-host { position: relative; }
.ripple-host::before,
.ripple-host::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid var(--cyan); opacity: 0;
  animation: ripple 3s ease-out infinite;
  pointer-events: none;
}
.ripple-host::after { animation-delay: 1.5s; }
@keyframes ripple { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }

/* ── A slow sheen across the mark ──────────────────────────────────── */
.flowing {
  background-size: 200% auto;
  animation: flow-gradient 9s linear infinite;
}
@keyframes flow-gradient { from { background-position: 0 0; } to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bubbles { display: none; }
  .wave-edge .w1, .wave-edge .w2,
  .floaty, .drop-bob, .flowing,
  .ripple-host::before, .ripple-host::after { animation: none !important; }
  .ripple-host::before, .ripple-host::after { opacity: 0 !important; }
}

/* Bubbles tinted for a pale ground, where white would be invisible. */
.bubbles--dark i {
  background: radial-gradient(circle at 32% 28%, rgba(28,140,204,.42), rgba(28,140,204,.16) 58%, rgba(28,140,204,.02) 74%);
  border-color: rgba(28,140,204,.40);
  box-shadow: none;
}
.wave-edge svg { height: var(--wave-h, clamp(38px, 5vw, 68px)); }

/* The dark bands carrying bubbles need their content above them. */
.coremin > .wrap, .cta-band > .cta-in { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════════
   Effervescence — bubble streams, water strings, mineral bubbles
   ═══════════════════════════════════════════════════════════════════════ */

.fizz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

/* ── A stream is a column; the bubbles inside share an origin ──────── */
.fizz-stream { position: absolute; top: 0; bottom: 0; width: 0; }

/* TRAVEL and SWAY are deliberately on different elements. A bubble sheds
   vortices off alternate edges as it moves, so it wobbles across its own
   line of travel. Two independent periods multiply into a path that never
   quite repeats; one keyframe doing both would loop visibly. */
.fizz-trav {
  position: absolute; left: 0; display: block;
  opacity: 0;
  /* Near-linear: a bubble reaches terminal velocity almost at once and
     holds it. Easing in and out makes it read as a UI animation. */
  animation-timing-function: cubic-bezier(.33, .02, .55, .98);
  animation-iteration-count: infinite;
}
.fizz-trav { bottom: -8%; animation-name: fizz-up; }

@keyframes fizz-up {
  0%   { opacity: 0;   transform: translateY(0) scale(.55); }
  6%   { opacity: .95; }
  88%  { opacity: .82; }
  100% { opacity: 0;   transform: translateY(-115vh) scale(1.25); }
}

/* The sway. `alternate` with an ease-in-out is a sine in all but name, and
   the negative delays on each bubble desynchronise the column. */
.fizz-b {
  display: block; border-radius: 50%;
  animation-name: fizz-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes fizz-sway {
  from { transform: translateX(calc(var(--sway) * -.5)) rotate(-4deg); }
  to   { transform: translateX(calc(var(--sway) * .5)) rotate(4deg); }
}

.fizz-b.is-air {
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(255,255,255,.34) 54%, rgba(255,255,255,.06) 76%);
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 -2px 5px rgba(255,255,255,.3), 0 0 10px rgba(255,255,255,.18);
}
.fizz-b.is-cyan {
  background: radial-gradient(circle at 34% 28%, rgba(190,236,255,.98), rgba(28,140,204,.5) 54%, rgba(28,140,204,.08) 76%);
  border: 1px solid rgba(126,214,255,.62);
  box-shadow: inset 0 -2px 5px rgba(255,255,255,.26), 0 0 13px rgba(28,140,204,.45);
}
.fizz-b.is-green {
  background: radial-gradient(circle at 34% 28%, rgba(214,246,196,.98), rgba(108,192,73,.5) 54%, rgba(108,192,73,.08) 76%);
  border: 1px solid rgba(160,226,124,.62);
  box-shadow: inset 0 -2px 5px rgba(255,255,255,.26), 0 0 13px rgba(108,192,73,.42);
}

/* ── On a pale ground the white version vanishes ───────────────────── */
.fizz--dark .fizz-b.is-air {
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(120,180,220,.32) 54%, rgba(120,180,220,.04) 76%);
  border-color: rgba(120,180,220,.5);
  box-shadow: inset 0 -2px 5px rgba(255,255,255,.6), 0 0 9px rgba(120,180,220,.2);
}

@media (prefers-reduced-motion: reduce) { .fizz { display: none; } }

/* Four roles rather than three: the venue is a tier, not an afterthought. */
.roles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .roles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .roles--4 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .roles--4 .role:nth-child(2) { border-right: 0; } }
/* The venue is the one that sells, so it is the one that is marked. */
.role--accent { background: linear-gradient(170deg, #f2f9fe, #eaf4fc); }
.role--accent .tag { color: var(--green-text); }

/* ── Benefit cards: claim on top, mechanism underneath ─────────────── */
.benefit { display: flex; flex-direction: column; }
.benefit h3 { font-size: var(--t-xl); }
.benefit > p:first-of-type { flex: 1; }
.benefit-how {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-size: var(--t-ms); color: var(--ink-3); line-height: 1.65;
}
.benefit-how-k {
  display: inline-block; margin-right: 8px;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-text); font-weight: 500;
}
.on-dark .benefit-how { border-top-color: rgba(255,255,255,.16); color: rgba(255,255,255,.6); }

/* ── Audience hub cards ────────────────────────────────────────────── */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .audience { grid-template-columns: 1fr; } }
.aud {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.aud:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #c6d4ee; }
.aud .num { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .14em;
            text-transform: uppercase; color: var(--cyan-text); }
.aud h3 { margin: var(--s-3) 0; font-size: var(--t-2xl); }
.aud > p { flex: 1; font-size: var(--t-base); color: var(--ink-2); }
.aud .go { margin-top: var(--s-5); }

/* ── Testimonials ──────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 1000px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm); min-width: 0;
  display: flex; flex-direction: column;
}
.quote blockquote { margin: 0; flex: 1; font-size: var(--t-md); color: var(--ink); line-height: 1.6; }
.quote blockquote::before { content: "\201C"; display: block; font-size: 40px; line-height: .6;
                            color: var(--cyan); opacity: .45; margin-bottom: 6px; }
.quote figcaption { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.quote .who { font-weight: 600; color: var(--navy-900); font-size: var(--t-base); }
.quote .role { font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; }

/* Placeholder quotes are visibly marked. Unattributed invented praise
   dressed as a real customer is the one thing on this site that would be
   actually dishonest, so it is labelled until real ones replace it. */
.quote--draft { border-style: dashed; background: #fcfdff; }
.quote--draft .who { color: var(--ink-3); font-style: italic; }
.draft-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: #8a6d1f; background: #fff8ec; border: 1px solid #ecd9b0;
  padding: 4px 10px; border-radius: var(--r-full);
}

/* Five footer columns once the audience pages were added. The legal block
   below still spans the brand column plus one, so it keeps its alignment. */
.foot-grid--5 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .foot-grid--5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px)  { .foot-grid--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .foot-grid--5 { grid-template-columns: 1fr; } }