/*
  GSX Sports — Design Tokens (Simplified v5)
  Lighter palette, alternating sections (dark + cream), better contrast.
  Removed: aggressive cinematic effects. Kept: navy + gold + clean.
*/

:root {
  /* ===== COLOR PRIMITIVES ===== */
  /* Navy spectrum (primary brand) */
  --navy-50:  #EEF1F7;
  --navy-100: #C5CCDB;
  --navy-300: #4A6593;
  --navy-500: #1F3A66;
  --navy-700: #142849;
  --navy-900: #0A1A2F;
  --navy-950: #06121F;

  /* Gold spectrum (accent) */
  --gold-100: #F4E9D1;
  --gold-300: #E0C896;
  --gold-400: #D4B876;
  --gold-500: #C9A961;
  --gold-600: #B8954A;
  --gold-700: #9A7E3F;

  /* Neutrals */
  --white:      #FFFFFF;
  --cream:      #F8F6F1;
  --cream-100:  #F2EFE8;
  --silver-100: #E8E9EB;
  --silver-200: #D1D5DB;
  --silver-300: #B8BBC1;
  --silver-400: #9CA3AF;
  --silver-500: #6B7280;
  --silver-600: #4B5563;
  --silver-700: #374151;
  --silver-900: #1A1D24;
  --black:      #000000;

  /* States */
  --success: #2D7A4F;
  --warning: #D69D2E;
  --error:   #B33A3A;

  /* ===== SEMANTIC TOKENS — Dark theme (default) ===== */
  --bg-primary:   var(--navy-900);
  --bg-elevated:  var(--navy-700);
  --bg-light:     var(--cream);
  --bg-card:      var(--white);

  --fg-primary:   var(--white);
  --fg-secondary: #D5DAE3;      /* Brighter than before — readable */
  --fg-muted:     var(--silver-400);
  --fg-on-light:  var(--silver-900);
  --fg-body-light: var(--silver-700);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);
  --accent-subtle: rgba(201, 169, 97, 0.12);

  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-light:  rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-on-light: rgba(10, 26, 47, 0.10);
  --border-gold:   rgba(201, 169, 97, 0.45);

  --focus-ring: var(--gold-400);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Sora', 'Inter Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Scale (slightly more conservative for premium minimalism) */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  2.875rem;    /* 46px */
  --text-5xl:  3.75rem;     /* 60px */
  --text-6xl:  4.5rem;      /* 72px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;
  --tracking-ultra:   0.22em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ===== SPACING ===== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1200px;
  --container-x:   2rem;

  /* ===== SHADOWS (subtle) ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-light: 0 2px 12px rgba(10, 26, 47, 0.08);
  --shadow-card-light-hover: 0 12px 32px rgba(10, 26, 47, 0.15);

  /* ===== RADIUS ===== */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ===== MOTION ===== */
  --motion-fast: 200ms;
  --motion-base: 350ms;
  --motion-slow: 600ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ===== Z-INDEX ===== */
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-tooltip: 3000;

  /* ===== A11Y ===== */
  --tap-target-min: 44px;
}

@media (max-width: 768px) {
  :root {
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 3.5rem;
    --container-x: 1.25rem;
  }
}
/*
  GSX — Base styles (reset + typography + utilities)
*/

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* ===== TYPOGRAPHY UTILITIES ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.heading-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.heading-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.heading-md {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.heading-sm {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.heading-xl .accent,
.heading-lg .accent,
.heading-md .accent {
  color: var(--accent);
}

.body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.body    { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.body-sm { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.text-primary   { color: var(--fg-primary); }
.text-secondary { color: var(--fg-secondary); }
.text-muted     { color: var(--fg-muted); }
.text-accent    { color: var(--accent); }
.text-on-light  { color: var(--fg-on-light); }
.text-body-light { color: var(--fg-body-light); }

.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Focus state — always visible for a11y */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  top: -44px;
  left: 0;
  background: var(--accent);
  color: var(--navy-950);
  padding: 0.625rem 1rem;
  z-index: var(--z-tooltip);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: 0 0 var(--radius-md) 0;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--navy-950);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--navy-950); }
::-webkit-scrollbar-thumb { background: var(--navy-500); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-700); }
/*
  GSX — Layout (container, sections, grids)
*/

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

.container-narrow {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-x);
}

/* Section — vertical rhythm */
section { padding-block: var(--space-24); }

@media (max-width: 768px) {
  section { padding-block: var(--space-16); }
}

/* Section variants */
.section-dark  { background: var(--bg-primary); color: var(--fg-primary); }
.section-darker { background: var(--navy-950); color: var(--fg-primary); }
.section-light { background: var(--bg-light); color: var(--fg-on-light); }

/* Section header (eyebrow + heading + lede) */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4rem;
  max-width: 720px;
}
.section-header.center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

/* Grid helpers */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

/* Stack helpers */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { gap: 1.5rem; }
.stack-xl { gap: 2.5rem; }

/* Inline helpers */
.inline { display: flex; align-items: center; gap: 1rem; }
.inline-between { display: flex; align-items: center; justify-content: space-between; }
.inline-center { display: flex; align-items: center; justify-content: center; }
.inline-wrap { flex-wrap: wrap; }
/*
  GSX — Components (buttons, nav, footer, FAB)
*/

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  transition: all var(--motion-fast) var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: var(--tap-target-min);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--navy-950);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--border-light);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-primary);
  padding: 0.875rem 0;
}
.btn-ghost:hover {
  color: var(--accent);
}

.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: var(--text-base);
}

.btn-arrow::after {
  content: "→";
  margin-left: 0.25rem;
  transition: transform var(--motion-fast) var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Button on light background */
.section-light .btn-primary {
  background: var(--navy-900);
  color: var(--white);
}
.section-light .btn-primary:hover { background: var(--navy-700); }

.section-light .btn-secondary {
  color: var(--navy-900);
  border-color: var(--border-on-light);
}
.section-light .btn-secondary:hover {
  background: rgba(10, 26, 47, 0.04);
  border-color: var(--navy-700);
}

.section-light .btn-ghost {
  color: var(--navy-900);
}
.section-light .btn-ghost:hover { color: var(--accent); }

/* ===== NAVIGATION ===== */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 1rem 0;
  background: rgba(10, 26, 47, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--motion-base) var(--ease-out);
}

.nav-bar.is-scrolled {
  background: rgba(6, 18, 31, 0.92);
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

.nav-bar-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-bar-logo .x { color: var(--accent); }

.nav-bar-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-bar-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  transition: color var(--motion-fast) var(--ease-out);
}
.nav-bar-link:hover { color: var(--white); }
.nav-bar-link.active { color: var(--accent); }

.nav-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 860px) {
  .nav-bar-links { display: none; }
}

/* Language pill */
.lang-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.lang-toggle a {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  color: var(--fg-secondary);
  transition: all var(--motion-fast) var(--ease-out);
  text-transform: uppercase;
}
.lang-toggle a.active {
  background: var(--accent);
  color: var(--navy-950);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy-950);
  padding-block: var(--space-20) var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  transition: color var(--motion-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ===== WHATSAPP FAB ===== */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-overlay);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: #25D366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform var(--motion-fast) var(--ease-out);
}
.whatsapp-fab:hover { transform: scale(1.06); }
.whatsapp-fab svg { width: 26px; height: 26px; color: white; }

/* ===== CARD (universal) ===== */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--motion-base) var(--ease-out);
}
.card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.card-light {
  background: var(--bg-card);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  color: var(--fg-on-light);
  box-shadow: var(--shadow-card-light);
  transition: all var(--motion-base) var(--ease-out);
}
.card-light:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-light-hover);
}
/*
  GSX — Hero & Page Headers
  Single clean treatment, photo visible, generous space.
*/

/* ===== HOME HERO ===== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 85vh;
  align-items: center;
  background: var(--navy-900);
  overflow: hidden;
  padding-top: 80px; /* nav clearance */
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 0;
  }
}

.hero-content {
  padding: 5rem 2rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .hero-content { padding: 3rem 1.25rem; }
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--accent);
}
.hero-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 0.95;
  color: var(--white);
  text-transform: uppercase;
}
.hero-title .accent {
  color: var(--accent);
  display: block;
}

.hero-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero-trust {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hero-trust-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--accent);
  line-height: 1;
}
.hero-trust-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Hero media — actual photo visible, not buried */
.hero-media {
  position: relative;
  height: 100%;
  min-height: 60vh;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hero-media { min-height: 50vh; }
}

.hero-media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--navy-900) 0%,
    rgba(10, 26, 47, 0.2) 30%,
    transparent 60%);
}
@media (max-width: 900px) {
  .hero-media::after {
    background: linear-gradient(180deg,
      transparent 0%,
      var(--navy-900) 100%);
  }
}

/* ===== PAGE HERO (about, signings, team, support, contact) ===== */
.page-hero {
  position: relative;
  padding: 9rem 0 5rem;
  background: var(--navy-900);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.page-hero-title .accent { color: var(--accent); }

.page-hero-sub {
  font-size: var(--text-lg);
  color: var(--fg-secondary);
  max-width: 640px;
  margin-inline: auto;
}
/*
  GSX — Section patterns (Numbers, Split, Athlete features, CTA, Team grid)
  Clean, minimal, alternating dark/light for visual rhythm.
*/

/* ===== NUMBERS WALL (simple grid, on light bg for contrast) ===== */
.numbers {
  padding-block: var(--space-24);
  background: var(--bg-light);
  color: var(--fg-on-light);
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-on-light);
  border-bottom: 1px solid var(--border-on-light);
  margin-top: 3rem;
}
@media (max-width: 900px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .numbers-grid { grid-template-columns: 1fr; }
}

.numbers-cell {
  padding: 3rem 1.5rem;
  border-right: 1px solid var(--border-on-light);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.numbers-cell:last-child { border-right: 0; }
@media (max-width: 900px) {
  .numbers-cell:nth-child(2n) { border-right: 0; }
  .numbers-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-on-light); }
}
@media (max-width: 480px) {
  .numbers-cell { border-right: 0; border-bottom: 1px solid var(--border-on-light); }
  .numbers-cell:last-child { border-bottom: 0; }
}

.numbers-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: var(--weight-extrabold);
  color: var(--navy-900);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}

