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

:root {
  --cream: #F2F2F2;
  --stone: #EAEAEA;
  --silver: #CBCBCB;
  --sky: #E0E0E0;
  --slate: #6B6B6B;

  /* ============ SKYTRON BRAND PALETTE ============ */
  --skytron-blue-deep: #14243D;       /* primary deep blue */
  --skytron-blue-mid: #2A3B5C;        /* mid-tone for gradients */
  --skytron-blue-horizon: #4A5A7A;    /* horizon area in sky gradients */
  --skytron-warm: #D4915F;            /* warm horizon tone, desaturated */
  --skytron-orange: #E8824A;          /* accent only — primary CTAs, use sparingly */
  --skytron-off-white: #F4F0E8;       /* warm off-white, primary text on dark */
  --skytron-near-black: #0F1419;      /* near-black, not pure black */

  /* typography system */
  --font-primary: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  /* backwards-compat alias — existing rules referencing --font-display still work */
  --font-display: var(--font-primary);
}

html {
  scroll-behavior: smooth;
}

body {
  /* Treatment C — near-black global fallback */
  background: var(--skytron-near-black);
  color: var(--skytron-off-white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============ TYPE SCALE ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 500;
  color: inherit;
}

h1 {
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h5 { font-size: 18px; line-height: 1.3; }
h6 { font-size: 16px; line-height: 1.4; }

.text-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
}
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}
.text-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}
.text-nav {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.mono, .technical, .text-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.wordmark {
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  h1 { font-size: 56px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
  .text-body-lg { font-size: 18px; }
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  background: transparent;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.nav.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-logo:hover {
  opacity: 0.75;
}

/* Skytron wordmark — Archivo Medium, uppercase, wide tracking */
.nav-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1;
  color: var(--skytron-off-white);
  display: inline-block;
}

.nav-logo img {
  display: block;
  height: 28px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--cream);
}

/* HAMBURGER */
.nav-menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-menu-btn span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--cream);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-menu-btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; }
.nav-menu-btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* MENU OVERLAY */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Treatment C — near-black menu overlay */
  background: var(--skytron-near-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}

.menu-inner a {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.menu-inner a:hover {
  opacity: 0.6;
}

@media (max-width: 640px) {
  .nav { padding: 12px 20px; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.06em; }
}

/* HERO */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.new-section {
  /* Solid near-black so the brief moment before the hero video plays
     is invisible (no gradient flash). */
  background: var(--skytron-near-black);
  color: var(--skytron-off-white);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.6s ease;
}
.hero-video-a { opacity: 1; }
.hero-video-b { opacity: 0; }

@media (max-width: 760px) {
  .hero-video {
    object-position: 60% center;
  }
}

.hero-video-overlay {
  display: none;
}


/* PERSISTENT HEADLINE OVERLAY */
.hero-sentence-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 24px 0;
  pointer-events: none;
}

.hero-sentence-overlay .hero-sentence {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #fff;
  margin: 0;
  transition: color 0.3s ease;
  animation: headlineIntro 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.4em;
}

.hero-sentence-overlay.on-light .hero-sentence {
  text-shadow: none;
}

.hero-sentence-overlay.on-light .hero-sentence {
  color: var(--skytron-near-black);
}

@keyframes headlineIntro {
  from {
    gap: 2.8em;
  }
  to {
    gap: 1.4em;
  }
}

@keyframes headlineWordFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-sentence-overlay .hero-sentence > * {
  opacity: 0;
  animation: headlineWordFade 2s ease forwards;
}

.hero-sentence-overlay .hero-sentence > *:nth-child(1) { animation-delay: 0.1s; }
.hero-sentence-overlay .hero-sentence > *:nth-child(2) { animation-delay: 0.4s; }
.hero-sentence-overlay .hero-sentence > *:nth-child(3) { animation-delay: 0.7s; }
.hero-sentence-overlay .hero-sentence > *:nth-child(4) { animation-delay: 1s; }

.hero-sentence-slot {
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
  line-height: 1.1;
}

.hero-vowel-article {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1.1;
}

.placeholder-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.skytron-section {
  position: relative;
  height: 250vh;
  padding: 0;
  display: block;
  background: #000;
  color: var(--skytron-off-white);
}

/* Fixed pin — canvas anchored to viewport top so the fade-in is fully
   visible (no half-clipped sliding entry). Opacity + translate driven
   by JS so the entry/exit feel like the section's flow. */
.skytron-section .skytron-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.skytron-spin-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}


.skytron-spec-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0 clamp(32px, 5vw, 72px) clamp(24px, 3vw, 40px);
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.skytron-spec-strip .skytron-spec {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  /* Cascade-in: invisible by default, slides up + fades in left → right
     when the parent strip has the .cascade-in class. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.skytron-spec-strip.cascade-in .skytron-spec {
  opacity: 1;
  transform: translateY(0);
}

.skytron-spec-strip.cascade-in .skytron-spec:nth-child(1) { transition-delay: 0s; }
.skytron-spec-strip.cascade-in .skytron-spec:nth-child(2) { transition-delay: 0.12s; }
.skytron-spec-strip.cascade-in .skytron-spec:nth-child(3) { transition-delay: 0.24s; }
.skytron-spec-strip.cascade-in .skytron-spec:nth-child(4) { transition-delay: 0.36s; }

.skytron-spec-strip .skytron-spec + .skytron-spec {
  border-left: 1px solid currentColor;
  padding-left: 24px;
}

.skytron-spec-strip .skytron-spec-label {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.skytron-spec-strip .skytron-spec-value {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .skytron-spec-strip {
    flex-wrap: wrap;
    gap: 24px 16px;
    bottom: 64px;
  }
  .skytron-spec-strip .skytron-spec {
    flex: 1 1 45%;
    align-items: center;
    text-align: center;
  }
  .skytron-spec-strip .skytron-spec + .skytron-spec {
    border-left: none;
    padding-left: 0;
  }
}

.hero-vowel-article-n {
  /* Article box stays exactly "A" wide. The "n" is overlaid via absolute
     positioning (immediately right of "A") when visible — it kerns to the
     "A" like one phrase ("An"), and doesn't affect layout. */
  position: absolute;
  left: 100%;
  top: 0;
  opacity: 0;
  will-change: opacity;
}

.hero-sentence-slot-sizer {
  visibility: hidden;
  white-space: nowrap;
}

.hero-sentence-slot-track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
}

.hero-word {
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  line-height: 1.1;
  will-change: transform;
}

/* SECTIONS */
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 24px 80px;
}

.section-inner {
  max-width: 900px;
  text-align: center;
}

.autonomous-section {
  background: #040912;
  color: var(--skytron-off-white);
  min-height: 300vh;
  padding: 0;
  display: block;
  position: relative;
}

.word-phase {
  position: absolute;
  left: 0;
  right: 0;
  height: 100vh;
  pointer-events: none;
}

.word-phase[data-word="Autonomous"] { top: 0; }
.word-phase[data-word="Invigorating"] { top: 110vh; height: 190vh; }

.autonomous-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.35) 100%);
  z-index: 0;
  pointer-events: none;
}

.handfly-section {
  /* Explicit longhand + width/height instead of `inset: 0`. Safari computes
     the size of an absolute child inside a flex container (the autonomous
     sticky uses align-items: flex-end) differently than Chrome — `inset: 0`
     was sizing this section to the flex item's bounds instead of the full
     sticky. The longhand below is explicit and consistent across browsers. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200px 40px 80px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  color: #fff;
  overflow: hidden;
  background: var(--skytron-near-black);
}

.handfly-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 760px) {
  .handfly-background-video {
    object-position: 69% center;
  }
}

.handfly-stage {
  position: relative;
  z-index: 1;
}

.handfly-stage {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: center;
}

.handfly-intro {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.autonomous-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 300px 40px clamp(56px, 7vh, 100px);
  background: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/skytarmac.jpeg") center / cover no-repeat;
}

@media (max-width: 760px) {
  .autonomous-sticky {
    align-items: center;
    padding: 80px 20px 60px;
  }
}

.autonomous-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 56px);
  width: 100%;
  max-width: 1440px;
}

.autonomous-intro {
  position: relative;
  width: 100%;
  max-width: 560px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.autonomous-title,
.handfly-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.autonomous-body,
.handfly-body {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  opacity: 0.75;
  max-width: 460px;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-stat-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mini-stat-unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.85;
}

.mini-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.6;
  font-weight: 500;
}

.autonomous-progressbar {
  flex: 0 0 auto;
  width: 100%;
  max-width: clamp(600px, 86vw, 1400px);
  height: auto;
  align-self: center;
  display: block;
  pointer-events: none;
  overflow: visible;
  --pb-d1: 0; --pb-l1: 0; --pb-d2: 0; --pb-l2: 0; --pb-d3: 0;
}

.autonomous-progressbar .pb-line {
  stroke: var(--skytron-off-white);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 172;
}
.autonomous-progressbar .pb-line-1 {
  stroke-dashoffset: calc(172 * (1 - var(--pb-l1)));
}
.autonomous-progressbar .pb-line-2 {
  stroke-dashoffset: calc(172 * (1 - var(--pb-l2)));
  opacity: 0.45;
}

.autonomous-progressbar .pb-dot {
  transform-box: fill-box;
  transform-origin: center;
}
.autonomous-progressbar .pb-dot-1 {
  opacity: var(--pb-d1);
}
.autonomous-progressbar .pb-dot-2 {
  opacity: var(--pb-d2);
  transform: scale(calc(0.4 + 0.6 * var(--pb-d2)));
}
.autonomous-progressbar .pb-dot-3 {
  opacity: var(--pb-d3);
}
.autonomous-progressbar .pb-plane {
  opacity: var(--pb-d1);
}

.autonomous-progressbar .pb-label {
  fill: var(--skytron-off-white);
  font-family: var(--font-body);
  font-size: 6px;
  font-weight: 500;
  text-anchor: middle;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.autonomous-progressbar .pb-label-start { text-anchor: start; }
.autonomous-progressbar .pb-label-end { text-anchor: end; }
.autonomous-progressbar .pb-label:nth-of-type(1) { opacity: calc(var(--pb-d1) * 0.9); }
.autonomous-progressbar .pb-label:nth-of-type(2) { opacity: calc(var(--pb-d2) * 0.9); }
.autonomous-progressbar .pb-label:nth-of-type(3) { opacity: calc(var(--pb-d3) * 0.9); }

@media (max-width: 760px) {
  .autonomous-progressbar {
    max-width: 100%;
    margin-top: 28px;
  }
  .autonomous-progressbar .pb-label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .autonomous-progressbar {
    --pb-d1: 1; --pb-l1: 1; --pb-d2: 1; --pb-l2: 1; --pb-d3: 1;
  }
}


.safer-section {
  background-color: var(--skytron-near-black);
  color: #fff;
  min-height: 220vh;
  padding: 0;
  display: block;
}

.safer-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  background: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/sky7.jpg") center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 60px;
  gap: 48px;
}

.safer-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px;
  opacity: 0;
  z-index: 2;
}

.section-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
  z-index: 4;
  cursor: pointer;
}

.section-cta .cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.section-cta:hover {
  color: #fff;
}

.section-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.safer-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.safer-callout {
  font-size: 1.2em;
  font-weight: 700;
  opacity: 0.95;
}

.safer-body {
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.5;
  opacity: 0.6;
  margin: 14px 0 0;
}

.safer-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  width: 100%;
  max-width: 1400px;
  margin-top: clamp(40px, 10vh, 120px);
  z-index: 2;
}

.safer-plane {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  justify-self: end;
  color: #fff;
}

.safer-plane > g {
  opacity: 0;
}

.safer-redundancy {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
}

.safer-redundancy-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}

.safer-redundancy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.safer-redundancy-list .safer-redundancy-item {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  opacity: 0;
  transform: translateY(10px);
  max-width: 560px;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  color: rgba(244, 240, 232, 0.6);
}

.safer-redundancy-list.is-cascaded .safer-redundancy-item {
  opacity: 1;
  transform: translateY(0);
}

.safer-redundancy-list.is-cascaded .safer-redundancy-item:nth-child(1) { transition-delay: 0s; }
.safer-redundancy-list.is-cascaded .safer-redundancy-item:nth-child(2) { transition-delay: 0.18s; }
.safer-redundancy-list.is-cascaded .safer-redundancy-item:nth-child(3) { transition-delay: 0.36s; }
.safer-redundancy-list.is-cascaded .safer-redundancy-item:nth-child(4) { transition-delay: 0.54s; }
.safer-redundancy-list.is-cascaded .safer-redundancy-item:nth-child(5) { transition-delay: 0.72s; }

.safer-redundancy-list .safer-redundancy-item strong {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--skytron-off-white);
}

@media (max-width: 860px) {
  .safer-redundancy {
    align-items: center;
    text-align: center;
  }
  .safer-redundancy-list .safer-redundancy-item {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .safer-sticky {
    /* Top bumped from 60px → 110px to clear the iOS notch + give breathing
       room below the Hero Sentence. Doesn't affect scroll math or the plane
       animation — purely inner-padding inside the sticky container. */
    padding: 110px 20px 32px;
    gap: 24px;
  }
  .safer-stage {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 0;
  }
  .safer-plane {
    max-width: min(360px, 88vw);
    justify-self: center;
  }
}

/* Smaller-height phones (iPhone 17 Pro ~874px tall, iPhone SE, etc.) — the
   regular mobile layout still crammed the plane outline against the Hero
   Sentence with no breathing room. iPhone 16 Pro Max (932px tall) and
   larger sit above this threshold and keep the regular layout.
   Hides the 5th redundancy bullet to make vertical room, and bumps the top
   padding so the plane sits lower. Per-section content rule, doesn't touch
   the scroll math or the plane animation. Must come AFTER the max-width:
   760px block above so its padding-top overrides the padding shorthand. */
@media (max-width: 760px) and (max-height: 900px) {
  .safer-redundancy-list .safer-redundancy-item:nth-child(5) {
    display: none;
  }
  .safer-sticky {
    padding-top: 140px;
  }
}
.tl-point {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tl-point.tl-year .tl-tick {
  opacity: 0.6;
}

.tl-point.tl-season .tl-tick {
  width: 3px;
  height: 3px;
  opacity: 0.3;
}

.tl-year-label {
  position: absolute;
  top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.tl-milestone-label {
  position: absolute;
  bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.tl-year-sub {
  opacity: 0.5;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0.06em;
}

.tl-logo {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}

.tl-logo-img {
  width: 44px;
  height: 44px;
  display: block;
}


.tl-logo-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* TEAM NAMES — MAGNETIC SCROLL */
.timeline-section {
  --timeline-bg: #efece4;
  --timeline-ink: var(--skytron-blue-deep);
  --timeline-muted: rgba(20, 36, 61, 0.6);
  --timeline-rule: rgba(20, 36, 61, 0.2);
  background: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/clouds3.jpg") center center / cover no-repeat var(--timeline-bg);
  color: var(--timeline-ink);
  position: relative;
}

.timeline-chrome {
  position: sticky;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--timeline-ink);
  mix-blend-mode: multiply;
}

.timeline-chrome-top { top: 0; position: sticky; }
.timeline-chrome-bot { bottom: 0; position: fixed; left: 0; right: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

.timeline-plane-scene {
  /* negative margin cancels the tail's layout push on .timeline-outro */
  margin-bottom: -40vh;
}

.timeline-plane-tail {
  /* actual content height extends the sticky parent's content box,
     which is what sticky's pin range actually respects (padding alone doesn't) */
  height: 40vh;
}

.timeline-glyph-wrap {
  position: sticky;
  top: 50vh;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  margin-top: 18vh;
  margin-bottom: -min(18vh, 15vw);
}

.timeline-glyph {
  width: min(18vh, 15vw);
  aspect-ratio: 1554 / 1080;
  user-select: none;
  will-change: transform;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/graphics/planeicon.png") center / contain no-repeat;
  mask: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/graphics/planeicon.png") center / contain no-repeat;
}

/* Below the hero ("We're fixing that / Scroll"), text + map shift to
   the dark-blue palette while the hero text stays white above. */
.timeline-section .timeline-names,
.timeline-section .timeline-outro {
  --timeline-ink: var(--skytron-blue-deep);
  --timeline-muted: rgba(20, 36, 61, 0.6);
  --timeline-rule: rgba(20, 36, 61, 0.2);
  color: var(--skytron-blue-deep);
}

.timeline-hero, .timeline-outro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 32px 24px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.timeline-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--timeline-muted);
  margin-bottom: 28px;
}

.timeline-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0;
}

