/* Strat Cyber Advisors: dark editorial security style.
   Sections carry data-theme="dark|light"; the header follows whichever one it sits over. */

:root {
  --ink: #07090C;
  --ink-2: #0D1116;
  --ink-3: #141A21;
  --paper: #ECEDEE;
  --paper-2: #E1E3E6;
  --navy: #0D1B2A;
  --white: #FFFFFF;
  --muted-d: #9AA1AA;          /* 7.6:1 on ink */
  --muted-l: #5B636E;          /* 5.2:1 on paper */
  --line-d: rgba(255, 255, 255, .1);
  --line-l: rgba(13, 27, 42, .16);
  --signal: #D13E21;           /* fills under white text: 4.75:1 */
  --signal-hi: #EE5B38;        /* text on ink */
  --teal: #2FB8AE;

  --f-display: "Archivo", "Arial Black", Arial, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --sec: clamp(96px, 13vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bar-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 40px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 2px; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 200; background: var(--white); color: var(--ink); padding: 10px 14px; }

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

/* ---------- type ---------- */
.mono, .eyebrow {
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { color: var(--signal-hi); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.eyebrow--center { justify-content: center; }
[data-theme="light"] .eyebrow { color: var(--signal); }

.h2 {
  font-family: var(--f-display);
  font-stretch: 115%;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-head { max-width: 860px; margin-bottom: clamp(48px, 7vw, 96px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head__sub { margin-top: 20px; font-size: 1.0625rem; color: var(--muted-d); max-width: 560px; }
.section-head--center .section-head__sub { margin-left: auto; margin-right: auto; }
[data-theme="light"] .section-head__sub { color: var(--muted-l); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 .8125rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--signal { background: var(--signal); color: var(--white); }
.btn--signal:hover { background: #B8341A; }
.btn--ghost { border-color: rgba(255, 255, 255, .35); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: #1B2D44; }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--paper); }
.link { font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 0; }
.link:hover { color: var(--signal-hi); }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--white); transition: color .3s var(--ease); }
.ticker {
  display: block; overflow: hidden; height: 30px;
  background: var(--signal); color: var(--white); text-decoration: none;
  font: 500 .6875rem/30px var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.ticker__track { display: inline-flex; white-space: nowrap; animation: tick 38s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-visible .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; }
.ticker__item + .ticker__item::before { content: "/"; opacity: .5; margin-right: 28px; margin-left: -28px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: blink 1.6s ease-in-out infinite; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: .25; } }

.bar {
  display: flex; align-items: center; gap: 24px;
  height: var(--bar-h); padding: 0 var(--gutter);
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.top.is-scrolled .bar { background: rgba(7, 9, 12, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line-d); }
.top.on-light { color: var(--navy); }
.top.on-light.is-scrolled .bar { background: rgba(236, 237, 238, .8); border-bottom-color: var(--line-l); }

.brand { display: block; flex: none; width: 112px; height: 54px; position: relative; }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity .3s var(--ease); }
.brand__light { opacity: 0; }
.top.on-light .brand__dark { opacity: 0; }
.top.on-light .brand__light { opacity: 1; }

.nav { margin: 0 auto; display: flex; align-items: center; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  background: none; border: 0; color: inherit; cursor: pointer; opacity: .85;
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .2s, color .2s;
}
.nav__btn::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.nav__btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav__group + .nav__group .nav__btn::before { content: "/"; margin: 0 7px 0 -16px; opacity: .35; color: currentColor; }
.nav__btn:hover, .nav__btn[aria-expanded="true"], .nav__btn.is-current { opacity: 1; color: var(--signal-hi); }
.top.on-light .nav__btn:hover, .top.on-light .nav__btn[aria-expanded="true"], .top.on-light .nav__btn.is-current { color: var(--signal); }

/* drop-down panels: full width under the bar, dark whatever the header is over */
.mega {
  position: fixed; left: 0; right: 0; top: calc(30px + var(--bar-h));
  background: rgba(7, 9, 12, .97); color: var(--white);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  padding: 40px var(--gutter) 48px;
  animation: megaIn .28s var(--ease);
}
.mega[hidden] { display: none; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } }
.mega__in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 56px; }
.mega__lede { color: var(--muted-d); font-size: .9375rem; line-height: 1.6; }
.mega__lede .mono { display: block; color: var(--signal-hi); margin-bottom: 14px; }
.mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.mega__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 0;
  border-bottom: 1px solid var(--line-d); text-decoration: none;
  font: 500 .9375rem/1.3 var(--f-body); color: rgba(255, 255, 255, .86); transition: color .2s;
}
.mega__links a::after { content: "→"; font-family: var(--f-mono); color: var(--signal-hi); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--ease); }
.mega__links a[rel]::after { content: none; }
.mega__links a:hover, .mega__links a:focus-visible, .mega__links a[aria-current="page"] { color: var(--white); }
.mega__links a:hover::after, .mega__links a:focus-visible::after, .mega__links a[aria-current="page"]::after { opacity: 1; transform: none; }

.pill {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  min-height: 44px; padding: 4px 4px 4px 20px; border-radius: 999px;
  border: 1px solid currentColor; text-decoration: none;
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s var(--ease);
}
.pill:hover { background: rgba(255, 255, 255, .08); }
.top.on-light .pill:hover { background: rgba(13, 27, 42, .06); }
.pill__dot { width: 36px; height: 36px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; transition: transform .3s var(--ease); }
.pill:hover .pill__dot { transform: rotate(45deg); }
.pill__dot svg, .svc__arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn i:nth-of-type(1) { top: 17px; }
.menu-btn i:nth-of-type(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  padding: calc(var(--bar-h) + 60px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 40px;
}
.menu[hidden] { display: none; }
.menu { overflow-y: auto; overscroll-behavior: contain; }
.menu nav { display: flex; flex-direction: column; gap: 32px; }
.menu section > .mono {
  font: 800 clamp(1.75rem, 8vw, 2.5rem)/1 var(--f-display); font-stretch: 112%; letter-spacing: -.01em;
  color: var(--white); margin-bottom: 8px;
}
.menu section a {
  display: flex; align-items: center; min-height: 48px; padding: 8px 0;
  border-bottom: 1px solid var(--line-d); text-decoration: none;
  font: 500 1.0625rem/1.3 var(--f-body); color: rgba(255, 255, 255, .86);
}
.menu section a[aria-current="page"] { color: var(--signal-hi); }
.menu .btn { align-self: flex-start; flex: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: calc(var(--bar-h) + 30px);
  background: var(--ink);
  isolation: isolate;
}
/* The eclipse: the ramza still swaying (so its colours drift round the ring), a blurred
   copy breathing on top, and a glint orbiting the ring. Every layer screen-blends onto the
   hero's own background, so .hero__art must not become a stacking context (no z-index,
   transform or opacity on it). main.js sets the ring's centre and radius in px. */
.hero__art { position: absolute; inset: 0; pointer-events: none; --rcx: 50%; --rcy: 50%; --rr: 30vh; }
.hero__layer {
  position: absolute; inset: 0; mix-blend-mode: screen;
  transform-origin: var(--rcx) var(--rcy);
  scale: calc(1 + var(--hp, 0) * .35);
  will-change: rotate, scale;
}
.hero__layer img { width: 100%; height: 100%; object-fit: cover; }
.hero__spin { animation: sway 26s ease-in-out infinite alternate; }
.hero__corona { filter: blur(26px) saturate(1.6) brightness(1.2); animation: sway 26s ease-in-out infinite alternate, breathe 7s ease-in-out infinite; }
.hero__glint {
  position: absolute; left: var(--rcx); top: var(--rcy);
  width: calc(var(--rr) * 2); height: calc(var(--rr) * 2); margin: calc(var(--rr) * -1) 0 0 calc(var(--rr) * -1);
  mix-blend-mode: screen; filter: drop-shadow(0 0 5px rgba(255, 150, 110, .95)) drop-shadow(0 0 14px rgba(255, 110, 70, .6));
  scale: calc(1 + var(--hp, 0) * .35);
}
.hero__glint i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(255, 170, 130, .15) 76%, rgba(255, 225, 205, .95) 87%, #fff 88%, transparent 88.6%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 2.5px), #000 calc(100% - .5px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 2.5px), #000 calc(100% - .5px), transparent 100%);
  animation: orbit 11s linear infinite;
}
@keyframes sway { from { rotate: -30deg; } to { rotate: 30deg; } }
@keyframes breathe { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
@keyframes orbit { to { rotate: 360deg; } }
.hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, .07); pointer-events: none; }
.hero__grid g { transform-box: view-box; transform-origin: 0 0; animation: orbit 180s linear infinite; }
.hero__inner, .hero__frameworks { position: relative; }
.hero__inner { align-self: center; text-align: center; padding: 40px var(--gutter); max-width: 1400px; margin: 0 auto; }
.hero .eyebrow { justify-content: center; }
.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.9rem, 9.2vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__title .l2 { color: rgba(255, 255, 255, .42); }
.hero__lede { margin: 32px auto 0; max-width: 560px; color: #B4BAC2; font-size: 1.0625rem; text-shadow: 0 0 6px var(--ink), 0 0 16px var(--ink), 0 0 28px var(--ink); }
.hero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__frameworks {
  border-top: 1px solid var(--line-d);
  padding: 22px var(--gutter);
  display: flex; align-items: center; gap: 28px;
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.hero__frameworks .mono { color: var(--signal-hi); flex: none; }
.hero__frameworks ul { flex: 1; display: flex; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; color: rgba(255, 255, 255, .7); }

/* ---------- statement ---------- */
.statement { position: relative; height: 240vh; background: var(--ink); }
.statement__sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: var(--bar-h) var(--gutter) 0; }
.statement__orb {
  position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 30% calc(30% - var(--sp, 0) * 20%), rgba(209, 62, 33, .55), transparent 60%),
    radial-gradient(40vmax 40vmax at 78% calc(72% - var(--sp, 0) * 20%), rgba(47, 184, 174, .38), transparent 62%);
  filter: blur(40px);
  opacity: calc(.35 + var(--sp, 0) * .5);
}
.statement__text {
  position: relative; max-width: 1180px; text-align: center;
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.45rem, min(3.7vw, 5.6vh), 3.4rem); line-height: 1.04; letter-spacing: -.015em; text-transform: uppercase;
}
.statement__text > span { display: block; }
.statement__text > span + span { margin-top: .6em; }
.statement__text .w { color: rgba(255, 255, 255, .14); transition: color .35s var(--ease); }
.statement__text .w.lit { color: var(--white); }
.statement__text .hl .w.lit { color: var(--signal-hi); }

/* ---------- principles ---------- */
/* ---------- dawn: the dark-to-light hand-off ----------
   A pinned stage scrubbed by scroll (--tp, 0..1, from main.js): an eclipse ring
   expands out of the dark with a pale light growing behind it until the light
   fills the screen, which is where the paper sections begin. main.js flips the
   header to its light state once the light covers it. */
.dawn { position: relative; height: 190vh; background: var(--ink); --tp: 0; }
.dawn__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.dawn__sticky > i { grid-area: 1 / 1; border-radius: 50%; will-change: transform, opacity; }
.dawn__glow {
  width: 70vmax; height: 70vmax;
  background: radial-gradient(circle, rgba(209, 62, 33, .35), rgba(47, 184, 174, .22) 45%, transparent 68%);
  filter: blur(30px);
  opacity: calc(min(1, var(--tp) * 3) * (1 - var(--tp) * .6));
  transform: scale(calc(.5 + var(--tp) * 1.4)) rotate(calc(var(--tp) * 90deg));
}
.dawn__orb {
  width: 36vmax; height: 36vmax;
  background: radial-gradient(circle, var(--paper) 0 42%, #c9d3d3 54%, rgba(47, 184, 174, .5) 64%, rgba(47, 184, 174, 0) 71%);
  filter: blur(calc((1 - var(--tp)) * 22px));
  opacity: min(1, calc(var(--tp) * 2.2));
  transform: scale(calc(.04 + var(--tp) * var(--tp) * 9.5));
}
.dawn__ring {
  width: 36vmax; height: 36vmax;
  border: 1.5px solid rgba(238, 91, 56, .9);
  box-shadow: 0 0 24px rgba(238, 91, 56, .55), inset 0 0 28px rgba(47, 184, 174, .45);
  opacity: calc(min(1, var(--tp) * 5) * (1 - var(--tp) * 1.25));
  transform: scale(calc(.12 + var(--tp) * var(--tp) * 11));
}
.dawn__ring--2 { border-color: rgba(47, 184, 174, .8); box-shadow: 0 0 24px rgba(47, 184, 174, .5); transform: scale(calc(.06 + var(--tp) * var(--tp) * 8)); }
.dawn--short { height: 150vh; }

/* ---------- dusk: the light-to-dark hand-off ----------
   The dawn in reverse: on the light page a dark eclipse with teal and vermillion
   rims rises from below and swells until the dark fills the screen, which is
   where the dark section begins. main.js scrubs --tp and flips the header. */
.dusk { position: relative; height: 150vh; background: var(--paper); --tp: 0; }
.dusk__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.dusk__sticky > i { grid-area: 1 / 1; border-radius: 50%; will-change: transform, opacity; --rise: calc((1 - var(--tp)) * 48vh); }
.dusk__orb {
  width: 36vmax; height: 36vmax;
  background: radial-gradient(circle, var(--ink) 0 44%, #0E2226 54%, rgba(47, 184, 174, .5) 63%, rgba(47, 184, 174, 0) 71%);
  filter: blur(calc((1 - var(--tp)) * 26px));
  opacity: min(1, calc(var(--tp) * 2.4));
  transform: translateY(var(--rise)) scale(calc(.08 + var(--tp) * var(--tp) * 9.5));
}
.dusk__ring {
  width: 36vmax; height: 36vmax;
  border: 1.5px solid rgba(47, 184, 174, .75);
  box-shadow: 0 0 22px rgba(47, 184, 174, .35);
  opacity: calc(min(1, var(--tp) * 4) * (1 - var(--tp) * 1.3));
  transform: translateY(var(--rise)) scale(calc(.16 + var(--tp) * var(--tp) * 11));
}
.dusk__ring--2 { border-color: rgba(238, 91, 56, .8); box-shadow: 0 0 22px rgba(238, 91, 56, .35); transform: translateY(var(--rise)) scale(calc(.1 + var(--tp) * var(--tp) * 8)); }

.principles { position: relative; background: var(--paper); color: var(--navy); padding: clamp(24px, 4vw, 56px) 0 var(--sec); }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.ring {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-l);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 14%; position: relative;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(13, 27, 42, .1); }
.ring:hover { border-color: var(--signal); background: rgba(255, 255, 255, .5); }
.ring .mono { color: var(--signal); margin-bottom: 14px; }
.ring h3 { font: 800 clamp(1rem, 1.6vw, 1.375rem)/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase; margin-bottom: 12px; }
.ring p { font-size: .9375rem; line-height: 1.5; color: var(--muted-l); }

/* ---------- services ---------- */
.services { background: var(--paper); color: var(--navy); padding: 0 0 var(--sec); }
.svc { border-top: 1px solid var(--line-l); }
.svc li { border-bottom: 1px solid var(--line-l); }
.svc__row {
  display: grid; grid-template-columns: 150px 1fr minmax(220px, 340px) 48px; align-items: center; gap: 24px;
  padding: clamp(24px, 3vw, 40px) 0; text-decoration: none; position: relative;
}
.svc__tag { color: var(--muted-l); }
.svc__title {
  font-family: var(--f-display); font-weight: 800; font-stretch: 115%;
  font-size: clamp(1.75rem, 4.6vw, 4rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.svc__desc { color: var(--muted-l); font-size: .9375rem; line-height: 1.55; }
.svc__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-l); display: grid; place-items: center; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.svc__arrow svg { stroke: var(--navy); transition: stroke .25s, transform .3s var(--ease); }
.svc__row:hover .svc__title, .svc__row:focus-visible .svc__title { color: var(--signal); transform: translateX(10px); }
.svc__row:hover .svc__arrow, .svc__row:focus-visible .svc__arrow { background: var(--signal); border-color: var(--signal); }
.svc__row:hover .svc__arrow svg, .svc__row:focus-visible .svc__arrow svg { stroke: var(--white); transform: rotate(-45deg); }

/* ---------- readiness ---------- */
.readiness { position: relative; background: var(--ink); padding: var(--sec) 0; overflow: hidden; isolation: isolate; }
.readiness__art { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(900px, 120vw); transform: translate(-50%, -50%); opacity: .5; }
.readiness__art img { width: 100%; height: auto; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.reticle { position: absolute; top: 120px; left: 50%; width: 64px; margin-left: -32px; color: var(--signal-hi); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.readiness .section-head { padding-top: 40px; }
.ledger { border-top: 1px solid var(--line-d); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.ledger li { border-bottom: 1px solid var(--line-d); }
.ledger a {
  display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr 110px 24px; gap: 20px; align-items: center;
  min-height: 60px; padding: 14px 16px; text-decoration: none; font-size: .8125rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.ledger b { font-weight: 500; color: var(--white); }
.ledger span { color: var(--muted-d); }
.ledger em { font-style: normal; color: var(--teal); justify-self: start; border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; font-size: .6875rem; }
.ledger em.members { color: var(--signal-hi); }
.ledger i { font-style: normal; color: var(--muted-d); transition: transform .25s var(--ease); }
.ledger a:hover, .ledger a:focus-visible { background: var(--signal); }
.ledger a:hover span, .ledger a:hover em, .ledger a:hover i,
.ledger a:focus-visible span, .ledger a:focus-visible em, .ledger a:focus-visible i { color: var(--white); }
.ledger a:hover i, .ledger a:focus-visible i { transform: translateX(4px); }

/* ---------- intelligence ---------- */
.intel { background: var(--paper); color: var(--navy); padding: var(--sec) 0; overflow: hidden; }
.intel__head { position: relative; text-align: center; max-width: 760px; margin: 0 auto clamp(64px, 9vw, 120px); padding: clamp(60px, 9vw, 120px) 0; }
.intel__head .h2 { position: relative; }
.intel__head .section-head__sub { margin: 20px auto 32px; }
.intel__ring { position: absolute; top: 50%; left: 50%; width: min(640px, 130vw); height: auto; transform: translate(-50%, -50%); overflow: visible; }
.intel__ring circle { fill: none; stroke: rgba(13, 27, 42, .28); stroke-width: 1.4; stroke-dasharray: 1 7; stroke-linecap: round; transform-origin: 200px 200px; animation: spin 90s linear infinite; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.cards li:nth-child(3n+2) { transform: translateY(80px); }
.card {
  display: block; position: relative; overflow: hidden; border-radius: 4px; text-decoration: none; color: var(--white);
  aspect-ratio: 4 / 5; background: var(--ink-3);
  box-shadow: 0 24px 50px -24px rgba(13, 27, 42, .45);
}
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 9, 12, .92) 0%, rgba(7, 9, 12, .35) 45%, transparent 70%); }
.card__body { position: absolute; inset: auto 0 0; z-index: 1; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.card__body .mono { color: var(--signal-hi); }
.card__body b { font: 800 1.375rem/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.card__desc { font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.card__open { font: 500 .75rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.card:hover img, .card:focus-visible img { transform: scale(1.06); }
.card:hover .card__open, .card:focus-visible .card__open { color: var(--signal-hi); }
.intel__more { margin-top: calc(80px + clamp(48px, 6vw, 80px)); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intel__more a {
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line-l); border-radius: 999px; padding: 14px 18px; min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color .2s, color .2s;
}
.intel__more a:hover { border-color: var(--signal); color: var(--signal); }

/* ---------- mission ---------- */
.mission { position: relative; background: var(--ink); padding: var(--sec) 0; overflow: hidden; isolation: isolate; }
.mission__art { position: absolute; inset: 0; z-index: -1; }
.mission__art img { width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: screen; }
.mission__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ink), transparent 30%, transparent 70%, var(--ink)); }
.mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.mission__grid .h2 { font-size: clamp(1.9rem, 3.8vw, 3.25rem); margin-bottom: 24px; }
.mission__grid p:not(.eyebrow) { color: var(--muted-d); font-size: 1.0625rem; max-width: 520px; }
.insight { margin-top: clamp(72px, 10vw, 140px); padding-top: 32px; border-top: 1px solid var(--line-d); display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.insight .mono { color: var(--signal-hi); padding-top: 8px; }
.insight__text { font: 500 clamp(1.25rem, 2.4vw, 2rem)/1.35 var(--f-body); letter-spacing: -.01em; text-wrap: pretty; }

/* ---------- founder ---------- */
.founder { background: var(--ink-2); padding: var(--sec) 0; border-top: 1px solid var(--line-d); }
.founder__grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.founder__photo { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 12px; }
.founder__photo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 200deg, var(--signal-hi), rgba(238, 91, 56, 0) 40%, rgba(47, 184, 174, 0) 55%, var(--teal) 75%, var(--signal-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.founder__photo::after { content: ""; position: absolute; inset: -10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(209, 62, 33, .22), transparent 65%); }
.founder__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.founder__role { color: var(--muted-d); margin: 16px 0 28px; }
.founder__text > p:not(.eyebrow):not(.mono):not(.fine) { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; max-width: 640px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; }
.chips li { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-d); border-radius: 999px; padding: 9px 14px; color: rgba(255, 255, 255, .8); }
.fine { margin-top: 24px; font-size: .8125rem; line-height: 1.5; color: var(--muted-d); max-width: 620px; }

/* ---------- stay informed ---------- */
.stay { background: var(--paper); color: var(--navy); padding: var(--sec) 0; }
.stay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.panel { background: var(--white); border-radius: 6px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; border: 1px solid var(--line-l); }
.panel .h3 { margin-bottom: 16px; }
.panel > p:not(.eyebrow):not(.fine) { color: var(--muted-l); }
.panel--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.panel--navy .eyebrow { color: var(--signal-hi); }
.panel--navy > p:not(.eyebrow) { color: rgba(255, 255, 255, .75); }
.ticks { margin: 24px 0 32px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.panel--navy .ticks li::before { border-color: var(--signal-hi); }
.panel__foot { margin-top: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.qr { display: flex; align-items: center; gap: 12px; color: var(--muted-l); }
.qr #qr { width: 84px; height: 84px; padding: 6px; background: var(--white); border: 1px solid var(--line-l); border-radius: 4px; }
.qr #qr img, .qr #qr canvas { width: 100% !important; height: 100% !important; }
.qr .mono { max-width: 90px; font-size: .625rem; }
.panel .fine { color: var(--muted-l); }

/* ---------- FAQ (answers in the firm's words; FAQPage data mirrors it) ---------- */
.faq { background: var(--paper); color: var(--navy); padding: 0 0 var(--sec); }
.faq__list { border-top: 1px solid var(--line-l); }
.faq__item { border-bottom: 1px solid var(--line-l); }
.faq__item summary {
  display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 16px;
  min-height: 44px; padding: clamp(20px, 2.4vw, 30px) 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .mono { color: var(--muted-l); }
.faq__item summary h3 {
  font: 700 clamp(1.125rem, 2vw, 1.625rem)/1.2 var(--f-display); font-stretch: 106%; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq__item summary i { position: relative; width: 44px; height: 44px; border: 1px solid var(--line-l); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--navy); transition: transform .3s var(--ease), background-color .2s; }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item summary:hover h3, .faq__item summary:focus-visible h3 { color: var(--signal); }
.faq__item summary:hover i, .faq__item[open] summary i { background: var(--signal); border-color: var(--signal); }
.faq__item summary:hover i::before, .faq__item summary:hover i::after,
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: var(--white); }
.faq__item p { margin: 0 0 clamp(24px, 3vw, 36px) 80px; max-width: 760px; color: var(--muted-l); font-size: 1.0625rem; line-height: 1.65; }
.faq__item p a { color: var(--navy); text-decoration-color: var(--signal); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .faq__item summary { grid-template-columns: 1fr 44px; }
  .faq__item summary .mono { display: none; }
  .faq__item p { margin-left: 0; }
}

/* ---------- incident ---------- */
.incident { background: var(--signal); color: var(--white); padding: clamp(40px, 5vw, 64px) 0; }
.incident__row { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.incident p { margin-top: 8px; color: rgba(255, 255, 255, .9); }

/* ---------- contact ---------- */
.contact { position: relative; background: var(--paper); color: var(--navy); padding: var(--sec) 0 clamp(64px, 8vw, 120px); overflow: hidden; isolation: isolate; }
.arches { position: absolute; inset: 0 0 auto; width: 100%; height: clamp(300px, 46vw, 560px); z-index: -1; color: var(--white); opacity: .9; }
.contact__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.orb {
  width: clamp(180px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%;
  background: var(--signal); color: var(--white); text-decoration: none;
  display: grid; place-items: center;
  font: 800 clamp(1rem, 1.6vw, 1.375rem)/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase;
  margin-top: clamp(80px, 13vw, 200px);
  box-shadow: 0 30px 60px -20px rgba(209, 62, 33, .55);
  transition: transform .4s var(--ease), background-color .2s;
}
.orb:hover { transform: scale(1.05); background: #B8341A; }
.contact__lede { margin-top: 40px; max-width: 520px; font-size: 1.0625rem; color: var(--muted-l); }
.contact__meta { margin: 36px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; }
.contact__meta dt { color: var(--muted-l); margin-bottom: 8px; }
.contact__meta dd { margin: 0; font: 500 .9375rem/1.5 var(--f-mono); }
.contact__meta a { text-decoration: none; border-bottom: 1px solid var(--line-l); }
.contact__meta a:hover { color: var(--signal); border-color: var(--signal); }
.contact__member { margin-top: 28px; max-width: 520px; font-size: .9375rem; color: var(--muted-l); }

/* ---------- footer ---------- */
.foot { background: var(--paper); color: var(--navy); padding: 0 0 40px; }
.foot__cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; border-top: 1px solid var(--line-l); padding-top: 56px; }
.foot__brand img { width: 150px; height: auto; margin-bottom: 18px; }
.foot__brand p { font-size: .9375rem; color: var(--muted-l); max-width: 260px; }
.foot nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot nav .mono { color: var(--signal); margin: 0 0 12px; }
.foot nav .mono:not(:first-child) { margin-top: 24px; }
.foot nav a { font-size: .875rem; color: var(--muted-l); text-decoration: none; padding: 5px 0; }
.foot nav a:hover { color: var(--navy); text-decoration: underline; }
.foot__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-l); font: 400 .75rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-l); }

/* ---------- home intro (html.intro is set in <head> once a visit) ----------
   The shield over the drawing ring grid, then the shield blurs out while the
   eclipse and the headline sharpen in; the header comes last. */
.splash { display: none; }
html.intro .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 250; pointer-events: none; }
html.intro .splash img { width: clamp(60px, 6.5vw, 92px); height: auto; animation: introMark 1.75s var(--ease) .25s both; }
@keyframes introMark {
  0% { opacity: 0; transform: scale(.86); filter: blur(10px); }
  30%, 66% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: scale(1.14); filter: blur(14px); }
}
html.intro .hero__grid { animation: gridGlow 2.8s ease .1s backwards; }
html.intro .hero__grid :is(circle, line) { stroke-dasharray: 1; animation: draw 1.7s cubic-bezier(.6, 0, .2, 1) .15s backwards; }
@keyframes gridGlow { 0% { color: rgba(255, 255, 255, 0); } 25% { color: rgba(255, 255, 255, .2); } 100% { color: rgba(255, 255, 255, .07); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* on the pictures inside each layer, not on .hero__art: animating that would make it a stacking
   context, the layers would stop screen-blending into the hero and the still's black edges show */
html.intro :is(.hero__layer img, .hero__glint) { animation: introArt 1.6s var(--ease) 1.25s backwards; }
@keyframes introArt { from { opacity: 0; transform: scale(1.18); filter: blur(24px); } }
html.intro :where(.hero__inner > :not(.hero__title), .hero__title span, .hero__frameworks) { animation: introText 1.1s var(--ease) backwards; }   /* :where keeps this below the delay rules */
html.intro .hero__title .l1 { animation-delay: 1.45s; }
html.intro .hero__title .l2 { animation-delay: 1.6s; }
html.intro .hero__inner > .eyebrow { animation-delay: 1.55s; }
html.intro .hero__lede { animation-delay: 1.85s; }
html.intro .hero__cta { animation-delay: 2s; }
html.intro .hero__frameworks { animation-delay: 2.15s; }
@keyframes introText { from { opacity: 0; filter: blur(16px); transform: translateY(18px) scale(1.03); } }
html.intro .top { animation: introTop .9s var(--ease) 2.05s backwards; }
@keyframes introTop { from { opacity: 0; transform: translateY(-12px); } }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.rings .ring:nth-child(2), .cards li:nth-child(3n+2) .card { transition-delay: .08s; }
.rings .ring:nth-child(3), .cards li:nth-child(3n) .card { transition-delay: .16s; }
.rings .ring:nth-child(4) { transition-delay: .24s; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav, .pill { display: none; }
  .menu-btn { display: block; }
  .rings { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; }
  .svc__row { grid-template-columns: 1fr 48px; gap: 12px 20px; }
  .svc__tag { grid-column: 1 / -1; }
  .svc__desc { grid-column: 1; }
  .svc__arrow { grid-row: 2 / 4; grid-column: 2; align-self: center; }
  .ledger a { grid-template-columns: 1fr auto 20px; }
  .ledger span { grid-column: 1; grid-row: 2; font-size: .6875rem; }
  .ledger em { grid-column: 2; grid-row: 1 / 3; }
  .ledger i { grid-column: 3; grid-row: 1 / 3; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards li:nth-child(3n+2) { transform: none; }
  .cards li:nth-child(2n) { transform: translateY(56px); }
  .intel__more { margin-top: 110px; }
  .founder__grid { grid-template-columns: 1fr; }
  .founder__photo { max-width: 320px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --bar-h: 64px; }
  .brand { width: 96px; height: 46px; }
  .hero__frameworks { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero__frameworks ul { justify-content: flex-start; gap: 10px 18px; font-size: .6875rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .statement { height: 200vh; }
  .rings { gap: 10px; }
  .ring { padding: 10%; }
  .ring p { font-size: .8125rem; }
  .ring h3 { font-size: .875rem; }
  .ring .mono { margin-bottom: 6px; }
  .cards { grid-template-columns: 1fr; }
  .cards li:nth-child(2n) { transform: none; }
  .intel__more { margin-top: 56px; }
  .mission__grid { grid-template-columns: 1fr; }
  .insight { grid-template-columns: 1fr; gap: 12px; }
  .stay__grid { grid-template-columns: 1fr; }
  .qr { display: none; }
  .foot__cols { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .rings { grid-template-columns: 1fr; max-width: 300px; }
  .ring p { font-size: .9375rem; }
  .ring h3 { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .statement { height: auto; }
  .statement__sticky { position: static; height: auto; padding: var(--sec) var(--gutter); }
  .statement__orb { display: none; }
  .statement__text .w { color: var(--white); }
  .statement__text .hl .w { color: var(--signal-hi); }
  .dawn { height: clamp(160px, 30vh, 320px); background: linear-gradient(var(--ink), var(--paper)); }
  .dawn__sticky, .dusk__sticky { display: none; }
  .dusk { height: clamp(160px, 30vh, 320px); background: linear-gradient(var(--paper), var(--ink)); }
  .hero__layer { scale: none; rotate: none; }
  .hero__corona { opacity: .45; }
  .hero__glint { display: none; }
}