/* ----------------------------------------------------------------------------
   SKYSENTINEL TECHNOLOGIES — design tokens
   Warm-neutral dark, no blue/green hue. Humanist sans + technical mono.
---------------------------------------------------------------------------- */

:root {
  /* palette: ink (default) — warm-neutral dark */
  --bg:        #0a0907;
  --bg-2:      #100e0c;
  --surface:   #15130f;
  --card:      #1c1a15;
  --hairline:  #25221d;
  --border:    #2f2c26;
  --fg:        #f1ede3;
  --fg-2:      #a09b8f;
  --fg-3:      #8a857b;
  --fg-4:      #423f3a;
  --fg-ghost:  #6b665c;   /* 3.4:1 on --bg: legible unrevealed, still clearly off */
  --accent:    #ffffff;
  --accent-dim:#e6e0d3;
  --warning:   #e8c477;
  --danger:    #d97757;

  /* type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* density */
  --section-pad: 160px;
  --gutter: 48px;
  --maxw: 1440px;
}

/* alternate palettes */
[data-palette="onyx"] {
  --bg:        #060606;
  --bg-2:      #0c0c0c;
  --surface:   #121212;
  --card:      #1a1a1a;
  --hairline:  #232323;
  --border:    #2c2c2c;
  --fg:        #ededed;
  --fg-2:      #999999;
  --fg-3:      #858585;
  --fg-4:      #3d3d3d;
}
[data-palette="iron"] {
  --bg:        #0e0f10;
  --bg-2:      #15161a;
  --surface:   #1a1c1f;
  --card:      #22252a;
  --hairline:  #2d3035;
  --border:    #383c42;
  --fg:        #eaeaea;
  --fg-2:      #9a9da3;
  --fg-3:      #888d93;
  --fg-4:      #3f4247;
}

/* density variants */
[data-density="compact"] {
  --section-pad: 96px;
  --gutter: 32px;
}
[data-density="dense"] {
  --section-pad: 64px;
  --gutter: 24px;
}

/* typeface variants */
[data-typeface="jakarta"] {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
[data-typeface="editorial"] {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Instrument Serif", "Manrope", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
/* Custom crosshair replaces the OS cursor only on mouse-driven devices;
   touch devices keep native behavior and never load the crosshair. */
@media (hover: hover) and (pointer: fine) {
  body:not(.no-crosshair),
  body:not(.no-crosshair) button,
}
@media (hover: none), (pointer: coarse) {
  .crosshair, .lockbox { display: none !important; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- keyboard focus (accessibility) ---------- */
:where(a, button, input, select, textarea, [role="link"], [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav__links a:focus-visible { outline-offset: 2px; }
.contact input:focus-visible,
.contact textarea:focus-visible,
.contact select:focus-visible { outline-offset: 0; }

/* ---------- brand: StrikeIris mark (R2-08) ---------- */
.si-root .si-skew,
.si-root .si-slit {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.si-root .si-skew {
  transform: skewX(-10deg);
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1) 0.05s;
}
.si-root.on .si-skew {
  transform: skewX(0deg);
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
/* .si-path morph is driven from JS (see StrikeIris.jsx) — CSS d:path()
   transitions don't run on iOS Safari / older Android WebViews. */
.si-root .si-slit {
  opacity: 0;
  transform: scaleY(0.5);
  transition: transform 0.24s cubic-bezier(0.7, 0, 0.15, 1),
              opacity 0.1s ease 0.02s;
}
.si-root.on .si-slit {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.28s cubic-bezier(0.7, 0, 0.15, 1) 0.3s,
              opacity 0.12s ease 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .si-root .si-skew, .si-root .si-slit {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

/* paired wordmark — hard tracked caps */
.sw-word {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* optical: swallow trailing tracking */
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ---------- type ---------- */
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
[data-typeface="editorial"] .display { font-weight: 400; font-style: italic; letter-spacing: -0.02em; }

h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; }

/* ---------- layout ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; position: relative; }
.section--top { padding-top: 0; }
.divider { height: 1px; background: var(--hairline); width: 100%; }
.divider-v { width: 1px; background: var(--hairline); }

/* section header — big display title with index rail above */
.s-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline);
}
/* rail-only: no title follows, so the 64px meant to separate one from the
   section body would double up with the body's own leading */
.s-head--rail { padding-bottom: 28px; }
.s-head__rail {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.s-head__rule {
  flex: 0 0 64px;
  height: 1px;
  background: var(--fg-3);
}
.s-head__meta { color: var(--fg-3); margin-left: auto; }

.s-head__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--fg);
  margin: 0;
  max-width: 18ch;
  text-wrap: pretty;
}
.s-head__lead { display: inline; }
.s-head__sub {
  color: var(--fg-2);
  font-size: 0.5em;
  font-weight: 300;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.s-head__sub em {
  font-style: italic;
  color: var(--fg);
}

@media (max-width: 720px) {
  .s-head__sub { display: block; white-space: normal; font-size: 0.55em; margin-top: 6px; }
  .s-head__title { font-size: clamp(34px, 10vw, 56px); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  position: relative;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); transition: background .25s; }
.btn:hover .dot { background: var(--bg); }
.btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--primary:hover { background: transparent; color: var(--fg); }
.btn--ghost { border-color: transparent; padding-left: 0; }
.btn--ghost:hover { background: transparent; color: var(--fg); border-color: transparent; }
.btn--ghost:hover .arrow { transform: translateX(4px); }

/* Nav "Get in touch" — subtle outline that fits the dark chrome,
   rather than a stark white block */
.nav__cta-btn {
  background: transparent;
  color: var(--fg);
  border-color: var(--hairline);
  padding: 10px 16px;
  font-size: 12px;
  gap: 10px;
}
.nav__cta-btn:hover {
  background: rgba(241, 237, 227, 0.06);
  color: var(--fg);
  border-color: rgba(241, 237, 227, 0.35);
}
.nav__cta-btn:hover .arrow { transform: translateX(3px); }
.nav__cta-btn .arrow { color: var(--fg-3); }
.nav__cta-btn:hover .arrow { color: var(--fg); }
.arrow { display: inline-block; transition: transform .25s ease; }

/* ---------- crosshair cursor ---------- */
.crosshair {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  margin-left: -12px; margin-top: -12px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: #fff;
}
.crosshair::before { left: 11px; top: 0; width: 1px; height: 24px; }
.crosshair::after { top: 11px; left: 0; height: 1px; width: 24px; }
.crosshair .ring {
  position: absolute;
  inset: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: transform .2s ease, inset .2s ease;
}
.crosshair.hover .ring { inset: 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: background .3s ease, backdrop-filter .3s ease;
}
.nav.solid { background: rgba(10, 9, 7, 0.78); backdrop-filter: blur(14px); }
/* brand lockups must shrink the (longer) wordmark rather than overflow */
.hero__brand, .hsc__brand { max-width: 96vw; }
.hero__brand-mark, .hsc__brand-mark { flex-shrink: 0; }
.hero__brand-word, .hsc__brand-word { min-width: max-content; }
.hero__brand-word svg, .hsc__brand-word svg, .nav__brand-name svg { max-width: 100%; height: auto; }

.nav__brand { display: flex; align-items: center; gap: 12px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; width: max-content; }
.nav__brand-mark { display: inline-flex; color: var(--fg); transition: transform 0.5s cubic-bezier(.22,.61,.36,1); }
.nav__brand-name { display: inline-flex; align-items: center; color: var(--fg); transition: opacity 0.3s ease; }
.nav__brand-name .sw-word { margin-right: 0; } /* cancel optical -tracking so lockbox covers full name */
.nav__brand:hover .nav__brand-mark { transform: rotate(-8deg) scale(1.08); }
.nav__brand:hover .nav__brand-name { opacity: 0.85; }
.nav__brand-meta { color: var(--fg-3); font-size: 11px; margin-left: 4px; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.5; }
}

.nav__links {
  display: flex;
  gap: 4px;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  background: rgba(15, 13, 10, 0.6);
  backdrop-filter: blur(10px);
}
.nav__links a {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--fg-2);
  border-radius: 999px;
  transition: color .25s, background .25s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--fg); }
.nav__links a.active { color: var(--fg); background: var(--card); }
.nav__cta { justify-self: end; display: flex; gap: 12px; align-items: center; }

/* ---------- mobile nav disclosure ---------- */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}
.nav__toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--fg);
  transition: transform .28s ease, opacity .2s ease;
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.nav__toggle:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: 104px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.nav__panel[hidden] { display: none; }
.nav__panel-links { display: flex; flex-direction: column; }
.nav__panel-links a {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--fg-2);
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.nav__panel-links a.active { color: var(--fg); font-style: italic; }
.nav__panel-foot { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-top: 32px; }
.nav__panel-mail { font-size: 12px; letter-spacing: 0.1em; color: var(--fg-3); }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  /* the briefing CTA lives inside the panel at this width */
  .nav__cta-btn { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px var(--gutter) 100px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 80%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.hero__pill { align-self: center; }

/* ---------- hero brand lockup ---------- */
.hero__brand {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 18px 28px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  color: var(--fg);
  position: relative;
  border-radius: 4px;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1),
              filter 0.4s ease;
  outline: none;
}
.hero__brand:hover { transform: translateY(-2px); }
.hero__brand:focus-visible {
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 4px rgba(241,237,227,0.06);
}
.hero__brand.is-hot { filter: drop-shadow(0 0 24px rgba(241,237,227,0.18)); }

.hero__brand-mark {
  display: inline-flex;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.hero__brand.is-hot .hero__brand-mark { transform: rotate(-4deg) scale(1.04); }

.hero__brand-word {
  display: inline-flex;
  position: relative;
}
.hero__brand-word::after {
  content: "";
  position: absolute;
  left: 0; right: 12%;
  bottom: -8px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1);
}
.hero__brand:hover .hero__brand-word::after { transform: scaleX(1); }

.hero__brand-hint {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  pointer-events: none;
}
.hero__brand:hover .hero__brand-hint { opacity: 1; }

/* Responsive sizing for the lockup */
@media (max-width: 900px) {
  .hero__brand { flex-direction: column; gap: 18px; }
}

.hero__corner {
  position: absolute;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__corner--tl { top: 96px; left: var(--gutter); }
.hero__corner--tr { top: 96px; right: var(--gutter); text-align: right; }
.hero__corner--bl { bottom: 80px; left: var(--gutter); }
.hero__corner--br { bottom: 80px; right: var(--gutter); text-align: right; }

/* ---------- tagline (small, supporting) ---------- */
.hero__caption {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}
.hero__caption-rule {
  display: inline-block;
  width: clamp(40px, 10vw, 120px);
  height: 1px;
  background: var(--hairline);
}
.hero__tag {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--fg-2);
  position: relative;
  margin: 0;
}
.hero__tag .em { font-style: italic; font-weight: 400; color: var(--fg); }
[data-typeface="editorial"] .hero__tag { font-style: italic; font-weight: 400; letter-spacing: 0; }
.hero__sub {
  margin-top: 4px;
  max-width: 560px;
  color: var(--fg-2);
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
}
.hero__meta-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  width: 100%;
  max-width: 1080px;
  text-align: left;
}
.hero__meta-cell .k { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.hero__meta-cell .v { color: var(--fg); font-size: 14px; letter-spacing: -0.01em; }

@media (max-width: 720px) {
  .hero__meta-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- marquee strip ---------- */
.strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}
.strip__track {
  display: flex;
  gap: 80px;
  animation: scroll 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.strip__item {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 80px;
}
.strip__item .dot { width: 8px; height: 8px; background: var(--fg-3); border-radius: 50%; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- capabilities ---------- */
/* ---------- home project teasers ---------- */
.teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.teaser {
  padding: 48px 48px 44px 0;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: flex-start;
}
.teaser:last-child { border-right: none; padding-right: 0; padding-left: 48px; }
/* the media cell carries a clip instead of copy — it needs the column width,
   not the text rhythm, so the top padding lines its frame up with the kicker */
.teaser--media { justify-content: center; padding-top: 48px; }
.teaser__kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 24px;
}
.teaser__name {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 200; letter-spacing: -0.035em; line-height: 0.95;
  margin-bottom: 20px;
}
.teaser__name em { font-style: italic; }
.teaser__body {
  color: var(--fg-2); font-size: 16px; line-height: 1.6;
  max-width: 46ch; margin-bottom: 28px;
}
.teaser__link {
  margin-top: auto;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 5px;
  transition: border-color .2s ease;
}
.teaser__link:hover { border-color: var(--fg); }
@media (max-width: 900px) {
  .teasers { grid-template-columns: 1fr; }
  .teaser { border-right: none; border-bottom: 1px solid var(--hairline); padding: 40px 0; }
  .teaser:last-child { padding-left: 0; border-bottom: none; }
}

/* ---------- product showcase ---------- */
.product {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.product__meta { position: sticky; top: 120px; padding-top: 8px; }
.product__id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.product__id::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--fg);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
.product__name {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin-bottom: 32px;
}
.product__name .em { font-style: italic; }
.product__lead {
  color: var(--fg-2);
  font-size: 17px;
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 40px;
}
.product__bullets {
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.product__bullets li {
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  transition: background .3s ease, padding-left .3s ease;
}
.product__bullets .b-body strong { font-weight: 500; color: var(--fg); display: block; margin-bottom: 4px; font-size: 15px; }
.product__bullets .b-body span { color: var(--fg-2); font-size: 14px; line-height: 1.5; }

.product__viz {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  height: 640px;
  position: relative;
  overflow: hidden;
}
.product__viz-chrome {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.product__viz-chrome .chrome-tl,
.product__viz-chrome .chrome-tr,
.product__viz-chrome .chrome-bl,
.product__viz-chrome .chrome-br {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 14px 16px;
}
.product__viz-chrome .chrome-tl { top: 0; left: 0; }
.product__viz-chrome .chrome-tr { top: 0; right: 0; text-align: right; }
.product__viz-chrome .chrome-bl { bottom: 56px; left: 0; }
.product__viz-chrome .chrome-br { bottom: 56px; right: 0; text-align: right; }
.product__viz-controls {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 4;
}
.product__viz-controls button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: rgba(10, 9, 7, 0.6);
  backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s, background .2s;
}
.product__viz-controls button:hover,
.product__viz-controls button.active {
  color: var(--fg);
  border-color: var(--fg);
  background: var(--bg);
}
@media (max-width: 720px) {
  /* corner HUD labels collide on narrow panels — keep one per edge */
  .product__viz-chrome .chrome-tr,
  .product__viz-chrome .chrome-bl { display: none; }
}

/* ---------- specs marquee ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.spec {
  padding: 56px 24px;
  border-right: 1px solid var(--hairline);
  position: relative;
  text-align: left;
}
.spec:last-child { border-right: none; }
/* Outer cells sit flush with the section heading — the 24px inner padding
   would otherwise push the first value past the shell's left rule. */
.spec:first-child { padding-left: 0; }
.spec:last-child { padding-right: 0; }
.spec .val {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--fg);
}
/* Word values ("No GPS") need less size than numerals to carry equal weight —
   but the row must still share one baseline, so the box height is pinned to
   the numeral size and the contents sit on its floor. */
.spec .val { display: flex; align-items: flex-end; min-height: clamp(56px, 6vw, 88px); }
.spec .val--word { font-size: clamp(40px, 4vw, 60px); }
.spec .val .em { font-style: italic; }
.spec .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.spec .d { color: var(--fg-3); font-size: 13px; line-height: 1.4; }
/* Deliberately body-sized, not fine print — the stage disclosure is the point
   of this section, so it is set to be read. */
.specs__note {
  margin-top: 28px;
  max-width: 68ch;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- partners ---------- */
.partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--hairline);
}
.partner {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  aspect-ratio: 3/2;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  transition: color .25s, background .25s;
}
.partner:hover { color: var(--fg); background: var(--bg-2); }
.partner .ph-mark {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  color: var(--fg-4);
}

/* ---------- manifesto ---------- */
.manifesto {
  /* must keep .shell's horizontal gutter — this rule wins on source order */
  padding: var(--section-pad) var(--gutter);
  position: relative;
}
.manifesto__quote {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.1;
  max-width: 1100px;
  margin: 0 auto;
}
.manifesto__quote .em { font-style: italic; }
.manifesto__quote .dim { color: var(--fg-3); }
.manifesto__attr {
  margin-top: 56px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact__lead {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.contact__lead .em { font-style: italic; }
.contact form { display: flex; flex-direction: column; gap: 20px; }
.contact .field {
  display: flex; flex-direction: column; gap: 6px;
}
.contact label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.contact input, .contact textarea, .contact select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--fg);
  outline: none;
  transition: border-color .25s;
}
.contact input:focus, .contact textarea:focus, .contact select:focus { border-color: var(--fg); }
.contact textarea { resize: vertical; min-height: 80px; }
.contact .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact .submit { margin-top: 16px; align-self: flex-start; }
/* Contact/Email rows: the underline should track the content, not stretch the
   full column when .contact collapses to one column at 1100px. */
.contact__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  gap: 16px;
  max-width: 480px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.contact__row-k {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.contact__row-v { font-size: 15px; color: var(--fg); }
.contact__row-v a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hairline); }
@media (max-width: 520px) {
  .contact__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- footer ---------- */
footer.foot {
  border-top: 1px solid var(--hairline);
  padding: 80px var(--gutter) 32px;
}
.foot__lockup {
  margin: 80px 0 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.foot__lockup-mark { display: flex; color: var(--fg); }
.foot__lockup-wordmark {
  display: flex;
  align-items: center;
  color: var(--fg);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  /* size the wordmark against this column, not the viewport */
  container-type: inline-size;
}
.foot__lockup-wordmark .sw-word {
  /* SKYSENTINEL at 0.34em tracking measures ≈10.2× its font-size */
  font-size: clamp(16px, 9.2cqw, 64px);
}
.foot__lockup-wordmark svg { width: 100%; height: auto; max-height: 180px; }
.foot__lockup-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
@media (max-width: 880px) {
  .foot__lockup {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 24px;
  }
  .foot__lockup-meta { text-align: left; }
}
.foot__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
  font-weight: 400;
}
.foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.foot__col a {
  color: var(--fg); font-size: 15px; transition: color .2s;
  display: flex; align-items: center;
  padding: 10px 0; min-height: 44px;
}
.foot__col a:hover { color: var(--fg-2); }
.foot__col p { color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.foot__bottom {
  padding-top: 32px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- scrollytelling hero (HeroScrolly) ---------- */
.hsc {
  position: relative;
  width: 100%;
  height: 250vh;
  background: var(--bg);
}
.hsc__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: var(--fg);
}
.hsc__bg { position: absolute; inset: 0; z-index: 0; }
.hsc__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}
.hsc__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 80%);
  pointer-events: none;
}
.hsc__brand {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  color: var(--fg);
  z-index: 6;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 18px 28px;
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: filter 0.4s ease;
  outline: none;
}
.hsc__brand:focus-visible {
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 4px rgba(241,237,227,0.06);
}
.hsc__brand.is-hot { filter: drop-shadow(0 0 24px rgba(241,237,227,0.18)); }
.hsc__brand-mark {
  display: inline-flex;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.hsc__brand.is-hot .hsc__brand-mark { transform: rotate(-4deg) scale(1.04); }
.hsc__brand-word {
  display: inline-flex;
  position: relative;
}
.hsc__brand-word::after {
  content: "";
  position: absolute;
  left: 0; right: 12%;
  bottom: -8px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1);
}
.hsc__brand:hover .hsc__brand-word::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .hsc__brand { flex-direction: column; gap: 18px; }
}
.hsc__headline {
  position: absolute;
  left: 50%;
  top: calc(50% + 128px);
  transform: translate(-50%, 0);
  z-index: 6;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: min(88vw, 36ch);
  text-wrap: balance;
  will-change: transform, opacity;
  pointer-events: none;
}
[data-typeface="editorial"] .hsc__headline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 300;
}
.hsc__drones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  color: var(--fg);
  pointer-events: none;
}
.hsc__panel {
  position: absolute;
  top: 62%;
  left: 50%;
  width: clamp(260px, 30vw, 420px);
  transform: translate(-50%, -50%);
  z-index: 7;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.hsc__panel-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-bottom: 12px;
}
[data-typeface="editorial"] .hsc__panel-name { font-style: italic; font-weight: 400; }
.hsc__panel-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 32ch;
  margin: 0 auto;
}
.hsc__hint {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-3);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hsc__hint-arrow {
  font-size: 16px;
  animation: hsc-bob 1.6s ease-in-out infinite;
}
@keyframes hsc-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}
.hsc__act-marker {
  position: absolute;
  top: 96px;
  right: var(--gutter);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  pointer-events: none;
}
.hsc__act-bar {
  display: inline-block;
  width: 120px;
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.hsc__act-bar > span {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}
@media (max-width: 720px) {
  .hsc__panel { width: min(86vw, 340px); top: 58%; }
  .hsc__headline {
    top: calc(50% + 152px);
    font-size: clamp(19px, 5vw, 26px);
    line-height: 1.35;
    max-width: 82vw;
  }
  .hsc__act-marker { display: none; }
}

/* ---------- inner page heros ---------- */
.page-hero {
  /* horizontal gutter comes from the inner .shell — padding here doubled it
     and knocked the hero copy out of line with the sections below */
  padding: 180px 0 80px;
  border-bottom: 1px solid var(--hairline);
}
.page-hero .eyebrow { margin-bottom: 32px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 168px);
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.88;
  margin-bottom: 32px;
}
.page-hero h1 .em { font-style: italic; }
.page-hero .sub {
  max-width: 640px;
  font-size: 18px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* ---------- about / origin ---------- */
.origin {
  padding: 64px 0 var(--section-pad);
  position: relative;
}
.origin__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.origin__map {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}
.origin__body h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 32px;
}
.origin__body h2 .em { font-style: italic; }
.origin__body p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 640px;
  margin-bottom: 20px;
}

/* responsive */
@media (max-width: 1100px) {
  :root { --section-pad: 96px; --gutter: 32px; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(2n) { border-right: none; }
  /* re-derive the flush outer edges for a 2-up grid */
  .spec { padding-left: 24px; padding-right: 24px; }
  .spec:nth-child(2n+1) { padding-left: 0; }
  .spec:nth-child(2n)   { padding-right: 0; }
  .partners { grid-template-columns: repeat(3, 1fr); }
  .product { grid-template-columns: 1fr; gap: 48px; }
  .product__meta { position: static; }
  .product__viz { height: 480px; }
  .contact { grid-template-columns: 1fr; gap: 48px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .origin__grid { grid-template-columns: 1fr; }
  .hero__meta-row { grid-template-columns: repeat(2, 1fr); }
  /* Hide decorative hero corner annotations — they collide with the hero pill / sub at narrower widths */
  .hero__corner { display: none; }
  /* Nav: drop the inline mono captions and force the CTA + brand to one line */
  .nav { grid-template-columns: auto 1fr auto; gap: 16px; }
  .nav__brand { white-space: nowrap; }
  .nav__brand .mono,
  .nav__cta .mono { display: none; }
  .nav__cta .btn { padding: 12px 16px; font-size: 12px; white-space: nowrap; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  :root { --section-pad: 64px; --gutter: 20px; }
  .specs { grid-template-columns: 1fr; }
  .spec { border-right: none; border-bottom: 1px solid var(--hairline); padding-left: 0; padding-right: 0; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .foot__cols { grid-template-columns: 1fr; }
  .nav__brand span:not(.mark) { font-size: 14px; }
  .contact .row-2 { grid-template-columns: 1fr; }
}

/* Tighter inner page hero on small viewports so the huge display headlines don't overrun */
@media (max-width: 880px) {
  .nav__links { display: none; }
  .page-hero { padding-top: 140px; }
  .product__viz { height: 420px; }
  .partners { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- utilities ---------- */
.fadein { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.fadein.in { opacity: 1; transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.live-bar {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
}
.live-bar::before {
  content: ""; width: 6px; height: 6px;
  background: var(--fg); border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

/* ---------- TechScrolly (Heimdall-style pinned product page) ---------- */
.tsc {
  position: relative;
  width: 100%;
  height: 300vh; /* three acts; the spec-band act was removed with its invented figures */
  background: var(--bg);
}
.tsc__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: var(--fg);
}
.tsc__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tsc__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}
.tsc__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 80%);
}
.tsc__orbit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--fg);
}

/* Central mark — pinned at viewport center, rotates with scroll */
.tsc__mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 32px;
  cursor: pointer;
  border-radius: 50%;
  color: var(--fg);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: filter 0.4s ease;
  outline: none;
}
.tsc__mark.is-hot { filter: drop-shadow(0 0 32px rgba(241,237,227,0.22)); }
.tsc__mark:focus-visible {
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 4px rgba(241,237,227,0.06);
}

/* Drone host — positioned at center like the mark */
.tsc__drone-host {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 5;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity 0.35s ease;
  animation: drone-bob 4.5s ease-in-out infinite;
}
@keyframes drone-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -7px; }
}

/* Rotor / propeller spin */
.drone__prop {
  transform-origin: center;
  transform-box: fill-box;
  animation: drone-prop-spin 0.5s linear infinite;
  opacity: 1;
}
.drone__prop.is-boosted {
  animation-duration: 0.15s;
}
@keyframes drone-prop-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scan-line sweep across the drone HUD */
.drone__scan {
  animation: drone-scan 4s linear infinite;
}
@keyframes drone-scan {
  0%   { transform: translateY(-200px); opacity: 0;   }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(200px); opacity: 0;   }
}

/* HUD elements settle smoothly */
.drone__hud-back, .drone__hud-fore {
  transition: opacity 0.6s ease;
}

.drone.is-dragging { cursor: grabbing !important; }

/* Drone hover halo */
.drone {
  filter: drop-shadow(0 0 28px rgba(241, 237, 227, 0.10));
  transition: filter 0.4s ease;
}
.drone:hover { filter: drop-shadow(0 0 42px rgba(241, 237, 227, 0.20)); }
.drone.is-boosted { filter: drop-shadow(0 0 56px rgba(241, 237, 227, 0.32)); }

/* ===== Act 0 — Hero ===== */
.tsc__hero {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 14vh var(--gutter) 14vh;
  pointer-events: none;
  text-align: center;
  will-change: opacity, transform;
}
.tsc__hero-top, .tsc__hero-bottom {
  max-width: 760px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tsc__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-block;
}
.tsc__hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0;
  max-width: 14ch;
}
.tsc__hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
}
.tsc__hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0;
}
.tsc__rotate-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-3);
}
.tsc__rotate-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ===== Act title (shared across acts 1-3) ===== */
/* Act titles sit in the left gutter, not top-centre: centred they landed in
   the same lane as the top orbiting capability and under the nav bar. */
.tsc__act-title {
  position: absolute;
  top: 15vh;
  left: var(--gutter);
  text-align: left;
  max-width: 26ch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.tsc__act-title--up { top: 13vh; }
.tsc__act-title h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0;
}
.tsc__act-title h2 em {
  font-style: italic;
  font-weight: 400;
}

/* ===== Drone hint badge (sits below the drone) ===== */
.tsc__drone-hint {
  position: absolute;
  left: 50%;
  bottom: -36px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.75;
}
.tsc__drone-hint svg {
  color: var(--fg-3);
  opacity: 0.75;
}

/* ===== Act 2 — Capability orbit ===== */
.tsc__caps {
  position: absolute;
  inset: 0;
  z-index: 6;
  will-change: opacity;
  pointer-events: none !important;
}
.tsc__cap {
  position: absolute;
  width: clamp(180px, 20vw, 260px);
  color: var(--fg-2);
  padding: 0 12px;
  will-change: opacity, transform;
}
.tsc__cap-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 6px;
  line-height: 1.2;
}
.tsc__cap-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}

/* ===== Act 3 — Stack split ===== */
.tsc__stack {
  position: absolute;
  inset: 0;
  z-index: 6;
  will-change: opacity;
  pointer-events: none;
}
.tsc__stack-card {
  pointer-events: auto;
}
.tsc__stack-card {
  position: absolute;
  top: 50%;
  width: clamp(260px, 26vw, 340px);
  padding: 24px 28px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  will-change: transform;
}
/* centred: lands where the mark dissolved */
.tsc__stack-card--C {
  left: 50%;
  width: clamp(300px, 34vw, 420px);
  text-align: center;
  padding: 32px 36px;
}
.tsc__stack-card--C .tsc__stack-card-link { margin: 0 auto; }
.tsc__stack-card-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-bottom: 12px;
}
[data-typeface="editorial"] .tsc__stack-card-name { font-style: italic; font-weight: 400; }
.tsc__stack-card-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 18px;
}
.tsc__stack-card-link {
  /* standalone CTA, so the 24px WCAG 2.2 target minimum applies — the inline
     exception covers links inside a sentence, which this is not */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.tsc__stack-card-link:hover { border-color: var(--fg); }

/* ===== Act 4 — Outro ===== */
.tsc__scroll-hint {
  position: absolute;
  left: 50%; bottom: 4vh;
  transform: translateX(-50%);
  z-index: 9;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-3);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tsc__scroll-arrow {
  font-size: 16px;
  animation: hsc-bob 1.6s ease-in-out infinite;
}

/* Responsive (721–900px tablets — below 720px TechLite takes over) */
@media (max-width: 900px) {
  .tsc__hero-title { font-size: 36px; }
  .tsc__cap { width: 170px; }
  .tsc__cap-title { font-size: 15px; }
  .tsc__cap-body { font-size: 12px; }
  .tsc__stack-card--C { width: 56vw; padding: 22px 24px; }
  .tsc__stack-card { width: 42vw; padding: 16px 18px; }
  .tsc__stack-card-name { font-size: 20px; }
}

/* ---------- TechLite — static technology intro for phones ---------- */
.tsc-lite { padding: 140px 0 40px; }
.tsc-lite__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 11vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.tsc-lite__title em { font-style: italic; font-weight: 400; }
.tsc-lite__sub { font-size: 17px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.tsc-lite__drone { display: flex; justify-content: center; padding: 16px 0 28px; }
.tsc-lite__caps { margin-top: 44px; }
.tsc-lite__cap { padding: 18px 0; border-top: 1px solid var(--hairline); }
.tsc-lite__cap-title { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.tsc-lite__cap-body { font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.tsc-lite__stack { margin-top: 44px; display: flex; flex-direction: column; gap: 16px; }
.tsc-lite__card {
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  padding: 24px 20px;
}
.tsc-lite__card-name {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 300; letter-spacing: -0.015em;
  margin-bottom: 10px;
}
[data-typeface="editorial"] .tsc-lite__card-name { font-style: italic; font-weight: 400; }
.tsc-lite__card-body { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0 0 16px; }

/* ----------------------------------------------------------------------------
   PHASE 2 FX — target-lock cursor, grain, manifesto reveal
---------------------------------------------------------------------------- */

/* ---------- film grain ---------- */
.grain {
  position: fixed;
  inset: -60%;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.045;
  animation: grain-shift 0.8s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-2%, 1%); }
  33%  { transform: translate(1%, -2%); }
  50%  { transform: translate(-1%, 2%); }
  67%  { transform: translate(2%, 1%); }
  83%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ---------- target-lock brackets ---------- */
.lockbox {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.18s ease;
  will-change: transform, width, height;
}
.lockbox.on { opacity: 1; }
.lockbox .c { position: absolute; width: 9px; height: 9px; }
.lockbox .c--tl { top: 0; left: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.lockbox .c--tr { top: 0; right: 0; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.lockbox .c--bl { bottom: 0; left: 0; border-bottom: 1px solid #fff; border-left: 1px solid #fff; }
.lockbox .c--br { bottom: 0; right: 0; border-bottom: 1px solid #fff; border-right: 1px solid #fff; }
.crosshair .ring { transition: transform .2s ease, inset .2s ease, opacity .2s ease; }
.crosshair.locked .ring { opacity: 0; }

/* ---------- footer legal row ---------- */
.foot__legal { display: flex; gap: 24px; }
.foot__legal a { color: var(--fg-3); transition: color .2s; }
.foot__legal a:hover { color: var(--fg); }
@media (max-width: 760px) {
  .foot__bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* ---------- capability cards: keyboard focus ---------- */

/* ---------- generic doc / list pages (careers · responsibility · privacy) ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.grid-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-card {
  padding: 40px 32px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.grid-cards.cols-3 .grid-card:nth-child(3n) { border-right: none; }
.grid-cards.cols-2 .grid-card:nth-child(2n) { border-right: none; }
.grid-card__k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; margin-bottom: 20px; }
.grid-card__t {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 300; letter-spacing: -0.02em;
  line-height: 1.1; margin-bottom: 14px; color: var(--fg);
}
[data-typeface="editorial"] .grid-card__t { font-style: italic; font-weight: 400; }
.grid-card__d { color: var(--fg-2); font-size: 14px; line-height: 1.6; }

/* roles list */
.role {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.role:last-of-type { border-bottom: 1px solid var(--hairline); }
.role__k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; }
.role__t { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 10px; }
[data-typeface="editorial"] .role__t { font-style: italic; font-weight: 400; }
.role__d { color: var(--fg-2); font-size: 15px; line-height: 1.55; max-width: 60ch; }
.role__tags { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) {
  .grid-cards, .grid-cards.cols-2 { grid-template-columns: 1fr; }
  .grid-card { border-right: none; }
  .role { grid-template-columns: 40px 1fr; }
  .role__tags { grid-column: 2; margin-top: 8px; }
}

/* prose document (privacy) */
/* ---------- about: team ---------- */
.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
.team__n {
  font-family: var(--font-display);
  font-size: clamp(88px, 12vw, 168px);
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--fg);
}
.team__body { max-width: 56ch; display: flex; flex-direction: column; gap: 20px; }
.team__body p { color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.team__body a { color: var(--fg); border-bottom: 1px solid var(--hairline); }

/* ---------- founder roster ---------- */
.founders { border-top: 1px solid var(--hairline); margin-bottom: 48px; }
.founder {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.founder__k {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em;
}
.founder__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--fg); margin-bottom: 6px;
}
.founder__role {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.founder__li {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-2); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .2s;
}
.founder__li:hover { color: var(--fg); }
@media (max-width: 640px) {
  .founder { grid-template-columns: 40px 1fr; gap: 16px; row-gap: 0; }
  .founder__li { grid-column: 2; margin-top: 4px; }
}
@media (max-width: 720px) {
  .team { grid-template-columns: 1fr; gap: 24px; }
}

.doc { max-width: 760px; }
.doc__block { padding: 28px 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.doc__block:last-child { border-bottom: 1px solid var(--hairline); }
.doc__k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.1em; text-transform: uppercase; }
.doc__v { color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.doc__v a { color: var(--fg); border-bottom: 1px solid var(--hairline); }
.doc__note {
  margin-top: 40px;
  padding: 24px;
  border: 1px dashed var(--border);
  background: var(--bg-2);
  font-size: 14px; line-height: 1.6; color: var(--fg-2);
}
.doc__note .mono { color: var(--warning); display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 640px) {
  .doc__block { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- manifesto scroll reveal ---------- */
.manifesto__quote--reveal .w {
  color: var(--fg-ghost);
  transition: color 0.45s ease;
}
.manifesto__quote--reveal .w.on { color: var(--fg); }
.manifesto__quote--reveal .w.em { font-style: italic; }
.manifesto__quote--reveal .w.dim.on { color: var(--fg-2); }

/* ----------------------------------------------------------------------------
   RESPONSIVE FIXES for inline-styled grids (About / Solutions / Technology)
---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3-resp { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4-resp { grid-template-columns: repeat(2, 1fr) !important; }
  .arch-grid   { grid-template-columns: 1fr !important; }
  .sol-row     { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sol-row .sol-row__idx { padding-top: 0 !important; }
}
@media (max-width: 560px) {
  .grid-3-resp { grid-template-columns: 1fr !important; }
  .grid-4-resp { grid-template-columns: 1fr 1fr !important; }
}

/* ----------------------------------------------------------------------------
   404 / unknown route
---------------------------------------------------------------------------- */
.notfound {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(96px, 18vw, 280px);
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: var(--fg);
  margin: 0;
}
[data-typeface="editorial"] .notfound__code { font-style: italic; }
.notfound__msg { color: var(--fg-2); font-size: 18px; line-height: 1.55; max-width: 48ch; margin: 28px 0 36px; }

/* First-byte SEO outline inside #root. Hidden as soon as JS runs, then
   replaced by React. Visible to curl / no-JS crawlers and readers. */
.seo-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  color: var(--fg);
}
.seo-shell h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 24px;
}
.seo-shell p {
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 1em;
}
.has-js .seo-shell {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.identity {
  padding-top: 0;
  padding-bottom: var(--section-pad);
}
.identity p {
  max-width: 62ch;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.65;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.identity strong { color: var(--fg); font-weight: 500; }


/* ---------- minimum touch targets (WCAG 2.2 AA / platform guidance) ---------- */
.teaser__link,
.nav__brand,
.contact__row-v a,
.foot__legal a,
.foot__col li > a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* keep the legal row visually tight despite the taller hit area */
.foot__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; }


/* deep-link anchors must clear the fixed nav, otherwise the section
   heading lands underneath it when you arrive from a #hash link */
#sanjay-deep, #proof, #defence, #aerospace { scroll-margin-top: 110px; }


/* ---------- sealed-run clips ---------- */
.simvid { margin: 0; width: 100%; }
.simvid__frame {
  position: relative;
  border: 1px solid var(--border);
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.simvid__el { width: 100%; height: 100%; display: block; object-fit: cover; }
.simvid__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  background: rgba(10, 9, 7, 0.82);
  border: 1px solid var(--fg-3);
  padding: 14px 22px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.simvid__play:hover { border-color: var(--fg); background: var(--bg); }
/* the caption is load-bearing: it carries the stage label the frames burn in */
.simvid__cap {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--bg-2);
  border-left: 2px solid var(--warning);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
}
.simvid__meta {
  display: block;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-3);
  margin-bottom: 10px;
}
/* tap-to-zoom (phones only) — the control */
.simvid__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(10, 9, 7, 0.72);
  border: 1px solid var(--fg-3);
  backdrop-filter: blur(3px);
  cursor: pointer;
  z-index: 3;
}
.simvid__zoom:active { background: var(--bg); border-color: var(--fg); }

/* Native fullscreen (Android Chrome, desktop, and the iOS system player).
   The OS is doing the turning here, so the frame just fills the screen — no
   rotation of our own, or the two would fight. */
.simvid__frame:fullscreen,
.simvid__frame:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--bg);
  border: 0;
}
.simvid__frame:fullscreen .simvid__el,
.simvid__frame:-webkit-full-screen .simvid__el { object-fit: contain; }
/* the control would sit on top of the fullscreen picture */
.simvid__frame:fullscreen .simvid__zoom,
.simvid__frame:-webkit-full-screen .simvid__zoom { display: none; }

/* Zoomed. A 16:9 clip laid flat on a portrait phone gains almost nothing —
   375px against the 333px it already had. Turned on its side it takes the
   screen's long edge instead, which is twice the linear size and the
   difference between the run's burned-in labels being legible or not. */
.simvid__backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  border: 0;
}
.simvid__close {
  position: absolute;
  background: none;
  border: 0;
  cursor: pointer;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.simvid--zoomed .simvid__frame {
  position: fixed;
  top: 50%;
  left: 50%;
  height: auto;
  aspect-ratio: 16 / 9;
  transform-origin: center;
  z-index: 210;
  border-color: var(--fg-3);
}
/* Portrait: turn it onto the screen's long edge — the whole point of the
   control. Widest 16:9 box whose short side still fits the viewport width
   once rotated. */
@media (orientation: portrait) {
  .simvid--zoomed .simvid__frame {
    width: min(100vh, calc(100vw * 16 / 9));
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
/* Landscape: the screen is already the right way round, so don't rotate. Works
   out the same size — someone who turns their phone to watch keeps the zoom
   instead of having it yanked away. */
@media (orientation: landscape) {
  .simvid--zoomed .simvid__frame {
    width: min(100vw, calc(100vh * 16 / 9));
    transform: translate(-50%, -50%);
  }
}
/* inline the frame is cut to 16:9 so cover fits exactly; zoomed it must be
   contain, because the run's stat panel sits hard against the frame edge and
   cover would crop it off */
.simvid--zoomed .simvid__el { object-fit: contain; }

@media (max-width: 720px) {
  .simvid__cap { padding: 16px 18px; font-size: 13px; }
}