/* ============================================================
   SKYLANCE — Independent strategy, upstream of execution.
   White editorial base · dark bands · lance-gradient accents.
   Accent type: Instrument Serif italic, solid brand blue.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f5f6f9;
  --dark: #07080c;
  --ink: #0a0c16;
  --dim: #545967;
  --faint: #989eac;
  --ghost: #c9cdd9;
  --cyan: #0acbff;
  --blue: #2745ff;
  /* context-aware accent: deep on light surfaces (default), brighter on dark (overridden below).
     --blue-lt is kept as an alias so all existing usages become context-aware automatically. */
  --accent: #2e4be8;
  --blue-lt: var(--accent);
  --violet: #8a30e8;
  --magenta: #ec12b4;
  --grad: linear-gradient(100deg, #0acbff 0%, #2745ff 38%, #8a30e8 70%, #ec12b4 100%);
  --line: rgba(10, 12, 22, 0.09);
  --line-strong: rgba(10, 12, 22, 0.2);
  --wline: rgba(255, 255, 255, 0.12);
  --wline-strong: rgba(255, 255, 255, 0.26);
  --wdim: rgba(244, 245, 250, 0.66);
  --wfaint: rgba(244, 245, 250, 0.42);
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;
  --gutter: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --em-color: var(--blue);
}

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

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--blue); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
img { max-width: 100%; }

/* ---------- utilities ---------- */

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.label {
  position: relative;
  isolation: isolate;
  padding: 0 2px 1px;
  border-radius: 2px;
}

.label::before {
  content: "";
  width: 4px;
  height: 13px;
  background: var(--grad);
  flex: none;
}

/* highlighter sweep behind the label text — wipes in left→right with the typing,
   kept low-alpha so the mono text stays fully legible on light and dark bands */
.label {
  /* default gradient (variant A); JS rotates the curated set via .lbl-g* classes */
  --lbl-g1: rgba(39, 69, 255, 0.20);
  --lbl-g2: rgba(111, 140, 255, 0.08);
}
.label.lbl-gB { --lbl-g1: rgba(74, 82, 224, 0.20);  --lbl-g2: rgba(143, 140, 255, 0.08); }
.label.lbl-gC { --lbl-g1: rgba(39, 102, 216, 0.20); --lbl-g2: rgba(95, 208, 255, 0.10); }
.label.lbl-gD { --lbl-g1: rgba(31, 111, 255, 0.20); --lbl-g2: rgba(122, 160, 255, 0.08); }

.label::after {
  content: "";
  position: absolute;
  inset: 0 -2px;
  z-index: -1;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lbl-g1), var(--lbl-g2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.label.is-lit::after { transform: scaleX(1); }

.section { position: relative; padding: clamp(90px, 11vw, 170px) 0; }

/* ---- 01 -> 02 pixel-dissolve transition ---- */
.pixel-wipe { display: none; }
html.js .pixel-wipe {
  display: block;
  position: relative;
  height: 100vh;
  background: var(--dark);
  overflow: hidden;
}
.pixel-wipe-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* grain over the wipe matches the grain on section 01 so the dark tones meet seamlessly
   (screen blend leaves the white dissolve cells untouched) */
.pixel-wipe .grain { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .pixel-wipe { display: none; }
}

.sechead {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5.5vw, 72px);
}

.sec-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.display {
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 480;
  font-size: 1.02em;
  letter-spacing: -0.01em;
  color: var(--em-color);
}

.h-xl { font-size: clamp(36px, 5.2vw, 68px); }
.h-lg { font-size: clamp(36px, 5.4vw, 84px); }
.h-md { font-size: clamp(28px, 3.8vw, 56px); }

.giant {
  font-weight: 800;
  font-size: min(16.5vw, 270px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}

.lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.62;
  color: var(--dim);
  max-width: 58ch;
  letter-spacing: -0.005em;
}

.lede strong { color: var(--ink); font-weight: 600; }

.gm { color: var(--blue-lt); font-weight: 600; }

/* ---------- preloader (honest counter → single-timeline handoff) ---------- */
/* Shown only when JS is present; the no-JS / dead-CDN safety net in index.html
   drops the .js class after 1.5s, which hides this via the :not(.js) rule below.
   Background matches the dark hero so the wipe-up reveals an identical field —
   the hero appears to rise out of the loader rather than cross-fade in. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent; /* the column strips provide the dark fill (curtain reveal) */
  color: #fff;
  display: flex;
  align-items: stretch;
  padding: 0 var(--gutter);
  will-change: transform;
}
html:not(.js) .loader { display: none; }
.loader.is-done { pointer-events: none; }

/* column-curtain reveal: vertical strips lift away on exit (injected by JS) */
.loader-cols { position: absolute; inset: 0; z-index: 0; display: flex; }
.loader-cols i { position: relative; flex: 1 1 0; background: var(--dark); will-change: transform; }
/* 2px brand-gradient line rides the trailing lip of each strip as it lifts */
.loader-cols i::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad);
  box-shadow: 0 0 24px 6px rgba(138, 48, 232, 0.65), 0 0 8px 2px rgba(7, 203, 255, 0.4);
}
.loader-frame { position: relative; z-index: 1; }

/* editorial counter: logo + status top, giant tabular % center, dash bar bottom */
.loader-frame {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 6vh, 70px) 0;
}

.loader-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.loader-logo { height: clamp(22px, 2.4vw, 30px); width: auto; display: block; }
.loader-status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  transition: color 0.3s;
}

.loader-center {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}
.loader-num {
  display: flex;
  align-items: flex-start;
  will-change: transform, opacity;
}
.loader-count {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(110px, 23vw, 330px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.loader-pct-sign {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 46px);
  color: var(--wdim);
  margin: 0.5em 0 0 0.12em;
}
.loader-bottom { width: 100%; }

/* angled-dash track; the gradient fill inks the dashes left→right via clip */
.loader-bar {
  position: relative;
  height: 16px;
  width: 100%;
  overflow: hidden;
  background-image: repeating-linear-gradient(-60deg, var(--wline-strong) 0 1.5px, transparent 1.5px 7px);
}
.loader-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--grad);
  clip-path: inset(0 100% 0 0);
  -webkit-mask-image: repeating-linear-gradient(-60deg, #000 0 1.5px, transparent 1.5px 7px);
          mask-image: repeating-linear-gradient(-60deg, #000 0 1.5px, transparent 1.5px 7px);
}

/* reveal initial states (JS only) */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); }
html.js .hero-eyebrow,
html.js .hero-sub,
html.js .hero-ctas,
html.js .hero-chip,
html.js .hero-meta { opacity: 0; transform: translateY(16px); }

/* ---------- typewriter cursor ---------- */

.type-cursor {
  display: inline-block;
  width: 0.5em;
  min-width: 7px;
  height: 0.1em;
  min-height: 2px;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: baseline;
  transform: translateY(0.02em);
  box-shadow: 0 0 6px currentColor;
}

[data-glow] .type-cursor {
  box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(10, 203, 255, 0.5);
}

/* subtle pulse on revealed blocks */
.pulse-reveal,
[data-pulse] {
  transition: transform 0.2s ease;
}
.pulse-reveal {
  animation: text-pulse 2.2s ease-in-out 1.2s 2;
}
@keyframes text-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.008); }
}

[data-pulse]:hover {
  transform: scale(1.01);
}
  animation: cursor-blink 0.85s steps(1, end) infinite;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* ---------- text roll-over ---------- */

.roll { display: inline-block; overflow: hidden; vertical-align: bottom; }

.roll-inner {
  position: relative;
  display: inline-block;
  transition: transform 0.45s var(--ease);
}

.roll-inner::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  white-space: nowrap;
}

.btn:hover .roll-inner,
.nav-link:hover .roll-inner { transform: translateY(-100%); }

/* footer scramble links: monospace keeps glyph widths stable while shuffling */
.footer-roll { font-variant-numeric: tabular-nums; }
.footer-roll:hover { color: #fff; }

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 18px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
  white-space: nowrap;
  will-change: transform;
}

/* rollover fill removed — hover now morphs the thatch pattern instead */
.btn .btn-fill { display: none; }

.btn > span:not(.btn-fill):not(.btn-uline):not(.btn-thatch), .btn svg { position: relative; z-index: 1; }

.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--wghost { border-color: var(--wline-strong); color: #fff; }

/* arrow motion is handled by the injected .btn-ico (see kyma button block at end) */

/* ---------- nav (always dark) ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: #fff;
  transition: transform 0.5s var(--ease);
}

.nav.is-hidden { transform: translateY(-100%); }

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 12, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wline);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.nav.is-scrolled::before { opacity: 1; }

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.brand { display: inline-flex; align-items: center; z-index: 2; }
.brand-img { height: 30px; width: auto; display: block; }
.footer .brand-img { height: 36px; }

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdim);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { padding: 12px 22px; background: #fff; color: var(--ink); border-color: #fff; }

.nav-burger { display: none; z-index: 2; width: 44px; height: 44px; position: relative; }

.nav-burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #fff;
  transition: transform 0.4s var(--ease);
}

.nav-burger span:nth-child(1) { top: 17px; }
.nav-burger span:nth-child(2) { top: 26px; }

body.menu-open .nav-burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
}

.menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--grad);
}

.menu-link {
  display: block;
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.25;
  padding: 10px 0;
  border-bottom: 1px solid var(--wline);
}

.menu-link span.idx {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue-lt);
  vertical-align: super;
  margin-right: 14px;
  letter-spacing: 0.05em;
}

.menu-foot {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- hero (dark, aurora) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  --em-color: var(--blue-lt);
}

#field { position: absolute; inset: 0; z-index: 0; }
#field canvas { display: block; width: 100%; height: 100%; }

/* ---- WebGL flow-field hero background (domain-warped, oscillating) ---- */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(1.04);
  /* static warm lava bloom — shown under the canvas, and the sole layer when
     WebGL is unavailable or reduced-motion disables the shader */
  background:
    radial-gradient(70% 32% at 52% 104%, rgba(255, 222, 170, 0.55), transparent 60%),
    radial-gradient(130% 78% at 50% 116%, rgba(255, 120, 12, 0.55), rgba(200, 30, 8, 0.30) 34%, transparent 62%),
    radial-gradient(150% 60% at 74% 92%, rgba(150, 22, 6, 0.30), transparent 60%),
    radial-gradient(150% 60% at 22% 96%, rgba(150, 22, 6, 0.26), transparent 60%),
    #060406;
}

.hero-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* scrim: darkens headline area + very bottom meta, lets the strips glow breathe through the middle/lower center */
  background:
    radial-gradient(118% 92% at 12% 18%, rgba(7, 8, 12, 0.96) 0%, rgba(7, 8, 12, 0.48) 36%, rgba(7, 8, 12, 0.06) 62%, transparent 82%),
    radial-gradient(54% 48% at 82% 74%, rgba(7, 8, 12, 0.58) 0%, rgba(7, 8, 12, 0.16) 52%, transparent 82%),
    linear-gradient(to top, rgba(7, 8, 12, 0.52) 0%, rgba(7, 8, 12, 0) 28%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(104px, 12vh, 156px);
  padding-bottom: clamp(44px, 6vh, 72px);
}

.hero-eyebrow { margin-bottom: clamp(24px, 3.5vh, 44px); color: var(--wdim); }

/* hero H1 must be the largest type on the page — was inheriting .h-xl (68px),
   which sat *below* section .h-lg (84px). Dedicated commanding size, shared by
   every hero across the site (index + careers/faq/work/about/contact/insights). */
.hero-title,
.contact-headline,
.article-title {
  font-size: clamp(46px, 6.6vw, 100px);
  line-height: 1.0;
}

.hero-title {
  max-width: 15ch;
  margin-bottom: clamp(32px, 4.5vh, 56px);
  color: #fff;
  text-wrap: balance;
}

.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-chip {
  max-width: 300px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdim);
  border-left: 3px solid;
  border-image: var(--grad) 1;
  padding-left: 16px;
}

.hero-right { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }

.hero-sub { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.6; color: var(--wdim); }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-meta { position: relative; z-index: 2; border-top: 1px solid var(--wline); }

.hero-meta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}

.hero-meta-inner .sig { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-meta-inner .sig b { color: #fff; font-weight: 600; }

.clocks { display: flex; gap: 22px; align-items: center; flex: none; }
.clocks b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

.scroll-hint { display: inline-flex; align-items: center; gap: 10px; flex: none; }

.scroll-hint i {
  display: block;
  width: 1px;
  height: 26px;
  background: var(--wline-strong);
  position: relative;
  overflow: hidden;
}

.scroll-hint i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--grad);
  animation: scrollPulse 2.2s var(--ease) infinite;
}

@keyframes scrollPulse {
  0% { top: -100%; }
  55% { top: 100%; }
  100% { top: 100%; }
}

/* ---------- mono marquee ---------- */

.marquee {
  overflow: hidden;
  padding: 16px 0;
  background-color: #1c1e24;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent 7px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 7px
    );
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-seq { display: flex; align-items: center; flex: none; }

.marquee-seq span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  padding: 0 26px;
  white-space: nowrap;
}

.marquee-seq i { width: 5px; height: 5px; background: rgba(255,255,255,0.35); transform: rotate(45deg); flex: none; }

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

/* ---------- giant outline text marquee dividers ---------- */

.txt-marquee { overflow: hidden; padding: clamp(36px, 5vw, 72px) 0; }

.txt-marquee .txt-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }

.txt-marquee .txt-seq { display: flex; align-items: center; flex: none; }

.txt-marquee span {
  font-size: clamp(48px, 8.5vw, 132px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
  padding: 0 0.35em;
  /* bg-colored fill + paint-order:stroke hides the unmerged inner contours
     of the variable font that -webkit-text-stroke would otherwise trace */
  color: var(--bg);
  -webkit-text-stroke: 3px var(--ghost);
  paint-order: stroke fill;
}

.txt-marquee i {
  width: 14px;
  height: 14px;
  background: var(--grad);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- 01 problem: pinned reveal sequence ---------- */

.seq-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--dark);
  overflow: hidden;
}

.seq-label {
  position: absolute;
  top: clamp(84px, 11vh, 120px);
  left: var(--gutter);
  color: var(--wdim);
  z-index: 3;
}

