/* ═══════════════════════════════════════════════════════════════════════════
   BeeWiser — public company site

   Type system, and the reason for it: the serif is the company's *voice* and
   appears only on statements — the hero, the problem, the motto, page titles.
   Everything structural is set in a heavy sans. That split is what keeps a
   warm serif palette from reading like a law firm.

   Bidirectional by construction: every directional rule uses logical
   properties, so one stylesheet serves the RTL Hebrew site and the LTR
   English mirror with no overrides.
   ═══════════════════════════════════════════════════════════════════════════ */

@import "/fonts.a02e5328.css";

:root {
  --paper: #fcfaf6;
  --paper-2: #f3efe5;
  --surface: #ffffff;

  --ink: #1b160f;
  --ink-2: #574e42;
  /* Darkened 2026-08-22: #8a8073 failed WCAG AA (3.38:1 on the band). */
  --ink-3: #756b5f;

  --line: #e8e1d2;
  --line-2: #d4cab6;

  /* Brand gold, plus the product's own secondary tones. */
  /* Darkened 2026-08-22: #a8700a failed WCAG AA (3.67:1 on the band). */
  --gold: #8f5f07;
  --gold-bright: #f2a20d;
  /* Gold at large-text AA on paper. --gold-bright is 2.02:1 against --paper and
     may only carry graphics or sit on a dark band; --gold (5.29:1) is the
     normal-text gold. This one is tuned to 3.43:1 so the spine numerals read as
     one set with --teal-bright (3.20) and --blue-bright (3.81). */
  --gold-lg: #b87b07;
  --gold-wash: #fdf5e3;
  --teal: #14806f;
  --teal-bright: #1d9e89;
  --blue: #2a5f9e;
  --blue-bright: #3d82cf;

  --deep: #0c1620;
  --deep-2: #142430;
  --deep-line: rgba(255, 255, 255, 0.13);
  --deep-ink: #f2f0ec;
  --deep-ink-2: #a7b2bc;

  --alert: #a33d1c;

  --shell: 1320px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --section-y: clamp(80px, 9vw, 148px);
  --r: 5px;
  --r-lg: 10px;

  /* ── Rev 7 type system ──────────────────────────────────────────────────
     Display is per-locale: Karantina carries Hebrew headlines, Assistant 800
     carries English ones. Karantina's Latin is a stylised companion that
     reads as vintage signage, so it never touches Latin text — including the
     wordmark.

     RULE 1 — IBM Plex Mono must never render Hebrew. It has no Hebrew glyphs;
     without this the text silently falls back to a system monospace and
     inherits the mono tracking. The fallback below is Assistant, not
     monospace, so any leak degrades gracefully instead of looking broken.
     Isolate the Latin/numeric fragment; never style the whole element. */
  --sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: "Assistant", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --display-weight: 800;
  --display-tracking: -.03em;
  --mono: "IBM Plex Mono", "Assistant", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { letter-spacing: -.02em; }
[hidden] { display: none !important; }

/* Hebrew swaps the display face only. Body, labels and figures are identical
   across locales, so the system holds while each locale gets its own voice. */
:lang(he), [lang="he"] {
  --display: "Karantina", "Assistant", sans-serif;
  --display-weight: 700;
  --display-tracking: 0;
}
/* The mirror of the rule above. The display token inherits from :root, so an
   English subtree inside a Hebrew document (the 404 serves both) would keep
   Karantina — whose Latin is a signage cut — unless it resets explicitly. */
:lang(en), [lang="en"] {
  --display: "Assistant", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --display-weight: 800;
  --display-tracking: -.03em;
}

/* Every display headline draws from the per-locale tokens. */
.display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}

/* RULE 1 — Latin/numeric fragments only. Never wrap Hebrew in this class.
   IBM Plex Mono has no Hebrew glyphs; the Assistant fallback means any leak
   degrades to the body face instead of a system monospace with mono tracking. */
.lat,
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.lat { font-size: .82em; font-weight: 500; letter-spacing: .08em; }

/* RULE 2 — factual integrity, not styling. A figure or range inside an RTL
   paragraph is reordered by the bidi algorithm: "9.00 – 41.00" would render as
   "41.00 – 9.00", inverting the benchmark. Every figure is isolated LTR. */
.figure,
.lat,
.mono {
  direction: ltr;
  unicode-bidi: isolate;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 20px; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; }
.ico-flip { transform: scaleX(-1); }

