/* BlackSnow Intelligence — marketing site (blacksnowintel.com mock)
   Brand: Electric Blue #2563EB · Deep Navy #0B1220 · Light Gray #F5F7FA · White (BSI brand guide).
   Red is the approved design's CTA colour only — it never carries data.
   Signal colours (frozen, V1-gated in the platform round) appear ONLY on signal surfaces:
   Adverse #d03b3b · Partial #fab219 · Strong #0ca30c · Neutral #3987e5 · Not Measured #898781,
   always paired with a glyph (never colour alone). No composite scores anywhere. */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg0: #05070D;
  --bg1: #0B1220;
  --bg2: #101A2E;
  --well: #080F1B;
  --tx: #F5F7FA;
  --tx2: #A9B4C8;
  --tx3: #71809A;
  --line: rgba(245, 247, 250, 0.09);
  --line2: rgba(245, 247, 250, 0.17);
  --acc: #2563EB;
  --acc2: #3B75F1;
  --acc-wash: rgba(37, 99, 235, 0.14);
  --focus: #6AA1FF;
  --red: #D8222F;
  --red2: #BB1B26;
  --lt-bg: #F5F7FA;
  --lt-pale: #E9EEF5;
  --lt-card: #FFFFFF;
  --lt-tx: #0B1220;
  --lt-tx2: #46536E;
  --lt-tx3: #8792A6;
  --lt-line: rgba(11, 18, 32, 0.10);
  --lt-line2: rgba(11, 18, 32, 0.18);
  --sr: #d03b3b;
  --sa: #fab219;
  --sg: #0ca30c;
  --sb: #3987e5;
  --sy: #898781;
  /* BRAND — the identity blue, sampled from the mark itself. The logo's blue is a
     gradient (hue 200-223 at full chroma), so there is no single flat hex in the
     artwork; --bsi-blue is the centre of that ramp and the other two are the steps
     that clear 4.5:1 on the surfaces each theme actually puts them on:
       ink  on --lt-bg #F5F7FA 4.86:1   ·   lift on --bg #0B1220 6.88:1
     ADDITIVE. --sb above is the blue diamond Consistent BAND and does not move —
     a brand blue a few degrees away from a band colour on a data surface is exactly
     the ambiguity the five-colour rule exists to prevent, so --bsi-accent is used
     for brand chrome and focus only, never to colour a value. */
  --bsi-blue: #0079fa;
  --bsi-blue-ink: #006adb;
  --bsi-blue-lift: #4d9fff;
  --bsi-accent: var(--bsi-blue-lift);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Exactly the fixed header's height (.hd-in 72px + 1px border). scroll-padding
     here and scroll-margin on the target ADD UP, so the offset lives in one place
     only — otherwise an anchor lands showing the tail of the previous section. */
  scroll-padding-top: 73px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg0);
  color: var(--tx);
  font-family: Inter, "SF Pro Text", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "tnum";
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 18px; }
ul { margin: 0; padding: 0; list-style: none; }
/* No scroll-margin here — the offset is scroll-padding-top on html alone. */
/* 1320, up from 1200. On a 1512px laptop the old cap left 312px of empty gutter and then
   capped the text inside it AGAIN at 780–990px, so a heading used ~52% of the screen while
   the card grid beside it used 76%. Two nested caps is what made the page read as half
   empty. The container widens here; the per-block caps below are the other half of the fix. */
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: 28px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acc); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { background: var(--red2); transform: translateY(-1px); }
.btn.ghost { border-color: var(--line2); color: var(--tx); }
.btn.ghost:hover { border-color: var(--tx3); background: rgba(245, 247, 250, 0.05); }
.btn.blue { background: var(--acc); color: #fff; }
.btn.blue:hover { background: var(--acc2); }
.sec-light .btn.ghost, .sec-pale .btn.ghost { border-color: var(--lt-line2); color: var(--lt-tx); }
.sec-light .btn.ghost:hover, .sec-pale .btn.ghost:hover { background: rgba(11, 18, 32, 0.05); }
.linkline {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--acc2); font-weight: 600; font-size: 15px; text-decoration: none;
}
.linkline:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* Solid #000, no transparency and no backdrop-filter: the logo asset is an
     opaque black plate, so anything showing through the bar makes its edges
     visible as the page scrolls under it. */
  background: #000;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.hd.scrolled { border-bottom-color: var(--line); }
.hd-in { display: flex; align-items: center; gap: 22px; height: 72px; }
.hd-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.hd-logo img { height: 44px; width: auto; }
/* The bar carries nine destinations inside a content column capped at 1200px, so the
   spacing is measured rather than chosen: logo + nav + actions need 1,152px at these
   values, leaving 48px of slack. At the previous 13px padding / 6px offset it needed
   1,206px, which is why two entries — BSI Calculator and About Us — were silently
   folding onto a second line rather than overflowing where a check could see them. */