.seq-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(110px, 14vh, 160px) 0 clamp(36px, 6vh, 72px);
}

.seq-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 22px);
}

.seq-row { overflow: hidden; width: 100%; will-change: transform, opacity; }

.seq-track {
  display: flex;
  width: max-content;
  animation: marquee var(--dur, 46s) linear infinite;
}

.seq-row--rev .seq-track { animation-direction: reverse; }

.seq-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding-right: clamp(12px, 1.4vw, 20px);
}

.seq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wdim);
  background: linear-gradient(90deg, rgba(39, 69, 255, 0.13), rgba(111, 140, 255, 0.04));
  border: 1px solid rgba(111, 140, 255, 0.14);
  padding: 4px 8px;
}

/* blue × mark — kyma-style chip glyph */
.seq-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 1.2 L8.8 8.8 M8.8 1.2 L1.2 8.8' stroke='%235aa2ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.seq-title,
.seq-resolve {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(92%, 16ch);
  text-align: center;
  z-index: 2;
}

.seq-title { color: #fff; }
.seq-resolve { color: #fff; }

.seq-path {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  width: min(86%, 1100px);
  height: 2px;
  background: var(--grad);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

html.js .seq-resolve { opacity: 0; }

.rchar {
  display: inline-block;
  text-align: center;
  opacity: 0;
  transition: text-shadow 0.35s ease;
}
.rchar--lit { text-shadow: 0 0 14px rgba(74, 108, 247, 0.55); }

/* giant word decode — chars inherit the parent's clipped gradient */
.gchar { display: inline-block; text-align: center; opacity: 0; }
html.js .seq-row { opacity: 0; }
html.js .seq--static .seq-row { opacity: 1; }

/* static fallback (reduced motion / no pin) */
.seq--static .seq-stage {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: clamp(90px, 12vh, 150px) var(--gutter);
}

.seq--static .seq-zoom { display: none; }

.seq--static .seq-title,
.seq--static .seq-resolve {
  position: static;
  transform: none;
}

.seq--static .seq-resolve { color: #fff; opacity: 1 !important; }

/* ---------- problem (fill text) ---------- */

.fill-text {
  font-weight: 650;
  font-size: clamp(30px, 4.8vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 21ch;
}

.problem-body {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.problem-body .lede { max-width: 52ch; }

/* ---------- called rows ---------- */

.rows { border-top: 1px solid var(--line); }

.row-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.5s var(--ease);
}

.row-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--grad);
  transition: width 0.6s var(--ease);
}

.row-item:hover::before { width: 100%; }
.row-item:hover { padding-left: 12px; }

.row-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--blue);
}

.row-text {
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 35px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.row-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.row-tag::before { content: "# "; }

.rows-note {
  margin-top: clamp(36px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 96px);
}
.note-col p { color: var(--dim); font-size: 15.5px; line-height: 1.65; max-width: 44ch; margin: 0; }
.note-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.note-col:last-child .note-label { color: var(--faint); }
@media (max-width: 720px) {
  .rows-note { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- what we do / sticky split ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.split-sticky { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; }

.pull-line {
  font-size: clamp(24px, 2.7vw, 40px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  border-left: 4px solid;
  border-image: var(--grad) 1;
  padding-left: 28px;
  margin: 40px 0;
}

.split-body p + p { margin-top: 24px; }

/* ---------- 03 spec-sheet (What we do): ledger rows + scan-line ---------- */
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.spec-lead { position: sticky; top: 120px; }
.spec-lead h2 { max-width: 15ch; }

.spec-rows { display: flex; flex-direction: column; }

.spec-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 140px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
}
.spec-rule {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
html:not(.js) .spec-rule { transform: scaleX(1); }
.spec-key {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 0.55em;
  white-space: nowrap;
  color: var(--dim);
}
.spec-val {
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 450;
  max-width: 42ch;
  color: var(--ink);
}
.spec-row--deliver .spec-rule { height: 2px; background: var(--grad); }
.spec-row--deliver .spec-val { font-weight: 600; transform-origin: left center; will-change: transform; }

.spec-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(24px, 2.8vw, 36px);
}
.spec-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .spec-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .spec-lead { position: static; }
  .spec-lead h2 { max-width: 100%; }
  .spec-row { grid-template-columns: 1fr; gap: 10px; padding: clamp(18px, 5vw, 26px) 0; }
  .spec-foot { justify-content: flex-start; }
}

/* ---------- What we do: title + three big modes + spec strip ---------- */
.wd-title { margin-bottom: clamp(16px, 1.8vw, 24px); }
.wd-intro {
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 48ch;
  margin-bottom: clamp(40px, 5vw, 70px);
}
/* ---- cyclic engine: faculties circulate the organization ---- */
.wd-con {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.wd-con-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.wd-con-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ring: a faint base + a flowing current that laps clockwise, forever */
.wd-ring-base { stroke: var(--line-strong); stroke-width: 1; }
.wd-ring-flow {
  stroke: url(#wdFlow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 22;
  opacity: 0.55;
  animation: wdRingFlow 9s linear infinite;
  transition: opacity 0.4s var(--ease);
}
@keyframes wdRingFlow { to { stroke-dashoffset: -500; } }
.wd-con-stage.is-engaged .wd-ring-flow { opacity: 0.9; }
.wd-core-glow { opacity: 0.4; animation: wdGlow 6s ease-in-out infinite; }
@keyframes wdGlow { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.58; } }
.wd-comet { filter: drop-shadow(0 0 7px rgba(39, 69, 255, 0.85)); }
.wd-spokes line { stroke: var(--line-strong); stroke-width: 1; opacity: 0; }

.wd-node {
  position: absolute;
  left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  margin: 0; padding: 0;
  border: 0; background: none;
  font: inherit; color: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.wd-glyph {
  width: clamp(30px, 3.4vw, 46px);
  height: clamp(30px, 3.4vw, 46px);
  background: var(--grad);
  -webkit-mask: var(--g) center / contain no-repeat;
          mask: var(--g) center / contain no-repeat;
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.wd-node-label { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wd-node-idx {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.wd-node-name {
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.wd-node.is-lit .wd-glyph,
.wd-node.is-active .wd-glyph { animation: none; }
.wd-node.is-lit .wd-glyph { transform: scale(1.16); filter: drop-shadow(0 6px 18px rgba(138, 48, 232, 0.35)); }
.wd-con-stage.is-engaged .wd-node:not(.is-active) { opacity: 0.4; transition: opacity 0.45s var(--ease); }
.wd-node.is-active .wd-glyph { transform: scale(1.24); filter: drop-shadow(0 8px 26px rgba(39, 69, 255, 0.45)); }
.wd-node:focus-visible { outline: none; }
.wd-node:focus-visible .wd-node-name { text-decoration: underline; text-underline-offset: 4px; }

/* center: the organization the engine wraps around */
.wd-node--core { left: 50%; top: 50%; pointer-events: none; gap: 0; }
.wd-core-ring {
  position: absolute; left: 50%; top: 50%;
  width: clamp(100px, 12vw, 158px);
  height: clamp(100px, 12vw, 158px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.wd-core-ring::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px dashed var(--line);
  animation: wdSpin 40s linear infinite;
}
@keyframes wdSpin { to { transform: rotate(360deg); } }
.wd-core-label {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.35;
  text-align: center;
}

.wd-readout { position: relative; }
.wd-readout-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.wd-readout-key {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.wd-readout-val {
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-size: clamp(19px, 1.6vw, 27px);
  line-height: 1.38;
  letter-spacing: -0.018em;
  font-weight: 450;
  color: var(--ink);
  max-width: 30ch;
}
.wd-readout.is-swap .wd-readout-key,
.wd-readout.is-swap .wd-readout-val { animation: wdReadIn 0.34s var(--ease) both; }
@keyframes wdReadIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.wd-readout-hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dim);
  opacity: 0.7;
}
.wd-con-stage.is-engaged ~ .wd-readout .wd-readout-hint { opacity: 0; }

@media (max-width: 860px) {
  .wd-con { grid-template-columns: 1fr; gap: clamp(8px, 4vw, 24px); }
  .wd-con-stage { max-width: 380px; }
  .wd-node-name { font-size: clamp(15px, 4.4vw, 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-ring-flow { animation: none; opacity: 0.6; }
  .wd-glyph, .wd-core-glow, .wd-core-ring::after { animation: none; }
  .wd-spokes line { opacity: 0.35; }
}

/* full-bleed dark band carrying the engagement line — a tonal break before proof */
.wd-bind-band {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: clamp(64px, 9vw, 132px) 0;
  overflow: hidden;
}
.wd-bind-band::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  opacity: 0.9;
}
.wd-bind {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(30px, 4.6vw, 66px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.78);
}
/* the three modes: emphasized in pure white, revealed by an un-redact wipe */
.wd-bind strong {
  position: relative;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
/* cover bar wipes off (left -> right) as scroll drives --wipe from 1 down to 0 */
.wd-bind strong::after {
  content: "";
  position: absolute;
  inset: 0.04em -0.14em 0.02em;
  background: var(--grad);
  transform: scaleX(var(--wipe, 0));
  transform-origin: right center;
}
@media (max-width: 860px) {
  .wd-bind { max-width: none; }
}

/* engine settle: brief brighten of the org core when the sequence completes */
.wd-con-stage.is-settled .wd-core-ring { animation: wdSettle 0.9s var(--ease); }
@keyframes wdSettle {
  0% { box-shadow: 0 0 0 0 rgba(39, 69, 255, 0); }
  35% { box-shadow: 0 0 0 14px rgba(39, 69, 255, 0.16); }
  100% { box-shadow: 0 0 0 26px rgba(39, 69, 255, 0); }
}

/* ---------- Where we're called: pinned folding card stack ---------- */
.sit { position: relative; padding-top: clamp(56px, 7vw, 110px); }
.sit-intro { margin-bottom: clamp(40px, 5vw, 70px); }

/* default (mobile / reduced-motion / pre-JS): simple vertical stack */
.sit-pin {
  --sit-cw: clamp(360px, 44vw, 600px);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.4vw, 34px);
  min-height: 320px;
  padding: clamp(24px, 2.2vw, 40px);
  border: 1px solid var(--line);
  background: var(--bg);
}

/* live (desktop): pinned stage, cards absolutely positioned + folded by JS */
.sit-pin--live {
  height: 100vh;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.sit-pin--live .sit-card {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--sit-cw);
  height: min(80vh, 740px);
  min-height: 0;
  margin: 0;
  justify-content: flex-start;
}
/* anchor the content (title first) at a fixed offset so every card title
   shares the same baseline regardless of description length */
.sit-pin--live .sit-content { margin-top: clamp(150px, 25vh, 280px); }
.sit-pin--live .sit-card--cta { justify-content: center; }

.sit-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
}
.sit-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.sit-icon {
  width: clamp(50px, 4.8vw, 68px);
  height: clamp(50px, 4.8vw, 68px);
  display: block;
  background: var(--grad);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* ---- living glyphs: the brand gradient flows through every masked icon, with a
   periodic glint flash. Transform-free, so it's safe inside any pinned/sliding
   section. JS randomizes the per-glyph timing vars so they never fire in sync. ---- */
.wd-glyph, .sit-icon {
  background-size: 210% 210%;
  animation:
    glyphFlow var(--flow-dur, 9s) linear infinite,
    glyphGlint var(--glint-dur, 6.5s) ease-in-out var(--glint-delay, 0s) infinite;
}
@keyframes glyphFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glyphGlint {
  0%, 80% { filter: brightness(1); }
  87% { filter: brightness(2.4) saturate(1.25) drop-shadow(0 0 11px rgba(124, 92, 255, 0.62)); }
  94% { filter: brightness(1); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-glyph, .sit-icon { animation: none; background-size: 100% 100%; }
}
.sit-content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 26px);
  transition: opacity 0.15s linear;
}
.sit-mid { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); }
.sit-tag {
  margin: 0;
  font-size: clamp(30px, 2.9vw, 50px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.sit-desc {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.45;
  color: var(--dim);
  max-width: 34ch;
}
.sit-deliver { display: flex; flex-wrap: wrap; gap: 8px; }
/* deliverables: deliberate rectangles (no radius) */
.sit-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 12px 7px;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}

/* blue finale card */
.sit-card--cta {
  --em-color: #dfe4ff;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  justify-content: center;
  padding: clamp(30px, 3vw, 60px);
}
.sit-cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.9vw, 26px); }
.sit-cta-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.sit-cta-title {
  margin: 0;
  font-size: clamp(38px, 4vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #fff;
}
.sit-cta-sub {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 42ch;
}
.sit-cta-btn { margin-top: clamp(4px, 1vw, 12px); }

@media (max-width: 820px) {
  .sit-card--cta { justify-content: flex-start; }
}

/* ---------- dark band: engage + proof ---------- */

/* ---------- animated dithered static over dark sections ---------- */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.09;
  mix-blend-mode: screen;
  will-change: background-position;
  animation: grainFlicker 0.6s steps(1) infinite;
}
@keyframes grainFlicker {
  0%   { background-position: 0 0; }
  10%  { background-position: -24px 12px; }
  20%  { background-position: 18px -28px; }
  30%  { background-position: -32px 24px; }
  40%  { background-position: 28px 16px; }
  50%  { background-position: -18px -22px; }
  60%  { background-position: 22px 28px; }
  70%  { background-position: -28px -14px; }
  80%  { background-position: 16px -24px; }
  90%  { background-position: -12px 20px; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}
/* keep section content above the grain layer (only elements that are NOT already
   absolutely positioned — the seq chips/title manage their own stacking) */
.hero-content, .hero-meta,
.method-dial > *:not(.grain),
.band > .container, .band-giant-wrap, .method-shot,
.geo-inner,
.footer > .container, .footer-giant-wrap { position: relative; z-index: 2; }
/* in the problem section the grain sits behind the animated chips, which keep
   their own absolute positioning + z-index */
.seq-stage .grain { z-index: 0; }
/* the method scenes carry opaque occluder backdrops; lift the grain above them so
   the texture reads uniformly across the whole section (otherwise the backdrops
   show as a flat band against the grainy gaps). Extend it past the section bounds
   so it also covers the backdrops where they overhang the top/bottom edges (over
   the white divider above, screen-blend makes the overhang invisible). */
.method-dial > .grain { z-index: 3; inset: -120vh 0 0 0; }

.band {
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 11vw, 160px) 0;
  --em-color: var(--blue-lt);
}

.method-dial { position: relative; }

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 85% 8%, rgba(39, 69, 255, 0.12), transparent 65%),
    radial-gradient(40% 36% at 10% 90%, rgba(236, 18, 180, 0.07), transparent 65%);
  pointer-events: none;
}

.band > .container { position: relative; }

.band .sechead { border-top-color: var(--wline); }
.band .label { color: var(--wdim); }
.band .sec-meta { color: var(--wfaint); }

.band-giant-wrap { overflow: hidden; margin: clamp(16px, 2vw, 32px) calc(-1 * var(--gutter)) clamp(40px, 5vw, 72px); position: relative; }

.band-giant {
  /* mono + restrained (not giant) per design direction */
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(38px, 6.5vw, 96px);
  letter-spacing: 0.01em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 var(--gutter);
  text-align: center;
}

/* two ways we engage — pricing-style cards */
.engage-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}
.engage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(28px, 3vw, 46px);
}
.engage-card--featured {
  background: rgba(111, 140, 255, 0.06);
  box-shadow: 0 30px 70px -34px rgba(39, 69, 255, 0.55);
}
.engage-card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.engage-badge {
  position: absolute;
  top: 0;
  right: clamp(24px, 3vw, 40px);
  transform: translateY(-50%); /* straddle the card's top edge */
  z-index: 3;                  /* sit above the gradient border line */
  background: var(--grad);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(39, 69, 255, 0.7);
}
.engage-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-lt);
}
.engage-name {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 8px;
}
.engage-when { color: var(--wdim); font-size: 15px; line-height: 1.5; margin: 0; min-height: 2.6em; }
.engage-format { margin: clamp(22px, 3vw, 32px) 0 clamp(20px, 2.5vw, 28px); }
.engage-format-main {
  display: block;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.engage-format-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin-top: 11px;
}
/* conic-gradient rotating border (Framer "Conic Gradient" style) on the engage CTAs */
@property --cangle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes conic-rotate { to { --cangle: 360deg; } }

.engage-cta { width: 100%; justify-content: center; }

/* premium rotating conic-gradient border — reusable on any .btn */
.btn--conic { border-color: transparent; }
.btn--conic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--cangle),
    rgba(255, 255, 255, 0.12) 0deg 188deg,
    #0acbff 228deg, #2745ff 274deg, #8a30e8 316deg, #ec12b4 348deg,
    rgba(255, 255, 255, 0.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  animation: conic-rotate 6s linear infinite;
}
/* on light backgrounds the faint-white base arc would vanish — darken it */
.btn--conic.btn--solid::after {
  background: conic-gradient(from var(--cangle),
    rgba(10, 12, 22, 0.18) 0deg 188deg,
    #0acbff 228deg, #2745ff 274deg, #8a30e8 316deg, #ec12b4 348deg,
    rgba(10, 12, 22, 0.18) 360deg);
}
@media (prefers-reduced-motion: reduce) {
  .btn--conic::after { animation: none; }
}
.engage-rule { height: 1px; background: var(--wline); margin: clamp(24px, 3vw, 32px) 0; }
.engage-feats-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin: 0 0 16px;
}
.engage-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.engage-feats li {
  position: relative;
  padding-left: 30px;
  color: var(--wdim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}
.engage-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(111, 140, 255, 0.16);
  color: var(--blue-lt);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.engage-note { text-align: center; color: var(--wdim); font-size: 15px; margin: clamp(48px, 6vw, 72px) auto clamp(48px, 6vw, 72px); max-width: 54ch; }
.engage-note strong { color: #fff; font-weight: 600; }

/* why independent — contrast ledger below engage cards */
.indep-block {
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--wline);
}
.indep-claim {
  color: #fff;
  max-width: 22ch;
  margin: clamp(28px, 3.5vw, 44px) 0 clamp(36px, 4.5vw, 56px);
}
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--wline);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.012);
}
.ledger-col { padding: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 38px); }
.ledger-col--neg { border-right: 1px solid var(--wline); }
.ledger-head {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(14px, 1.7vw, 20px) 0;
  border-top: 1px solid var(--wline);
}
.ledger-list li:first-child { border-top: 0; }
.ledger-neg {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 28px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ghost);
}
.ledger-neg .strike {
  position: absolute;
  left: -3%;
  top: 56%;
  width: 106%;
  height: clamp(2px, 0.28vw, 4px);
  background: var(--grad);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
}
.ledger-tick {
  flex: none;
  font-family: var(--mono);
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.5;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ledger-pos {
  font-weight: 600;
  font-size: clamp(15px, 1.45vw, 19px);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-col--neg { border-right: 0; border-bottom: 1px solid var(--wline); }
}

/* proof inside band */

.proof-head { margin-top: clamp(80px, 10vw, 140px); }

.band .display { color: #fff; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--wline);
  background: rgba(255, 255, 255, 0.02);
}

.stat {
  border-right: 1px solid var(--wline);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat:last-child { border-right: 0; }

.stat-value {
  font-weight: 700;
  font-size: clamp(48px, 5.8vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  align-self: flex-start;
}

.stat-value sup { font-size: 0.42em; letter-spacing: -0.01em; color: var(--blue-lt); }

.stat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  line-height: 1.7;
}

.proof-note { padding-top: clamp(40px, 5vw, 64px); }
.proof-note .lede { color: var(--wdim); max-width: 62ch; }
.proof-note .lede strong { color: #fff; }

/* gradient-text utility */
.grad-ink {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Each method scene is pinned in turn; the stages are transparent, so an adjacent
   scene's text used to render through (overlapping headings). Give every pinned
   stage an opaque, full-viewport backdrop: because the scenes share one z-index
   layer, DOM order makes each later scene's backdrop paint over — and hide — the
   previous scene as it scrolls through. */
.method-dial--live .mi-stage,
[data-tline]:not(.tlx--static) .tlx-stage,
.method-dial--live .dial-stage { isolation: isolate; }
.method-dial--live .mi-stage::before,
[data-tline]:not(.tlx--static) .tlx-stage::before,
.method-dial--live .dial-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  /* tall enough that adjacent scenes' backdrops overlap — no gap where a previous
     scene's heading could peek through during the hand-off */
  height: 200vh;
  transform: translate(-50%, -50%);
  background: var(--dark);
  /* isolate (above) keeps this negative layer inside the stage: it sits behind the
     stage's own content but the stage as a whole still paints over earlier scenes */
  z-index: -1;
  pointer-events: none;
}
/* the first scene's backdrop only needs to cover the viewport once it pins (to hide
   the marquee sliding through). Keep it near one viewport so the marquee divider
   stays visible during the section 03 -> 04 hand-off instead of being swallowed. */
.method-dial--live .mi-stage::before { height: 120vh; }

/* ---------- 04 our method: intro (above the dial) ---------- */
.method-intro { padding-top: clamp(70px, 9vh, 120px); padding-bottom: clamp(28px, 5vh, 64px); }
/* the mi-stage backdrop overhangs upward to occlude the divider above; keep this
   scene's own "04 — Our method" header above it so the label isn't swallowed */
.method-intro .sechead { position: relative; z-index: 1; }
/* extra bottom room so the legend isn't flush to the viewport edge while pinned
   (mi-stage is the pinned element; padding here lifts the whole scene off the floor) */
.mi-stage { position: relative; padding-bottom: clamp(28px, 7vh, 96px); }
.mi-claim { margin: clamp(22px, 3vw, 40px) 0 clamp(26px, 3.2vw, 44px); color: #fff; max-width: 22ch; }

/* opposing vectors resolve into one path */
.vec { position: relative; margin: 0; }
/* constellation + read-out sit side by side; the read-out flips through the moves */
.mi-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(248px, 27vw, 372px);
  gap: clamp(30px, 4.2vw, 72px);
  align-items: center;
  margin: 0 0 clamp(10px, 2vw, 26px);
}
/* WebGL constellation mount */
.vec-stage { position: relative; width: 100%; height: clamp(340px, 46vh, 560px); }
.vec-stage canvas { display: block; }
/* projected node labels — .label styling, holographic, blink into formation */
.vec-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vec-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.vec-label-in {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: rgba(210, 224, 255, 0.82); opacity: 0;
}
.vec-label--strat .vec-label-in { color: #cfe0ff; font-weight: 600; }
.vec-label--call .vec-label-in { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; }
.vec-label-dot { width: 5px; height: 5px; background: #5aa2ff; box-shadow: 0 0 7px rgba(90, 162, 255, 0.85); }
.vec-label--strat .vec-label-dot { width: 6px; height: 6px; background: var(--grad); box-shadow: 0 0 9px rgba(124, 92, 255, 0.7); }
.vec-label--call .vec-label-dot { width: 8px; height: 8px; background: var(--grad); box-shadow: 0 0 14px rgba(124, 92, 255, 0.9); }
.vec-label.is-on .vec-label-in { animation: vecBlink 0.55s linear both; }
@keyframes vecBlink {
  0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0; } 26% { opacity: 1; }
  38% { opacity: 0; } 50% { opacity: 1; } 64% { opacity: 0.35; } 78% { opacity: 1; } 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vec-label.is-on .vec-label-in { animation: none; opacity: 1; }
}
.vec-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 360; overflow: visible; }
.vec-logo { opacity: 0.85; }
/* the unified card the scattered disciplines resolve into — its right edge
   sits at x=470 (47% of the 1000-unit viewBox), where the path out begins */
.vec-card {
  position: absolute;
  top: 50%;
  right: 53%;
  width: clamp(208px, 25vw, 290px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--blue);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(39, 69, 255, 0.1);
  opacity: 0;
  pointer-events: none;
}
.vec-card-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-lt); }
.vec-card-logos { display: flex; gap: 8px; }
.vec-card-logos img {
  width: 20px;
  height: 20px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(39, 69, 255, 0.16);
  box-sizing: content-box;
}
.vec-card-title { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.vec-card-tag { font-size: 12px; color: var(--wdim); }

.vec-node { fill: var(--blue); filter: drop-shadow(0 0 12px rgba(74, 108, 247, 0.7)); }
.vec-out-line {
  fill: none;
  stroke: url(#vecOut);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(74, 108, 247, 0.45));
}
.vec-out-head { fill: var(--blue-lt); stroke: none; filter: drop-shadow(0 0 8px rgba(74, 108, 247, 0.5)); }
.vec-cut { stroke: var(--magenta); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px rgba(236, 18, 180, 0.6)); }

/* default (no-JS / mobile): the three moves read as a normal stacked list */
.mi-legend {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--wline);
  padding-top: clamp(20px, 2.4vw, 30px);
}
/* deck mode (desktop, JS): the moves stack in one cell and flip one at a time */
.mi-legend.is-deck {
  gap: 0;
  border-top: 0;
  padding-top: 0;
  align-self: center;
}
.mi-legend.is-deck .mi-phase { grid-area: 1 / 1; will-change: opacity, transform; }
.mi-phase { position: relative; padding-left: 18px; }
.mi-phase-bar {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: var(--blue-lt);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
}
.mi-phase-k {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-lt);
  margin-bottom: 12px;
}
.mi-phase p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; font-weight: 500; color: rgba(255, 255, 255, 0.82); margin: 0; }
html.js [data-vec-phase] { opacity: 0; }
@media (max-width: 820px) {
  .mi-canvas { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- 04b the wrong starting point: linear vs parallel timeline ---------- */
.tline { padding: clamp(48px, 7vh, 96px) var(--gutter) clamp(40px, 6vh, 80px); }
.tline-head { max-width: 760px; }
.tline-head .dial-eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.tline-claim {
  color: #fff;
  font-size: clamp(22px, 2.6vw, 38px);
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 22ch;
}
.tline-claim em { color: var(--blue-lt); }
.tline-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--wdim);
  max-width: 56ch;
  margin: 0;
}
.tline-nuance {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--wline-strong);
  font-size: 14px;
  line-height: 1.5;
  color: var(--wfaint);
  max-width: 52ch;
}

