/* ============================================================
   HYPATIUS — Flagship homepage. Page-specific layer on top of
   the design system (styles.css). Blackout, cinematic.
   ============================================================ */

:root {
  --nav-h: 76px;
  --accent-hero: var(--aqua-400);      /* flips to gold via [data-accent="gold"] */
  --accent-hero-soft: rgba(79,195,217,0.5);
}
[data-accent="gold"] {
  --accent-hero: var(--gold-500);
  --accent-hero-soft: rgba(201,169,97,0.5);
}

html { scroll-padding-top: var(--nav-h); }
body { background: var(--void-black); }
::selection { background: var(--cobalt-500); color:#fff; }

/* slim scrollbar */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--void-black); }
body::-webkit-scrollbar-thumb { background: var(--navy-600); }

.wrap { overflow-x: clip; }

/* ============================================================ NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h); display: flex; align-items: center;
  transition: background var(--dur) ease, border-color var(--dur) ease, backdrop-filter var(--dur) ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(6,15,28,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--slate-200);
}
.nav__inner { width:100%; max-width: 1400px; margin:0 auto; padding-inline: clamp(1.25rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav__brand { display:flex; align-items:center; gap:0.7rem; }
.nav__dot { width:8px; height:8px; border-radius:50%; background: var(--accent-hero);
  box-shadow: 0 0 8px var(--accent-hero); flex:none; }
.nav__brand img { height: 26px; width:auto; }
.nav__links { display:flex; align-items:center; gap: clamp(1rem,2.2vw,2.1rem); }
.nav__link { white-space:nowrap; font-family: var(--font-body); font-weight:600; font-size:0.92rem; letter-spacing:0.04em;
  color: var(--slate-300); position:relative; padding: 0.3rem 0; transition: color var(--dur-fast); }
.nav__link:hover { color:#fff; }
.nav__link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--accent-hero); transition: width var(--dur-fast) var(--ease-out); }
.nav__link:hover::after { width:100%; }
.nav__right { display:flex; align-items:center; gap:1.25rem; }
.nav .btn, .plat__cta, .status-badge, .ctaband .btn, .creds__vehicles span, .cap__tags span { white-space:nowrap; }
.nav__burger { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__burger span { width:24px; height:2px; background:#fff; display:block; transition: var(--dur-fast); }

/* mobile drawer */
.drawer { position: fixed; inset:0; z-index:99; background: rgba(6,15,28,0.97);
  backdrop-filter: blur(8px); display:flex; flex-direction:column; justify-content:center;
  gap:0.5rem; padding: 2rem clamp(1.5rem,6vw,3rem); transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out); }
.drawer--open { transform: translateX(0); }
.drawer a { font-family: var(--font-display); font-size: 2rem; letter-spacing:0.02em; color:#fff;
  padding: 0.5rem 0; border-bottom:1px solid var(--slate-200); }
.drawer a:hover { color: var(--accent-hero); }
.drawer__close { position:absolute; top:24px; right:24px; font-family:var(--font-mono);
  font-size:0.8rem; letter-spacing:0.18em; color: var(--accent-hero); }

/* ============================================================ HERO */
.hero { position: relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__img { position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.1s var(--ease-out); transform: scale(1.04); }
.hero__img--battlespace { background-image:url('img/hero-launch.jpg'); background-position:center 42%; }
.hero__img--orbital { background-image:url('img/hero-orbital-v2.jpg'); background-position:center 35%; }
[data-hero="battlespace"] .hero__img--battlespace,
[data-hero="type"] .hero__img--battlespace,
[data-hero="orbital"] .hero__img--orbital { opacity:1; }
/* type-forward: dim the photo further, let type dominate */
[data-hero="type"] .hero__veil { background:
  linear-gradient(90deg, rgba(4,9,15,0.96) 0%, rgba(4,9,15,0.86) 45%, rgba(4,9,15,0.6) 100%),
  linear-gradient(0deg, rgba(4,9,15,0.95) 0%, rgba(4,9,15,0.2) 55%); }
.hero__veil { position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(4,9,15,0.92) 0%, rgba(4,9,15,0.62) 42%, rgba(4,9,15,0.28) 100%),
  linear-gradient(0deg, rgba(4,9,15,0.95) 0%, rgba(4,9,15,0.12) 52%); }
.hero canvas#stars { position:absolute; inset:0; z-index:-1; opacity:0.7; pointer-events:none; }

.hero__inner { width:100%; max-width:1400px; margin:0 auto; padding: calc(var(--nav-h) + 4vh) clamp(1.25rem,4vw,3rem) 8vh; }
.hero__col { max-width: 60rem; }
.hero__badge { margin-bottom: 1.6rem; }
.hero__title { font-family: var(--font-display); font-weight:400; color:#fff;
  font-size: clamp(3rem, 7vw, 6.6rem); line-height:0.92; letter-spacing:0.015em; margin-bottom:1.4rem; max-width:14ch; }