.timeline-hero-sub {
  margin-top: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--timeline-muted);
}

.timeline-arrow {
  position: relative;
  margin-top: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--timeline-muted);
}

.timeline-arrow span {
  display: block;
  width: 1px;
  height: 40px;
  margin: 0 auto 8px;
  background: var(--timeline-muted);
  animation: timeline-drop 1.8s ease-in-out infinite;
  transform-origin: top;
}

@keyframes timeline-drop {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.timeline-names {
  position: relative;
  padding: 0;
  z-index: 10;
}

.timeline-row {
  position: relative;
  width: 100%;
  min-height: 90px;
  padding: 18px 6vw;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--timeline-rule);
}

.timeline-row:last-child {
  border-bottom: 1px solid var(--timeline-rule);
}

.timeline-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--timeline-muted);
}

.timeline-name-wrap {
  text-align: center;
  overflow: visible;
}

.timeline-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-block;
  will-change: transform, letter-spacing, opacity;
}


.timeline-role {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--timeline-muted);
  text-align: right;
  max-width: 32ch;
}

.timeline-bigyear {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 10vw, 130px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: currentColor;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.15s linear;
}

.timeline-role .timeline-role-year {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: 8px;
  color: inherit;
}


.timeline-airport-wrap {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.timeline-airport {
  width: 100%;
  height: auto;
  display: block;
}

.timeline-airport-caption {
  text-align: center;
  padding-top: 20px;
}

.timeline-caption-line {
  width: 40px;
  height: 1px;
  background: var(--timeline-ink);
  opacity: 0.3;
  margin: 0 auto 14px;
}

.timeline-airport-caption p {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--timeline-ink);
  margin: 0;
}

.timeline-caption-coords {
  margin-top: 10px !important;
  opacity: 0.55 !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  letter-spacing: 0.16em !important;
}

@media (max-width: 720px) {
  .timeline-row { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 5vw; }
  .timeline-role { grid-column: 2; text-align: left; margin-top: 6px; }
  .timeline-glyph { font-size: 24vw; }
  .timeline-airport-wrap { width: 88%; }
  /* tail/margin-bottom must stay matched — see SITE_RULES §10 / inline notes
     in the 511–720 / 721–980 / 981–1560 overrides below */
  .timeline-plane-tail { height: 17vh; }
  .timeline-plane-scene { margin-bottom: -17vh; }
}

/* Mid-narrow range (511–720) — plane was parking slightly too early with
   the pure mobile 15vh tail. Bumps the tail up just enough to delay the
   landing point, while leaving the rest of the mobile rules (grid,
   airport-wrap width, etc.) applied through 720. */
@media (min-width: 511px) and (max-width: 720px) {
  .timeline-plane-tail { height: max(17vh, 150px); }
  .timeline-plane-scene { margin-bottom: calc(-1 * max(17vh, 150px)); }
}

/* Narrow tablet range (721–980) — plane was parking too late with the
   broader tablet rule's 260px floor. Smaller intermediate value sits
   between the 15vh mobile rule and the 28vh/260px wider-tablet rule,
   smoothing the transition across the 720/980 thresholds. */
@media (min-width: 721px) and (max-width: 980px) {
  .timeline-plane-tail { height: max(20vh, 180px); }
  .timeline-plane-scene { margin-bottom: calc(-1 * max(20vh, 180px)); }
}

/* Mid-desktop range (981–1560) — plane parks too low at default 40vh tail
   so use an intermediate tail/margin pair. `max()` floors the value at
   260px so it doesn't shrink unpredictably when the browser window is
   short (live Safari subtracts toolbar from vh, which made the plane
   park early). */
@media (min-width: 981px) and (max-width: 1560px) {
  .timeline-plane-tail { height: max(28vh, 260px); }
  .timeline-plane-scene { margin-bottom: calc(-1 * max(28vh, 260px)); }
}



.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer Section — full-bleed background video (Workers.mp4) sits behind everything */
.footer-section {
  position: relative;
  overflow: hidden;
  padding: 8px clamp(24px, 5vw, 80px) 0;
  color: var(--skytron-off-white);
  background: var(--skytron-near-black);
}

.footer-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}


.footer-videos-row {
  padding: 56px 0 32px;
}

.footer-videos-label {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 28px;
}

.footer-videos-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.footer-vid {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.footer-vid iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-vid-side {
  width: 18%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.footer-vid-side:hover {
  opacity: 0.85;
}

.footer-vid-center {
  width: 28%;
}

.footer-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 0;
  margin-top: 32px;
}
.footer-actions::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 14%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.footer-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.footer-action-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.footer-action-body {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.6;
  margin: 0;
}

.footer-action-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  margin-top: auto;
}

.footer-action-link:hover {
  opacity: 1;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-legal {
  font-size: 12px;
  opacity: 0.35;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-link-sm {
  font-size: 12px;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

.footer-link-sm:hover { opacity: 0.7; }

@media (max-width: 760px) {
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  /* Footer videos: conveyor-belt cycle. Thumbnail slides in from off the
     viewport's right edge to center, holds, then slides off the left
     edge. The .footer-section's existing overflow:hidden does the
     clipping at the actual viewport edges. `backwards` fill-mode keeps
     each video off-screen during its animation-delay. */
  .footer-videos-track {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
  }
  .footer-vid,
  .footer-vid-side,
  .footer-vid-center {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.95;
    animation: footerVideoConvey 12s infinite ease-in-out backwards;
  }
  .footer-vid:nth-child(2) { animation-delay: 4s; }
  .footer-vid:nth-child(3) { animation-delay: 8s; }

  /* Footer actions: 2x2 centered grid, no dark gradient backdrop */
  .footer-actions { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-actions::before { display: none; }
}

@keyframes footerVideoConvey {
  0%   { transform: translateX(calc(60vw + 50%)); }
  10%  { transform: translateX(0); }
  30%  { transform: translateX(0); }
  40%  { transform: translateX(calc(-60vw - 50%)); }
  100% { transform: translateX(calc(-60vw - 50%)); }
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 24px;
}

.section-headline {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.section-body {
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 32px;
  opacity: 0.85;
}

@media (max-width: 520px) {
  .hero-sentence { white-space: normal; }
}

/* GRID + CARDS */
.grid {
  display: grid;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  padding: 28px;
  border: 1px solid currentColor;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}

.card-link:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.card-body {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.8;
}

.inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 24px;
}

.hero-sentence {
  font-family: var(--font-display);
  font-size: clamp(14px, 3.8vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--cream);
  margin-bottom: 24px;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--silver);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 40px;
}

.btimeline-primary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--skytron-near-black);
  background: var(--cream);
  border: 1px solid var(--cream);
  padding: 16px 44px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btimeline-primary:hover {
  background: transparent;
  color: var(--cream);
}

.btimeline-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--slate);
  padding: 16px 44px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.btimeline-secondary:hover {
  border-color: var(--cream);
}

.hero-timeline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
  letter-spacing: 0.08em;
}

/* ============ LEGAL PAGES (Privacy / Terms) ============ */
body.legal-page {
  background: var(--skytron-off-white);
  color: var(--skytron-near-black);
  font-family: var(--font-body);
}

.legal-page .nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  background: transparent;
  pointer-events: none;
}
.legal-page .nav > * { pointer-events: auto; }

.legal-page .nav-wordmark,
.legal-page .nav-logo,
.legal-page .nav-menu-btn {
  mix-blend-mode: difference;
}
.legal-page .nav-wordmark { color: #fff; }
.legal-page .nav-logo img { filter: brightness(0) invert(1); }
.legal-page .nav-menu-btn span { background: #fff; }

.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(120px, 16vh, 200px) clamp(28px, 6vw, 64px) clamp(80px, 12vh, 140px);
}

.legal-header {
  margin-bottom: clamp(48px, 7vh, 96px);
  padding-bottom: clamp(28px, 4vh, 48px);
  border-bottom: 1px solid rgba(15, 20, 25, 0.12);
}

.legal-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--skytron-near-black);
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}

.legal-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--skytron-near-black);
}

.legal-body .legal-intro {
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 400;
  margin: 0 0 36px;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 40px 0 14px;
  color: var(--skytron-near-black);
}

.legal-body p { margin: 0 0 16px; }
.legal-body p:last-child { margin-bottom: 0; }

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.legal-body li {
  margin-bottom: 8px;
}

.legal-body a {
  color: var(--skytron-near-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-body a:hover { color: var(--skytron-blue-deep); }

.legal-body strong { font-weight: 600; }

/* ============ COMPANY PAGE — REVEAL ANIMATIONS ============ */
body.company-page .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--rev-i, 0) * 0.07s);
  will-change: opacity, transform;
}

body.company-page .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.company-page .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ COMPANY PAGE ============ */
body.company-page {
  background: var(--skytron-off-white);
  color: var(--skytron-near-black);
  font-family: var(--font-body);
}

.company-page .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  background: transparent;
  pointer-events: none;
}

.company-page .nav > * { pointer-events: auto; }

.company-page .nav-wordmark,
.company-page .nav-logo,
.company-page .nav-menu-btn {
  mix-blend-mode: difference;
}

