/* ============================================================
   North Aero, Inc - Main Stylesheet
   Design System: Parchment + Hangar Charcoals + Runway Orange
   ============================================================ */

/* ---- FONT IMPORTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Oswald:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600;1,700&display=swap');

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

/* ---- DESIGN TOKENS ---- */
:root {
  /* Hangar charcoals */
  --hangar-900: #1A1B1D;
  --hangar-800: #2A2C2F;
  --hangar-700: #3B3E42;
  --hangar-600: #4F5256;
  --hangar-500: #6B6E73;
  --hangar-400: #909499;
  --hangar-300: #B8BCC2;
  --hangar-200: #D8DBDF;
  --hangar-100: #ECEEF1;
  --hangar-50:  #F5F6F8;

  /* Parchment */
  --parchment:        #F4EFE3;
  --parchment-light:  #FAF6EC;
  --parchment-dark:   #E8E1D0;
  --parchment-deep:   #D9CFB8;

  /* Runway orange */
  --runway-700: #B5430E;
  --runway-600: #D55518;
  --runway-500: #E86A28;
  --runway-400: #F08A4F;
  --runway-300: #F6B084;
  --runway-100: #FBE4D2;

  /* Beacon green */
  --beacon-700: #1F5F3A;
  --beacon-500: #2E8B57;
  --beacon-300: #7FBF9A;
  --beacon-100: #DCEEE3;

  /* Caution amber */
  --caution-500: #D4A017;

  /* Warning red */
  --warning-500: #C0392B;

  /* Radii (design-system scale + sanctioned photo exception, Erick 2026-07-04) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-photo: 10px; /* photos only — sanctioned exception, see design-system README */

  /* Semantic aliases */
  --na-bg:      var(--parchment-light);
  --na-surface: #FFFFFF;
  --na-fg:      var(--hangar-900);
  --na-fg-2:    var(--hangar-600);
  --na-fg-muted:var(--hangar-400);
  --na-border:  var(--hangar-200);
  --na-accent:  var(--runway-500);
  --na-accent-hover: var(--runway-600);
  --na-accent-press: var(--runway-700);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Max width */
  --max-w: 1200px;
  --max-w-narrow: 800px;
  --max-w-wide: 1400px;
}


/* ============================================================
   GLOBAL FOUNDATIONS
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--na-bg);
  color: var(--na-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--na-accent);
  text-decoration: none;
  transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
  color: var(--na-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---- CONTAINER ---- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.container--narrow {
  max-width: var(--max-w-narrow);
}
.container--wide {
  max-width: var(--max-w-wide);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Display / H1: Oswald Italic 600, sentence case */
h1, .h1 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--na-fg);
}

/* H2: Oswald 600, uppercase */
h2, .h2 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--na-fg);
}

/* H3: Inter Bold */
h3, .h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--na-fg);
}

/* H4-H6: Inter Semi-Bold */
h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--na-fg);
}

/* Type scale: 1.25 major third */
h1, .h1 { font-size: clamp(36px, 5vw, 64px); }
h2, .h2 { font-size: clamp(22px, 3vw, 36px); }
h3, .h3 { font-size: clamp(18px, 2.5vw, 28px); }
h4, .h4 { font-size: clamp(16px, 2vw, 22px); }

p {
  margin-bottom: 1em;
  max-width: 70ch;
}

/* Eyebrow label */
.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--na-fg-2);
  margin-bottom: var(--space-sm);
}

/* Mono for aviation data */
.mono, code, pre, kbd {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}


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

.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background-color: var(--na-accent);
  color: #FFFFFF;
}
.btn--primary:hover {
  background-color: var(--na-accent-hover);
  color: #FFFFFF;
}
.btn--primary:active {
  background-color: var(--na-accent-press);
  transform: translateY(1px);
}