/* ---------- 04b sequential -> parallel (pinned scroll-scrub) ---------- */
.tlx-stage {
  position: relative;
  height: clamp(560px, 86vh, 780px);
  margin-top: clamp(40px, 6vw, 80px);
}
.tlx { position: relative; width: 100%; height: 100%; }

.tlx-caption {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 30ch;
  z-index: 4;
  pointer-events: none;
}
.tlx-cap-when {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-lt);
  margin-bottom: 8px;
}
.tlx-cap-mode {
  display: grid;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.92;
  color: #fff;
  margin-bottom: 14px;
}
/* stack the two states in the same cell so the layout never shifts */
.tlx-cap-seq,
.tlx-cap-par { grid-area: 1 / 1; }
.tlx-cap-par {
  --wipe: 1;
  position: relative;
  display: inline-block;
  justify-self: start;
}
/* same un-redact grammar as the "We bring it in three ways" band: the white word
   sits under a gradient cover bar that retracts to the right as scroll drives --wipe 1 -> 0 */
.tlx-cap-par-word {
  position: relative;
  display: inline-block;
  color: #fff;
}
.tlx-cap-par-word::after {
  content: "";
  position: absolute;
  inset: 0.06em -0.12em 0.04em;
  background: var(--grad);
  transform: scaleX(var(--wipe, 1));
  transform-origin: right center;
}
.tlx-cap-note { font-size: 14px; line-height: 1.55; color: var(--wdim); margin: 0; max-width: 32ch; }

/* reserve the top band for the big caption so the graphic never sits under it */
.tlx-scene { position: absolute; left: 0; right: 0; bottom: 0; top: clamp(170px, 17vw, 260px); }

/* scene 1 — descending staircase */
.tlx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tlx-svg-trail { stroke: var(--wline-strong); stroke-width: 1.5; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.tlx-svg-stair { fill: none; stroke: url(#tlxStroke); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tlx-svg-gap { fill: rgba(236, 18, 180, 0.07); stroke: none; }

/* sit the market label on the right so the big caption header has the left clear */
.tlx-market-label {
  position: absolute;
  top: calc(11.5% - 20px);
  right: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wfaint);
}

/* competitor group label */
.tlx-comp-label {
  position: absolute;
  left: 6%;
  top: 2%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wfaint);
  opacity: 0.7;
}

/* competitors — placeholder brand chips that race right along the market line, drawing the trail */
.tlx-comp {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 7px;
  background: rgba(74, 108, 247, 0.12);
  border: 1px solid rgba(74, 108, 247, 0.42);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(74, 108, 247, 0.25);
}
.tlx-comp-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(74, 108, 247, 0.22);
}
.tlx-comp-mark img { width: 14px; height: 14px; display: block; }
.tlx-comp-name { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }

/* prominent gap: vertical measure (aligned under the endpoint, x=64%) + big callout */
.tlx-gap-bracket {
  position: absolute;
  left: 64%;
  top: 8.5%;
  height: 76.1%;
  border-left: 1.5px dashed var(--magenta);
  opacity: 0.75;
}
.tlx-gap-bracket::before,
.tlx-gap-bracket::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 11px;
  height: 1.5px;
  background: var(--magenta);
}
.tlx-gap-bracket::before { top: 0; }
.tlx-gap-bracket::after { bottom: 0; }
.tlx-slope-label {
  position: absolute;
  left: 4%;
  top: 55%;
  font-family: var(--mono);
  font-size: clamp(8px, 0.9vw, 11px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--wfaint);
}

.tlx-gap-callout {
  position: absolute;
  left: 69%;
  top: 33%;
  max-width: 30%;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--magenta);
}

.tlx-step {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tlx-step-q { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--wfaint); }
.tlx-step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(39, 69, 255, 0.16), 0 0 14px rgba(74, 108, 247, 0.5);
}
.tlx-step-role { font-size: 12px; color: var(--wdim); }
.tlx-step--dead .tlx-step-q { color: var(--magenta); }
.tlx-step--dead .tlx-step-role { color: var(--magenta); font-weight: 600; }
.tlx-step--dead .tlx-step-dot { background: transparent; border: 2px solid var(--magenta); box-shadow: 0 0 0 4px rgba(236, 18, 180, 0.14); }
.tlx-svg-qline { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }

/* scene 2 — parallel function cards */
.tlx-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(180px, 21vw, 236px);
  height: 82px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--wline-strong);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  will-change: transform, opacity;
}
.tlx-card-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(39, 69, 255, 0.16);
}
.tlx-card-ico img { width: 22px; height: 22px; display: block; }
.tlx-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tlx-card-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--blue-lt); }
.tlx-card-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
/* combined team card the four function cards morph into */
.tlx-team {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(252px, 30vw, 364px);
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--blue);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(39, 69, 255, 0.1);
}
.tlx-team-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--blue-lt); }
.tlx-team-logos { display: flex; gap: 10px; }
.tlx-team-logos img {
  width: 26px;
  height: 26px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(39, 69, 255, 0.16);
  box-sizing: content-box;
}
.tlx-team-title { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.tlx-team-tag { font-size: 13px; color: var(--wdim); }

/* four rails that draw from the team and converge into the decision */
.tlx-rails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tlx-rail { fill: none; stroke: var(--blue-lt); stroke-width: 2; opacity: 0.9; }
.tlx-decision {
  position: absolute;
  right: 7%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 28px;
  border-radius: 16px;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(39, 69, 255, 0.16), 0 18px 52px rgba(39, 69, 255, 0.36);
}
.tlx-decision-q { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.tlx-decision-role { font-size: 14px; font-weight: 600; color: #fff; max-width: 15ch; line-height: 1.3; }

/* JS initial states (revealed by GSAP) */
html.js [data-tlx-stair] .tlx-step { opacity: 0; }
html.js [data-tlx-cards] { opacity: 0; }

/* static fallback */
.tlx-fallback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 72px);
}
html.js .tlx-fallback { display: none; }
[data-tline].tlx--static .tlx-stage { display: none; }
[data-tline].tlx--static .tlx-fallback { display: grid; }
.tlx-fb-when {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin-bottom: 16px;
}
.tlx-fb-when--good { color: var(--blue-lt); }
.tlx-fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tlx-fb-list li { font-size: 14px; color: var(--wdim); }
.tlx-fb-list b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--blue-lt); margin-right: 8px; }
.tlx-fb-list li.is-dead, .tlx-fb-list li.is-dead b { color: var(--magenta); }
.tlx-fb-cards { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tlx-fb-cards li {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 10px 14px;
  border: 1px solid var(--wline-strong);
  border-radius: 9px;
}
.tlx-fb-cards li span { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--blue-lt); margin-right: 8px; }
.tlx-fb-end { display: block; font-size: 13px; font-weight: 600; color: var(--blue-lt); }

.tline-payoff {
  margin: clamp(40px, 6vw, 80px) auto 0;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--wdim);
  max-width: 52ch;
  text-align: center;
}
.tline-payoff strong { color: #fff; font-weight: 600; }

@media (max-width: 820px) {
  .tlx-card-name { font-size: 14px; }
  .tlx-cap-note { display: none; }
}
@media (max-width: 720px) {
  .tlx-fallback { grid-template-columns: 1fr; }
}

.dial-head { text-align: center; }
.dial-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}

/* ---------- 04 our method (pinned radial dial) ---------- */
.method-dial { background: var(--dark); color: #fff; }
.method-dial .display { color: #fff; }
.method-dial .label { color: var(--blue-lt); }
.method-dial .sec-meta { color: var(--wfaint); }
.method-dial .sechead { border-top-color: var(--wline); }

.dial-stage { padding: clamp(64px, 9vh, 120px) 0 clamp(48px, 7vh, 96px); }
.dial-head .display { margin-top: 18px; }
.method-dial--live .dial-stage {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vh, 56px) 0 clamp(48px, 7vh, 96px);
}
.method-dial--live .dial-head { position: relative; z-index: 4; }

/* the giant dial — only the crown shows; its centre sits far below the fold */
.dial-wrap { display: none; }
.method-dial--live .dial-wrap {
  display: block;
  position: absolute;
  left: 50%;
  top: clamp(118px, 17vh, 210px);
  transform: translateX(-50%);
  width: min(2200px, 232vw);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 1;
}
.dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-track { fill: none; stroke: var(--wline); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the numbered markers ride the rotating ring (built + spun by JS) */
.dial-mark-bg { fill: var(--dark); stroke: var(--wline-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial-mark-num {
  fill: #fff;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.dial-mark-x { fill: none; stroke: var(--blue-lt); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* fixed apex indicator — STEP badge, crosshair, radial line to the copy */
.dial-apex {
  display: none;
}
.method-dial--live .dial-apex {
  display: flex;
  position: absolute;
  left: 50%;
  top: clamp(96px, 14vh, 176px);
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 3;
}
.dial-apex-k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dark);
  background: #fff;
  padding: 3px 9px 2px;
}
.dial-apex-n {
  margin-top: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: 1px solid var(--wline-strong);
  background: var(--dark);
}
.dial-apex-cross {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  color: var(--blue-lt);
  text-shadow: 0 0 12px rgba(111, 140, 255, 0.7);
}
.dial-apex-line {
  margin-top: 10px;
  width: 1px;
  height: clamp(110px, 20vh, 220px);
  background: linear-gradient(var(--wline-strong), transparent);
}

/* the rotating copy — crossfades per step, anchored mid-screen */
.dial-wrap-shell { display: contents; }
.dial-center {
  position: absolute;
  left: 50%;
  top: clamp(50%, 54vh, 60%);
  transform: translate(-50%, -50%);
  width: min(92vw, 540px);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 2;
}
.dial-step {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
html.js .dial-step { opacity: 0; }
.dial-step-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--blue-lt); }
.dial-step-title { font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -0.025em; margin: 2px 0 4px; }
.dial-step-lead { font-weight: 600; font-size: clamp(15px, 1.4vw, 18px); color: #fff; margin: 0; }
.dial-step-desc { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.55; color: var(--wdim); max-width: 36ch; margin: 4px 0 0; }

/* static fallback list (mobile / reduced-motion / no-JS) */
.dial-list {
  list-style: none;
  margin: clamp(28px, 5vh, 52px) auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 760px;
}
.method-dial--live .dial-list { display: none; }
.dial-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  padding: clamp(22px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--wline);
}
.dial-list li:last-child { border-bottom: 0; }
.dial-li-num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--blue-lt); }
.dial-li-body h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; margin: 0 0 8px; }
.dial-li-body p { color: var(--wdim); font-size: 15px; line-height: 1.6; margin: 0; max-width: 62ch; }
.dial-li-body strong { color: #fff; font-weight: 600; }

.method-shot {
  position: relative;
  margin: clamp(56px, 7vw, 104px) 0 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #07080c;
}
.method-shot img {
  width: 100%;
  height: clamp(400px, 62vh, 820px);
  object-fit: cover;
  object-position: 50% 25%; /* bias up so the standing facilitator's head keeps headroom */
  display: block;
  will-change: transform, clip-path;
}
/* 4-column curtain reveal: panels cover the image, then lift away in sequence (JS) */
.method-shot .curtain {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 2;
}
.method-shot .curtain i {
  position: relative;
  flex: 1 1 0;
  background: #07080c;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  will-change: transform;
}
.method-shot .curtain i:last-child { border-right: 0; }
/* a thin brand edge rides the trailing lip of each panel as it lifts */
.method-shot .curtain i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad);
  box-shadow: 0 0 24px 6px rgba(138, 48, 232, 0.65), 0 0 8px 2px rgba(7, 203, 255, 0.4);
}
html.js .method-shot--curtain img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .method-shot .curtain { display: none; }
  html.js .method-shot--curtain img { transform: none; }
}

/* ---------- experience ---------- */

.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.exp-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.5s ease, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.exp-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -30px rgba(15, 23, 80, 0.2);
}

.exp-type {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
}

.exp-type::before { content: ""; width: 4px; height: 11px; background: var(--grad); flex: none; }

.exp-card h3 {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.exp-card ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.exp-card ul li { color: var(--dim); font-size: 15.5px; padding-left: 20px; position: relative; }

.exp-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 2px;
  background: var(--grad);
}

.exp-card--wide { grid-column: 1 / -1; }

/* ---- hero card: $518M split-flap board ---- */
.exp-card--hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.exp-hero-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.exp-hero-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.exp-hero-caption { font-size: 14px; color: var(--dim); line-height: 1.5; }
.exp-hero-body { display: flex; flex-direction: column; gap: 18px; }

/* the solari / departure-board figure */
.flap {
  display: flex;
  gap: clamp(5px, 0.7vw, 9px);
  perspective: 700px;
}
.flap-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(34px, 4.4vw, 62px);
  padding: clamp(10px, 1.4vw, 18px) clamp(4px, 0.6vw, 8px);
  background: linear-gradient(180deg, #14171f 0%, #0b0d14 50%, #14171f 50%, #0a0c12 100%);
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(7, 8, 12, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--mono);
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transform-origin: center bottom;
}
/* the center seam every split-flap tile has */
.flap-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 2;
  pointer-events: none;
}
.flap-char { display: block; transform-origin: center top; backface-visibility: hidden; }

/* ---- per-card motif animations ---- */
/* shared: motifs sit between the bullets and the meta row */
.exp-sign { margin: 4px 0 2px; }

/* (1) signature draw — "Deals that had to land" */
.exp-sign { display: flex; align-items: flex-end; gap: 14px; }
.exp-sign-svg { width: clamp(150px, 60%, 220px); height: auto; overflow: visible; }
.exp-sign-path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.exp-sign-base { stroke: var(--line-strong); stroke-width: 1; }
.exp-sign-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  padding-bottom: 4px;
}

/* (2) acquisition radar — "New ground, real constraints" */
.exp-radar { width: clamp(120px, 14vw, 152px); margin: 8px 0 4px auto; }
.rdr-scope { position: relative; width: 100%; aspect-ratio: 1; }
.exp-radar-svg { width: 100%; height: 100%; display: block; }
.exp-radar-svg > circle, .exp-radar-svg > line { stroke: var(--line-strong); stroke-width: 1; }
/* aircraft targets */
.rdr-ac { fill: var(--blue); opacity: 0.32; }
.rdr-glow { fill: rgba(39, 69, 255, 0.45); }
.rdr-reticle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rdr-reticle circle { fill: none; stroke: var(--blue); stroke-width: 1; }
.rdr-reticle line { stroke: var(--blue); stroke-width: 1; }
/* sweeping beam + comet trail */
.exp-radar-sweep { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.exp-radar.is-live .exp-radar-sweep { opacity: 1; }
.exp-radar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* comet trail behind a bright leading edge (lance gradient), fading ~105° back */
  background: conic-gradient(from 0deg,
    rgba(10, 203, 255, 0.55) 0deg,
    rgba(10, 203, 255, 0) 3deg,
    rgba(138, 48, 232, 0) 255deg,
    rgba(138, 48, 232, 0.09) 300deg,
    rgba(39, 69, 255, 0.28) 340deg,
    rgba(10, 203, 255, 0.55) 360deg);
}
.rdr-beam {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  background: linear-gradient(to bottom, rgba(10, 203, 255, 0), rgba(10, 203, 255, 0.95));
  box-shadow: 0 0 8px 1px rgba(10, 203, 255, 0.6);
}
.rdr-readout {
  display: block;
  margin-top: 7px;
  text-align: right;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.3s ease;
}
.rdr-readout.is-locked { color: var(--blue); }