/* ── mark & logo ─────────────────────────────────────────────────────────── */
.mark { display: block; width: 100%; height: 100%; }
.mark__ring { fill: none; stroke: currentColor; stroke-width: 2.6; }
.mark__core { fill: currentColor; }
.dot__hex { width: 11px; height: 11px; flex: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo__mark { display: block; width: 29px; height: 29px; flex: none; color: var(--gold-bright); }
/* The wordmark is Latin in both locales — Assistant, never the display face. */
/* The wordmark keeps the sans face in every context — header lockup and inside a
   Karantina display heading alike. Paired with `dsp()` in render.js. */
.brand { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.logo__name { font-family: var(--sans); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: -.02em; }

/* ── header ──────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 250, 246, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--line);
}
.hdr__in { max-width: var(--shell); margin-inline: auto; padding: 13px var(--gutter); display: flex; align-items: center; gap: 18px; }
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.hdr__link {
  padding: 8px 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; border-radius: var(--r); white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.hdr__link:hover { color: var(--ink); background: var(--paper-2); }
.hdr__end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.hdr__nav + .hdr__end { margin-inline-start: 0; }
.lang {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  padding: 7px 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .15s ease, color .15s ease;
}
.lang:hover { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 1040px) {
  .hdr__in { flex-wrap: wrap; row-gap: 4px; padding-block-end: 10px; }
  .hdr__end { margin-inline-start: auto; }
  .hdr__nav {
    order: 3; width: 100%; margin-inline-start: 0; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(to left, transparent 0, #000 20px);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 20px);
  }
  [dir="ltr"] .hdr__nav {
    mask-image: linear-gradient(to right, transparent 0, #000 20px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
  }
  .hdr__nav::-webkit-scrollbar { display: none; }
  .hdr__link { padding-inline: 10px; }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; font-family: var(--sans); font-size: 16.5px; font-weight: 700;
  text-decoration: none; border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--sm { padding: 10px 18px; font-size: 14.5px; }
.btn--lg { padding: 19px 34px; font-size: 18px; border-radius: 6px; }
.btn--full { width: 100%; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #3a2f1f; }
.btn--line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: var(--surface); }
.btn--ondeep { border-color: rgba(255,255,255,.3); color: var(--deep-ink); background: transparent; }
.btn--ondeep:hover { border-color: var(--gold-bright); color: #fff; }
.btn__arrow { transition: transform .15s ease; flex: none; }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* ── section scaffolding ─────────────────────────────────────────────────── */
.sec { padding-block: var(--section-y); }
.sec--band { background: var(--paper-2); border-block: 1px solid var(--line); }
.sec--deep { background: var(--deep); color: var(--deep-ink); }
.sec--deep .sec__lead { color: var(--deep-ink-2); }

.sec__head { max-width: 900px; margin-block-end: clamp(44px, 5vw, 72px); }
.sec__head--center { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .18em; color: var(--gold); margin-block-end: 20px;
}
.kicker::after { content: ""; display: block; width: 36px; height: 1px; background: var(--line-2); }
.sec--deep .kicker { color: var(--gold-bright); }
.sec--deep .kicker::after { background: var(--deep-line); }

/* Structural headings are sans. The serif is reserved for statements. */
/* Font comes from .display so the per-locale face applies; only size and
   rhythm live here. Declaring font-family again would beat .display on
   source order and silently pin every section title to the Latin face. */
.sec__title {
  font-size: clamp(32px, 4.3vw, 58px); line-height: 1.08;
  margin-block-end: 22px; text-wrap: balance;
}
:lang(en) .sec__title { line-height: 1.12; }
.sec__lead { font-size: clamp(18.5px, 1.75vw, 23px); line-height: 1.55; color: var(--ink-2); }
.sec__lead--2 { margin-block-start: 14px; }
.subhead { font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--gold); margin-block-end: 24px; }
.sec--deep .subhead { color: var(--gold-bright); }
.subhead--spaced { margin-block-start: clamp(46px, 5vw, 68px); }
.note-line { margin-block-start: 24px; font-size: 16.5px; line-height: 1.6; color: var(--ink-3); max-width: 74ch; }

/* ── 1 · hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(64px, 9vw, 132px) clamp(72px, 9vw, 148px);
}
/* Layered honeycomb field. Two depths at different scales, plus a warm light
   behind the copy — foreground/background separation without an image. */
.hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__mesh { position: absolute; pointer-events: none; }
.hero__mesh--back {
  inset-block-start: -34%; inset-inline-end: -22%;
  width: min(1180px, 105vw); aspect-ratio: 1; opacity: .5; color: var(--line-2);
  -webkit-mask-image: radial-gradient(ellipse at 58% 42%, #000 4%, rgba(0,0,0,.34) 40%, transparent 68%);
  mask-image: radial-gradient(ellipse at 58% 42%, #000 4%, rgba(0,0,0,.34) 40%, transparent 68%);
}
.hero__mesh--mid {
  inset-block-end: -22%; inset-inline-start: -10%;
  width: min(560px, 62vw); aspect-ratio: 1; opacity: .55; color: var(--line-2);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 66%);
}
.hero__glow {
  position: absolute; inset-block-start: 8%; inset-inline-start: 4%;
  width: min(760px, 88vw); aspect-ratio: 1.25; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(242,162,13,.13), rgba(242,162,13,.04) 42%, transparent 70%);
}
/* Reserved for the canonical mascot. Renders nothing until the pack arrives. */
.hero__mascot-slot {
  position: absolute; z-index: 2; pointer-events: none;
  inset-block-end: clamp(24px, 5vw, 72px); inset-inline-start: clamp(16px, 4vw, 60px);
  width: clamp(96px, 12vw, 168px); aspect-ratio: 1;
}

.hero__grid {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(36px, 5vw, 84px); align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 46px; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 17px 8px 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin-block-end: 30px;
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(242,162,13,.18); flex: none; }

.hero__h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 78px); line-height: 1.01; letter-spacing: -.032em;
  margin-block-end: 30px; display: grid; gap: 6px; text-wrap: balance;
}
.hero__h1a, .hero__h1b { display: block; text-wrap: balance; }
.hero__h1a { color: var(--ink-3); }
.hero__h1b { color: var(--ink); }
.hero__h1b::after {
  content: ""; display: block; width: 104px; height: 5px; margin-block-start: 26px;
  background: linear-gradient(to var(--rule-dir, right), var(--gold-bright), rgba(242,162,13,.15));
  border-radius: 3px;
}
[dir="rtl"] .hero__h1b::after { --rule-dir: left; }
.hero__lead { font-size: clamp(19px, 1.95vw, 26px); line-height: 1.48; color: var(--ink-2); max-width: 44ch; margin-block-end: 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-block-end: 20px; }
@media (max-width: 560px) {
  .hero__cta { display: grid; gap: 12px; }
  .hero__cta .btn { width: 100%; }
  .ctastrip__in .btn { width: 100%; }
}
.hero__honesty { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); max-width: 44ch; }

