/* ============================================
   Saltenna — Global Styles
   Brand palette sourced directly from the investor deck
   (20260612 Saltenna_Investor_Presentation.pptx): slide
   background #13263F, wave/diagram accents #2EC4B6 / #9DBDD1.
   ============================================ */

:root {
  --bg: #13263f;
  --bg-alt: #17304d;
  --surface: #1a3550;
  --surface-2: #20405f;
  --border: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --text-dim: #9bb0c2;
  --accent: #ffffff;
  /* signal palette — sourced from the deck's wave/diagram graphics; used for
     ambient glows and the interactive wave layers */
  --teal-rgb: 46, 196, 182;
  --blue-rgb: 157, 189, 209;
  --max-w: 1240px;
  --radius: 0;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text-dim); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(13, 20, 36, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  /* the header spans the full window: logo hugs the left edge, tabs the right */
  max-width: none;
  padding: 0 clamp(20px, 3vw, 44px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.logo:hover { color: var(--text); opacity: 0.8; }
.logo svg { flex-shrink: 0; }
.logo img { height: 20px; width: auto; display: block; }
.footer-brand .logo img { height: 18px; }

.main-nav { display: flex; align-items: center; gap: 2px; }

.main-nav a {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: color 0.2s;
}
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--text); }

/* gradient underline grows in on hover, echoing the eyebrow accent.
   When active/hovered, a fully-transparent gap sweeps through the solid
   line (a mask window whose notch rolls across — inverse of a moving pulse). */
.main-nav a:not(.nav-cta) { position: relative; }
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--teal-rgb)), rgb(var(--blue-rgb)));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.2, 0.6, 0.2, 1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46.5%, transparent 48%, transparent 52%, #000 53.5%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 46.5%, transparent 48%, transparent 52%, #000 53.5%, #000 100%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}
.main-nav a:not(.nav-cta):hover::after,
.main-nav a.active:not(.nav-cta)::after { transform: scaleX(1); }
/* the sweeping gap is reserved for the current page's tab; hover is just the
   classic solid underline reveal (default mask-position = solid line) */
.main-nav a.active:not(.nav-cta)::after { animation: tab-gap 6s linear infinite; }

/* the transparent gap sweeps left-to-right; the mask notch sits off-window at
   both ends of the cycle (line fully solid), so the loop restart is seamless */
@keyframes tab-gap {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav a.active:not(.nav-cta)::after { animation: none; }
}

.main-nav a.nav-cta {
  color: #000;
  background: var(--text);
  font-weight: 600;
  margin-left: 14px;
  padding: 10px 20px;
}
.main-nav a.nav-cta:hover { background: #d4d4d4; color: #000; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text);
  margin: 6px 0;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
  padding-bottom: 8vh;
  border-bottom: 1px solid var(--border-soft);
}

/* full-color footage — legibility comes from the scrim, not desaturation */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.5) 0%, rgba(13, 20, 36, 0.22) 45%, rgba(13, 20, 36, 0.6) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 26px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--teal-rgb)), rgb(var(--blue-rgb)));
}

/* The statement: one phrase, huge, white, set like the wordmark. main.js
   scramble-decodes it on first load (characters appear left→right, the trailing
   few cycling through random letters before resolving — the Anduril treatment).
   Lines reserve their height so nothing jumps while empty. */
.hero-statement {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.75vw, 5.2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 48px;
}
.hero-statement .line {
  display: block;
  min-height: 1.04em;
}
.hero-statement .line > span { display: block; }

/* Anduril-style sign strip: mono tagline (justified word rows) · logo · EST
   block. The tagline + EST decode like the statement; the logo fades in; the
   second EST field counts up through the years then lands on "→ Future". */
.hero-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.hero-sign img {
  height: 38px;
  width: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* terminal cursor: lands at the end of the statement once it resolves,
   blinks five times, then main.js removes it */
.type-cursor {
  display: inline-block;
  width: 0.46em;
  height: 0.74em;
  margin-left: 0.09em;
  background: #fff;
  animation: cursor-blink 0.6s linear 9;
}
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hero-sign.sign-on img { opacity: 1; }
.sign-tag {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 19.5em;
  text-align: left;
}
.tag-row { display: flex; justify-content: space-between; min-height: 1em; }
.sign-est {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 9em;
  text-align: left;
}
.est-line { display: block; min-height: 1em; }
.sign-est .est-future {
  color: rgba(255, 255, 255, 0.6);
  padding-left: 1.2em;
}
@media (prefers-reduced-motion: reduce) {
  .hero-sign img { opacity: 1; transition: none; }
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--text);
  color: #000;
}
.btn-primary:hover { background: #d4d4d4; color: #000; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 200px 0 100px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.page-hero .bg-video {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  opacity: 0.35;
  filter: grayscale(1) contrast(1.05);
  will-change: transform;
}
/* full-color hero footage (legibility still comes from the ::after scrim) */
.page-hero.color-media .bg-video {
  opacity: 1;
  filter: none;
}
/* neutral darkening only — NO navy/teal tint, so the footage keeps its true
   colours; just enough black for the white title to stay legible */
.page-hero.color-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.72) 100%);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% 22%, rgba(var(--teal-rgb), 0.09), transparent 62%),
    radial-gradient(820px 420px at 88% 85%, rgba(var(--blue-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(19, 38, 63, 0.5) 0%, rgba(19, 38, 63, 0.2) 50%, rgba(19, 38, 63, 0.94) 100%);
  pointer-events: none;
}

/* Interior heroes without a background video: lighter shading so the
   interactive canvas behind the text stays visible. */
.page-hero.no-media::after {
  background:
    radial-gradient(900px 420px at 12% 22%, rgba(var(--teal-rgb), 0.09), transparent 62%),
    radial-gradient(820px 420px at 88% 85%, rgba(var(--blue-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(19, 38, 63, 0.35) 0%, rgba(19, 38, 63, 0.1) 55%, rgba(19, 38, 63, 0.6) 100%);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 14px 0 20px;
  max-width: 900px;
}
.page-hero p { font-size: 1.18rem; line-height: 1.7; color: var(--text-dim); max-width: 660px; }

/* ---------- Seapower-style hero (maritime): big title up top, a mono info
   row pinned to the bottom over the video ---------- */
.page-hero.sea-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 128px 0 44px;
}
/* neutral (untinted) scrim, a touch stronger mid so the large title reads */
.page-hero.color-media.sea-hero::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.82) 100%);
}
/* wireframe terrain hero (Products): the canvas paints its own pure-black
   scene, so the section base goes black and the scrim stays light — just
   enough at the top and bottom edges for the title and info row to read */
.page-hero.terrain-hero { background: #000; }
.page-hero.color-media.terrain-hero::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.6) 100%);
}
/* flex items with margin:0 auto shrink-wrap to content — force full width so
   the eyebrow/title left-align with the bottom info row, not centre */
.sea-hero .hero-lead,
.sea-hero .hero-info { width: 100%; }
.sea-hero .hero-lead { margin-top: 6vh; }
.sea-hero .hero-lead .eyebrow { margin-bottom: 24px; }
.sea-hero .hero-lead h1 {
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 15ch;
}
.sea-hero .hero-info {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr auto;
  gap: 40px;
  align-items: end;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.7;
}
.sea-hero .hero-info-tag p { margin: 0 0 22px; color: var(--text); max-width: 22ch; }
.sea-hero .hero-scroll {
  display: inline-block;
  color: var(--text);
  font-size: 1.15rem;
  text-decoration: none;
  transition: transform 0.25s, color 0.25s;
}
.sea-hero .hero-scroll:hover { transform: translateY(4px); color: rgb(var(--teal-rgb)); }
.sea-hero .hero-info-desc { margin: 0; color: var(--text-dim); font-size: 1.1rem; max-width: 46ch; }
.sea-hero .hero-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-self: end;
  align-items: end;
}
.sea-hero .hero-info-links a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: color 0.2s;
}
.sea-hero .hero-info-links a:hover { color: rgb(var(--teal-rgb)); }

/* ---- Hero rollout on page load: the video fades up, the title wipes in from
   the left, and the eyebrow + bottom info row rise in sequence. Runs once on
   load (no scroll trigger) so it plays every time you flip to the page. ---- */
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hero-wipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
  to   { opacity: 1; clip-path: inset(0 -3% 0 0); transform: none; }
}
.page-hero.color-media.sea-hero .bg-video,
.page-hero.terrain-hero .fx-canvas { animation: hero-fade 1.1s ease both; }
.sea-hero .hero-lead .eyebrow { animation: hero-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.15s both; }
.sea-hero .hero-lead h1 { animation: hero-wipe 0.95s cubic-bezier(0.2, 0.6, 0.2, 1) 0.3s both; }
.sea-hero .hero-info-tag { animation: hero-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.62s both; }
.sea-hero .hero-info-desc { animation: hero-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.74s both; }
.sea-hero .hero-info-links { animation: hero-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.86s both; }
@media (prefers-reduced-motion: reduce) {
  .page-hero.color-media.sea-hero .bg-video,
  .page-hero.terrain-hero .fx-canvas,
  .sea-hero .hero-lead .eyebrow,
  .sea-hero .hero-lead h1,
  .sea-hero .hero-info-tag,
  .sea-hero .hero-info-desc,
  .sea-hero .hero-info-links { animation: none; }
}
/* when JS scramble-decodes the hero text (main.js adds .js-decode), the CSS
   entrances on those elements step aside — they remain the no-JS fallback */
.sea-hero.js-decode .hero-lead .eyebrow,
.sea-hero.js-decode .hero-lead h1,
.sea-hero.js-decode .hero-info-tag,
.sea-hero.js-decode .hero-info-links { animation: none; }

@media (max-width: 860px) {
  .page-hero.sea-hero { min-height: auto; padding: 150px 0 56px; }
  .sea-hero .hero-lead h1 { max-width: none; }
  .sea-hero .hero-info { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .sea-hero .hero-info-links { justify-self: start; }
}

/* ---------- Sections ---------- */
section.block { padding: 110px 0; }
section.block.alt {
  background:
    radial-gradient(1000px 520px at 88% 0%, rgba(var(--blue-rgb), 0.05), transparent 60%),
    radial-gradient(900px 520px at 6% 100%, rgba(var(--teal-rgb), 0.05), transparent 60%),
    var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* Tonal variants: near-black and paper-white sections give the navy pages
   the black/white rhythm of the investor deck (navy titles, white content) */
section.block.dark {
  background:
    radial-gradient(1000px 520px at 85% 0%, rgba(var(--blue-rgb), 0.04), transparent 60%),
    #070c14;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
section.block.dark .card,
section.block.dark .team-card { background-color: #0a1019; }
section.block.dark .card:hover,
section.block.dark .team-card:hover { background-color: #111a29; }

/* deeper navy section: darker than the body navy, with more tonal variation in
   the background (teal/blue washes + a vertical gradient). Cards are left alone
   so they keep their navy color and stand out against the darker frame. */
section.block.deep {
  background:
    radial-gradient(1100px 560px at 15% -8%, rgba(var(--teal-rgb), 0.05), transparent 58%),
    radial-gradient(1000px 620px at 95% 108%, rgba(var(--blue-rgb), 0.04), transparent 58%),
    linear-gradient(180deg, #070c14 0%, #0a1220 55%, #070c14 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

section.block.light {
  background: #f4f7f9;
  color: #13263f;
  border-top: 1px solid rgba(19, 38, 63, 0.08);
  border-bottom: 1px solid rgba(19, 38, 63, 0.08);
}
.block.light h2,
.block.light h3,
.block.light .split ul li b { color: #13263f; }
.block.light p,
.block.light .split ul li { color: #44566b; }
.block.light .eyebrow { color: #5b6b7a; }
.block.light .split ul li,
.block.light .split ul li:last-child { border-color: rgba(19, 38, 63, 0.14); }
.block.light .split ul li::before { background: #13263f; }
.block.light .split p a { color: #13263f; border-color: rgba(19, 38, 63, 0.35); }
.block.light .split p a:hover { color: #065a82; border-color: #065a82; }
.block.light .split-media { border-color: rgba(19, 38, 63, 0.14); }
.block.light .card {
  background-color: #ffffff;
  border: 1px solid rgba(19, 38, 63, 0.1);
}
.block.light .card:hover { background-color: #ffffff; }
.block.light .card p { color: #44566b; }
.block.light .card .icon { border-color: rgba(19, 38, 63, 0.25); }
.block.light .card .icon svg { stroke: #13263f; }

/* ---------- Full-bleed image bands (text over imagery) ---------- */
.image-band {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #070c14;
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* bands can carry looping video instead of a still image */
.image-band > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.55;
}
.image-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 12, 20, 0.85) 0%, rgba(7, 12, 20, 0.45) 55%, rgba(19, 38, 63, 0.25) 100%);
}
.image-band .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
}
.image-band h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 640px;
  margin: 14px 0 18px;
}
.image-band p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.12rem;
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 36px;
}
/* mirrored band: content pushed to the right, dark gradient flipped to the
   right so the text stays legible over the darker side */
.image-band.reverse::after {
  background: linear-gradient(270deg, rgba(7, 12, 20, 0.85) 0%, rgba(7, 12, 20, 0.45) 55%, rgba(19, 38, 63, 0.25) 100%);
}
.image-band.reverse .container { text-align: right; }
.image-band.reverse h2,
.image-band.reverse p { margin-left: auto; }

.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 18px;
}
.section-head p { color: var(--text-dim); font-size: 1.14rem; line-height: 1.7; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}

.card {
  background-color: var(--bg);
  padding: 36px 32px;
  transition: background-color 0.25s, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.3s;
}
/* cards that navigate somewhere: an <a> wrapper with a sliding corner arrow */
a.card {
  display: block;
  position: relative;
  color: inherit;
}
a.card:hover { color: inherit; }
a.card .card-go {
  position: absolute;
  top: 30px;
  right: 28px;
  font-size: 1.05rem;
  color: var(--text-dim);
  transition: color 0.25s, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
a.card:hover .card-go {
  color: rgb(var(--teal-rgb));
  transform: translateX(4px);
}
section.block.alt .card { background-color: var(--bg-alt); }
.card:hover,
section.block.alt .card:hover {
  background-color: var(--surface-2);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.55);
}

/* alternating color washes across cards — teal / blue / deep navy */
.card-grid .card:nth-child(3n + 1) {
  background-image: linear-gradient(165deg, rgba(var(--teal-rgb), 0.07), transparent 55%);
}
.card-grid .card:nth-child(3n + 2) {
  background-image: linear-gradient(165deg, rgba(var(--blue-rgb), 0.08), transparent 55%);
}
.card-grid .card:nth-child(3n + 3) {
  background-image: linear-gradient(165deg, rgba(6, 90, 130, 0.22), transparent 60%);
}

.card:hover .icon {
  border-color: rgba(var(--teal-rgb), 0.6);
}
.card:hover .icon svg { stroke: rgb(var(--teal-rgb)); }
.card .icon { transition: border-color 0.25s; }
.card .icon svg { transition: stroke 0.25s; }

.card .icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.card .icon svg { stroke: var(--text); }

.card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.card p { color: var(--text-dim); font-size: 1.02rem; line-height: 1.65; }

/* ---------- Split feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split + .split { margin-top: 110px; }
.split.reverse .split-media { order: 2; }

.split h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 14px 0 18px;
}
.split p { color: var(--text-dim); font-size: 1.12rem; margin-bottom: 18px; line-height: 1.7; }
.split p a { color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.split p a:hover { border-color: var(--text); }

.split ul { list-style: none; margin-top: 8px; }
.split ul li {
  position: relative;
  padding: 12px 0 12px 26px;
  color: var(--text-dim);
  font-size: 0.95rem;
  border-top: 1px solid var(--border-soft);
}
.split ul li:last-child { border-bottom: 1px solid var(--border-soft); }
.split ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 1px;
  background: var(--text);
}
.split ul li b { color: var(--text); font-weight: 600; }

.split-media {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
}
.split-media svg { width: 100%; height: 100%; }

/* ink section: exact match for the 3D graphic cards' black (#0a0a0b) */
section.block.ink { background: #0a0a0b; }

/* Interactive 3D graphic embeds (three.js in an isolated iframe) — the scene
   is already dark and full-color, so opt out of the grayscale + give it a
   wider 3:2 frame matching the graphic's native aspect */
.split-media.graphic {
  filter: none;
  aspect-ratio: 3 / 2;
  background: #0a0a0b;
}
.split-media.graphic iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Large use-case video rows (maritime): full-color 16:9 looping animations */
.split-media.video-media {
  aspect-ratio: 16 / 9;
  filter: none;
  background: var(--bg);
  position: relative;
}
/* Animated SVG scene rows (communications/sensing use-case panels): the
   scenes animate via their own CSS keyframes, so a plain <img> plays them */
.split-media.scene {
  aspect-ratio: 16 / 9;
  filter: none;
  background: #0c141f;
}
.split-media.scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carded use-case rows (maritime): text + animation share one panel that
   answers the cursor, matching the card component's surfaces */
.split.use-case-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  padding: 36px;
  gap: 48px;
  /* the animation is the star: give it the wider column */
  grid-template-columns: 1fr 1.6fr;
  transition: border-color 0.25s, background 0.25s,
    transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.75s ease;
}
/* scroll focus: the panel nearest mid-screen grows and plays (set in main.js) */
.split.use-case-panel.is-focus {
  transform: scale(1.12);
  border-color: rgba(var(--teal-rgb), 0.35);
  background: var(--surface);
  z-index: 2;
}
/* on narrow screens the panel is ~full-width, so scaling it would overflow —
   keep the focus styling/playback but skip the grow */
@media (max-width: 900px) {
  .split.use-case-panel.is-focus { transform: none; }
}
/* wide screens have room beyond the 1240px container: grow further
   (1184px panel × 1.25 = 1480px — still inside a 1500px viewport) */
@media (min-width: 1500px) {
  .split.use-case-panel.is-focus { transform: scale(1.25); }
}
/* generous gap so an enlarged (focused) panel still clears its neighbours —
   at 1.25 the tallest panel grows ~62px toward each side, so 100px leaves air */
.split.use-case-panel + .split.use-case-panel { margin-top: 100px; }
.use-case-panel + .card-grid { margin-top: 100px; }
/* panels don't scale ≤900px, so no need for the big gap there */
@media (max-width: 900px) {
  .split.use-case-panel + .split.use-case-panel { margin-top: 56px; }
  .use-case-panel + .card-grid { margin-top: 56px; }
}

/* click-to-replay affordance on the animations */
.video-media:has(video) { cursor: pointer; }
.video-replay-hint {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(10, 22, 40, 0.9), 0 0 12px rgba(10, 22, 40, 0.55);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.video-media:hover .video-replay-hint { opacity: 1; }

.split + .card-grid { margin-top: 110px; }

/* ---------- Domain cards (Anduril-style image cards) ---------- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 72px;
}
.domain-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  color: var(--text);
  background: var(--surface);
  isolation: isolate;
}
.domain-card:hover { color: var(--text); }
.domain-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  z-index: -2;
}
/* seabed (no animation yet): brand gradient stand-in */
.domain-card-img.is-placeholder {
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(var(--blue-rgb), 0.35), transparent 60%),
    linear-gradient(160deg, #17304d, #0d1b2e);
}
.domain-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 38, 63, 0.15) 0%, rgba(19, 38, 63, 0.35) 45%, rgba(11, 22, 38, 0.92) 100%);
  z-index: -1;
}
.domain-card:hover .domain-card-img { transform: scale(1.07); }
.domain-card:hover { border-color: rgba(var(--teal-rgb), 0.5); }

.domain-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.domain-card-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--teal-rgb));
}
/* accent color cycles across the card row, matching the grid tint rhythm */
.domain-card:nth-child(4n + 2) .domain-card-eyebrow { color: rgb(var(--blue-rgb)); }
.domain-card:nth-child(4n + 3) .domain-card-eyebrow { color: rgba(255, 255, 255, 0.85); }
.domain-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.domain-card-arrow {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 1.1rem;
  color: var(--text);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.25s, transform 0.25s;
}
.domain-card:hover .domain-card-arrow { opacity: 1; transform: translate(0, 0); }
.domain-card:focus-visible { outline: 2px solid rgb(var(--teal-rgb)); outline-offset: 2px; }

[data-parallax] { will-change: transform; }

/* ---------- Environment ticker strip ---------- */
.env-strip {
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  padding: 22px 0;
  overflow: hidden;
}
.env-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
  width: max-content;
}
.env-track span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 64px;
}
.env-track span::after { content: "/"; color: #4a4a4a; font-size: 0.7rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}

.team-card {
  background-color: var(--bg-alt);
  padding: 32px;
  transition: background-color 0.25s, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.3s;
}
.team-card:nth-child(3n + 1) { background-image: linear-gradient(165deg, rgba(var(--teal-rgb), 0.06), transparent 50%); }
.team-card:nth-child(3n + 2) { background-image: linear-gradient(165deg, rgba(var(--blue-rgb), 0.07), transparent 50%); }
.team-card:nth-child(3n + 3) { background-image: linear-gradient(165deg, rgba(6, 90, 130, 0.2), transparent 55%); }
.team-card:hover {
  background-color: var(--surface-2);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.55);
}

.team-card .avatar {
  width: 84px;
  height: 84px;
  border-radius: 0;
  object-fit: cover;
  border: 1px solid var(--border);
  filter: grayscale(1);
  margin-bottom: 22px;
}

.team-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin-bottom: 4px; }
.team-card .role {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.team-card p { color: var(--text-dim); font-size: 1rem; line-height: 1.65; }

/* ---------- LinkedIn feed ---------- */
.linkedin-feed {
  border: 1px solid var(--border-soft);
  background: var(--bg);
  min-height: 320px;
}
section.block.alt .linkedin-feed { background: var(--bg-alt); }

.linkedin-feed iframe {
  width: 100%;
  height: 680px;
  display: block;
  border: 0;
  background: var(--bg-alt);
}

/* Connected live feed: the SociableKIT widget renders in-page (see main.js),
   so it takes its natural height and nothing is cropped. Its free-plan
   credit line (.sk_branding) is removed from the DOM by main.js; the rule
   below is a fallback that collapses it if removal ever lags the widget's
   rendering. Its inline style forces display:block !important, so it is
   hidden via size/opacity instead of display. */
.linkedin-feed.connected {
  border: 1px solid var(--border-soft);
}
.linkedin-feed .sk_branding {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.linkedin-fallback {
  padding: 88px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.linkedin-fallback svg { stroke: var(--text); margin-bottom: 18px; }
.linkedin-fallback h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.linkedin-fallback p {
  color: var(--text-dim);
  font-size: 1rem;
  max-width: 460px;
  line-height: 1.65;
  margin-bottom: 22px;
}

.linkedin-feed.has-posts {
  border: none;
  background: transparent;
  min-height: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  padding: 34px 30px;
  transition: background 0.2s;
}
.post-card:hover { background: var(--surface-2); color: var(--text); }

.post-meta {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 12px;
}

.post-card p {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 22px;
}

.post-more {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}
.post-more:hover { color: rgb(var(--teal-rgb)); }
.card .post-more { display: inline-block; margin-top: 16px; }

/* ---------- CTA band ---------- */
.cta-band {
  padding: 110px 0;
  text-align: center;
  background:
    radial-gradient(720px 360px at 50% 115%, rgba(var(--teal-rgb), 0.09), transparent 65%),
    radial-gradient(900px 300px at 50% -30%, rgba(var(--blue-rgb), 0.04), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.cta-band p { color: var(--text-dim); font-size: 1.12rem; max-width: 540px; margin: 0 auto 38px; line-height: 1.7; }

/* ---------- Contact ---------- */
.contact-info .info-item {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}
.contact-info .info-item svg { flex-shrink: 0; stroke: var(--text); margin-top: 4px; }
.contact-info .info-item b { color: var(--text); display: block; margin-bottom: 2px; }
.contact-info .info-item a { border-bottom: 1px solid var(--border); }

/* HQ / email / identifiers as a slim strip below the large form */
.contact-info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--border-soft);
}
.contact-info-strip .info-item { border-bottom: none; padding: 0; }

.contact-form {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  padding: 40px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 22px 0 8px;
  color: var(--text);
}
.contact-form label:first-child,
.form-row label { margin-top: 0; }
.form-row > div label { margin-top: 0; }

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--text);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { margin-top: 28px; width: 100%; justify-content: center; }

.form-note { font-size: 0.75rem; color: var(--text-dim); margin-top: 14px; text-align: center; }

/* Large contact form: full-width, open layout with big underline fields */
.contact-form-large {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 920px;
}
.contact-form-large .form-row {
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}
.contact-form-large label {
  margin: 0 0 6px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
}
.contact-form-large input,
.contact-form-large textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.01em;
}
.contact-form-large input:focus,
.contact-form-large textarea:focus {
  border-color: rgb(var(--teal-rgb));
}
.contact-form-large textarea { min-height: 96px; }
.contact-form-large .btn {
  margin-top: 56px;
  width: auto;
  padding: 20px 60px;
}
.contact-form-large .form-note { text-align: left; }

@media (max-width: 720px) {
  .contact-form-large .form-row {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: #0d1424;
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 56px;
}

.footer-grid h4 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}
.footer-grid ul { list-style: none; }
.footer-grid ul li { margin-bottom: 12px; }
.footer-grid ul a, .footer-grid p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.7; }
.footer-grid ul a:hover { color: var(--text); }

.footer-brand .logo { margin-bottom: 18px; }
.footer-brand p { max-width: 300px; }

.footer-meta {
  border-top: 1px solid var(--border-soft);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.footer-meta .codes span { margin-right: 20px; }

/* ---------- Reveal animation ----------
   hidden start state applies only when JS is running (main.js adds html.js),
   so content stays visible without JavaScript */
html.js .reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* cards in a grid cascade in with a slight stagger */
.card-grid .reveal:nth-child(2),
.team-grid .reveal:nth-child(2),
.domain-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.card-grid .reveal:nth-child(3),
.team-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.card-grid .reveal:nth-child(4),
.team-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.card-grid .reveal:nth-child(n + 5),
.team-grid .reveal:nth-child(n + 5) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transform: none; transition: opacity 0.4s ease; }
  .card, .team-card { transition: background-color 0.25s; }
  .card:hover, .team-card:hover { transform: none; box-shadow: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.use-case-panel { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(13, 20, 36, 0.97);
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 28px 24px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .main-nav a.nav-cta { margin: 16px 0 0; text-align: center; justify-content: center; border-bottom: none; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Interface divider motif ----------
   A thin boundary line — the "interface" Saltenna's waves travel along —
   with a signal pulse gliding across it and a small mast crossing through. */
.interface-divider {
  position: relative;
  height: 1px;
  max-width: 520px;
  margin: 0 auto 56px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent);
}
.interface-divider::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--teal-rgb), 0.85), transparent);
  filter: drop-shadow(0 0 6px rgba(var(--teal-rgb), 0.55));
  animation: interface-signal 7s linear infinite;
}
.interface-divider::after {
  content: "";
  position: absolute;
  left: 58%;
  top: -7px;
  width: 1px;
  height: 15px;
  background: linear-gradient(180deg, rgba(var(--teal-rgb), 0.9), rgba(var(--teal-rgb), 0.25));
}
@keyframes interface-signal {
  0% { left: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 46px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .interface-divider::before { animation: none; opacity: 0.5; left: 34%; }
}

/* ---------- Card media (looping use-case animations) ---------- */
.card-media {
  /* bleed to the card edges (cards pad 36px 32px) */
  margin: -36px -32px 26px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
.card-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Interactive background FX ---------- */
.has-fx {
  position: relative;
  /* clip (not hidden) so position:sticky still works inside these sections —
     hidden makes the section a scroll container and kills the pinned stage */
  overflow: clip;
}
.has-fx > .container {
  position: relative;
  z-index: 1;
}
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Use-case explorer (Communications + Sensing): big-type list on
   the left, sticky detail panel on the right — hovering/choosing a title
   swaps the detail (option D redesign of the old card grids) ---------- */
.uc-explorer {
  display: grid;
  /* three columns (v86): the name list stays narrow (one short word per row),
     then the 3D model card, then the spec card. The fr values track the cards,
     so the text card keeps the wider share after the flip. The model column
     keeps its track even when a product has no model yet, so switching products
     never reflows the row. */
  grid-template-columns: minmax(200px, 0.42fr) 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.uc-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uc-list button {
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: rgba(235, 242, 248, 0.3);
  transition: color 0.25s;
}
.uc-list .idx {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  opacity: 0.55;
  min-width: 2.4ch;
  transition: color 0.25s, opacity 0.25s;
}
.uc-list button:hover,
.uc-list button.is-active { color: var(--text); }
.uc-list button.is-active .idx {
  color: rgb(var(--teal-rgb));
  opacity: 1;
}
.uc-detail {
  position: sticky;
  top: 110px;
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  padding: 36px;
  min-height: 320px;
}
/* no-JS / SEO fallback: all detail items render stacked; JS adds .js to the
   explorer and collapses to the active one only */
.uc-explorer.js .uc-detail-item:not(.is-active) { display: none; }
.uc-detail-item.is-active { animation: uc-fade 0.35s ease; }
@keyframes uc-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-detail-item.is-active { animation: none; }
}
.uc-detail-item .icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  margin-bottom: 26px;
}
.uc-detail-item .icon svg { stroke: rgb(var(--teal-rgb)); width: 26px; height: 26px; }
.uc-detail-item h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.uc-detail-item p { color: var(--text-dim); font-size: 1.12rem; line-height: 1.75; }
@media (max-width: 900px) {
  .uc-explorer { grid-template-columns: 1fr; gap: 40px; }
  .uc-detail { position: static; min-height: 0; }
  .uc-list button { font-size: 1.3rem; gap: 14px; padding: 9px 0; }
}

/* detail-panel media: the animated use-case SVG sits above the copy; the old
   icon is redundant when media is present */
.uc-detail-media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  background: #0c141f;
  margin-bottom: 26px;
}
.uc-detail-media img,
.uc-detail-media iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.uc-detail-item:has(.uc-detail-media) .icon { display: none; }

/* ---------- Use-case scrollytelling (option A): text steps scroll past a
   pinned scene stage; the step nearest mid-viewport activates its scene.
   Bigger media + bigger type than the old explorer, per user. ---------- */
.uc-scroll {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.uc-step {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 0.45s ease;
}
.uc-scroll.js .uc-step.is-active { opacity: 1; }
.uc-scroll:not(.js) .uc-step { opacity: 1; }
.uc-step .uc-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  color: rgb(var(--teal-rgb));
  margin-bottom: 16px;
}
.uc-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 18px;
  max-width: 16ch;
}
.uc-step p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 46ch;
}
.uc-stage { position: sticky; top: 13vh; }
/* instrument-panel framing: reticle corner brackets just outside the stage,
   and a deep drop glow so the scene sits IN the page instead of on it */
.uc-stage::after {
  content: "";
  position: absolute;
  inset: -14px;
  pointer-events: none;
  --bkt: rgba(157, 189, 209, 0.5);
  background:
    linear-gradient(var(--bkt), var(--bkt)) top left / 24px 1.5px,
    linear-gradient(var(--bkt), var(--bkt)) top left / 1.5px 24px,
    linear-gradient(var(--bkt), var(--bkt)) top right / 24px 1.5px,
    linear-gradient(var(--bkt), var(--bkt)) top right / 1.5px 24px,
    linear-gradient(var(--bkt), var(--bkt)) bottom left / 24px 1.5px,
    linear-gradient(var(--bkt), var(--bkt)) bottom left / 1.5px 24px,
    linear-gradient(var(--bkt), var(--bkt)) bottom right / 24px 1.5px,
    linear-gradient(var(--bkt), var(--bkt)) bottom right / 1.5px 24px;
  background-repeat: no-repeat;
}
.uc-stage-bar {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  padding: 11px 16px;
  border: 1px solid var(--border-soft);
  border-bottom: none;
  background: rgba(13, 20, 36, 0.7);
}
.uc-stage-media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  background: #0c141f;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 34px 90px -42px rgba(0, 0, 0, 0.85),
    0 0 90px -36px rgba(var(--teal-rgb), 0.3);
}
.uc-stage-media img,
.uc-stage-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.uc-stage-media img.is-active,
.uc-stage-media video.is-active { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .uc-stage-media img,
  .uc-stage-media video { transform: none; }
}
/* no-JS / SEO fallback: every scene renders stacked and visible */
.uc-scroll:not(.js) .uc-stage { position: static; }
.uc-scroll:not(.js) .uc-stage-media { aspect-ratio: auto; }
.uc-scroll:not(.js) .uc-stage-media img,
.uc-scroll:not(.js) .uc-stage-media video { position: static; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .uc-scroll.js .uc-step { opacity: 1; }
}
@media (max-width: 900px) {
  .uc-scroll { display: block; }
  /* the stage pins under the header; steps scroll beneath it */
  .uc-stage { position: sticky; top: 78px; z-index: 5; margin-bottom: 10px; }
  .uc-stage-bar { background: rgba(13, 20, 36, 0.95); }
  .uc-step { min-height: 0; padding: 40px 0; opacity: 0.55; }
  .uc-step h3 { font-size: 1.45rem; }
  .uc-step p { font-size: 1.02rem; }
}

