/* ==========================================================================
   ACCELERATED PILOT — DESIGN SYSTEM
   Inter / Public Sans / DM Mono — institutional precision
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — loaded locally, works offline and on file:// URLs
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Variable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary brand palette */
  --color-navy: #343d63;
  --color-navy-deep: #252c4a;
  --color-navy-soft: #4a5478;
  --color-cyan: #64e8f2;
  --color-cyan-deep: #2db8c3;
  --color-light-grey: #e0e0e0;

  /* Secondary palette */
  --color-white: #ffffff;
  --color-cream: #fff8ed;
  --color-cream-deep: #faeed9;
  --color-yellow: #fee60e;
  --color-green: #6ace8d;
  --color-coral: #b96068;
  --color-tan: #c99672;
  --color-sage: #838d77;
  --color-dark-grey: #333333;

  /* Functional */
  --color-bg: var(--color-white);
  --color-bg-muted: #f7f8fa;
  --color-bg-navy: var(--color-navy);
  --color-bg-navy-deep: var(--color-navy-deep);
  
  --color-text: #0a1033;
  --color-text-body: #1d2340;
  --color-text-muted: #5a6280;
  --color-text-subtle: #8890a8;
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.78);
  --color-text-inverse-subtle: rgba(255, 255, 255, 0.55);
  
  --color-border: #dfe3ec;
  --color-border-strong: #c2c9d8;
  --color-border-navy: rgba(255, 255, 255, 0.14);
  --color-border-navy-strong: rgba(255, 255, 255, 0.28);
  
  --color-link: var(--color-navy);
  --color-accent: var(--color-cyan);
  --color-accent-deep: var(--color-cyan-deep);

  /* Typography — NASA Horizon Design System */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;

  /* Type scale — substantial, readable, authoritative */
  --size-xxs: 0.8125rem;   /* 13px */
  --size-xs: 0.9375rem;    /* 15px */
  --size-sm: 1.0625rem;    /* 17px */
  --size-base: 1.3125rem;  /* 21px — body */
  --size-md: 1.5rem;       /* 24px */
  --size-lg: 1.75rem;      /* 28px */
  --size-xl: 2.25rem;      /* 36px */
  --size-2xl: 3rem;        /* 48px */
  --size-3xl: 4rem;        /* 64px */
  --size-4xl: 5.5rem;      /* 88px */
  --size-5xl: 7.5rem;      /* 120px */
  --size-display: 10rem;   /* 160px — hero */
  --size-mega: 12rem;      /* 192px — rare display */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-base: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tighter: -0.025em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.18em;

  /* Weights */
  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 9rem;
  --space-6xl: 12rem;
  --space-7xl: 16rem;

  /* Widths */
  --max-width-reading: 44rem;
  --max-width-content: 72rem;
  --max-width-wide: 88rem;
  --max-width-full: 100rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 16, 51, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 16, 51, 0.06);
  --shadow-lg: 0 16px 48px rgba(10, 16, 51, 0.09);
  --shadow-xl: 0 32px 64px rgba(10, 16, 51, 0.14);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-base: 350ms var(--ease-out);
  --transition-slow: 600ms var(--ease-out);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); }
ul, ol { list-style: none; }
::selection { background: var(--color-cyan); color: var(--color-navy); }

/* ==========================================================================
   TYPOGRAPHY
   Inter for display & UI · Public Sans for body · DM Mono for technical
   ========================================================================== */

/* DISPLAY — Inter at heavy weights for authority */
.display-mega {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, var(--size-mega));
  line-height: 0.9;
  letter-spacing: var(--tracking-tightest);
  color: var(--color-text);
  font-weight: var(--weight-black);
}