/* ── the asymmetry figure — the thesis made visible, in the first screen ──── */
.asym {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 24px 60px -30px rgba(60, 44, 20, .28);
}
.asym__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-block-end: 28px; }
.asym__title { font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--gold); }
.asym__note { font-size: 13px; color: var(--ink-3); }
.asym__row + .asym__row { margin-block-start: 26px; padding-block-start: 26px; border-block-start: 1px solid var(--line); }
.asym__label { font-size: 16px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); margin-block-end: 14px; }
.asym__cells { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin-block-end: 14px; }
.cell { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.cell--gold { color: var(--gold-bright); }
.cell--dim { color: var(--line-2); }
/* the three a household actually holds */
.asym__row--you .cell--dim:nth-child(-n+3) { color: var(--teal-bright); }
.asym__text { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.asym__bridge {
  display: flex; align-items: center; gap: 11px; margin-block-start: 28px; padding-block-start: 24px;
  border-block-start: 1px solid var(--line); color: var(--gold); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em;
}
@media (max-width: 480px) { .asym__cells { grid-template-columns: repeat(10, 1fr); } }

/* ── 2 · the problem ─────────────────────────────────────────────────────── */
.sec--prob { padding-block: clamp(84px, 10vw, 168px); }
.prob { max-width: 1040px; }
.prob__h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.03em;
  margin-block-end: 30px; color: #fff;
}
.prob__lead { font-size: clamp(21px, 2.3vw, 32px); line-height: 1.38; color: var(--deep-ink); max-width: 30ch; }
.prob__p { margin-block-start: 26px; color: var(--deep-ink-2); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 62ch; }
.prob__punch {
  margin-block-start: clamp(34px, 4vw, 52px); padding-inline-start: 26px;
  border-inline-start: 5px solid var(--gold-bright);
  font-family: var(--display); font-size: clamp(23px, 2.7vw, 38px); line-height: 1.22;
  color: #fff; font-weight: 500; max-width: 26ch;
}

/* ── 3 · what we do ──────────────────────────────────────────────────────── */
.does { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.does__item {
  display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: clamp(16px, 2.6vw, 36px);
  padding-block: clamp(28px, 3.2vw, 44px); border-block-end: 1px solid var(--line); align-items: start;
}
.does__n {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px; font-weight: 800; color: var(--ink); background: var(--gold-bright);
}
.does__item--teal .does__n { background: var(--teal-bright); }
.does__item--blue .does__n { background: var(--blue-bright); }
.does__title { font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-block-end: 10px; }
.does__text { color: var(--ink-2); max-width: 60ch; font-size: 18.5px; line-height: 1.58; }
@media (max-width: 600px) { .does__item { grid-template-columns: 1fr; gap: 12px; } }

.negate { margin-block-start: clamp(36px, 4vw, 52px); padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.negate__title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-block-end: 18px; }
.negate__list { display: grid; gap: 11px; }
.negate__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; align-items: start; font-size: 17px; color: var(--ink-2); }
.negate__x { color: var(--alert); line-height: 1.55; }

/* ── 4 · the loop ────────────────────────────────────────────────────────── */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loop { grid-template-columns: 1fr; } }
.loop__node {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px 24px;
}
.loop__hex { display: block; width: 32px; height: 32px; color: var(--gold-bright); margin-block-end: 18px; }
.loop__node:nth-child(2) .loop__hex { color: #efab2e; }
.loop__node:nth-child(3) .loop__hex { color: #d9b13f; }
.loop__node:nth-child(4) .loop__hex { color: #8db47a; }
.loop__node:nth-child(5) .loop__hex { color: var(--teal-bright); }
.loop__node:nth-child(6) .loop__hex { color: #2f92b5; }
.loop__node:nth-child(7) .loop__hex { color: var(--blue-bright); }
.loop__i {
  position: absolute; inset-block-start: 18px; inset-inline-end: 18px;
  font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.loop__label { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-block-end: 6px; }
.loop__text { font-size: 16px; line-height: 1.5; color: var(--ink-3); }
.loop__node--back {
  background: transparent; border-style: dashed; border-color: var(--line-2);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
}
.loop__hex--back { width: auto; height: auto; color: var(--gold); margin: 0; }
.loop__node--back .loop__label { color: var(--gold); font-size: 15.5px; margin: 0; }

/* ── 5 · where we start ──────────────────────────────────────────────────── */
.motto {
  font-family: var(--display); font-weight: 500; font-size: clamp(25px, 3.1vw, 42px);
  line-height: 1.24; color: var(--ink); max-width: 22ch;
  padding-inline-start: 28px; border-inline-start: 5px solid var(--gold-bright);
  margin-block-end: clamp(42px, 5vw, 62px);
}
.seq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 820px) { .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .seq { grid-template-columns: 1fr; } }
.seq__step { background: var(--surface); padding: 28px 26px; }
.seq__step--now { background: var(--gold-wash); }
.seq__n { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); margin-block-end: 12px; font-variant-numeric: tabular-nums; }
.seq__step--now .seq__n { color: var(--gold); }
.seq__label { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-block-end: 10px; }
.seq__note { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.seq__step--now .seq__note { color: var(--gold); }
.seq__step--later .seq__label, .seq__step--later .seq__note { color: var(--ink-3); }

.why { margin-block-start: clamp(36px, 4vw, 52px); padding: clamp(24px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); max-width: 78ch; }
.why__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-block-end: 15px; }
.why__text { color: var(--ink-2); font-size: 17.5px; line-height: 1.62; }
.why__text + .why__text { margin-block-start: 14px; }

/* ── 6 · the longer view ─────────────────────────────────────────────────── */
.vis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
@media (max-width: 860px) { .vis { grid-template-columns: 1fr; gap: 26px; } }
.vis__item { border-block-start: 2px solid var(--gold-bright); padding-block-start: 20px; }
.vis__item:nth-child(2) { border-block-start-color: var(--teal-bright); }
.vis__item:nth-child(3) { border-block-start-color: var(--blue-bright); }
.vis__hex { display: block; width: 24px; height: 24px; color: var(--gold-bright); margin-block-end: 14px; }
.vis__item:nth-child(2) .vis__hex { color: var(--teal-bright); }
.vis__item:nth-child(3) .vis__hex { color: var(--blue-bright); }
.vis__title { font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.22; margin-block-end: 12px; }
.vis__text { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }

/* ── 7 · trust ───────────────────────────────────────────────────────────── */
.prin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(30px, 4vw, 64px); }
@media (max-width: 780px) { .prin { grid-template-columns: 1fr; } }
.prin__item { padding-inline-start: 24px; border-inline-start: 3px solid var(--line-2); }
.prin__title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-block-end: 10px; }
.prin__text { font-size: 17.5px; line-height: 1.58; color: var(--ink-2); }

.prov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 820px) { .prov { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .prov { grid-template-columns: 1fr; } }
.prov__cell { background: var(--surface); padding: 28px 26px; }
.prov__hex { display: block; width: 26px; height: 26px; margin-block-end: 13px; color: var(--gold-bright); }
.prov__cell:nth-child(2) .prov__hex { color: var(--teal); }
.prov__cell:nth-child(3) .prov__hex { color: var(--ink-3); }
.prov__cell:nth-child(4) .prov__hex { color: var(--blue-bright); }
.prov__label { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-block-end: 10px; }
.prov__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.pagelinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-block-start: clamp(34px, 4vw, 50px); }
.pagelink { display: block; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.pagelink:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.pagelink__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin-block-end: 6px; }
.pagelink__title .btn__arrow { color: var(--gold); }
.pagelink__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ── 8 · beta ────────────────────────────────────────────────────────────── */
.sec--beta { background: linear-gradient(180deg, var(--gold-wash), #fbf0d8); border-block: 1px solid #ecdcb4; }
.beta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .beta { grid-template-columns: 1fr; } }
.beta__copy .sec__lead { color: #5f5033; }
.beta__nospam { display: flex; align-items: center; gap: 9px; margin-block-start: 20px; font-size: 14.5px; font-weight: 700; color: var(--gold); }
.beta__form { background: var(--surface); border: 1px solid #ecdcb4; border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field__label { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.field__opt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.field__input {
  font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.field__input::placeholder { color: #a9a094; }
.field__input:focus { outline: none; border-color: var(--gold-bright); background: #fff; box-shadow: 0 0 0 3px rgba(242,162,13,.16); }
.field__select { appearance: none; background-image: none; cursor: pointer; }
.beta__consent { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ── mid-page beta CTA ──────────────────────────────────────────────────── */
.ctastrip { background: var(--paper-2); border-block: 1px solid var(--line); padding-block: clamp(38px, 4.5vw, 62px); }
.ctastrip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.ctastrip__line { font-family: var(--display); font-size: clamp(23px, 2.6vw, 36px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; max-width: 22ch; }
.ctastrip__note { margin-block-start: 10px; font-size: 16px; color: var(--ink-3); }

/* ── 9 · contribute ──────────────────────────────────────────────────────── */
.contrib { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .contrib { grid-template-columns: 1fr; } }
.contrib__honest { margin-block: 18px 26px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 54ch; }
.contrib__note { margin-block-start: 14px; font-size: 14.5px; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); font-size: 16px; font-weight: 600; color: var(--ink-2);
}

/* ── 10 · institutions ───────────────────────────────────────────────────── */
.notice {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 17px 20px; border: 1px solid rgba(242,162,13,.34); background: rgba(242,162,13,.07);
  border-radius: var(--r); margin-block-end: clamp(36px, 4vw, 54px); max-width: 800px;
}
.notice__icon { color: var(--gold-bright); margin-block-start: 3px; }
.notice__text { font-size: 15.6px; line-height: 1.6; color: var(--deep-ink); font-weight: 600; }
/* Chips rather than a card grid: shorter, and one less repetitive grid. */
.chips--ondeep { margin-block-end: clamp(36px, 4vw, 54px); }
.chips--ondeep .chip {
  border-color: var(--deep-line); background: rgba(255, 255, 255, .04); color: var(--deep-ink);
}
.cols2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .cols2 { grid-template-columns: 1fr; } }
.looking { display: grid; gap: 22px; }
.looking__item { border-inline-start: 2px solid var(--gold-bright); padding-inline-start: 18px; }
.looking__title { font-weight: 800; font-size: 16.5px; margin-block-end: 6px; color: #fff; letter-spacing: -.015em; }
.looking__text { font-size: 15.2px; line-height: 1.6; color: var(--deep-ink-2); }
.inst__contact { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--deep-line); border-radius: var(--r-lg); background: var(--deep-2); }
.inst__ctatext { font-size: 16.5px; color: var(--deep-ink); font-weight: 600; margin-block-end: 18px; }

/* ── 11 · team ───────────────────────────────────────────────────────────── */
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .team__grid { grid-template-columns: 1fr; } }
.member { background: var(--surface); padding: 30px 28px; }
.member__hex { display: block; width: 30px; height: 30px; color: var(--gold-bright); margin-block-end: 15px; }
.member__name { font-family: var(--display); font-size: 24px; font-weight: 700; margin-block-end: 5px; }
.member__role { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; color: var(--gold); margin-block-end: 11px; }
.member__line { font-size: 16.5px; line-height: 1.54; color: var(--ink-2); }
.sec--noteam .sec__head { margin-block-end: 0; }

/* ── 12 · press ──────────────────────────────────────────────────────────── */
.press { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .press { grid-template-columns: 1fr; } }
.press__none { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line-2); font-size: 14.5px; color: var(--ink-3); }
.facts { display: grid; gap: 0; border-block-start: 1px solid var(--line-2); }
.facts__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; padding-block: 16px; border-block-end: 1px solid var(--line-2); }
@media (max-width: 560px) { .facts__row { grid-template-columns: 1fr; gap: 5px; } }
.facts__q { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.facts__a { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.ftr { background: var(--deep); color: var(--deep-ink-2); padding-block: clamp(46px, 6vw, 70px) 30px; font-size: 15px; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 48px); padding-block-end: clamp(32px, 4vw, 46px); border-block-end: 1px solid var(--deep-line); }
@media (max-width: 860px) { .ftr__top { grid-template-columns: repeat(3, 1fr); } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
.ftr__brand .logo { color: #fff; }
.ftr__tagline { margin-block-start: 15px; font-size: 15.5px; color: var(--deep-ink-2); max-width: 30ch; }
.ftr__stage { margin-block-start: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--gold-bright); }
.ftr__coltitle { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #fff; margin-block-end: 15px; }
/* WCAG 2.2 SC 2.5.8. These links were the only targets on the site under the
   24px minimum: the <a> was inline inside its <li>, so its own box was just the
   19px text line even though the row is 24.1px tall. Filling the row it already
   occupies takes the target to 24px without moving anything — the list gap and
   the 34.1px pitch are untouched. `justify-items: start` keeps each target the
   width of its own text rather than the whole column, so the hit area still
   matches what the eye sees. None of this is visible. */
.ftr__list { display: grid; gap: 10px; justify-items: start; }
.ftr__link {
  color: var(--deep-ink-2); text-decoration: none; font-size: 14.8px; transition: color .15s ease;
  display: flex; align-items: center; min-height: 24px; min-width: 24px;
}
.ftr__link:hover { color: #fff; }
.ftr__bottom { padding-block-start: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: #7d8894; }
.ftr__disclaimer { max-width: 66ch; line-height: 1.55; }

/* ── interior pages ──────────────────────────────────────────────────────── */
.doc { padding-block: clamp(48px, 6vw, 80px) clamp(60px, 8vw, 100px); }
.doc__shell { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.doc__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); text-decoration: none; margin-block-end: 28px; }
.doc__back:hover { color: var(--ink); }
.doc__title { font-family: var(--display); font-size: clamp(33px, 4.3vw, 50px); font-weight: 700; line-height: 1.1; margin-block-end: 15px; }
.doc__lead { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.6; color: var(--ink-2); }
.doc__updated { margin-block-start: 20px; padding-block-start: 18px; border-block-start: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.doc__body { margin-block-start: clamp(32px, 4vw, 46px); }
.doc__body h3 { font-size: clamp(20px, 2.1vw, 25px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-block: 38px 13px; }
.doc__body h3:first-child { margin-block-start: 0; }
.doc__body p { margin-block-end: 16px; color: var(--ink-2); }
.doc__body ul { display: grid; gap: 11px; margin-block-end: 18px; }
.doc__body li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-2); }
.doc__body li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); margin-block-start: 11px; }
.doc__note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; align-items: start; padding: 17px 20px; border-inline-start: 3px solid var(--gold-bright); background: var(--gold-wash); margin-block: 22px; font-size: 15.4px; line-height: 1.6; color: #5a4a2c; }
.doc__note--todo { border-inline-start-color: var(--alert); background: #fbefe9; color: #7a3319; }
.doc__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-block: 22px; }
@media (max-width: 560px) { .doc__contact { grid-template-columns: 1fr; } }
.route { background: var(--surface); padding: 20px 22px; }
.route__title { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); margin-block-end: 10px; }
.route__mail { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; border-block-end: 1.5px solid var(--gold-bright); padding-block-end: 2px; word-break: break-word; direction: ltr; unicode-bidi: isolate; display: inline-block; transition: color .15s ease; }
.route__mail:hover { color: var(--gold); }

/* Draft status on the two legal pages. Sits above the fold so neither can be
   mistaken for a final document. */
.doc__draft {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-block-start: 22px; padding: 14px 17px;
  border: 1px solid #e6c2b4; border-inline-start: 3px solid var(--alert);
  background: #fbefe9; color: #7a3319;
  font-size: 14.6px; line-height: 1.55;
}
.doc__draft-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  background: var(--alert); color: #fff; padding: 4px 9px; border-radius: 3px; flex: none;
}

/* ── 404 ─────────────────────────────────────────────────────────────────
   One slot, two locales: the page speaks both rather than guessing. */
.nf { min-height: 78vh; display: grid; place-items: center; padding: clamp(48px, 8vw, 100px) var(--gutter); }
.nf__in { max-width: 620px; width: 100%; text-align: center; }
.nf__mark { display: block; width: 46px; height: 46px; margin: 0 auto clamp(28px, 4vw, 44px); color: var(--gold-bright); }
.nf__half { display: grid; justify-items: center; gap: 14px; }
.nf__title { font-family: var(--display); font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.1; }
.nf__lead { color: var(--ink-2); font-size: 17.5px; max-width: 40ch; }
.nf__half .btn { margin-block-start: 6px; }
.nf__rule { width: 64px; height: 1px; border: 0; background: var(--line-2); margin: clamp(30px, 4vw, 46px) auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   REV 6 — VISUAL IMPACT
   ═══════════════════════════════════════════════════════════════════════════

   Motion is scroll-linked and written entirely in CSS via `animation-timeline`.
   No JavaScript, so the zero-JS build and the `default-src 'none'` policy both
   survive untouched.

   Every effect is double-gated: `prefers-reduced-motion: no-preference` AND
   `@supports (animation-timeline: view())`. Where either fails the page is
   exactly what Rev 5 was — nothing depends on motion to be readable.

   Only `opacity` and `transform` animate. Nothing that triggers layout, so
   there is no CLS budget spent here at all.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Elevation. Warm-tinted rather than neutral grey, so shadows read as light
     falling through honey rather than as a drop-shadow filter. */
  --lift-1: 0 1px 2px rgba(60, 44, 20, .04), 0 2px 8px -2px rgba(60, 44, 20, .05);
  --lift-2: 0 2px 4px rgba(60, 44, 20, .04), 0 12px 28px -12px rgba(60, 44, 20, .12);
  --lift-3: 0 4px 10px rgba(60, 44, 20, .05), 0 28px 64px -28px rgba(60, 44, 20, .22);
  --lift-deep: 0 30px 80px -40px rgba(0, 0, 0, .6);
}

/* ── scroll-driven reveal ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes bw-rise {
      from { opacity: 0; transform: translate3d(0, 26px, 0); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes bw-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    /* Cells "ignite" — the honeycomb lighting up as information arrives. */
    @keyframes bw-ignite {
      from { opacity: 0; transform: scale(.55); }
      to   { opacity: 1; transform: none; }
    }

    /* Restraint pass: animation is reserved for the four things it can
       actually communicate — progression, sequence, a single statement
       landing, and the arrival of the ask. Sixteen selectors animated before
       this; eleven of them were decorative and are now still.
       Removed: .sec__head (13 heads rising is the metronome again),
       .vis__item, .prin__item, .prov__cell, .member, .pagelink, .facts__row,
       .negate, .why, .notice, .looking__item — all equal-weight cards with
       nothing sequential to say. */
    .does__item,     /* three things, in order → progression */
    .loop__node,     /* the seven-step journey → progression + connection */
    .seq__step,      /* now → next → later → progression */
    .motto,          /* one statement landing */
    .beta__form {    /* the ask arriving */
      animation: bw-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 46%;
    }

    /* A grid should arrive as a wave, not a block. */
    .does__item:nth-child(2)  { animation-range: entry 2%  entry 48%; }
    .does__item:nth-child(3)  { animation-range: entry 4%  entry 50%; }
    .loop__node:nth-child(2)  { animation-range: entry 2%  entry 48%; }
    .loop__node:nth-child(3)  { animation-range: entry 4%  entry 50%; }
    .loop__node:nth-child(4)  { animation-range: entry 6%  entry 52%; }
    .loop__node:nth-child(5)  { animation-range: entry 8%  entry 54%; }
    .loop__node:nth-child(6)  { animation-range: entry 10% entry 56%; }
    .loop__node:nth-child(7)  { animation-range: entry 12% entry 58%; }
    .loop__node:nth-child(8)  { animation-range: entry 14% entry 60%; }
    .vis__item:nth-child(2)   { animation-range: entry 3%  entry 49%; }
    .vis__item:nth-child(3)   { animation-range: entry 6%  entry 52%; }
    .seq__step:nth-child(2)   { animation-range: entry 3%  entry 49%; }
    .seq__step:nth-child(3)   { animation-range: entry 6%  entry 52%; }
    .seq__step:nth-child(4)   { animation-range: entry 9%  entry 55%; }
  }
}

/* ── depth applied to the existing surfaces ──────────────────────────────── */
/* Restraint pass: elevation was on ~30 surfaces, which flattened its meaning —
   if every card floats, none does. Hierarchy comes from spacing, type and
   contrast; elevation is reserved for the three surfaces that are genuinely
   objects rather than blocks of content. */
.asym        { box-shadow: var(--lift-3); }  /* the hero figure — the signature */
.beta__form  { box-shadow: var(--lift-2); }  /* the conversion surface */
.inst__contact { box-shadow: var(--lift-2); } /* lifts off the dark band */

/* Lift on interaction only — an affordance, not decoration. */
.pagelink { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.pagelink:hover { box-shadow: var(--lift-1); }

/* ── micro-interactions ──────────────────────────────────────────────────── */
.btn { transform: translateZ(0); }
.btn--solid:hover { box-shadow: var(--lift-2); }
.btn:active { transform: translateY(1px); }
.chip { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.chips--ondeep .chip:hover { border-color: var(--gold-bright); background: rgba(242, 162, 13, .1); }
.hdr__link { position: relative; }
/* Underline grows from the inline start — correct in both directions. */
.hdr__link::after {
  content: ""; position: absolute; inset-inline-start: 12px; inset-block-end: 3px;
  width: 0; height: 2px; background: var(--gold-bright); border-radius: 2px;
  transition: width .2s ease;
}
.hdr__link:hover::after, .hdr__link:focus-visible::after { width: calc(100% - 24px); }
.field__input { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.route__mail { transition: color .16s ease, border-color .16s ease; }
.route__mail:hover { border-color: var(--gold); }

/* ── hero: the signature moment ──────────────────────────────────────────────
   The hero is above the fold, so a scroll timeline would already be finished
   on load. It gets a one-time entrance instead; scroll timelines are used
   further down the page where they belong. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bw-hero-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes bw-card-rise {
    from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes bw-glow-in { from { opacity: 0; } to { opacity: 1; } }

  .hero__eyebrow { animation: bw-hero-rise .6s .05s ease-out both; }
  .hero__h1a     { animation: bw-hero-rise .7s .14s ease-out both; }
  .hero__h1b     { animation: bw-hero-rise .7s .24s ease-out both; }
  .hero__lead    { animation: bw-hero-rise .7s .36s ease-out both; }
  .hero__cta     { animation: bw-hero-rise .7s .46s ease-out both; }
  .hero__honesty { animation: bw-hero-rise .7s .54s ease-out both; }
  .asym          { animation: bw-card-rise .85s .32s cubic-bezier(.22,.9,.3,1) both; }
  .hero__glow    { animation: bw-glow-in 1.6s .2s ease-out both; }

  /* The asymmetry arrives as information arriving: a sweep across the cells,
     the dense row first, then the sparse one. The three cells a household
     actually holds land last — that is the point of the figure. */
  @supports (animation-timeline: view()) {
    @property --bw-sweep {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
    }
    @keyframes bw-sweep { from { --bw-sweep: 0%; } to { --bw-sweep: 112%; } }

    .asym__cells {
      --sweep-to: right;
      -webkit-mask-image: linear-gradient(to var(--sweep-to), #000 var(--bw-sweep), transparent calc(var(--bw-sweep) + 14%));
      mask-image: linear-gradient(to var(--sweep-to), #000 var(--bw-sweep), transparent calc(var(--bw-sweep) + 14%));
      animation: bw-sweep 1.1s ease-out both;
    }
    [dir="rtl"] .asym__cells { --sweep-to: left; }
    .asym__row--them .asym__cells { animation-delay: .55s; }
    .asym__row--you  .asym__cells { animation-delay: 1.15s; }

    @keyframes bw-ignite-cell {
      from { opacity: 0; transform: scale(.4); }
      60%  { opacity: 1; transform: scale(1.14); }
      to   { opacity: 1; transform: none; }
    }
    .asym__row--you .cell--dim:nth-child(-n+3) {
      animation: bw-ignite-cell .5s cubic-bezier(.34,1.56,.64,1) both;
      transform-origin: center;
    }
    .asym__row--you .cell--dim:nth-child(1) { animation-delay: 1.95s; }
    .asym__row--you .cell--dim:nth-child(2) { animation-delay: 2.05s; }
    .asym__row--you .cell--dim:nth-child(3) { animation-delay: 2.15s; }
  }

  /* Parallax: the field drifts against the page, so the hero has depth
     rather than being a flat backdrop. */
  @supports (animation-timeline: scroll()) {
    @keyframes bw-drift-slow { to { transform: translate3d(0, -70px, 0); } }
    @keyframes bw-drift-fast { to { transform: translate3d(0, -150px, 0); } }
    .hero__mesh--back {
      animation: bw-drift-slow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .hero__mesh--mid {
      animation: bw-drift-fast linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}

/* ── continuity: the hive field runs through the page ────────────────────────
   The geometry is not hero decoration. It reappears at different densities so
   the same visual language carries the story from section to section. */
.sec--deep, .sec--band { position: relative; isolation: isolate; }
.sec__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sec--deep > .shell, .sec--band > .shell { position: relative; z-index: 1; }
.sec__mesh { position: absolute; color: rgba(255, 255, 255, .07); }
/* The problem section is carried by a 76px serif statement. A mesh behind it
   competed with the one thing that section has to do, and it put the motif
   two screens after the hero — too soon for a return to register.
   It is now typography on a quiet dark ground, and the honeycomb stays away
   until the institutions band. */
.sec__mesh--prob { display: none; }
.sec__mesh--inst {
  inset-block-end: -24%; inset-inline-end: -12%; width: min(660px, 66vw); aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(circle at 60% 60%, #000 0%, transparent 60%);
  mask-image: radial-gradient(circle at 60% 60%, #000 0%, transparent 60%);
}

/* ── section seams ───────────────────────────────────────────────────────────
   Hard horizontal edges made the page read as stacked slides. Each band now
   dissolves into its neighbours instead of butting against them. */
.sec--band { border-block: 0; }
.sec--band::before, .sec--band::after {
  content: ""; position: absolute; inset-inline: 0; height: 72px; z-index: 0; pointer-events: none;
}
.sec--band::before { inset-block-start: 0; background: linear-gradient(to bottom, var(--paper), transparent); }
.sec--band::after  { inset-block-end: 0;  background: linear-gradient(to top,    var(--paper), transparent); }

.sec--deep { border-block: 0; }
.sec--deep::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; z-index: 2;
  background: linear-gradient(to right, transparent, rgba(242, 162, 13, .5), transparent);
  pointer-events: none;
}

/* ── rhythm ──────────────────────────────────────────────────────────────────
   Ten of thirteen sections used identical padding. Density now follows the
   narrative: compress before a statement, open up after it. */
.sec--prob { padding-block: clamp(96px, 12vw, 200px); }          /* the thesis — room to breathe */
#does, [id$="does"] { padding-block: clamp(64px, 7vw, 104px) clamp(80px, 9vw, 132px); }
.ctastrip { padding-block: clamp(44px, 5vw, 76px); }             /* a beat, not a section */
.sec--beta { padding-block: clamp(88px, 10vw, 160px); }          /* the ask gets weight */

/* ── the loop reads as a connected chain, not seven separate cards ───────── */
.loop { position: relative; }
.loop__node { position: relative; }
.loop__node::after {
  content: ""; position: absolute; z-index: 2;
  inset-inline-end: -14px; inset-block-start: 46px;
  width: 14px; height: 2px;
  background: repeating-linear-gradient(to right, var(--line-2) 0 3px, transparent 3px 6px);
}
[dir="rtl"] .loop__node::after { inset-inline-end: auto; inset-inline-start: -14px; }
.loop__node:nth-child(4n)::after, .loop__node:last-child::after { display: none; }
@media (max-width: 900px) {
  .loop__node::after { display: none; }
}

/* ── mobile is art-directed, not scaled down ─────────────────────────────────
   Parallax on a small screen reads as jitter, and a dense mesh behind a
   narrow column reads as noise. Both are dialled back rather than shrunk. */
@media (max-width: 720px) {
  .hero__mesh--back { inset-block-start: -22%; inset-inline-end: -46%; width: 150vw; opacity: .34; }
  .hero__mesh--mid  { display: none; }
  .hero__glow { inset-block-start: 2%; inset-inline-start: -14%; width: 128vw; }
  .sec__mesh { opacity: .6; }
  /* Static field: no scroll-linked drift on touch devices. */
  .hero__mesh--back, .hero__mesh--mid { animation: none !important; }
  /* The reserved mascot slot sits out of the way until real art arrives. */
  .hero__mascot-slot { width: clamp(72px, 22vw, 104px); inset-block-end: 12px; }
}

/* Coarse pointers get no hover-dependent affordance and no drift. */
@media (hover: none) {
  .hero__mesh--back, .hero__mesh--mid { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 7 — components for the reduced architecture
   ═══════════════════════════════════════════════════════════════════════════ */

/* hero */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid var(--line-2);
  border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(8px);
  font-size:13.5px;font-weight:600;color:var(--ink-2);margin-block-end:26px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-bright);flex:none}
.h1{font-size:clamp(44px,7vw,92px);line-height:.94;margin-block-end:14px;text-wrap:balance;color:var(--ink)}
:lang(en) .h1{line-height:1.0;font-size:clamp(38px,5.4vw,74px)}
.q{font-size:clamp(25px,3.4vw,44px);line-height:1.04;color:var(--gold);margin-block-end:20px;text-wrap:balance}
:lang(en) .q{font-size:clamp(21px,2.4vw,32px);line-height:1.15}
.rule{display:block;width:96px;height:5px;border-radius:3px;margin-block-end:24px;
  background:linear-gradient(to var(--rule-dir,right),var(--gold-bright),rgba(242,162,13,.16))}
[dir="rtl"] .rule{--rule-dir:left}

/* accumulation field — replaces the two-sided comparison entirely */
.acc{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(24px,2.8vw,34px);box-shadow:var(--lift-3);margin:0;
}
.acc__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;margin-block-end:20px}
.acc__t{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--gold)}
.acc__n{font-size:12.5px;color:var(--ink-3)}
.acc__items{display:flex;flex-wrap:wrap;gap:7px}
.acc__item{
  font-size:14px;font-weight:600;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
}
.acc__item.is-lit{background:rgba(242,162,13,.12);border-color:rgba(242,162,13,.42);color:var(--gold)}

/* problem — typography only, no mesh */
.sec--prob{padding-block:clamp(88px,11vw,180px)}
.prob{max-width:1000px}
.prob__h2{font-size:clamp(36px,5.4vw,80px);line-height:.98;color:#fff;margin-block-end:26px;text-wrap:balance}
:lang(en) .prob__h2{font-size:clamp(32px,4.4vw,64px);line-height:1.04}
.prob__lead{font-size:clamp(19px,2vw,27px);line-height:1.42;color:var(--deep-ink);max-width:34ch}
.prob__pivot{
  font-size:clamp(30px,4.4vw,62px);line-height:1;color:var(--gold-bright);
  margin-block:clamp(28px,3.4vw,46px) 18px;
}
.prob__p{font-size:clamp(16.5px,1.6vw,19px);line-height:1.6;color:var(--deep-ink-2);max-width:56ch}

/* 1 → 2 → 3 — the spine */
.sec--spine{padding-block:clamp(76px,9vw,136px)}
.spine{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px)}
@media(max-width:820px){.spine{grid-template-columns:1fr;gap:34px}}
.spine__n{
  font-family:var(--mono);font-weight:600;font-size:clamp(38px,4.6vw,62px);line-height:1;
  color:var(--gold-lg);margin-block-end:14px;
  /* RULE 2 isolation, but inline-block so the *page* direction still places it:
     `direction:ltr` on a block box also flips its own text-align:start, which
     parked the numeral against the left edge of an RTL column. */
  display:inline-block;direction:ltr;unicode-bidi:isolate;
}
.spine__step:nth-child(2) .spine__n{color:var(--teal-bright)}
.spine__step:nth-child(3) .spine__n{color:var(--blue-bright)}
.spine__t{font-size:clamp(26px,2.9vw,40px);line-height:1.04;margin-block-end:10px;text-wrap:balance}
:lang(en) .spine__t{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.spine__d{font-size:17px;line-height:1.55;color:var(--ink-2)}

/* the loop, as one light layer */
.loopwrap{max-width:900px}
.sec__head--tight{margin-block-end:clamp(26px,3vw,38px)}
.states{display:flex;flex-wrap:wrap;gap:8px 10px}
.states__i{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
}
.states__n{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);
  direction:ltr;unicode-bidi:isolate;
}

/* trust — compressed */
.trustwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,4.5vw,72px);align-items:start}
@media(max-width:880px){.trustwrap{grid-template-columns:1fr;gap:34px}}
.prin{display:grid;gap:14px;margin-block-start:22px}
.prin__i{
  padding-inline-start:20px;border-inline-start:3px solid var(--gold-bright);
  font-size:18px;line-height:1.5;color:var(--ink-2);
}
.provlist{display:grid;gap:10px}
.provlist__i{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink-2)}
.provlist__i .dot__hex{color:var(--gold-bright);flex:none}
.deeplinks{display:grid;gap:9px}
.deeplinks a{
  display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;
  color:var(--ink);text-decoration:none;border-block-end:1.5px solid var(--gold-bright);
  padding-block-end:2px;transition:color .15s ease;
}
.deeplinks a:hover{color:var(--gold)}

/* the collective idea — the one full-bleed statement */
.sec--collective{padding-block:clamp(80px,10vw,160px)}
.collective{max-width:1040px;text-align:center;margin-inline:auto}
.collective__h2{font-size:clamp(34px,5.6vw,86px);line-height:.98;display:grid;gap:4px;margin-block-end:24px}
:lang(en) .collective__h2{font-size:clamp(30px,4.4vw,64px);line-height:1.04}
.collective__a{color:var(--deep-ink-2)}
.collective__b{color:var(--gold-bright)}
.collective__lead{font-size:clamp(16.5px,1.7vw,20px);line-height:1.55;color:var(--deep-ink-2);max-width:52ch;margin-inline:auto}

/* work together — institutions + contributors, one compact route */
.sec--work{padding-block:clamp(60px,7vw,104px)}
.work{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(26px,4vw,60px);align-items:start}
@media(max-width:880px){.work{grid-template-columns:1fr;gap:26px}}
.work__ctas{display:flex;flex-wrap:wrap;gap:11px;margin-block-start:22px}
.work__disclaimer{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;
  font-size:14.5px;line-height:1.55;color:var(--ink-3);
  border-inline-start:2px solid var(--line-2);padding-inline-start:16px;
}
.work__disclaimer .notice__icon{color:var(--ink-3);margin-block-start:2px}

/* team, tightened for the shorter page.
   The 4-column track lives with the base rule above so the 900px/480px
   breakpoints there still win on source order — re-declaring it here beat them
   and left four ~75px columns at 375px. */
.member{padding:24px 22px}
.member__name{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.02em}

/* reduced-motion + no-JS parity is inherited from Rev 6; nothing new added. */