.hd-nav { display: flex; align-items: center; gap: 0; margin-left: 0; }
.nav-a {
  display: inline-flex; align-items: center; gap: 6px;
  /* A menu entry never wraps. Wrapping is how a bar that does not fit hides the fact:
     the width still measures inside its container while the words break in half. */
  white-space: nowrap;
  padding: 9px 11px; border-radius: 9px;
  color: var(--tx2); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-a:hover { color: var(--tx); background: rgba(245, 247, 250, 0.06); }
.nav-a.is-active { color: var(--tx); background: var(--acc-wash); box-shadow: inset 0 -2px 0 var(--acc2); }
/* The one entry on the bar that gives something away rather than asking for something.
   Outlined with an inset ring rather than a real border, so adding the ring cannot shift
   the other entries by a pixel. Deliberately quieter than the Request Access button — it
   should read as "open" next to its neighbours, not compete with the primary action. */
.nav-a.is-free { color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }
.nav-a.is-free:hover { background: var(--acc-wash); box-shadow: inset 0 0 0 1px var(--acc2); }
.nav-a .caret { transition: transform 0.15s ease; opacity: 0.65; }
.nav-dd { position: relative; }
.nav-dd.open > .nav-a { color: var(--tx); background: rgba(245, 247, 250, 0.06); }
.nav-dd.open > .nav-a .caret { transform: rotate(180deg); }
.dd {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 288px;
  background: #0C1424; border: 1px solid var(--line2); border-radius: var(--r-md);
  padding: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: none; z-index: 110;
}
.nav-dd.open .dd { display: block; }
.dd::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; height: 14px; }
.dd a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
}
.dd a:hover { background: var(--acc-wash); }
.dd .t { display: block; font-size: 14px; font-weight: 600; color: var(--tx); }
.dd .s { display: block; font-size: 12.5px; color: var(--tx3); margin-top: 1px; }
.hd-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd-act .btn { padding: 10px 16px; font-size: 14px; }
.hd-burger {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line2); align-items: center; justify-content: center;
}
.hd-burger svg { display: block; }
.hd-burger .ic-x { display: none; }
.nav-open .hd-burger .ic-x { display: block; }
.nav-open .hd-burger .ic-menu { display: none; }

/* ---------- section shells ---------- */
.sec { padding: 104px 0; }
.sec-dark { background: var(--bg0); }
.sec-navy { background: var(--bg1); }
.sec-light { background: var(--lt-bg); color: var(--lt-tx); }
.sec-pale { background: var(--lt-pale); color: var(--lt-tx); }
.sec-light p, .sec-pale p { color: var(--lt-tx2); }
.sec-dark p, .sec-navy p { color: var(--tx2); }
.eyebrow {
  display: inline-block; margin-bottom: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--acc2);
}
.sec-light .eyebrow, .sec-pale .eyebrow { color: var(--acc); }
.h2 { font-size: clamp(30px, 3.6vw, 45px); line-height: 1.12; max-width: 26em; }
.h2 + .sub { margin-top: 18px; }
.lead { font-size: 19px; }

/* Section head as a masthead band, not a narrow left column.
   It was a single 780px block inside a 1200px wrap, so every section opened with 420px of
   dead space to the right of the heading and then a card grid underneath that used the full
   measure — the mismatch is what read as "not using the screen". Heading and lede now sit
   side by side and fill the band, bottoms aligned, and each keeps a sane line length:
   ~55 characters of heading, ~48 of lede. A sechead with no lede falls back to a plain
   block, because a lone heading in a 1.75fr column would just recreate the empty half. */
.sechead { margin-bottom: 52px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.sechead .eyebrow { grid-column: 1 / -1; }
.sechead .h2 { grid-column: 1; max-width: none; }
.sechead .sub { grid-column: 2; margin: 0; padding-top: 7px; }
.sechead:not(:has(> .sub)), .sechead.center { display: block; max-width: 900px; }
.sechead.center { margin-inline: auto; text-align: center; }
.strongline { color: var(--tx); font-weight: 600; }
.sec-light .strongline, .sec-pale .strongline { color: var(--lt-tx); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 168px 0 96px;
  background:
    radial-gradient(720px 420px at 82% 8%, rgba(37, 99, 235, 0.16), transparent 65%),
    radial-gradient(560px 380px at 8% 92%, rgba(37, 99, 235, 0.07), transparent 60%),
    var(--bg0);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(245, 247, 250, 0.05) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 4.6vw, 63px); line-height: 1.05; letter-spacing: -0.022em; }
.hero .lead { margin-top: 26px; }
.hero .invest { color: var(--tx); font-weight: 600; }

/* ---------- page masthead (every page except Home) ---------- */
.phero {
  position: relative; overflow: hidden;
  padding: 150px 0 66px;
  background:
    radial-gradient(760px 380px at 80% 6%, rgba(37, 99, 235, 0.15), transparent 66%),
    var(--bg0);
  border-bottom: 1px solid var(--line);
}
.phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(245, 247, 250, 0.05) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
/* Same band treatment as .sechead. Every page masthead is exactly eyebrow + h1 + lede, so
   the two-column split is safe across all eight of them. */