.numbers-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--navy-700);
}

.numbers-context {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--silver-600);
  margin-top: 0.5rem;
}

/* ===== SPLIT SECTION (image + content side-by-side) ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
  align-items: center;
  gap: 0;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

.split-media {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: var(--navy-700);
}
.split-media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.split-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .split-content { padding: 3rem 1.25rem; }
}

.split.reverse > .split-media { order: 2; }
@media (max-width: 900px) {
  .split.reverse > .split-media { order: 0; }
}

/* ===== ATHLETE FEATURE (signings) — same split but bigger photo emphasis ===== */
.athlete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--navy-900);
  border-top: 1px solid var(--border-subtle);
}
.athlete:last-of-type { border-bottom: 1px solid var(--border-subtle); }

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

.athlete-media {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: var(--navy-700);
}
.athlete-media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.athlete-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;   /* frame Yves head→ball, drop the dark crowd up top */
}
@media (max-width: 900px) { .athlete-media { min-height: 520px; } }

/* PRO signing differentiator — gold badge over the photo + gold-rule accent */
.athlete-badge {
  position: absolute;
  top: 1.35rem;
  left: 1.35rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #E8CE82 0%, #C9A961 55%, #B6924A 100%);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.athlete-badge svg { width: 13px; height: 13px; flex: none; }
/* the pro card's university pill gets a filled gold treatment so it reads "different" */
.athlete.is-pro .athlete-uni {
  background: rgba(201,169,97,0.12);
  border-color: var(--accent);
}

.athlete.reverse .athlete-media { order: 2; }
@media (max-width: 900px) {
  .athlete.reverse .athlete-media { order: 0; }
}

.athlete-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 900px) { .athlete-content { padding: 3rem 1.25rem; } }

.athlete-uni {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  width: fit-content;
}

.athlete-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--white);
  font-style: italic;
}

.athlete-name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  color: var(--accent);
}

.athlete-meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}

/* ===== TEAM GRID (modern minimalist, photos that actually fill) ===== */
.team {
  background: var(--bg-light);
  padding-block: var(--space-24);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.team-card {
  background: var(--white);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  transition: all var(--motion-base) var(--ease-out);
  box-shadow: var(--shadow-card-light);
}
@media (max-width: 640px) {
  .team-card { grid-template-columns: 1fr; }
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-light-hover);
  border-color: var(--accent);
}

.team-photo {
  aspect-ratio: 1 / 1.2;
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
  overflow: hidden;
  position: relative;
}
@media (max-width: 640px) {
  .team-photo { aspect-ratio: 4 / 3; }
}
.team-photo picture {
  position: absolute;
  inset: 0;
  display: block;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--motion-slow) var(--ease-out);
}
.team-card:hover .team-photo img { transform: scale(1.04); }

.team-info {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--fg-on-light);
}

.team-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--navy-900);
}

.team-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--accent);
}

.team-territory {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--silver-600);
}

.team-bio {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--silver-700);
  margin-top: 0.25rem;
}

.team-email {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--navy-700);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-on-light);
  word-break: break-all;
  transition: color var(--motion-fast);
}
.team-email:hover { color: var(--accent); }

/* ===== CTA SECTION ===== */
.cta-section {
  background: var(--navy-950);
  padding-block: var(--space-24);
  text-align: center;
}

.cta-inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-x);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

/* ===== PROCESS STEPS (Support page) ===== */
.process {
  background: var(--bg-light);
  padding-block: var(--space-24);
  color: var(--fg-on-light);
}

.process-step {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 3rem;
  padding-block: 3rem;
  border-top: 1px solid var(--border-on-light);
}
.process-step:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 768px) {
  .process-step { grid-template-columns: 1fr; gap: 1.5rem; }
}

.process-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--accent);
}

.process-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--navy-900);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.process-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--silver-700);
  max-width: 680px;
  margin-bottom: 1.5rem;
}

.process-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  max-width: 920px;
}
@media (max-width: 768px) { .process-cards { grid-template-columns: 1fr; } }

.process-card {
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  color: inherit;
  width: 100%;
  font: inherit;
}
.process-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-light);
}
.process-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.process-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ultra);
  color: var(--accent);
  text-transform: uppercase;
}
.process-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--navy-900);
  letter-spacing: var(--tracking-tight);
}
.process-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-on-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
  transition: all var(--motion-fast) var(--ease-out);
  flex-shrink: 0;
}
.process-card:hover .process-card-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-950);
}

/* ===== ABOUT FEATURES (4-up cards) ===== */
.features {
  background: var(--navy-900);
  padding-block: var(--space-24);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .features-grid { grid-template-columns: 1fr; } }

.feature {
  padding: 2rem;
  background: var(--navy-700);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all var(--motion-base) var(--ease-out);
}
.feature:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.feature-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ultra);
  color: var(--accent);
}
.feature-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}
.feature-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

/* ===== CONTACT LAYOUT ===== */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
  margin-top: 80px;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; min-height: auto; }
}

.contact-info {
  background: transparent;
  padding: 5rem 4rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .contact-info { padding: 3rem 1.25rem; } }

.contact-info-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact-info-bg picture {
  position: absolute;
  inset: 0;
  display: block;
}
.contact-info-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: saturate(0.7);
}
.contact-info-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 31, 0.5) 0%, rgba(6, 18, 31, 0.9) 100%);
}
.contact-info > * { position: relative; z-index: 1; }

.contact-form {
  background: transparent;
  padding: 5rem 4rem;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) { .contact-form { padding: 3rem 1.25rem; } }

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: all var(--motion-fast) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(201, 169, 97, 0.06);
}
.field textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.contact-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}
.contact-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--fg-secondary);
  font-size: var(--text-sm);
}
.contact-meta-item svg { color: var(--accent); flex-shrink: 0; }
.contact-meta-item a { color: inherit; transition: color var(--motion-fast); }
.contact-meta-item a:hover { color: var(--accent); }
/*
  GSX — Interactions (minimal, content-first)
  Content is ALWAYS visible. JS adds subtle entrance animations on intersection
  but never hides content as a starting state. No-JS, screenshot, and slow-network
  all show content properly.
*/

/* Scroll progress (subtle gold line at top) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  z-index: var(--z-tooltip);
  pointer-events: none;
}

/* Reveal animation — additive only. Initial state = fully visible. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-revealing {
    animation: gsx-reveal 0.7s var(--ease-out) both;
  }
}

@keyframes gsx-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Email link with underline reveal */
.link-line {
  position: relative;
  padding-bottom: 2px;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  display: inline-block;
}
.link-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.link-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/*
  GSX — Modal (Process step detail)
*/

gsx-modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

gsx-modal-root .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 18, 31, 0.78);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
}
gsx-modal-root.is-open .modal-backdrop {
  opacity: 1;
  pointer-events: auto;
}

gsx-modal-root .modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(680px, calc(100vw - 2rem));
  max-height: min(80vh, 740px);
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  color: var(--fg-on-light);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-slow) var(--ease-out),
              visibility var(--motion-base) var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
gsx-modal-root.is-open .modal-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

gsx-modal-root .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  color: var(--navy-700);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  z-index: 2;
}
gsx-modal-root .modal-close:hover {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}

gsx-modal-root .modal-content {
  padding: 3rem 2.5rem 2.5rem;
  overflow-y: auto;
}
@media (max-width: 640px) {
  gsx-modal-root .modal-content { padding: 2.5rem 1.5rem 2rem; }
}

gsx-modal-root .modal-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}

gsx-modal-root .modal-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--navy-900);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

gsx-modal-root .modal-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--silver-700);
  margin-bottom: 1.25rem;
}

gsx-modal-root .modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
gsx-modal-root .modal-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--silver-700);
}
gsx-modal-root .modal-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: var(--weight-bold);
}
gsx-modal-root .modal-list li strong {
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
  margin-right: 0.25rem;
}

/* Process card trigger doesn't need any special override — it's a button already */
/*
  GSX — Apple-tier interactions v7 (native scroll, content-visibility, CSS-driven)
  - Hero with video bg, split-text reveal, scroll cue.
  - Sticky-scroll section: CSS sticky + IO-driven crossfade.
  - content-visibility:auto for off-screen sections → skip paint cost.
*/

/* ========================================================
   HERO
   ======================================================== */
.a-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  overflow: hidden;
  background: var(--navy-950);
  /* contain repaint within hero — improves scroll perf */
  contain: layout style paint;
}
@media (max-width: 768px) { .a-hero { min-height: 640px; } }

.a-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.a-hero-media video,
.a-hero-media picture,
.a-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Crop Gemini watermark — scale from top-left so bottom-right is clipped */
.a-hero-media video {
  transform: scale(1.18);
  transform-origin: top left;
}

/* Safety mask over watermark zone */
.a-hero-media::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 220px;
  height: 130px;
  background: radial-gradient(ellipse at bottom right,
    rgba(6, 18, 31, 0.95) 0%,
    rgba(6, 18, 31, 0.5) 60%,
    transparent 85%);
  z-index: 1;
  pointer-events: none;
}

.a-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(6, 18, 31, 0.85) 0%,
      rgba(6, 18, 31, 0.55) 40%,
      rgba(6, 18, 31, 0.2) 65%,
      rgba(6, 18, 31, 0.4) 100%),
    linear-gradient(180deg,
      rgba(6, 18, 31, 0.2) 0%,
      transparent 30%,
      transparent 70%,
      rgba(6, 18, 31, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Absolute positioning — content anchored at bottom with explicit margins.
   This way nav at top and content at bottom never overlap, regardless of
   viewport height. */
.a-hero-inner {
  position: absolute;
  bottom: 7vh;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-x);
  color: var(--white);
}

/* On shorter viewports, shrink title and push content closer to bottom
   to maintain nav clearance */
@media (max-height: 800px) {
  .a-hero-inner { bottom: 4vh; }
  .a-hero-title { font-size: clamp(2.25rem, 5.5vw, 4.5rem) !important; }
  .a-hero-sub { font-size: 1rem !important; margin-bottom: 1.5rem !important; }
  .a-hero-eyebrow { margin-bottom: 1.25rem !important; }
}
@media (max-height: 640px) {
  .a-hero-inner { bottom: 3vh; }
  .a-hero-title { font-size: 2rem !important; }
}

.a-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
  opacity: 0;
  transform: translateY(20px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  line-height: 1.4;
  padding: 0.25rem 0;
}
.a-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .a-hero-eyebrow { font-size: 0.6875rem; letter-spacing: 0.18em; gap: 0.5rem; }
  .a-hero-eyebrow::before { width: 18px; }
}

.a-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 1.75rem;
  max-width: 18ch;
}
.a-hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.a-hero-title .word-inner {
  display: inline-block;
  transform: translateY(110%);
}
.a-hero-title .accent {
  color: var(--accent);
  display: inline-block;
}

.a-hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 460px;
  margin-bottom: 2.25rem;
  opacity: 0;
  transform: translateY(20px);
}

.a-hero-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}

.a-hero-actions .btn {
  font-size: var(--text-base);
  padding: 1rem 2rem;
}

.a-hero-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  opacity: 0;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.a-hero-cue:hover { color: var(--accent); transform: translate(-50%, -4px); }
.a-hero-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  color: var(--accent);
}
.a-hero-cue-label { display: inline-block; }
.a-hero-cue-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, currentColor 0%, transparent 100%);
  animation: a-scroll-cue 2.4s ease-in-out infinite;
}
@keyframes a-scroll-cue {
  0%, 100% { transform: scaleY(1); opacity: 0.4; transform-origin: top; }
  50% { transform: scaleY(0.4); opacity: 1; transform-origin: top; }
}

/* ========================================================
   UNIVERSITY NETWORK WALL — logos image showcase
   ======================================================== */
.network-wall {
  background: var(--navy-950);
  padding: 6rem 0 7rem;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}
.network-wall-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.network-wall-figure {
  margin: 0;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  background: var(--cream);
}
.network-wall-figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* Subtle navy vignette + gold rail anchor */
.network-wall-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 18, 31, 0.04) 0%, transparent 25%, transparent 75%, rgba(6, 18, 31, 0.06) 100%);
  pointer-events: none;
}
.network-wall-figure::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 320px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.6;
}
@media (max-width: 768px) {
  .network-wall { padding: 4.5rem 0 5rem; }
  .network-wall-figure { border-radius: 12px; }
}

/* ========================================================
   FOUNDERS PROOF — 4-up portrait grid
   ======================================================== */
.founders-proof {
  background: var(--navy-950);
  padding: 8rem 0 7rem;
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}
.founders-proof-head {
  text-align: left;
  max-width: 680px;
  margin-bottom: 4rem;
}
.founders-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .founders-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px) { .founders-proof-grid { grid-template-columns: 1fr 1fr; } }

/* Circular avatar pattern — Apple/Stripe/Linear team layout.
   Enforces total harmony: every founder shows up as a same-size circle,
   face crop only, regardless of source photo dimensions. */
.founder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 1rem 1.25rem;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
  will-change: transform;
}
.founder-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.02); }
.founder-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.founder-card picture {
  display: block;
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--navy-700);
  position: relative;
  margin-bottom: 1.5rem;
  /* Subtle gold ring + soft shadow for depth */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
              0 14px 32px -10px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.founder-card:hover picture {
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.55),
              0 22px 44px -10px rgba(0, 0, 0, 0.6);
}

/* Photos are pre-cropped via scripts/crop_founders.py to identical 800x800
   with faces at exact same y position — no per-card CSS hacks needed. */
.founder-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.founder-card:hover img { transform: scale(1.06); }

.founder-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.founder-role {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.01em;
}

/* ========================================================
   WHY GSX — comparison cards
   ======================================================== */
.why-gsx {
  background: var(--navy-900);
  padding: 8rem 0;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}
.why-gsx-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
}

.why-card-featured {
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.10) 0%, rgba(201, 169, 97, 0.025) 100%);
  border-color: rgba(201, 169, 97, 0.35);
  box-shadow: 0 20px 60px -20px rgba(201, 169, 97, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.why-card-featured:hover {
  border-color: rgba(201, 169, 97, 0.55);
}
.why-card-featured::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.why-card-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.25rem;
}
.why-card-featured .why-card-tag { color: var(--accent); }

.why-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}

.why-card-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.why-card-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.why-card-list li::before {
  position: absolute;
  left: 0;
  top: 0.0625rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.why-card-list li.negative {
  color: rgba(255, 255, 255, 0.62);
}
.why-card-list li.negative::before {
  content: "✕";
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}
.why-card-list li.positive {
  color: rgba(255, 255, 255, 0.92);
}
.why-card-list li.positive::before {
  content: "✓";
  background: rgba(201, 169, 97, 0.18);
  color: var(--accent);
}

/* ========================================================
   FOCUS RINGS — global a11y polish
   ======================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================================
   REVEAL SYSTEM v2 — cinematic, differentiated by element type
   - Headings: line-by-line mask (each line rises from behind a mask)
   - Big images: clip/wipe reveal (curtain sweeps up) + slow inner zoom
   - Everything else: dramatic fade + rise + focus-in (blur→sharp)
   JS (initReveal) preps the parts on load and sequences them on scroll.
   Base state = visible, so reduced-motion / no-JS users always see content.
   ======================================================== */
:root{ --rv-ease: cubic-bezier(0.16, 1, 0.3, 1); }  /* cinematic deceleration */

[data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Containers hide until revealed so their parts never flash before JS preps
     them. The motion lives on the PARTS, not the container. */
  [data-reveal]:not(.is-revealed),
  [data-reveal-stagger]:not(.is-revealed) { opacity: 0; }
  [data-reveal].is-revealed,
  [data-reveal-stagger].is-revealed { opacity: 1; }

  /* — fade part (eyebrows, body copy, buttons, generic) — */
  .rv-fade {
    opacity: 0; transform: translateY(46px); filter: blur(8px);
    transition: opacity 1.3s var(--rv-ease), transform 1.5s var(--rv-ease), filter 1.3s var(--rv-ease);
    will-change: opacity, transform;
  }
  .rv-fade.is-in { opacity: 1; transform: none; filter: none; }

  /* — heading: line-by-line mask reveal — */
  .rv-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .rv-line-in { display: block; transform: translateY(120%); transition: transform 1.55s var(--rv-ease); will-change: transform; }
  .rv-line.is-in .rv-line-in { transform: translateY(0); }

  /* — big image: clip/wipe curtain + slow inner zoom for depth — */
  .rv-clip { clip-path: inset(100% 0 0 0); transition: clip-path 1.7s var(--rv-ease); will-change: clip-path; }
  .rv-clip > img, .rv-clip > picture, .rv-clip > picture > img {
    transform: scale(1.14); transition: transform 2.1s var(--rv-ease); transform-origin: center; will-change: transform;
  }
  .rv-clip.is-in { clip-path: inset(0 0 0 0); }
  .rv-clip.is-in > img, .rv-clip.is-in > picture, .rv-clip.is-in > picture > img { transform: none; }

  /* stagger-grid children animate as fade parts (JS assigns the delays) */
  [data-reveal-stagger] > *:not(.is-in) {
    opacity: 0; transform: translateY(46px); filter: blur(8px);
    transition: opacity 1.3s var(--rv-ease), transform 1.5s var(--rv-ease), filter 1.3s var(--rv-ease);
  }
  [data-reveal-stagger] > *.is-in { opacity: 1; transform: none; filter: none; }
}

/* ========================================================
   STICKY-SCROLL — CSS sticky pattern (bulletproof)
   ======================================================== */
/* ========================================================
   PROCESS — full-pin step sequence (Apple AirPods style)
   The whole stage pins; scroll advances a step index (JS).
   Per step: image clip-wipes in, text fades+rises, bar advances.
   ======================================================== */
.proc { position: relative; background: var(--navy-950); color: var(--white); }

.proc-intro { text-align: center; padding: 6rem 1.5rem 2rem; max-width: 720px; margin: 0 auto; }

/* Runway the pin sticks within. ~45vh of scroll per step (5 steps) → range
   225vh + 100vh pin. The transition is SCRUBBED (JS sets clip/opacity inline
   per frame), so there are NO CSS transitions on the frames/slides here. */
.proc-scroll { position: relative; height: 325vh; }
.proc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.proc-stage { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; }

/* — media column: scrubbed clip-wipe frame stack — */
.proc-media { position: relative; overflow: hidden; background: var(--navy-900); }
.proc-frame { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); will-change: clip-path; }
.proc-frame:first-child { clip-path: inset(0 0 0 0); }   /* no-JS fallback */
.proc-frame img, .proc-frame picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.proc-frame img { transform: scale(1.08); will-change: transform; }
.proc-frame:first-child img { transform: none; }
.proc-media-grad {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, rgba(6,18,31,.5) 100%),
              linear-gradient(0deg, rgba(6,18,31,.45) 0%, transparent 30%);
}
.proc-media-grad {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, rgba(6,18,31,.5) 100%),
              linear-gradient(0deg, rgba(6,18,31,.45) 0%, transparent 30%);
}

/* — panel: progress + swapping text — */
.proc-panel {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(2rem, 5vw, 5.5rem); gap: 2.4rem;
}
.proc-progress { display: flex; align-items: center; gap: 1rem; }
.proc-cur { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--gold-500); min-width: 2.4ch; font-variant-numeric: tabular-nums; }
.proc-total { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--fg-secondary); }
.proc-bar { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.proc-bar-fill {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
}

.proc-slides { position: relative; flex: 1; min-height: 300px; }
.proc-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(24px); pointer-events: none;  /* JS scrubs opacity/transform */
}
.proc-slide:first-child { opacity: 1; transform: none; }   /* no-JS fallback */
.proc-num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: var(--weight-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
.proc-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: var(--weight-extrabold); letter-spacing: -0.035em; line-height: 1.04; color: var(--white); margin-bottom: 1.35rem; }
.proc-desc { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.8); max-width: 42ch; margin-bottom: 1.6rem; }
.proc-meta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); opacity: 0.85; }
.proc-meta::before { content: ""; width: 24px; height: 1px; background: currentColor; }

/* mobile: stack media (top) + panel (below), still pinned */
@media (max-width: 900px) {
  .proc-stage { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
  .proc-panel { padding: 2rem 1.5rem; gap: 1.5rem; justify-content: flex-start; }
  .proc-slides { min-height: 340px; }
}

/* reduced motion: no pin, no scrub — a plain readable stacked list */
@media (prefers-reduced-motion: reduce) {
  .proc-scroll { height: auto; }
  .proc-pin { position: static; height: auto; }
  .proc-stage { display: block; height: auto; }
  .proc-media { height: 46vh; }
  .proc-frame { clip-path: none !important; }
  .proc-frame:not(:first-child) { display: none; }
  .proc-frame img { transform: none !important; }
  .proc-progress { display: none; }
  .proc-slides { min-height: 0; }
  .proc-slide { position: static; opacity: 1 !important; transform: none !important; padding: 2.5rem 0; border-top: 1px solid var(--border-subtle); }
}

/* ========================================================
   APPLE NUMBERS
   ======================================================== */
.a-numbers {
  background: var(--navy-950);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}
.a-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 900px) { .a-numbers-grid { grid-template-columns: repeat(2, 1fr); } }

.a-num {
  padding: 3.5rem 1.5rem;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.a-num:last-child { border-right: 0; }
@media (max-width: 900px) {
  .a-num:nth-child(2n) { border-right: 0; }
}

.a-num-value {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.a-num-value .gold { color: var(--accent); }

.a-num-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.a-num-context {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* Apply content-visibility to other heavy sections for paint savings */
.athlete, .cta-section, .footer-cinematic {
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

/* ============================================================
   CINEMATIC INTRO — GSX draw-on + scroll-scrub reveal
   Fixed navy veil over the hero. On load the GSX letters draw
   themselves on (SVG stroke). On scroll, the veil fades and the
   letters shrink + travel to the nav-logo position (FLIP in JS).
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center;
  /* cinematic depth: a soft navy glow behind the mark + a vignette at the
     edges so the veil reads as a lit stage, not a flat fill. */
  background:
    radial-gradient(118% 82% at 50% 41%, #11253c 0%, var(--navy-950) 60%),
    var(--navy-950);
  pointer-events:none;            /* decorative — never blocks the nav under it */
  will-change:opacity;
}
.intro::after{          /* edge vignette for depth */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%, transparent 58%, rgba(2,8,16,.55) 100%);
}
.intro-mark{
  width:min(72vw,620px); height:auto; overflow:visible;
  transform-origin:center center;
  will-change:transform,opacity;
}
.intro-mark text{
  font-family:var(--font-display); font-weight:800; font-size:110px;
  text-transform:uppercase;
  fill:transparent; stroke-width:1.4; paint-order:stroke;
  stroke-dasharray:920; stroke-dashoffset:920;
}
.il-g,.il-s{ stroke:#fff; }
.il-x{ stroke:var(--gold-500); }
@keyframes intro-draw{ to{ stroke-dashoffset:0; } }
/* fill fades in AND the draw-on stroke fades out → clean filled letters that
   render identically to the nav logo, so the dock/swap is seamless. */
@keyframes intro-fill-w{ to{ fill:#fff; stroke-opacity:0; } }
@keyframes intro-fill-g{ to{ fill:var(--gold-500); stroke-opacity:0; } }
.il-g{ animation:intro-draw .72s cubic-bezier(.6,0,.2,1) .15s forwards, intro-fill-w .55s ease 1.45s forwards; }
.il-s{ animation:intro-draw .72s cubic-bezier(.6,0,.2,1) .55s forwards, intro-fill-w .55s ease 1.55s forwards; }
.il-x{ animation:intro-draw .72s cubic-bezier(.6,0,.2,1) .95s forwards, intro-fill-g .55s ease 1.65s forwards; }
.intro-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  opacity:0; animation:intro-cue-in .9s ease 2.05s forwards;
  transition:opacity .4s ease;   /* smooth vanish the moment scroll starts */
  font-family:var(--font-body); font-size:.62rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--fg-secondary);
}
.intro-cue-label{ padding-left:.34em; }   /* optical-center the tracked text */
@keyframes intro-cue-in{ to{ opacity:.62; } }
.intro-cue-line{ width:1px; height:46px; background:linear-gradient(var(--gold-500),transparent); animation:intro-cue-bob 1.9s ease-in-out infinite; }
@keyframes intro-cue-bob{ 0%,100%{ transform:scaleY(.45); transform-origin:top; opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media (max-width:640px){ .intro-mark{ width:62vw; } }
@media (prefers-reduced-motion:reduce){ .intro{ display:none!important; } }

/* Pinned hero: the scene gives the scroll runway; the hero sticks to the top
   so its title holds in place while the intro letters shrink to the header.
   Scene height = 100vh hero + 70vh runway → matches the JS reveal distance
   (innerHeight * 0.7). Hero releases when the runway is consumed. */
.intro-scene{ position:relative; height:170vh; }
.intro-scene > .a-hero{ position:sticky; top:0; }
@media (prefers-reduced-motion:reduce){
  .intro-scene{ height:auto; }
  .intro-scene > .a-hero{ position:relative; }
}

/* ============================================================
   PREMIUM HEADER — minimal immersive
   Transparent over the hero; condenses to a slim glass bar with
   a thin gold hairline on scroll. Integrated across all pages.
   ============================================================ */
.nav-bar{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  padding:1.45rem 0;
  transition:background .5s var(--ease-out,ease), padding .5s var(--ease-out,ease),
             box-shadow .5s var(--ease-out,ease), backdrop-filter .5s var(--ease-out,ease);
}
.nav-bar.is-scrolled{
  /* lit glass — a faint vertical gradient + an inner top highlight reads as
     real frosted glass rather than a flat tint. */
  background:linear-gradient(180deg, rgba(9,22,37,.80) 0%, rgba(6,16,28,.72) 100%);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,0,0,.7);
  padding:.74rem 0;
}
/* gold hairline that fades at both edges (matches section accent rails) */
.nav-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(201,169,97,.45) 50%, transparent 100%);
  opacity:0; transition:opacity .5s var(--ease-out,ease); pointer-events:none;
}
.nav-bar.is-scrolled::after{ opacity:1; }

/* Logo lockup — refined; the intro mark FLIPs onto it (measured live) */
.nav-bar-logo{
  font-size:1.45rem; letter-spacing:.012em; line-height:1;
  display:inline-flex; align-items:center;
  transition:opacity .25s ease;
}
.nav-bar-logo .x{ color:var(--gold-500); }
.nav-bar-logo:hover{ opacity:.82; }

/* Links — gold underline grows from centre + clear active state */
.nav-bar-links{ gap:2.5rem; }
.nav-bar-link{
  position:relative; font-size:.8rem; font-weight:var(--weight-medium);
  letter-spacing:.045em; color:var(--fg-secondary); padding:.4rem 0;
  transition:color .28s var(--ease-out,ease);
}
.nav-bar-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-.05rem; height:1.5px;
  background:linear-gradient(90deg, var(--gold-400), var(--gold-500));
  border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .34s cubic-bezier(.6,0,.2,1);
}
.nav-bar-link:hover{ color:var(--white); }
.nav-bar-link:hover::after{ transform:scaleX(1); }
.nav-bar-link.active{ color:var(--white); }
.nav-bar-link.active::after{ transform:scaleX(1); }

/* Language toggle — refined, gold active */
.lang-toggle{
  background:rgba(255,255,255,.035);
  border:1px solid var(--border-subtle);
  padding:2px;
}
.lang-toggle a{
  padding:.28rem .58rem; border-radius:var(--radius-full);
  color:var(--fg-secondary); transition:color .2s ease, background .2s ease;
}
.lang-toggle a:hover{ color:var(--white); }
.lang-toggle a.active{ background:rgba(201,169,97,.16); color:var(--gold-400); }

/* Schedule CTA — gold gradient, arrow, subtle lift */
.nav-bar .btn-primary{
  padding:.62rem 1.2rem; font-size:.8rem; letter-spacing:.012em; font-weight:var(--weight-semibold);
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -8px rgba(201,169,97,.6);
  transition:transform .25s var(--ease-out,ease), box-shadow .25s var(--ease-out,ease), filter .25s ease;
}
.nav-bar .btn-primary:hover{
  transform:translateY(-1.5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 13px 28px -8px rgba(201,169,97,.78);
  filter:brightness(1.05);
}
/* (arrow comes from the global .btn-arrow::after) */

/* ============================================================
   MOBILE NAV — premium hamburger + full-screen drawer
   Burger hidden on desktop; ≤1024px the inline links + lang +
   CTA collapse into a slide-in glass panel.
   ============================================================ */
.nav-burger{
  display:none;                 /* desktop: hidden */
  width:44px; height:44px; margin-right:-8px;
  align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger-box{ position:relative; width:24px; height:14px; }
.nav-burger-line{
  position:absolute; left:0; width:24px; height:2px; border-radius:2px;
  background:var(--white);
  transition:transform .4s var(--rv-ease,cubic-bezier(.16,1,.3,1)), opacity .25s ease, background .3s ease;
}
.nav-burger-line:nth-child(1){ top:0; }
.nav-burger-line:nth-child(2){ bottom:0; }
.nav-burger.is-active .nav-burger-line:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.is-active .nav-burger-line:nth-child(2){ transform:translateY(-6px) rotate(-45deg); }

/* Drawer shell */
.nav-drawer{
  position:fixed; inset:0; z-index:calc(var(--z-sticky) - 1);
}
.nav-drawer[hidden]{ display:none; }
.nav-drawer-scrim{
  position:absolute; inset:0;
  background:rgba(4,10,18,.55);
  opacity:0; transition:opacity .45s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.nav-drawer.is-open .nav-drawer-scrim{ opacity:1; }

.nav-drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(86vw, 420px);
  display:flex; flex-direction:column; justify-content:center; gap:2.5rem;
  padding:6.5rem 2rem 2.5rem;
  background:linear-gradient(160deg, rgba(12,28,46,.96) 0%, rgba(6,16,28,.98) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%);
  border-left:1px solid rgba(201,169,97,.20);
  box-shadow:-30px 0 60px -24px rgba(0,0,0,.7);
  transform:translateX(100%);
  transition:transform .5s var(--rv-ease,cubic-bezier(.16,1,.3,1));
}
.nav-drawer.is-open .nav-drawer-panel{ transform:translateX(0); }

.nav-drawer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.nav-drawer-links li{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s var(--rv-ease,cubic-bezier(.16,1,.3,1));
  transition-delay:calc(0.04s * var(--i));
}
.nav-drawer.is-open .nav-drawer-links li{ opacity:1; transform:none; }
.nav-drawer-link{
  display:inline-block; padding:.5rem 0;
  font-family:var(--font-display); font-size:1.85rem; font-weight:700;
  letter-spacing:-.02em; color:var(--fg-secondary);
  transition:color .25s ease;
}
.nav-drawer-link:hover,
.nav-drawer-link.active{ color:var(--white); }
.nav-drawer-link.active{ color:var(--gold-400); }

.nav-drawer-foot{
  display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start;
  padding-top:2rem; border-top:1px solid var(--border-subtle);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease .18s, transform .5s var(--rv-ease,cubic-bezier(.16,1,.3,1)) .18s;
}
.nav-drawer.is-open .nav-drawer-foot{ opacity:1; transform:none; }
.nav-drawer-cta{ font-size:.95rem; padding:.8rem 1.4rem; }

body.nav-drawer-open{ overflow:hidden; }

/* Show the burger + collapse inline controls on mobile only.
   Matches the .nav-bar-links breakpoint (860px) so every laptop/desktop
   keeps the inline links exactly as before. */
@media (max-width:860px){
  .nav-burger{ display:inline-flex; }
  .nav-bar-right .lang-toggle,
  .nav-bar-right .nav-bar-cta{ display:none; }
}

/* ============================================================
   ABOUT — cinematic still hero
   Full-bleed photo, layered navy gradient, content bottom-left.
   Title uses .heading-md so the reveal engine line-masks it.
   ============================================================ */
.about-hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  padding-top:8rem; padding-bottom:7.5rem; overflow:hidden; background:var(--navy-950);
}
.about-hero-media{ position:absolute; inset:-14% 0; z-index:0; will-change:transform; }
.about-hero-media picture{ display:block; width:100%; height:100%; }
.about-hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.about-hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,18,31,.82) 0%, rgba(6,18,31,.42) 46%, rgba(6,18,31,.12) 78%),
    linear-gradient(180deg, rgba(6,18,31,.35) 0%, transparent 32%, transparent 52%, rgba(6,18,31,.92) 100%);
}
.about-hero-inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--container-max,1200px); margin:0 auto;
  padding:0 var(--container-x,2rem);
}
.about-hero-title{
  font-size:clamp(2.7rem, 6.2vw, 5.1rem); line-height:.98; letter-spacing:-.03em;
  color:var(--white); margin:.85rem 0 1.35rem;
}
.about-hero-sub{
  max-width:58ch; color:var(--fg-secondary);
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.62;
}
@media (max-width:760px){
  .about-hero{ min-height:78vh; padding-bottom:3.5rem; }
  .about-hero-media img{ object-position:center 22%; }
}