.btn--secondary {
  background-color: var(--parchment-dark);
  color: var(--na-fg);
  border: 1px solid var(--hangar-300);
}
.btn--secondary:hover {
  background-color: var(--parchment-deep);
  color: var(--na-fg);
}

.btn--inverse {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn--inverse:hover {
  background-color: rgba(255,255,255,0.1);
  color: #FFFFFF;
}

.btn--large {
  font-size: 16px;
  padding: 16px 36px;
}

.btn-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}


/* ============================================================
   HAIRLINE RULES
   ============================================================ */

hr, .rule {
  border: none;
  border-top: 1px solid var(--hangar-700);
  margin: var(--space-xl) 0;
}
.rule--light {
  border-top-color: var(--hangar-200);
}


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

.site-header {
  background-color: var(--na-bg);
  border-bottom: 1px solid var(--hangar-700);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: var(--max-w-wide);
  margin: 0 auto;
}

.site-header__logo {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--na-fg);
  text-decoration: none;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__logo:hover {
  color: var(--na-fg);
  text-decoration: none;
}
.site-header__logo span {
  font-weight: 400;
  color: var(--na-fg-2);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
}

.site-nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--na-fg);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--na-accent);
  text-decoration: none;
}

.site-nav__dropdown {
  position: relative;
}
.site-nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--na-surface);
  border: 1px solid var(--hangar-200);
  border-radius: 2px;
  padding: var(--space-sm) 0;
  min-width: 220px;
  z-index: 200;
  margin-top: var(--space-sm);
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  /* Forgiving dropdown: keep it in the DOM but hidden, so on close it fades out
     after a short grace delay instead of snapping shut the instant the mouse moves. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 140ms ease 140ms, visibility 0s linear 280ms;
}
/* Invisible bridge spanning the gap between the "Programs" button and the menu,
   so moving the mouse from the button down to the menu never lands in dead space. */
.site-nav__dropdown-menu::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-sm) - 2px);
  left: 0;
  right: 0;
  height: calc(var(--space-sm) + 2px);
}
.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 120ms ease, visibility 0s;
}
.site-nav__dropdown-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
}
.site-nav__dropdown-menu a:hover {
  background-color: var(--parchment);
}

.site-nav__dd-sep {
  border-top: 1px solid var(--hangar-200);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}
.site-nav__dd-sep a {
  color: var(--runway-600);
  font-weight: 600;
}

.site-header__phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--na-fg-2);
  margin-right: var(--space-lg);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--na-fg);
  margin: 5px 0;
  transition: transform 200ms ease;
}


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

.site-footer {
  background-color: var(--hangar-900);
  color: var(--parchment-light);
  padding: var(--space-4xl) 0 var(--space-xl);
}

.site-footer__inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
}

.site-footer h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--parchment-light);
  margin-bottom: var(--space-md);
}

.site-footer p {
  color: var(--hangar-300);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer a {
  color: var(--parchment-dark);
  font-size: 14px;
}
.site-footer a:hover {
  color: var(--na-accent);
}

.site-footer__links {
  list-style: none;
}
.site-footer__links li {
  margin-bottom: var(--space-sm);
}

.site-footer__bottom {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) 0;
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--hangar-700);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-footer__bottom p {
  font-size: 13px;
  color: var(--hangar-400);
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section {
  padding: var(--space-4xl) 0;
}
.section--sm {
  padding: var(--space-3xl) 0;
}
.section--dark {
  background-color: var(--hangar-900);
  color: var(--parchment-light);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--parchment-light);
}
.section--dark p {
  color: var(--hangar-300);
}
/* Interior page hero: an aircraft photo behind the heading, with a left-weighted
   scrim so the light heading text stays legible over any image. */
.page-hero {
  position: relative;
  background-color: var(--hangar-900);
  background-size: cover;
  background-position: center 42%;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,27,29,0.92) 0%, rgba(26,27,29,0.76) 44%, rgba(26,27,29,0.5) 100%);
  z-index: 0;
}
.page-hero > .container,
.page-hero > .hero__content { position: relative; z-index: 1; }
.section--parchment {
  background-color: var(--parchment);
}
.section--surface {
  background-color: var(--na-surface);
}

.section__header {
  margin-bottom: var(--space-3xl);
}
.section__header--center {
  text-align: center;
}


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

.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: var(--hangar-900);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Scrim: deepened for text legibility over bright photos (Erick, Aug 2026).
   Still a functional photo scrim per the sanctioned design-system exception;
   the right side stays light so the airplane reads. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(26,27,29,0.94) 0%, rgba(26,27,29,0.78) 42%, rgba(26,27,29,0.35) 72%, rgba(26,27,29,0.12) 100%);
  z-index: 1;
}
/* Background video layer (falls back to background-image poster) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero h1, .hero__subtitle {
  text-shadow: 0 1px 3px rgba(26,27,29,0.55), 0 2px 18px rgba(26,27,29,0.7);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-lg);
}
.hero h1 {
  color: var(--parchment-light);
  margin-bottom: var(--space-lg);
  max-width: 14ch;
}
.hero__subtitle {
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--parchment-light);
  font-weight: 500;
  max-width: 50ch;
  margin-bottom: var(--space-2xl);
  line-height: 1.5;
}
.hero .btn-group {
  margin-top: var(--space-xl);
}
/* Hero social proof: real students in the first screen (checklist items 1 and 5). */
.hero__proof {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  margin-top: var(--space-2xl); max-width: 46ch;
}
.hero__avatars { display: flex; flex: none; }
.hero__avatars img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--parchment-light); margin-left: -14px;
  box-shadow: 0 2px 8px rgba(26,27,29,0.5);
}
.hero__avatars img:first-child { margin-left: 0; }
.hero__proof-quote {
  color: var(--parchment-light); font-style: italic; font-size: 16px; line-height: 1.4;
  margin: 0; text-shadow: 0 1px 3px rgba(26,27,29,0.65);
}
.hero__proof-cite { color: var(--parchment-light); opacity: .92; font-size: 13px; margin: 5px 0 0; }
.hero__proof-cite a { color: var(--runway-300); text-decoration: none; }
.hero__rating { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 13px; }
.hero__rating .stars { color: var(--runway-500); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.hero__rating a { color: var(--parchment-light); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(250,246,236,0.35); padding-bottom: 1px; }
.hero__rating a:hover { border-bottom-color: var(--parchment-light); }
@media (max-width: 640px) {
  .hero__proof { gap: 12px; }
  .hero__avatars img { width: 38px; height: 38px; margin-left: -12px; }
  .hero__proof-quote { font-size: 15px; }
}


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

.card {
  background: var(--na-surface);
  border: 1px solid var(--hangar-200);
  border-radius: 2px;
  padding: var(--space-xl);
  transition: border-color 200ms cubic-bezier(0.32, 0.08, 0.24, 1);
}
.card:hover {
  border-color: var(--hangar-700);
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
}

.card h3 {
  margin-bottom: var(--space-sm);
}
.card p {
  color: var(--na-fg-2);
  font-size: 15px;
}

.card-grid {
  display: grid;
  gap: var(--space-lg);
}
.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}


/* ============================================================
   DIFFERENTIATORS
   ============================================================ */

.diff {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
  align-items: start;
}
.diff__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--runway-100);
  border-radius: 2px;
  flex-shrink: 0;
}
.diff__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--na-accent);
  fill: none;
  stroke-width: 2;
}
.diff h3 {
  font-size: 18px;
  margin-bottom: 4px;
}
.diff p {
  color: var(--na-fg-2);
  font-size: 15px;
  margin-bottom: 0;
}

.diff-list {
  display: grid;
  gap: var(--space-2xl);
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial {
  background: var(--na-surface);
  border: 1px solid var(--hangar-200);
  border-radius: 2px;
  padding: var(--space-xl);
}
.testimonial__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--na-fg);
  margin-bottom: var(--space-lg);
  font-style: italic;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.testimonial__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hangar-200);
}
.testimonial__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--na-fg);
}
.testimonial__detail {
  font-size: 13px;
  color: var(--na-fg-2);
}


/* ============================================================
   MISSION STATEMENT
   ============================================================ */

.mission {
  background-color: var(--hangar-900);
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
}
.mission__text {
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--parchment-light);
  line-height: 1.35;
  max-width: 34ch;
  margin: 0 auto;
  text-wrap: balance;
}
.mission__eyebrow {
  color: var(--runway-300);
  margin-bottom: var(--space-md);
}
.mission__zero { color: var(--runway-400); font-size: 1.12em; }


/* ============================================================
   CTA SECTIONS
   ============================================================ */

.cta-section {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}
.cta-section h2 {
  margin-bottom: var(--space-md);
}
.cta-section p {
  color: var(--na-fg-2);
  margin: 0 auto var(--space-xl);
  max-width: 50ch;
}

/* Lead capture form */
.lead-form {
  display: flex;
  gap: var(--space-sm);
  max-width: 500px;
  margin: 0 auto;
}
.lead-form input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--hangar-200);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: var(--na-surface);
  color: var(--na-fg);
}
.lead-form input:focus {
  outline: 2px solid var(--na-accent);
  outline-offset: 2px;
  border-color: var(--na-accent);
}
.lead-form .btn {
  white-space: nowrap;
}

.lead-form__trust {
  font-size: 13px;
  color: var(--na-fg-muted);
  margin-top: var(--space-sm);
  text-align: center;
}


/* ============================================================
   IMAGE + TEXT (side by side)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.split--reverse {
  direction: rtl;
}
.split--reverse > * {
  direction: ltr;
}
.split__image {
  border-radius: 2px;
  overflow: hidden;
}
.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A .lead-form is styled as an inline row for email capture. When it is used as a
   full contact form inside a .split (the contact page), stack the fields and
   top-align the two columns so the form does not overflow or float against the map. */
.split .lead-form { flex-direction: column; max-width: none; }
.split:has(.lead-form) { align-items: start; }


/* ============================================================
   FAQ
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--hangar-200);
  padding: var(--space-lg) 0;
}
.faq-item summary {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--na-fg-muted);
  transition: transform 200ms ease;
}
.faq-item[open] summary::after {
  content: '\2212';
}
.faq-item p {
  padding-top: var(--space-md);
  color: var(--na-fg-2);
  font-size: 15px;
}


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

.program-card {
  background: var(--na-surface);
  border: 1px solid var(--hangar-200);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.32, 0.08, 0.24, 1);
}
.program-card:hover {
  border-color: var(--hangar-700);
}
.program-card__image {
  height: 200px;
  background-color: var(--hangar-100);
  background-size: cover;
  background-position: center;
}
.program-card__body {
  padding: var(--space-xl);
}
.program-card__body h3 {
  margin-bottom: var(--space-sm);
}
.program-card__body p {
  color: var(--na-fg-2);
  font-size: 15px;
  margin-bottom: var(--space-md);
}


/* ============================================================
   CHECKLIST (for requirements sections)
   ============================================================ */

.checklist {
  list-style: none;
}
.checklist li {
  padding: var(--space-sm) 0;
  padding-left: var(--space-xl);
  position: relative;
  font-size: 15px;
  color: var(--na-fg-2);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hangar-300);
  border-radius: 2px;
}


/* ============================================================
   PRICING TABLE
   ============================================================ */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.pricing-table th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-md);
  border-bottom: 2px solid var(--hangar-700);
  font-family: 'Inter', sans-serif;
}
.pricing-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--hangar-200);
}
.pricing-table .mono {
  font-family: 'JetBrains Mono', monospace;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The header CTA button never wraps to two lines */
.site-header__inner .btn { white-space: nowrap; }

/* Mid-width desktops: the full inline nav plus Student login and the phone number
   is too wide and crowds the wordmark. Drop those two extras (both live in the
   footer) and tighten the nav gap until there is room for them again (~1367px+). */
@media (max-width: 1366px) {
  .site-header__inner a[href*="flightcircle"] { display: none; }
  .site-header__phone { display: none; }
  .site-nav { gap: var(--space-lg); }
}

@media (max-width: 1024px) {
  /* nav collapses to hamburger at tablet width to prevent mid-width crowding */
  .site-nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header__phone { display: none; }
  .site-header__inner a[href*="flightcircle"] { display: none; }
  .site-nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--na-bg);
    border-bottom: 1px solid var(--hangar-700);
    padding: var(--space-lg);
    gap: var(--space-md);
    z-index: 300;
  }
  /* In the hamburger menu, expand the Programs submenu inline, since touch has no hover */
  .site-nav--open .site-nav__dropdown-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    border: none;
    min-width: 0;
    margin-top: 0;
    padding: 6px 0 2px var(--space-md);
    transition: none;
  }
  .site-nav--open .site-nav__dropdown-menu::before { display: none; }
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .site-nav {
    display: none;
  }
  .site-header__phone {
    display: none;
  }
  .nav-toggle {
    display: block;
    margin-left: auto; /* keep the menu button at the right edge, off the wordmark */
  }

  /* Mobile nav open state */
  .site-nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--na-bg);
    border-bottom: 1px solid var(--hangar-700);
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  .hero {
    min-height: 70vh;
  }
  .hero h1 {
    font-size: 36px;
  }
  /* Full-width scrim on small screens: deepened for legibility (Erick, Aug 2026) */
  .hero::before {
    background: linear-gradient(180deg, rgba(26,27,29,0.9) 0%, rgba(26,27,29,0.78) 55%, rgba(26,27,29,0.6) 100%);
  }
  /* Declutter header: hide student login, shrink wordmark and CTA */
  .site-header__inner a[href*="flightcircle"] {
    display: none;
  }
  .site-header__wordmark {
    font-size: 16px;
  }
  .site-header__inner .btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .site-header__inner {
    gap: var(--space-sm);
  }
  .site-header__wordmark {
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  /* Erick's call: on phones drop the header Schedule button so the full logo
     (emblem + name) and the menu button fit cleanly without overlapping. The
     button stays on tablet and desktop, and every page has Schedule buttons
     in its own content. */
  .site-header__inner .btn {
    display: none;
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .split--reverse {
    direction: ltr;
  }

  .card-grid--3,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

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

  .lead-form {
    flex-direction: column;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   STAT ROW  (added in consolidation pass)
   Credibility band near top of home page.
   ============================================================ */
.stat-row {
  background-color: var(--hangar-900);
  color: var(--parchment-light);
}
.stat-row__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  color: var(--runway-400);
  letter-spacing: 0.01em;
}
.stat__label {
  margin-top: var(--space-sm);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--parchment-dark);
}
@media (max-width: 720px) {
  .stat-row__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============================================================
   VALUE PROPS  (Why you'll love North Aero - image cards)
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.value-prop { text-align: left; }
.value-prop__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--hangar-100);
}
.value-prop h3 { margin-top: var(--space-md); }
.value-prop p { color: var(--na-fg-2); }
@media (max-width: 820px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* Testimonial photo helper for real headshots */
.testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PHOTO PLACEHOLDER  (aircraft pages, awaiting real photos)
   ============================================================ */
.photo-tbd {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--hangar-300);
  border-radius: var(--radius-photo);
  background: var(--parchment-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--na-fg-2);
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: var(--space-lg);
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--parchment-deep);
  vertical-align: top;
}
.spec-table th { width: 40%; color: var(--na-fg-2); font-weight: 600; }

/* ============================================================
   QUIZ  (self-segmentation)
   ============================================================ */
.quiz { max-width: 720px; margin: 0 auto; }
.quiz__q { margin-bottom: var(--space-2xl); }
.quiz__q > p { font-weight: 600; margin-bottom: var(--space-md); }
.quiz__options { display: grid; gap: var(--space-sm); }
.quiz__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--parchment-deep); border-radius: 4px;
  background: var(--parchment-light); color: var(--na-fg);
  font: inherit; transition: border-color .15s, background .15s;
}
.quiz__opt:hover { border-color: var(--runway-400); }
.quiz__opt.is-selected { border-color: var(--runway-500); background: var(--runway-100); }
.quiz__result {
  display: none; padding: var(--space-2xl); border-radius: 4px;
  background: var(--hangar-900); color: var(--parchment-light); text-align: center;
}
.quiz__result h3 { color: var(--parchment-light); }
.quiz__result .eyebrow { color: var(--runway-300); }

/* ============================================================
   PHOTO BAND  (full-bleed strip of real training moments)
   ============================================================ */
.photo-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.photo-band img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.photo-band--tall img { aspect-ratio: 4 / 5; }
@media (max-width: 820px) {
  .photo-band { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   VIDEO FEATURE  (full-bleed video with caption)
   ============================================================ */
.video-feature {
  position: relative;
  background: var(--hangar-900);
}
.video-feature video {
  width: 100%;
  max-height: 76vh;
  object-fit: cover;
  display: block;
}
.video-feature__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  background: linear-gradient(to top, rgba(26,27,29,0.7), rgba(26,27,29,0));
  color: var(--parchment-light);
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
}

/* Balanced headings site-wide (prevents awkward single-word wraps) */
h1, .h1, h2, .h2, .mission__text { text-wrap: balance; }

/* Header logo lockup: badge + readable wordmark */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__logo img { flex-shrink: 0; }
.site-header__wordmark {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--na-fg);
  white-space: nowrap;
}

/* ============================================================
   FAQ  (native accordion)
   ============================================================ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--parchment-deep);
  padding: var(--space-lg) 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 18px;
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--runway-500); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: var(--space-md); color: var(--na-fg-2); }

/* ============================================================
   STUDENT STORIES / TESTIMONIALS
   ============================================================ */
.story-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-3xl); align-items: center; }
.story-hero__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--parchment-dark); aspect-ratio: 4/5; }
.story-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--runway-700); background: var(--runway-100); border-radius: 100px; padding: 5px 13px; }
.story-lead { font-family: 'Oswald', sans-serif; font-style: italic; font-weight: 600; font-size: clamp(21px, 3vw, 30px); line-height: 1.22; color: var(--hangar-900); margin: var(--space-md) 0 0; }
.pull { border-left: 4px solid var(--runway-500); background: var(--na-surface); padding: var(--space-lg) var(--space-xl); border-radius: 2px; margin: var(--space-lg) 0; }
.pull p { font-size: 20px; line-height: 1.5; color: var(--hangar-900); font-style: italic; margin: 0; }
.pull cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: var(--hangar-600); font-family: 'Inter', sans-serif; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); aspect-ratio: 4/3; display: block; }
.photo-ph { aspect-ratio: 4/3; border: 2px dashed var(--hangar-300); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--hangar-500); font-size: 13px; background: var(--parchment); text-align: center; padding: 10px; }
.story-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
.story-card { background: var(--na-surface); border: 1px solid var(--hangar-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.story-card__media { aspect-ratio: 3/2; background: var(--parchment-dark); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.story-card__quote { font-style: italic; color: var(--hangar-800); font-size: 16px; line-height: 1.5; flex: 1; }
@media (max-width: 768px) {
  .story-hero { grid-template-columns: 1fr; gap: var(--space-xl); }
  .story-hero__media { aspect-ratio: 4/3; max-height: 440px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .story-cards { grid-template-columns: 1fr; }
}