/* (3) mission-control status board — "Institutions built to work" */
.exp-mc {
  margin: 8px 0 4px;
  width: 100%;
  max-width: 380px;
  padding: 13px 16px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background:
    repeating-linear-gradient(135deg, rgba(10, 12, 22, 0.018) 0px, rgba(10, 12, 22, 0.018) 1px, transparent 1px, transparent 6px),
    rgba(10, 12, 22, 0.012);
}
.mc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
}
.mc-title,
.mc-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mc-title { color: var(--dim); }
.mc-count { color: var(--faint); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.mc-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-strong);
}
.mc-mark { position: relative; width: 16px; height: 16px; display: grid; place-items: center; }
.mc-spin {
  display: none;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  color: #8a6a3c;                      /* sepia ink: checking */
}
.mc-check { display: block; width: 14px; height: 14px; overflow: visible; }
.mc-check path {
  fill: none;
  stroke: #a3271f;                     /* ink-red: matches the stamp */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.4s var(--ease);
}
.mc-state {
  justify-self: end;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.4s var(--ease);
}
.mc-row.is-checking .mc-state { color: #8a6a3c; font-style: italic; }
.mc-row.is-done .mc-label { color: var(--ink); }
.mc-row.is-done .mc-state {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #a3271f;
  border: 2px solid #a3271f;
  border-radius: 2px;
  padding: 1px 7px 2px;
  background: rgba(163, 39, 31, 0.05);
  transform: rotate(-4deg);
  animation: stamp-down 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes stamp-down {
  0% { transform: rotate(-4deg) scale(2.4); opacity: 0; }
  55% { opacity: 1; }
  75% { transform: rotate(-4deg) scale(0.92); }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.mc-go {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a3271f;
}

/* (4) private-AI terminal — "Modernization" */
.exp-term {
  margin: 8px 0 4px;
  width: 100%;
  max-width: 380px;
  background: #0a1c91;                  /* classic commander blue */
  border-radius: 8px;
  box-shadow: 0 12px 30px -14px rgba(10, 28, 145, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: hidden;
  font-family: var(--mono);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.term-dot:nth-child(1) { background: #ec6a5e; }
.term-dot:nth-child(2) { background: #f4bf4f; }
.term-dot:nth-child(3) { background: #61c554; }
.term-title { margin-left: 8px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(190, 210, 255, 0.8); }
.term-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; min-height: 116px; }
.term-line { font-size: 11.5px; line-height: 1.35; color: #e6ebff; white-space: pre-wrap; word-break: break-word; }  /* light on blue */
.term-ok { color: #6fe89a; }            /* green success */
.term-q { color: #79dbff; }             /* cyan prompt */
.term-ans { color: #ffd84a; }           /* yellow highlight — the answer */
.term-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 3px;
  background: #ffd84a;
  vertical-align: -2px;
  opacity: 0;
}
.term-cursor.is-on { opacity: 1; animation: term-blink 1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* no sweeping beam; JS shows targets + reticle locked instead */
  .exp-radar .exp-radar-sweep { display: none; }
}

.exp-card--wide > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px clamp(24px, 3vw, 48px);
}

@media (max-width: 860px) {
  .exp-card--wide > ul { grid-template-columns: 1fr; }
  .exp-card--hero { grid-template-columns: 1fr; gap: 28px; }
}

.exp-meta {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.exp-meta div { display: flex; flex-direction: column; gap: 4px; }

.exp-meta dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.exp-meta dd {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- exp-card logo strip ---------- */

.exp-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 4px;
}

.exp-logos img {
  height: 36px;
  width: auto;
  filter: grayscale(1) opacity(0.62);
  transition: filter 0.4s ease;
}

.exp-card:hover .exp-logos img { filter: grayscale(1) opacity(0.85); }

/* flags subdued — present but not louder than the other logos */
.exp-logos img[src*="flags"] {
  height: 28px;
  filter: saturate(0.35) opacity(0.5);
  border-radius: 2px;
}

.exp-card:hover .exp-logos img[src*="flags"] { filter: saturate(0.6) opacity(0.75); }

/* marquee flags match */
.logo-item--flags img {
  height: 34px !important;
  filter: saturate(0.35) opacity(0.5) !important;
}
.logo-item--flags:hover img { filter: saturate(0.6) opacity(0.75) !important; }

/* ---------- institutions logo marquee ---------- */

.logo-marquee {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  overflow: hidden;
}

.logo-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-seq { display: flex; align-items: center; flex: none; }

.logo-item { display: inline-flex; align-items: center; gap: 18px; padding: 0 clamp(28px, 4vw, 56px); }

.logo-item img {
  height: 50px;
  width: auto;
  filter: grayscale(1) opacity(0.85);
  transition: filter 0.45s ease;
}

.logo-item:hover img { filter: none; }

.logo-item span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ---------- founder ---------- */

.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.founder-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.founder-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.6s ease, transform 1.2s var(--ease);
}

.founder-photo:hover img { filter: none; transform: scale(1.03); }

.founder-photo-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(7, 8, 12, 0.82), transparent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.founder-photo-meta span:last-child { color: var(--wdim); }

.founder-body { display: flex; flex-direction: column; gap: 26px; }

.founder-body .lede { max-width: 56ch; }

.founder-grid .founder-photo { position: sticky; top: 120px; }

.founder-chapter { display: flex; flex-direction: column; gap: 10px; }

.founder-chapter .label { white-space: normal; }

.founder-chapter .lede a {
  color: var(--blue-lt);
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}

.founder-chapter .lede a:hover { opacity: 0.7; }

.founder-body .pull-line { max-width: 24ch; margin: 6px 0; }

.founder-meta {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.founder-meta div { display: flex; flex-direction: column; gap: 4px; }

.founder-meta dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.founder-meta dd {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.founder-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- industries accordion ---------- */

.industries { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* the full-bleed grid is the section's natural end — trim the trailing padding so
   the dark "Where we operate" band follows close behind the capstone card */
.section.industries { padding-bottom: clamp(40px, 5vw, 64px); }
.industries-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.industries-head .lede { max-width: 46ch; margin: 0; }
@media (max-width: 860px) {
  .industries-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}

/* ---- 09 sectors: full-bleed 3-up card wall; shape anchor + crossfade swap on hover ---- */
.sectors-grid {
  /* break out of .container to span the full viewport width (no scrollbar overflow) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* flush tiles: borders close the top + left edges, cards draw their own right + bottom */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sector-card {
  position: relative;
  min-height: clamp(220px, 26vh, 300px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(28px, 2.8vw, 48px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  cursor: default;
  outline: none;
}
.sector-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(10, 12, 22, 0.42);
}
.sector-inner {
  display: grid;
  justify-items: center;
  max-width: 32ch;
}
/* shape anchor: two masked layers crossfade A -> B on hover */
.sector-shape {
  position: relative;
  width: clamp(56px, 6vw, 88px);
  height: clamp(56px, 6vw, 88px);
  margin-bottom: clamp(16px, 1.6vw, 24px);
}
/* inline morphing shape: dark/ink at rest, full brand gradient on hover; path d morphs via flubber (JS) */
.sector-morph {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1) brightness(0.34);
  transition: filter 0.55s var(--ease);
}
.sector-card:hover .sector-morph,
.sector-card:focus-visible .sector-morph { filter: none; }
.sector-name {
  margin: 0;
  font-size: clamp(18px, 1.45vw, 25px);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
}
.sector-copy {
  margin: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(10, 12, 22, 0.62);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}
/* reveal copy on hover / keyboard focus / touch */
.sector-card:hover .sector-copy,
.sector-card:focus-visible .sector-copy {
  opacity: 1;
  transform: none;
  max-height: 12em;
  margin-top: 14px;
}
.sector-card:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
/* 10 cards in a 3-col grid leaves the last one orphaned — span the row and lay
   it out as a horizontal capstone so the width reads as intentional, not empty */
.sector-card:last-child { grid-column: 1 / -1; }
.sector-card:last-child .sector-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: 6px;
  text-align: left;
  width: 100%;
  max-width: 880px;
}
.sector-card:last-child .sector-shape { grid-row: 1 / 3; }
.sector-card:last-child .sector-name { align-self: end; margin: 0; }
.sector-card:last-child .sector-copy {
  grid-column: 2;
  align-self: start;
  opacity: 1;
  transform: none;
  max-height: none;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  /* even at 2 cols — revert to the standard centered tile */
  .sector-card:last-child { grid-column: auto; }
  .sector-card:last-child .sector-inner { display: block; max-width: none; text-align: center; }
  .sector-card:last-child .sector-shape { grid-row: auto; }
}
@media (hover: none) {
  /* touch: no hover, so always show the copy */
  .sector-copy { opacity: 1; transform: none; max-height: 12em; margin-top: 14px; }
}
@media (max-width: 560px) {
  .sectors-grid { grid-template-columns: 1fr; }
  .sector-card { min-height: 0; padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-morph { transition: filter 0.3s ease; }
}

.acc { border-top: 1px solid var(--line); }

.acc-item { border-bottom: 1px solid var(--line); }

.acc-head {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 56px 1fr 44px;
  align-items: center;
  gap: 22px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  text-align: left;
  transition: padding-left 0.45s var(--ease);
}

.acc-head:hover { padding-left: 10px; }

.acc-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint);
  transition: color 0.3s ease;
}

.acc-item.is-open .acc-num, .acc-head:hover .acc-num { color: var(--blue); }

.acc-ico {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.35s ease;
}

.acc-ico img { width: 26px; height: 26px; }

.acc-item.is-open .acc-ico, .acc-head:hover .acc-ico { background: var(--blue); }

.ico-flip img { transform: scaleX(-1); }
.ico-rot img { transform: rotate(90deg); }

.acc-title-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.acc-title {
  font-size: clamp(22px, 2.7vw, 40px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.acc-short { font-size: 14.5px; color: var(--dim); max-width: 70ch; }

.acc-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  flex: none;
  justify-self: end;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease), background 0.3s;
}

.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc-item.is-open .acc-icon { background: var(--blue); border-color: var(--blue); }
.acc-item.is-open .acc-icon::before { background: #fff; }
.acc-item.is-open .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); background: #fff; }

.acc-body { height: 0; overflow: hidden; }

.acc-body-inner {
  display: grid;
  grid-template-columns: 134px 1fr;
  gap: 22px;
  padding-bottom: clamp(28px, 3vw, 44px);
}

.acc-full {
  grid-column: 2;
  color: var(--dim);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.7;
  max-width: 68ch;
  border-left: 3px solid;
  border-image: var(--grad) 1;
  padding-left: 24px;
}

/* floating cursor icon (desktop) */
.acc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: scale(0.5);
  box-shadow: 0 24px 48px -16px rgba(39, 69, 255, 0.45);
}

.acc-cursor img { width: 54px; height: 54px; }

.gap-line {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.gap-hook { margin: 0; color: var(--ink); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; letter-spacing: -0.02em; max-width: 20ch; }
.gap-body { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.6; max-width: 54ch; }
@media (max-width: 760px) { .gap-line { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- not list ---------- */

.not-section { text-align: center; }

/* "what we are not" — contrast strip (see .indep-block for homepage layout) */
.band-not { text-align: center; }
.band-not .not-affirm strong { color: #fff; }

.not-list { display: flex; flex-direction: column; gap: clamp(8px, 1.5vw, 18px); align-items: center; }
.not-list--strip { flex-direction: row; }

.not-item {
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 70px);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ghost);
  position: relative;
  display: inline-block;
}

.not-item .strike {
  position: absolute;
  left: -2%;
  top: 52%;
  width: 104%;
  height: 5px;
  background: var(--grad);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
}

.not-affirm {
  margin-top: clamp(36px, 5vw, 56px);
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- apac ---------- */

.apac {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(39, 69, 255, 0.05), transparent 65%),
    radial-gradient(40% 70% at 70% 90%, rgba(236, 18, 180, 0.04), transparent 65%),
    var(--bg);
}

.apac-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---------- 09 where we operate (dotted map band) ---------- */

.geo {
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding: clamp(80px, 11vh, 140px) 0;
}

.geo #geo-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Full-section dark wash so ALL text over the dotted map stays readable */
.geo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(7, 8, 12, 0.94) 0%, rgba(7, 8, 12, 0.80) 45%, rgba(7, 8, 12, 0.65) 65%, rgba(7, 8, 12, 0.45) 100%),
    linear-gradient(to top,   rgba(7, 8, 12, 0.82) 0%, transparent 40%),
    linear-gradient(to bottom, rgba(7, 8, 12, 0.60) 0%, transparent 28%);
  pointer-events: none;
}

.geo-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 96px);
}

.geo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* left column: the headline (location table removed — the map carries it) */
.geo-left {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 48px);
}
.geo-left .display {
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(7, 8, 18, 0.85), 0 1px 4px rgba(7, 8, 18, 0.6);
}
/* subdued black-and-gray US flag sitting just above the masthead headline */
.geo-flag {
  width: clamp(52px, 7vw, 82px);
  height: auto;
  opacity: 0.72;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  /* cancel most of the flex column gap so the flag reads as a kicker above the headline */
  margin-bottom: calc(12px - clamp(28px, 3.5vw, 48px));
  filter: drop-shadow(0 2px 10px rgba(7, 8, 18, 0.7));
}

.geo-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px);
  /* top-align the copy with the headline so the two columns read as one masthead;
     small optical offset drops it to the headline's first baseline */
  align-self: start;
  padding-top: clamp(4px, 0.8vw, 12px);
}

.geo-grid .lede { color: rgba(244, 245, 250, 0.88); max-width: 44ch; margin: 0; }
.geo-note {
  margin: 0;
  color: rgba(244, 245, 250, 0.78);
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.65;
  max-width: 48ch;
}
.geo-note a {
  color: var(--blue-lt);
  text-decoration: underline;
  text-decoration-color: rgba(111, 140, 255, 0.45);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.geo-note a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
.founder-aside { margin-top: 12px; color: var(--dim); font-size: 15px; }

.geo .coords--dark {
  border-color: var(--wline);
  background: rgba(7, 8, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
}
.geo .coords--dark .coord + .coord { border-top-color: var(--wline); }
.geo .coords--dark .coord b { color: #fff; }
.geo .coords--dark .coord span { color: rgba(244, 245, 250, 0.60); }

/* coord cards sync with the map: dim until their node comes online,
   then light up — the current node glows with a brand accent rail */
.geo .coords--dark .coord {
  position: relative;
  opacity: 0.35;
  transition: opacity 0.5s var(--ease), background-color 0.5s var(--ease);
}
.geo .coords--dark .coord::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue-lt), #ec12b4);
  opacity: 0;
  transform: scaleY(0.3);
  transform-origin: center;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.geo .coords--dark .coord.is-active { opacity: 1; }
.geo .coords--dark .coord.is-current {
  background-color: rgba(111, 140, 255, 0.08);
}
.geo .coords--dark .coord.is-current::before {
  opacity: 1;
  transform: scaleY(1);
}

@media (max-width: 860px) {
  .geo-grid { grid-template-columns: 1fr; align-items: start; }
  .geo-copy { align-self: auto; padding-top: 0; }
}

.coords {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.coord {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coord + .coord { border-top: 1px solid var(--line); }
.coord b { color: var(--ink); font-weight: 600; }
.coord .flag { font-size: 15px; margin-right: 10px; letter-spacing: 0; vertical-align: -0.12em; }
.coord span { color: var(--faint); }

.coord-place { display: flex; flex-direction: column; gap: 7px; }
.coord-rec {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--faint);
}
.geo .coords--dark .coord-rec { color: var(--blue-lt); }

/* ---------- closing ---------- */

.closing {
  position: relative;
  text-align: center;
  padding: clamp(100px, 13vw, 190px) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 52% at 22% 100%, rgba(10, 203, 255, 0.1), transparent 65%),
    radial-gradient(50% 56% at 78% 100%, rgba(236, 18, 180, 0.09), transparent 65%),
    radial-gradient(60% 60% at 50% 110%, rgba(39, 69, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.closing .container { position: relative; }

.closing .label { justify-content: center; margin-bottom: 32px; }

.closing-title { max-width: 15ch; margin: 0 auto clamp(28px, 4vw, 44px); text-wrap: balance; }

.closing-sub { max-width: 48ch; margin: 0 auto clamp(36px, 5vw, 56px); }

.closing-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.closing-mail {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--dim);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}

.closing-mail:hover { color: var(--blue); border-color: var(--blue); }

/* ---------- footer ---------- */

.footer {
  background: var(--dark);
  color: #f0f1f5;
  padding: clamp(56px, 7vw, 96px) 0 0;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
}
/* when a dark band (e.g. the insights newsletter) sits directly above the footer,
   drop the gradient top border so the two dark areas read as one */
.footer--flush::before { display: none; }

/* newsletter band */
.footer-news {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  padding-bottom: clamp(44px, 6vw, 80px);
  margin-bottom: clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--wline);
}

.footer-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin-bottom: clamp(16px, 2vw, 26px);
}

.footer-news-title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.footer-news-sub { font-size: 14.5px; color: var(--wdim); max-width: 34ch; line-height: 1.6; }

.news-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: end; margin-bottom: 18px; }
.news-field { display: flex; flex-direction: column; gap: 9px; }
.news-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}
.news-label i { color: var(--blue-lt); font-style: normal; }
.news-field input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--wline);
  transition: border-color 0.3s, background 0.3s;
}
.news-field input::placeholder { color: var(--wfaint); }
.news-field input:focus { outline: none; border-color: var(--blue-lt); background: rgba(255, 255, 255, 0.08); }

.news-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdim);
  line-height: 1.55;
  cursor: pointer;
}
.news-consent input { margin-top: 1px; accent-color: var(--blue); flex: none; }
.news-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* realism button — gradient face, glossy sheen, rotating shimmer border, tactile press */
.news-submit {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  padding: 14px 24px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0a0c16;
  background: var(--grad);                       /* fills the 2px shimmer border at rest */
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0) scale(1);
  box-shadow:
    0 10px 20px rgba(7, 8, 12, 0.45),            /* ambient drop */
    0 5px 0 #090a12;                             /* solid 3D lip */
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease, filter 0.25s ease;
}
/* rotating shimmer ring — always spinning, button glows on hover */
.news-submit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  height: 240%;
  z-index: 0;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 232deg,
    var(--cyan) 292deg, #ffffff 320deg, transparent 360deg);
  opacity: 1;
  animation: news-ring 1.8s linear infinite;
  pointer-events: none;
}
/* glossy face — sits above the ring, leaving the shimmer visible as a 2px edge */
.news-submit::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%),
    var(--grad);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -12px 18px rgba(7, 8, 12, 0.22) inset;
  pointer-events: none;
}
.news-submit > span, .news-submit > svg { position: relative; z-index: 2; }
.news-submit:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.12);
  box-shadow:
    0 16px 30px rgba(7, 8, 12, 0.5),
    0 6px 0 #090a12,
    0 0 40px rgba(10, 203, 255, 0.65),
    0 0 80px rgba(39, 69, 255, 0.35);
}
.news-submit:active {
  transform: translateY(4px) scale(0.985);
  box-shadow:
    0 4px 10px rgba(7, 8, 12, 0.4),
    0 1px 0 #090a12;
}
.news-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.news-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
@keyframes news-ring { to { transform: translate(-50%, -50%) rotate(360deg); } }

.news-status { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; min-height: 1.1em; color: var(--wdim); }
.news-status.is-ok { color: #6ee7a8; }
.news-status.is-error { color: #ff9a9a; }

/* columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 0.9fr;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin-bottom: 20px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 12px; }

.footer-col a, .footer-col p { font-size: 14.5px; color: var(--wdim); line-height: 1.7; transition: color 0.3s; }
.footer-col a:hover { color: #fff; }

/* nav links — quiet, tightly spaced */
.footer-nav { gap: 9px; }
.footer-nav a {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wdim);
}
.footer-nav a:hover { color: #fff; }

/* numbered lists (Connect / Legal) */
.footer-idx li { display: flex; gap: 12px; align-items: baseline; }
.footer-idx .fidx { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--wfaint); flex: none; }

/* bracketed mono phone numbers */
.footer-idx a.fcall {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #fff;
}
.footer-idx a.fcall:hover { color: var(--blue-lt); }

/* highlighter-marker email */
.footer-idx a.fmail {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #06070b;
  background: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan);
  text-decoration: none;
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}
.footer-idx a.fmail:hover { color: #06070b; background: #fff; box-shadow: 0 0 0 3px #fff; }

.footer-office { margin-bottom: 18px; }
.footer-office b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
  margin-bottom: 6px;
}

.footer-col--brand .footer-tagline {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  max-width: 32ch;
  color: var(--wdim);
}

.footer-bottom {
  border-top: 1px solid var(--wline);
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}

.footer-bottom a { transition: color 0.3s; }
.footer-bottom a:hover { color: #fff; }

.footer-giant-wrap {
  overflow: hidden;
  margin-top: clamp(16px, 2vw, 32px);
  line-height: 0;
  text-align: center;
}

.footer-giant {
  font-size: 14.5vw;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: none;            /* mixed case, like the reference */
  color: #eceef4;                  /* solid, high-impact */
  background: none;
  -webkit-text-stroke: 0;
  transform: translateY(0.12em);
  display: inline-block;
  padding: 0 4px;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .problem-body { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-sticky { position: static; }
  .apac-grid { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-grid .founder-photo { position: relative; top: auto; }
  .founder-photo { max-width: 480px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-news { grid-template-columns: 1fr; gap: 36px; align-items: start; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .exp-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--wline); }
  .stat:last-child { border-bottom: 0; }
  .row-item { grid-template-columns: 48px 1fr; }
  .row-tag { display: none; }
  .acc-head { grid-template-columns: 44px 1fr 36px; gap: 14px; }
  .acc-num { display: none; }
  .acc-ico { width: 40px; height: 40px; border-radius: 8px; }
  .acc-ico img { width: 22px; height: 22px; }
  .acc-body-inner { grid-template-columns: 1fr; }
  .acc-full { grid-column: 1; }
  .hero-row { flex-direction: column; align-items: flex-start; }
  .hero-chip { max-width: none; }
  .hero-meta-inner .sig { gap: 16px; }
  .hero-meta-inner .sig span:nth-child(n+3) { display: none; }
  .clocks span:nth-child(2) { display: none; }
  .engage-cards { grid-template-columns: 1fr; }
  .exp-meta, .founder-meta { grid-template-columns: 1fr 1fr; }
  .logo-item img { height: 36px; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-col--brand { grid-column: auto; }
  .news-fields { grid-template-columns: 1fr; }
  .news-fields .news-submit { width: 100%; }
  .footer-giant { font-size: 19vw; }
  .coord { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn { padding: 16px 24px; }
  .sechead { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js .hero-eyebrow,
  html.js .hero-sub,
  html.js .hero-ctas,
  html.js .hero-chip,
  html.js .hero-meta { opacity: 1; transform: none; }
  .loader { display: none; }
  .marquee-track, .txt-marquee .txt-track, .logo-track, .seq-track { animation: none; }
  .scroll-hint i::after { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */

.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -4px 32px rgba(10, 12, 22, 0.06);
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cookie-bar.is-visible { transform: translateY(0); }

.cookie-bar-text {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
  flex: 1;
  min-width: 220px;
}

.cookie-bar-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-bar-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.cookie-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
  line-height: 1;
}

.cookie-btn--accept {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.cookie-btn--accept:hover { background: var(--blue); border-color: var(--blue); }

.cookie-btn--decline { background: transparent; color: var(--dim); }
.cookie-btn--decline:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 560px) {
  .cookie-bar { flex-direction: column; align-items: stretch; padding: 16px var(--gutter); }
  .cookie-bar-actions { justify-content: flex-end; }
}

/* ============================================================
   INSIGHTS / ARTICLES
   Article hero with scroll-depth parallax, single-column prose,
   lead-magnet card, related cards, and the insights index grid.
   Reuses existing tokens, .container, .display, .btn, .label.
   ============================================================ */

/* ---------- article hero (dark, parallax bg image, editorial layout) ---------- */
.article-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  --em-color: var(--blue-lt);
}

/* the bg sits taller than the hero so it can translate without exposing edges */
.article-hero-bg {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translateY(0) scale(1.06);
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(7, 8, 12, 0.92) 0%, rgba(7, 8, 12, 0.55) 40%, rgba(7, 8, 12, 0.28) 72%, rgba(7, 8, 12, 0.55) 100%);
  pointer-events: none;
}

/* skylance gradient bottom border */
.article-hero .ah-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: var(--grad);
}

/* vertical date pinned to the far-left edge */
.article-hero-date {
  position: absolute; z-index: 2;
  left: clamp(12px, 1.8vw, 26px); top: clamp(110px, 15vh, 180px);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wdim);
  background: rgba(7, 8, 12, 0.55);
  padding: 10px 7px;
}

.article-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(120px, 15vh, 190px);
  padding-bottom: clamp(40px, 6vh, 70px);
}

/* top meta bar: category-left | pill (center) | meta-right (read time + print widget) */
.ah-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  margin-bottom: clamp(34px, 7vh, 84px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ah-meta-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
/* dark pill backing — a catch-all so meta text stays legible over any hero image */
.ah-cat, .ah-read {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(7, 8, 12, 0.55);
  padding: 8px 13px;
  border-radius: 100px;
}
.ah-cat { justify-self: start; color: var(--wdim); }
.ah-cat b { color: #fff; font-weight: 500; }
.ah-pill {
  justify-self: center; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; border: 1px solid var(--wline-strong); border-radius: 100px;
  background: rgba(7, 8, 12, 0.55);
  color: #fff; text-decoration: none; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ah-pill:hover { border-color: var(--blue-lt); background: rgba(39, 69, 255, 0.32); }
.ah-pill svg { width: 9px; height: 9px; }
.ah-read { justify-self: end; color: var(--wdim); }
.ah-read svg { width: 13px; height: 13px; flex: none; }

.ah-print {
  justify-self: end;
  color: var(--wdim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(7, 8, 12, 0.55);
  padding: 8px 13px;
  border-radius: 100px;
  transition: background .2s var(--ease);
}
.ah-print:hover { background: rgba(39, 69, 255, 0.2); }
.ah-print svg { width: 13px; height: 13px; flex: none; }

/* body: author rail + headline / dek */
.ah-body {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px); align-items: start;
}
.ah-author { display: flex; flex-direction: column; gap: 11px; padding-top: 8px; }
.ah-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wline-strong); flex: none; }
.ah-author-text {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: rgba(7, 8, 12, 0.55);
  padding: 9px 12px;
  width: max-content; max-width: 100%;
}
.ah-author-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.ah-author-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wdim); max-width: 22ch; line-height: 1.5; }

.article-title {
  max-width: 22ch;
  margin-bottom: clamp(22px, 3.4vh, 38px);
  color: #fff;
  text-wrap: balance;
}
.article-dek {
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--wdim);
}

.tools-note {
  margin-top: 10px;
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  color: var(--blue-lt);
  opacity: 0.85;
}
.ah-scroll {
  margin-top: clamp(34px, 6vh, 64px);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wfaint);
}
.ah-scroll svg { width: 12px; height: 12px; }

@media (max-width: 860px) {
  .article-hero-date { display: none; }
  .ah-top { grid-template-columns: 1fr auto; margin-bottom: 40px; }
  .ah-cat { display: none; }
  .ah-body { grid-template-columns: 1fr; gap: 28px; }
  .ah-author { flex-direction: row; align-items: center; gap: 14px; }
  .ah-print span { display: none; } /* icon only on mobile for space */
  .ah-meta-right { gap: 4px; }
}