.company-page .nav-wordmark { color: #fff; }
.company-page .nav-logo img { filter: brightness(0) invert(1); }
.company-page .nav-menu-btn span { background: #fff; }

.company-page .menu-overlay .menu-inner a {
  color: var(--skytron-off-white);
}

.company-main {
  padding-top: 0;
}

.company-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 24px;
}

.company-hero {
  position: relative;
  color: var(--skytron-off-white);
  isolation: isolate;
  overflow: hidden;
  border-bottom: none;
  margin-bottom: -1px; /* kill the hairline seam */
}

.company-hero-bg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

@media (max-width: 760px) {
  .company-hero {
    min-height: 75vh;
  }
  .company-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Bottom fade — blends the photo into the dark blue of the next section */
.company-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(4, 9, 18, 0) 0%, rgba(4, 9, 18, 0.65) 70%, #040912 100%);
  pointer-events: none;
  z-index: 1;
}


.company-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(110px, 14vh, 160px) clamp(32px, 8vw, 140px) clamp(60px, 10vh, 120px);
  z-index: 2;
}

@media (max-width: 760px) {
  .company-hero-content {
    justify-content: flex-end;
    padding-bottom: 80px;
  }
}

.company-hero .company-eyebrow {
  color: rgba(244, 240, 232, 0.7);
}

.company-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 60px);
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0;
  max-width: 18ch;
  color: var(--skytron-off-white);
}

.company-section {
  padding: clamp(64px, 10vh, 140px) clamp(32px, 8vw, 140px);
}

#believe.company-section {
  background: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/Clouds1.jpg") center center / cover no-repeat #040912;
  color: var(--skytron-blue-deep);
  border-bottom: none;
}

/* Two .company-section-grid blocks share this section — space them apart. */
#believe.company-section .company-section-grid + .company-section-grid {
  margin-top: clamp(64px, 10vh, 140px);
}

#founders.company-section {
  /* Overlay = desaturated dark navy. R kept below B so there's no purple,
     but R/G/B brought closer together (less saturated) for a muted night-
     sky feel rather than a vivid cyanotype. */
  background:
    linear-gradient(rgba(30, 45, 60, 0.75), rgba(30, 45, 60, 0.75)),
    url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/Founders.jpg") center 25% / cover no-repeat var(--skytron-blue-deep);
  color: #fff;
}
#founders .company-section-grid {
  grid-template-columns: 1fr 1fr;
  max-width: none;
}
#founders .company-section-title,
#founders .company-section-body {
  grid-column: 2;
}
#founders.company-section .company-section-title,
#founders.company-section .company-section-body,
#founders.company-section .company-section-body p,
#founders.company-section .company-section-body strong {
  color: #fff;
}

@media (max-width: 760px) {
  #founders .company-section-grid {
    grid-template-columns: 1fr;
  }
  #founders .company-section-title,
  #founders .company-section-body {
    grid-column: 1;
  }
  #founders.company-section {
    background-position: left center;
  }
}

#team.company-section {
  background: url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/sky6.jpg") center center / cover no-repeat var(--skytron-blue-deep);
  padding-left: 0;
  padding-right: 0;
}
#team.company-section .company-section-grid {
  padding-left: clamp(32px, 8vw, 140px);
  padding-right: clamp(32px, 8vw, 140px);
}

#believe.company-section .company-section-title,
#believe.company-section .company-section-body,
#believe.company-section .company-pull {
  color: var(--skytron-blue-deep);
}

.company-section-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2.4fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  max-width: 1200px;
}

.company-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--skytron-near-black);
}

.company-section-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--skytron-near-black);
}

.company-section-body p {
  margin: 0 0 18px;
}

.company-section-body p:last-child { margin-bottom: 0; }

.company-section-body strong {
  font-weight: 600;
}

.company-pull {
  margin-top: 28px !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--skytron-near-black);
}

/* Mission */
.company-mission {
  position: relative;
  text-align: center;
  padding: clamp(80px, 14vh, 200px) clamp(32px, 8vw, 140px);
  background: var(--skytron-near-black);
  color: var(--skytron-off-white);
  border-bottom: none;
  overflow: hidden;
  isolation: isolate;
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 760px) {
  .company-mission {
    min-height: 56vh;
    padding: clamp(48px, 8vh, 96px) clamp(20px, 6vw, 40px);
  }
}

.company-mission-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mission-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Underneath layer — kept fully opaque so it covers the background while
   the new slide fades in on top, preventing any dark-blue bleed-through. */
.mission-slide.is-prev {
  opacity: 1;
  z-index: 1;
}

.mission-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.company-mission-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 17, 30, 0.42) 0%, rgba(8, 17, 30, 0.65) 100%);
  pointer-events: none;
}

.company-mission-statement {
  position: relative;
  z-index: 2;
}

.company-mission .company-eyebrow {
  color: rgba(244, 240, 232, 0.55);
  margin-bottom: 32px;
}

.company-mission-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  color: var(--skytron-off-white);
}


/* Team grid */
.company-team-section .company-section-grid {
  grid-template-columns: 1fr;
}

/* Team section — minimal padding-bottom since the team-grid already
   has its own bottom padding. */
.company-team-section {
  padding-bottom: clamp(8px, 1.2vw, 16px);
  border-bottom: none;
}

.company-team-section .company-section-grid {
  align-items: baseline;
}

/* Mobile: tighten the team section's top padding (default .company-section
   padding-top of ~70px felt too airy on phones above the section title). */
@media (max-width: 760px) {
  .company-team-section {
    padding-top: clamp(32px, 4vh, 48px);
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(20px, 2vw, 32px);
  padding: clamp(40px, 6vh, 80px) clamp(32px, 8vw, 140px) clamp(60px, 8vh, 96px);
}

@media (max-width: 760px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4vw, 40px) clamp(14px, 3vw, 20px);
    padding: clamp(32px, 5vh, 56px) clamp(20px, 5vw, 32px) clamp(48px, 7vh, 72px);
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #d8d6cf;
  overflow: hidden;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--skytron-near-black);
}

.team-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}

/* Careers — sits close to the team section above */
.company-careers {
  padding-top: clamp(36px, 5vh, 72px);
}

#careers.company-section {
  background:
    linear-gradient(180deg, rgba(15, 20, 25, 0.55), rgba(15, 20, 25, 0.7)),
    url("/cdn-cgi/image/format=auto,quality=85,width=2000/public/images/segundoFlag.jpg") center center / cover no-repeat scroll var(--skytron-near-black);
  color: var(--skytron-off-white);
}
#careers .company-section-title,
#careers .company-section-body,
#careers .company-careers-lead,
#careers .company-roles li a {
  color: var(--skytron-off-white);
}
#careers .company-roles-head,
#careers .company-roles li a::after {
  color: rgba(244, 240, 232, 0.6);
}
#careers .company-roles {
  border-top-color: rgba(244, 240, 232, 0.2);
}
#careers .company-roles li {
  border-bottom-color: rgba(244, 240, 232, 0.2);
}
#careers .company-roles li a:hover,
#careers .company-roles li a:hover::after {
  color: var(--skytron-orange);
}

.company-careers-lead {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 40px !important;
}

.company-roles-head {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 16px;
}

.company-roles {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(15, 20, 25, 0.1);
}

.company-roles li {
  border-bottom: 1px solid rgba(15, 20, 25, 0.1);
}

.company-roles li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.015em;
  color: var(--skytron-near-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.company-roles li a::after {
  content: "→";
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--slate);
  transition: transform 0.25s ease;
}

.company-roles li a:hover {
  color: var(--skytron-blue-deep);
}

.company-roles li a:hover::after {
  transform: translateX(6px);
  color: var(--skytron-blue-deep);
}

/* Footer */
.company-footer {
  padding: 32px clamp(32px, 8vw, 140px);
  border-top: 1px solid rgba(15, 20, 25, 0.1);
  background: var(--skytron-off-white);
}

.company-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.company-footer-mark {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--skytron-near-black);
}

@media (max-width: 760px) {
  .company-section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============ CONNECT POPUP ============ */
.connect-popup {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.connect-popup.open {
  opacity: 1;
  pointer-events: auto;
}

.connect-popup-card {
  position: relative;
  background: var(--skytron-off-white);
  color: var(--skytron-near-black);
  padding: 56px 48px;
  max-width: 480px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  text-align: left;
  border-radius: 2px;
  transform: translateY(8px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.connect-popup.open .connect-popup-card {
  transform: translateY(0);
}

.connect-popup-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 16px;
}

.connect-popup-body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--skytron-near-black);
}

.connect-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* ============================================================
   SIMPLIFIED SECTION — slimmed down 2026-05-05.
   Background is currently navy (Skytron deep blue) so it reads
   distinctly from neighboring sections during scroll. Will be
   swapped for a full-bleed background video later.
   The Simplified Statement (title + body + CTA) is anchored
   bottom-left and fades in/out as you scroll through the section.
   ============================================================ */
.simplified-section {
  position: relative;
  min-height: 100vh;
  background: var(--skytron-blue-deep);
  color: var(--skytron-off-white);
  overflow: hidden;
}
.simplified-statement-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(80px, 12vh, 160px) clamp(40px, 7vw, 110px) clamp(72px, 10vh, 140px);
  text-align: left;
  z-index: 4;
  opacity: 0;
}
.simplified-statement-inner {
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 4vh, 56px);
}
.simplified-statement-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--cream);
  margin: 0;
  max-width: 14ch;
}
.simplified-statement-title span { display: block; }
/* Two-toned headline — first line muted/lighter weight, second line full color */
.simplified-statement-title span:first-child {
  font-weight: 200;
  color: rgba(244, 240, 232, 0.5);
}
.simplified-statement-title span:last-child {
  font-weight: 300;
  color: var(--cream);
}
.simplified-statement-body {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--skytron-off-white);
  max-width: 36ch;
  margin: 0;
}
.simplified-statement-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  margin: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.simplified-statement-cta:hover { opacity: 1; }
.simplified-statement-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.simplified-statement-cta:hover svg { transform: translateY(4px); }

.simplified-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .simplified-background-video {
    object-position: 40% center;
  }
}

/* Apple-style cascade-on-entry for the Simplified Statement.
   Each piece starts faded + slightly down; .is-cascaded triggers them
   staggered. Once cascaded, the class persists; the existing scroll-driven
   parent opacity fade-out handles section exit. */
.simplified-statement-overlay .simplified-statement-title span,
.simplified-statement-overlay .simplified-statement-body,
.simplified-statement-overlay .simplified-statement-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.simplified-statement-overlay.is-cascaded .simplified-statement-title span:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0.1s;
}
.simplified-statement-overlay.is-cascaded .simplified-statement-title span:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.3s;
}
.simplified-statement-overlay.is-cascaded .simplified-statement-body {
  opacity: 1; transform: translateY(0); transition-delay: 0.55s;
}
.simplified-statement-overlay.is-cascaded .simplified-statement-cta {
  opacity: 0.85; transform: translateY(0); transition-delay: 0.8s;
}
@media (prefers-reduced-motion: reduce) {
  .simplified-statement-overlay .simplified-statement-title span,
  .simplified-statement-overlay .simplified-statement-body,
  .simplified-statement-overlay .simplified-statement-cta {
    transition: none !important;
    opacity: 1; transform: none;
  }
  .simplified-statement-overlay .simplified-statement-cta { opacity: 0.85; }
}

.connect-close:hover { color: var(--skytron-near-black); }

/* ============ CONNECT FORM ============ */
/* Make the hidden attribute reliably hide flex/grid containers. */
.connect-popup [hidden] {
  display: none !important;
}

.connect-form,
.connect-success {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.connect-form-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}

.connect-form-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: -8px 0 8px;
  color: var(--skytron-near-black);
}

.connect-field {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}

.connect-label {
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(15, 20, 25, 0.42);
  pointer-events: none;
  transition: top 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              font-size 0.2s ease,
              font-family 0s linear 0.1s,
              letter-spacing 0.2s ease,
              text-transform 0s linear 0.1s,
              color 0.2s ease;
}

.connect-label-meta {
  font-style: italic;
}

/* Floated state: focused, has value, or marked has-value via JS (for selects) */
.connect-field:focus-within > .connect-label,
.connect-form input:not(:placeholder-shown) ~ .connect-label,
.connect-form textarea:not(:placeholder-shown) ~ .connect-label,
.connect-field.has-value > .connect-label {
  top: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.connect-field:focus-within > .connect-label .connect-label-meta,
.connect-form input:not(:placeholder-shown) ~ .connect-label .connect-label-meta,
.connect-field.has-value > .connect-label .connect-label-meta {
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
}

.connect-form input,
.connect-form select,
.connect-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--skytron-near-black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(15, 20, 25, 0.18);
  padding: 8px 0 10px;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 0.2s ease;
}

.connect-form input:focus,
.connect-form select:focus,
.connect-form textarea:focus {
  border-bottom-color: var(--skytron-near-black);
}

.connect-form input:invalid:not(:placeholder-shown),
.connect-form textarea:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--skytron-orange);
}

/* Native select arrow */
.connect-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6B6B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 6px;
  padding-right: 24px;
  cursor: pointer;
}

.connect-form textarea {
  resize: vertical;
  min-height: 80px;
}

.connect-branch {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Checkbox row — sits inline (label text right of the checkbox) rather
   than the stacked label/input layout of other fields. No floating label,
   so reset the padding-top reserved for the float position. Slight
   top margin sets it apart from the field above. */
.connect-field.connect-checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding-top: 0;
  margin-top: 10px;
}

.connect-checkbox-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(15, 20, 25, 0.45);
  border-radius: 2px;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.connect-checkbox-field:hover input[type="checkbox"] {
  border-color: var(--skytron-near-black);
}

.connect-checkbox-field input[type="checkbox"]:checked {
  border-color: var(--skytron-near-black);
  background-color: var(--skytron-near-black);
  background-image: url("public/graphics/logo.svg");
}

.connect-checkbox-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--skytron-near-black);
  user-select: none;
}

.connect-submit {
  margin-top: 12px;
  padding: 14px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--skytron-near-black);
  color: var(--skytron-off-white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.connect-submit:hover {
  background: var(--skytron-blue-deep);
}

.connect-submit:disabled,
.connect-submit.is-sending {
  opacity: 0.55;
  cursor: not-allowed;
}

.connect-submit.is-sending .connect-submit-label::after {
  content: "…";
}

.connect-form-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--skytron-orange);
  margin: 0;
}

/* Helper / instruction text sitting directly below a .connect-field.
   Used for prompts too long to live inside a floating label. */
.connect-help {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: var(--slate);
  margin: -10px 0 0;
}

/* File-upload field — styled to match the floating-label aesthetic.
   The native <input type="file"> is visually hidden but accessible;
   clicking anywhere in the label opens the file picker. The X clear
   button stops propagation so it doesn't reopen the picker. */
.connect-field.connect-file-field {
  position: relative;
  padding-top: 0;
  cursor: pointer;
}

.connect-file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.connect-file-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 32px 10px 0;
  border-bottom: 1px solid rgba(15, 20, 25, 0.18);
  transition: border-color 0.2s ease;
}

.connect-file-field:hover .connect-file-row,
.connect-file-field input[type="file"]:focus + .connect-file-row {
  border-bottom-color: var(--skytron-near-black);
}

.connect-file-action {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--skytron-near-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-file-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  flex-shrink: 0;
}

.connect-file-field.has-file .connect-file-action {
  color: var(--skytron-near-black);
}

.connect-file-field.has-file .connect-file-meta {
  display: none;
}

.connect-file-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.connect-file-clear:hover {
  color: var(--skytron-near-black);
}

.connect-success {
  text-align: left;
  padding: 8px 0;
}

.connect-success-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--skytron-near-black);
  margin: 0;
}