:root {
  /* Brand colors — match Figma */
  --color-cyan: #27e3ff;
  --color-cyan-bright: #27e3ff;
  --color-cyan-dark: #27e3ff;
  --color-dark: #0a0a0a;
  --color-dark-charcoal: #121212;
  --color-dark-gray: #1c1c1c;
  --color-tab-inactive: #2a2a2a;
  --color-light-bg: #e5e5e5;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-text: #4d4d4d;
  --color-gray-muted: #808080;
  --color-gray-watermark: #d4d4d4;
  --color-rail-text-light: #1a1a1a;

  /* Typography — Montserrat per Figma */
  --font-primary: 'Montserrat', sans-serif;

  /* ── Layout grid — rail + label + content must never overlap ── */
  --nav-height: 100px;
  --section-rail-left: 98px;
  --section-rail-width: 90px;
  --section-rail-label-inset: 10px;
  --section-rail-label-max: 88px;
  --section-rail-gap: 14px;
  --section-rail-dot-top: 140px;
  --section-rail-label-top: 158px;
  --section-rail-label-height: 52px;

  /* Left edge of main content — clears rail line + label text */
  --content-offset: calc(
    var(--section-rail-left) +
    var(--section-rail-label-inset) +
    var(--section-rail-label-max) +
    var(--section-rail-gap)
  );

  /* Minimum top padding so headings sit below the rail label block */
  --section-content-min-top: calc(
    var(--section-rail-label-top) +
    var(--section-rail-label-height) +
    28px
  );

  --content-max-width: 1440px;
  --content-padding: 80px;

  /* Type scale at 1440px */
  --text-hero: 72px;
  --text-hero-sub: 18px;
  --text-section-heading: 44px;
  --text-body: 15px;
  --text-nav: 11px;
  --text-rail: 11px;
  --text-stat: 44px;
  --text-tab: 12px;
  --text-watermark: 132px;
  --text-video: 48px;

  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s ease;
}

/* iPad landscape / small laptop */
@media (max-width: 1024px) {
  :root {
    --content-padding: 40px;
    --section-rail-left: 44px;
    --section-rail-label-max: 40px;
    --section-rail-gap: 16px;
    --section-rail-dot-top: 108px;
    --section-rail-label-top: 126px;
    --section-rail-label-height: 22px;
    --text-hero: 56px;
    --text-section-heading: 40px;
    --text-watermark: 96px;
    --text-stat: 40px;
  }
}

/* iPad portrait */
@media (max-width: 768px) {
  :root {
    --content-padding: 28px;
    --section-rail-left: 28px;
    --section-rail-label-max: 36px;
    --section-rail-gap: 14px;
    --section-rail-dot-top: 96px;
    --section-rail-label-top: 112px;
    --section-rail-label-height: 18px;
    --nav-height: 72px;
    --text-hero: 40px;
    --text-section-heading: 32px;
    --text-watermark: 72px;
    --text-stat: 36px;
  }
}

/* Phone */
@media (max-width: 480px) {
  :root {
    --content-padding: 20px;
    --section-rail-left: 20px;
    --section-rail-width: 44px;
    --section-rail-label-max: 28px;
    --section-rail-gap: 12px;
    --section-rail-dot-top: 88px;
    --section-rail-label-top: 104px;
    --section-rail-label-height: 16px;
    --text-stat: 32px;
  }
}