/* Fluyenta · Simulations & Training Exercise Support
   Five-chapter scroll journey. Dark-first, two off-white interludes.
   Tokens only; animate transform and opacity only. */

:root {
  --navy: #000835;
  --dark-blue: #0A1F4D;
  --blue: #0B97FF;
  --ice: #D4EDFF;
  --off-white: #F6F4FC;
  --muted: #4A5470;
  --blue-deep: #0069C6;
  --pad: clamp(24px, 5vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Metric-matched fallback so the Inter swap cannot shift layout. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--navy); }
body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  background: var(--navy);
  color: var(--ice);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
em, i { font-style: normal; }

h1, h2, h3 {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.accent { color: var(--blue); }
.nb { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ============ BUTTONS (max three CTAs on the page) ============ */
.btn {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding: 1rem 2.1rem;
  border-radius: 8px;
  background: var(--blue);
  color: var(--navy);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:hover { transform: scale(1.03); box-shadow: 0 0 32px rgba(11, 151, 255, 0.55); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ============ SLIM HEADER (appears after the opener; carries CTA #1) ============ */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem var(--pad);
  background: rgba(0, 8, 53, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-100%);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.top.on { opacity: 1; transform: translateY(0); }
/* Hidden again once the closing frame's own "Book a Consultation" is on screen —
   two copies of the same CTA stacked in one viewport read as a mistake. */
.top.at-final { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.top .brand { display: block; }
.top .brand img { height: 32px; width: auto; display: block; }
@media (max-width: 767.98px) { .top .brand img { height: 26px; } }
.top .brand:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.top .btn { padding: 0.55rem 1.15rem; font-size: 0.78rem; }

/* ============ THE THREAD (desktop) / TOP BAR (mobile) ============ */
.thread { position: fixed; z-index: 55; left: 40px; top: 24px; bottom: 24px; width: 2px; }
@media (min-width: 1024px) {
  .t-track { position: absolute; inset: 0; width: 2px; background: rgba(212, 237, 255, 0.12); transition: background-color 300ms var(--ease); }
  .thread.light .t-track { background: rgba(74, 84, 112, 0.25); }
  .t-fill { position: absolute; inset: 0; width: 2px; background: var(--blue); box-shadow: 0 0 10px rgba(11, 151, 255, 0.6); transform-origin: top; transform: scaleY(var(--sp, 0)); }
  .t-tip { position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px rgba(11, 151, 255, 1), 0 0 4px rgba(11, 151, 255, 1); transform: translateY(var(--ty, 0px)); }
  .t-node { position: absolute; left: -5px; display: flex; align-items: center; gap: 0.7rem; text-decoration: none; transform: translateY(-50%); }
  .t-node .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(212, 237, 255, 0.4); background: var(--navy); flex-shrink: 0; transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
  .thread.light .t-node .dot { background: var(--off-white); }
  .t-node .lbl { font-weight: 800; font-size: 0.58rem; letter-spacing: 0.16em; color: rgba(212, 237, 255, 0.45); text-transform: uppercase; white-space: nowrap; transition: color 300ms var(--ease); }
  .thread.light .t-node .lbl { color: rgba(74, 84, 112, 0.7); }
  .t-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
  .t-node.lit .dot { border-color: var(--blue); background: var(--blue); }
  .t-node.lit.fresh .dot { animation: node-pulse 900ms var(--ease) 1; }
  .t-node.active .lbl { color: var(--ice); }
  .thread.light .t-node.active .lbl { color: var(--navy); }
  @keyframes node-pulse {
    0% { box-shadow: 0 0 0 0 rgba(11, 151, 255, 0.8); }
    100% { box-shadow: 0 0 0 14px rgba(11, 151, 255, 0); }
  }
  .t-tick { position: absolute; left: -2px; display: flex; align-items: center; gap: 0.5rem; transform: translateY(-50%); }
  .t-tick .tick { width: 6px; height: 2px; background: rgba(212, 237, 255, 0.35); }
  .t-tick .tlbl { font-weight: 800; font-size: 0.5rem; letter-spacing: 0.14em; color: rgba(212, 237, 255, 0.3); text-transform: uppercase; white-space: nowrap; }
  .thread.light .t-tick .tlbl { color: rgba(74, 84, 112, 0.55); }
  .t-tick.lit .tick { background: var(--blue); }
  .railbar { display: none; }
}
@media (max-width: 1023.98px) {
  /* The thread stays a literal drawn line on mobile: 3px, inset 16px, full height. */
  .railbar { display: none; }
  .thread { display: block; left: 16px; top: 0; bottom: 0; width: 3px; z-index: 55; }
  .t-track { position: absolute; inset: 0; width: 3px; background: rgba(212, 237, 255, 0.12); transition: background-color 300ms var(--ease); }
  .thread.light .t-track { background: rgba(74, 84, 112, 0.25); }
  .t-fill { position: absolute; inset: 0; width: 3px; background: var(--blue); box-shadow: 0 0 10px rgba(11, 151, 255, 0.6); transform-origin: top; transform: scaleY(var(--sp, 0)); }
  .t-tip { position: absolute; left: -2.5px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px rgba(11, 151, 255, 1), 0 0 4px rgba(11, 151, 255, 1); transform: translateY(var(--ty, 0px)); }
  .t-node { position: absolute; left: -3.5px; display: block; text-decoration: none; transform: translateY(-50%); }
  .t-node .dot { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(212, 237, 255, 0.4); background: var(--navy); transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
  .thread.light .t-node .dot { background: var(--off-white); }
  .t-node .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .t-node.lit .dot { border-color: var(--blue); background: var(--blue); }
  .t-tick { position: absolute; left: -1.5px; transform: translateY(-50%); }
  .t-tick .tick { display: block; width: 6px; height: 2px; background: rgba(212, 237, 255, 0.35); }
  .t-tick.lit .tick { background: var(--blue); }
  .t-tick .tlbl { display: none; }

  /* Current chapter label: a chip beside the active node, in on entry, out after 2s. */
  .t-chip { position: absolute; left: 14px; transform: translateY(-50%); white-space: nowrap;
    font-weight: 800; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ice); background: rgba(0, 8, 53, 0.82); border: 1px solid rgba(11, 151, 255, 0.4);
    border-radius: 999px; padding: 0.3rem 0.6rem; opacity: 0; pointer-events: none;
    transition: opacity 400ms var(--ease); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .t-chip.on { opacity: 1; }
  .thread.light .t-chip { color: var(--navy); background: rgba(246, 244, 252, 0.9); border-color: rgba(0, 105, 198, 0.35); }

  /* The whole rail is one tap target: opens the chapter sheet. */
  .rail-tap { position: fixed; left: 0; top: 0; bottom: 0; width: 32px; z-index: 56;
    background: none; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rail-tap:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 4px; }

}

/* ============ MOBILE CHAPTER SHEET ============ */
.sheet-scrim { position: fixed; inset: 0; z-index: 78; background: rgba(0, 8, 53, 0.6);
  opacity: 0; transition: opacity 240ms var(--ease); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sheet-scrim.on { opacity: 1; }
.ch-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(0, 8, 53, 0.96); border-top: 1px solid rgba(11, 151, 255, 0.35);
  border-radius: 18px 18px 0 0; padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(102%); transition: transform 280ms var(--ease);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-height: 82svh; overflow-y: auto; }
.ch-sheet.on { transform: translateY(0); }
.ch-sheet::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
  background: rgba(212, 237, 255, 0.3); margin: 0 auto 12px; }
.sheet-h { font-weight: 800; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 0.4rem; }
.sheet-i { display: flex; align-items: center; gap: 0.9rem; min-height: 46px; text-decoration: none;
  border-bottom: 1px solid rgba(212, 237, 255, 0.08); }
.sheet-i:last-child { border-bottom: none; }
.sheet-i .si-n { font-weight: 900; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--blue); width: 22px; flex-shrink: 0; }
.sheet-i .si-l { font-weight: 800; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ice); }
.sheet-i.sheet-t .si-l { font-weight: 500; font-size: 0.76rem; text-transform: none; letter-spacing: 0.02em; color: rgba(212, 237, 255, 0.6); }
.sheet-i:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 6px; }
@media (min-width: 1024px) { .ch-sheet, .sheet-scrim, .rail-tap, .t-chip { display: none !important; } }


/* ============ FILMIC FINISH: grain + vignette + cursor glow ============ */
.grain {
  position: fixed; inset: -60px; z-index: 70; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-22px, 14px, 0); }
  50% { transform: translate3d(14px, -20px, 0); }
  75% { transform: translate3d(-10px, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.glow {
  position: fixed; z-index: 5; width: 560px; height: 560px; border-radius: 50%;
  pointer-events: none; left: -280px; top: -280px; opacity: 0;
  background: radial-gradient(circle, rgba(11, 151, 255, 0.14) 0%, rgba(11, 151, 255, 0) 62%);
  transition: opacity 600ms var(--ease);
}
@media (hover: none), (pointer: coarse) { .glow { display: none; } }

/* ============ OPENER ============ */
.opener { position: relative; min-height: 100svh; display: flex; align-items: flex-start; overflow: hidden; padding-top: clamp(96px, 15vh, 180px); padding-bottom: 120px; }
.opener-media { position: absolute; inset: 0; z-index: 0; }
.opener-media video, .opener-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 40s ease-in-out infinite; }
@keyframes hero-zoom { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.opener-deepen { position: absolute; inset: 0; z-index: 1; background: var(--navy); opacity: 0; pointer-events: none; }
.opener-media video { opacity: 0; transition: opacity 700ms var(--ease); }
.opener-media video.playing { opacity: 1; }
.opener::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 8, 53, 0.62) 0%, rgba(0, 8, 53, 0.28) 52%, rgba(0, 8, 53, 0.92) 100%); }
.opener .wrap { position: relative; z-index: 2; }
.kicker { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem; }
.opener h1 { color: #fff; font-size: clamp(1.6rem, 7.2vw, 3.9rem); max-width: 21ch; margin-bottom: 1.4rem; }
.opener h1 .w { display: inline-block; opacity: 0; transform: translateY(0.55em); animation: rise 700ms var(--ease) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.opener .sub { color: var(--ice); font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 52ch; line-height: 1.55; }
.cue { position: absolute; left: 50%; bottom: 34px; z-index: 2; width: 2px; height: 56px; overflow: hidden; }
.cue::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--blue); transform: translateY(-100%); animation: cue-drop 1.8s var(--ease) infinite; }
@keyframes cue-drop { 55% { transform: translateY(0); } 100% { transform: translateY(102%); } }

/* ============ CHAPTERS ============ */
.chapter { position: relative; }
.ch-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; }
.ch-sticky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-sticky img.alt { opacity: var(--x, 0); }
.ch-sticky .scrim { position: absolute; inset: 0; background: rgba(0, 8, 53, 0.62); }
.ch-sticky .vig { position: absolute; inset: 0; box-shadow: inset 0 0 220px 60px rgba(0, 8, 53, 0.85); }
.ch-beats { position: relative; z-index: 2; margin-top: -100svh; }
.ch-head { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.marker { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.24em; color: var(--blue); text-transform: uppercase; margin-bottom: 1rem; }
.chapter h2 { color: #fff; font-size: clamp(1.75rem, 3.9vw, 3rem); max-width: 19ch; }
.beat { min-height: 88svh; display: flex; align-items: center; }
.beat-inner { max-width: 560px; }
.beat p.lead { color: var(--ice); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; text-wrap: balance; }
.beat .note { color: rgba(212, 237, 255, 0.75); font-weight: 500; font-size: 1rem; margin-top: 0.8rem; max-width: 46ch; }
.beat-card { background: rgba(10, 31, 77, 0.55); border: 1px solid rgba(11, 151, 255, 0.25); border-radius: 14px; padding: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 460px; margin-top: 1.6rem; }
.beat-card img { border-radius: 10px; }

/* seal ring drawn around the capture card, once */
.sealwrap { position: relative; }
.sealwrap svg.seal { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; }
.seal rect { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .seal rect { opacity: 0.9; transition: stroke-dashoffset 1400ms var(--ease) 400ms; stroke-dashoffset: 0; }

/* HUD micro-labels */
.hud { position: absolute; z-index: 3; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0; }
.hud.tl { top: 76px; left: calc(var(--pad) + 150px); }
.hud.br { bottom: 26px; right: var(--pad); }
@media (max-width: 1023.98px) { .hud.tl { left: var(--pad); } }
.hud.flick { animation: flicker 900ms steps(6) forwards; }
@keyframes flicker { 0% { opacity: 0; } 40% { opacity: 0.9; } 55% { opacity: 0.2; } 70% { opacity: 0.8; } 100% { opacity: 0.7; } }

/* ============ REVEAL SYSTEM (JS-gated so no-JS reads perfectly) ============ */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }
html.js .reveal-card { opacity: 0; transform: translateY(32px) rotate(-1deg); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js .reveal-card.in { opacity: 1; transform: translateY(0) rotate(0deg); }

/* ============ INTERLUDES (off-white) ============ */
.interlude { background: var(--off-white); color: var(--navy); text-align: center; padding: clamp(96px, 16vh, 190px) var(--pad); position: relative; z-index: 2; }
.interlude .big { font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.35; max-width: 26ch; margin: 0 auto; text-wrap: balance; }
.interlude .proof { margin-top: 1.6rem; font-weight: 800; font-size: 1rem; color: var(--blue-deep); letter-spacing: 0.02em; }

/* ============ LIVING HUB ============ */
.hub-beat { min-height: auto; padding: 6svh 0 14svh; display: block; }
.hub-frame { background: rgba(0, 8, 53, 0.72); border: 1px solid rgba(11, 151, 255, 0.22); border-radius: 16px; padding: clamp(16px, 2.5vw, 32px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 1040px; margin: 0 auto; }
.hub-svg { width: 100%; height: auto; display: block; }
.hub-svg .link { stroke: rgba(212, 237, 255, 0.2); stroke-width: 1.5; fill: none; transition: stroke 250ms var(--ease), opacity 250ms var(--ease); }
.hub-svg g.node { cursor: pointer; }
.hub-svg rect.card { fill: rgba(10, 31, 77, 0.6); stroke: rgba(212, 237, 255, 0.25); stroke-width: 1.5; transition: stroke 250ms var(--ease), fill 250ms var(--ease); }
.hub-svg g.icon { stroke: rgba(212, 237, 255, 0.75); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hub-svg g.node text { fill: var(--ice); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-svg g.node:hover rect.card, .hub-svg g.node:focus rect.card, .hub-svg g.node.lit rect.card { stroke: var(--blue); fill: rgba(12, 42, 102, 0.75); }
.hub-svg g.node:focus { outline: none; }
.hub-svg g.node:focus-visible rect.card { stroke: var(--blue); stroke-width: 3; }
.hub-svg .link.lit { stroke: var(--blue); }
.hub-svg.focus .link:not(.lit) { opacity: 0.25; }
.hub-svg circle.pulse { fill: var(--blue); opacity: 0.9; }
.hub-svg .hub-ring { fill: rgba(0, 8, 53, 0.4); stroke: var(--blue); stroke-width: 1.5; }
.hub-svg .hub-glow { animation: hub-breathe-glow 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hub-breathe-glow { 0% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.65; transform: scale(1); } }
.hub-svg text.hub-lbl { fill: var(--ice); font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.hub-svg .orbit { stroke: rgba(11, 151, 255, 0.6); stroke-width: 2; fill: none; animation: orbit-spin 60s linear infinite; transform-box: fill-box; transform-origin: 520px 230px; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.hub-svg g.hub-node:hover .hub-ring, .hub-svg g.hub-node:focus-visible .hub-ring { stroke-width: 3; }
/* every 8s the audit trail run brightens with a SEALED flicker */
.hub-svg #lk-o3 { animation: seal-line 8s linear infinite; }
@keyframes seal-line { 0%, 84% { stroke: rgba(212, 237, 255, 0.2); } 88%, 96% { stroke: var(--blue); } 100% { stroke: rgba(212, 237, 255, 0.2); } }
.hub-caption { margin-top: 1.2rem; text-align: center; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212, 237, 255, 0.6); }
.hub-caption-sub { margin-top: 0.5rem; text-align: center; font-weight: 500; font-size: 0.8rem; color: rgba(212, 237, 255, 0.45); }
.hub-tip { position: absolute; z-index: 10; max-width: 260px; background: var(--navy); border: 1px solid var(--blue); border-radius: 8px; color: var(--ice); font-size: 0.8rem; font-weight: 500; line-height: 1.45; padding: 0.55rem 0.75rem; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.hub-tip.on { opacity: 1; }

/* ============ MOBILE HUB: vertical flow schematic ============ */
.hub-svg-m { display: none; width: 100%; height: auto; }
@media (max-width: 1023.98px) {
  .hub-svg { display: none; }
  .hub-svg-m { display: block; }
  .hub-frame { padding: 14px 10px 10px; }
}
.hub-svg-m .link { stroke: rgba(212, 237, 255, 0.2); stroke-width: 1.5; fill: none; transition: stroke 250ms var(--ease), opacity 250ms var(--ease); }
.hub-svg-m.focus .link:not(.lit) { opacity: 0.25; }
.hub-svg-m .link.lit { stroke: var(--blue); }
.hub-svg-m g.node { cursor: pointer; }
.hub-svg-m rect.card { fill: rgba(10, 31, 77, 0.6); stroke: rgba(212, 237, 255, 0.25); stroke-width: 1.5; transition: stroke 250ms var(--ease), fill 250ms var(--ease); }
.hub-svg-m.focus g.node:not(.lit) rect.card { opacity: 0.25; }
.hub-svg-m g.icon { stroke: rgba(212, 237, 255, 0.75); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hub-svg-m g.node text { fill: var(--ice); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.hub-svg-m g.node.lit rect.card { stroke: var(--blue); fill: rgba(12, 42, 102, 0.75); }
.hub-svg-m g.node:focus { outline: none; }
.hub-svg-m g.node:focus-visible rect.card { stroke: var(--blue); stroke-width: 3; }
.hub-svg-m circle.pulse { fill: var(--blue); opacity: 0.9; }
.hub-svg-m .hub-ring { fill: rgba(0, 8, 53, 0.4); stroke: var(--blue); stroke-width: 1.5; }
.hub-svg-m .hub-glow { animation: hub-breathe-glow 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hub-svg-m text.hub-lbl { fill: var(--ice); font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.hub-svg-m .orbit { stroke: rgba(11, 151, 255, 0.6); stroke-width: 2; fill: none; animation: orbit-spin 60s linear infinite; transform-box: fill-box; transform-origin: 160px 440px; }
.hub-svg-m.focus circle.pulse { opacity: 0.25; }
.hub-svg-m #lk-mo3 { animation: seal-line 8s linear infinite; }

/* Touch tooltip: bottom-anchored glass card instead of a hover bubble. */
.hub-sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 76;
  background: rgba(0, 8, 53, 0.94); border: 1px solid var(--blue); border-radius: 14px;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  color: var(--ice); font-size: 0.86rem; font-weight: 500; line-height: 1.5;
  transform: translateY(calc(100% + 16px)); transition: transform 260ms var(--ease);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hub-sheet.on { transform: translateY(0); }
.hub-sheet .hs-t { display: block; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.3rem; }
@media (min-width: 1024px) { .hub-sheet { display: none !important; } }

/* ============ CONTRAST STRIP (chapter 04) ============ */
.contrast { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 2.2rem; max-width: 760px; }
@media (min-width: 700px) { .contrast { grid-template-columns: 1fr 1fr; } }
.contrast > div { border-radius: 12px; padding: 1.3rem 1.5rem; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; }
.contrast .then { background: rgba(10, 31, 77, 0.5); color: var(--muted); border: 1px solid rgba(74, 84, 112, 0.5); }
.contrast .then s { text-decoration: none; position: relative; display: inline-block; }
.contrast .then s::after { content: ""; position: absolute; left: 0; top: 52%; height: 2px; width: 100%; background: var(--muted); transform: scaleX(0); transform-origin: left; }
.in .contrast .then s::after { transition: transform 900ms var(--ease) 500ms; transform: scaleX(1); }
.contrast .now { background: rgba(11, 151, 255, 0.12); color: var(--blue); border: 1px solid rgba(11, 151, 255, 0.55); }

/* ============ CHAPTER 05: THE STANDARD (off-white) ============ */
.standard { background: var(--off-white); color: var(--navy); position: relative; z-index: 2; padding-top: clamp(80px, 12vh, 150px); padding-bottom: clamp(80px, 12vh, 150px); }
.standard .marker { color: var(--blue-deep); }
.standard h2 { color: var(--navy); }
.standard .accent { color: var(--blue-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 clamp(56px, 8vh, 96px); }
.chip { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: #fff; border: 1.5px solid rgba(0, 8, 53, 0.14); padding: 0.55rem 1.1rem; border-radius: 999px; }

/* FAQ */
/* Low-code simplicity block: light-section cards between the chips and the FAQ */
.simple { margin-bottom: clamp(64px, 9vh, 104px); }
.simple h2 { color: var(--navy); font-size: clamp(1.55rem, 3.4vw, 2.5rem); max-width: 20ch; }
.simple .accent { color: var(--blue-deep); }
.simple-lead { margin-top: 1rem; font-weight: 800; font-size: clamp(1.02rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--navy); max-width: 44ch; text-wrap: balance; }
.simple-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(32px, 4vh, 48px); }
@media (min-width: 880px) { .simple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scard { background: #fff; border: 1.5px solid rgba(0, 8, 53, 0.12); border-radius: 14px; padding: clamp(20px, 2.4vw, 28px); }
.scard h3 { color: var(--blue-deep); font-size: 0.82rem; letter-spacing: 0.14em; line-height: 1.4; margin-bottom: 0.65rem; }
.scard p { color: var(--muted); font-weight: 500; font-size: 0.95rem; line-height: 1.6; max-width: 46ch; }
.scard-wide { grid-column: 1 / -1; }
.scard-wide p { max-width: 84ch; }

.faq h3.faq-title { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 1rem; color: var(--navy); }
.faq-item { border-bottom: 1px solid rgba(0, 8, 53, 0.12); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: clamp(0.98rem, 1.5vw, 1.1rem); color: var(--navy); text-transform: uppercase; padding: 1.15rem 2.6rem 1.15rem 0.1rem; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); color: var(--blue-deep); font-weight: 900; font-size: 1.4rem; transition: transform 200ms var(--ease); }
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq-q:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 350ms var(--ease); }
.faq-a p { color: var(--muted); padding: 0 0.1rem 1.25rem; max-width: 68ch; }
.faq-cta { margin-top: 2.6rem; }

/* ============ FINAL FRAME ============ */
.final { position: relative; min-height: 92svh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; z-index: 2; }
.final-media { position: absolute; inset: 0; }
.final-media img { width: 100%; height: 100%; object-fit: cover; }
.final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 8, 53, 0.5), rgba(0, 8, 53, 0.78)); }
.final .wrap { position: relative; z-index: 2; }
.final h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.3rem); max-width: 22ch; margin: 0 auto 2.2rem; }

/* ============ FOOTER ============ */
footer { background: var(--navy); color: var(--ice); text-align: center; padding: 46px var(--pad); position: relative; z-index: 2; }
.top .brand picture, .f-brand picture { display: inline-block; line-height: 0; }
.f-brand { margin-bottom: 1rem; }
.f-brand img { height: 40px; width: auto; display: inline-block; }
.f-certs { font-weight: 500; font-size: 0.85rem; opacity: 0.8; }

/* ============ REDUCED MOTION: the story reads perfectly still ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .glow, .cue, .opener-media video, .ticker { display: none; }
  .opener-media img, .opener-media video { animation: none; }
  .opener-deepen { display: none; }
  html.js .it-line { opacity: 1; transform: none; }
  .sealchip { opacity: 0.75; animation: none; }
  .cardglow { transform: none !important; }
  .deeper-a { transition: none; }
  .opener h1 .w { animation: none; opacity: 1; transform: none; }
  html.js .reveal, html.js .reveal-card { opacity: 1; transform: none; transition: none; }
  .hud { opacity: 0.7; }
  .hud.flick { animation: none; }
  .seal rect { opacity: 0.9; stroke-dashoffset: 0; transition: none; }
  .contrast .then s::after { transform: scaleX(1); transition: none; }
  .hub-svg circle.pulse { display: none; }
  .hub-svg .orbit, .hub-svg .hub-glow, .hub-svg #lk-o3 { animation: none; }
  .t-fill { transform: scaleY(1); }
  .t-tip { display: none; }
  .t-node.lit.fresh .dot { animation: none; }
  .ch-sticky { position: relative; height: 52svh; }
  .ch-sticky img.alt { display: none; }
  .ch-beats { margin-top: 0; background: var(--navy); }
  .ch-head, .beat { min-height: 0; padding: 7svh 0; }
  .top { transition: none; }
  .btn, .faq-a, .faq-q::after { transition: none; }
  .btn:hover { transform: none; }
}


/* ============ PASS 2: DEPTH + IMMERSION ============ */

/* GO DEEPER expandable capability panels */
.deeper-beat { min-height: 0; padding-bottom: 10svh; }
.deeper-h { font-size: 1rem; }
.deeper-q {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); padding: 0.6rem 2rem 0.6rem 0; position: relative; text-align: left;
}
.deeper-q::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--blue); opacity: 0.6; }
.deeper-q::after { content: "+"; position: absolute; right: 0.2rem; top: 46%; transform: translateY(-50%); font-weight: 900; font-size: 1.15rem; transition: transform 200ms var(--ease); }
.deeper-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.deeper-q:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.deeper-a { overflow: hidden; max-height: 0; transition: max-height 500ms var(--ease); max-width: 560px; }
.deeper-a p { color: rgba(212, 237, 255, 0.85); font-size: 0.97rem; line-height: 1.65; padding: 1rem 0 0.4rem; }

/* WHO THIS IS FOR strip */
.who { background: var(--dark-blue); position: relative; z-index: 2; padding-top: clamp(72px, 11vh, 130px); padding-bottom: clamp(72px, 11vh, 130px); }
.who h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: 2.2rem; max-width: 24ch; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 820px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.who-card { background: rgba(0, 8, 53, 0.55); border: 1px solid rgba(11, 151, 255, 0.22); border-radius: 12px; padding: 1.5rem 1.6rem; }
.who-card h3 { color: var(--blue); font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 0.8rem; }
.who-card .pain { color: rgba(212, 237, 255, 0.6); font-weight: 500; font-size: 0.95rem; margin-bottom: 0.6rem; }
.who-card .gain { color: var(--ice); font-weight: 800; font-size: 0.98rem; }

/* Proof subline: context, not new numbers */
.proof-sub { margin-top: 0.5rem; color: var(--muted); font-weight: 500; font-size: 0.85rem; }

/* Scene-setting intertitles: full cinematic frames */
.intertitle { min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--navy); position: relative; z-index: 3; overflow: hidden; padding: 0 var(--pad); }
.intertitle picture, .intertitle .it-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intertitle .it-img { object-fit: cover; animation: it-drift 16s ease-in-out infinite alternate; }
@keyframes it-drift { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.it-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 62%, rgba(0, 8, 53, 0.72) 0%, rgba(0, 8, 53, 0.3) 62%), linear-gradient(rgba(0, 8, 53, 0.52), rgba(0, 8, 53, 0.52)); }
.it-line { position: relative; z-index: 1; color: var(--ice); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-wrap: balance; }
html.js .it-line { opacity: 0; transform: translateY(18px); }

/* Living record ticker */
.ticker { position: fixed; left: 56px; bottom: 20px; max-width: 150px; z-index: 45; display: none; pointer-events: none; }
@media (min-width: 1024px) { .ticker { display: block; } }
.ticker span { display: block; font-weight: 500; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); opacity: 0; margin-top: 0.3rem; }
.ticker span.on { animation: tick-in 800ms steps(5) forwards; }
@keyframes tick-in { 0% { opacity: 0; } 35% { opacity: 0.85; } 55% { opacity: 0.25; } 100% { opacity: 0.7; } }
.ticker.light span { color: var(--muted); }

/* Detail-card glow layer for depth parallax */
.beat-card { position: relative; }
.cardglow { position: absolute; inset: -16px; z-index: -1; border-radius: 20px; background: radial-gradient(ellipse at 50% 60%, rgba(11, 151, 255, 0.28) 0%, rgba(11, 151, 255, 0) 70%); filter: blur(2px); will-change: transform; }

/* Living hub v2 */
.hub-svg.focus circle.pulse { opacity: 0.25; }
.sealchip rect { fill: rgba(0, 8, 53, 0.85); stroke: var(--blue); stroke-width: 1.2; }
.sealchip text { fill: var(--blue); font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; }
.sealchip { opacity: 0; animation: seal-chip 8s linear infinite; }
@keyframes seal-chip { 0%, 85% { opacity: 0; } 87% { opacity: 0.9; } 89% { opacity: 0.2; } 91% { opacity: 0.85; } 96% { opacity: 0.7; } 100% { opacity: 0; } }

/* Glossary: TERMS, PLAINLY. */
.glossary { background: var(--navy); position: relative; z-index: 2; padding-top: clamp(72px, 11vh, 130px); padding-bottom: clamp(72px, 11vh, 130px); border-top: 1px solid rgba(11, 151, 255, 0.14); }
.glossary h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.gloss-q {
  background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: left;
  padding: 0 3rem 0.9rem 0; position: relative; display: inline-block;
}
.gloss-q::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--blue); opacity: 0.6; }
.gloss-q::after { content: "+"; position: absolute; right: 0.3rem; top: 42%; transform: translateY(-50%); color: var(--blue); font-weight: 900; font-size: 0.75em; transition: transform 200ms var(--ease); }
.gloss-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.gloss-q:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
/* Height-collapse keeps every definition in the DOM and the source at all times. */
html.js .gloss-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 500ms var(--ease), opacity 400ms var(--ease); }
html.js .gloss-panel.open { opacity: 1; }
.gloss-panel .term-grid { padding-top: 2.4rem; }
.term-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); }
@media (min-width: 820px) { .term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.term h3 { color: var(--blue); font-size: 0.82rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
.term p { color: rgba(212, 237, 255, 0.8); font-size: 0.95rem; line-height: 1.6; max-width: 56ch; }

/* Chapter 04 tension: slower reveals, denser grain, until the dawn crossfade */
body.tension .grain { opacity: 0.07; }
body.tension #ch-audit .reveal { transition-duration: 900ms; }


/* Reduced-motion overrides for pass-2 features (kept last so they always win) */
@media (prefers-reduced-motion: reduce) {
  .ticker { display: none; }
  .opener-media img, .opener-media video { animation: none; }
  .opener-deepen { display: none; }
  html.js .it-line { opacity: 1; transform: none; }
  .sealchip { opacity: 0.75; animation: none; }
  .cardglow { transform: none !important; }
  .deeper-a { transition: none; }
  body.tension .grain { opacity: 0; }
  .intertitle .it-img { animation: none; }
  html.js .gloss-panel { transition: none; }
}

/* Mobile record ticker: one chip per chapter, then it lets go. */
@media (max-width: 1023.98px) {
  .ticker { display: block; left: 36px; right: 24px; bottom: 16px; max-width: none; }
  .ticker span { display: inline-block; font-size: 0.6rem; letter-spacing: 0.12em;
    background: rgba(0, 8, 53, 0.82); border: 1px solid rgba(11, 151, 255, 0.35);
    border-radius: 999px; padding: 0.35rem 0.7rem; margin-top: 0; }
  .ticker.light span { background: rgba(246, 244, 252, 0.92); border-color: rgba(0, 105, 198, 0.3); }
  .ticker span.off { opacity: 0; transition: opacity 500ms var(--ease); }
}
/* ============ MOBILE: TYPOGRAPHY, RHYTHM, TOUCH ============ */
@media (max-width: 1023.98px) {
  /* Body copy floor: 16px everywhere, line-height 1.45 to 1.55. */
  .scard p, .term p, .deeper-a p, .beat .note, .faq-a p, .hub-sheet { font-size: 1rem; line-height: 1.55; }
  .simple-lead { line-height: 1.45; }

  /* Detail cards: no rotate, no parallax lift. Fade and rise only. */
  html.js .reveal-card { transform: translateY(28px); }
  html.js .reveal-card.in { transform: translateY(0); }
  .cardglow { display: none; }
  .beat-card { max-width: 100%; margin-left: auto; margin-right: auto; }

  /* Rhythm: mobile gets more air between blocks, not less. */
  .ch-head, .beat { padding: 40px 0; }
  .beat + .beat { margin-top: 24px; }
  .deeper-beat { padding-bottom: 72px; }
  .interlude { padding-top: 96px; padding-bottom: 96px; }
  .intertitle + section, .interlude + section { margin-top: 0; }
  .ch-beats > .wrap > .ch-head { padding-top: 96px; }
  .hub-beat { padding: 64px 0 72px; }
  .who, .glossary, .standard { padding-top: 72px; padding-bottom: 72px; }
  .simple { margin-bottom: 72px; }
  .chips { margin-bottom: 64px; }
  .faq-cta { margin-top: 40px; }

  /* Touch targets: 44px minimum on every control, shrunk header included. */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .top .btn { padding: 0.6rem 1.15rem; }
  .top.shrunk .btn { min-height: 44px; }
  .btn { padding: 0.95rem 1.5rem; }
  .faq-q { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .deeper-q, .gloss-q { min-height: 48px; padding-right: 2.4rem; }
  .sheet-i, .rail-tap { touch-action: manipulation; }

  /* Sticky header shrinks once the story is running. */
  .top { transition: padding 260ms var(--ease), background-color 260ms var(--ease); }
  .top.shrunk { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .top.shrunk .brand img { height: 20px; }
  .top.shrunk .btn { padding: 0.6rem 0.95rem; font-size: 0.72rem; }

  /* Intertitle type: never three lines, and the crop keeps its subject framed. */
  .it-line { font-size: clamp(1.05rem, 5.2vw, 1.35rem); letter-spacing: 0.05em; }
  .intertitle .it-img { object-position: 50% 42%; }
  #it-1 .it-img { object-position: 52% 46%; }
  #it-2 .it-img { object-position: 50% 38%; }
  #it-3 .it-img { object-position: 48% 44%; }
  .ch-sticky img { object-position: 50% 40%; }
}

/* GO DEEPER gets the same plus/minus affordance as the FAQ. */
.deeper-q, .gloss-q { position: relative; }
.deeper-q::after, .gloss-q::after { content: "+"; position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%); color: var(--blue); font-weight: 900; font-size: 1.3rem;
  transition: transform 200ms var(--ease); }
.deeper-q[aria-expanded="true"]::after, .gloss-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }

/* Hero poster fallback: if the video never plays, the still drifts on its own. */
.opener-media .poster { animation: poster-drift 22s ease-in-out infinite alternate; }
.opener-media video.playing ~ .poster, .opener-media .poster.still { animation: none; }
@keyframes poster-drift { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }


/* =====================================================================
   MOBILE OVERRIDES, LAST IN THE CASCADE.
   These must beat the base rules they refine, so they live at the end.
   ===================================================================== */
@media (max-width: 1023.98px) {
  /* Content clears the 32px rail zone: 36px left, 24px right. */
  .wrap { padding-left: 36px; padding-right: 24px; }
  .intertitle { padding-left: 36px; padding-right: 24px; }
  .interlude { padding-left: 36px; padding-right: 24px; }
  .top { padding-left: 36px; padding-right: 24px; }
  footer { padding-left: 36px; padding-right: 24px; }
  .hud.tl { left: 36px; }
  .hud.br { right: 24px; }

  /* Body copy floor: 16px, line-height 1.45 to 1.55. */
  .scard p, .term p, .deeper-a p, .beat .note, .faq-a p { font-size: 1rem; line-height: 1.55; }
  .who-card .pain, .who-card .gain { font-size: 1rem; line-height: 1.5; }
  .simple-lead { line-height: 1.45; }

  /* The rail dots are presentational on mobile: the rail tap and the sheet
     carry navigation, so 10px dots never have to serve as touch targets. */
  .t-node { pointer-events: none; }
  .top .brand { display: inline-flex; align-items: center; min-height: 44px; }
}