.phero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.phero .eyebrow { grid-column: 1 / -1; }
.phero h1 { grid-column: 1; font-size: clamp(34px, 3.9vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.phero .lead { grid-column: 2; margin: 0; padding-top: 8px; color: var(--tx2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
.trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tx3); font-weight: 500; }
.trust svg { color: var(--acc2); flex: none; }

/* ---------- hero chain panel ---------- */
.chainpanel {
  margin: 0; min-width: 0;
  background: linear-gradient(180deg, #0D1628, #0A111F);
  border: 1px solid var(--line2); border-radius: var(--r-lg);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(245, 247, 250, 0.06);
  padding: 20px 22px 16px;
}
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cp-title { font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tx2); }
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line2); color: var(--tx3);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.cp-chain { display: flex; align-items: stretch; gap: 4px; }
.cp-node { flex: 1 1 0; min-width: 0; text-align: center; }
.cp-hex { display: flex; justify-content: center; margin-bottom: 7px; color: var(--acc2); }
.cp-kind { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx3); }
.cp-name { display: block; font-size: 11px; font-weight: 600; color: var(--tx); margin-top: 2px; line-height: 1.3; }
.cp-arrow { align-self: center; color: var(--tx3); flex: none; padding-bottom: 26px; }
.cp-grid {
  display: grid; grid-template-columns: 1fr 1.05fr 1.25fr; gap: 14px;
  border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px;
}
.cp-cell h3 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tx3); margin-bottom: 10px; }
.cp-facts li { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--tx2); padding: 3px 0; }
.cp-facts b { color: var(--tx); font-weight: 700; font-size: 13px; }
.cp-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc2); flex: none; align-self: center; }
.cp-bars li { display: block; padding: 2.5px 0 5px; }
.cp-bars .bl { display: block; font-size: 11px; color: var(--tx2); white-space: nowrap; margin-bottom: 4px; }
.cp-bars .bar { display: block; height: 7px; border-radius: 4px; background: rgba(245, 247, 250, 0.07); overflow: hidden; }
.cp-bars .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.cp-snap { display: flex; align-items: center; gap: 14px; }
.cp-donut { flex: none; position: relative; }
.cp-donut .ctr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cp-donut .ctr b { font-size: 17px; font-weight: 700; line-height: 1; }
.cp-donut .ctr span { display: block; max-width: 58px; line-height: 1.35; font-size: 9px; color: var(--tx3); letter-spacing: 0.08em; text-transform: uppercase; }
.cp-legend { min-width: 0; }
.cp-legend li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--tx2); padding: 2px 0; white-space: nowrap; }
.cp-legend .g { width: 13px; text-align: center; flex: none; font-size: 10px; }
.cp-legend b { color: var(--tx); margin-left: auto; padding-left: 10px; }
.cp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px;
  font-size: 12px; color: var(--tx3);
}
.cp-foot a { color: var(--acc2); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cp-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* signal glyph colours (dark surfaces) — glyph + word always together */
.g-r { color: var(--sr); } .g-a { color: var(--sa); } .g-g { color: var(--sg); }
.g-b { color: var(--sb); } .g-y { color: var(--sy); }

/* ---------- section 2: the field ---------- */
.field-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: center; }
.fieldbox { position: relative; aspect-ratio: 560 / 470; min-width: 0; }
.fieldbox .flines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fieldbox .flines line { stroke: var(--line2); stroke-dasharray: 2 4; }
.fcenter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 128px; height: 128px; border-radius: 26px;
  display: grid; place-content: center;
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.02) 78%);
}
/* logo-mark-alpha.png is keyed transparent, so it needs no blend. The source
   logo-mark.png sits on a white plate, and screen cannot hide white — only
   black — which is what put a white square behind the mark. */
.fcenter img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(37, 99, 235, 0.45)); }
.fnode { position: absolute; max-width: 168px; }
.fnode .fdot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg0); border: 2px solid var(--acc2);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  margin-bottom: 8px;
}
.fnode h3 { font-size: 14px; font-weight: 600; }
.fnode p { font-size: 12.5px; color: var(--tx3); margin: 2px 0 0; line-height: 1.45; }
.fnode.r { text-align: right; }
.fnode.r .fdot { margin-left: auto; }
.callout {
  margin-top: 64px; padding: 30px 34px;
  background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--acc);
  border-radius: var(--r-md);
  font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 500; color: var(--tx2);
  max-width: 1080px;
}
.callout b { color: var(--tx); font-weight: 700; }

/* ---------- section 3: the problem ---------- */
.prob-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.flowart { margin: 46px 0 40px; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scrollx svg { min-width: 880px; width: 100%; height: auto; display: block; }
.reconstruct { font-size: 20px; font-weight: 600; color: var(--lt-tx); margin: 8px 0 0; }
.quote {
  margin: 52px 0 0; padding: 34px 38px 30px;
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(11, 18, 32, 0.07);
  position: relative;
}
.quote::before {
  content: "\201C"; position: absolute; top: 6px; left: 22px;
  font-size: 74px; line-height: 1; color: var(--acc); opacity: 0.85; font-weight: 800;
}
.quote p { margin: 0; padding-left: 46px; font-size: 19px; line-height: 1.6; color: var(--lt-tx); font-weight: 500; }

/* ---------- section 4: the key question ---------- */
.qcall {
  margin: 30px 0 38px; padding: 28px 32px;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-md);
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; line-height: 1.45; color: var(--tx);
  max-width: 1080px;
}
.qcall span { color: var(--acc2); }
.becomes { max-width: 980px; margin-bottom: 34px; }
.becomes li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 16.5px; color: var(--tx2);
}
.becomes li:last-child { border-bottom: 0; }
.becomes svg { flex: none; color: var(--acc2); align-self: center; }
.becomes b { color: var(--tx); font-weight: 600; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 34px; }
.pillar { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; }
.pillar .num { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc2); }
.pillar h3 { font-size: 21px; margin: 8px 0 8px; }
.pillar p { font-size: 14.5px; color: var(--tx3); margin: 0; }
.exposure-line { font-size: 19px; font-weight: 600; color: var(--tx); }

/* ---------- section 5: method ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.step {
  position: relative; background: var(--lt-card); border: 1px solid var(--lt-line);
  border-radius: var(--r-md); padding: 26px 22px 24px;
  box-shadow: 0 14px 40px rgba(11, 18, 32, 0.06);
}
.step .icon {
  width: 52px; height: 52px; display: grid; place-content: center;
  color: var(--acc); margin-bottom: 16px;
}
.step .n { position: absolute; top: 20px; right: 22px; font-size: 26px; font-weight: 700; color: var(--acc); opacity: 0.22; }
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--lt-tx2); margin: 0; line-height: 1.6; }
.method-line { text-align: center; margin-top: 46px; font-size: 18px; font-weight: 600; color: var(--lt-tx); }
.method-line span { border-bottom: 3px solid var(--acc); padding-bottom: 6px; }

/* ---------- section 6: inconsistencies ---------- */
.incon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.maylist li {
  position: relative; padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line); font-size: 16px; color: var(--tx2);
}
.maylist li:last-child { border-bottom: 0; }
.maylist li::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 8px; height: 8px; border: 2px solid var(--acc2); border-radius: 2px; transform: rotate(45deg);
}
.docdemo { display: grid; gap: 12px; }
.doccard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px;
}
.doccard .dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.doccard .dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx3); display: inline-flex; align-items: center; gap: 8px; }
.doccard .dt svg { color: var(--acc2); }
.doccard p { margin: 0; font-size: 15px; color: var(--tx); }
.doccard.finding { border-color: rgba(250, 178, 25, 0.35); background: linear-gradient(180deg, rgba(250, 178, 25, 0.06), rgba(250, 178, 25, 0.02)), var(--bg2); }
.doccard.finding p { color: var(--tx2); font-size: 14.5px; }
.doccard.finding .verdict { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; color: var(--tx); margin-bottom: 7px; }
.vs { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--tx3); }
.incon-close { margin-top: 44px; max-width: 1040px; }
.clarify {
  margin-top: 26px; padding: 24px 28px;
  border: 1px solid var(--line2); border-left: 3px solid var(--acc); border-radius: var(--r-md);
  background: rgba(37, 99, 235, 0.05);
}
.clarify .cl-k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc2); display: block; margin-bottom: 8px; }
.clarify p { margin: 0; font-size: 15.5px; color: var(--tx2); }
.clarify b { color: var(--tx); }

/* ---------- section 7: map ---------- */
.map-grid { display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.55fr); gap: 48px; align-items: start; }
.map-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 26px 0 14px; }
.tgl { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--tx2); cursor: pointer; user-select: none; }
.tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line2);
  display: grid; place-content: center; color: transparent; transition: all 0.12s ease;
}
.tgl input:checked + .box { background: var(--acc); border-color: var(--acc); color: #fff; }
.tgl input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.tgl .k { display: inline-flex; align-items: center; gap: 7px; }
.tgl .swatch { width: 22px; height: 0; border-top: 2.5px solid var(--acc2); border-radius: 2px; }
.tgl .swatch.dash { border-top-style: dashed; border-top-color: #8FC2FF; }
.map-caption { font-size: 13px; color: var(--tx3); }
.map-caption b { color: var(--tx2); }
.map-shell {
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; position: relative; overflow: hidden;
}
.map-shell svg { width: 100%; height: auto; display: block; }
.jmap .cty { fill: #101A2E; stroke: #1B2740; stroke-width: 0.45; }
.jmap .cty.on { fill: rgba(37, 99, 235, 0.20); stroke: rgba(107, 154, 244, 0.65); stroke-width: 0.7; }
.jmap .arc { fill: none; stroke: #5B8DEF; stroke-width: 1.5; stroke-linecap: round; }
.jmap .arc.glow { stroke-width: 5.5; opacity: 0.13; }
.jmap .arc.flow { stroke-dasharray: 7 9; animation: arcflow 1.3s linear infinite; }
.jmap g[data-kind="ai"] .arc { stroke: #8FC2FF; }
.jmap g[data-kind="ai"] .arc.flow { stroke-dasharray: 2.5 7; }
.jmap .nd { fill: #EAF1FF; stroke: var(--acc2); stroke-width: 2; }
.jmap .nd-ring { fill: none; stroke: var(--acc2); opacity: 0.5; animation: ndpulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.jmap .chip-bg { fill: rgba(11, 18, 32, 0.88); stroke: rgba(245, 247, 250, 0.22); rx: 6; }
.jmap .chip-role { fill: #F5F7FA; font-size: 10px; font-weight: 600; font-family: inherit; }
.jmap .chip-cty { fill: #A9B4C8; font-size: 8.6px; font-weight: 500; font-family: inherit; }
@keyframes arcflow { to { stroke-dashoffset: -16; } }
@keyframes ndpulse { 0% { transform: scale(0.6); opacity: 0.7; } 80% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
.map-note { margin-top: 12px; font-size: 12.5px; color: var(--tx3); }
.support-line { margin-top: 22px; font-weight: 600; color: var(--tx); font-size: 16.5px; }

/* ---------- homepage: the three business uses ----------
   Three cards carrying ONE state. The band glyph and the band colour are identical in
   every column on purpose — the whole claim of the section is that a use changes the
   question and never the answer — so nothing here may key colour off the column. The
   glyph is always accompanied by its band word in ink, so identity is never colour
   alone, which also keeps Amber legible where #fab219 on white is not. */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.use {
  display: flex; flex-direction: column;
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--r-md);
  padding: 20px 20px 18px; text-decoration: none;
  box-shadow: 0 14px 40px rgba(11, 18, 32, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.use:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 22px 54px rgba(11, 18, 32, 0.10); }
.use-k { font-size: 19px; font-weight: 700; color: var(--lt-tx); letter-spacing: -0.01em; }
.use-w { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--acc); margin-top: 7px; }
.use .use-q { font-size: 15.5px; color: var(--lt-tx); margin: 15px 0 0; font-style: italic; }
.use-state {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: 15px 0 13px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--lt-line2); background: rgba(11, 18, 32, 0.03);
  font-size: 14px; font-weight: 700; color: var(--lt-tx);
}
.use-state span { font-size: 13px; }
.use > p:last-of-type { font-size: 13.5px; color: var(--lt-tx2); line-height: 1.55; margin: 0 0 16px; flex: 1; }
.use .linkline { font-size: 14px; margin-top: auto; }
.uses-foot { margin-top: 26px; font-size: 14.5px; max-width: 62em; }
.uses-foot .linkline { margin-left: 8px; font-size: 14.5px; }

/* ---------- section 8: the six layers ----------
   Three across, two rows. It was repeat(5, 1fr) for the five-product ladder; six layers
   in one row would be 190px of card, which is narrower than the vignette needs and puts
   the second half of the ladder off the right edge on a laptop. Two rows of three also
   reads the way the ladder actually splits: layers 1-3 are the public record, layers 4-6
   need evidence a client supplies. */
.prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prod {
  display: flex; flex-direction: column;
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--r-md);
  padding: 14px 14px 18px;
  box-shadow: 0 14px 40px rgba(11, 18, 32, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.prod:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(11, 18, 32, 0.10); }
.vig {
  height: 148px; border-radius: 10px; background: var(--bg1);
  border: 1px solid rgba(11, 18, 32, 0.14);
  padding: 12px; overflow: hidden; position: relative;
  color: var(--tx); font-size: 10px;
}
.prod h3 { font-size: 17px; margin: 15px 4px 7px; }
.prod > p { font-size: 13.5px; color: var(--lt-tx2); margin: 0 4px 14px; line-height: 1.55; flex: 1; }
.prod .linkline { margin: 0 4px; font-size: 14px; }
/* vignette primitives */
/* List vignettes are a fixed-height crop of a longer list, so the bottom edge
   fades rather than slicing a row of text in half. Only the list variants get
   this — the diagram vignettes draw right down to the edge. */
.vig.vg-crop::after, .vig.vg-feed::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26px;
  background: linear-gradient(to bottom, rgba(11, 18, 32, 0), var(--bg1));
  pointer-events: none;
}
.vig .vg-row { display: flex; align-items: center; gap: 7px; padding: 4.5px 0; border-bottom: 1px solid rgba(245, 247, 250, 0.07); }
.vig .vg-row:last-child { border-bottom: 0; }
.vig .vg-sq { width: 18px; height: 18px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line2); display: grid; place-content: center; font-size: 8.5px; font-weight: 700; color: var(--tx2); flex: none; }
.vig .vg-ln { height: 6px; border-radius: 3px; background: rgba(245, 247, 250, 0.16); }
.vig .vg-glyphs { margin-left: auto; display: flex; gap: 4px; font-size: 8.5px; }
.vig .vg-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 7px; padding: 5px 8px; color: var(--tx3); margin-bottom: 7px; }
.vig .vg-search .vg-ln { flex: 1; height: 5px; }
.vig .vg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vig .vg-title { font-size: 11.5px; font-weight: 700; color: var(--tx); }
.vig .vg-chip { font-size: 8px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 7px; color: var(--tx3); }
.vig .vg-share { font-size: 20px; font-weight: 700; color: var(--tx); }
.vig .vg-share small { font-size: 9px; font-weight: 600; color: var(--tx3); display: block; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 2px; }
.vig .vg-strip { display: flex; gap: 8px; margin-top: 10px; font-size: 9.5px; flex-wrap: wrap; }
.vig .vg-strip span { display: inline-flex; gap: 4px; align-items: center; color: var(--tx2); }
.vig .vg-bars5 { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin-top: 10px; }
.vig .vg-bars5 i { display: block; height: 100%; }
/* vg-feed is a SECOND CLASS on the vignette, not a child of it (`class="vig vg-feed"`),
   so these were written as descendant selectors and matched nothing — the feed rows were
   rendering unstyled, dots included. Compounded, not nested. */
.vig.vg-feed { font-size: 9.5px; }
.vig.vg-feed .vg-row { gap: 8px; }
.vig.vg-feed .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc2); flex: none; }
.vig.vg-feed .t { color: var(--tx); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vig.vg-feed .s { color: var(--tx3); margin-left: auto; flex: none; }
.vig svg { display: block; }

/* Layer number, current state and evidence depth on each ladder card.
   The state chip is deliberately NEUTRAL and never a band colour: Live Now / By Request /
   By Engagement are stages of availability, not findings about an organisation, and the
   five band colours are reserved for findings. Only Layer 1 gets the accent treatment,
   because "free, and you can use it right now" is the one state a stranger acts on. */
.lay-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 15px 4px 0; }
.lay-n { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--acc); flex: none; }
.lay-s {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--lt-line2); border-radius: 999px; padding: 3px 9px;
  color: var(--lt-tx2); background: rgba(11, 18, 32, 0.03); text-align: right;
}
.lay-s.now { border-color: var(--acc); color: var(--acc); background: rgba(59, 117, 241, 0.08); }
.prod .lay-h + h3 { margin-top: 8px; margin-bottom: 3px; }
.lay-d { display: block; font-size: 12px; font-weight: 600; color: var(--lt-tx2); margin: 0 4px 11px; }

/* LIVE, below the ladder. Copy leads because the claim is the point; the feed vignette is
   supporting, so it is capped rather than stretched to the height of the paragraphs. */
.livegrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.livecopy p { max-width: 56em; }
.livecopy .linkline { margin-top: 6px; }

/* ---------- section 9: audiences ---------- */
.auds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.aud { grid-column: span 2; }
/* Exactly five cards: the last two widen to halves so the final row fills the
   measure instead of leaving an orphan gap on the right. */
.aud:nth-child(4):nth-last-child(2),
.aud:nth-child(4):nth-last-child(2) ~ .aud { grid-column: span 3; }
.aud {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--r-md);
  padding: 28px 26px;
}
.aud h3 { font-size: 19px; margin-bottom: 9px; }
.aud p { font-size: 14.5px; color: var(--lt-tx2); margin: 0; }
.aud .k { display: inline-block; width: 34px; height: 3px; border-radius: 2px; background: var(--acc); margin-bottom: 18px; }

