/*
Theme Name: JivaJet
Theme URI: https://jivajet.com
Author: JivaJet
Author URI: https://jivajet.com
Description: Custom theme for the JivaJet corporate site — plasma technology for space and medicine.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jivajet
*/
:root {
  --black:#050507;
  --black-soft:#0a0a0d;
  --surface:#101015;
  --surface-2:#16161c;
  --line:#242430;
  --line-soft:#1b1b23;
  --muted:#9d9daa;
  --muted-dim:#6d6d78;
  --white:#f6f6f3;
  --paper:#eceae4;
  --paper-line:#c9c7bf;
  --ink:#0a0a0c;
  --ink-soft:#45454d;
  /* Plasma accent — used sparingly over the black base */
  --plasma:#5cc6ff;
  --plasma-2:#9a7bff;
  --plasma-soft:rgba(92,198,255,.16);
  --glow:rgba(92,198,255,.35);
  --container:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Michroma","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  background-color:var(--black)
}
body {
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
/* Guard the base background against theme-agnostic plugin/core styles that
   set `body { background:#fff }` at the same specificity but load later.
   `html body` + !important keeps the site's dark canvas from being knocked
   out; .light sections paint their own background over this, so they are
   unaffected. */
html body {
  background-color:var(--black) !important
}
::selection {
  background:var(--plasma-soft);
  color:#fff
}
a {
  color:inherit;
  text-decoration:none
}
img {
  max-width:100%;
  display:block
}
.container {
  width:min(calc(100% - 48px),var(--container));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:-60px;
  left:16px;
  z-index:1000;
  background:#fff;
  color:#000;
  padding:10px 14px;
  border-radius:6px
}
.skip-link:focus {
  top:16px
}
:focus-visible {
  outline:2px solid var(--plasma);
  outline-offset:3px;
  border-radius:2px
}

/* ---------- Preloader ---------- */
/* Shows on every page load/reload — the ~1.5s fill gives the hero video and
   images time to buffer before the site is revealed. CSS drives show/hide and
   the bar so the overlay always disappears even if JS never runs; main.js only
   animates the numeric counter. */
.site-preloader {
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  animation:preloaderOut .5s var(--ease) 1.55s forwards
}
.preloader-inner {
  width:min(360px,80vw)
}
.preloader-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:26px;
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:-.02em
}
.preloader-brand .brand-logo {
  height:52px
}
.preloader-track {
  position:relative;
  height:2px;
  width:100%;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden
}
.preloader-fill {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:linear-gradient(90deg,var(--plasma),var(--plasma-2));
  animation:preloaderFill 1.5s var(--ease) forwards
}
.preloader-percent {
  margin-top:16px;
  text-align:right;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
@keyframes preloaderFill {
  from {
  width:0
}
to {
  width:100%
}
}
@keyframes preloaderOut {
  to {
  opacity:0;
  visibility:hidden
}
}
@media (prefers-reduced-motion:reduce) {
  .site-preloader {
  animation:preloaderOut .3s linear .35s forwards
}
.preloader-fill {
  animation-duration:.35s
}
}

/* ---------- Header ---------- */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,6,9,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-soft)
}
.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:400;
  letter-spacing:.01em
}
.brand-logo {
  display:block;
  width:auto;
  height:26px;
  transition:filter .3s var(--ease)
}
.brand:hover .brand-logo {
  filter:drop-shadow(0 0 12px rgba(92,198,255,.55))
}
.nav-links {
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto
}
.nav-links a {
  position:relative;
  padding:8px 12px;
  color:#bdbdc7;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:7px;
  transition:color .2s var(--ease),background .2s var(--ease)
}
.nav-links a::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:1.5px;
  background:linear-gradient(90deg,var(--plasma),var(--plasma-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--ease)
}
.nav-links a:hover {
  color:#fff
}
.nav-links a:hover::after {
  transform:scaleX(1)
}
.nav-links a[aria-current="page"] {
  color:#fff
}
.nav-links a[aria-current="page"]::after {
  transform:scaleX(1)
}
.nav-toggle {
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  cursor:pointer;
  color:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px
}
.nav-toggle span {
  display:block;
  width:18px;
  height:1.5px;
  background:#e5e5ea;
  transition:transform .3s var(--ease),opacity .2s var(--ease)
}

/* ---------- Buttons & links ---------- */
.button {
  min-height:49px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.005em;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .3s var(--ease)
}
.button:active {
  transform:translateY(1px)
}
.button-small {
  min-height:42px;
  padding-inline:18px
}
.button-light {
  background:var(--white);
  color:var(--ink)
}
.button-light:hover {
  background:#fff;
  box-shadow:0 10px 30px -12px rgba(255,255,255,.4),0 0 22px -6px var(--glow)
}
.button-dark {
  background:var(--ink);
  color:#fff;
  border-color:#2c2c34
}
.button-ghost {
  background:transparent;
  color:#fff;
  border-color:#3a3a44
}
.button-ghost:hover {
  border-color:var(--plasma);
  box-shadow:0 0 22px -8px var(--glow)
}
.button-dark:hover {
  background:transparent;
  color:var(--ink);
  border-color:var(--ink)
}
.light .button-dark:hover {
  color:var(--ink);
  border-color:var(--ink);
  background:transparent
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding-bottom:3px;
  border-bottom:1px solid #5c5c66;
  font-size:13px;
  font-weight:700;
  transition:border-color .25s var(--ease),color .2s var(--ease)
}
.text-link span {
  display:inline-block;
  transition:transform .28s var(--ease)
}
.text-link:hover {
  border-color:var(--plasma)
}
.text-link:hover span {
  transform:translate(3px,-3px)
}
.dark-link {
  border-color:#8b8980
}
.dark-link:hover {
  border-color:var(--ink)
}

/* ---------- Shared type ---------- */
.overline {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  color:var(--muted);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase
}
.overline::before {
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,var(--plasma),transparent)
}
.light .overline {
  color:#6a6a63
}
.light .overline::before {
  background:linear-gradient(90deg,#9a9890,transparent)
}
h1,h2 {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.16;
  overflow-wrap:break-word
}
h3 {
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.12
}
/* Accent color for the one or two words that carry a headline's meaning —
   titles only, never used in body/description copy. */
.hl {
  color:var(--plasma)
}
.light .hl {
  color:#0763a8
}

/* ---------- Hero ---------- */
.hero {
  position:relative;
  min-height:720px;
  display:flex;
  border-bottom:1px solid var(--line);
  overflow:hidden
}
.hero::before {
  content:"";
  position:absolute;
  top:-24%;
  left:44%;
  width:min(70vw,900px);
  height:min(70vw,900px);
  background:
    radial-gradient(circle at 35% 35%,var(--plasma-soft),transparent 60%),
    radial-gradient(circle at 65% 65%,rgba(154,123,255,.14),transparent 62%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
  animation:heroPulse 9s ease-in-out infinite
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 96%,rgba(255,255,255,.025) 96%) 0 0/100% 74px,
    linear-gradient(90deg,transparent 96%,rgba(255,255,255,.025) 96%) 0 0/74px 100%;
  mask-image:radial-gradient(120% 90% at 60% 20%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 60% 20%,#000 25%,transparent 75%);
  pointer-events:none;
  z-index:0
}
/* Hero background video — shown at full clarity. Only the left strip
   behind the text is darkened; the rest of the frame stays clear. */
.hero-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.hero-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(5,5,7,.88) 0%,rgba(5,5,7,.6) 32%,rgba(5,5,7,.15) 52%,transparent 62%);
  pointer-events:none
}
.hero-scene .container {
  max-width:540px;
  margin-left:max(24px,calc((100% - var(--container)) / 2));
  margin-right:auto
}
@keyframes heroPulse {
  0%,100% {
  opacity:.85;
  transform:scale(1) translate(0,0)
}
50% {
  opacity:1;
  transform:scale(1.06) translate(-2%,2%)
}
}
/* One-time entrance for the hero — it sits above the fold so the
   scroll-linked view() reveal never fires for it; this fades/lifts it
   in on load instead. */
@keyframes heroIntro {
  from {
  opacity:0;
  transform:translateY(18px)
}
to {
  opacity:1;
  transform:none
}
}
@media (prefers-reduced-motion:no-preference) {
  .hero-scene .overline,.hero-scene .scene-title,.hero-scene .scene-sub,
  .hero-scene .scene-actions,.hero-scene .scroll-cue {
  animation:heroIntro .8s var(--ease) both
}
.hero-scene .overline {
  animation-delay:.05s
}
.hero-scene .scene-title {
  animation-delay:.15s
}
.hero-scene .scene-sub {
  animation-delay:.3s
}
.hero-scene .scene-actions {
  animation-delay:.42s
}
.hero-scene .scroll-cue {
  animation-delay:.6s
}
}
.hero-layout {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.45fr .7fr;
  gap:8vw;
  align-items:center;
  padding-block:120px 90px
}
h1 {
  max-width:900px;
  font-size:clamp(2.3rem,5vw,4.4rem);
  letter-spacing:-.01em
}
.hero-summary {
  max-width:620px;
  margin-top:32px;
  color:#c2c2cc;
  font-size:clamp(1rem,1.6vw,1.25rem)
}
.hero-actions {
  margin-top:44px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap
}
.hero-panel {
  position:relative;
  border-top:1px solid var(--plasma);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(92,198,255,.03),transparent 40%)
}
.panel-label,.panel-foot {
  padding:16px 4px;
  color:var(--muted-dim);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase
}
.focus-row {
  position:relative;
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:16px;
  align-items:start;
  padding:28px 4px;
  border-top:1px solid var(--line);
  transition:background .25s var(--ease),padding-left .25s var(--ease)
}
.focus-row:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent);
  padding-left:12px
}
.focus-number {
  color:var(--muted-dim);
  font-size:11px;
  font-weight:700;
  transition:color .25s var(--ease)
}
.focus-row:hover .focus-number {
  color:var(--plasma)
}
.focus-row strong {
  display:block;
  margin-bottom:8px;
  font-size:15px
}
.focus-row small {
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.6
}
.focus-row>span:last-child {
  color:var(--muted-dim);
  transition:transform .28s var(--ease),color .25s var(--ease)
}
.focus-row:hover>span:last-child {
  color:var(--plasma);
  transform:translate(2px,-2px)
}

/* ---------- Statement ---------- */
.statement {
  padding:120px 0;
  background:var(--paper);
  color:var(--ink)
}
.statement-grid {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:40px
}
.statement h2 {
  max-width:920px;
  font-size:clamp(1.7rem,3.2vw,2.9rem)
}
.statement h2+p {
  max-width:720px;
  margin-top:36px;
  color:#4a4a44;
  font-size:17px
}

/* ---------- Technology ---------- */
.technology {
  padding:130px 0
}
.section-heading {
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:60px;
  align-items:end;
  margin-bottom:70px
}
.section-heading.compact {
  align-items:center
}
.section-heading h2 {
  font-size:clamp(2.1rem,3.8vw,3.4rem)
}
.section-heading>p {
  color:var(--muted);
  font-size:14px
}
.light .section-heading>p {
  color:#45453f
}
.technology-card {
  position:relative;
  display:grid;
  grid-template-columns:70px 1.4fr .8fr;
  gap:40px;
  padding:55px 20px;
  margin-inline:-20px;
  border-top:1px solid var(--line);
  border-radius:14px;
  transition:background .3s var(--ease)
}
.technology-card::before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,var(--plasma),transparent);
  transition:width .5s var(--ease)
}
.technology-card:hover {
  background:linear-gradient(180deg,var(--surface),transparent)
}
.technology-card:hover::before {
  width:180px
}
.technology-card:last-child {
  border-bottom:1px solid var(--line)
}
.card-index {
  color:var(--muted-dim);
  font-size:12px;
  font-weight:700;
  transition:color .3s var(--ease)
}
.technology-card:hover .card-index {
  color:var(--plasma)
}
.card-kicker {
  margin-bottom:20px;
  color:#a6a6b0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase
}
.card-main h3 {
  font-size:clamp(1.8rem,3vw,2.9rem)
}
.card-main>p:not(.card-kicker) {
  max-width:650px;
  margin:24px 0 30px;
  color:var(--muted);
  font-size:15px
}
.card-details {
  border-top:1px solid var(--line)
}
.card-details div {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.card-details dt {
  color:var(--muted-dim)
}
.card-details dd {
  margin:0;
  color:#d3d3da
}

/* ---------- Operating model ---------- */
.operating-model {
  padding:120px 0;
  background:var(--black-soft);
  border-block:1px solid var(--line)
}
.model-grid {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:9vw
}
.model-grid h2 {
  font-size:clamp(1.7rem,3vw,2.7rem)
}
.principles>div {
  display:grid;
  grid-template-columns:50px 180px 1fr;
  gap:24px;
  padding:28px 12px;
  margin-inline:-12px;
  border-top:1px solid var(--line);
  border-radius:12px;
  transition:background .25s var(--ease)
}
.principles>div:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent)
}
.principles>div:last-child {
  border-bottom:1px solid var(--line)
}
.principles span {
  color:var(--muted-dim);
  font-size:11px;
  font-weight:700
}
.principles h3 {
  font-size:17px;
  letter-spacing:-.02em
}
.principles p {
  color:var(--muted);
  font-size:13px
}

/* ---------- Leadership ---------- */
.leadership {
  padding:130px 0
}
.people-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.people-grid article {
  position:relative;
  min-height:250px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:background .3s var(--ease)
}
.people-grid article::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--plasma),var(--plasma-2));
  transition:width .4s var(--ease)
}
.people-grid article:hover {
  background:var(--surface)
}
.people-grid article:hover::after {
  width:100%
}
.people-grid p {
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.people-grid h3 {
  margin-top:auto;
  font-size:22px;
  letter-spacing:-.03em
}
.people-grid span {
  margin-top:12px;
  color:#8a8a92;
  font-size:12px
}

/* ---------- Contact ---------- */
.contact-section {
  padding:110px 0;
  background:var(--paper);
  color:var(--ink)
}
.contact-grid {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:90px;
  align-items:end
}
.contact-section h2 {
  font-size:clamp(1.9rem,3.6vw,3.3rem)
}
.contact-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:26px;
  flex-wrap:wrap
}

/* ---------- Footer ---------- */
.site-footer {
  padding:80px 0 28px;
  background:linear-gradient(180deg,transparent,rgba(92,198,255,.02))
}
.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px
}
.footer-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.footer-links p {
  margin-bottom:16px;
  color:var(--muted-dim);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase
}
.footer-links a {
  display:block;
  width:fit-content;
  margin-bottom:9px;
  color:#adadb6;
  font-size:12px;
  transition:color .2s var(--ease),transform .2s var(--ease)
}
.footer-links a:hover {
  color:#fff;
  transform:translateX(3px)
}
.footer-bottom {
  margin-top:70px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--muted-dim);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em
}

/* ---------- Interior pages ---------- */
.page-hero {
  position:relative;
  padding:140px 0 90px;
  border-bottom:1px solid var(--line);
  overflow:hidden
}
.page-hero::before {
  content:"";
  position:absolute;
  top:-40%;
  right:-5%;
  width:min(55vw,680px);
  height:min(55vw,680px);
  background:radial-gradient(circle,var(--plasma-soft),transparent 62%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0
}
.page-hero .container {
  position:relative;
  z-index:1
}
.page-hero h1 {
  max-width:980px;
  font-size:clamp(2.5rem,5.2vw,4.8rem)
}
.page-hero .lead {
  max-width:760px;
  margin-top:30px;
  color:#bcbcc6;
  font-size:clamp(1rem,1.5vw,1.2rem)
}
.content-section {
  padding:100px 0;
  border-bottom:1px solid var(--line)
}
.content-section.light {
  background:var(--paper);
  color:var(--ink)
}
.content-grid {
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:9vw
}
.content-grid h2 {
  font-size:clamp(2.1rem,3.8vw,3.4rem)
}
.prose {
  max-width:760px
}
.prose p {
  margin-bottom:22px;
  color:var(--muted)
}
.light .prose p {
  color:#45453f
}
.prose h3 {
  margin:42px 0 16px;
  font-size:1.45rem
}
.data-list {
  margin-top:38px;
  border-top:1px solid var(--line)
}
.light .data-list {
  border-color:var(--paper-line)
}
.data-list>div {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  padding:19px 8px;
  margin-inline:-8px;
  border-bottom:1px solid var(--line);
  border-radius:8px;
  transition:background .25s var(--ease)
}
.data-list>div:hover {
  background:var(--plasma-soft)
}
.light .data-list>div {
  border-color:var(--paper-line)
}
.light .data-list>div:hover {
  background:rgba(0,0,0,.03)
}
.data-list dt {
  color:var(--muted-dim);
  font-size:12px;
  font-weight:600
}
.light .data-list dt {
  color:#77776f
}
.data-list dd {
  margin:0;
  font-size:14px
}
.data-list a:hover {
  color:var(--plasma)
}
.light .data-list a:hover {
  color:var(--ink);
  text-decoration:underline
}
.cards-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.info-card {
  position:relative;
  min-height:260px;
  padding:30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)
}
.info-card::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--plasma),var(--plasma-2));
  transition:width .4s var(--ease)
}
.info-card:hover {
  background:var(--surface)
}
.light .info-card:hover {
  background:rgba(0,0,0,.03)
}
.info-card:hover::after {
  width:100%
}
.info-card .number {
  color:var(--muted-dim);
  font-size:11px;
  font-weight:700
}
.light .info-card .number {
  color:#45453f
}
.info-card h3 {
  margin:80px 0 14px;
  font-size:1.5rem
}
.info-card p {
  color:var(--muted);
  font-size:13px
}
.light .info-card p {
  color:#45453f
}
.role {
  padding:28px 12px;
  margin-inline:-12px;
  border-top:1px solid var(--line);
  border-radius:12px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:30px;
  align-items:center;
  transition:background .25s var(--ease)
}
.role:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent)
}
.role:last-child {
  border-bottom:1px solid var(--line)
}
.role p,.role span {
  color:var(--muted);
  font-size:13px
}
.notice {
  padding:24px;
  border:1px solid var(--line);
  border-left:2px solid var(--plasma);
  border-radius:10px;
  background:var(--plasma-soft);
  color:#c9c9d2;
  font-size:13px
}

/* ---------- Mission roadmap ---------- */
.mission-list {
  border-top:1px solid var(--line)
}
.mission-row {
  position:relative;
  display:grid;
  grid-template-columns:120px 280px 1fr;
  gap:28px;
  padding:30px 16px;
  margin-inline:-16px;
  border-bottom:1px solid var(--line);
  border-radius:12px;
  transition:background .25s var(--ease)
}
.mission-row::before {
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--plasma),var(--plasma-2));
  opacity:0;
  transition:opacity .3s var(--ease)
}
.mission-row:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent)
}
.mission-row:hover::before {
  opacity:1
}
.mission-date {
  color:var(--plasma);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase
}
.light .mission-date {
  color:#0763a8
}
.mission-row h3 {
  font-size:17px;
  letter-spacing:-.02em
}
.mission-row p {
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.light .mission-row p {
  color:#45453f
}

/* ---------- Team ---------- */
.team-list {
  border-top:1px solid var(--line)
}
.team-member {
  display:grid;
  grid-template-columns:.85fr 2fr;
  gap:60px;
  padding:50px 12px;
  margin-inline:-12px;
  border-bottom:1px solid var(--line);
  border-radius:14px;
  transition:background .3s var(--ease)
}
.team-member:hover {
  background:linear-gradient(180deg,var(--surface),transparent)
}
.team-role {
  color:var(--plasma);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px
}
.team-name {
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.03em
}
.team-bio p {
  margin-bottom:16px;
  color:var(--muted);
  font-size:14px
}
.team-bio p:last-child {
  margin-bottom:0
}

/* ---------- Team photo grid (Team page) ---------- */
.team-photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(18px,2.2vw,30px)
}
.team-photo-card .photo {
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden
}
.team-photo-card .photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease)
}
.team-photo-card:hover .photo img {
  transform:scale(1.045)
}
.team-photo-card h3 {
  margin-top:16px;
  font-size:1.12rem;
  letter-spacing:-.02em
}
.team-photo-card .member-role {
  margin-top:5px;
  color:var(--plasma);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase
}
.light .team-photo-card .member-role {
  color:#0a7bd0
}
.team-photo-card .member-note {
  margin-top:9px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5
}
/* "Read more" reveal for each member's note — native <details>, no JS. */
.team-photo-card .member-more {
  margin-top:12px
}
.team-photo-card .member-more summary {
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  list-style:none;
  color:var(--plasma);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase
}
.team-photo-card .member-more summary::-webkit-details-marker {
  display:none
}
.light .team-photo-card .member-more summary {
  color:#0a7bd0
}
.team-photo-card .member-more .more-label::after {
  content:"Read more \2193"
}
.team-photo-card .member-more[open] .more-label::after {
  content:"Read less \2191"
}
/* Explicitly collapse the note when closed — deterministic across browsers,
   not reliant on the UA default for <details> content. */
.team-photo-card .member-more:not([open]) .member-note {
  display:none
}

/* ---------- Collaborators ---------- */
.collaborator-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px
}
.collaborator {
  padding:26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface)
}
.collaborator-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
  padding:22px;
  background:#fff;
  border-radius:10px;
  margin-bottom:18px
}
.collaborator-logo img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
.collaborator h3 {
  font-size:1.1rem;
  letter-spacing:-.02em
}
.collaborator p {
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55
}

/* ---------- Embedded Mission Analytics calculator ---------- */
.calculator-embed {
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9)
}
.calculator-embed iframe {
  display:block;
  width:100%;
  height:1500px;
  border:0
}
@media(max-width:768px) {
  .calculator-embed iframe {
    height:1900px
  }
}

/* ---------- Cookie consent banner ---------- */
.cookie-consent {
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:200;
  max-width:520px;
  margin-inline:auto;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)
}
.cookie-consent[hidden] {
  display:none
}
.cookie-consent p {
  margin:0 0 14px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.55
}
.cookie-consent-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

/* ---------- Lead-capture modal ---------- */
.lead-modal[hidden] {
  display:none
}
.lead-modal {
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}
.lead-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(3px)
}
.lead-modal-panel {
  position:relative;
  width:100%;
  max-width:420px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95)
}
.lead-modal-dismiss {
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer
}
.lead-modal-dismiss:hover {
  background:var(--plasma-soft)
}
.lead-modal-panel h3 {
  font-size:1.3rem;
  letter-spacing:-.02em;
  margin-bottom:10px
}
.lead-modal-sub {
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:22px
}
#lead-form label {
  display:block;
  margin:16px 0 6px;
  font-size:12px;
  font-weight:600;
  color:var(--muted-dim)
}
#lead-form input[type="text"],
#lead-form input[type="email"] {
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--black);
  color:inherit;
  font:inherit;
  font-size:14px
}
#lead-form input:focus {
  outline:2px solid var(--plasma);
  outline-offset:1px
}
.lead-modal-actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:26px
}

/* ---------- Research papers ---------- */
.papers-group {
  margin-bottom:50px
}
.papers-group:last-child {
  margin-bottom:0
}
.papers-group h3 {
  margin-bottom:6px;
  font-size:1.2rem
}
.papers-group .papers-note {
  margin-bottom:20px;
  color:var(--muted-dim);
  font-size:12px
}
.paper-list {
  border-top:1px solid var(--line)
}
.paper-row {
  display:grid;
  grid-template-columns:92px 1fr auto;
  gap:24px;
  align-items:baseline;
  padding:18px 12px;
  margin-inline:-12px;
  border-bottom:1px solid var(--line);
  border-radius:9px;
  transition:background .22s var(--ease)
}
.paper-row:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent)
}
.paper-year {
  color:var(--plasma);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em
}
.paper-title {
  color:#d7d7de;
  font-size:14px;
  line-height:1.5
}
.paper-row:hover .paper-title {
  color:#fff
}
.paper-arrow {
  color:var(--muted-dim);
  font-size:13px;
  transition:transform .25s var(--ease),color .25s var(--ease)
}
.paper-row:hover .paper-arrow {
  color:var(--plasma);
  transform:translate(2px,-2px)
}

/* ---------- Field tags ---------- */
.field-tags {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px
}
.field-tag {
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:100px;
  font-size:12.5px;
  font-weight:600;
  color:#d0d0d8;
  transition:border-color .25s var(--ease),color .25s var(--ease)
}
.field-tag:hover {
  border-color:var(--plasma);
  color:#fff
}

/* ---------- Feature list (mechanism/advantage) ---------- */
.feature-list {
  margin-top:8px;
  list-style:none
}
.feature-list li {
  position:relative;
  padding:14px 0 14px 26px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:14px
}
.feature-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:20px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(120deg,var(--plasma),var(--plasma-2))
}
.light .feature-list li {
  color:#45453f;
  border-color:var(--paper-line)
}

/* ---------- Talks / video embeds ---------- */
.talks-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.talks-grid-three {
  grid-template-columns:repeat(3,1fr)
}
.talk h3 {
  margin-top:20px;
  font-size:1.05rem;
  letter-spacing:-.02em
}
.video-source {
  margin-top:8px;
  color:var(--muted-dim);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em
}
.light .video-source {
  color:var(--ink-soft)
}
/* Rights/attribution footnote for third-party embeds and aggregated content
   (news items, embedded talks, linked publications) — sits below the list or
   grid it applies to. */
.copyright-note {
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.light .copyright-note {
  border-color:var(--paper-line);
  color:var(--ink-soft)
}
.video-embed {
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface)
}
.video-embed iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

/* ---------- Live news feed ---------- */
.live-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--plasma);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em
}
.live-badge::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--plasma);
  animation:livePulse 2s ease-out infinite
}
.light .live-badge {
  border-color:var(--paper-line);
  color:#2b6fa8
}
.light .live-badge::before {
  background:#2b6fa8
}
@keyframes livePulse {
  0% {
  box-shadow:0 0 0 0 rgba(92,198,255,.5)
}
70% {
  box-shadow:0 0 0 7px rgba(92,198,255,0)
}
100% {
  box-shadow:0 0 0 0 rgba(92,198,255,0)
}
}
.news-list {
  border-top:1px solid var(--line)
}
.light .news-list {
  border-color:var(--paper-line)
}
.news-item {
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:20px 12px;
  margin-inline:-12px;
  border-bottom:1px solid var(--line);
  border-radius:9px;
  transition:background .22s var(--ease)
}
.light .news-item {
  border-color:var(--paper-line)
}
.news-item:hover {
  background:linear-gradient(90deg,var(--plasma-soft),transparent)
}
.light .news-item:hover {
  background:rgba(0,0,0,.03)
}
.n-title {
  display:block;
  font-size:15px;
  color:#dcdce2;
  line-height:1.45
}
.light .n-title {
  color:#26261f
}
.news-item:hover .n-title {
  color:#fff
}
.light .news-item:hover .n-title {
  color:#000
}
.n-meta {
  display:block;
  margin-top:7px;
  color:var(--muted-dim);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase
}
.light .n-meta {
  color:#77776f
}
.n-arrow {
  color:var(--muted-dim);
  font-size:14px;
  transition:transform .25s var(--ease),color .25s var(--ease)
}
.news-item:hover .n-arrow {
  color:var(--plasma);
  transform:translate(2px,-2px)
}
.news-empty {
  padding:24px 0;
  color:var(--muted);
  font-size:14px
}
.light .news-empty {
  color:#55554d
}

/* ---------- Footer CTA band ---------- */
.footer-cta {
  position:relative;
  padding:90px 0;
  border-top:1px solid var(--line);
  overflow:hidden
}
.footer-cta::before {
  content:"";
  position:absolute;
  top:-60%;
  left:50%;
  transform:translateX(-50%);
  width:min(80vw,900px);
  height:min(60vw,600px);
  background:radial-gradient(circle,var(--plasma-soft),transparent 65%);
  filter:blur(20px);
  pointer-events:none
}
.footer-cta .container {
  position:relative;
  z-index:1;
  text-align:center
}
.footer-cta h2 {
  font-size:clamp(1.7rem,3.2vw,2.7rem)
}
.footer-cta-actions {
  margin-top:34px;
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap
}

/* ---------- Scroll reveal (CSS-only, fail-safe) ----------
   Uses a scroll-progress (view) timeline. No JS. Elements already in view
   render at the animation's end state, and browsers without support just show
   everything — content can never get stuck hidden. */
@keyframes jj-reveal {
  from {
  opacity:0;
  transform:translateY(24px)
}
to {
  opacity:1;
  transform:none
}
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
  .section-heading,.technology-card,.people-grid article,.info-card,.role,
  .mission-row,.paper-row,.team-member,.principles>div,.content-grid>*,
  .statement-grid>*,.contact-grid>*,.talk,.field-tag,
  .scene:not(.hero-scene) .overline,.scene:not(.hero-scene) .scene-title,
  .scene:not(.hero-scene) .scene-sub,.scene:not(.hero-scene) .scene-actions,
  .big-words>span {
  animation:jj-reveal linear both;
  animation-timeline:view();
  animation-range:entry 4% cover 22%
}
/* Staggered cascade — each word/card reveals a beat after the last,
   instead of the whole group arriving together. */
.big-words span:nth-child(1) {
  animation-range:entry 4% cover 22%
}
.big-words span:nth-child(2) {
  animation-range:entry 9% cover 27%
}
.big-words span:nth-child(3) {
  animation-range:entry 14% cover 32%
}
.big-words span:nth-child(4) {
  animation-range:entry 19% cover 37%
}
.cards-3 .info-card:nth-child(1) {
  animation-range:entry 4% cover 22%
}
.cards-3 .info-card:nth-child(2) {
  animation-range:entry 8% cover 26%
}
.cards-3 .info-card:nth-child(3) {
  animation-range:entry 12% cover 30%
}
}
}

/* Scale-in reveal for imagery/diagrams — apply .media-reveal to an image
   or video wrapper to have it "breathe" into focus as it enters view. */
@keyframes jj-reveal-scale {
  from {
  opacity:.9;
  transform:scale3d(.9,.9,1)
}
to {
  opacity:1;
  transform:none
}
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
  .media-reveal {
  animation:jj-reveal-scale linear both;
  animation-timeline:view();
  animation-range:entry 4% cover 30%
}
}
}
/* Fail-safe: when framed (WP Customizer preview, etc.) the view() timeline
   can't advance, so force every reveal target to its finished, visible state. */
.no-scroll-reveal .section-heading,
.no-scroll-reveal .technology-card,
.no-scroll-reveal .people-grid article,
.no-scroll-reveal .info-card,
.no-scroll-reveal .role,
.no-scroll-reveal .mission-row,
.no-scroll-reveal .paper-row,
.no-scroll-reveal .team-member,
.no-scroll-reveal .principles>div,
.no-scroll-reveal .content-grid>*,
.no-scroll-reveal .statement-grid>*,
.no-scroll-reveal .contact-grid>*,
.no-scroll-reveal .talk,
.no-scroll-reveal .field-tag,
.no-scroll-reveal .scene:not(.hero-scene) .overline,
.no-scroll-reveal .scene:not(.hero-scene) .scene-title,
.no-scroll-reveal .scene:not(.hero-scene) .scene-sub,
.no-scroll-reveal .scene:not(.hero-scene) .scene-actions,
.no-scroll-reveal .big-words>span,
.no-scroll-reveal .media-reveal {
  animation:none !important;
  opacity:1 !important;
  transform:none !important
}

/* ---------- Cinematic scenes (homepage) ---------- */
.scene {
  position:relative;
  /* Establish a stacking context so the negative z-index background <video>
     (z-index:-2) and its overlay (z-index:-1) paint *inside* the scene —
     above the scene's own background but below its content. Without this the
     video drops to the root stacking context and is hidden behind BODY's
     opaque background, so the hero video renders as solid black in every
     browser even though it loads and plays. */
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:130px;
  border-bottom:1px solid var(--line);
  overflow:hidden
}
.scene .container {
  position:relative;
  z-index:1;
  width:min(calc(100% - 48px),var(--container))
}
.scene::before {
  content:"";
  position:absolute;
  width:min(78vw,940px);
  height:min(78vw,940px);
  top:50%;
  left:60%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 40% 40%,var(--plasma-soft),transparent 60%),
    radial-gradient(circle at 62% 62%,rgba(154,123,255,.12),transparent 62%);
  filter:blur(22px);
  pointer-events:none;
  z-index:0;
  animation:heroPulse 11s ease-in-out infinite
}
.scene.glow-left::before {
  left:8%
}
.scene.glow-right::before {
  left:auto;
  right:-6%;
  transform:translateY(-50%)
}
.scene.glow-top::before {
  top:-8%;
  transform:translate(-50%,0)
}
.purpose-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.purpose-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,5,7,.25);
  pointer-events:none
}
.purpose-scene .overline,
.purpose-scene .scene-title,
.purpose-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.words-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.words-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  /* This scene's background footage (bright city lights) runs much brighter
     than the other scene videos — a flat 25% tint left the "Protect. Connect.
     Sustain." text unreadable over the brightest spots. A center-weighted
     radial darken keeps the video visible at the edges while guaranteeing a
     dark backdrop directly behind the text. */
  background:radial-gradient(ellipse at center,rgba(5,5,7,.72) 0%,rgba(5,5,7,.6) 45%,rgba(5,5,7,.35) 100%);
  pointer-events:none
}
.words-scene .big-words,
.words-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.opportunity-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.opportunity-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  /* Same center-weighted radial darken as the "Fly lower" words scene: keeps
     the footage visible at the edges while guaranteeing a dark backdrop
     directly behind the text — no boxed panel. */
  background:radial-gradient(ellipse at center,rgba(5,5,7,.72) 0%,rgba(5,5,7,.6) 45%,rgba(5,5,7,.35) 100%);
  pointer-events:none
}
.opportunity-scene .overline,
.opportunity-scene .scene-title,
.opportunity-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.propulsion-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.propulsion-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,5,7,.25);
  pointer-events:none
}
.propulsion-scene .overline,
.propulsion-scene .scene-title,
.propulsion-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.leadership-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.leadership-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,5,7,.25);
  pointer-events:none
}
.leadership-scene .overline,
.leadership-scene .scene-title,
.leadership-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.closing-video {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  background:var(--black);
  pointer-events:none
}
.closing-video-overlay {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,5,7,.25);
  pointer-events:none
}
.closing-scene .big-words,
.closing-scene .scene-sub {
  text-shadow:0 2px 18px rgba(0,0,0,.7)
}
.scene.center {
  text-align:center
}
.scene.center .container {
  max-width:1020px;
  margin-inline:auto
}
.scene.center .overline {
  justify-content:center
}
.scene.center .overline::before {
  display:none
}
.scene-title {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem,5vw,4.3rem);
  line-height:1.12;
  letter-spacing:-.01em;
  max-width:16ch;
  overflow-wrap:break-word
}
.scene.center .scene-title {
  max-width:20ch;
  margin-inline:auto
}
.scene-sub {
  max-width:600px;
  margin-top:28px;
  color:#c2c2cc;
  font-size:clamp(1rem,1.5vw,1.22rem)
}
.scene.center .scene-sub {
  margin-inline:auto
}
.scene-actions {
  margin-top:40px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap
}
.scene.center .scene-actions {
  justify-content:center
}
/* Product reveal — the "Meet X" moment: text left, video right */
.product-layout {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,5vw,80px);
  align-items:center
}
/* Mirrored variant — media on the left, copy on the right (desktop). */
.product-layout.flip {
  grid-template-columns:1.05fr 1fr
}
.product-layout.flip .product-copy {
  order:2
}
.product-layout.flip .product-video {
  order:1
}
.product-reveal .scene-title {
  font-size:clamp(2.6rem,6vw,4.6rem);
  max-width:none;
  letter-spacing:-.02em
}
.product-reveal .card-kicker {
  margin-bottom:22px
}
.product-reveal .scene-sub {
  margin-inline:0
}
.product-reveal .scene-actions {
  margin-top:36px
}
/* Showcased product video (thruster animation in the "Meet HyABPT" scene) */
.product-video {
  margin:0;
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 40px -18px var(--glow)
}
.product-video video,
.product-video img {
  display:block;
  width:100%;
  height:auto
}
/* Word-emphasis band */
.big-words {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 .4em;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,10vw,7rem);
  line-height:1.05;
  letter-spacing:-.02em
}
.big-words span {
  display:inline-block
}
/* The Scene-3 band uses longer two-word phrases ("Connect better."),
   so cap it a little smaller than single-word bands to prevent clipping. */
.words-scene .big-words {
  font-size:clamp(2rem,7.2vw,5.4rem)
}
.big-words span:nth-child(2) {
  background:linear-gradient(120deg,var(--plasma),var(--plasma-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}
.big-words+.scene-sub {
  margin-top:34px
}
/* Scroll cue */
.scroll-cue {
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--muted-dim);
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase
}
.scroll-cue::after {
  content:"";
  width:1px;
  height:46px;
  background:linear-gradient(var(--plasma),transparent);
  transform-origin:top;
  animation:scrollCue 2.2s ease-in-out infinite
}
@keyframes scrollCue {
  0% {
  transform:scaleY(0);
  opacity:0
}
40% {
  transform:scaleY(1);
  opacity:1
}
100% {
  transform:scaleY(1) translateY(46px);
  opacity:0
}
}

/* ---------- Responsive ---------- */
@media(max-width:900px) {
  .nav-links {
  position:fixed;
  inset:74px 0 auto 0;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-left:0;
  padding:12px 24px 24px;
  background:rgba(6,6,9,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease)
}
.nav-open .nav-links {
  transform:none;
  opacity:1;
  pointer-events:auto
}
.nav-links a {
  padding:15px 6px;
  font-size:15px;
  border-bottom:1px solid var(--line-soft);
  border-radius:0
}
.nav-links a::after {
  display:none
}
.nav-toggle {
  display:flex;
  order:3
}
.nav-open .nav-toggle span:nth-child(1) {
  transform:translateY(6.5px) rotate(45deg)
}
.nav-open .nav-toggle span:nth-child(2) {
  opacity:0
}
.nav-open .nav-toggle span:nth-child(3) {
  transform:translateY(-6.5px) rotate(-45deg)
}
.hero {
  min-height:auto
}
.hero-layout,.statement-grid,.section-heading,.model-grid,.contact-grid,.content-grid {
  grid-template-columns:1fr
}
.hero-layout {
  gap:70px;
  padding-block:100px 70px
}
.technology-card {
  grid-template-columns:42px 1fr
}
.card-details {
  grid-column:2
}
.people-grid {
  grid-template-columns:repeat(2,1fr)
}
.principles>div {
  grid-template-columns:36px 150px 1fr
}
.cards-3 {
  grid-template-columns:1fr
}
.product-layout {
  grid-template-columns:1fr;
  gap:40px
}
.product-layout.flip .product-copy,
.product-layout.flip .product-video {
  order:0
}
.role {
  grid-template-columns:1fr
}
.mission-row {
  grid-template-columns:1fr;
  gap:12px
}
.team-member {
  grid-template-columns:1fr;
  gap:20px
}
.talks-grid,.talks-grid-three {
  grid-template-columns:1fr
}
.scene {
  padding-block:110px
}
.scene .container {
  width:min(calc(100% - 48px),var(--container))
}
.hero-scene .container {
  max-width:none
}
.hero-video-overlay {
  background:
    linear-gradient(180deg,rgba(5,5,7,.55) 0%,rgba(5,5,7,.75) 60%,var(--black) 100%)
}
}
@media(max-width:600px) {
  .container {
  width:min(calc(100% - 32px),var(--container))
}
/* Neutralize hover-bleed negative margins so cards never exceed the narrow gutter */
.technology-card,.team-member,.paper-row,.role,.principles>div,.mission-row,.data-list>div,.news-item {
  margin-inline:0
}
.technology-card {
  padding-inline:0
}
.site-header .button {
  display:none
}
.nav {
  min-height:64px
}
.nav-links {
  inset-block-start:64px
}
.hero-layout {
  padding-top:78px
}
.hero::after {
  display:none
}
.statement,.technology,.operating-model,.leadership,.contact-section,.content-section {
  padding-block:82px
}
.technology-card {
  grid-template-columns:1fr;
  gap:24px
}
.card-details {
  grid-column:auto
}
.principles>div {
  grid-template-columns:30px 1fr
}
.principles p {
  grid-column:2
}
.people-grid {
  grid-template-columns:1fr
}
.footer-top {
  grid-template-columns:1fr
}
.footer-links {
  grid-template-columns:repeat(2,1fr)
}
.footer-bottom {
  align-items:flex-start;
  flex-direction:column;
  gap:8px
}
.page-hero {
  padding:100px 0 65px
}
.scene {
  min-height:auto;
  padding-block:96px
}
.scene .container {
  width:min(calc(100% - 32px),var(--container))
}
.scene-title {
  max-width:none
}
.data-list>div {
  grid-template-columns:1fr;
  gap:5px
}
.paper-row {
  grid-template-columns:60px 1fr;
  gap:14px
}
.paper-arrow {
  display:none
}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.hero::before,.scene::before {
  animation:none
}
.scroll-cue::after {
  animation:none
}
.reveal-init {
  opacity:1;
  transform:none
}
* {
  transition:none!important
}
}

/* ============================================================
   Two-tone dark theme — black base + deep space blue sections.
   The alternate ".light" sections are repainted navy with the
   dark-theme text palette, so the whole site reads as all-dark.
   (Redefining --paper / --paper-line flips every navy background
   and border at once; the rules below flip the text + accents
   that were hard-coded for the old off-white background.)
   ============================================================ */
:root {
  --paper:#0e1424;        /* deep space blue — replaces off-white */
  --paper-line:#22304a;   /* subtle blue-tinted hairline */
}
.content-section.light {
  background:
    radial-gradient(115% 85% at 88% 0%, rgba(92,198,255,.07), transparent 58%),
    radial-gradient(120% 90% at 0% 100%, rgba(154,123,255,.05), transparent 55%),
    linear-gradient(162deg, #16213b 0%, var(--paper) 52%, #0a0f1e 100%);
  color:var(--white);
  border-bottom-color:var(--paper-line);
}
/* Overlines, headline accents and section intros */
.light .overline { color:var(--muted); }
.light .overline::before { background:linear-gradient(90deg,var(--plasma),transparent); }
.light .hl { color:var(--plasma); }
.light .section-heading>p,
.light .prose p,
.light .info-card p,
.light .mission-row p,
.light .feature-list li,
.light .news-empty { color:var(--muted); }
/* Small labels / meta */
.light .data-list dt,
.light .info-card .number,
.light .n-meta,
.light .video-source,
.light .copyright-note { color:var(--muted-dim); }
.light .mission-date,
.light .team-photo-card .member-role,
.light .team-photo-card .member-more summary,
.light .live-badge { color:var(--plasma); }
.light .live-badge::before { background:var(--plasma); }
/* News feed titles */
.light .n-title { color:#dcdce2; }
.light .news-item:hover .n-title { color:#fff; }
.light .data-list a:hover { color:var(--plasma); }
/* Hover fills: lighten the navy instead of darkening it */
.light .data-list>div:hover,
.light .info-card:hover,
.light .news-item:hover { background:rgba(255,255,255,.04); }
/* Buttons: the dark button needs light contrast on navy */
.light .button-dark {
  background:var(--white);
  color:var(--ink);
  border-color:var(--white);
}
.light .button-dark:hover {
  background:transparent;
  color:var(--white);
  border-color:var(--white);
}

/* ============================================================
   Section-kicker animation — every part's little header label
   ("The opportunity", "Propulsion first", "Why VLEO", ...).
   When a header scrolls into view, its accent bar wipes out and
   the label slides in. Driven by IntersectionObserver in
   main.js, which adds `.js-overline` to <html> (so without JS
   the labels simply stay visible) and `.is-visible` per label
   as it enters. Hero scene is excluded — it has its own intro.
   ============================================================ */
@keyframes jj-overline-in {
  from { opacity:0; transform:translateX(-22px); }
  to   { opacity:1; transform:none; }
}
@keyframes jj-overline-bar {
  0%   { transform:scaleX(0); opacity:.15; }
  55%  { opacity:1; }
  100% { transform:scaleX(1); opacity:1; }
}
@media (prefers-reduced-motion:no-preference) {
  /* Start hidden only once JS is driving the reveal. */
  .js-overline .scene:not(.hero-scene) .overline,
  .js-overline .page-hero .overline,
  .js-overline .content-section .overline {
    opacity:0;
  }
  .js-overline .scene:not(.hero-scene) .overline::before,
  .js-overline .page-hero .overline::before,
  .js-overline .content-section .overline::before {
    transform:scaleX(0);
    transform-origin:left center;
  }
  /* Play when the label enters view. */
  .js-overline .overline.is-visible {
    animation:jj-overline-in .7s cubic-bezier(.22,1,.36,1) both;
  }
  .js-overline .overline.is-visible::before {
    animation:jj-overline-bar .8s cubic-bezier(.22,1,.36,1) both;
  }
}

/* ============================================================
   Deck-derived proof points — stat row, comparison table, and
   altitude diagram (Technology page). Text uses the shared
   palette vars, so they read correctly in both black and navy
   sections.
   ============================================================ */
/* Quantified stat row */
.stat-row {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  margin-top:48px;
  border:1px solid var(--line);
  background:var(--line);
  border-radius:12px;
  overflow:hidden;
}
.stat {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px 22px;
  background:var(--black);
}
.content-section.light .stat {
  background:var(--paper);
}
.stat-num {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1;
  color:var(--plasma);
}
.stat-label {
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}
/* Comparison table */
.table-scroll {
  margin-top:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.compare-table {
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:14px;
}
.compare-table th,
.compare-table td {
  padding:16px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
.compare-table thead th {
  color:var(--muted-dim);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.compare-table tbody th {
  color:var(--white);
  font-weight:600;
  font-size:13.5px;
}
.compare-table td {
  color:var(--muted);
}
.compare-table .col-hl {
  background:var(--plasma-soft);
  color:var(--white);
}
.compare-table thead .col-hl {
  color:var(--plasma);
}
/* Altitude diagram */
.altitude-chart {
  margin-top:54px;
}
.alt-track {
  position:relative;
  height:56px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.alt-band {
  position:absolute;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.alt-band span {
  padding:0 8px;
  color:var(--white);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
}
.alt-uvleo { background:linear-gradient(180deg,rgba(92,198,255,.30),rgba(92,198,255,.12)); }
.alt-vleo  { background:linear-gradient(180deg,rgba(154,123,255,.26),rgba(154,123,255,.10)); }
.alt-leo   { background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); }
.alt-band + .alt-band { border-left:1px solid var(--line); }
.alt-ticks {
  position:relative;
  height:18px;
  margin-top:8px;
}
.alt-ticks span {
  position:absolute;
  transform:translateX(-50%);
  color:var(--muted-dim);
  font-size:11px;
  font-weight:600;
}
.alt-ticks span:first-child { transform:none; }
.alt-ticks span:last-child { transform:translateX(-100%); }
.alt-legend {
  margin-top:16px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
}
.alt-legend b { color:var(--white); font-weight:600; }
@media (max-width:860px) {
  .stat-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .stat-row { grid-template-columns:1fr; }
}