.hero__title .sig { color: var(--accent-hero); }
.hero__title .ghost { color: transparent; -webkit-text-stroke: 1.4px rgba(242,246,250,0.55); }
.hero__sub { font-size: clamp(1.1rem,1.6vw,1.45rem); line-height:1.55; color: var(--slate-300);
  max-width: 44ch; font-weight:500; }
.hero__sub b { color:#fff; font-weight:700; }
.hero__cred { font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.2em;
  color: var(--slate-400); margin-top:1.8rem; text-transform:uppercase; }
.hero__ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }

/* status ticker under hero edge */
.ticker { border-block:1px solid var(--slate-200); background: rgba(6,15,28,0.7);
  overflow:hidden; white-space:nowrap; }
.ticker__track { display:inline-flex; gap:3.5rem; padding-block:0.85rem; animation: tick 38s linear infinite; }
.ticker__track:hover { animation-play-state: paused; }
.ticker__item { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.18em;
  color: var(--slate-400); text-transform:uppercase; display:inline-flex; align-items:center; gap:0.8rem; }
.ticker__item::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-hero); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============================================================ SECTION SHELL */
.s { padding-block: var(--section-y); position:relative; }
.s--void { background: var(--void-black); }
.s--navy { background: var(--navy-900); }
.s--panel { background: var(--navy-800); }
.cont { max-width: 1280px; margin:0 auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.cont--wide { max-width: 1400px; }
.sec-head { max-width: 60rem; }
.sec-head .eyebrow { margin-bottom: 1.1rem; }
.sec-title { font-family: var(--font-display); color: var(--ink-bright); font-weight:400;
  font-size: clamp(2.3rem, 4.6vw, 4rem); line-height:0.98; letter-spacing:0.015em; }
.sec-title .sig { color: var(--accent-hero); }
.sec-lede { font-size: 1.2rem; color: var(--slate-400); max-width: 52ch; margin-top:1.4rem; line-height:1.6; }

/* ============================================================ MANIFESTO */
.manifesto { padding-block: clamp(6rem,12vw,11rem); background: var(--void-black); position:relative; }
.manifesto__line { font-family: var(--font-display); font-weight:400;
  font-size: clamp(2.2rem, 5.6vw, 5rem); line-height:1.02; letter-spacing:0.015em;
  color: var(--slate-500); max-width: 24ch; }
.manifesto__line .on { color: var(--ink-bright); }
.manifesto__line .sig { color: var(--accent-hero); }
.manifesto__foot { margin-top: 3rem; display:flex; gap: 2.5rem; flex-wrap:wrap; }
.manifesto__stat .n { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem);
  color:#fff; line-height:1; }
.manifesto__stat .l { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.16em;
  color: var(--slate-400); text-transform:uppercase; margin-top:0.5rem; max-width:20ch; }

/* ============================================================ PORTFOLIO — SHOWCASE */
.plat { position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden;
  border-top:1px solid var(--slate-200); }
.plat__bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.plat__wordmark { display:block; height: clamp(2.6rem,5.2vw,4.6rem); width:auto; margin:1.1rem 0 0.6rem; }
.plat__wordmark + .plat__name { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
.plat__veil { position:absolute; inset:0; z-index:1; }
.plat--left .plat__veil { background: linear-gradient(90deg, rgba(4,9,15,0.94) 0%, rgba(4,9,15,0.7) 42%, rgba(4,9,15,0.22) 100%); }
.plat--right { justify-content:flex-end; text-align:right; }
.plat--right .plat__veil { background: linear-gradient(270deg, rgba(4,9,15,0.94) 0%, rgba(4,9,15,0.7) 42%, rgba(4,9,15,0.22) 100%); }
.plat__inner { position:relative; z-index:2; max-width:1400px; width:100%; margin:0 auto;
  padding-inline: clamp(1.25rem,4vw,3rem); }
.plat__card { max-width: 38rem; }
.plat--right .plat__card { margin-left:auto; }
.plat__index { font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.22em;
  color: var(--slate-400); display:flex; align-items:center; gap:0.8rem; }
.plat--right .plat__index { justify-content:flex-end; }
.plat__name { font-family: var(--font-display); font-weight:400; font-size: clamp(3.4rem,7vw,6.5rem);
  line-height:0.92; letter-spacing:0.02em; color:#fff; margin:1rem 0 0.4rem; }
.plat__tag { font-family: var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:0.04em;
  color: var(--accent-hero); margin-bottom:1.3rem; }
.plat--craton .plat__tag { color: var(--gold-500); }
.plat__desc { font-size:1.18rem; line-height:1.6; color: var(--slate-300); max-width:40ch; }
.plat--right .plat__desc { margin-left:auto; }
.plat__metrics { display:flex; gap:2.2rem; margin-top:1.8rem; flex-wrap:wrap; }
.plat--right .plat__metrics { justify-content:flex-end; }
.plat__m .mn { font-family:var(--font-display); font-size:1.9rem; color:#fff; line-height:1; }
.plat__m .ml { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em;
  color:var(--slate-400); text-transform:uppercase; margin-top:0.4rem; }
.plat__cta { margin-top:2rem; display:inline-flex; }
.plat--right .plat__cta { }
.plat__alidade-logo { height: 64px; width:auto; margin-bottom:1rem; }

/* PORTFOLIO — TILES variant */
[data-portfolio="tiles"] .plat { display:none; }
.tiles { display:none; }
[data-portfolio="tiles"] .tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
.tile { position:relative; min-height: 30rem; display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem; border:1px solid var(--slate-200); overflow:hidden; isolation:isolate;
  transition: border-color var(--dur); }
.tile::before { content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.tile::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(0deg, rgba(4,9,15,0.95) 8%, rgba(4,9,15,0.45) 60%, rgba(4,9,15,0.2) 100%); }
.tile:hover { border-color: var(--accent-hero); }
.tile--starchitect::before { background-image:url('img/plat-starchitect.jpg'); }
.tile--alidade::before { background-image:url('img/plat-alidade.jpg'); }
.tile--craton::before { background-image:url('img/plat-craton.jpg'); }
.tile__top { position:absolute; top:0; left:0; right:0; height:3px; }
.tile--starchitect .tile__top { background: var(--accent-hero); }
.tile--alidade .tile__top { background: linear-gradient(90deg,#7ee0d4,#9b8cf0,#f0c0d8); }
.tile--craton .tile__top { background: var(--gold-500); }
.tile__name { font-family:var(--font-display); font-size:2.6rem; color:#fff; line-height:0.95; letter-spacing:0.02em; }
.tile__tag { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.16em; color:var(--accent-hero);
  text-transform:uppercase; margin:0.6rem 0 0.8rem; }
.tile--craton .tile__tag { color: var(--gold-500); }
.tile__desc { color:var(--slate-300); font-size:1rem; line-height:1.55; }

/* PORTFOLIO — STACK variant (OS layers) */
.stack { display:none; }
[data-portfolio="stack"] .plat { display:none; }
[data-portfolio="stack"] .stack { display:flex; flex-direction:column; gap:0; max-width: 1100px; margin:0 auto;
  border:1px solid var(--slate-200); }
.layer { position:relative; display:grid; grid-template-columns: 220px 1fr auto; gap:2rem; align-items:center;
  padding: 2.4rem clamp(1.5rem,3vw,2.6rem); border-bottom:1px solid var(--slate-200);
  transition: background var(--dur); overflow:hidden; }
.layer:last-child { border-bottom:none; }
.layer:hover { background: rgba(26,79,186,0.08); }
.layer__rail { position:absolute; left:0; top:0; bottom:0; width:3px; }
.layer--s .layer__rail { background: var(--accent-hero); }
.layer--a .layer__rail { background: linear-gradient(#7ee0d4,#9b8cf0,#f0c0d8); }
.layer--c .layer__rail { background: var(--gold-500); }
.layer__name { font-family:var(--font-display); font-size:2.4rem; color:#fff; line-height:0.95; }
.layer__role { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--slate-400);
  text-transform:uppercase; margin-top:0.4rem; }
.layer__desc { color:var(--slate-300); font-size:1.05rem; line-height:1.55; max-width:46ch; }

/* ============================================================ CAPABILITIES */
.cap-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.cap { padding:2.2rem; background: var(--surface-card); border:1px solid var(--slate-200);
  position:relative; transition: border-color var(--dur); }
.cap::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--cobalt-500);
  opacity:0; transition: opacity var(--dur); }
.cap:hover { border-color: var(--cobalt-400); }
.cap:hover::before { opacity:1; }
.cap__num { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.2em; color: var(--accent-hero); }
.cap__title { font-family:var(--font-display); font-size:1.9rem; color:var(--ink-bright); letter-spacing:0.02em;
  margin:0.9rem 0 0.7rem; line-height:1; }
.cap__desc { color:var(--slate-400); line-height:1.6; }
.cap__tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.3rem; }
.cap__tags span { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--slate-400); border:1px solid var(--slate-200); padding:0.3rem 0.6rem; }

/* ============================================================ WHY / UNDERDOG */
.why { position:relative; overflow:hidden; }
.why__grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.why__media { position:relative; aspect-ratio: 1.5; border:1px solid var(--slate-200); overflow:hidden; background:#04090F; }
.why__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.why__points { display:flex; flex-direction:column; gap:1.6rem; margin-top:2.4rem; }
.why__pt { display:grid; grid-template-columns: auto 1fr; gap:1.1rem; }
.why__pt .k { font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.14em; color:var(--accent-hero);
  padding-top:0.25rem; }
.why__pt .t { color:var(--slate-300); line-height:1.6; }
.why__pt .t b { color:#fff; font-weight:700; }

/* ============================================================ VISION */
.vision { position:relative; overflow:hidden; isolation:isolate; }
.vision__bg { position:absolute; inset:0; z-index:-2; background:url('img/shield.jpg') center/cover; transform:scale(1.05); }
.vision__veil { position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(4,9,15,0.78) 0%, rgba(4,9,15,0.86) 100%); }
.vision__inner { max-width: 60rem; }
.vision__big { font-family:var(--font-display); font-weight:400; color:#fff;
  font-size: clamp(2.6rem,5.4vw,5rem); line-height:0.98; letter-spacing:0.015em; margin-top:1.2rem; }
.vision__big .sig { color: var(--accent-hero); }
.vision__sub { font-size:1.2rem; color:var(--slate-300); line-height:1.65; max-width:54ch; margin-top:1.6rem; }

/* ============================================================ LEADERSHIP */
.founders__grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; margin-top:3.5rem; }
.fnd { background: var(--surface-card); border:1px solid var(--slate-200); padding:1.8rem;
  transition: border-color var(--dur); position:relative; }
.fnd:hover { border-color: var(--cobalt-400); }
/* compact leadership teaser (home) */
.lead-row { display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background: var(--slate-200);
  border:1px solid var(--slate-200); margin-top:3rem; }
.lead-row .ld { background: var(--surface-card); padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:0.9rem;
  transition: background var(--dur); }
.lead-row .ld:hover { background: var(--navy-800); }
.ld__photo { width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--slate-200); }
.ld__name { font-family:var(--font-display); font-size:1.45rem; color:#fff; line-height:0.95; letter-spacing:0.02em; }
.ld__role { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-hero); margin-top:0.35rem; line-height:1.5; }
.fnd__head { display:flex; align-items:center; gap:1.1rem; }
.fnd__photo { width:78px; height:78px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--slate-200); filter: grayscale(0.15); }
.fnd__name { font-family:var(--font-display); font-size:1.7rem; color:#fff; line-height:0.95; letter-spacing:0.02em; }
.fnd__role { font-family:var(--font-body); font-weight:700; font-size:0.92rem; color:var(--accent-hero);
  letter-spacing:0.03em; margin-top:0.25rem; }
.fnd__disc { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; color:var(--slate-400);
  text-transform:uppercase; margin-top:0.4rem; }
.fnd__bio { color:var(--slate-400); line-height:1.6; margin-top:1.2rem; font-size:0.98rem; }
.fnd--lead { grid-column: span 2; display:grid; grid-template-columns: auto 1fr; gap:2rem; align-items:center; }
.fnd--lead .fnd__photo { width:120px; height:120px; }
.fnd--lead .fnd__name { font-size:2.4rem; }

/* ============================================================ FIELD NOTES */
.posts { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.post { display:flex; flex-direction:column; gap:0.9rem; padding:1.8rem; border:1px solid var(--slate-200);
  background: var(--surface-card); transition: border-color var(--dur); min-height:16rem; }
.post:hover { border-color: var(--cobalt-400); }
.post__cat { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.16em; color:var(--accent-hero);
  text-transform:uppercase; }
.post__title { font-family:var(--font-body); font-weight:700; font-size:1.25rem; color:var(--ink-bright);
  line-height:1.3; }
.post__by { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--slate-400);
  margin-top:auto; }

/* ============================================================ CREDENTIALS STRIP */
.creds { display:grid; grid-template-columns: 1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.creds__badge img { width: 132px; height:auto; opacity:0.92; }
.creds__slot { width:132px; height:132px; border:1px dashed var(--slate-300); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0.8rem; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--slate-500); line-height:1.6; }

/* ============================================================ MDO FLOW DIAGRAM */
.mdo { margin-top:3.5rem; border:1px solid var(--slate-200); background: var(--navy-900); padding: clamp(1.4rem,3vw,2.6rem); }
.mdo__grid { display:grid; grid-template-columns: 200px 80px 1fr 80px 260px; gap:0; align-items:stretch; }
.mdo__hdr { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--slate-400);
  padding-bottom:0.9rem; margin-bottom:1.2rem; border-bottom:1px solid var(--slate-200); display:flex; justify-content:space-between; gap:1rem; }
.mdo__hdr b { color:var(--accent-hero); font-weight:500; }
.mdo__domains { display:flex; flex-direction:column; justify-content:space-between; gap:0.5rem; }
.mdo__dom { border:1px solid var(--slate-200); background: var(--surface-card); padding:0.75rem 0.9rem; display:flex; align-items:center; gap:0.7rem; }
.mdo__dom::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--accent-hero); box-shadow:0 0 8px var(--accent-hero); flex:none; }
.mdo__dom .n { font-family:var(--font-display); font-size:1.35rem; color:#fff; letter-spacing:0.03em; line-height:1; }
.mdo__dom .sub { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-500); margin-top:0.2rem; }
.mdo__conn { display:block; width:100%; height:100%; min-height:100%; }
.mdo__conn path, .mdo__conn line { stroke: var(--cobalt-400); stroke-width:1.2; fill:none; vector-effect:non-scaling-stroke; }
.mdo__conn .arr { stroke: var(--accent-hero); }
.mdo__arrow { display:flex; align-items:center; justify-content:flex-end; position:relative; color:var(--accent-hero); font-size:1.3rem; padding-right:4px; }
.mdo__arrow::before { content:""; position:absolute; left:0; right:16px; top:50%; height:1px; background: var(--accent-hero); }
.mdo__arrow::after { content:"\2192"; line-height:1; }
.mdo__info { border:1px solid var(--cobalt-500); background: rgba(26,79,186,0.08); padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:1.1rem; position:relative; }
.mdo__info::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--cobalt-500); }
.mdo__title { font-family:var(--font-display); font-size:1.6rem; color:#fff; letter-spacing:0.02em; line-height:1; }
.mdo__sub { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-400); margin-top:0.35rem; }
.mdo__nodes { display:grid; grid-template-columns: repeat(3,1fr); gap:0.6rem; }
.mdo__node { border:1px solid var(--slate-200); background: var(--navy-900); padding:0.7rem 0.8rem; text-align:center; }
.mdo__node .n { font-family:var(--font-display); font-size:1.25rem; color:#fff; letter-spacing:0.04em; line-height:1; }
.mdo__node .sub { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-500); margin-top:0.3rem; }
.mdo__fabric { display:flex; align-items:center; gap:0.8rem; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-300); }
.mdo__fabric::before, .mdo__fabric::after { content:""; flex:1; height:1px; background: linear-gradient(90deg, var(--cobalt-500), var(--accent-hero)); }
.mdo__fabric::after { background: linear-gradient(90deg, var(--accent-hero), var(--cobalt-500)); }
.mdo__pipe { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.mdo__pipe span { font-family:var(--font-body); font-weight:700; font-size:0.95rem; letter-spacing:0.05em; color:#fff; border:1px solid var(--slate-200); padding:0.4rem 0.8rem; background: var(--surface-card); }
.mdo__pipe i { font-style:normal; color:var(--accent-hero); font-family:var(--font-mono); }
.mdo__decide { border:1px solid var(--accent-hero); background: rgba(79,195,217,0.06); padding:1.3rem 1.4rem; display:flex; flex-direction:column; justify-content:center; gap:0.9rem; position:relative; }
.mdo__decide::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--accent-hero); }
.mdo__big { font-family:var(--font-display); font-size: clamp(2.6rem,4vw,3.6rem); color:var(--accent-hero); letter-spacing:0.03em; line-height:0.95; }
.mdo__expand { font-size:0.92rem; color:var(--slate-300); line-height:1.5; }
.mdo__measures { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-400); border-top:1px solid var(--slate-200); padding-top:0.8rem; line-height:1.7; }
.mdo__loop { grid-column: 3 / 6; margin-top:1.1rem; display:flex; align-items:center; gap:0.9rem; font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-300); }
.mdo__loop::before { content:""; flex:1; height:0; border-top:1px dashed var(--accent-hero); }
.mdo__loop::after { content:"\2190"; color:var(--accent-hero); font-size:1rem; }
.mdo__loop b { color:#fff; font-weight:500; }
.mdo__cap { margin-top:1.4rem; font-size:0.95rem; color:var(--slate-400); line-height:1.6; max-width:70ch; }
@media (max-width: 960px) {
  .mdo__grid { grid-template-columns:1fr; gap:1rem; }
  .mdo__conn, .mdo__arrow { display:none; }
  .mdo__domains { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
  .mdo__loop { grid-column:auto; }
  .lead-row { grid-template-columns: repeat(2,1fr); }
}
.creds__stamp { font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.14em; color:var(--slate-300);
  line-height:2; text-transform:uppercase; }
.creds__stamp .lab { color: var(--slate-500); }
.creds__vehicles { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.2rem; }
.creds__vehicles span { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--slate-400); border:1px solid var(--slate-200); padding:0.35rem 0.7rem; }

/* ============================================================ CTA BAND */
.ctaband { position:relative; overflow:hidden; isolation:isolate; padding-block: clamp(5rem,10vw,8rem); }
.ctaband__bg { position:absolute; inset:0; z-index:-2; background:url('img/cta-v2.jpg') center/cover; }
.ctaband__veil { position:absolute; inset:0; z-index:-1; background: rgba(4,9,15,0.62); }
.ctaband__row { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.ctaband__title { font-family:var(--font-display); font-weight:400; color:#fff; letter-spacing:0.015em;
  font-size: clamp(2.4rem,5vw,4.2rem); line-height:0.98; max-width:18ch; }

/* ============================================================ CONTACT */
.contact__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.fld { margin-bottom:1.2rem; }
.fld label { display:block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--slate-500); margin-bottom:0.5rem; }
.fld input, .fld textarea, .fld select { width:100%; padding:0.85rem 1rem; background: var(--navy-800);
  border:1px solid var(--slate-200); color:#fff; font-family:var(--font-body); font-size:1rem; border-radius:var(--radius);
  transition: border-color var(--dur-fast); }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline:none; border-color: var(--cobalt-400); }