/* ---------- section 10: research ---------- */
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.res-copy .engine { font-size: 19px; font-weight: 600; color: var(--tx); margin-top: 6px; }
.res-links { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px;
}
.stat b { display: block; font-size: 33px; font-weight: 700; letter-spacing: -0.02em; }
.stat span { font-size: 12px; color: var(--tx3); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }
.stats-date { grid-column: 1 / -1; font-size: 12.5px; color: var(--tx3); text-align: right; }
.res-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.res-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.res-tile {
  display: block; text-decoration: none;
  /* The tile carries a dark surface even inside .sec-light, so it must own its
     ink — otherwise the heading inherits the light section's dark text colour. */
  background: var(--bg1); color: var(--tx);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px; transition: border-color 0.15s ease, background 0.15s ease;
}
.res-tile:hover { border-color: var(--acc); background: var(--bg2); }
.res-tile .icon { color: var(--acc2); margin-bottom: 14px; }
.res-tile h3 { font-size: 16.5px; margin-bottom: 6px; color: var(--tx); }
.sec-light .res-tile p, .sec-pale .res-tile p { color: var(--tx3); }
.res-tile p { font-size: 13.5px; color: var(--tx3); margin: 0; }

/* ---------- section 11: closing CTA ---------- */
.cta-sec {
  position: relative; overflow: hidden;
  background:
    radial-gradient(640px 380px at 50% 0%, rgba(37, 99, 235, 0.14), transparent 68%),
    var(--bg0);
  border-top: 1px solid var(--line);
}
.cta-sec .wrap { max-width: 880px; text-align: center; }
.cta-sec .h2 { max-width: none; }
.cta-sec .cta-copy { margin-top: 24px; }
.litany { margin: 34px auto 38px; max-width: 420px; text-align: left; }
.litany li {
  padding: 9px 0 9px 26px; position: relative;
  font-size: 17px; font-weight: 500; color: var(--tx2);
  border-bottom: 1px solid var(--line);
}
.litany li:last-child { border-bottom: 0; color: var(--tx); font-weight: 600; }
.litany li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc2);
}
.cta-sec .cta-row { justify-content: center; }

