/* =========================================================================
   Sidus Strategic Solutions — visual system  (v02 "Constellation", elevated)
   Night-sky ground · starlight-gold accent · editorial-luxe, founder-led.
   Committed single (dark) world by design, matching the brand collateral.
   ========================================================================= */

/* ---- Self-hosted variable fonts (offline, no CDN) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --ink:        #0E1015;   /* page ground — near-black, faint cool bias */
  --ink-2:      #12151C;   /* alternating band */
  --surface:    #171B24;   /* cards, panels */
  --surface-2:  #1F2432;   /* raised / hover */
  --hair:       rgba(199, 203, 209, 0.10);
  --hair-2:     rgba(199, 203, 209, 0.16);
  --hair-gold:  rgba(214, 172, 84, 0.28);

  --text:       #EDEFF3;
  --platinum:   #C4C9D2;
  --muted:      #8B93A1;

  --gold:       #D6AC54;
  --gold-bright:#F0D188;
  --gold-deep:  #9E7A2E;
  --gold-soft:  rgba(214, 172, 84, 0.12);
  --gold-rgb:   214, 172, 84;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-y: clamp(4.75rem, 10vw, 8.5rem);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--platinum);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--gold-rgb), 0.28); color: #fff; }

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }

/* ---- Filmic grain (fixed, whole page) ---- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--serif); color: var(--text);
  font-weight: 460; line-height: 1.08; letter-spacing: -0.015em;
  text-wrap: balance; margin: 0;
}
h2 { font-size: clamp(2.05rem, 4vw, 3.15rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; background: var(--gold);
  transform: rotate(45deg); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
}

/* chapter kicker: faint serif index + eyebrow */
.kicker { display: flex; align-items: baseline; gap: 0.9rem; }
.kicker__idx {
  font-family: var(--serif); font-size: 0.95rem; font-weight: 500;
  color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  position: relative; padding-right: 0.9rem;
}
.kicker__idx::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 0.5rem; height: 1px;
  background: var(--hair-gold);
}
.kicker--center { justify-content: center; }

.lead { color: var(--platinum); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65; }
.measure { max-width: 62ch; }

/* ---- Layout ---- */
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--ink-2); }
.section__head { max-width: 64ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section__head h2 { margin-top: 1rem; }
.section__head .lead { margin-top: 1.1rem; max-width: 58ch; }

/* Divider with a star node */
.starrule { display: flex; align-items: center; gap: 1rem; color: var(--hair-gold); }
.starrule::before, .starrule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--hair-2), transparent);
}
.starrule i {
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none;
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55);
}

/* ---- Navigation ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(12, 14, 19, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--hair);
  padding-block: 0.65rem;
}
.nav.is-stuck .nav__logo img { height: 34px; }
.nav__logo img { height: 40px; width: auto; transition: height 0.4s var(--ease); }
.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.2rem); }
.nav__links a.link { font-size: 0.9rem; color: var(--platinum); position: relative; transition: color 0.25s var(--ease); }
.nav__links a.link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width 0.3s var(--ease);
}
.nav__links a.link:hover { color: var(--text); }
.nav__links a.link:hover::after { width: 100%; }
.nav__links a.link.is-active { color: var(--text); }
.nav__links a.link.is-active::after { width: 100%; background: var(--gold); opacity: 0.8; }

@media (max-width: 720px) { .nav__links .link { display: none; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.8rem 1.4rem; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #201a08; box-shadow: 0 8px 30px -12px rgba(var(--gold-rgb), 0.7);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -12px rgba(var(--gold-rgb), 0.85); }
.btn--gold:hover svg { transform: translateX(3px); }
.btn--ghost { border-color: var(--hair-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* ============================ HERO ============================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 7rem 6rem; overflow: hidden;
}
#stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after { /* layered aurora + vignette to seat the type */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(48% 55% at 78% 30%, rgba(var(--gold-rgb), 0.16), transparent 60%),
    radial-gradient(60% 50% at 12% 108%, rgba(var(--gold-rgb), 0.06), transparent 60%),
    radial-gradient(100% 100% at 30% 55%, rgba(14, 16, 21, 0.30), var(--ink) 80%);
}
.hero .wrap { position: relative; z-index: 3; }
.hero__inner { max-width: 46rem; }
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 430; line-height: 1.02; letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero__title span { display: block; }
.hero__title em { color: var(--gold); font-weight: 460; }
.hero__sub {
  margin-top: 1.9rem; max-width: 50ch;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.62; color: var(--platinum);
}
.hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* proof strip */
.hero__proof {
  position: absolute; left: 0; right: 0; bottom: 2.4rem; z-index: 3;
  width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  color: var(--muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__proof i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); opacity: 0.7; }
.hero__scroll {
  position: absolute; right: clamp(1.25rem, 4vw, 2.5rem); bottom: 2.1rem; z-index: 3;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__scroll span { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); }

/* celestial orbit focal */
.orbit {
  position: absolute; z-index: 2; pointer-events: none;
  right: -6vw; top: 50%;
  transform: translate(0, calc(-50% + var(--py, 0px)));
  will-change: transform;
  width: clamp(420px, 46vw, 720px); aspect-ratio: 1; opacity: 0.9;
}
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit__ring { stroke: rgba(var(--gold-rgb), 0.14); stroke-width: 1; }
.orbit__star { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.7)); }
.orbit__core { fill: var(--gold-bright); filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.8)); }
.orbit__spin { transform-origin: 300px 300px; }
.orbit__spin--a { animation: orbit-rot 34s linear infinite; }
.orbit__spin--b { animation: orbit-rot 54s linear infinite reverse; }
.orbit__spin--c { animation: orbit-rot 80s linear infinite; }
@keyframes orbit-rot { to { transform: rotate(360deg); } }

/* hero line-reveal on load (only hidden when JS is present to reveal it) */
.js .reveal-line { opacity: 0; transform: translateY(18px); }
.js body.is-ready .reveal-line {
  animation: line-in 0.9s var(--ease) forwards;
}
.hero__eyebrow.reveal-line { animation-delay: 0.05s; }
.hero__title .reveal-line:nth-child(1) { animation-delay: 0.16s; }
.hero__title .reveal-line:nth-child(2) { animation-delay: 0.30s; }
.hero__sub.reveal-line { animation-delay: 0.46s; }
.hero__cta.reveal-line { animation-delay: 0.60s; }
.hero__proof.reveal-line { animation-delay: 0.78s; }
@keyframes line-in { to { opacity: 1; transform: none; } }

/* ---- About / two-column ---- */
.about__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about__body p + p { margin-top: 1.1rem; }
.about__lead {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.7vw, 2.05rem);
  line-height: 1.28; color: var(--text); font-weight: 440; margin-top: 1.3rem;
}
.about__lead em { color: var(--gold); }

/* ============================ 02 · THE GAP ============================ */
.gap { text-align: center; overflow: hidden; }
.gap .kicker { margin-bottom: 2rem; }
.gap__quote {
  margin: 0 auto; max-width: 20ch; font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.15; color: var(--text);
  font-weight: 400; letter-spacing: -0.02em;
}
.gap__quote em { color: var(--gold); }
.gap__resolve {
  margin: 1.8rem auto 0; max-width: 40ch; color: var(--platinum);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}
.gap__rule { max-width: 220px; margin: 2.8rem auto 0; }

/* ============================ 03 · FOUNDER ============================ */
.founder__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2.2rem, 6vw, 5rem);
  align-items: center;
}
.portrait {
  position: relative; margin: 0; width: 100%; aspect-ratio: 1 / 1.08;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair-gold);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(var(--gold-rgb),0.04);
  isolation: isolate;
}
.portrait::before { /* warm glow + base scrim so the caption reads */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(72% 52% at 50% 20%, rgba(var(--gold-rgb), 0.18), transparent 62%),
    linear-gradient(180deg, transparent 48%, rgba(10, 12, 17, 0.78) 100%);
}
.portrait img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%;
  filter: contrast(1.02) brightness(1.02);
}
.portrait__tag {
  position: absolute; left: 1.25rem; bottom: 1.15rem; z-index: 2;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.portrait__name { font-family: var(--serif); font-size: 1.12rem; color: var(--text); }
.portrait__role { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.portrait__star {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
  width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.7);
}

.founder__body .kicker { margin-bottom: 1.1rem; }
.founder__body h2 { margin-bottom: 1.2rem; }
.founder__lead {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.32; color: var(--text); font-weight: 420; margin-bottom: 1.5rem;
}
.founder__lead em { color: var(--gold); font-style: italic; }
.founder__body > p:not(.founder__lead) { color: var(--platinum); }
.founder__body > p:not(.founder__lead) + p { margin-top: 1rem; }

.chips { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips li {
  font-size: 0.78rem; letter-spacing: 0.03em; color: var(--platinum);
  padding: 0.42rem 0.85rem; border: 1px solid var(--hair-2); border-radius: 999px;
  background: rgba(255,255,255,0.015); transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chips li:hover { border-color: var(--hair-gold); color: var(--gold-bright); }
.signature {
  font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--gold);
  margin-top: 1.6rem; opacity: 0.9;
}

/* ---- Vision / Mission (north star band) ---- */
.northstar__rule { max-width: 260px; margin: 0 auto clamp(2.6rem, 5vw, 3.6rem); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vm__card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.6rem);
  position: relative; overflow: hidden;
}
.vm__card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(var(--gold), transparent);
}
.vm__card .eyebrow { margin-bottom: 1rem; }
/* Target the statement by class, NOT `.vm__card p`. That selector (0-1-1) also
   matched the "Vision"/"Mission" labels and outranked `.eyebrow` (0-1-0), so the
   labels rendered in Fraunces 24px instead of the Hanken small-caps every other
   eyebrow on the page uses — same class, visibly different font. */
.vm__text { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35; color: var(--text); font-weight: 420; }

/* ---- Values ---- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.value { padding: 1.75rem 0 0; border-top: 1px solid var(--hair-2); position: relative; }
.value::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 2px;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.value:hover::before { width: 100%; }
.value h3 { margin-bottom: 0.6rem; }
.value p { font-size: 0.95rem; color: var(--muted); }

/* ---- Services / The S ---- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc__card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: clamp(1.8rem, 2.8vw, 2.3rem);
  min-height: 15rem;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.svc__card::before { /* ghosted big index */
  content: attr(data-n); position: absolute; right: 0.4rem; bottom: -1.2rem;
  font-family: var(--serif); font-size: 8rem; line-height: 1; color: rgba(255,255,255,0.02);
  pointer-events: none;
}
.svc__card::after { /* top gold sweep on hover */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.svc__card:hover { transform: translateY(-4px); border-color: var(--hair-gold); background: var(--surface-2); }
.svc__card:hover::after { opacity: 1; }
.svc__num {
  font-family: var(--serif); font-size: 0.95rem; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.05em;
  display: inline-block; margin-bottom: 1.1rem;
}
.svc__card h3 { margin-bottom: 0.7rem; position: relative; }
.svc__card p { font-size: 0.95rem; color: var(--muted); position: relative; }
.svc__go {
  margin-top: 1.2rem; display: inline-flex; align-items: center; color: var(--gold);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.svc__go svg { width: 20px; height: 20px; }
.svc__card:hover .svc__go { opacity: 1; transform: none; }

/* ---- Approach — connected star-path ---- */
.approach { position: relative; }
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.path::before {
  content: ""; position: absolute; top: 9px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, var(--hair-gold), var(--gold), var(--hair-gold)); opacity: 0.6;
}
.step { position: relative; padding-top: 2.6rem; }
.step__node {
  position: absolute; top: 3px; left: 0; width: 14px; height: 14px;
  background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.12), 0 0 16px rgba(var(--gold-rgb), 0.5);
}
.step__num { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold);
  text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; display: block; }
.step h3 { margin-bottom: 0.55rem; }
.step p { font-size: 0.93rem; color: var(--muted); }

/* ---- Contact ---- */
.contact { text-align: center; }
.contact__inner {
  max-width: 760px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--hair-gold);
  border-radius: 20px; padding: clamp(2.6rem, 6vw, 4.5rem);
  position: relative; overflow: hidden;
}
.contact__inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(var(--gold-rgb), 0.14), transparent 70%);
}
.contact__inner > * { position: relative; }
.contact h2 { margin: 1rem 0; }
.contact .lead { max-width: 46ch; margin: 0 auto 2rem; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.contact__meta { margin-top: 2.2rem; color: var(--muted); font-size: 0.9rem;
  display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.contact__meta a { color: var(--platinum); border-bottom: 1px solid var(--hair-gold); }
.contact__meta a:hover { color: var(--gold-bright); }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--hair); padding-block: 3.5rem 2.5rem; }
.footer__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer__logo img { height: 42px; width: auto; margin-bottom: 1rem; }
.footer__tag { color: var(--muted); font-size: 0.92rem; max-width: 30ch; }
.footer__keys { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--platinum);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.2rem; }
.footer__keys span { color: var(--gold); }
.footer__col h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.9rem; }
.footer__col a { display: block; color: var(--platinum); font-size: 0.92rem; margin-bottom: 0.4rem; }
.footer__col a:hover { color: var(--gold-bright); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }

/* ---- Scroll reveal ---- (initial hidden state applies ONLY when JS is active) */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .js .reveal-line { opacity: 1; transform: none; animation: none !important; }
  .hero__scroll span { display: none; }
  .orbit__spin { animation: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .orbit { right: -18vw; opacity: 0.6; }
}
@media (max-width: 940px) {
  .about__grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .founder__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; margin-inline: auto; }
  .path { grid-template-columns: 1fr 1fr; }
  .path::before { display: none; }
  .orbit { display: none; }
  .hero__scroll { display: none; }
}
@media (max-width: 620px) {
  .vm { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .footer__grid { flex-direction: column; }
  .hero__proof { display: none; }
}

/* =========================================================================
   PREVIEW HARNESS — not part of the Sidus design system.
   Two things that belong to the preview rather than to the brand:
     1. .vswitch — fixed version switcher, so a reviewer can reach the chooser
        or a sibling version from anywhere without using the Back button.
     2. .powered — the maker's credit in the footer.
   Both stay quiet on purpose: this must read as Naledi's site with NexusIQ as
   the enabler behind it, never as a co-brand.
   Delete this block (and its markup) when a version is promoted to production.
   ========================================================================= */

/* ---- Version switcher ---- */
.vswitch {
  position: fixed; z-index: 80;
  left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.32rem 0.38rem;
  border-radius: 999px;
  background: rgba(10, 12, 17, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--hair-2);
  box-shadow: 0 12px 36px -14px rgba(0, 0, 0, 0.95);
  font-family: var(--sans); font-size: 0.73rem; line-height: 1;
}
.vswitch__all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.72rem; border-radius: 999px;
  color: var(--platinum); letter-spacing: 0.02em; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.vswitch__all::before {
  content: ""; width: 6px; height: 6px; background: var(--gold);
  transform: rotate(45deg); flex: none;
}
.vswitch__all:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.vswitch__rule { width: 1px; height: 15px; background: var(--hair-2); margin-inline: 0.18rem; flex: none; }
.vswitch__v {
  padding: 0.42rem 0.6rem; border-radius: 999px;
  color: var(--muted); font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.vswitch__v:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.vswitch__v.is-current {
  color: #201a08; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.vswitch__v.is-soon { opacity: 0.38; cursor: default; }
.vswitch__v.is-soon:hover { background: none; color: var(--muted); }

/* ---- Maker's credit ----
   The NexusIQ lockup is used exactly as supplied: its own brand guide forbids
   recolouring or restyling it, and the white lockup is the one made for dark
   grounds. It fits by being SMALL and well spaced, never by being washed into
   her gold — the blue/violet reading as a separate company is the honest signal.
   Height 30px keeps it above the guide's 120px minimum lockup width. */
.powered {
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  text-align: center;
}
.powered__label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); opacity: 0.75;
}
.powered__logo { display: inline-block; }
.powered__logo img { height: 30px; width: auto; }
.powered__legal {
  font-size: 0.7rem; color: var(--muted); opacity: 0.6; letter-spacing: 0.01em;
  max-width: 68ch; line-height: 1.5;
}

/* The switcher is position:fixed, so it floats over whatever is at the bottom of
   the page — without this it sits on top of the last line of her footer (the
   company registration number). Reserve its height plus breathing room. */
.footer { padding-bottom: 5.5rem; }

/* Same problem at the top of the page: the hero's decorative proof strip lives
   bottom-centre too, and the pill lands squarely on "Botswana & beyond". Lift
   the strip clear while the harness is present — it goes back when this block
   is deleted. Must clear the strip's wrapped two-line height at ~700px wide. */
.hero__proof { bottom: 5.2rem; }

@media (max-width: 620px) {
  .vswitch { font-size: 0.68rem; gap: 0.1rem; }
  .vswitch__all span { display: none; }  /* diamond only, keep the pill narrow */
  .vswitch__all { padding-inline: 0.6rem; }
}