.fld textarea { min-height:120px; resize:vertical; }
.contact__aside .row { display:flex; flex-direction:column; gap:0.3rem; padding:1.4rem 0;
  border-bottom:1px solid var(--slate-200); }
.contact__aside .row .lab { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--slate-500); }
.contact__aside .row .val { font-size:1.15rem; color:#fff; font-weight:600; }
.form__ok { padding:2.4rem; background:var(--surface-card); border-left:3px solid var(--accent-hero); }
.form__ok strong { font-family:var(--font-display); font-size:1.8rem; color:var(--ink-bright); display:block;
  letter-spacing:0.02em; margin-bottom:0.5rem; }

/* ============================================================ FOOTER */
.footer { background: var(--void-black); border-top:1px solid var(--slate-200); padding-block: 4rem 2.5rem; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer__brand img { height:30px; margin-bottom:1.2rem; }
.footer__brand p { color:var(--slate-400); max-width:34ch; line-height:1.6; font-size:0.95rem; }
.footer__col h4 { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--slate-500); margin-bottom:1rem; }
.footer__col a { display:block; color:var(--slate-300); padding:0.35rem 0; font-size:0.95rem; transition:color var(--dur-fast); }
.footer__col a:hover { color: var(--accent-hero); }
.footer__bottom { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center;
  margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--slate-200); }
.footer__bottom .mono { color:var(--slate-500); font-size:0.74rem; letter-spacing:0.14em; }
.footer__right { display:flex; align-items:center; gap:1rem; }
.footer__li { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--slate-400); border:1px solid var(--slate-200); transition:color var(--dur-fast), border-color var(--dur-fast); }
.footer__li:hover { color:var(--accent-hero); border-color:var(--accent-hero); }

/* ============================================================ TWEAKS PANEL */
#tweaks { position: fixed; right:20px; bottom:20px; z-index:400; width: 320px; max-width: calc(100vw - 40px);
  background: rgba(11,25,41,0.96); backdrop-filter: blur(14px); border:1px solid var(--slate-200);
  border-radius: var(--radius); padding: 1.2rem 1.3rem 1.4rem; display:none;
  font-family: var(--font-body); box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
#tweaks.on { display:block; }
.tw__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
  padding-bottom:0.8rem; border-bottom:1px solid var(--slate-200); }
.tw__head .t { font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.2em; color:var(--accent-hero); text-transform:uppercase; }
.tw__head button { font-family:var(--font-mono); font-size:0.72rem; color:var(--slate-400); }
.tw__head button:hover { color:#fff; }
.tw__grp { margin-bottom:1.1rem; }
.tw__grp > label { display:block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--slate-500); margin-bottom:0.5rem; }
.tw__seg { display:flex; gap:4px; }
.tw__seg button { flex:1; padding:0.5rem 0.4rem; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--slate-400); border:1px solid var(--slate-200); background:var(--navy-800);
  transition: var(--dur-fast); border-radius:var(--radius); }
.tw__seg button:hover { color:#fff; border-color:var(--slate-300); }
.tw__seg button.sel { background: var(--accent-hero); color: var(--navy-900); border-color: var(--accent-hero); font-weight:700; }

/* reveal end-state — double-class + !important to guarantee it wins the cascade */
.reveal.reveal--visible { opacity: 1 !important; transform: translateY(0) !important; }
/* forced static-visible state (backgrounded tabs / reduced motion / safety timeout) */
html.reveal-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reveal-off .hero__img { transition: none !important; }

/* ============================================================ INNER PAGES */
.subhero { position:relative; min-height: 64vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--slate-200); }
.subhero__bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transform:scale(1.04); }
.subhero__veil { position:absolute; inset:0; z-index:-1; background:
  linear-gradient(0deg, rgba(4,9,15,0.96) 0%, rgba(4,9,15,0.55) 50%, rgba(4,9,15,0.35) 100%),
  linear-gradient(90deg, rgba(4,9,15,0.7) 0%, rgba(4,9,15,0.2) 70%); }
.subhero__inner { width:100%; max-width:1400px; margin:0 auto; padding: calc(var(--nav-h) + 7vh) clamp(1.25rem,4vw,3rem) clamp(2.5rem,5vw,4rem); }
.subhero__title { font-family:var(--font-display); font-weight:400; color:#fff; letter-spacing:0.015em;
  font-size: clamp(3rem,7vw,6.5rem); line-height:0.9; margin:1.1rem 0 1.2rem; max-width:18ch; }