/* ---- Parallax base (JS drives transform on [data-parallax]) ---- */
[data-parallax]{ will-change:transform; }

/* ============================================================
   ABOUT — reach: full (uncropped) stadium + a gold line that
   draws on scroll, revealing the divisions GSX places into.
   ============================================================ */
.reach{ position:relative; background:var(--navy-950); }
.reach-media{ position:relative; width:100%; line-height:0; }
.reach-media img{ width:100%; height:auto; display:block; }      /* whole image, uncropped */
.reach-media::after{                                             /* blend down into the body */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:46%;
  background:linear-gradient(180deg, transparent 0%, var(--navy-950) 96%);
  pointer-events:none; z-index:1;
}
.reach-stat{
  position:absolute; left:0; right:0; bottom:13%; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  pointer-events:none;
}
.reach-stat-num{
  font-family:var(--font-display); font-weight:800; line-height:.86;
  font-size:clamp(4rem, 12vw, 9.5rem); letter-spacing:-.045em; color:var(--white);
  text-shadow:0 12px 50px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.5);
}
.reach-stat-cap{
  margin-top:.6rem; font-size:clamp(.78rem,1.3vw,1rem); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
@media (max-width:760px){
  .reach-stat{ bottom:10%; }
}
.reach-body{ position:relative; padding:clamp(2rem,4vw,3.5rem) 0 clamp(5rem,9vw,8rem); }
.reach-head{ max-width:700px; margin:0 auto clamp(4rem,8vw,7rem); text-align:center; }
.reach-head .eyebrow{ justify-content:center; }
.reach-head .body{ margin-top:1rem; }

.reach-line{ position:relative; height:160px; }
.reach-svg{ position:absolute; left:0; top:34px; width:100%; height:4px; overflow:visible; }
.reach-track{ stroke:rgba(255,255,255,.12); stroke-width:2; }
.reach-draw{ stroke:var(--gold-500); stroke-width:2.5; stroke-linecap:round; }
.reach-nodes{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.reach-node{
  position:absolute; left:var(--x); top:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center; width:7rem;
  opacity:0; transition:opacity .55s var(--rv-ease,ease);
}
.reach-node.is-on{ opacity:1; }
.reach-dot{
  width:14px; height:14px; margin-top:-7px; border-radius:50%;
  background:var(--navy-950); border:2px solid var(--gold-500);
  transform:scale(.4); transition:transform .5s var(--rv-ease,ease), box-shadow .5s ease;
}
.reach-node.is-on .reach-dot{ transform:scale(1); box-shadow:0 0 22px 3px rgba(201,169,97,.45); }
.reach-num{
  margin-top:1.1rem; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.01em; color:var(--white);
}
.reach-lbl{ margin-top:.35rem; font-size:.78rem; line-height:1.35; letter-spacing:.02em; color:var(--fg-secondary); }
@media (max-width:760px){
  .reach-line{ height:auto; }
  .reach-svg{ display:none; }
  .reach-nodes{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:2rem 1rem; }
  .reach-node{ position:static; transform:none; opacity:1; width:auto; top:auto; left:auto; }
  .reach-dot{ margin-top:0; transform:scale(1); }
}

/* ============================================================
   ABOUT — asymmetric offset (mission)
   ============================================================ */
.about-offset{ padding:clamp(5rem,10vw,9rem) 0; background:var(--navy-900); }
.about-offset-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.about-offset-media{ position:relative; margin:0; transform:translateY(2.5rem); }
.about-offset-media img{
  width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.about-offset-media::before{               /* gold corner accent */
  content:""; position:absolute; left:-10px; top:-10px; width:64px; height:64px;
  border-left:2px solid var(--gold-500); border-top:2px solid var(--gold-500);
  border-radius:4px 0 0 0; opacity:.8;
}
.about-offset-cap{
  margin-top:.9rem; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-400);
}
@media (max-width:860px){
  .about-offset-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .about-offset-media{ transform:none; }
}

/* ============================================================
   ABOUT — horizontal timeline (pinned, scrolls sideways)
   ============================================================ */
.timeline{ position:relative; background:var(--navy-950); }
.timeline-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(.5rem,1.8vh,1.25rem);
  padding:1rem 0;
}
.timeline-head{ flex:0 0 auto; }
.timeline-hint{
  margin-top:.45rem; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400);
}
.timeline-viewport{ overflow:hidden; }
.timeline-track{
  display:flex; gap:clamp(1.25rem,2.5vw,2rem); list-style:none; margin:0;
  padding:0 max(2rem, calc((100vw - 1200px) / 2));
  will-change:transform;
}
.timeline-card{
  flex:0 0 auto; width:min(80vw, 380px);
  background:linear-gradient(180deg, rgba(20,40,73,.5), rgba(9,22,37,.5));
  border:1px solid var(--border-subtle); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
}
/* Height scales with the viewport so the whole card always fits inside the
   pinned 100vh stage (no top/bottom clipping on shorter laptops). Each photo
   sets its own object-position so the important subject stays in frame. */
.timeline-card-media{ height:clamp(180px, 44vh, min(440px, calc(100vh - 440px))); overflow:hidden; }
.timeline-card-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.timeline-card-body{ padding:1.15rem 1.5rem 1.25rem; }
.timeline-step{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.8rem;
  letter-spacing:.1em; color:var(--gold-500);
}
.timeline-card-title{
  font-family:var(--font-display); font-size:1.45rem; font-weight:700;
  letter-spacing:-.02em; color:var(--white); margin:.2rem 0 .4rem;
}
.timeline-card-desc{ font-size:.95rem; line-height:1.55; color:var(--fg-secondary); }

/* Mobile: no pin — native horizontal swipe with snap */
@media (max-width:860px){
  .timeline{ height:auto !important; }
  .timeline-pin{ position:static; height:auto; padding:clamp(4rem,9vw,6rem) 0; }
  .timeline-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  .timeline-track{ transform:none !important; padding:1rem 1.25rem 1.5rem; }
  .timeline-card{ width:80vw; scroll-snap-align:center; }
}

/* ============================================================
   ABOUT — full-bleed band with overlay (boutique)
   ============================================================ */
.about-band{
  position:relative; min-height:82vh; display:flex; align-items:center;
  overflow:hidden; background:var(--navy-950);
}
.about-band-media{ position:absolute; inset:-14% 0; z-index:0; will-change:transform; }
.about-band-media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.about-band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,18,31,.92) 0%, rgba(6,18,31,.6) 48%, rgba(6,18,31,.2) 100%),
    linear-gradient(180deg, rgba(6,18,31,.4) 0%, transparent 40%, rgba(6,18,31,.6) 100%);
}
.about-band-inner{ position:relative; z-index:1; max-width:640px; }
.about-band-inner .body-lg{ color:var(--fg-secondary); margin-top:.5rem; }

/* Reduced motion — kill pins/parallax, keep content readable */
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none !important; }
  .reach-node{ opacity:1 !important; }
  .reach-dot{ transform:scale(1) !important; }
  .timeline-pin{ position:static; height:auto; }
  .timeline-viewport{ overflow-x:auto; }
  .timeline-track{ transform:none !important; }
}

/* ============================================================
   DOT FIELD — ambient floating gold particles (21st-inspired, vanilla canvas)
   Lives behind the content of the Signings hero + Instagram CTA to give the
   navy boxes life. Gold dots drift over the same navy; content sits on top.
   ============================================================ */