/* ---------- Products page (v72): explorer detail meta + spec chips.
   The maturity badge is a deliberate exception to the Jul 30 no-eyebrow rule —
   it reads as a readiness marker, not a decorative kicker. ---------- */
.product-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.status-badge {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--teal-rgb));
  border: 1px solid rgba(var(--teal-rgb), 0.45);
  padding: 5px 10px;
  white-space: nowrap;
}
.product-domain {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s;
}
.product-domain:hover { color: rgb(var(--teal-rgb)); }
.uc-detail-item .product-claim {
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 12px;
}
.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.spec-chips li {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
  padding: 7px 11px;
  white-space: nowrap;
}

/* ---------- Products: licensed-software split (v78). Big-type name in the
   top-left corner with the paragraph under it; the animation sits apart on
   the right in its own card, where a product image would live. The media bg
   is the demo's own card gradient so the ported sheet sits on its approved
   ground. Reuses .split for the two columns and its ≤900px collapse. ---------- */
.tool-split { align-items: start; }
.tool-split .tool-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.tool-split .tool-claim {
  color: var(--text);
  font-size: 1.14rem;
  line-height: 1.6;
  margin-bottom: 12px;
}
.tool-card {
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  padding: 20px;
}
.tool-card .tool-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #0d1424 0%, #0f1a2e 55%, #0d1424 100%);
  overflow: hidden;
}

/* ---------- Products page polish (v79) — scoped to #products / #software.
   Deliberate page-local exceptions to two site rules: eyebrow kickers (removed
   site-wide Jul 30) return here as .pp-eyebrow, and --radius: 0 is overridden
   with 14px on this page's cards and media frames. Don't let these leak. */

/* 1 — typography: gradient section titles, measured paragraphs */
#products .section-head h2,
#software .section-head h2,
#software .tool-name {
  background: linear-gradient(105deg, #fff 55%, rgb(var(--teal-rgb)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#products .section-head p,
#software .section-head p,
#products .uc-detail-item p,
#software .tool-split p { max-width: 55ch; }

.pp-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--teal-rgb));
}

/* 2 — media frames: 1px gradient border, 14px radius, soft teal glow */
#products .uc-detail-media {
  border: 1px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(#0c141f, #0c141f) padding-box,
    linear-gradient(135deg, rgba(var(--teal-rgb), 0.5), transparent 40%) border-box;
  box-shadow: 0 0 60px rgba(var(--teal-rgb), 0.12);
}
#products .uc-detail { border-radius: 14px; }
#software .tool-card {
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
    linear-gradient(135deg, rgba(var(--teal-rgb), 0.5), transparent 40%) border-box;
  box-shadow: 0 0 60px rgba(var(--teal-rgb), 0.12);
}
.tool-media { border: none; border-radius: 9px; }

/* 3 — faint radial glows behind the media areas */
#products::before,
#software::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 780px 420px at 72% 38%, rgba(var(--teal-rgb), 0.06), transparent 70%);
}
#software { position: relative; overflow: clip; }
#software .container { position: relative; z-index: 1; }

/* 4 — pill badges under section intros; mono status line under the waveform */
.pp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pp-pill {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.tool-status {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.tool-status .live { color: rgb(var(--teal-rgb)); }

/* ---------- Explorer model card: the interactive 3D scene on its own card, to
   the left of the spec card. Same border/glow treatment as the detail pane. */
.uc-model-card {
  /* the model IS the card (v91): no border, no padding, no inner frame — the
     viewer runs edge to edge and the rounded corners clip it. The teal glow is
     kept: it's a shadow, not a border, and it's what still reads as a card. */
  position: relative;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1424 0%, #0f1a2e 55%, #0d1424 100%);
  box-shadow: 0 0 60px rgba(var(--teal-rgb), 0.12);
}
.uc-explorer.js .uc-model-card:not(.is-active) { display: none; }
/* no-JS: all model cards would stack, so keep only the first */
.uc-explorer:not(.js) .uc-model-card ~ .uc-model-card { display: none; }
.uc-model-card.is-active { animation: uc-fade 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .uc-model-card.is-active { animation: none; } }
.uc-model-frame {
  position: relative;
  /* aspect only governs the stacked/mobile case — above 900px the frame flexes
     to fill the card, which is stretched to the spec card's height (v89) */
  aspect-ratio: 16 / 9;
  border: 0;
  overflow: hidden;
}
/* two or more models split the card evenly, with a hairline marking the cut */
.uc-model-frame + .uc-model-frame { border-top: 1px solid var(--border-soft); }
.uc-model-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
/* The model card matches the spec card's whole box, not just its media: the
   column stretches to the grid row (whose height the taller spec card sets) and
   the viewer frame flexes to fill whatever is left after the hint. Gives the
   standing diver a tall portrait window instead of a letterbox. Both viewers
   handle iframe resize, so a per-product height change is fine. (v89) */
@media (min-width: 901px) {
  .uc-models { align-self: stretch; }
  .uc-model-card { height: 100%; display: flex; flex-direction: column; }
  /* flex-basis 0 makes the slices EQUAL regardless of intrinsic size, so two
     models each take exactly half the card */
  .uc-model-frame { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }
}
/* Hairline card borders on the products page (v90). 0.5px is a true half-pixel
   on hi-DPI; 1x displays round it up to one device pixel rather than dropping
   it, so the edge never disappears. Scoped to this page's cards and media
   frames — chips, pills and badges keep their 1px. */
#products .uc-detail,
#products .uc-detail-media,
#software .tool-card {
  border-width: 0.5px;
}

.uc-model-hint {
  /* overlaid on its own frame so the card stays wholly model(s); a scrim keeps
     it legible even over a light-themed viewer, and pointer-events pass through */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 26px 18px 12px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13, 20, 36, 0.9), transparent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 900px) {
  /* one column: name list, then the model card, then the spec card */
  .uc-model-frame { aspect-ratio: 4 / 3; }
  #products .uc-detail-media { aspect-ratio: 4 / 3; }
}