/* ---------- footer ---------- */
.ft { background: #070C16; border-top: 1px solid var(--line); padding: 64px 0 30px; }
.ft-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: 36px; }
/* `mix-blend-mode: screen` used to live here and has been removed. It was a workaround for
   a logo file with a black rectangle baked in behind it — screen blending made the box
   disappear into a dark footer. The file is genuinely transparent now, so the blend has
   nothing left to hide and only does damage: it lightens every dark pixel of the artwork
   against whatever is behind it, which flattens the mark's outline. The header never had
   the hack, which is why the two logos rendered differently on the same page. */
.ft-brand img { height: 46px; width: auto; }
.ft-brand p { font-size: 13.5px; color: var(--tx3); margin: 16px 0 0; max-width: 240px; }
.ft h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx3); margin-bottom: 14px; }
.ft-col li { padding: 4.5px 0; }
.ft-col a { font-size: 14px; color: var(--tx2); text-decoration: none; }
.ft-col a:hover { color: var(--tx); }
.ft-stay p { font-size: 13.5px; color: var(--tx3); margin: 0 0 14px; }
.ft-stay .mailto { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tx2); text-decoration: none; margin-bottom: 16px; }
.ft-stay .mailto:hover { color: var(--tx); }
.ft-stay .mailto svg { color: var(--acc2); }
.ft-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); margin-top: 48px; padding-top: 22px;
  font-size: 12.5px; color: var(--tx3);
}

/* The operator door. Quieter than a footer column link on purpose — it is for the handful
   of people who run this, not for a visitor, and dressing it up would advertise it. */
.ft-admin { color: var(--tx3); text-decoration: none; }
.ft-admin:hover { color: var(--tx2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.m-overlay { position: absolute; inset: 0; background: rgba(4, 6, 11, 0.68); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.m-card {
  position: relative; width: min(460px, 100%);
  background: #0D1626; border: 1px solid var(--line2); border-radius: var(--r-lg);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6);
  padding: 30px 30px 26px;
}
.m-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  display: grid; place-content: center; border-radius: 9px; color: var(--tx3);
}
.m-x:hover { background: rgba(245, 247, 250, 0.07); color: var(--tx); }
.m-card h3 { font-size: 22px; margin-bottom: 8px; }
.m-card .m-sub { font-size: 14.5px; color: var(--tx2); margin: 0 0 20px; }
.m-view[hidden] { display: none; }
.m-field { margin-bottom: 14px; }
.m-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; }
.m-field input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  background: var(--well); border: 1px solid var(--line2); color: var(--tx);
  font: inherit; font-size: 15px;
}
.m-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.m-note { font-size: 12px; color: var(--tx3); margin: 14px 0 18px; }
.m-note a { color: var(--acc2); text-decoration: none; }
.m-note a:hover { text-decoration: underline; }
.m-actions { display: flex; gap: 10px; }
.m-done-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--acc-wash); color: var(--acc2); display: grid; place-content: center; margin-bottom: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  /* The masthead and section-head bands stack here alongside every other two-column grid.
     Below this width the heading column is too narrow to hold a 52px headline without
     breaking it into four lines, which is worse than the stack. */
  .phero .wrap, .sechead { display: block; }
  .phero .lead { margin: 20px 0 0; padding-top: 0; max-width: 46em; }
  .sechead .sub { margin-top: 18px; padding-top: 0; }
  .chainpanel { max-width: 640px; }
  .field-grid, .incon-grid, .map-grid, .res-grid { grid-template-columns: 1fr; gap: 44px; }
  /* Stacks with the other two-column grids. The feed vignette truncates its rows, so a
     narrow second column would show five ellipses and say nothing. */
  .livegrid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .livegrid .vig { max-width: 420px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .res-tiles, .res-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The bar between the mobile breakpoint and a roomy laptop, where the content column is the
   window rather than the 1200px cap. It was ALREADY too wide here before the calculator was
   added — 1,092px of bar in a 1,024px window — which pushed Request Access off the right edge
   with no scrollbar to reach it, because .hd is fixed and fixed overflow does not extend the
   document. The sweep read documentElement.scrollWidth and so could never see it; site-sweep
   now measures .hd-in directly. Sign In steps off here rather than the bar getting tighter
   still: it only opens a modal saying access moves by correspondence, while Request Access —
   the action that actually does something — stays. Sized at 981px, the tightest desktop there
   is and the hardest case: 850px of bar inside 925px of content box, nothing wrapped and
   Request Access wholly on screen.

   THE BREAKPOINT MOVED FROM 1240px TO 1120px when Consulting left the bar for the Solutions
   menu. Eight entries needed 1,151px at full size; seven need 1,083px. Measured across ten
   window widths with the tightening switched off: the bar still fits at 1,090px with 7px to
   spare and overflows by 23px at 1,060px. So everything from 1,121px upwards can now carry
   the roomy bar — 14.5px type, 11px padding, and Sign In present — where before it was
   squeezed to 13px and Sign In disappeared. 1,120px rather than 1,090px because the number
   worth having is slack, not range: it leaves 38px of it at the boundary, which is enough to
   absorb a font falling back on a machine that is not this one. */
@media (max-width: 1120px) {
  .hd-in { gap: 14px; }
  .nav-a { padding: 9px 6px; font-size: 13px; }
  .hd-act .js-signin { display: none; }
}
@media (max-width: 980px) {
  .hd-nav {
    /* absolute against the fixed header, which is its containing block; an
       inset box collapsed here, so top/left/right + an explicit height */
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 73px); z-index: 105;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    background: #000; padding: 18px 22px 40px; overflow: auto;
    border-top: 1px solid var(--line);
  }
  .nav-open .hd-nav { display: flex; }
  .nav-a { font-size: 17px; padding: 13px 12px; border-radius: 12px; }
  .nav-a.is-active { box-shadow: inset 2px 0 0 var(--acc2); }
  .nav-dd .dd { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 14px; }
  .dd a { padding: 10px 12px; }
  .hd-burger { display: grid; }
  .nav-open { overflow: hidden; }
}
@media (max-width: 760px) {
  .sec { padding: 78px 0; }
  .hero { padding: 138px 0 72px; }
  .phero { padding: 124px 0 52px; }
  .contact-litany { padding: 24px 22px 28px; }
  .prob-cols { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .prods { grid-template-columns: 1fr 1fr; }
  /* The three uses stack rather than shrink. Three 230px columns would wrap the band
     word onto two lines in one column and not the others, and the row's whole argument
     is that the three states are visibly identical. */
  .uses { grid-template-columns: minmax(0, 1fr); }
  .res-tiles, .res-tiles.four { grid-template-columns: minmax(0, 1fr); }
  .auds { grid-template-columns: minmax(0, 1fr); }
  .aud, .aud:nth-child(4):nth-last-child(2),
  .aud:nth-child(4):nth-last-child(2) ~ .aud { grid-column: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .cp-grid { grid-template-columns: 1fr; }
  .cp-chain { flex-wrap: wrap; gap: 10px 4px; }
  .cp-node { flex: 1 1 28%; }
  .cp-arrow { display: none; }
}
@media (max-width: 560px) {
  .hd-act .js-signin { display: none; }
  .prods { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .phero h1 { font-size: 32px; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .ft-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jmap .arc.flow, .jmap .nd-ring { animation: none; }
  .btn, .prod { transition: none; }
}

/* ---------- FAQ (Key Question section) ---------- */
.faq-wrap { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line); max-width: 1040px; }
.faq-wrap h3 { font-size: 21px; font-weight: 600; margin: 0 0 18px; }
.faq { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(245, 247, 250, 0.02); overflow: hidden;
}
.faq-item.open { border-color: var(--line2); background: rgba(245, 247, 250, 0.035); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--tx);
}
.faq-q:hover { color: var(--acc2); }
.faq-ico {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line2); display: grid; place-items: center;
  font-size: 14px; font-weight: 500; color: var(--tx2);
  transition: transform 0.25s ease;
}
.faq-item.open .faq-ico { transform: rotate(45deg); color: var(--acc2); border-color: var(--acc); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a-in p { margin: 0; padding: 0 18px 16px; font-size: 14.5px; line-height: 1.65; color: var(--tx2); }
.faq-a-in .g-r, .faq-a-in .g-a, .faq-a-in .g-g, .faq-a-in .g-b, .faq-a-in .g-y { font-size: 12px; }
.faq-a-in .linkline { margin: 0 18px 16px; font-size: 14px; }

/* ---------- About Us ---------- */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px; align-items: center;
}
.about-copy p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; }
.about-copy p:last-child { margin-bottom: 0; }
.about-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.about-stats .stat b { font-size: 29px; }
@media (max-width: 1060px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.about-copy .h2 { margin-bottom: 22px; }
.inl { color: var(--acc2); text-decoration: none; border-bottom: 1px solid rgba(59, 117, 241, 0.4); }
.inl:hover { border-bottom-color: var(--acc2); }

/* ---------- Contact ---------- */
.contact-litany {
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 32px 34px;
}
.contact-litany h3 { font-size: 15px; letter-spacing: 0.02em; color: var(--tx); }
.contact-litany .litany { margin: 18px 0 0; max-width: none; }

/* ---------- Scroll / load animations (all initial-hidden states gated on .js) ---------- */
/* Hero chain panel: nodes + arrows rise in, bars sweep, donut fills (donut handled in JS via dasharray) */
.js .chainpanel .cp-node, .js .chainpanel .cp-arrow { opacity: 0; transform: translateY(9px); }
.chainpanel.anim .cp-node, .chainpanel.anim .cp-arrow {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease calc(var(--i, 0) * 95ms), transform 0.5s ease calc(var(--i, 0) * 95ms);
}
.js .chainpanel .cp-bars .bar i { transform: scaleX(0); transform-origin: left; }
.chainpanel.anim .cp-bars .bar i { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.35, 1); }
.chainpanel.anim .cp-bars li:nth-child(1) .bar i { transition-delay: 0.35s; }
.chainpanel.anim .cp-bars li:nth-child(2) .bar i { transition-delay: 0.44s; }
.chainpanel.anim .cp-bars li:nth-child(3) .bar i { transition-delay: 0.53s; }
.chainpanel.anim .cp-bars li:nth-child(4) .bar i { transition-delay: 0.62s; }
.chainpanel.anim .cp-bars li:nth-child(5) .bar i { transition-delay: 0.71s; }
#cp-donut circle { transition: stroke-dasharray 0.9s ease 0.45s; }

/* Second Balance Sheet field graphic: lines fade in + march, nodes rise, dots and centre pulse */
.js .fieldbox .flines line { opacity: 0; }
.fieldbox.vis .flines line { opacity: 1; transition: opacity 0.5s ease; animation: fmarch 1.4s linear infinite; }
.fieldbox.vis .flines line:nth-child(2) { transition-delay: 0.08s; }
.fieldbox.vis .flines line:nth-child(3) { transition-delay: 0.16s; }
.fieldbox.vis .flines line:nth-child(4) { transition-delay: 0.24s; }
.fieldbox.vis .flines line:nth-child(5) { transition-delay: 0.32s; }
.fieldbox.vis .flines line:nth-child(6) { transition-delay: 0.4s; }
.fieldbox.vis .flines line:nth-child(7) { transition-delay: 0.48s; }
.fieldbox.vis .flines line:nth-child(8) { transition-delay: 0.56s; }
@keyframes fmarch { to { stroke-dashoffset: -6; } }
.js .fieldbox .fnode { opacity: 0; transform: translateY(10px); }
.fieldbox.vis .fnode { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }
.fieldbox.vis .fnode:nth-of-type(2) { transition-delay: 0.09s; }
.fieldbox.vis .fnode:nth-of-type(3) { transition-delay: 0.18s; }
.fieldbox.vis .fnode:nth-of-type(4) { transition-delay: 0.27s; }
.fieldbox.vis .fnode:nth-of-type(5) { transition-delay: 0.36s; }
.fieldbox.vis .fnode:nth-of-type(6) { transition-delay: 0.45s; }
.fieldbox.vis .fnode:nth-of-type(7) { transition-delay: 0.54s; }
.fieldbox.vis .fnode:nth-of-type(8) { transition-delay: 0.63s; }
.fieldbox.vis .fnode:nth-of-type(9) { transition-delay: 0.72s; }
.fieldbox.vis .fdot { animation: fdotpulse 2.8s ease-in-out infinite; }
@keyframes fdotpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
  50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.05); }
}
.fieldbox.vis .fcenter img { animation: fglow 4.5s ease-in-out infinite; }
@keyframes fglow {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(37, 99, 235, 0.45)); }
  50% { filter: drop-shadow(0 0 40px rgba(37, 99, 235, 0.7)); }
}

/* Problem flowart: waves draw in, dots twinkle, stage circles pulse, labels fade.
   NOTE: only opacity on .fa-labels > g and .fa-stage children — CSS transforms would
   override the SVG transform attributes and collapse every group onto the origin. */
.js .flowart .fa-wave { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.flowart.vis .fa-wave { animation: wavedraw 1.1s ease-out forwards; }
.flowart.vis .fa-wave:nth-of-type(2) { animation-delay: 0.15s; }
.flowart.vis .fa-wave:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes wavedraw { to { stroke-dashoffset: 0; } }
.js .fa-dots circle { opacity: 0; }
.flowart.vis .fa-dots circle { animation: dottwinkle 3.2s ease-in-out infinite; }
.flowart.vis .fa-dots circle:nth-of-type(1) { animation-delay: 0.9s; }
.flowart.vis .fa-dots circle:nth-of-type(2) { animation-delay: 1.25s; }
.flowart.vis .fa-dots circle:nth-of-type(3) { animation-delay: 1.6s; }
.flowart.vis .fa-dots circle:nth-of-type(4) { animation-delay: 1.95s; }
.flowart.vis .fa-dots circle:nth-of-type(5) { animation-delay: 2.3s; }
.flowart.vis .fa-dots circle:nth-of-type(6) { animation-delay: 2.65s; }
.flowart.vis .fa-dots circle:nth-of-type(7) { animation-delay: 3s; }
.flowart.vis .fa-dots circle:nth-of-type(8) { animation-delay: 3.35s; }
.flowart.vis .fa-dots circle:nth-of-type(9) { animation-delay: 3.7s; }
@keyframes dottwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } }
.flowart.vis .fa-stage > circle {
  animation: stagepulse 3.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.flowart.vis .fa-stage:nth-of-type(1) > circle { animation-delay: 0.2s; }
.flowart.vis .fa-stage:nth-of-type(2) > circle { animation-delay: 1s; }
.flowart.vis .fa-stage:nth-of-type(3) > circle { animation-delay: 1.8s; }
.flowart.vis .fa-stage:nth-of-type(4) > circle { animation-delay: 2.6s; }
@keyframes stagepulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(1); } }
.js .fa-labels > g { opacity: 0; }
.flowart.vis .fa-labels > g { animation: labelfade 0.6s ease-out forwards; }
.flowart.vis .fa-labels > g:nth-of-type(1) { animation-delay: 0.5s; }
.flowart.vis .fa-labels > g:nth-of-type(2) { animation-delay: 0.7s; }
.flowart.vis .fa-labels > g:nth-of-type(3) { animation-delay: 0.9s; }
.flowart.vis .fa-labels > g:nth-of-type(4) { animation-delay: 1.1s; }
.flowart.vis .fa-labels > g:nth-of-type(5) { animation-delay: 1.3s; }
@keyframes labelfade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: every gated initial state forced visible, every new animation killed */
@media (prefers-reduced-motion: reduce) {
  .js .chainpanel .cp-node, .js .chainpanel .cp-arrow,
  .js .fieldbox .fnode { opacity: 1; transform: none; transition: none; }
  .js .chainpanel .cp-bars .bar i { transform: none; transition: none; }
  .js .fieldbox .flines line, .js .fa-dots circle, .js .fa-labels > g { opacity: 1; animation: none; transition: none; }
  .js .flowart .fa-wave { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .fieldbox.vis .flines line, .fieldbox.vis .fdot, .fieldbox.vis .fcenter img,
  .flowart.vis .fa-dots circle, .flowart.vis .fa-stage > circle, .flowart.vis .fa-labels > g,
  .flowart.vis .fa-wave { animation: none; }
  #cp-donut circle { transition: none; }
  .faq-a, .faq-ico { transition: none; }
}