.display-hero {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 9.9vw, 9rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-tightest);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.display-section {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, var(--size-4xl));
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.display-sub {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--size-3xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

/* HEADINGS — Inter */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, var(--size-2xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, var(--size-xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* BODY — Public Sans */
p {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

p + p { margin-top: var(--space-lg); }

.lead {
  font-family: var(--font-body);
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  font-weight: var(--weight-regular);
}

.lead-lg {
  font-family: var(--font-body);
  font-size: var(--size-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  font-weight: var(--weight-light);
}

.small-text {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* MONO — DM Mono for technical/metadata */
.mono {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.mono-lg {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

/* EYEBROW — small uppercase label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-xl);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--color-accent-deep);
}

.eyebrow.no-rule::before { display: none; }

/* SECTION NUMBER — "001 / NAVIGATION" style */
.section-number {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  text-transform: uppercase;
}

.section-number-digit {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.section-number-rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  max-width: 8rem;
}

/* PROSE */
.prose {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.prose p { margin-bottom: var(--space-lg); }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-3xl); margin-bottom: var(--space-lg); font-family: var(--font-display); }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: var(--space-lg) 0; padding-left: 0; }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-md);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 1.25rem;
  height: 1px;
  background-color: var(--color-accent-deep);
}
.prose ol { counter-reset: ol-counter; }
.prose ol li {
  counter-increment: ol-counter;
  padding-left: 3rem;
  position: relative;
  margin-bottom: var(--space-md);
}
.prose ol li::before {
  content: counter(ol-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-accent-deep);
  font-weight: var(--weight-medium);
}
.prose blockquote {
  margin: var(--space-2xl) 0;
  padding: 0 0 0 var(--space-xl);
  border-left: 2px solid var(--color-accent);
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  font-weight: var(--weight-regular);
}
.prose strong { font-weight: var(--weight-semibold); color: var(--color-text); }
.prose em { font-style: italic; }
.prose a {
  color: var(--color-navy);
  background-image: linear-gradient(transparent 68%, var(--color-cyan) 68%);
  background-size: 100% 100%;
  transition: background-size var(--transition-base);
  padding: 0 2px;
}
.prose a:hover { background-size: 100% 50%; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container-content {
  width: 100%;
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container-reading {
  width: 100%;
  max-width: var(--max-width-reading);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

@media (min-width: 768px) {
  .container, .container-content, .container-reading {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
  }
}

.section { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }
.section-lg { padding-top: var(--space-6xl); padding-bottom: var(--space-6xl); }
.section-sm { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

/* Background variants */
.bg-white { background-color: var(--color-white); }
.bg-muted { background-color: var(--color-bg-muted); }
.bg-navy { background-color: var(--color-navy); color: var(--color-text-inverse); }
.bg-navy-deep { background-color: var(--color-navy-deep); color: var(--color-text-inverse); }

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5,
.bg-navy-deep h1, .bg-navy-deep h2, .bg-navy-deep h3, .bg-navy-deep h4, .bg-navy-deep h5,
.bg-navy .display-mega, .bg-navy .display-hero, .bg-navy .display-section, .bg-navy .display-sub,
.bg-navy-deep .display-mega, .bg-navy-deep .display-hero, .bg-navy-deep .display-section, .bg-navy-deep .display-sub,
.bg-navy .lead, .bg-navy .lead-lg, .bg-navy-deep .lead, .bg-navy-deep .lead-lg { color: var(--color-text-inverse); }

.bg-navy p, .bg-navy-deep p { color: var(--color-text-inverse-muted); }
.bg-navy .eyebrow, .bg-navy-deep .eyebrow { color: var(--color-cyan); }
.bg-navy .eyebrow::before, .bg-navy-deep .eyebrow::before { background: var(--color-cyan); }
.bg-navy .section-number, .bg-navy-deep .section-number { color: var(--color-text-inverse-subtle); }
.bg-navy .section-number-digit, .bg-navy-deep .section-number-digit { color: var(--color-cyan); }
.bg-navy .mono, .bg-navy .mono-sm, .bg-navy-deep .mono, .bg-navy-deep .mono-sm { color: var(--color-text-inverse-muted); }

/* Horizon rules */
.horizon {
  height: 1px;
  background: var(--color-border);
}

.horizon-full {
  height: 1px;
  background: var(--color-border-strong);
}

.horizon-accent {
  height: 2px;
  width: 4rem;
  background: var(--color-accent);
}

.horizon-gradient {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent 100%);
}

/* Section header patterns */
.section-header {
  margin-bottom: var(--space-4xl);
  max-width: var(--max-width-content);
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header.center .eyebrow,
.section-header.center .section-number {
  justify-content: center;
}

.section-header .display-section + p,
.section-header h2 + p {
  margin-top: var(--space-xl);
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 44rem;
}

.section-header.center .display-section + p,
.section-header.center h2 + p {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.125rem 2rem;
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  position: relative;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn-primary:hover {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
}

.btn-accent {
  background-color: var(--color-cyan);
  color: var(--color-navy);
  border-color: var(--color-cyan);
  font-weight: var(--weight-bold);
}

.btn-accent:hover {
  background-color: var(--color-cyan-deep);
  border-color: var(--color-cyan-deep);
  color: var(--color-white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-navy);
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Dark background variants */
.bg-navy .btn-primary, .bg-navy-deep .btn-primary {
  background-color: var(--color-cyan);
  color: var(--color-navy);
  border-color: var(--color-cyan);
}

.bg-navy .btn-primary:hover, .bg-navy-deep .btn-primary:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
}

.bg-navy .btn-secondary, .bg-navy-deep .btn-secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.3);
}

.bg-navy .btn-secondary:hover, .bg-navy-deep .btn-secondary:hover {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-navy);
}

.btn-lg {
  padding: 1.375rem 2.5rem;
  font-size: var(--size-base);
}

.btn-sm {
  padding: 0.875rem 1.5rem;
  font-size: var(--size-xs);
}

/* Text link button */
.btn-link {
  background: none;
  padding: 0;
  border: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  transition: color var(--transition-fast);
  letter-spacing: var(--tracking-tight);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

.btn-link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--transition-base);
  font-weight: var(--weight-regular);
}

.btn-link:hover { color: var(--color-accent-deep); }
.btn-link:hover::after { transform: translateX(6px); }

.bg-navy .btn-link,
.bg-navy-deep .btn-link,
.hero-with-media .btn-link {
  color: var(--color-cyan);
  border-bottom-color: var(--color-cyan);
}

.bg-navy .btn-link:hover,
.bg-navy-deep .btn-link:hover,
.hero-with-media .btn-link:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group { margin-bottom: var(--space-xl); }

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}

.form-label.required::after {
  content: " *";
  color: var(--color-coral);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.875rem 0;
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  border-radius: 0;
  transition: border-color var(--transition-fast);
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--color-text-subtle);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

.form-textarea { min-height: 7rem; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23343d63' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 2rem;
}

.form-help {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}

.form-inline {
  display: flex;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border-strong);
  transition: border-bottom-color var(--transition-fast);
}

.form-inline:focus-within {
  border-bottom-color: var(--color-navy);
  border-bottom-width: 2px;
}

.form-inline .form-input {
  flex: 1;
  border-bottom: none;
  min-width: 200px;
  padding: 1rem 0;
}

.form-inline .form-input:focus {
  border-bottom: none;
  margin-bottom: 0;
}

.form-inline .btn { flex-shrink: 0; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
}

.card-feature {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.card-feature:hover {
  border-color: var(--color-navy);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-feature-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-muted);
  overflow: hidden;
  position: relative;
}

/* Photo version of the card image — fills the 4:3 container, no distortion */
.card-feature-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Variant: "contain" display for product renders / mockups that need to show
   the whole object without cropping. Used with card-feature-image-contain. */
.card-feature-image-contain {
  background-color: var(--color-cream, #FAF9F6);
}

.card-feature-photo-contain {
  object-fit: contain;
}

.card-feature-meta {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}

.card-feature-status {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: 2px;
}

.card-feature-status.available {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.card-feature-status.coming-soon {
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.card-feature-number {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.375rem 0.625rem;
  border-radius: 2px;
}

.card-feature-content {
  padding: var(--space-2xl);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-feature-category {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-md);
}

.card-feature h3 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.card-feature-description {
  color: var(--color-text-body);
  margin-bottom: var(--space-xl);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
}

.card-feature-link { align-self: flex-start; }

/* Component card — numbered */
.card-component {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border-strong);
  position: relative;
}

.card-component-number {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-lg);
  display: block;
  text-transform: uppercase;
}

.card-component h4 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-md);
  line-height: var(--leading-snug);
}

.card-component p {
  font-size: var(--size-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   NUMBERED EDITORIAL CARD (.card-numbered)
   --------------------------------------------------------------------------
   Used on the Curriculum page Section 5 ("What every course includes") to
   present the four-component structure (Instruction / Practice / Habit /
   Record) without imagery. Solo sales page uses warm photographic cards
   for the same four components — those images carry emotional weight there
   and are deliberately not reused here so the curriculum page reads as a
   structural catalog rather than a sales pitch.

   Visual register: typographic, austere, editorial. Big mono numeral
   anchors each card; cyan rule signals the brand; category label, title,
   italic tagline, and prose stack in clean hierarchy. White cards on the
   muted page background so they still read as discrete objects.
   ========================================================================== */
.card-numbered {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: all var(--transition-base);
}

.card-numbered:hover {
  border-color: var(--color-navy);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Big mono numeral — same family as section-number-digit elsewhere on the
   site, scaled up a touch since it's the lead visual element on the card. */
.card-numbered-numeral {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
  display: block;
}

/* Short cyan accent rule between numeral and category label.
   Picks up the .horizon-accent treatment used elsewhere for visual
   continuity with the rest of the site. */
.card-numbered-rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-cyan);
  margin-bottom: var(--space-lg);
}

.card-numbered-category {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-md);
}

.card-numbered h3 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.card-numbered-tagline {
  font-style: italic;
  color: var(--color-text-body);
  margin-bottom: var(--space-lg);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
}

.card-numbered-description {
  color: var(--color-text-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.card-numbered-description:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 2.5rem; width: auto; }

@media (min-width: 768px) {
  .site-logo img { height: 2.75rem; }
}

.site-nav { display: none; }

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex: 1;
    justify-content: center;
  }
}

.site-nav-link {
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  position: relative;
  padding: var(--space-sm) 0;
  transition: color var(--transition-fast);
}

.site-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background-color: var(--color-accent-deep);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition-base);
}

.site-nav-link:hover::after, .site-nav-link.active::after {
  transform-origin: left center;
  transform: scaleX(1);
}

.site-nav-link:hover { color: var(--color-navy); }

.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-sm);
  min-width: 22rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  margin-top: var(--space-md);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md);
  color: var(--color-text);
  font-size: var(--size-sm);
  transition: background-color var(--transition-fast);
}

.nav-dropdown-item:hover { background-color: var(--color-bg-muted); }

.nav-dropdown-item-label {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

.nav-dropdown-item-status {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav-cta { flex-shrink: 0; }

/* Hide the inline "Start Training" CTA on mobile. The mobile menu already has
   it as a full-width button at the bottom, so having it in the header row too
   would crowd the hamburger off-screen. */
@media (max-width: 1023px) {
  .site-nav-cta { display: none; }
}

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

.mobile-menu-toggle span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-navy);
  position: relative;
  transition: all var(--transition-base);
}

.mobile-menu-toggle span::before, .mobile-menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-navy);
  transition: all var(--transition-base);
}

.mobile-menu-toggle span::before { top: -7px; }
.mobile-menu-toggle span::after { top: 7px; }

.mobile-menu-toggle[aria-expanded="true"] span { background-color: transparent; }
.mobile-menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.mobile-menu[aria-hidden="false"] { display: block; }

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-xl);
}

.mobile-menu-link {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: var(--tracking-tight);
}

/* Mobile menu CTA — force full-width, block-level, below the nav list */
.mobile-menu-cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-xl);
  white-space: normal;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-text-inverse);
  padding: var(--space-5xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--color-cyan) 50%, transparent 100%);
}

.site-footer a {
  color: var(--color-text-inverse-muted);
  transition: color var(--transition-fast);
}

.site-footer a:hover { color: var(--color-cyan); }

.footer-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, var(--size-4xl));
  line-height: 0.95;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  max-width: 28rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-4xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--color-border-navy);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.footer-brand-mark {
  margin-bottom: var(--space-md);
  max-width: 14rem;
  filter: brightness(0) invert(1);
}

.footer-coordinates {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-cyan);
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-lg);
  opacity: 0.8;
  text-transform: uppercase;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  color: var(--color-cyan);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-list li {
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.footer-contact {
  color: var(--color-text-inverse-muted);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
  font-style: normal;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-text-inverse-subtle);
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-4xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-navy);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .footer-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--space-6xl) 0 var(--space-5xl);
  overflow: hidden;
}

.hero-large { padding: var(--space-7xl) 0 var(--space-6xl); }
.hero-content { max-width: var(--max-width-wide); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-3xl);
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero-meta-rule {
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  align-items: center;
}

/* ==========================================================================
   GRIDS
   ========================================================================== */

.grid { display: grid; gap: var(--space-xl); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.grid-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .grid-editorial {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
  }
}

/* ==========================================================================
   IMAGE PLACEHOLDERS
   ========================================================================== */

.image-placeholder {
  background: var(--color-bg-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2xl);
  min-height: 240px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.image-placeholder::before {
  content: "";
  position: absolute;
  inset: var(--space-md);
  border: 1px dashed var(--color-border-strong);
  pointer-events: none;
}

.image-placeholder-label {
  margin-bottom: var(--space-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.image-placeholder-dimensions {
  opacity: 0.65;
  font-size: var(--size-xxs);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center { text-align: center; }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: fadeInUp 1s var(--ease-out) forwards; }
.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.25s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.4s; opacity: 0; }
.animate-delay-4 { animation-delay: 0.55s; opacity: 0; }

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

/* ==========================================================================
   HOME PAGE SPECIFIC PATTERNS
   ========================================================================== */

/* Curriculum progression graphic */
.curriculum-path {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .curriculum-path {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: var(--space-md);
    align-items: stretch;
  }
}

.curriculum-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  /* Ensure clean appearance when used as an anchor (<a>) */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.curriculum-step:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.curriculum-step--available {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-text-inverse);
}

.curriculum-step--available:hover {
  border-color: var(--color-navy-deep);
  background: var(--color-navy-deep);
}

.curriculum-step-status {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.curriculum-step--available .curriculum-step-status {
  color: var(--color-cyan);
}

.curriculum-step-number {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-md);
}

.curriculum-step--available .curriculum-step-number {
  color: var(--color-cyan);
}

.curriculum-step-name {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  flex: 1;
  letter-spacing: var(--tracking-tight);
}

.curriculum-step--available .curriculum-step-name {
  color: var(--color-text-inverse);
}

.curriculum-step-outcome {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-deep);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.curriculum-step--available .curriculum-step-outcome {
  color: var(--color-cyan);
  border-top-color: rgba(255, 255, 255, 0.2);
}

.curriculum-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-border-strong);
  width: 48px;
}

@media (min-width: 768px) {
  .curriculum-arrow {
    display: flex;
  }
}

/* Audience blocks (who this is for) */
.audience-block {
  background: var(--color-bg-muted);
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  height: 100%;
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.audience-list li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.audience-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 1.25rem;
  height: 1px;
  background-color: var(--color-accent-deep);
}

/* Testimonials placeholder */
.testimonials-placeholder {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-3xl) 0;
}

.testimonials-placeholder .horizon-accent {
  margin: 0 auto;
}

/* ==========================================================================
   LEARN TO FLY SOLO PAGE PATTERNS
   ========================================================================== */

/* ----- Syllabus list ----- */
.syllabus-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.syllabus-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.syllabus-marker {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.syllabus-marker--phase {
  background-color: var(--color-cyan);
}

.syllabus-marker--graduation {
  background-color: var(--color-navy);
  border: 2px solid var(--color-cyan);
}

.syllabus-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.syllabus-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
  position: relative;
}

.syllabus-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.syllabus-item-number {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  min-width: 3rem;
  padding-top: 0.25rem;
}

.syllabus-item-content h4 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.syllabus-item-count {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.syllabus-item-content p {
  color: var(--color-text-muted);
  font-size: var(--size-base);
}

/* Phase check badge */
.syllabus-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background-color: var(--color-cyan);
  color: var(--color-navy);
  border-radius: 2px;
}

.syllabus-phase-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-navy);
}

.syllabus-phase-badge--graduation {
  background-color: var(--color-navy);
  color: var(--color-cyan);
}

.syllabus-phase-badge--graduation::before {
  background-color: var(--color-cyan);
}

/* Phase check items emphasized */
.syllabus-item--phase {
  background-color: rgba(100, 232, 242, 0.04);
}

.syllabus-item--graduation {
  background-color: rgba(52, 61, 99, 0.04);
}

/* ----- Instructor block ----- */
.instructor-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .instructor-block {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
  }
}

.instructor-image {
  min-height: auto;
  width: 100%;
  overflow: hidden;
}

.instructor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (min-width: 768px) {
  .instructor-image {
    max-width: 24rem;
  }
}

/* ----- Pricing grid ----- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
  }
}

.pricing-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-base);
}

.pricing-card--featured {
  border-color: var(--color-navy);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .pricing-card--featured {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
  }
}

.pricing-card-badge {
  position: absolute;
  top: -0.875rem;
  left: var(--space-2xl);
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background-color: var(--color-cyan);
  color: var(--color-navy);
  padding: 0.5rem 0.875rem;
  border-radius: 2px;
}

.pricing-card-header {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.pricing-card-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.pricing-card--featured .pricing-card-label {
  color: var(--color-accent-deep);
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: 1;
}

.pricing-card-price-currency {
  font-size: var(--size-lg);
  font-weight: var(--weight-medium);
  margin-right: 0.125rem;
}

.pricing-card-price-amount {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 0.9;
}

.pricing-card-price-unit {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  margin-left: 0.5rem;
}

.pricing-card-tagline {
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin-top: var(--space-md);
}

.pricing-card-body {
  flex: 1;
  margin-bottom: var(--space-xl);
}

.pricing-card-includes {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.pricing-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.pricing-card-list > li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.pricing-card-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 1px;
  background-color: var(--color-accent-deep);
}

.pricing-card-sublist {
  margin-top: var(--space-sm);
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.pricing-card-sublist li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.pricing-card-sublist li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-accent-deep);
  font-weight: var(--weight-bold);
}

.pricing-card-footer {
  margin-top: auto;
}

/* ----- Workflow list (6-step coaching workflow) ----- */
.workflow-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .workflow-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

@media (min-width: 1024px) {
  .workflow-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.workflow-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  align-items: flex-start;
}

/* Remove right border on last item in each row */
@media (min-width: 768px) and (max-width: 1023px) {
  .workflow-item:nth-child(2n) { border-right: none; }
}

@media (min-width: 1024px) {
  .workflow-item:nth-child(3n) { border-right: none; }
}

@media (max-width: 767px) {
  .workflow-item { border-right: none; }
}

.workflow-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* For desktop layouts, add bottom border to the last row */
@media (min-width: 768px) {
  .workflow-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}

@media (min-width: 1024px) {
  .workflow-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .workflow-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); }
}

.workflow-number {
  font-family: var(--font-mono);
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  flex-shrink: 0;
  min-width: 2rem;
}

.workflow-content h4 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-tight);
}

.workflow-content p {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ----- Pillar cards (credibility) ----- */
.pillar-card {
  position: relative;
  padding: var(--space-xl) 0;
}

.pillar-card-number {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-accent);
  display: inline-block;
  padding-right: var(--space-xl);
}

.pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.pillar-card p {
  font-size: var(--size-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
}

/* ----- Audience caveat block ----- */
.audience-block--caveat {
  background-color: var(--color-white);
  border: 1px solid var(--color-coral);
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.audience-list--caveat li::before {
  background-color: var(--color-coral);
}

/* ----- Guarantee block ----- */
.guarantee-block {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-2xl);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
}

@media (min-width: 768px) {
  .guarantee-block {
    padding: var(--space-4xl) var(--space-4xl);
  }
}

/* ==========================================================================
   COURSE PAGE SHARED PATTERNS (Cross Country, In the Clouds, Paid to Fly)
   ========================================================================== */

/* ----- Course status badge (in hero meta) ----- */
.course-status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 2px;
  font-weight: var(--weight-medium);
}

.course-status-badge--upcoming {
  background-color: var(--color-cyan);
  color: var(--color-navy);
}

.course-status-badge--coming-soon {
  background-color: var(--color-cream-deep);
  color: var(--color-text);
}

/* ----- Curriculum topic cards (2-column with big numbers) ----- */
.curriculum-topic {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border);
}

.curriculum-topic:last-child,
.curriculum-topic:nth-last-child(2) {
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  /* In a 2-column grid, the last two items should have a bottom border */
  .curriculum-topic:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }
}

.curriculum-topic-number {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-md);
  display: inline-block;
}

.curriculum-topic h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

.curriculum-topic p {
  color: var(--color-text-body);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
}

/* ----- Timeline list (launch timeline items) ----- */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-navy);
}

.timeline-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.timeline-item-marker {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background-color: var(--color-cyan);
  margin-top: 0.5rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(100, 232, 242, 0.15);
}

.timeline-item-content h4 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.timeline-item-content p {
  color: var(--color-text-inverse-muted);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
}

/* ----- Waitlist form block ----- */
.waitlist-block {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-2xl);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
}

@media (min-width: 768px) {
  .waitlist-block {
    padding: var(--space-4xl) var(--space-4xl);
  }
}

.waitlist-content {
  max-width: 36rem;
}

.waitlist-form {
  margin-top: var(--space-xl);
}

.form-label-optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: var(--size-xs);
}

/* ==========================================================================
   WAITLIST FORM (on navy background)
   ========================================================================== */

.waitlist-label {
  color: var(--color-cyan);
}

.waitlist-label-optional {
  opacity: 0.6;
  font-weight: var(--weight-regular);
  margin-left: 0.25rem;
}

.waitlist-form-input {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.waitlist-form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.waitlist-form-input:focus {
  border-bottom-color: var(--color-cyan);
}

.bg-navy .waitlist-form-input:focus,
.bg-navy-deep .waitlist-form-input:focus {
  border-bottom-color: var(--color-cyan);
}

/* ==========================================================================
   WAITLIST FORM — form inputs on dark (navy) backgrounds
   ========================================================================== */

.bg-navy .form-input,
.bg-navy .form-textarea,
.bg-navy-deep .form-input,
.bg-navy-deep .form-textarea,
.waitlist-input {
  color: var(--color-text-inverse);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  background-color: transparent;
}

.bg-navy .form-input::placeholder,
.bg-navy .form-textarea::placeholder,
.bg-navy-deep .form-input::placeholder,
.bg-navy-deep .form-textarea::placeholder,
.waitlist-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.bg-navy .form-input:focus,
.bg-navy .form-textarea:focus,
.bg-navy-deep .form-input:focus,
.bg-navy-deep .form-textarea:focus,
.waitlist-input:focus {
  border-bottom-color: var(--color-cyan);
}

/* Scroll smooth to anchor positions accounting for sticky header */
html {
  scroll-padding-top: 6rem;
}

/* ==========================================================================
   CURRICULUM PAGE PATTERNS
   ========================================================================== */

/* ----- Requirements list (deep practice requirements on navy) ----- */
.requirements-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border-navy);
}

@media (min-width: 640px) {
  .requirements-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .requirements-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.requirement-item {
  padding: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--color-border-navy);
  border-right: 1px solid var(--color-border-navy);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .requirement-item:nth-child(2n) { border-right: none; }
  .requirement-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media (min-width: 1024px) {
  .requirement-item:nth-child(4n) { border-right: none; }
  .requirement-item:nth-last-child(-n+4) { border-bottom: none; }
}

@media (max-width: 639px) {
  .requirement-item { border-right: none; }
  .requirement-item:last-child { border-bottom: none; }
}

.requirement-label {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  color: var(--color-cyan);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.requirement-item p {
  color: var(--color-text-inverse-muted);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

/* ----- Workflow list — 4-step variant ----- */
.workflow-list--four {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .workflow-list--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .workflow-list--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Remove extra borders for 4-step variant */
@media (min-width: 1024px) {
  .workflow-list--four .workflow-item:nth-child(3n):not(:nth-child(4n)) { 
    border-right: 1px solid var(--color-border); 
  }
  .workflow-list--four .workflow-item:nth-child(4n) { 
    border-right: none; 
  }
  .workflow-list--four .workflow-item:nth-last-child(-n+4) { 
    border-bottom: 1px solid var(--color-border); 
  }
}

/* ----- Transfer grid (What Transfers / What Doesn't) ----- */
.transfer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .transfer-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4xl);
  }
}

.transfer-column {
  padding: 0;
}

.transfer-column-header {
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.transfer-column--yes .transfer-column-header {
  border-bottom-color: var(--color-accent);
}

.transfer-column--no .transfer-column-header {
  border-bottom-color: var(--color-coral);
}

.transfer-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.transfer-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.transfer-list li {
  padding-left: 0;
  line-height: var(--leading-normal);
}

.transfer-list li::before {
  display: none;
}

.transfer-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
}

.transfer-column--yes .transfer-list li strong::before {
  content: "+ ";
  color: var(--color-accent-deep);
  font-weight: var(--weight-bold);
}

.transfer-column--no .transfer-list li strong::before {
  content: "— ";
  color: var(--color-coral);
  font-weight: var(--weight-bold);
}

.transfer-list li p {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: 0;
}

/* ----- Hardware blocks ----- */
.hardware-block {
  padding: var(--space-xl);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  height: 100%;
}

.hardware-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.hardware-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hardware-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.hardware-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 1rem;
  height: 1px;
  background-color: var(--color-accent-deep);
}

.hardware-list li em {
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  display: block;
  margin-top: 0.25rem;
}

/* ----- Citation list ----- */
.citation-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.citation-list li {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
}

.citation-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.citation-author {
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.citation-title {
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  line-height: var(--leading-normal);
}

.citation-publisher {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   COURSES PAGE PATTERNS
   ========================================================================== */

/* ----- Catalog cards (different from card-feature — text-forward, info-dense) ----- */
.catalog-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition-base);
  position: relative;
}

.catalog-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.catalog-card--available {
  border-color: var(--color-navy);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.catalog-card--available:hover {
  border-color: var(--color-navy-deep);
  box-shadow: var(--shadow-lg);
}

.catalog-card-header {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.catalog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.catalog-card-number {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.catalog-card-status {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-radius: 2px;
}

.catalog-card-status--available {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.catalog-card-title {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-tighter);
}

.catalog-card-tagline {
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-accent-deep);
  font-style: italic;
  line-height: var(--leading-snug);
}

.catalog-card-body {
  flex: 1;
  margin-bottom: var(--space-xl);
}

.catalog-card-description {
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  margin-bottom: var(--space-xl);
}

/* Specs list (prerequisites + outcome) */
.catalog-card-specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.catalog-card-spec dt {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.catalog-card-spec dd {
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-left: 0;
}

.catalog-card-footer {
  margin-top: auto;
}

/* ----- Decision tree (How to Choose) ----- */
.decision-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  counter-reset: decision-counter;
}

.decision-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border-strong);
  counter-increment: decision-counter;
  position: relative;
}

@media (min-width: 768px) {
  .decision-item {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

.decision-item:last-child {
  border-bottom: 1px solid var(--color-border-strong);
}

.decision-item::before {
  content: counter(decision-counter, decimal-leading-zero);
  position: absolute;
  top: var(--space-2xl);
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.decision-condition {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  padding-left: 3rem;
}

@media (max-width: 767px) {
  .decision-condition {
    padding-left: 3rem;
  }
}

.decision-recommendation {
  padding-left: 0;
}

@media (max-width: 767px) {
  .decision-recommendation {
    padding-left: 3rem;
  }
}

.decision-recommendation p {
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.decision-recommendation a {
  color: var(--color-text);
  background-image: linear-gradient(transparent 68%, var(--color-cyan) 68%);
  background-size: 100% 100%;
  transition: background-size var(--transition-base);
  padding: 0 2px;
}

.decision-recommendation a:hover {
  background-size: 100% 50%;
}

/* ----- Consistency list (What's Consistent) ----- */
.consistency-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .consistency-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.consistency-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  align-items: flex-start;
}

.consistency-item:last-child,
.consistency-item:nth-last-child(-n+2) {
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .consistency-item:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 767px) {
  .consistency-item {
    border-right: none;
  }
  .consistency-item:nth-last-child(-n+2):not(:last-child) {
    border-bottom: none;
  }
}

.consistency-marker {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-deep);
  letter-spacing: var(--tracking-wider);
  flex-shrink: 0;
  padding-top: 0.125rem;
  min-width: 2rem;
}

.consistency-content strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.consistency-content span {
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ==========================================================================
   RADIO GROUP — stacked radio buttons on navy forms
   ========================================================================== */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.radio-option:hover {
  border-color: var(--color-cyan);
  background-color: rgba(100, 232, 242, 0.05);
}

.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  background: transparent;
  transition: border-color var(--transition-base);
}

.radio-option input[type="radio"]:checked {
  border-color: var(--color-cyan);
}

.radio-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-cyan);
}

.radio-option:has(input:checked) {
  border-color: var(--color-cyan);
  background-color: rgba(100, 232, 242, 0.08);
}

.radio-label {
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text-inverse);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   COACHING PAGE PATTERNS
   ========================================================================== */

/* ----- À la carte block ----- */
.a-la-carte-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-3xl);
}

@media (min-width: 1024px) {
  .a-la-carte-block {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
    padding: var(--space-4xl);
  }
}

.a-la-carte-price .pricing-card-price-amount {
  font-size: clamp(3.5rem, 6vw, 5rem);
}

/* ==========================================================================
   ABOUT PAGE PATTERNS
   ========================================================================== */

/* ----- Long-form narrative prose (About page story sections) ----- */
.narrative {
  max-width: 44rem;
  margin: 0 auto;
}

.narrative p {
  margin-bottom: 1.5rem;
}

.narrative blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-cyan);
  background: var(--color-bg-muted);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: var(--leading-relaxed);
}

.narrative blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: var(--size-sm);
  font-style: normal;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ----- Beliefs list (What I believe about flight training) ----- */
.beliefs-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.beliefs-list li {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}

.beliefs-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.beliefs-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.beliefs-list li p,
.beliefs-list li > span {
  font-size: var(--size-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ==========================================================================
   CONTACT PAGE PATTERNS
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  padding: var(--space-xl);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
}

.contact-card-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: var(--space-sm);
}

.contact-card h4 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.contact-card p {
  font-size: var(--size-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
}

.contact-card em {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-xs);
}

/* Contact form on white background */
.contact-form {
  max-width: 44rem;
  margin: 0 auto;
}

.contact-form .form-group {
  margin-bottom: var(--space-xl);
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23343D63' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 2rem;
  cursor: pointer;
}

.form-textarea {
  min-height: 10rem;
  resize: vertical;
  padding: var(--space-md) 0;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--transition-base);
}

.form-textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent-deep);
}

/* ==========================================================================
   FAQ PAGE PATTERNS
   ========================================================================== */

/* Category navigation (sticky jump links) */
.faq-nav {
  position: sticky;
  top: 5rem;
  background: var(--color-white);
  z-index: 10;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-3xl);
}

.faq-nav-list {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  padding: 0 var(--space-md);
  scrollbar-width: thin;
  list-style: none;
  margin: 0;
}

.faq-nav-list li {
  padding: 0;
}

.faq-nav-list li::before {
  display: none;
}

.faq-nav-link {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-sm) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
}

.faq-nav-link:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* FAQ category section */
.faq-category {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
  scroll-margin-top: 8rem;
}

.faq-category-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border-strong);
}

.faq-category-number {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-deep);
}

.faq-category-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}

/* FAQ accordion items */
.faq-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-list li {
  padding: 0;
}

.faq-list li::before {
  display: none;
}

.faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  transition: color var(--transition-base);
}

.faq-question:hover {
  color: var(--color-accent-deep);
}

.faq-question-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
  position: relative;
}

.faq-question-icon::before,
.faq-question-icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transition-base);
}

.faq-question-icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq-question-icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq-question[aria-expanded="true"] .faq-question-icon::after {
  transform: translateX(-50%) scaleY(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-answer-inner {
  padding: 0 0 var(--space-xl) 0;
  font-size: var(--size-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  max-width: 48rem;
}

.faq-answer-inner p {
  margin-bottom: var(--space-md);
}

.faq-answer-inner ul {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  padding-left: 1.5rem;
}

.faq-answer-inner li {
  margin-bottom: var(--space-xs);
  padding-left: 0;
}

.faq-answer-inner li::before {
  display: none;
}

/* ==========================================================================
   LEGAL PAGES PATTERNS
   ========================================================================== */

.legal-content {
  max-width: 48rem;
  margin: 0 auto;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-snug);
}

.legal-content h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.legal-content h3 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.legal-content h4 {
  font-family: var(--font-display);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal-content p {
  font-size: var(--size-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

.legal-content ul {
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
}

.legal-content li {
  margin-bottom: var(--space-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  padding-left: 0;
}

.legal-content li::before {
  display: none;
}

.legal-content strong {
  color: var(--color-text);
}

.legal-content a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   HERO WITH MEDIA (image or video background)
   Supports both .hero-image (jpg) and .hero-video (mp4). Both are absolutely
   positioned behind a .hero-overlay that darkens the media for text legibility.
   ========================================================================== */

.hero-with-media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy-deep);
  /* Ensure content has breathing room from the media */
  padding-top: clamp(6rem, 12vh, 10rem);
  padding-bottom: clamp(4rem, 10vh, 8rem);
}

.hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-image,
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The image is the fallback poster, behind the video.
   When a video is present, it naturally covers the image.
   When no video is present, the image shows through.
   Layering: image (0) → video (1) → overlay (2) → content (3) */
.hero-image {
  z-index: 0;
}

.hero-video {
  z-index: 1;
}

/* Overlay: creates the text-legibility gradient and adds brand navy tint.
   The radial-gradient darkens more on the left (where the text sits) and lets
   the right side of the image show through more. */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      to right,
      rgba(35, 42, 72, 0.85) 0%,
      rgba(35, 42, 72, 0.70) 40%,
      rgba(35, 42, 72, 0.45) 75%,
      rgba(35, 42, 72, 0.40) 100%
    );
  z-index: 2;
}

/* Hero content sits above the overlay */
.hero-content {
  position: relative;
  z-index: 3;
}

/* When a hero uses media, its text flips to inverted colors. A soft
   dark halo text-shadow improves legibility where titles overlap
   bright portions of the hero image (e.g. white title crossing the
   cyan column on curriculum, or the cyan clipboard on coaching). The
   halo is symmetric (0,0 offset) so it reads as atmospheric dimming
   rather than a directional shadow, and it applies uniformly across
   all heroes regardless of what's behind any individual letter. */
.hero-with-media .display-hero {
  color: var(--color-text-inverse);
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

.hero-with-media .hero-meta-item {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-with-media .hero-meta-rule {
  background-color: var(--color-cyan);
}

.hero-with-media .mono-sm {
  color: var(--color-cyan);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-with-media .horizon-accent {
  background-color: var(--color-cyan);
}

.hero-with-media .lead-lg {
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 16px rgba(0, 0, 0, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Reduce media emphasis on narrower viewports so text has more room */
@media (max-width: 768px) {
  .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(35, 42, 72, 0.80) 0%,
        rgba(35, 42, 72, 0.85) 100%
      );
  }
}

/* Hero videos autoplay for all users. Video clips are small, muted, and
   decorative — we've decided the design impact is worth the small set of
   users with reduced-motion preferences set (typically from enterprise
   defaults rather than explicit user choice). */

/* ==========================================================================
   HERO INLINE SVG (Cross Country and other SVG-animated heroes)
   Mirrors the .hero-image / .hero-video pattern but targets inline <svg>
   content. The SVG sits in the same layer as .hero-image (z:0) so it serves
   as its own background — no separate poster needed when the SVG renders.
   The JPG fallback poster sits behind it for browsers that can't render
   inline animated SVG.
   ========================================================================== */

.hero-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Mountain-drift animation, used on the Cross Country hero.
   Each layer's inner <g> shifts left-to-right by one viewport-width over its
   duration. Because the SVG mountain pattern is 2× viewport wide with identical
   halves, the loop is seamless. Parallax: front layer is 1.6× faster than back,
   creating a subtle sense of depth. */
.hero-mountains-back {
  animation: hero-drift-right 32s linear infinite;
  transform-origin: 0 0;
  will-change: transform;
}

.hero-mountains-front {
  animation: hero-drift-right 20s linear infinite;
  transform-origin: 0 0;
  will-change: transform;
}

@keyframes hero-drift-right {
  from { transform: translateX(0); }
  to   { transform: translateX(2400px); }
}

/* ==========================================================================
   IN THE CLOUDS HERO — forward motion into cloud volume
   Cloud wisps spawn near the center of the SVG viewBox (1200, 675) and drift
   outward toward the frame edges, growing and fading as they go. This fakes
   Z-axis forward motion: closer objects appear to rush past, distant objects
   barely move. Two layers (front: fast/bright, back: slow/dim) create depth.

   Reduced wisp count (4 front + 2 back) with larger base shapes for smoother
   animation — per-frame filter work scales with wisp count, and this tuning
   produces visibly dense cloud volume without overwhelming the GPU.
   ========================================================================== */

/* Front wisps: 48s lifecycle, four diagonal directions, 12s stagger between spawns */
@keyframes hero-clouds-rush-upper-left {
  0%   { transform: translate(1200px, 675px) scale(0.08); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(-400px, -100px) scale(1.8);  opacity: 0; }
}
@keyframes hero-clouds-rush-lower-left {
  0%   { transform: translate(1200px, 675px) scale(0.08); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(-200px, 1300px) scale(1.7); opacity: 0; }
}
@keyframes hero-clouds-rush-upper-right {
  0%   { transform: translate(1200px, 675px) scale(0.08); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(2600px, 100px) scale(1.8);  opacity: 0; }
}
@keyframes hero-clouds-rush-lower-right {
  0%   { transform: translate(1200px, 675px) scale(0.08); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(2700px, 1400px) scale(1.7); opacity: 0; }
}

/* Back layer: 96s lifecycle, two diagonal directions, 48s stagger */
@keyframes hero-clouds-drift-out-1 {
  0%   { transform: translate(1200px, 675px) scale(0.15); opacity: 0; }
  20%  { opacity: 0.35; }
  100% { transform: translate(2400px, 300px) scale(1.1); opacity: 0; }
}
@keyframes hero-clouds-drift-out-2 {
  0%   { transform: translate(1200px, 675px) scale(0.15); opacity: 0; }
  20%  { opacity: 0.35; }
  100% { transform: translate(100px, 1100px) scale(1.1); opacity: 0; }
}

.hero-clouds-front-1 { animation: hero-clouds-rush-upper-left  48s linear       infinite; transform-origin: 1200px 675px; will-change: transform; }
.hero-clouds-front-2 { animation: hero-clouds-rush-lower-right 48s linear -12s  infinite; transform-origin: 1200px 675px; will-change: transform; }
.hero-clouds-front-3 { animation: hero-clouds-rush-upper-right 48s linear -24s  infinite; transform-origin: 1200px 675px; will-change: transform; }
.hero-clouds-front-4 { animation: hero-clouds-rush-lower-left  48s linear -36s  infinite; transform-origin: 1200px 675px; will-change: transform; }

.hero-clouds-back-1 { animation: hero-clouds-drift-out-1 96s linear       infinite; transform-origin: 1200px 675px; will-change: transform; }
.hero-clouds-back-2 { animation: hero-clouds-drift-out-2 96s linear -48s  infinite; transform-origin: 1200px 675px; will-change: transform; }

/* ==========================================================================
   PAID-TO-FLY HERO — aviation beacon + drifting fog
   The ATC tower itself is static (wrapped in an feGaussianBlur applied once,
   rasterized and cached by the browser — no per-frame cost). Only the beacon
   source and the fog layer animate. Softness for fog is baked into the
   gradient stops, not applied via filter, so per-frame GPU work stays minimal.
   ========================================================================== */

/* Beacon source: green/white double-pulse on a 3s cycle.
   Two rapid flashes separated by ~0.3s, then ~2.5s dim hold.
   This is the rhythm of an aviation beacon — instantly recognizable. */
@keyframes paid-beacon-doublepulse {
  0%   { opacity: 1.0;  transform: scale(2.2); }
  10%  { opacity: 0.45; transform: scale(1.0); }
  18%  { opacity: 1.0;  transform: scale(2.2); }
  28%  { opacity: 0.35; transform: scale(0.95); }
  97%  { opacity: 0.35; transform: scale(0.95); }
  100% { opacity: 1.0;  transform: scale(2.2); }
}

.paid-beacon-source {
  transform-origin: 1820px 440px;  /* beacon center — SVG user coords */
  animation: paid-beacon-doublepulse 3s ease-out infinite;
  will-change: transform, opacity;
}

/* Fog drift: slow right-to-left lateral translation on a 60s cycle.
   Pattern is 2x viewport wide with identical halves, so translating by
   exactly one viewport width loops seamlessly. */
@keyframes paid-fog-drift-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-2400px); }
}

.paid-fog-drift {
  animation: paid-fog-drift-left 60s linear infinite;
  transform-origin: 0 0;
  will-change: transform;
}

/* ==========================================================================
   CURRICULUM HERO — Corinthian column + pixie dust
   The column is a photographic image (column-cyan.png) recolored from a
   greyscale reference into the brand cyan palette with transparent
   background. Pixie dust is a separate SVG overlay with 10 animated
   particles drifting around the capital.

   No filters on animated elements (lessons learned from In the Clouds).
   Pure CSS transforms only — particles are tiny circles with baked-in
   gradient fills, animating via translateY + opacity.
   ========================================================================== */

.hero-curriculum {
  /* Override hero default backgrounds — curriculum uses navy gradient */
  background: linear-gradient(to bottom, #0f1530, #1a2046 50%, #232a54);
}

.hero-curriculum-glow {
  /* Soft cyan glow on left side balances the column's visual weight on right */
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(100, 232, 242, 0.14) 0%, rgba(100, 232, 242, 0) 60%);
  pointer-events: none;
}

.hero-curriculum-column {
  /* Column image positioning — right-aligned, sized to leave breathing room.
     At production type sizes, the title is large (clamp 3.6rem → 9rem) and
     the tagline sits in the lower half. Column is 85% of hero height so the
     bottom of the shaft fades into navy beneath the tagline area. */
  position: absolute;
  right: -2%;
  bottom: 0;
  height: 85%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.55));
}

.hero-curriculum-pixie {
  /* SVG overlay covers full hero stage — particles positioned in viewBox coords */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   COURSES HERO — three diffuse cyan lights drifting across the field.

   Originally tried a sextant photographic object, but it competed with the
   three-line title and forcing it off-canvas created composition problems.
   Replaced with three pure-CSS diffuse lights that drift right-to-left
   across the hero, each on its own vertical track with a slow vertical bob.
   Their paths visually cross; mix-blend-mode: screen makes overlap
   brighten additively rather than one occluding the other. Subtle metaphor:
   lights traversing paths — courses being navigated, plural.

   No image asset — the entire effect is two CSS animations per element.
   prefers-reduced-motion freezes them at attractive resting positions.
   ========================================================================== */
.hero-courses {
  background: linear-gradient(to bottom, #0f1530, #1a2046 50%, #232a54);
}

/* The Courses title is three short lines, the third of which ("Aspiring
   pilot to professional.") is structurally the longest of any hero title
   on the site. At default display-hero size it overruns the layout. Reduce
   the size on this page only, keeping the responsive clamp pattern. */
.hero-courses .display-hero {
  font-size: clamp(2.6rem, 6.6vw, 6.2rem);
}

/* Each light is a large diffuse circle with a radial-gradient background
   that fades to transparent. Two animations per element — horizontal drift
   right-to-left, vertical bob (sine-like via cubic-bezier ease) — combine
   via the multi-animation property to give intersecting lanes of motion.

   Width/height set in vw so the lights stay proportionally large across
   viewport sizes. Negative top values let the lights enter from above the
   viewport edge as part of their bob.

   mix-blend-mode: screen makes overlapping lights add brightness rather
   than occlude. Brand cyan core fades to transparent at the edges. */
.hero-courses-light {
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle,
    rgba(100, 232, 242, 0.32) 0%,
    rgba(100, 232, 242, 0.18) 25%,
    rgba(45, 184, 195, 0.08) 50%,
    rgba(45, 184, 195, 0.00) 75%
  );
  filter: blur(20px);
}

/* Three lights — each on a different vertical baseline, with its own
   bob keyframe (different amplitudes/directions), and staggered drift
   delays so the trio is always present on screen rather than entering
   together as a wave. Each light defines BOTH animations: drift (linear,
   long cycle) and bob (eased, alternating direction). Different cycle
   durations across the trio means their relative positions never repeat
   the same way at the same time. */
.hero-courses-light-1 {
  top: -10%;
  animation:
    hero-courses-drift 28s linear infinite,
    hero-courses-bob-1 14s ease-in-out infinite alternate;
}
.hero-courses-light-2 {
  top: 15%;
  animation:
    hero-courses-drift 32s linear infinite -10s,
    hero-courses-bob-2 11s ease-in-out infinite alternate -3s;
}
.hero-courses-light-3 {
  top: 40%;
  animation:
    hero-courses-drift 30s linear infinite -19s,
    hero-courses-bob-3 17s ease-in-out infinite alternate -7s;
}

/* Horizontal drift: right edge to left edge, accounting for the light's
   own width so it fully exits before reappearing. Starts at right: -20%
   (just off-screen right) and ends at right: 120% (just off-screen left).
   At linear timing across 28-32s, this reads as gentle drift, not motion. */
@keyframes hero-courses-drift {
  from { right: -30%; }
  to   { right: 120%; }
}

/* Per-light vertical bob keyframes. Each has a different amplitude and
   shape so the three lights' vertical paths look distinct as they drift.
   Combined with the horizontal drift, the lights weave around each other
   visually. */
@keyframes hero-courses-bob-1 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(80px); }
}
@keyframes hero-courses-bob-2 {
  0%   { transform: translateY(40px); }
  100% { transform: translateY(-60px); }
}
@keyframes hero-courses-bob-3 {
  0%   { transform: translateY(-30px); }
  100% { transform: translateY(50px); }
}

/* Reduced motion: freeze the three lights at staggered resting positions
   so the visual is preserved as a static composition for users who
   disable animations. */
@media (prefers-reduced-motion: reduce) {
  .hero-courses-light {
    animation: none;
  }
  .hero-courses-light-1 { right: 65%; transform: translateY(20px); }
  .hero-courses-light-2 { right: 35%; transform: translateY(-30px); }
  .hero-courses-light-3 { right: 5%;  transform: translateY(15px); }
}

/* Pixie dust path animations — three keyframe variants give particles
   slightly different motion paths so they don't look in lockstep */
@keyframes hero-curriculum-pixie-rise-a {
  0%   { transform: translate(0, 0);    opacity: 0; }
  12%  { opacity: 1.0; }
  35%  { transform: translate(25px, -140px); opacity: 1.0; }
  65%  { transform: translate(-20px, -300px); opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translate(15px, -450px); opacity: 0; }
}
@keyframes hero-curriculum-pixie-rise-b {
  0%   { transform: translate(0, 0);    opacity: 0; }
  10%  { opacity: 0.9; }
  40%  { transform: translate(-35px, -170px); opacity: 0.95; }
  70%  { transform: translate(20px, -340px); opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translate(-10px, -480px); opacity: 0; }
}
@keyframes hero-curriculum-pixie-rise-c {
  0%   { transform: translate(0, 0);    opacity: 0; }
  14%  { opacity: 1.0; }
  45%  { transform: translate(18px, -210px); opacity: 1.0; }
  75%  { transform: translate(-25px, -380px); opacity: 0.85; }
  88%  { opacity: 0.7; }
  100% { transform: translate(8px, -470px); opacity: 0; }
}

/* Particle bindings — 10 particles with staggered durations and delays */
.hero-curriculum-pixie-01 { animation: hero-curriculum-pixie-rise-a 22s linear      infinite; }
.hero-curriculum-pixie-02 { animation: hero-curriculum-pixie-rise-b 26s linear -3s  infinite; }
.hero-curriculum-pixie-03 { animation: hero-curriculum-pixie-rise-c 20s linear -6s  infinite; }
.hero-curriculum-pixie-04 { animation: hero-curriculum-pixie-rise-a 28s linear -9s  infinite; }
.hero-curriculum-pixie-05 { animation: hero-curriculum-pixie-rise-b 24s linear -12s infinite; }
.hero-curriculum-pixie-06 { animation: hero-curriculum-pixie-rise-c 21s linear -15s infinite; }
.hero-curriculum-pixie-07 { animation: hero-curriculum-pixie-rise-a 25s linear -2s  infinite; }
.hero-curriculum-pixie-08 { animation: hero-curriculum-pixie-rise-b 27s linear -5s  infinite; }
.hero-curriculum-pixie-09 { animation: hero-curriculum-pixie-rise-c 23s linear -8s  infinite; }
.hero-curriculum-pixie-10 { animation: hero-curriculum-pixie-rise-a 20s linear -11s infinite; }

/* ==========================================================================
   COACHING HERO — clipboard + stopwatch
   Object-on-navy pattern matching the curriculum hero, creating visual family
   between the two "methodology" pages. The clipboard is a photographic image
   (coaching-clipboard.png) recolored from greyscale to brand cyan. The
   stopwatch LCD is an SVG overlay with a live-counting readout updated by
   a small inline JS counter in coaching.html.

   No filters on animated elements — colon uses opacity animation, digits
   update via textContent. The only continuous motion is the ticking
   stopwatch itself, which reinforces the page's "tight feedback = measurement"
   thesis.
   ========================================================================== */

.hero-coaching {
  background: linear-gradient(to bottom, #0f1530, #1a2046 50%, #232a54);
}

.hero-coaching-glow {
  /* Soft cyan glow on the left balances the clipboard's visual weight */
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(100, 232, 242, 0.14) 0%, rgba(100, 232, 242, 0) 60%);
  pointer-events: none;
}

.hero-coaching-clipboard-wrapper {
  /* Wrapper holds both the image and the LCD overlay so they stay aligned
     across viewport sizes. aspect-ratio matches the 1024x1536 source.
     Height is 85% of hero to leave breathing room for the title text. */
  position: absolute;
  right: 2%;
  bottom: 0;
  height: 85%;
  transform: none;
  aspect-ratio: 1024 / 1536;
  pointer-events: none;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.55));
}

.hero-coaching-clipboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Stopwatch LCD overlay — position measured from source image coords:
    top-left     (231, 889)
    top-right    (377, 889)
    bottom-left  (231, 936)
    bottom-right (377, 936)
  Normalized to 1024x1536 source gives the % values below.
*/
.hero-coaching-stopwatch {
  position: absolute;
  left: 22.559%;
  width: 14.258%;
  top: 57.878%;
  height: 3.060%;
  pointer-events: none;
  overflow: hidden;
}

/* Colons dim (don't toggle) on 1Hz cycle — matches real running stopwatches
   and avoids the layout shift that full toggling would cause. */
.hero-coaching-colon {
  animation: hero-coaching-colon-blink 1s step-end infinite;
}
@keyframes hero-coaching-colon-blink {
  0%, 49.9%  { opacity: 1; }
  50%, 99.9% { opacity: 0.3; }
  100%       { opacity: 1; }
}

/* ==========================================================================
   REFUND HERO — handshake with "binding vow" light streak.

   Same object-on-navy pattern as Terms (Lady Justice) and Curriculum
   (column). The distinguishing element is an animated light streak that
   traces a continuous elliptical loop around the clasped hands — a
   commitment-to-training metaphor inspired by the HP unbreakable-vow
   visual. Implemented as an SVG circle with radial-gradient fill,
   positioned along an invisible SVG <path> via CSS offset-path.
   Respects prefers-reduced-motion.
   ========================================================================== */
.hero-refund {
  background: linear-gradient(to bottom, #0f1530, #1a2046 50%, #232a54);
}

.hero-refund-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(100, 232, 242, 0.14) 0%, rgba(100, 232, 242, 0) 60%);
  pointer-events: none;
}

.hero-refund-handshake {
  /* The handshake is a 1024×1024 square — unlike the tall Lady Justice or
     Corinthian column, it spans full width of its source. Right-aligning with
     a bleed offset (as Lady Justice does) would push too much of the image
     off the right edge. Instead: position flush to the right with no bleed,
     size larger so the binding vow streak has enough area to read. */
  position: absolute;
  right: 0;
  bottom: 8%;
  height: 78%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.55));
}

/* The SVG sits directly over the handshake image, sized and positioned
   identically so the comet's offset-path coordinates align with the hands. */
.hero-refund-vow {
  position: absolute;
  right: 0;
  bottom: 8%;
  height: 78%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  overflow: visible;
}

/* On narrow viewports the handshake consumes too much width and the title
   ends up sitting on the knuckles. Shrink the object, push it further
   right (negative offset), dim to 55% opacity so it reads as a subtle
   background element behind the title rather than competing with it. The
   SVG follows the image so the animation still aligns with the hands. */
@media (max-width: 768px) {
  .hero-refund-handshake,
  .hero-refund-vow {
    right: -30%;
    height: 65%;
  }
  .hero-refund-handshake {
    opacity: 0.55;
  }
  .hero-refund-vow {
    opacity: 0.55;
  }
}

/* The comet trail: 8 circles share the same elliptical offset-path. Each
   circle's animation is offset in time by a fraction of the cycle so they
   form a continuous arc trailing the head. mix-blend-mode: screen makes
   the trail read as light (brightness adds, never subtracts), and has the
   pleasant side-effect that when the trail crosses the bright cyan hands
   it naturally attenuates rather than sitting opaquely on top.

   Stagger: 0.08s per circle × 8 circles = 0.56s of visible trail, which
   at a 10s cycle feels like a comet wake rather than a string of dots. */
.hero-refund-comet {
  offset-path: path("M 960,450 A 448,275 0 0,1 64,450 A 448,275 0 0,1 960,450 Z");
  offset-distance: 0%;
  mix-blend-mode: screen;
  animation: hero-refund-vow-trace 10s linear infinite;
}

/* Trail direction note: animation-delay with NEGATIVE value makes the element
   appear further along its animation (started earlier). So more-negative delay
   = ahead in the loop. For a trail behind the head, we want each tail element
   to be BEHIND — meaning later in the loop — which at infinite duration is
   equivalent to being slightly EARLIER in the current cycle. So positive
   (delayed) start times make each circle appear later, i.e. behind the head.
   We use negative delays that GROW LESS negative for tail positions to keep
   the head (circle-0) at the front of the arc. */
.hero-refund-comet-0 { animation-delay:  0s;    opacity: 1.00; } /* head */
.hero-refund-comet-1 { animation-delay: -9.88s; opacity: 0.80; }
.hero-refund-comet-2 { animation-delay: -9.76s; opacity: 0.62; }
.hero-refund-comet-3 { animation-delay: -9.64s; opacity: 0.46; }
.hero-refund-comet-4 { animation-delay: -9.52s; opacity: 0.32; }
.hero-refund-comet-5 { animation-delay: -9.40s; opacity: 0.22; }
.hero-refund-comet-6 { animation-delay: -9.28s; opacity: 0.14; }
.hero-refund-comet-7 { animation-delay: -9.16s; opacity: 0.08; } /* tail */

@keyframes hero-refund-vow-trace {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Respect reduced-motion preferences: freeze all trail circles at fixed
   positions so users who disable motion still see a hint of the design
   element as a static glowing arc. */
@media (prefers-reduced-motion: reduce) {
  .hero-refund-comet {
    animation: none;
  }
  .hero-refund-comet-0 { offset-distance: 75%; }
  .hero-refund-comet-1 { offset-distance: 74.2%; }
  .hero-refund-comet-2 { offset-distance: 73.4%; }
  .hero-refund-comet-3 { offset-distance: 72.6%; }
  .hero-refund-comet-4 { offset-distance: 71.8%; }
  .hero-refund-comet-5 { offset-distance: 71.0%; }
  .hero-refund-comet-6 { offset-distance: 70.2%; }
  .hero-refund-comet-7 { offset-distance: 69.4%; }
}

/* ==========================================================================
   PRIVACY HERO — full-bleed photographic hero (wax-sealed envelope).

   Companion to the About hero in that it deliberately breaks the navy/cyan
   palette. The image is pre-composited with a pure-black left text zone
   and the envelope weighted right, so no .hero-overlay is needed — the
   standard .hero-with-media text-shadow halos handle legibility on the
   dark zone. Background color is set to black (rather than navy-deep) so
   that on very wide viewports any pillarbox shows as seamless black.
   ========================================================================== */
.hero-privacy {
  background-color: #000;
}

/* On narrow viewports, object-fit: cover crops off the right side of the
   composite, which is exactly where the seal sits. Pin the image's right
   edge to the viewport so the seal remains visible as the compositional
   anchor. */
@media (max-width: 768px) {
  .hero-privacy .hero-image {
    object-position: right center;
  }
}

/* ==========================================================================
   TERMS HERO — Lady Justice photographic object.

   Same pattern as curriculum (Corinthian column) and coaching (clipboard):
   navy gradient background, soft cyan glow on the left for balance, object
   right-aligned at 85% hero height with drop-shadow for depth. The justice
   figure is recolored from a generated reference into the brand cyan palette
   via the standard luminance-mapped LUT recipe (black → transparent, deep
   cyan shadows, brand cyan mids, pale cyan highlights).
   ========================================================================== */
.hero-terms {
  background: linear-gradient(to bottom, #0f1530, #1a2046 50%, #232a54);
}

.hero-terms-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(100, 232, 242, 0.14) 0%, rgba(100, 232, 242, 0) 60%);
  pointer-events: none;
}

.hero-terms-justice {
  /* Source PNG is 1024×1536. The figure's back silhouette sits flush against
     the PNG's right edge (col 1023), so right: 0 aligns that silhouette with
     the hero's right edge — matching the way the column's right edge sits
     flush on curriculum. Any positive right offset creates a visible dead
     strip between the figure's back and the frame edge, which reads as an
     alignment mistake rather than a composition. Height at 65% keeps the
     scales from colliding with the title period. */
  position: absolute;
  right: 0;
  bottom: 0;
  height: 65%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.55));
}

/* On narrow viewports the title hero is short (single line, no tagline) so
   the figure has no vertical room to sit below the title the way the column
   does on curriculum. Push off-screen and reduce to a subtle accent. */
@media (max-width: 768px) {
  .hero-terms-justice {
    right: -20%;
    height: 70%;
    opacity: 0.6;
  }
}

/* ==========================================================================
   FOOTER ADDITIONS: DUNS NUMBER + SOCIAL ICONS
   ========================================================================== */

/* DUNS credibility line in footer contact column */
.footer-duns {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1rem;
}

.footer-duns-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-duns-number {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: var(--tracking-wide);
}

/* Social icon row — sits below the main footer grid, above the meta line */
.footer-social {
  margin-top: 3rem;
  padding-top: 2rem;
  padding-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

/* When the social row precedes the footer-meta, collapse the stacked spacing
   between them — footer-meta's default top-spacing is sized for when it
   follows the main grid, which is farther away than the social row. */
.footer-social + .footer-meta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.footer-social-label {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-cyan);
}

.footer-social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.footer-social-list li {
  padding: 0;
  margin: 0;
}

.footer-social-list li::before {
  display: none;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base),
              transform var(--transition-base);
}

/* Default state: icons use the link color via currentColor */
.footer-social-link svg {
  display: block;
  color: inherit;
}

/* On hover: icon becomes dark navy, background becomes cyan, border stays
   lightly visible. We force the SVG stroke and fill explicitly (not just via
   currentColor) so the icon color applies immediately and reliably across
   all browsers. */
.footer-social-link:hover {
  color: #1a1f36;
  background-color: var(--color-cyan);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.footer-social-link:hover svg {
  color: #1a1f36;
}

.footer-social-link:hover svg [stroke] {
  stroke: #1a1f36;
}

.footer-social-link:hover svg [fill]:not([fill="none"]) {
  fill: #1a1f36;
}

/* On narrower viewports, let the label stack above the icons */
@media (max-width: 480px) {
  .footer-social {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}