/* print styles for clean article output */
@media print {
  .nav, .menu, footer, .rel, .contact-sec, .ah-scroll, .ah-edge, .ah-author, .article-hero-date, .ah-pill { display: none !important; }
  .article-hero {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
    color: #000;
    page-break-after: avoid;
  }
  .article-hero-bg { display: none; }
  .article-hero-inner { padding: 0; }
  .ah-top { margin-bottom: 20px; }
  .ah-head { color: #000; }
  .article-title { color: #000; font-size: 22pt; margin-bottom: 12px; }
  .article-dek, .tools-note { color: #333; }
  .article-body { padding: 20px 0; }
  .prose { font-size: 10.5pt; line-height: 1.45; color: #000; }
  .prose h2 { font-size: 14pt; margin-top: 18px; color: #000; }
  .prose table { border: 1px solid #000; }
  .lead-magnet {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
    padding: 16px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lead-magnet::before { background: #000; }
  .toc { position: static; border: 1px solid #ccc; page-break-inside: avoid; }
  .container { max-width: 100%; }
  .ah-meta-right .ah-print { display: none; }
}

/* ---------- article body ---------- */
.article-body { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }

/* layout: sticky TOC in the left margin, prose centered in the page */
.article-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 70ch) 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.article-layout .toc { grid-column: 1; justify-self: end; }
.article-layout .article-main { grid-column: 2; min-width: 0; }

/* centered reading column */
.prose {
  max-width: 70ch;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.72;
  color: #20222c;
}
.prose > * + * { margin-top: 1.5em; }

.prose .lead {
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.prose h2 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-top: 1.9em;
  scroll-margin-top: 110px;
  color: var(--ink);
}
.prose h3 {
  font-weight: 650;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 1.7em;
  color: var(--ink);
}
.prose h2 + p, .prose h3 + p { margin-top: 0.7em; }

.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--violet); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose ul li::marker { color: var(--blue); }
.prose ol li::marker { color: var(--faint); font-variant-numeric: tabular-nums; }

.prose blockquote {
  margin: 1.9em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid;
  border-image: var(--grad) 1;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose blockquote cite { display: block; margin-top: 0.6em; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }

.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.prose figcaption { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); }

.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 2em 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); background: var(--bg-1); border-bottom: 2px solid var(--line-strong); }
.prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.prose tbody tr:hover { background: var(--bg-1); }
.prose tbody td:first-child { font-weight: 500; color: var(--ink); }

/* key-takeaways callout */
.callout {
  margin: 2.2em 0;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid;
  border-image: var(--grad) 1;
  position: relative;
}
.callout .callout-logo {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  opacity: 0.55;
}
.callout .callout-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: block; }
.callout ul { padding-left: 1.2em; margin: 0; list-style: none; }
.callout li { font-size: 16px; line-height: 1.55; position: relative; padding-left: 1.4em; }
.callout li::before { content: "■"; position: absolute; left: 0; color: var(--blue); font-size: 0.85em; top: 0.1em; }
.callout li + li { margin-top: 0.5em; }

/* ---------- table of contents (sticky, left rail) ---------- */
.toc {
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: 240px;
}
.toc-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; display: block; }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: 4px; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0 7px 14px;
  font-size: 13.5px; line-height: 1.4; color: var(--faint); text-decoration: none;
  border-left: 2px solid var(--line);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; transition: color 0.25s var(--ease); }
.toc a:hover { color: var(--dim); }
.toc a.is-active { color: var(--ink); border-left-color: var(--blue); }
.toc a.is-active::before { color: var(--blue); }

/* collapse to a top bar on narrower screens */
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout .toc { grid-column: 1; justify-self: stretch; }
  .article-layout .article-main { grid-column: 1; }
  .toc {
    position: static; max-width: none; margin-bottom: clamp(36px, 5vw, 56px);
    padding: 22px clamp(18px, 2.2vw, 26px); border: 1px solid var(--line); background: var(--bg-2);
  }
  .toc ol { grid-auto-flow: row; }
  .toc a { border-left: 0; padding-left: 0; }
  .toc a.is-active { border-left: 0; }
}

/* ---------- lead-magnet (open PDF download) ---------- */
.lead-magnet {
  max-width: 70ch;
  margin: clamp(48px, 6vw, 80px) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(28px, 3.5vw, 44px);
  background:
    radial-gradient(ellipse 60% 140% at 100% 50%, rgba(10, 203, 255, 0.08) 0%, transparent 65%),
    var(--dark);
  color: #fff;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(10, 203, 255, 0.16);
}
.lead-magnet::before {
  content: "";
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px;
  background: var(--grad);
}
.lead-magnet-copy { flex: 1; min-width: 280px; max-width: 58ch; }
.lead-magnet .lm-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-lt); margin-bottom: 12px; display: block; }
.lead-magnet h3 { font-weight: 650; font-size: clamp(20px, 2vw, 27px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 10px; }
.lead-magnet p { font-size: 15px; line-height: 1.55; color: var(--wdim); }
.lead-magnet .lead-magnet-cta { flex: none; text-decoration: none; }

@keyframes lm-cta-pulse {
  0%, 100% { box-shadow: 0 10px 20px rgba(7,8,12,.45), 0 5px 0 #090a12; }
  50% {
    box-shadow: 0 10px 20px rgba(7,8,12,.45), 0 5px 0 #090a12,
      0 0 36px rgba(10, 203, 255, 0.6), 0 0 72px rgba(39, 69, 255, 0.35);
  }
}
.lead-magnet-cta.lm-pulse-anim {
  animation: lm-cta-pulse 1.4s ease-in-out 2;
}

/* ---------- related / more articles (staggered, date+topic band on image) ---------- */
.rel { border-top: 1px solid var(--line); }
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
}
/* aesthetic stagger: middle card drops down and runs taller (portrait) */
.rel-card:nth-child(2) { margin-top: clamp(40px, 7vw, 104px); }
.rel-card:nth-child(2) .rel-card-img { aspect-ratio: 4 / 5; }
.rel-card:nth-child(3) { margin-top: clamp(20px, 3.5vw, 52px); }

.rel-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.rel-card-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--line);
}
.rel-card-img i {
  display: block; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.6s var(--ease);
}
.rel-card:hover .rel-card-img i { transform: scale(1.05); }

/* date (left) + topic (right) band across the top of the image */
.rel-card-band {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  background: rgba(7, 8, 12, 0.92);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wdim);
}
.rel-card-band .rc-topic { color: var(--blue-lt); }

.rel-card-body { display: flex; flex-direction: column; gap: 11px; padding-top: clamp(16px, 1.6vw, 22px); }
.rel-card .rel-byline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); }
.rel-card .rel-byline b { color: var(--dim); font-weight: 500; }
.rel-card h3 { font-weight: 640; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.22; letter-spacing: -0.02em; transition: color 0.25s var(--ease); }
.rel-card:hover h3 { color: var(--blue); }
.rel-card p { font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.rel-card .rel-go { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.25s var(--ease); }
.rel-card:hover .rel-go { gap: 12px; }

/* ---------- insights index grid ---------- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.insights-grid .ins-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3vw, 46px);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  min-height: 280px;
  transition: background 0.35s var(--ease);
}
.insights-grid .ins-card:hover { background: var(--bg-2); }
.insights-grid .ins-card--feature { grid-column: 1 / -1; }
.ins-card .ins-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; }
.ins-card .ins-meta .cat { color: var(--blue); }
.ins-card h2, .ins-card h3 { font-weight: 640; letter-spacing: -0.025em; line-height: 1.14; }
.ins-card--feature h2 { font-size: clamp(28px, 4vw, 52px); max-width: 18ch; }
.ins-card h3 { font-size: clamp(20px, 2vw, 27px); }
.ins-card p { font-size: 15px; line-height: 1.58; color: var(--dim); max-width: 52ch; }
.ins-card .ins-go { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; }
.ins-card:hover .ins-go { gap: 12px; }

/* ---------- insights index (Kyma-style article grid) ---------- */
.ins-index { position: relative; padding: clamp(70px, 9vw, 130px) 0; }

/* indexed header lead-in (the page hero carries the big statement) */
.ins-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(20px, 2vw, 30px);
  margin-bottom: clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}
.ins-index-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.ins-index-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }

/* grid */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.8vw, 48px) clamp(20px, 2.4vw, 40px);
  align-items: start;
}

.ins-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* image with date/category band */
.ins-card-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-2);
}
.ins-card-img i {
  position: absolute;
  inset: -12% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.ins-card-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(7, 8, 12, 0.6) 0%, rgba(7, 8, 12, 0) 100%);
}
.ins-card-band span:last-child { color: var(--blue-lt); }

/* text */
.ins-card-byline {
  margin-top: clamp(18px, 1.6vw, 24px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.ins-card-byline b { color: var(--dim); font-weight: 500; }

.ins-card-title {
  margin-top: 12px;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.ins-card:hover .ins-card-title { color: var(--blue); }

.ins-card-dek {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--dim);
  max-width: 46ch;
}

@media (max-width: 960px) {
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ins-grid { grid-template-columns: 1fr; }
  .ins-index-sub { grid-template-columns: 1fr; }
}

/* ---------- insights newsletter (full-width dark band) ---------- */
.ins-news {
  background: var(--dark);
  color: #fff;
  padding: clamp(48px, 7vw, 96px) 0;
  --em-color: var(--blue-lt);
}
.ins-news .footer-news {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 920px) {
  .rel-grid { grid-template-columns: 1fr; }
  .rel-card { margin-top: 0 !important; }
  .rel-card:nth-child(2) .rel-card-img { aspect-ratio: 16 / 10; }
  .insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lead-magnet { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CONTACT FORM (shared)
   Moved from the contact page's inline <style> so the same
   "Start a conversation" block renders identically anywhere
   it's used (contact page, insight articles, etc.).
   Page-specific hero styles stay inline on the contact page.
   ============================================================ */
.contact-sec { padding-top: clamp(60px, 8vw, 120px); }
.contact-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 92px);
  align-items: start;
}
.contact-copy .h-md { margin: 16px 0 20px; }
.contact-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 15px; }
.contact-points li {
  position: relative; padding-left: 26px; color: var(--dim);
  font-size: 15.5px; line-height: 1.6;
}
.contact-points li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 2px;
  background: var(--grad);
}
.contact-points li.no { color: var(--faint); }
.contact-points li.no::before { background: var(--faint); width: 9px; }
.contact-direct {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; gap: 6px;
}
.contact-direct .label { margin-bottom: 4px; }
.contact-direct a { color: var(--ink); font-weight: 600; text-decoration: none; width: max-content; }
.contact-direct a:hover { color: var(--blue); }
.contact-direct a.cx { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.contact-direct a.cx svg { width: 16px; height: 16px; flex: none; opacity: 0.72; }
.contact-spam { margin-top: 18px; font-size: 12.5px; color: var(--faint); line-height: 1.55; max-width: 42ch; }

/* form card */
.contact-form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 40px);
  display: grid; gap: 22px;
}
.cf-field { display: grid; gap: 9px; }
.cf-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.cf-input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 13px 15px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cf-input::placeholder { color: var(--faint); }
.cf-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39, 69, 255, 0.12); }
.cf-textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.cf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cf-pill svg { width: 15px; height: 15px; flex: none; }
.cf-pill:hover { border-color: var(--ink); }
.cf-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* honeypot — hidden from humans, tempting to bots */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-submit { width: 100%; justify-content: center; margin-top: 2px; }
.cf-status { font-size: 14px; min-height: 1.2em; margin: 0; line-height: 1.5; }
.cf-status.is-error { color: #c0392b; }
.cf-status.is-ok { color: var(--blue); }
.cf-fine { font-size: 12.5px; color: var(--faint); line-height: 1.55; margin: 0; }

@media (max-width: 860px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   SCENARIO PAGES (e.g. /work/defense-aerospace/)
   Dark video hero + roleplay decision fork, on the white base.
   ============================================================ */

/* industries accordion — link variant (navigates to a scenario page) */
.acc-item--link .acc-head { cursor: pointer; }
.acc-scn-tag {
  display: inline-block;
  margin-left: 6px;
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.acc-item--link .acc-head:hover .acc-scn-tag,
.acc-item--link .acc-head:focus-visible .acc-scn-tag { opacity: 1; transform: none; }
.acc-go {
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  justify-self: end; flex: none;
  color: var(--ink);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
}
.acc-item--link .acc-head:hover .acc-go {
  background: var(--blue); border-color: var(--blue); color: #fff;
  transform: translateX(3px);
}

/* ---------- transition cover (wipes up to reveal) ---------- */
.scn-cover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
html:not(.js) .scn-cover { display: none; }
.scn-cover-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdim);
  opacity: 0;
}

/* ---------- page base: static black dithered field ---------- */
.scn-page {
  color: #fff;
  background-color: #06070b;
  /* a soft top glow + an ordered-dot dither (two offset layers) over black,
     pinned to the viewport so it reads as a static backdrop while you scroll */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 24%, rgba(28, 33, 48, 0.55), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 0.5px, transparent 0.6px),
    radial-gradient(rgba(255, 255, 255, 0.03) 0.5px, transparent 0.6px);
  background-size: 100% 100%, 3px 3px, 3px 3px;
  background-position: 0 0, 0 0, 1.5px 1.5px;
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, repeat, repeat;
}
.scn-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: clamp(22px, 3.5vw, 40px);
}
.scn-dark em, .scn-hero em { color: var(--blue-lt); }

/* ---------- centered acts: each is a full-height focus screen ---------- */
.scn-act {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12vh 0;
}
.scn-close {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12vh 0;
  text-align: center;
}
.scn-act-inner { 
  width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; 
}

/* ---------- hero ---------- */
.scn-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(120px, 18vh, 200px) 0 clamp(54px, 9vh, 100px);
}
.scn-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scn-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(7, 8, 12, 0.97) 0%, rgba(7, 8, 12, 0.86) 26%, rgba(7, 8, 12, 0.55) 52%, rgba(7, 8, 12, 0.40) 78%, rgba(7, 8, 12, 0.55) 100%),
    linear-gradient(100deg, rgba(7, 8, 12, 0.88) 0%, rgba(7, 8, 12, 0.50) 42%, transparent 72%);
  pointer-events: none;
}
.scn-hero-inner { position: relative; z-index: 2; width: 100%; }
.scn-hero-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdim);
  margin-bottom: clamp(22px, 3vw, 38px);
}
.scn-hero-meta b { color: var(--cyan); font-weight: 600; }
.scn-hero-title {
  color: #fff;
  max-width: 20ch;
  margin-bottom: clamp(22px, 3vw, 34px);
  line-height: 0.98;
  text-shadow: 0 2px 30px rgba(7, 8, 18, 0.6), 0 1px 6px rgba(7, 8, 18, 0.5);
}
.scn-hero-meta, .scn-hero-dek { text-shadow: 0 1px 12px rgba(7, 8, 18, 0.7); }
.scn-line-mask { display: block; overflow: hidden; padding-bottom: 0.1em; }
.scn-line { display: block; will-change: transform; }
.scn-hero-dek {
  max-width: 60ch;
  color: rgba(244, 245, 250, 0.86);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}