.dot-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
/* clip the dots to the box + lift the content above the canvas */
.page-hero{ overflow:hidden; }
.page-hero > .container{ position:relative; z-index:1; }
.cta-section{ position:relative; overflow:hidden; }
.cta-section > .cta-inner{ position:relative; z-index:1; }

/* ============================================================
   TEAM MAP — "Crossing oceans" dotted world + drawing gold arcs
   (our-team.html hero). Canvas fills the hero behind the title.
   ============================================================ */
.team-hero{ min-height:92vh; display:flex; align-items:center; padding-block:8rem 4rem; }
.team-map{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
/* radial navy lift behind the title so dots never fight legibility */
.team-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6,18,31,.55) 0%, rgba(6,18,31,0) 70%);
}
.team-hero > .container{ position:relative; z-index:1; width:100%; }
/* founder cards: cursor hints the map link */
.team-card[data-founder]{ cursor:default; }
@media (max-width:640px){ .team-hero{ min-height:78vh; } }

/* ============================================================
   FOUNDERS — cinematic feature switcher (our-team.html)
   Big colour portrait + clean navy text panel; switch founder
   from the row below (cross-fade). Text on clean bg = legible.
   ============================================================ */
.team-feature{ position:relative; background:var(--navy-950); padding-block:var(--space-24,6rem); }
.team-feature > .container{ position:relative; z-index:1; }
.founders-intro{ margin-bottom:3.5rem; }

/* stage: all slides share one grid cell, cross-fade between them */
.tf-stage{ display:grid; max-width:1140px; margin:0 auto 3.5rem; padding-inline:var(--container-x,1.5rem); }
.tf-slide{
  grid-area:1/1; display:grid; grid-template-columns:minmax(0,.82fr) 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.tf-slide.is-active{ opacity:1; transform:none; pointer-events:auto; }

/* portrait card — GSX marquee BEHIND the cut-out founder, gold frame */
.tf-media{
  position:relative; width:100%; max-width:400px; justify-self:center;
  aspect-ratio:3/4; border-radius:1.1rem; overflow:hidden;
  background:linear-gradient(160deg, #0e2238 0%, #0a1a2f 60%, #081627 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.tf-media img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;
  /* dissolve the lower body into the navy card so no hard cut shows */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 96%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 96%);
  transition:transform .4s cubic-bezier(.16,1,.3,1); will-change:transform;
}
.tf-media::after{ /* aligned gold hairline frame */
  content:""; position:absolute; inset:0; z-index:2;
  border:1px solid rgba(201,169,97,.55); border-radius:1.1rem; pointer-events:none;
}

/* GSX marquee inside the card (behind the founder) — tone-on-tone, slow */
.tf-media-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start; gap:.15rem; padding-block:.4rem;
  /* GSX only behind the upper body — fades out before the lower fade zone */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, transparent 72%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, transparent 72%);
}
.tf-bg-row{ overflow:hidden; }
.tf-bg-track{ display:inline-flex; width:max-content; will-change:transform; }
.tf-bg-track span{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,4.5vw,2.4rem);
  line-height:1.25; letter-spacing:.05em; white-space:nowrap; color:rgba(201,169,97,.20);
}
/* intercalate two golds row-by-row: stronger (~20%) and strongest (~34%) */
.tf-bg-row.rtl .tf-bg-track span{ color:rgba(201,169,97,.34); }
.tf-bg-row.ltr .tf-bg-track{ animation:tfMarqA 78s linear infinite; }
.tf-bg-row.rtl .tf-bg-track{ animation:tfMarqB 98s linear infinite; }
@keyframes tfMarqA{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tfMarqB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .tf-bg-track{ animation:none !important; } }

/* text panel — clean navy, fully legible */
.tf-text{ max-width:30rem; }
.tf-text .team-role{ color:var(--gold-400,#D4B978); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.tf-text .team-name{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(2rem,4vw,3.1rem); line-height:1.02; margin:.35rem 0 .45rem; }
.tf-text .team-territory{ display:block; color:var(--fg-secondary); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.15rem; }
.tf-text .team-bio{ color:#dfe5ee; font-size:1.04rem; line-height:1.62; margin-bottom:1.3rem; }
.tf-text .team-email{ display:inline-block; color:#fff; border-bottom:1px solid rgba(201,169,97,.6); padding-bottom:2px; font-size:.92rem; }
.tf-text .team-email:hover{ color:var(--gold-400,#D4B978); }

/* switcher row */
.tf-nav{ display:flex; gap:clamp(1rem,3vw,2.5rem); justify-content:center; flex-wrap:wrap; padding-inline:var(--container-x,1.5rem); }
.tf-dot{
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  background:none; border:0; cursor:pointer; opacity:.5; padding:0;
  transition:opacity .3s ease; -webkit-tap-highlight-color:transparent;
}
.tf-dot:hover{ opacity:.85; }
.tf-dot.is-active{ opacity:1; }
.tf-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.tf-thumb{
  width:66px; height:66px; border-radius:50%; overflow:hidden;
  border:2px solid transparent; transition:border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.tf-dot:hover .tf-thumb{ transform:translateY(-3px); }
.tf-dot.is-active .tf-thumb{ border-color:var(--accent); }
.tf-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.tf-dotname{ display:flex; flex-direction:column; align-items:center; line-height:1.2; font-family:var(--font-display); font-weight:600; color:#fff; font-size:.98rem; }
.tf-dotname small{ font-family:var(--font-body); font-weight:500; color:var(--fg-secondary); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; margin-top:.15rem; }
.tf-dot.is-active .tf-dotname small{ color:var(--gold-400,#D4B978); }

@media (prefers-reduced-motion: reduce){ .tf-slide, .tf-media img, .tf-thumb{ transition-duration:.001s; } }

@media (max-width:780px){
  .tf-slide{ grid-template-columns:1fr; gap:1.6rem; justify-items:center; text-align:center; }
  .tf-media{ max-width:280px; }
  .tf-text{ max-width:34rem; }
  .tf-text .team-email{ word-break:break-word; }
  .tf-nav{ gap:1.1rem; }
  .tf-thumb{ width:54px; height:54px; }
  .tf-dotname small{ display:none; }
}

/* ============================================================
   SIGNINGS — photo parallax inside each athlete frame + side rail
   ============================================================ */
/* parallax owns the picture transform (kill any transition so it doesn't fight
   the per-frame JS update). */
.athlete-media picture[data-parallax]{ inset:-10% 0; transition:none; transform:none; }

/* Reveal: the photo SLIDES IN from the side it sits on (left photo → from the
   left; reverse/right photo → from the right) instead of the clip curtain.
   Scoped to signings via [data-parallax-scene] so the home spotlight is untouched.
   The slide lives on .athlete-media (translateX); parallax lives on the inner
   <picture> (translateY) — different elements, no conflict. */
.athlete .athlete-media[data-parallax-scene].rv-clip{
  clip-path:none; opacity:0; transform:translateX(-8%);
  transition:opacity 1.5s var(--rv-ease,ease), transform 1.9s var(--rv-ease,ease);
  will-change:transform, opacity;
}
.athlete.reverse .athlete-media[data-parallax-scene].rv-clip{ transform:translateX(8%); }
.athlete .athlete-media[data-parallax-scene].rv-clip.is-in{ opacity:1; transform:none; }
/* drop rv-clip's inner zoom here so the motion reads purely as the slide-in */
.athlete .athlete-media[data-parallax-scene].rv-clip > picture > img{ transform:none; transition:none; }

/* slower, more deliberate reveal of each signing's text so it reads clearly */
.athlete[data-athlete] .rv-fade{ transition-duration:1.7s, 1.9s, 1.7s; }
.athlete[data-athlete] .rv-line-in{ transition-duration:2.1s; }

.signings-rail{
  position:fixed; left:2.25rem; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; align-items:flex-start; gap:1rem; pointer-events:none;
  transition:opacity .45s ease;
}
/* hidden before the first signing and once we've passed the last one (the CTA) */
.signings-rail.is-hidden{ opacity:0; pointer-events:none; }
.signings-rail-track{
  position:relative; width:2px; height:248px; flex:0 0 auto;
  background:rgba(255,255,255,.13); border-radius:2px; overflow:hidden;
}
.signings-rail-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500));
}
.signings-rail-list{
  list-style:none; margin:0; padding:0; height:248px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.signings-rail-item{
  display:flex; align-items:baseline; gap:.55rem;
  opacity:.4; transform:translateX(-3px);
  transition:opacity .35s var(--rv-ease,ease), transform .35s var(--rv-ease,ease);
}
.signings-rail-item.is-active{ opacity:1; transform:translateX(0); }
.signings-rail-num{ font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.7rem; letter-spacing:.12em; color:var(--gold-400); }
.signings-rail-name{ font-family:var(--font-display); font-size:.85rem; font-weight:600; letter-spacing:-.01em; color:var(--fg-secondary); }
.signings-rail-item.is-active .signings-rail-name{ color:var(--white); }
@media (max-width:1180px){ .signings-rail{ display:none; } }   /* hide where it would crowd content */

/* ============================================================
   SITE FOOTER — refined multi-column (premium)
   ============================================================ */
.site-footer {
  background: linear-gradient(180deg, var(--navy-950) 0%, #050d18 100%);
  border-top: 1px solid rgba(201,169,97,.18);   /* gold hairline (matches header) */
  padding: 5.5rem 0 2.25rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
  gap: 3rem 3.5rem;
  padding-bottom: 3.5rem;
}

/* brand */
.footer-brand { max-width: 36ch; }
.footer-logo {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: 2rem; letter-spacing: .01em; line-height: 1; color: var(--white);
  display: inline-block; transition: opacity .25s ease;
}
.footer-logo .x { color: var(--gold-500); }
.footer-logo:hover { opacity: .85; }
.footer-tagline { margin-top: 1.1rem; color: var(--fg-secondary); font-size: .95rem; line-height: 1.65; }
.footer-social { display: flex; gap: .75rem; margin-top: 1.85rem; }
.footer-social-link {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-subtle); color: var(--fg-secondary);
  transition: color .25s var(--ease-out,ease), border-color .25s var(--ease-out,ease),
              background .25s var(--ease-out,ease), transform .25s var(--ease-out,ease);
}
.footer-social-link svg { width: 19px; height: 19px; }
.footer-social-link:hover {
  color: var(--gold-400); border-color: rgba(201,169,97,.5);
  background: rgba(201,169,97,.08); transform: translateY(-2px);
}

/* link columns */
.footer-col h3 {
  font-family: var(--font-mono); font-size: .72rem; font-weight: var(--weight-bold);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-500);
  margin-bottom: 1.35rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.footer-col a {
  position: relative; display: inline-flex; align-items: center; gap: .6rem; width: fit-content;
  color: var(--fg-secondary); font-size: .94rem; line-height: 1.3;
  transition: color .25s var(--ease-out,ease);
}
.footer-col a:hover { color: var(--white); }
.footer-col a:not(.footer-ico)::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--rv-ease, ease);
}
.footer-col a:not(.footer-ico):hover::after { transform: scaleX(1); }
.footer-ico svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold-500); opacity: .85; transition: opacity .25s ease; }
.footer-ico:hover svg { opacity: 1; }

/* bottom bar */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-top: 2rem; border-top: 1px solid var(--border-subtle);
  font-size: .82rem; color: var(--fg-secondary);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: var(--fg-secondary); transition: color .25s ease; }
.footer-legal a:hover { color: var(--gold-400); }

@media (max-width: 860px) {
  .site-footer { padding: 4rem 0 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PROCESS FLYTHROUGH (full-support.html) — 2D camera-follow
   scrollytelling: a plane travels a gold route; the camera pans
   to keep it centred; step cards reveal at each node.
   ============================================================ */
.fly{ background:var(--navy-950); }
.fly-scroll{ position:relative; height:680vh; }
.fly-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.fly-world{ position:absolute; top:0; left:0; width:1800px; height:3000px; transform-origin:0 0; will-change:transform, opacity; }
.fly-svg{ position:absolute; top:0; left:0; width:1800px; height:3000px; overflow:visible; will-change:opacity; }
/* the sheet the paper plane unfolds into — lives in the SAME pin (seamless) */
.fly-pin .unfold-paper{ position:absolute; left:50%; top:50%; z-index:8; opacity:0; pointer-events:none;
  transform-origin:center center; transform:translate(-50%,-50%) scale(.5); }
.fly-pin .unfold-paper.is-open{ pointer-events:auto; }
.fly-path-bg{ fill:none; stroke:rgba(201,169,97,.12); stroke-width:3; stroke-linecap:round; stroke-dasharray:2 14; }
.fly-path{ fill:none; stroke:rgba(201,169,97,.9); stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(201,169,97,.45)); }

.fly-node{ position:absolute; width:0; height:0; z-index:2; }
.fly-dot{ position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--gold-500);
  box-shadow:0 0 0 6px rgba(201,169,97,.14), 0 0 26px rgba(201,169,97,.5); }
.fly-node.is-active .fly-dot{ box-shadow:0 0 0 9px rgba(201,169,97,.2), 0 0 34px rgba(201,169,97,.7); }

.fly-card{ position:absolute; top:0; width:372px; padding:1.4rem; border-radius:1rem;
  background:rgba(8,20,34,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border-subtle); box-shadow:0 30px 70px rgba(0,0,0,.55);
  opacity:0; transition:opacity .6s ease, transform .75s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.fly-node.right .fly-card{ left:56px; transform:translate(26px,-50%); }
.fly-node.left .fly-card{ left:-428px; transform:translate(-26px,-50%); }
.fly-node.center .fly-card{ left:-186px; transform:translate(0,calc(-50% + 18px)); }
.fly-node.is-in .fly-card{ opacity:1; pointer-events:auto; }
.fly-node.right.is-in .fly-card,.fly-node.left.is-in .fly-card{ transform:translate(0,-50%); }
.fly-node.center.is-in .fly-card{ transform:translate(0,-50%); }

.fly-num{ display:block; color:var(--gold-400,#D4B978); font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.fly-title{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.5rem; line-height:1.08; margin:.4rem 0 .5rem; }
.fly-desc{ color:var(--fg-secondary); font-size:.92rem; line-height:1.55; margin-bottom:1rem; }
.fly-media{ position:relative; border-radius:.7rem; overflow:hidden; aspect-ratio:4/3; }
.fly-media-video{ aspect-ratio:16/9; }   /* the step-5 clip is 16:9 — show it all, no crop */
.fly-media img,.fly-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.fly-play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(8,20,34,.6); border:1px solid rgba(201,169,97,.6); color:var(--gold-400,#D4B978); backdrop-filter:blur(4px); }

.fly-plane{ position:absolute; top:0; left:0; margin:-23px 0 0 -23px; color:var(--gold-500); z-index:5;
  filter:drop-shadow(0 0 10px rgba(201,169,97,.65)); will-change:transform; }

.fly-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.06); z-index:6; }
.fly-progress-fill{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-500),var(--gold-400,#D4B978)); }
.fly-hint{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:6;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-secondary); opacity:.7; transition:opacity .4s ease; white-space:nowrap; }
.fly.is-started .fly-hint{ opacity:0; }

@media (prefers-reduced-motion: reduce){ .fly-card{ transition-duration:.001s; } }

/* mobile / no-pin fallback: clean vertical timeline */
@media (max-width:860px){
  .fly-scroll{ height:auto; }
  .fly-pin{ position:static; height:auto; overflow:visible; padding:1rem 0 2rem; }
  .fly-world{ position:static; width:auto; height:auto; transform:none!important;
    display:flex; flex-direction:column; gap:2.4rem; padding:0 1.2rem; max-width:560px; margin-inline:auto; }
  .fly-svg, .fly-plane, .fly-progress, .fly-hint{ display:none; }
  .fly-node{ position:relative!important; left:auto!important; top:auto!important; width:auto; height:auto;
    padding-left:1.6rem; border-left:2px solid rgba(201,169,97,.3); }
  .fly-dot{ left:-10px; top:4px; }
  .fly-card{ position:static!important; width:auto; opacity:1!important; transform:none!important; pointer-events:auto;
    background:rgba(8,20,34,.6); }
  .fly-pin .unfold-paper{ position:static!important; left:auto; top:auto; opacity:1!important; transform:none!important;
    width:auto; margin:2.4rem 1.2rem 0; pointer-events:auto; }
}

/* ============================================================
   DOSSIER — paper-plane unfolds into a sheet of detail
   (full-support.html, after the flythrough). Varied + interactive.
   ============================================================ */
.dossier{ position:relative; background:var(--navy-950); }
.unfold-scroll{ position:relative; height:180vh; }
.unfold-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; perspective:1400px; padding:1.5rem; }
.unfold-paper{
  position:relative; width:min(1040px,94vw); border-radius:1.4rem; overflow:hidden;
  background:linear-gradient(160deg,#16294a 0%,#102139 60%,#0c1c30 100%);
  border:1px solid rgba(201,169,97,.45);
  box-shadow:0 50px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(2.4rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
  transform-origin:center top; will-change:transform,opacity;
}
.unfold-paper::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(201,169,97,.22),transparent); }
.unfold-watermark{ position:absolute; right:-2%; bottom:-14%; font-family:var(--font-display); font-weight:800; font-size:clamp(8rem,22vw,17rem); color:rgba(201,169,97,.05); pointer-events:none; line-height:1; }
.unfold-inner{ position:relative; z-index:1; }
.unfold-cue{ display:block; margin-top:2rem; text-align:center; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-secondary); opacity:.55; }

.dossier-body{ padding-block:clamp(3rem,7vw,6rem) clamp(4rem,9vw,7rem); display:flex; flex-direction:column; gap:clamp(3.5rem,8vw,6.5rem); }
.dsr-h{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1; margin-bottom:1.6rem; }
.dsr-h .hl{ color:var(--gold-400,#D4B978); }

/* timeline */
.tl{ list-style:none; position:relative; }
.tl::before{ content:""; position:absolute; left:6px; top:8px; bottom:22px; width:2px; background:linear-gradient(rgba(201,169,97,.55),rgba(201,169,97,.08)); }
.tl-item{ position:relative; padding:0 0 1.5rem 2.3rem; }
.tl-item::before{ content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 4px rgba(201,169,97,.14); }
.tl-when{ display:block; color:var(--gold-400,#D4B978); font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.tl-what{ display:block; color:#fff; font-size:1.06rem; margin-top:.18rem; }

/* numbers */
.dsr-numbers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding-block:2.6rem; }
.dsr-stat-num{ display:block; font-family:var(--font-display); font-weight:800; color:var(--gold-400,#D4B978); font-size:clamp(1.9rem,3.6vw,3.2rem); line-height:1; }
.dsr-stat-label{ display:block; margin-top:.55rem; color:var(--fg-secondary); font-size:.84rem; }

/* guarantees */
.dsr-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.dsr-card{ background:rgba(255,255,255,.03); border:1px solid var(--border-subtle); border-radius:1rem; padding:1.6rem;
  transition:border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), background .3s ease; }
.dsr-card:hover{ border-color:rgba(201,169,97,.5); transform:translateY(-4px); background:rgba(201,169,97,.06); }
.dsr-card-k{ display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); color:var(--gold-400,#D4B978); font-size:.8rem; margin-bottom:.6rem; }
.dsr-card p{ color:#dfe5ee; line-height:1.55; }
.dsr-card strong{ color:#fff; font-weight:600; }

/* faq accordion */
.faq{ border-top:1px solid var(--border-subtle); }
.faq-item{ border-bottom:1px solid var(--border-subtle); }
.faq-item > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:1.3rem 0; font-family:var(--font-display); font-weight:600; color:#fff; font-size:1.05rem; }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item:hover > summary{ color:var(--gold-400,#D4B978); }
.faq-ic{ position:relative; width:16px; height:16px; flex:none; }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:var(--gold-500); border-radius:2px; }
.faq-ic::before{ left:0; top:7px; width:16px; height:2px; }
.faq-ic::after{ left:7px; top:0; width:2px; height:16px; transition:transform .3s ease; }
.faq-item[open] .faq-ic::after{ transform:scaleY(0); }
.faq-a{ padding:0 0 1.4rem; color:var(--fg-secondary); line-height:1.62; max-width:64ch; }
.faq-item[open] .faq-a{ animation:faqIn .4s cubic-bezier(.16,1,.3,1) both; }
.faq-a em{ font-style:normal; color:var(--gold-400,#D4B978); opacity:.85; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.proc-detail-intro{ margin-bottom:2.5rem; }

@media (max-width:760px){
  .unfold-scroll{ height:auto; }
  .unfold-pin{ position:static; height:auto; padding:3rem 1rem; }
  .unfold-paper{ transform:none!important; opacity:1!important; }
  .dsr-numbers{ grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
  .dsr-cards{ grid-template-columns:1fr; }
}

/* ============================================================
   OPS — operational breakdown, interactive accordion (navy)
   Replaces the old cream cards+modals. Reuses .faq accordion.
   ============================================================ */
.ops{ background:var(--navy-950); padding-block:clamp(3.5rem,8vw,6rem); }
.ops-intro{ margin-bottom:2.5rem; }
.ops-acc{ border-top:1px solid var(--border-subtle); }
.ops-item > summary{ padding:1.5rem 0; gap:1.4rem; }
.ops-num{ font-family:var(--font-display); font-weight:800; color:rgba(201,169,97,.55); font-size:1.5rem; line-height:1; min-width:2.6rem; }
.ops-title{ flex:1; font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.1rem,2.1vw,1.55rem); }
.ops-item[open] .ops-num{ color:var(--gold-400,#D4B978); }
.ops-item:hover .ops-title{ color:var(--gold-400,#D4B978); }
.ops-desc{ color:var(--fg-secondary); line-height:1.6; max-width:64ch; margin-bottom:1.5rem; }
.ops-subs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.ops-sub{ background:rgba(255,255,255,.03); border:1px solid var(--border-subtle); border-radius:.85rem; padding:1.3rem; transition:border-color .3s ease, background .3s ease; }
.ops-sub:hover{ border-color:rgba(201,169,97,.4); background:rgba(201,169,97,.05); }
.ops-sub-h{ display:block; font-family:var(--font-display); font-weight:600; color:#fff; font-size:1rem; margin-bottom:.55rem; }
.ops-sub-k{ display:inline-block; color:var(--gold-400,#D4B978); font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.7rem; letter-spacing:.08em; margin-right:.5rem; }
.ops-sub-d{ color:var(--fg-secondary); font-size:.86rem; line-height:1.5; margin-bottom:.8rem; }
.ops-list{ list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.ops-list li{ position:relative; padding-left:1rem; color:#cfd6e2; font-size:.82rem; line-height:1.45; }
.ops-list li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--gold-500); }
.ops-list strong{ color:#fff; font-weight:600; }
@media (max-width:860px){ .ops-subs{ grid-template-columns:1fr; } }

/* fold-open polish: hide panel content until open; show a centre crease while folding */
.fly-pin .unfold-paper .unfold-inner{ opacity:0; transition:opacity .45s ease; }
.fly-pin .unfold-paper.is-open .unfold-inner{ opacity:1; }
.fly-pin .unfold-paper::after{ content:""; position:absolute; left:50%; top:6%; bottom:6%; width:1px; transform:translateX(-50%);
  background:linear-gradient(rgba(201,169,97,0), rgba(201,169,97,.5), rgba(201,169,97,0)); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.fly-pin .unfold-paper.is-folding::after{ opacity:1; }

/* origami facets + crease lines on the unfolding paper (fade out when flat) */
.fly-pin .unfold-paper .unfold-facets{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .5s ease;
  background:conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,.16) 12.5%, rgba(255,255,255,.06) 25%, rgba(0,0,0,.16) 37.5%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.16) 62.5%, rgba(255,255,255,.06) 75%, rgba(0,0,0,.16) 87.5%, rgba(255,255,255,.06)); mix-blend-mode:overlay; }
.fly-pin .unfold-paper .unfold-creases{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.fly-pin .unfold-paper .unfold-creases line{ stroke:rgba(201,169,97,.4); stroke-width:.4; vector-effect:non-scaling-stroke; }
.fly-pin .unfold-paper:not(.is-open) .unfold-facets,.fly-pin .unfold-paper:not(.is-open) .unfold-creases{ opacity:1; }
/* mobile: hide origami extras (paper is static) */
@media (max-width:860px){ .unfold-facets,.unfold-creases{ display:none; } }

/* origami transition image-sequence canvas (scrubbed, smooth) */
.fly-tcanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:7; opacity:0; pointer-events:none; transition:opacity .3s ease; background:var(--navy-950); }
.fly-tcanvas.is-on{ opacity:1; }
@media (max-width:860px){ .fly-tcanvas{ display:none; } }

/* HERO moving gold lines background (21st-style, full hero section) */
.page-hero.hero-lines{ position:relative; overflow:hidden; }
.page-hero.hero-lines > .container{ position:relative; z-index:1; }
.page-hero.hero-lines::before{
  content:""; position:absolute; inset:-80px; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(201,169,97,.11) 0 1.5px, transparent 1.5px 44px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 35%, transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 45%, #000 35%, transparent 80%);
  animation:heroLines 13s linear infinite; will-change:transform;
}
@keyframes heroLines{ from{ transform:translate(0,0); } to{ transform:translate(39.9px,18.6px); } }
@media (prefers-reduced-motion: reduce){ .page-hero.hero-lines::before{ animation:none; } }

/* AURORA background — Process page, all sections EXCEPT the flythrough (.fly) */
.proc-aurora{ background:var(--navy-950); }
.proc-aurora main{ position:relative; z-index:1; }
.proc-aurora .aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--navy-950); }
.proc-aurora .aurora::before,.proc-aurora .aurora::after{ content:""; position:absolute; inset:-40%; filter:blur(50px); will-change:transform; }
.proc-aurora .aurora::before{
  background:radial-gradient(45% 55% at 20% 25%, rgba(201,169,97,.55), transparent 60%),
            radial-gradient(50% 60% at 82% 18%, rgba(46,86,150,.75), transparent 60%),
            radial-gradient(55% 65% at 65% 85%, rgba(201,169,97,.40), transparent 60%);
  opacity:1; animation:auroraA 26s ease-in-out infinite alternate; }
.proc-aurora .aurora::after{
  background:radial-gradient(45% 55% at 82% 68%, rgba(212,185,120,.50), transparent 60%),
            radial-gradient(50% 60% at 22% 78%, rgba(36,70,128,.7), transparent 60%),
            radial-gradient(40% 50% at 50% 8%, rgba(201,169,97,.32), transparent 60%);
  opacity:.95; animation:auroraB 32s ease-in-out infinite alternate; }
@keyframes auroraA{ from{ transform:translate3d(-3%,-2%,0) rotate(0deg); } to{ transform:translate3d(4%,3%,0) rotate(10deg); } }
@keyframes auroraB{ from{ transform:translate3d(3%,2%,0) rotate(0deg); } to{ transform:translate3d(-4%,-3%,0) rotate(-8deg); } }
.proc-aurora .page-hero,.proc-aurora .dossier,.proc-aurora .ops{ background:transparent; }
.proc-aurora .fly{ background:var(--navy-950); position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .proc-aurora .aurora::before,.proc-aurora .aurora::after{ animation:none; } }

/* CONTACT — breathing radial glow bg (21st-style) + region picker + trust badge */
.contact-page{ background:var(--navy-950); }
.contact-glow{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:radial-gradient(125% 80% at 50% -12%, #0c2038 0%, #06121F 55%); }
.contact-glow::after{ content:""; position:absolute; left:50%; bottom:-35%; width:150%; height:95%; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 100%, rgba(201,169,97,.5) 0%, rgba(46,86,150,.32) 38%, transparent 68%);
  filter:blur(40px); animation:contactBreathe 8s ease-in-out infinite; will-change:transform,opacity; }
@keyframes contactBreathe{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.8; } 50%{ transform:translateX(-50%) scale(1.09); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .contact-glow::after{ animation:none; } }

/* region picker (your co-founder by region) */
.region-pick{ display:flex; flex-direction:column; gap:1rem; }
.region-eyebrow{ font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400,#D4B978); }
.region-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.region-tab{ cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--border-subtle); border-radius:.6rem;
  padding:.5rem .8rem; color:var(--fg-secondary); font-family:var(--font-body); font-size:.82rem; font-weight:500;
  transition:border-color .25s ease, color .25s ease, background .25s ease; }
.region-tab:hover{ border-color:rgba(201,169,97,.45); color:#fff; }
.region-tab.is-active{ border-color:var(--accent); background:rgba(201,169,97,.1); color:#fff; }
.region-founder{ display:flex; align-items:center; gap:.9rem; padding-top:.3rem; }
.region-ava{ width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid rgba(201,169,97,.45); flex:none; transition:opacity .3s ease; }
.region-who{ display:flex; flex-direction:column; }
.region-name{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem; }
.region-role{ color:var(--fg-secondary); font-size:.82rem; letter-spacing:.03em; }

/* trust badge */
.trust-badge{ display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem;
  font-size:.74rem; letter-spacing:.03em; color:var(--fg-secondary);
  border:1px solid var(--border-subtle); border-radius:999px; padding:.42rem .85rem; background:rgba(255,255,255,.03); }
.trust-badge .tb-dot{ width:7px; height:7px; border-radius:50%; background:#5fcf8e; box-shadow:0 0 8px rgba(95,207,142,.8); }
.trust-badge .tb-sep{ color:rgba(255,255,255,.25); }

/* ===== FORM SUCCESS / ERROR (contact enhancer) ===== */
.form-result{ text-align:center; padding:3rem 2rem; border:1px solid var(--border-gold);
  border-radius:20px; background:linear-gradient(180deg,rgba(201,169,97,.08),rgba(255,255,255,.02));
  animation:formIn .6s cubic-bezier(.16,1,.3,1) both; }
.form-result-mark{ width:56px; height:56px; margin:0 auto 1.25rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.5rem; font-weight:700; color:var(--navy-900);
  background:linear-gradient(135deg,#E8CE82,#C9A961); box-shadow:0 10px 28px rgba(201,169,97,.35); }
.form-result h3{ font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--accent); margin-bottom:.6rem; }
.form-result p{ color:var(--fg-secondary); max-width:34ch; margin:0 auto; line-height:1.55; }
.form-error{ margin-top:.85rem; color:#ff8a8a; font-size:.85rem; }
@keyframes formIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }