/* GRAVIENT v2: liquid glass over aurora.
   Committed system: deep space navy, cobalt-to-cyan light, frosted glass panels,
   zero hard lines (everything rounded, edges are light not rules).
   Space Grotesk (brand) + IBM Plex Mono (data). Fluid at every width. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Regular.woff") format("woff"),
       url("../assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Bold.woff") format("woff"),
       url("../assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* IBM Plex Mono, self-hosted. It was previously fetched from Google Fonts on
   every page load, which put a third-party request (and the visitor's IP) in
   the path of every view, contradicting the privacy policy, and made the type
   depend on a CDN staying up. Latin + latin-ext subsets only, weights 400/500. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #04070f;
  --bg-2: #060b18;
  --text: #eef3fb;
  --muted: #9aa8bf;
  --faint: #64718a;
  --accent: #4d7dff;
  --accent-2: #6ee7ff;
  --accent-deep: #1d419e;
  --grad: linear-gradient(120deg, #4d7dff, #6ee7ff);
  --grad-soft: linear-gradient(120deg, rgba(77,125,255,0.55), rgba(110,231,255,0.55));

  /* glass */
  --glass: rgba(148, 178, 255, 0.055);
  --glass-2: rgba(148, 178, 255, 0.09);
  --glass-hi: rgba(255, 255, 255, 0.16);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 24px 60px rgba(2, 6, 18, 0.55);
  --blur: blur(22px) saturate(1.5);

  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(18px, 4vw, 64px);
  --maxw: 1480px;
  --r-lg: clamp(20px, 2.4vw, 32px);
  --r-md: 20px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: rgba(77, 125, 255, 0.55); color: #fff; }

/* ---------------- aurora atmosphere ---------------- */
.aurora {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.aurora .b1 {
  width: 55vw; height: 55vw;
  left: -12vw; top: -14vw;
  background: radial-gradient(circle at 40% 40%, rgba(29, 65, 158, 0.85), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora .b2 {
  width: 44vw; height: 44vw;
  right: -10vw; top: 12vh;
  background: radial-gradient(circle at 55% 45%, rgba(110, 231, 255, 0.35), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora .b3 {
  width: 60vw; height: 60vw;
  left: 18vw; bottom: -28vw;
  background: radial-gradient(circle at 50% 50%, rgba(77, 125, 255, 0.4), transparent 62%);
  animation: drift3 38s ease-in-out infinite alternate;
}
.aurora .ell {
  position: absolute;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  width: min(90vw, 1200px);
  opacity: 0.5;
  animation: drift2 30s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-5vw, 7vh) scale(0.94); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, -6vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .aurora .blob, .aurora .ell { animation: none; }
}

/* faint dot-matrix texture */
.dotfield {
  position: absolute;
  width: min(34vw, 265px);
  opacity: 0.14;
  pointer-events: none;
  /* -1, not 0: a positioned element at z-index 0 paints ABOVE static in-flow
     text, so this decoration was rendering on top of section headings. */
  z-index: -1;
}

/* grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

main, footer { position: relative; z-index: 1; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------------- scroll progress glow ---------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 1200;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(110, 231, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------------- floating capsule nav ---------------- */
.site-header {
  position: fixed;
  top: clamp(10px, 2vh, 22px);
  left: 0; right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
}
.nav-capsule {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 10px 12px 10px clamp(18px, 2vw, 26px);
  border-radius: var(--r-pill);
  background: rgba(10, 16, 30, 0.55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge), 0 12px 40px rgba(2, 6, 18, 0.45);
  max-width: 100%;
}
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand img { height: 16px; width: auto; }
.brand .brand-tm {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--faint);
  transform: translateY(-4px);
}
.main-nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.main-nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.main-nav a.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.main-nav a.nav-cta {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 24px rgba(77, 125, 255, 0.45);
}
.main-nav a.nav-cta:hover { filter: brightness(1.1); }

.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  flex: none;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(4, 7, 15, 0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 700;
  padding: 16px 20px;
  margin: 4px 0;
  border-radius: var(--r-md);
  color: var(--muted);
  transition: color 0.25s ease, background 0.25s ease;
}
.mobile-menu a:hover, .mobile-menu a.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.mobile-menu .mm-meta {
  margin-top: 30px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
}

/* ---------------- shared type ---------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(110, 231, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 26px;
}
.kicker .kdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2);
  flex: none;
}
.h-xl {
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.h-lg {
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h-md {
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.18;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: clamp(16px, 1.5vw, 21px); color: var(--muted); line-height: 1.7; }

.section { padding: clamp(70px, 9vw, 140px) 0; position: relative; }
.section-head { margin-bottom: clamp(38px, 5vw, 80px); max-width: 940px; }

.rv { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* buttons: glass pills */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: var(--r-pill);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-spring), filter 0.3s ease;
}
.btn .arr { transition: transform 0.3s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arr { transform: translateX(5px); }
.btn-solid {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 34px rgba(77, 125, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-solid:hover { filter: brightness(1.08); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* glass card primitive */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.08), transparent 55%);
  pointer-events: none;
}
.hoverable { transition: transform 0.45s var(--ease-out), background 0.45s ease, box-shadow 0.45s ease; }
.hoverable:hover {
  transform: translateY(-6px);
  background: var(--glass-2);
  box-shadow: var(--glass-edge), 0 30px 70px rgba(2, 6, 18, 0.65), 0 0 40px rgba(77, 125, 255, 0.14);
}

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.hero-media, .hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 7, 15, 0.5) 0%, rgba(4, 7, 15, 0.08) 42%, rgba(4, 7, 15, 0.86) 100%),
    radial-gradient(90% 60% at 18% 88%, rgba(29, 65, 158, 0.4) 0%, transparent 62%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 130px;
  padding-bottom: clamp(28px, 4vh, 60px);
}
.hero h1 { max-width: 1080px; text-shadow: 0 4px 40px rgba(2, 6, 18, 0.6); }
.hero .lead { max-width: 640px; margin-top: 26px; color: rgba(238, 243, 251, 0.85); }
.hero-ctas { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* floating glass chips over hero */
.hero-chips {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 22px;
  border-radius: 18px;
  background: rgba(10, 16, 30, 0.42);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge), 0 18px 44px rgba(2, 6, 18, 0.45);
  animation: floaty 7s ease-in-out infinite;
}
.chip .cv { font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; }
.chip .cv em { font-style: normal; font-size: 0.6em; color: var(--accent-2); }
.chip .cl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip.c1 { right: clamp(4%, 8vw, 12%); top: 22%; animation-delay: 0s; }
.chip.c2 { right: clamp(14%, 22vw, 30%); top: 42%; animation-delay: 2.2s; }
.chip.c3 { right: clamp(3%, 6vw, 9%); top: 58%; animation-delay: 4.1s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (max-width: 900px) { .hero-chips { display: none; } }
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }

/* hero stat glass bar */
.hero-stats {
  position: relative;
  z-index: 2;
  margin: 0 var(--pad) clamp(20px, 3vh, 36px);
}
.hero-stats .stat-capsule {
  max-width: calc(var(--maxw) - 2 * var(--pad));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--r-lg);
  background: rgba(10, 16, 30, 0.45);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge), 0 20px 60px rgba(2, 6, 18, 0.5);
}
.hstat {
  padding: 12px 18px;
  border-radius: 16px;
  transition: background 0.3s ease;
}
.hstat:hover { background: rgba(255, 255, 255, 0.05); }
.hstat .num {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hstat .num .unit { font-size: 0.45em; margin-left: 2px; }
.hstat .num .unit, .hstat .num .pre { color: var(--accent-2); font-weight: 700; }
.hstat .lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------------- marquee ---------------- */
.marquee {
  overflow: clip;
  padding: 6px 0;
  margin: clamp(24px, 3vw, 40px) 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: scrollx 40s linear infinite;
  align-items: center;
}
.marquee-track .mitem {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: rgba(148, 178, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------------- pillars ---------------- */
.pillars-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}
.pillars-media { aspect-ratio: 4 / 4.6; }
.pillars-media video { width: 100%; height: 100%; object-fit: cover; }
.pillars-media .media-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 243, 251, 0.9);
  background: rgba(4, 7, 15, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pillar-list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.pillar {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  padding: clamp(18px, 2vw, 26px);
  align-items: start;
}
.pillar .p-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: rgba(77, 125, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar .p-icon img { width: 26px; height: 26px; }
.pillar h3 { font-size: 18px; margin-bottom: 6px; }
.pillar p { color: var(--muted); font-size: 14.5px; }

/* ---------------- cards grids (fluid, gap-based, zero lines) ---------------- */
.card-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
}
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.adv-cell { padding: clamp(26px, 3vw, 44px); }
.adv-cell .adv-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(110, 231, 255, 0.08);
  margin-bottom: 40px;
}
.adv-cell h3 { font-size: clamp(19px, 1.8vw, 25px); margin-bottom: 13px; }
.adv-cell p { color: var(--muted); font-size: 14.5px; }

.feat-cell {
  padding: clamp(22px, 2.2vw, 34px);
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.feat-cell .f-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(77, 125, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}
.feat-cell .f-icon img { width: 26px; height: 26px; }
.feat-cell h3 { font-size: 16px; margin: 20px 0 7px; line-height: 1.3; }
.feat-cell p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
/* numbered, with a hover accent line and icon glow (was a plain 8-cell grid) */
.card-grid.cols-4 { counter-reset: feat; }
.feat-cell { position: relative; counter-increment: feat; }
/* These cards are also .glass, so .glass::before targets the SAME pseudo
   element at equal specificity. Without explicitly resetting left/bottom/width
   and background, `inset: 0` and the sheen gradient leak in: the box stretches
   across the whole card and the number renders against its LEFT edge instead of
   the top right, dragging a gradient over the heading at z-index 1. */
.feat-cell::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute; top: 20px; right: 22px; left: auto; bottom: auto;
  width: auto; height: auto; background: none; border-radius: 0; z-index: 1;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--faint); transition: color 0.4s ease;
}
.feat-cell::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--grad); border-radius: 0 2px 2px 0;
  transition: width 0.55s var(--ease-out);
}
.feat-cell:hover::before { color: var(--accent-2); }
.feat-cell:hover::after { width: 100%; }
.feat-cell .f-icon { transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out); }
.feat-cell:hover .f-icon {
  background: rgba(77, 125, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 26px rgba(77, 125, 255, 0.3);
  transform: translateY(-2px);
}

/* ---------------- film ---------------- */
.film-frame { cursor: pointer; border-radius: var(--r-lg); }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 15, 0.25);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.film-cover.hidden { opacity: 0; visibility: hidden; }
.play-btn {
  /* a real <button> now (it must be keyboard reachable), so zero the UA padding */
  padding: 0;
  width: clamp(76px, 8vw, 108px);
  height: clamp(76px, 8vw, 108px);
  border-radius: 50%;
  background: rgba(10, 16, 30, 0.5);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge), 0 0 50px rgba(110, 231, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-spring), background 0.3s ease, box-shadow 0.3s ease;
}
.film-frame:hover .play-btn {
  transform: scale(1.1);
  background: var(--grad);
  box-shadow: 0 0 70px rgba(110, 231, 255, 0.5);
}
.play-btn svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.film-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 16px 10px 0;
  flex-wrap: wrap;
}

/* ---------------- media gallery (visual archive) ---------------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.archive-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .archive-grid { grid-template-columns: 1fr; } }
.arch-card {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--glass-edge), 0 18px 44px rgba(2, 6, 18, 0.5);
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.arch-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.arch-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  animation: archDrift 20s ease-in-out infinite alternate;
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
@keyframes archDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-2.5%, -2%, 0); }
}
.arch-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(4, 7, 15, 0.94) 0%, rgba(4, 7, 15, 0.55) 30%,
    rgba(4, 7, 15, 0.05) 58%, rgba(4, 7, 15, 0.32) 100%);
}
.arch-index {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  color: var(--accent-2); opacity: 0.9;
}
.arch-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(18px, 2vw, 28px);
}
.arch-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: -0.01em; color: var(--text); line-height: 1.15;
}
.arch-desc { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
@media (hover: hover) {
  .arch-desc {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .arch-card:hover .arch-desc, .arch-card:focus-within .arch-desc { opacity: 1; transform: none; }
}
.arch-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 255, 0);
  transition: box-shadow 0.5s var(--ease-out);
}
.arch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-edge), 0 28px 64px rgba(2, 6, 18, 0.62);
}
.arch-card:hover .arch-media img { transform: scale(1.15); animation-play-state: paused; }
.arch-card:hover::after { box-shadow: inset 0 0 0 1px rgba(110, 231, 255, 0.32), inset 0 0 44px rgba(77, 125, 255, 0.13); }
@media (prefers-reduced-motion: reduce) {
  .arch-media img { animation: none; transform: scale(1.03); }
  .arch-desc { opacity: 1 !important; transform: none !important; }
}

/* video gallery (technology page) */
.vid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.vid-card { position: relative; aspect-ratio: 16 / 10; }
.vid-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.vid-card:hover video { transform: scale(1.05); }
.vid-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(238, 243, 251, 0.92);
  background: rgba(4, 7, 15, 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 9px 15px; border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.vid-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .vid-wide { aspect-ratio: 16 / 10; } }

/* ---------------- specs ---------------- */
.specs-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.specs-sticky { position: sticky; top: 110px; }
@media (max-width: 980px) { .specs-sticky { position: static; } }
.tab-btns {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(148, 178, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}
.tab-btn {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: color 0.3s ease;
}
.tab-btn.active { color: #fff; }
.tab-glider {
  position: absolute;
  z-index: 1;
  top: 5px; bottom: 5px;
  border-radius: var(--r-pill);
  background: var(--grad);
  box-shadow: 0 6px 20px rgba(77, 125, 255, 0.45);
  transition: left 0.4s var(--ease-out), width 0.4s var(--ease-out);
}
.spec-table { display: flex; flex-direction: column; gap: 10px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px 22px;
  border-radius: 18px;
  background: rgba(148, 178, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, transform 0.3s ease;
  flex-wrap: wrap;
}
.spec-row:hover { background: rgba(148, 178, 255, 0.1); transform: translateX(4px); }
.spec-row dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-row dd { font-size: 15.5px; font-weight: 700; text-align: right; }
.spec-row dd small { display: block; font-weight: 400; color: var(--faint); font-size: 11.5px; }
.spec-pane { display: none; }
.spec-pane.active { display: block; animation: fadeUp 0.5s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------- big stats band ---------------- */
.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.band-cell {
  padding: clamp(36px, 4vw, 64px) clamp(26px, 3vw, 48px);
  text-align: left;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(29, 65, 158, 0.25), transparent 70%),
    var(--glass);
}
.band-cell .big {
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.band-cell .big .unit { font-size: 0.38em; }
.band-cell p {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

/* ---------------- daylight band (footer.png + cloud) ---------------- */
.world {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(420px, 55vw, 640px);
  display: flex;
  align-items: flex-start;
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.world .world-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.world .world-cloud {
  position: absolute;
  width: 46%;
  left: 4%;
  top: 6%;
  opacity: 0.9;
  animation: cloudDrift 34s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(9vw); } }
@media (prefers-reduced-motion: reduce) { .world .world-cloud { animation: none; } }
.world .world-copy {
  position: relative;
  z-index: 2;
  margin: clamp(22px, 3vw, 44px);
  max-width: min(520px, calc(100% - 2 * clamp(22px, 3vw, 44px)));
  padding: clamp(22px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 56px rgba(20, 40, 80, 0.24);
  color: #0d1b33;
}
.world .world-copy h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; margin-bottom: 12px; }
.world .world-copy p { color: #2a3a58; font-size: 15px; line-height: 1.66; }
/* small "daylight" kicker so the inverted card reads as deliberate, matching the site kickers */
.world .world-copy .wlogo { display: block; }
.world .world-copy img.wlogo { height: 15px; margin-bottom: 18px; }
.world .arrow-motif {
  position: absolute;
  right: -3%;
  bottom: -6%;
  width: clamp(220px, 30vw, 420px);
  opacity: 0.16;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ---------------- team ---------------- */
.teaser-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.teaser-media { padding: clamp(20px, 2.6vw, 40px); overflow: hidden; }
.teaser-media img { width: 100%; display: block; border-radius: calc(var(--r-lg) - 12px); transition: transform 0.7s var(--ease-out); }
.teaser-media:hover img { transform: scale(1.03); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.member { display: flex; flex-direction: column; }
.member-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--r-lg) - 8px);
  margin: 10px 10px 0;
}
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.member:hover .member-photo img { transform: scale(1.05); }
.member-info { padding: 22px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.member-info .name { font-size: 18px; font-weight: 700; }
.member-info .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 8px 0 13px;
  line-height: 1.7;
}
.member-info .bio { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
/* team-card polish: photo depth scrim, accent role, hover top-line */
.member { position: relative; }
.member-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 7, 15, 0.55), transparent 42%);
}
.member-info .role { color: var(--accent-2); }
.member::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 3; height: 2px; width: 0;
  background: var(--grad); border-radius: 0 2px 2px 0;
  transition: width 0.55s var(--ease-out);
}
.member:hover::before { width: 100%; }
/* stat-band + value/assurance/story cards: shared hover top-line accent */
.band-cell, .value-card, .assurance-cell { position: relative; }
.band-cell::before, .value-card::before, .assurance-cell::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--grad); border-radius: 0 2px 2px 0;
  transition: width 0.55s var(--ease-out);
}
.band-cell:hover::before, .value-card:hover::before, .assurance-cell:hover::before { width: 100%; }

/* team page hero decorations */
.team-deco {
  position: absolute;
  right: var(--pad);
  bottom: -8%;
  width: clamp(160px, 22vw, 330px);
  opacity: 0.14;
  pointer-events: none;
}
.team-mark {
  position: absolute;
  left: var(--pad);
  top: 24%;
  width: clamp(30px, 3vw, 44px);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------------- narrative (technology) ---------------- */
.story-flow { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.story-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 1.4fr;
  gap: clamp(20px, 3vw, 60px);
  padding: clamp(26px, 3.2vw, 48px);
}
@media (max-width: 800px) { .story-row { grid-template-columns: 1fr; gap: 14px; } }
.story-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-2);
  letter-spacing: 0.18em;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(110, 231, 255, 0.08);
  margin-bottom: 14px;
}
.story-row h3 { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.2; }
.story-row .body { color: var(--muted); font-size: 15.5px; }
.story-row .body ul { margin: 14px 0 14px 18px; }
.story-row .body li { margin-bottom: 9px; }

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.assurance-cell { padding: clamp(28px, 3.4vw, 52px); }
.assurance-cell p { color: var(--muted); margin-top: 10px; }

.construction-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.construction-media { aspect-ratio: 16 / 10; }
.construction-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* services */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.svc-cell { padding: clamp(20px, 2.2vw, 32px); }
.svc-cell .svc-i {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--accent-2);
  letter-spacing: 0.18em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(110, 231, 255, 0.07);
  margin-bottom: 16px;
}
.svc-cell h3 { font-size: 15.5px; margin-bottom: 7px; line-height: 1.35; }
.svc-cell p { color: var(--muted); font-size: 13px; line-height: 1.55; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.value-card { padding: clamp(26px, 2.8vw, 40px); }
.value-card h3 { font-size: 19px; margin-bottom: 11px; }
.value-card p { color: var(--muted); font-size: 14px; }

/* ---------------- page hero (interior) ---------------- */
.page-hero {
  position: relative;
  padding: clamp(150px, 20vh, 210px) 0 clamp(60px, 8vh, 100px);
  overflow: clip;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* text-only hero (privacy / legal): no bg-video, tighter bottom */
.page-hero--slim { padding: clamp(130px, 17vh, 190px) 0 clamp(10px, 2vh, 24px); }

/* long-form legal document */
.legal {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 60px) clamp(24px, 4vw, 66px);
  line-height: 1.78;
}
.legal p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
.legal a { color: var(--accent-2); word-break: break-word; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal .legal-section {
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: -0.01em;
  margin: 46px 0 18px;
  padding-top: 32px;
  border-top: 1px solid rgba(148, 178, 255, 0.14);
}
.legal .legal-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal .legal-sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--text); margin: 30px 0 12px; }
.legal ul { margin: 0 0 18px 20px; color: var(--muted); font-size: 15.5px; }
.legal li { margin-bottom: 8px; }
.page-hero .bg-video, .page-hero .bg-video video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.72) 0%, rgba(4, 7, 15, 0.9) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(148, 178, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--faint); }

/* ---------------- contact / cta ---------------- */
.cta-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(30px, 4.5vw, 90px);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8ff0c8;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(72, 214, 155, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}
.status-pill .live {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #48d69b;
  flex: none;
}
.status-pill .live::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(72, 214, 155, 0.6);
  animation: ring 2s ease-out infinite;
}
@keyframes ring {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .status-pill .live::after { animation: none; opacity: 0; } }

.contact-lines { display: flex; flex-direction: column; gap: 10px; margin: 34px 0; }
.contact-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 24px;
  border-radius: 18px;
  background: rgba(148, 178, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background 0.3s ease, transform 0.3s ease;
  flex-wrap: wrap;
}
.contact-line:hover { background: rgba(148, 178, 255, 0.1); transform: translateX(4px); }
.contact-line .cl-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-line .cl-value { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; }
.contact-line a.cl-value:hover { color: var(--accent-2); }
.addr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(148, 178, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.addr-card img { width: 34px; border-radius: 5px; box-shadow: 0 2px 10px rgba(2, 6, 18, 0.5); }
.addr-card p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.form-card { padding: clamp(24px, 3vw, 42px); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  padding-left: 6px;
}
.field input, .field textarea {
  background: rgba(4, 7, 15, 0.35);
  border: none;
  border-radius: 16px;
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  padding: 15px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.3s ease, background 0.3s ease;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  background: rgba(4, 7, 15, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(110, 231, 255, 0.45), 0 0 24px rgba(110, 231, 255, 0.12);
}
.form-note { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 14px; line-height: 1.8; }
.form-status { font-family: var(--mono); font-size: 12px; color: var(--accent-2); margin-top: 12px; min-height: 18px; }

/* --------- contact console (landing #contact, distinct from the glass teaser) --------- */
.contact-console {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(148, 178, 255, 0.16);
  background:
    radial-gradient(130% 150% at 50% -30%, rgba(77, 125, 255, 0.12), transparent 58%),
    var(--bg-2);
  padding: clamp(26px, 4vw, 62px);
  overflow: hidden;
}
/* faint drafting grid so it reads as a technical order console, not a glass card */
.contact-console::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(rgba(148, 178, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 178, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 0%, #000 28%, transparent 76%);
  mask-image: radial-gradient(130% 120% at 50% 0%, #000 28%, transparent 76%);
}
.cc-tick { position: absolute; width: 13px; height: 13px; z-index: 2; border: 1.5px solid rgba(110, 231, 255, 0.5); }
.cc-tick.tl { top: 13px; left: 13px; border-right: 0; border-bottom: 0; }
.cc-tick.tr { top: 13px; right: 13px; border-left: 0; border-bottom: 0; }
.cc-tick.bl { bottom: 13px; left: 13px; border-right: 0; border-top: 0; }
.cc-tick.br { bottom: 13px; right: 13px; border-left: 0; border-top: 0; }
.cc-head { position: relative; z-index: 1; max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 46px); }
.cc-head .lead { margin-top: 18px; }
.cc-head .status-pill { margin-bottom: 22px; }
.cc-body {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(22px, 3.4vw, 58px);
  align-items: start;
  border-top: 1px solid rgba(148, 178, 255, 0.12);
  padding-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 860px) { .cc-body { grid-template-columns: 1fr; } }
.cc-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.cc-line {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 0; border-bottom: 1px solid rgba(148, 178, 255, 0.09);
}
.cc-line-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cc-line-value { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--text); transition: color 0.3s ease; }
.cc-line:hover .cc-line-value { color: var(--accent-2); }
.cc-line .arr { opacity: 0; display: inline-block; transition: opacity 0.3s ease, transform 0.3s ease; }
.cc-line:hover .arr { opacity: 1; transform: translateX(3px); }
.cc-addr { display: flex; gap: 14px; align-items: flex-start; }
.cc-addr img { width: 30px; border-radius: 5px; box-shadow: 0 2px 10px rgba(2, 6, 18, 0.5); }
.cc-addr p { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.75; letter-spacing: 0.03em; }
.cc-submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cc-submit .form-status { margin-top: 0; }

/* ---------------- footer ---------------- */
.site-footer { padding: 0 var(--pad) clamp(20px, 3vh, 36px); }
.footer-capsule {
  max-width: calc(var(--maxw) - 2 * var(--pad));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px clamp(20px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: rgba(10, 16, 30, 0.5);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-edge);
}
.site-footer .fnote, .site-footer a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.site-footer a:hover { color: var(--text); }
.site-footer .brand img { height: 13px; opacity: 0.8; }

/* wordmark outro + emblem watermark */
.wordmark-outro {
  overflow: clip;
  padding: clamp(30px, 5vw, 70px) var(--pad) clamp(20px, 3vw, 44px);
  display: flex;
  justify-content: center;
}
.wordmark-outro img {
  width: min(1100px, 92vw);
  opacity: 0.22;
  filter: drop-shadow(0 0 30px rgba(77, 125, 255, 0.35));
}
.play-btn img { width: 58%; height: 58%; }
/* The hero chips are positioned as a percentage of hero height while the hero
   copy is anchored to its bottom, so on a SHORT landscape viewport (about
   1024x600) the two converge and the lead paragraph lands on a chip. The copy
   wins the paint order, so it reads as text over a glass panel. Below 700px of
   height the chips are decoration we can afford to drop. */
@media (max-height: 700px) and (min-width: 901px) {
  .hero-chips { display: none; }
}
.emblem-bg {
  position: absolute;
  right: -8%;
  top: 2%;
  width: clamp(500px, 55vw, 900px);
  opacity: 0.35;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  /* behind the copy, not over it (see .dotfield) */
  z-index: -1;
  -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 72%);
}

/* ---------------- responsive nav ---------------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .burger { display: block; }
  .nav-capsule { width: 100%; justify-content: space-between; }
}

/* ---------- system film: editorial passages + scroll-scrubbed stages ---------- */
.film-xp { position: relative; }

/* the pinned film stages */
.film-seg { position: relative; }
.film-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 58% 32%, #071026 0%, #04070f 62%);
}
.film-pin svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(120, 165, 255, 0.3));
}
.film-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 46%, transparent 55%, rgba(4, 7, 15, 0.5) 100%);
}

/* the editorial passages between stages */
.film-ed {
  position: relative;
  padding: clamp(110px, 16vh, 220px) 0;
}
.film-ed h2 {
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 18px 0 0;
}
.film-ed .lead {
  margin-top: 22px;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 20px);
}
.film-ed-center { text-align: center; }
.film-ed-center .lead { margin-left: auto; margin-right: auto; }
.film-ed-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
}
.film-ed-split.flip .film-plate { order: -1; }
.film-hint {
  margin-top: 34px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(174, 203, 255, 0.65);
}
.film-formula {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(44px, 7.5vw, 120px);
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, #6ee7ff 0%, #4d7dff 55%, #aecbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}

/* image plates */
.film-plate {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--glass-edge, inset 0 1px 0 rgba(255, 255, 255, 0.14)), 0 30px 80px rgba(2, 6, 18, 0.55);
}
.film-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-plate figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: rgba(220, 233, 255, 0.82);
  background: linear-gradient(180deg, transparent 0%, rgba(4, 7, 15, 0.82) 78%);
}
.plate-tall { aspect-ratio: 4 / 5.6; max-width: 520px; }
.film-ed-split .film-plate:not(.plate-tall) { aspect-ratio: 3 / 2; }
.plate-wide {
  aspect-ratio: 21 / 10;
  max-width: 980px;
  margin: clamp(40px, 6vh, 70px) auto 0;
}
.film-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(44px, 7vh, 80px);
}
.film-duo .film-plate { aspect-ratio: 16 / 9; }