.subhero__title .sig { color: var(--accent-hero); }
.subhero__sub { font-size: clamp(1.1rem,1.5vw,1.4rem); color: var(--slate-300); max-width:52ch; line-height:1.55; }
.subhero__cred { font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.2em; color:var(--slate-400);
  text-transform:uppercase; margin-top:1.5rem; }

/* sticky in-page anchor nav for inner pages */
.subnav { position:sticky; top: var(--nav-h); z-index:80; background:rgba(6,15,28,0.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--slate-200); }
.subnav__inner { max-width:1400px; margin:0 auto; padding-inline:clamp(1.25rem,4vw,3rem); display:flex; gap:2rem;
  overflow-x:auto; }
.subnav a { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--slate-400); padding:1.1rem 0; white-space:nowrap; border-bottom:2px solid transparent; transition:var(--dur-fast); }
.subnav a:hover { color:#fff; }
.subnav a.active { color:var(--accent-hero); border-bottom-color:var(--accent-hero); }

.prose { max-width: 60ch; }
.prose p { color:var(--slate-300); font-size:1.18rem; line-height:1.7; margin-bottom:1.3rem; }
.prose p b { color:#fff; font-weight:700; }

/* split detail row (image + copy), alternating */
.detail { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.detail + .detail { margin-top: clamp(3rem,6vw,5rem); }
.detail--flip .detail__media { order:2; }
.detail__media { position:relative; aspect-ratio:1.4; border:1px solid var(--slate-200); overflow:hidden; background:#04090F; }
.detail__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail__media--logo { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0B1929,#04090F); }
.detail__media--logo img { position:static; width:auto; height:50%; object-fit:contain; }

/* spec list */
.specs { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--slate-200); margin-top:2rem; }
.specs div { padding:1.1rem 0; border-bottom:1px solid var(--slate-200); }
.specs .k { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-500); }
.specs .v { font-family:var(--font-display); font-size:1.5rem; color:#fff; margin-top:0.3rem; letter-spacing:0.02em; }

@media (max-width: 880px) {
  .detail, .specs { grid-template-columns:1fr; }
  .detail--flip .detail__media { order:0; }
}

/* ============================================================ ROLES (careers) */
.roles { border-top:1px solid var(--slate-200); margin-top:2.5rem; }
.role { display:grid; grid-template-columns: 1fr auto auto; gap:1.5rem; align-items:center; padding:1.6rem 0;
  border-bottom:1px solid var(--slate-200); transition: padding-left var(--dur) var(--ease-out); position:relative; }
.role::before { content:""; position:absolute; left:-1.5rem; top:0; bottom:0; width:2px; background:var(--accent-hero);
  transform:scaleY(0); transition: transform var(--dur) var(--ease-out); }
.role:hover { padding-left:1.5rem; }
.role:hover::before { transform:scaleY(1); }
.role__title { font-family:var(--font-display); font-size:1.7rem; color:#fff; letter-spacing:0.02em; line-height:1; }
.role__meta { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--slate-400);
  text-transform:uppercase; margin-top:0.5rem; }
.role__team { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--slate-400); border:1px solid var(--slate-200); padding:0.4rem 0.7rem; white-space:nowrap; }
.role__cta { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-hero); white-space:nowrap; }

/* numbered process steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.step__n { font-family:var(--font-display); font-size:3rem; color:var(--accent-hero); line-height:1; opacity:0.85; }
.step__t { font-family:var(--font-body); font-weight:700; font-size:1.15rem; color:var(--ink-bright); margin:0.7rem 0 0.5rem; }
.step__d { color:var(--slate-400); line-height:1.55; font-size:0.96rem; }

/* featured post */
.feature { display:grid; grid-template-columns: 1.15fr 0.85fr; gap:0; border:1px solid var(--slate-200);
  overflow:hidden; margin-top:3rem; }
.feature__media { position:relative; min-height:22rem; background-size:cover; background-position:center; }
.feature__body { padding: clamp(2rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; background:var(--surface-card); }
.feature__title { font-family:var(--font-display); font-weight:400; font-size: clamp(1.9rem,3vw,2.8rem); color:#fff;
  line-height:1.05; letter-spacing:0.01em; margin:1rem 0; }
.feature__excerpt { color:var(--slate-400); line-height:1.6; }

@media (max-width: 880px) {
  .role { grid-template-columns:1fr; gap:0.6rem; }
  .role__cta { display:none; }
  .steps { grid-template-columns:1fr 1fr; }
  .feature { grid-template-columns:1fr; }
  .feature__media { min-height:14rem; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .nav__links, .nav__right .btn { display:none; }
  .nav__burger { display:flex; }
}
@media (max-width: 880px) {
  .cap-grid, .founders__grid, .posts, [data-portfolio="tiles"] .tiles { grid-template-columns:1fr; }
  .why__grid, .contact__grid { grid-template-columns:1fr; }
  .fnd--lead { grid-column:auto; grid-template-columns:1fr; text-align:center; }
  .fnd--lead .fnd__head { flex-direction:column; text-align:center; }
  .creds { grid-template-columns:1fr; }
  .lead-row { grid-template-columns:1fr; }
  .layer { grid-template-columns:1fr; gap:0.6rem; }
  .plat { min-height: 78vh; }
  .form__row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; }
  .ticker__track { animation:none !important; }
  .hero__img { transform:none; }
}

/* ============================================================ MDO v2 FIGURES */
.mdofig { margin-top:2.5rem; }
.mdofig__lab { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate-500); margin-bottom:0.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mdofig__lab a { color:var(--accent-hero); }
.mdofig__frame { position:relative; width:100%; overflow:hidden; border:1px solid var(--slate-200); background:#0B1525; }
.mdofig__frame > div { transform-origin:top left; flex:none; }

/* ============================================================ MDO v2 RESPONSIVE FLOW */
.mdo2 { margin-top:2.5rem; }
.mdo2__flow { display:grid; grid-template-columns:minmax(0,1.1fr) 2.2rem minmax(0,0.9fr) 2.2rem minmax(0,1.45fr); align-items:stretch; }
.mdo2__col { display:flex; flex-direction:column; gap:0.4rem; padding:1rem; border:1px solid var(--slate-200); background:rgba(6,11,23,0.6); min-width:0; }
.mdo2__col--edge { border-color:#2A5A6B; } .mdo2__col--hybrid { border-color:#2F4E8F; } .mdo2__col--core { border-color:#8A6A28; }
.mdo2__colhead { display:flex; justify-content:space-between; gap:0.4rem 0.8rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-500); margin-bottom:0.4rem; }
.mdo2__colhead b { color:var(--ink-bright); font-weight:600; }
.mdo2__col--edge .mdo2__colhead span:first-child { color:#56C8D9; } .mdo2__col--hybrid .mdo2__colhead span:first-child { color:#7FA6F5; } .mdo2__col--core .mdo2__colhead span:first-child { color:#E2BC6B; }
.mdo2__item { flex:1; display:flex; align-items:center; gap:0.7rem; background:var(--navy-800); border:1px solid var(--slate-200); padding:0.6rem 0.8rem; min-height:3.3rem; min-width:0; }
.mdo2__col--edge .mdo2__item { border-left:3px solid #56C8D9; } .mdo2__col--core .mdo2__item { border-left:3px solid #D4A03B; }
.mdo2__item > div { min-width:0; }
.mdo2__item .n { font-weight:700; color:var(--ink-bright); font-size:0.98rem; line-height:1.15; }
.mdo2__item .sub { font-size:0.8rem; color:var(--slate-400); line-height:1.3; margin-top:2px; }
.mdo2__item .tag { margin-left:auto; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; color:#56C8D9; white-space:nowrap; }
.mdo2__item .num { font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:#D4A03B; width:1.1rem; flex:none; line-height:1; }
.mdo2__item--final { background:#16233C; border-color:#8A6A28; }
.mdo2__note { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-500); margin-top:0.3rem; }
.mdo2__note i { width:6px; height:6px; border-radius:50%; background:#7FA6F5; box-shadow:0 0 8px #7FA6F5; flex:none; }
.mdo2__lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin-top:0.3rem; }
.mdo2__lanes span { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:#E2BC6B; border:1px solid #5C4A22; background:#1C2A45; padding:0.45rem 0.5rem; text-align:center; line-height:1.3; }
.mdo2__arrow { display:flex; align-items:center; justify-content:center; color:#7FA6F5; font-size:1.4rem; }
.mdo2__arrow::before { content:"\2192"; }
.mdo2__return { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:1rem; margin-top:1rem; }
.mdo2__ret { border:1px dashed #8A6A28; padding:1rem; }
.mdo2__ret .k { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:#E2BC6B; }
.mdo2__ret p { font-size:0.9rem; color:var(--slate-400); line-height:1.45; margin:0.5rem 0 0; }
.mdo2__ret .sub { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-500); margin-top:0.6rem; }
.mdo2__levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.6rem; }
.mdo2__lvl { background:var(--navy-800); border:1px solid var(--slate-200); padding:0.8rem 0.9rem; min-width:0; }
.mdo2__lvl--el { border-color:#5C4A22; } .mdo2__lvl--im { border-color:#8A6A28; background:#16233C; }
.mdo2__lvlname { display:flex; align-items:center; gap:0.5rem; font-weight:700; color:var(--ink-bright); font-size:1rem; }
.mdo2__lvlname i { width:8px; height:8px; flex:none; }
.mdo2__lvl--im .mdo2__lvlname i { box-shadow:0 0 8px #D4A03B; }
.mdo2__lvl dl { margin:0.6rem 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.3rem 0.7rem; font-size:0.8rem; line-height:1.3; }
.mdo2__lvl dt { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-500); padding-top:3px; }
.mdo2__lvl dd { margin:0; color:var(--slate-400); }
.mdo2__lvl--im dd { color:var(--ink-bright); }
@media (max-width:900px) { .mdo2__flow { grid-template-columns:1fr; } .mdo2__arrow { height:2.2rem; } .mdo2__arrow::before { content:"\2193"; } .mdo2__return, .mdo2__levels { grid-template-columns:1fr; } }