.scn-hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(34px, 5vw, 56px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wfaint);
}
.scn-hero-cue span { width: 26px; height: 1px; background: var(--wfaint); position: relative; overflow: hidden; }
.scn-hero-cue span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cyan);
  animation: scnCue 2.4s var(--ease) infinite;
}
@keyframes scnCue {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---------- big-type beats (centered) ---------- */
.scn-beat { color: #fff; margin: 0 0 clamp(26px, 5vh, 60px); max-width: 100%; will-change: transform, opacity; }
.scn-beat:last-child { margin-bottom: 0; }
.scn-beat--lg {
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(40px, 7vw, 100px);
  max-width: 16ch;
}
.scn-beat--sm {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--wdim);
  max-width: 46ch;
}
.scn-beat em { font-family: var(--serif); font-style: italic; }

/* the math */
.scn-figs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vw, 80px);
  flex-wrap: wrap;
  margin: 6px 0 clamp(28px, 5vw, 54px);
}
.scn-fig { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.scn-fig-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wfaint); }
.scn-fig-num {
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-size: clamp(46px, 8vw, 112px);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.scn-fig--exq .scn-fig-num { color: var(--blue-lt); }
.scn-fig--mass .scn-fig-num { color: var(--cyan); }
.scn-fig-sub { color: var(--wfaint); font-size: 13px; }
.scn-figs-vs { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 42px); color: var(--wfaint); }
.scn-math-line { max-width: 48ch; font-size: clamp(18px, 2vw, 27px); color: #fff; line-height: 1.45; }
.scn-math-line .scn-count { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- your position ---------- */
.scn-position { padding: clamp(90px, 18vh, 200px) 0; }
.scn-position-line {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  font-size: clamp(32px, 5vw, 66px);
  max-width: 18ch;
}
.scn-position-line em { font-family: var(--serif); font-style: italic; }
.scn-position-sub { margin-top: clamp(20px, 3vw, 32px); max-width: 54ch; color: var(--wdim); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }

/* ---------- the fork: two paths as big type ---------- */
.scn-act--fork .scn-eyebrow { color: var(--magenta); }
.scn-path { 
  margin: 0 0 clamp(26px, 5vh, 60px); 
  transform: translateZ(0);
  backface-visibility: hidden;
}
.scn-path-text {
  font-kerning: none;
  text-rendering: optimizeSpeed;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style;
}
.scn-path-text > span {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.scn-path-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.scn-path-text {
  margin: 0 auto;
  max-width: 16ch;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  font-size: clamp(40px, 8vw, 108px);
  color: #fff;
}
.scn-path-text em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-lt); }
.scn-path-or {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 4vw, 52px);
  color: var(--wfaint);
  margin: clamp(26px, 5vh, 56px) 0;
}

/* ---------- the ask (close) ---------- */
.scn-close {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12vh 0;
  text-align: center;
}
.scn-close .container { width: 100%; will-change: transform, opacity; position: relative; z-index: 1; }
.scn-close-title { color: #fff; max-width: 22ch; margin: 16px auto clamp(22px, 3vw, 32px); }
.scn-close-sub { max-width: 64ch; margin: 0 auto clamp(34px, 4vw, 48px); color: var(--wdim); }
.scn-close-ctas { display: inline-flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; justify-content: center; }
.scn-close-back { color: var(--wdim); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; transition: color 0.3s var(--ease); }
.scn-close-back:hover { color: #fff; }
.scn-close-mail {
  display: block;
  margin-top: clamp(40px, 6vw, 70px);
  font-family: var(--mono);
  font-size: clamp(15px, 2.4vw, 22px);
  letter-spacing: 0.05em;
  color: var(--wdim);
  transition: color 0.3s var(--ease);
}
.scn-close-mail:hover { color: var(--cyan); }

/* ---------- chapter rail ---------- */
.scn-rail { position: fixed; left: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 15px; }
.scn-rail-item { display: flex; align-items: center; gap: 11px; opacity: 0.5; transition: opacity 0.3s var(--ease); }
.scn-rail-item:hover, .scn-rail-item.is-active { opacity: 1; }
.scn-rail-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--wline-strong); flex: none; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.scn-rail-item.is-active .scn-rail-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(10, 203, 255, 0.7); }
.scn-rail-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wdim); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.scn-rail-item:hover .scn-rail-label, .scn-rail-item.is-active .scn-rail-label { opacity: 1; transform: none; }
@media (max-width: 1100px) { .scn-rail { display: none; } }

/* ---------- reticle cursor ---------- */
.scn-reticle {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(10, 203, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease);
}
.scn-reticle.is-on { opacity: 1; }
.scn-reticle i { position: absolute; background: var(--cyan); transition: background 0.25s var(--ease); }
.scn-reticle i:nth-child(1) { top: 50%; left: -7px; width: 6px; height: 1px; transform: translateY(-50%); }
.scn-reticle i:nth-child(2) { top: 50%; right: -7px; width: 6px; height: 1px; transform: translateY(-50%); }
.scn-reticle i:nth-child(3) { left: 50%; top: -7px; width: 1px; height: 6px; transform: translateX(-50%); }
.scn-reticle i:nth-child(4) { left: 50%; bottom: -7px; width: 1px; height: 6px; transform: translateX(-50%); }
.scn-reticle.is-lock { width: 54px; height: 54px; border-color: var(--magenta); }
.scn-reticle.is-lock i { background: var(--magenta); }

/* ============================================================
   Consolidated header + curtain menu + kyma-style engage CTA (homepage)
   ============================================================ */

/* --- header: live dual clock + MENU button --- */
.nav--consolidated { transition: transform 0.5s var(--ease), opacity 0.35s ease; }
body.curtain-open .nav { opacity: 0; pointer-events: none; }

.nav-clock {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wdim); white-space: nowrap;
}
.nav-clock-c { display: inline-flex; align-items: baseline; gap: 7px; }
.nav-clock-c i { font-style: normal; color: var(--wfaint); }
.nav-clock-c b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.nav-clock-d { color: var(--wfaint); }
@media (max-width: 720px) { .nav-clock { display: none; } }

.nav-menu-btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 2px 9px 14px; cursor: pointer; color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-menu-txt { line-height: 1; }
.nav-menu-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-menu-bars span { display: block; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.nav-menu-btn:hover .nav-menu-bars span:nth-child(1) { transform: translateX(4px); }

/* --- curtain menu --- */
.curtain { position: fixed; inset: 0; z-index: 95; visibility: hidden; pointer-events: none; color: var(--ink); --paper: #f1f1ea; }
body.curtain-open .curtain { pointer-events: auto; }
.curtain-cols { position: absolute; inset: 0; display: flex; }
.curtain-cols i { flex: 1 1 0; background: var(--paper); transform: scaleY(0); transform-origin: top; border-right: 1px solid rgba(10, 12, 22, 0.05); }

.curtain-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.curtain-tag { color: rgba(10, 12, 22, 0.5); }
.curtain-close { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font: inherit; text-transform: uppercase; }
.curtain-close svg { display: block; }
.curtain-close:hover { color: var(--blue); }

.curtain-inner {
  position: relative; z-index: 1; height: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(96px, 12vh, 140px) var(--gutter) clamp(36px, 5vh, 64px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto;
  gap: clamp(28px, 4vw, 64px); opacity: 0;
}
.curtain-feature {
  grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column;
  border: 1px solid rgba(10, 12, 22, 0.12); overflow: hidden; text-decoration: none; color: var(--ink); max-height: 70vh;
}
.curtain-feature-media { flex: 1; overflow: hidden; min-height: 0; background: #000; }
.curtain-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.curtain-feature:hover .curtain-feature-media img { transform: scale(1.04); }
.curtain-feature-meta { padding: 20px 22px; }
.curtain-feature-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.curtain-feature-title { display: block; margin-top: 8px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }

.curtain-nav { align-self: center; display: flex; flex-direction: column; }
.curtain-link { display: flex; align-items: baseline; gap: 18px; padding: clamp(1px, 0.35vw, 4px) 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(10, 12, 22, 0.08); }
.curtain-link .ci { font-family: var(--mono); font-size: 11px; color: rgba(10, 12, 22, 0.4); letter-spacing: 0.05em; }
.curtain-link .ct { font-size: clamp(28px, 4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; transform-origin: left; transition: transform 0.4s var(--ease), color 0.3s ease; }
.curtain-link:hover .ct { color: var(--blue); transform: translateX(10px); }

.curtain-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.curtain-mail { color: var(--ink); background: linear-gradient(var(--blue), var(--blue)) no-repeat; background-size: 100% 2px; background-position: 0 100%; padding-bottom: 2px; }
.curtain-mail:hover { color: var(--blue); }
.curtain-loc { color: rgba(10, 12, 22, 0.5); }
.curtain-social a { color: rgba(10, 12, 22, 0.6); }
.curtain-social a:hover { color: var(--blue); }

@media (max-width: 860px) {
  .curtain-inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; }
  .curtain-feature { grid-row: auto; max-height: 28vh; }
  .curtain-meta { grid-column: 1; }
}

/* --- engage: animated thatch on featured card --- */
.engage-card--featured { isolation: isolate; }
.engage-thatch {
  position: absolute; inset: 0; z-index: -1; border-radius: 16px; overflow: hidden; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(111, 140, 255, 0.05) 0 1px, transparent 1px 9px);
}
/* soft, diffuse, breathing glow — no hard beam */
.engage-thatch::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(42% 40% at 30% 72%, rgba(39, 69, 255, 0.42), transparent 70%),
    radial-gradient(46% 42% at 74% 38%, rgba(120, 82, 232, 0.22), transparent 72%);
  filter: blur(40px);
  animation: thatch-glow 9s ease-in-out infinite alternate;
}
@keyframes thatch-glow {
  0%   { transform: translate(-3%, 2%) scale(1);    opacity: 0.7; }
  100% { transform: translate(4%, -3%) scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .engage-thatch::before { animation: none; } }

/* --- engage: ticked "get started" CTA (kyma) --- */
.ks-cta { display: block; text-decoration: none; margin-top: clamp(22px, 3vw, 30px); }
.ks-cta-ticks {
  display: block; height: 9px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--wline-strong) 0 1px, transparent 1px 8px);
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent);
  transition: background-position 0.6s var(--ease);
}
.ks-cta-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
/* continuous shimmer so the link reads as interactive */
.ks-cta-label {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--blue-lt) 50%, #fff 62%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ks-shimmer 3.4s linear infinite;
}
/* persistent underline highlight — signals it's an interactive button */
.ks-cta-label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--blue-lt); transform-origin: left;
  transition: height 0.3s ease, background 0.3s ease;
}
.ks-cta-arrow { color: var(--blue-lt); transition: transform 0.4s var(--ease); }
.ks-cta:hover .ks-cta-label { animation-duration: 1.5s; }
.ks-cta:hover .ks-cta-label::after { height: 3px; background: var(--grad); }
.ks-cta:hover .ks-cta-ticks { background-position: 8px 0; }
.ks-cta:hover .ks-cta-arrow { transform: translateX(5px); }
@keyframes ks-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .ks-cta-label { animation: none; -webkit-text-fill-color: #fff; color: #fff; } }

/* --- engage: feature hover tooltips (kyma info tips) --- */
.engage-feats li.has-tip { cursor: help; outline: none; }
.engage-feats li.has-tip .tipi {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 8px;
  border: 1px solid var(--wline-strong); border-radius: 50%;
  font-family: var(--mono); font-style: normal; font-size: 8px; line-height: 1; color: var(--blue-lt);
  vertical-align: 1px; transition: border-color 0.3s ease, background 0.3s ease;
}
.engage-feats li.has-tip:hover .tipi,
.engage-feats li.has-tip:focus-visible .tipi { border-color: var(--blue-lt); background: rgba(111, 140, 255, 0.16); }
.engage-feats li.has-tip .tip {
  position: absolute; left: 30px; bottom: calc(100% + 10px); z-index: 6;
  width: max-content; max-width: 250px;
  background: #0d0f18; color: var(--wdim); border: 1px solid var(--wline-strong); border-radius: 10px;
  padding: 11px 13px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.01em; line-height: 1.55; text-transform: none;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.8);
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none;
}
.engage-feats li.has-tip:hover .tip,
.engage-feats li.has-tip:focus-visible .tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* context-aware accent: brighter on dark surfaces so it always contrasts.
   --blue-lt must be re-aliased here too — var() in a custom prop is substituted
   where it's declared, so the :root alias alone wouldn't re-resolve in this scope. */
.hero, .band, .nav, .footer, .loader, .method-dial, [data-dark] { --accent: #5aa2ff; --blue-lt: var(--accent); }

/* ============================================================
   Kyma-style buttons (site-wide). Overlay spans injected by JS:
   .btn-thatch (filled only), .btn-uline, .btn-ico (dual arrow).
   ============================================================ */

/* squared badge to match (kills the pill roundedness in pricing) */
.engage-badge { border-radius: 4px; }

/* neutralize the old rotating conic border so every button shares one style */
.btn--conic::after { content: none; }

/* per-variant accent that contrasts with the BUTTON's own bg (not the section) */
.btn--solid, .btn--wghost { --btn-accent: #5aa2ff; }
.btn--light, .btn--ghost  { --btn-accent: #2e4be8; }
.btn { --btn-accent: var(--accent); }

/* thatch on every button: pattern A (diagonal) at rest morphs to pattern B (crosshatch) on hover */
.btn-thatch { position: absolute; inset: 0; z-index: 0; pointer-events: none; --tc: rgba(255, 255, 255, 0.09); }
.btn--light .btn-thatch, .btn--ghost .btn-thatch { --tc: rgba(10, 12, 22, 0.08); }
.btn-thatch::before, .btn-thatch::after { content: ""; position: absolute; inset: 0; transition: opacity 0.5s var(--ease); }
.btn-thatch::before {
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--tc) 0 1px, transparent 1px 7px);
}
.btn-thatch::after {
  opacity: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--tc) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--tc) 0 1px, transparent 1px 7px);
}
.btn:hover .btn-thatch::before { opacity: 0; }
.btn:hover .btn-thatch::after { opacity: 1; }

/* persistent underline accent + glow */
.btn-uline {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; z-index: 1; pointer-events: none;
  background: var(--btn-accent); box-shadow: 0 0 10px var(--btn-accent); opacity: 0.9;
  transition: opacity 0.4s var(--ease), background 0.35s ease, box-shadow 0.35s ease;
}
.btn:hover .btn-uline { opacity: 1; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.65); }

/* morphing arrow icon (path d animated A->B via flubber/JS) */
.btn-ico { position: relative; z-index: 1; display: block; width: 15px; height: 15px; flex: none; }
.btn-ico .btn-arrow { display: block; width: 100%; height: 100%; }
.btn-ico .btn-arrow path { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .btn-thatch::before, .btn-thatch::after { transition: none; }
}

/* §05 pricing/engage headline (replaces the removed giant ENGAGE word) */
.engage-head {
  color: #fff;
  text-align: center;
  max-width: 20ch;
  margin: clamp(22px, 3vw, 44px) auto clamp(30px, 4vw, 56px);
}