/* stat rows */
.film-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(36px, 6vh, 60px);
  justify-content: flex-start;
}
.film-ed-center .film-stats { justify-content: center; }
.film-stats b {
  display: block;
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 58px);
  letter-spacing: -0.02em;
  color: #eef3fb;
}
.film-stats b i {
  font-style: normal;
  font-size: 0.45em;
  color: rgba(174, 203, 255, 0.8);
  margin-left: 4px;
}
.film-stats span {
  display: block;
  margin-top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(174, 203, 255, 0.62);
}
.film-legend {
  margin-top: 26px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(174, 203, 255, 0.85);
}
.film-legend b {
  font-weight: 500;
  border: 1px solid rgba(174, 203, 255, 0.4);
  border-radius: 999px;
  padding: 2px 9px;
  margin-right: 8px;
}
/* claims lifted verbatim from the original gravient.com feature list */
.film-claims {
  list-style: none;
  margin: clamp(26px, 4vh, 40px) 0 0;
  padding: 0;
  max-width: 560px;
}
.film-claims li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(222, 234, 255, 0.88);
}
.film-claims li + li {
  border-top: 1px solid rgba(160, 195, 255, 0.12);
}
.film-claims li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(110, 231, 255, 0.75);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(110, 231, 255, 0.5), rgba(77, 125, 255, 0.25));
}
/* the electrical / mechanical selector, compact enough to ride a pause card */
.film-spec-tabs {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 620px;
}
.film-spec-tabs .spec-table {
  margin-top: 18px;
}
.film-spec-tabs .spec-row {
  padding: 10px 0;
}
.film-spec-tabs .spec-row dt {
  font-size: 13px;
}
.film-spec-tabs .spec-row dd {
  font-size: 15px;
}

/* chapter rail: fixed while the experience is on screen */
.film-rail {
  position: fixed;
  right: clamp(14px, 2.4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  /* visibility, not just opacity: an opacity-0 element keeps its buttons in the
     tab order, so a keyboard user hit six invisible chapter dots while nowhere
     near the film. visibility:hidden removes them from focus and the a11y tree,
     and still animates because it is transitioned alongside opacity. */
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.film-rail.show { opacity: 1; pointer-events: auto; visibility: visible; }
.film-rail button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(174, 203, 255, 0.45);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.film-rail button.on {
  background: #6ee7ff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(110, 231, 255, 0.8);
}

/* fallback video section (reduced motion) */
.film-fallback { display: none; }
.film-fallback-media { overflow: hidden; border-radius: 26px; }
.film-fallback-media video { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .film-seg, .film-rail { display: none; }
  .film-fallback { display: block; }
}
@media (max-width: 760px) {
  .film-rail { right: 8px; gap: 11px; }
  .film-rail button { width: 8px; height: 8px; }
  .plate-tall { max-width: 100%; aspect-ratio: 4 / 4.4; }
}

/* ---------- v7: catch-frame structure (Route A, approved) ---------- */
.pxp { position: relative; }
.pxp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 58% 32%, #071026 0%, #04070f 62%);
  z-index: 0;
}
.pxp-stage svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(120, 165, 255, 0.3)); }
.pxp-frames { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
/* video-scrub layer sits above the image layer, below the SVG's fade scrim.
   Hidden until the WebCodecs player is confirmed viable (film-video-attach.js). */
.pxp-video { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.pxp-flow { position: relative; z-index: 2; margin-top: -100vh; }
.pxp-move { pointer-events: none; }
.pxp-block { position: relative; padding: 26vh 0; }
.pxp-block::before {
  content: "";
  position: absolute;
  inset: -10vh 0;
  z-index: -1;
  /* Copy sits on true black. The plateau is wide and the shoulders are deep so
     the text never fights the film behind it. The final hold block opts out
     below, because it carries no copy to protect. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(4, 7, 15, 0.80) 10%,
    rgba(4, 7, 15, 1) 26%,
    rgba(4, 7, 15, 1) 74%,
    rgba(4, 7, 15, 0.80) 90%,
    transparent 100%);
}
/* The final hold carries no copy, so it must not carry the legibility scrim
   either. Without this the wordmark lock off is watched through 88% black. */
.pxp-block.pxp-hold::before { display: none; }

/* FULL-BLEED REVEAL SECTION (Abdul, 2026-07-23). After the first burn, every
   scene change is covered by a solid editorial section rather than a transition
   effect. The section is opaque and taller than the viewport, so as it scrolls
   over the sticky stage it fully hides it; the hard camera cut flips underneath
   (data-cutto in proto.js) and the next scene is revealed as the section scrolls
   up and off. min-height guarantees the flip at the section centre is always
   fully covered, whatever the viewport height. The solid background REPLACES the
   legibility band, so ::before is off. */
.pxp-cover {
  min-height: 164vh;
  display: flex;
  align-items: center;
  background: #04070f;
}
.pxp-cover::before { display: none; }

/* Cover-card two-column layout (Abdul 2026-07-23): the reveal sections are
   solid, so the copy sat in a left block with the right half empty. Split each
   into narrative copy on one side and a data panel (the beat's figures +
   claims) on the other, alternating sides down the film for an editorial zig. */
.pxp-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 4.5vw, 72px);
  align-items: center;
  max-width: 1180px;
}
.pxp-split .pxp-lede { min-width: 0; }
.pxp-split--flip .pxp-lede { order: 2; }
.pxp-split--flip .pxp-panel { order: 1; }
/* These blocks are `class="container pxp-copy pxp-split"`, and `.pxp-copy`
   (max-width 860px) is declared LATER in this file at equal specificity, so it
   silently beat both widths above: the split sections rendered at 860px instead
   of 1180px, and never took the 640px mobile measure. The compound selector
   raises specificity so the intended widths win regardless of source order. */
.pxp-split.pxp-copy { max-width: 1180px; }
@media (max-width: 900px) {
  .pxp-split { grid-template-columns: 1fr; gap: 28px; }
  .pxp-split.pxp-copy { max-width: 640px; }
  .pxp-split--flip .pxp-lede { order: 1; }
  .pxp-split--flip .pxp-panel { order: 2; }
}
.pxp-panel {
  border: 1px solid rgba(148, 178, 255, 0.16);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(148, 178, 255, 0.06), rgba(148, 178, 255, 0.02));
  box-shadow: var(--glass-edge);
  padding: clamp(24px, 2.6vw, 40px);
}
.pxp-panel .pxp-panel-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}
.pxp-panel .film-stats {
  margin-top: 0;
  gap: clamp(18px, 2.2vw, 28px) clamp(22px, 2.8vw, 40px);
}
.pxp-panel .film-stats b { font-size: clamp(30px, 3vw, 46px); }
.pxp-panel .film-claims { margin-top: 0; max-width: none; }
.pxp-panel-div { height: 1px; background: rgba(148, 178, 255, 0.14); margin: clamp(22px, 3vh, 30px) 0; }

/* ---------- film information layer (js/film-hud.js) ----------
   Reads as instrumentation on a drawing, not as a product dashboard. It sits
   above the film and below the copy, and it never blocks a pointer. */
.film-hud {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.film-hud.ready { opacity: 1; }
.film-hud.hud-out { opacity: 0; }

.hud-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hud-line {
  stroke: rgba(140, 200, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hud-line.on { opacity: 1; }
.hud-anchor {
  fill: none;
  stroke: var(--cyan, #6ee7ff);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hud-anchor.on { opacity: 1; }

.hud-call {
  position: absolute;
  top: 0; left: 0;
  max-width: 230px;
  padding-left: 10px;
  border-left: 1px solid rgba(110, 231, 255, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.hud-call.on { opacity: 1; }
.hud-call.flip {
  padding-left: 0;
  padding-right: 10px;
  border-left: 0;
  border-right: 1px solid rgba(110, 231, 255, 0.55);
  text-align: right;
}
.hud-call b {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: #d8e8ff;
  text-shadow: 0 0 12px rgba(4, 7, 15, 0.95), 0 1px 2px rgba(4, 7, 15, 0.9);
}
.hud-call span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(174, 203, 255, 0.72);
  text-shadow: 0 0 10px rgba(4, 7, 15, 0.95);
}

@media (max-width: 900px) {
  .film-hud { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-call, .hud-line, .hud-anchor { transition: none; }
}
.pxp-copy { max-width: 860px; }
.pxp-copy h2 {
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 18px 0 0;
  text-shadow: 0 2px 30px rgba(2, 6, 18, 0.9);
}
.pxp-copy .lead {
  margin-top: 22px;
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 20px);
  text-shadow: 0 1px 18px rgba(2, 6, 18, 0.9);
}
.pxp-img { max-width: 640px; margin-top: clamp(30px, 5vh, 54px); }
.pxp-img img { aspect-ratio: 3 / 2; }
.pxp-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
  margin-top: clamp(30px, 5vh, 54px);
  max-width: 900px;
}
.pxp-duo .film-plate { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) {
  .pxp-stage { display: none; }
  .pxp-flow { margin-top: 0; }
}

/* Keyboard users land here first and can jump the header (and, on the home
   page, the entire scroll-scrubbed film) instead of tabbing through it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  padding: 12px 20px;
  background: var(--accent-2, #6ee7ff);
  color: #04070f;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }