/* ============================================================
   Roraima Airlines — Design System
   Type: Montserrat (official, self-hosted) / IBM Plex Mono (data accents only)
   Palette: official brand colors — Amazon Dusk / Patagonian Ember / Andean Mist
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Italic-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/Montserrat-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Brand colors (official) --- */
  --navy-900: #192840; /* Amazon Dusk */
  --navy-700: #24365a;
  --navy-500: #3a4f78;
  --red-600: #c9263a; /* Patagonian Ember */
  --red-700: #a11e2e;
  --gray-300: #dbdbdf; /* Andean Mist */
  --gray-200: #eceaea;
  --cream-50: #f7f6f3;
  --ink-900: #14202f;
  --white: #ffffff;

  /* --- Status --- */
  --status-active: #2e7d4f;
  --status-active-bg: #e6f2ea;
  --status-grounded: #a11e2e;
  --status-grounded-bg: #f6e6e8;

  /* --- Type --- */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* --- Layout --- */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --border-hairline: 1px solid rgba(25, 40, 64, 0.14);
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.18);
  --shadow-card: 0 1px 2px rgba(20, 32, 47, 0.06), 0 8px 24px -12px rgba(20, 32, 47, 0.18);
  --shadow-card-hover: 0 4px 10px rgba(20, 32, 47, 0.08), 0 16px 36px -14px rgba(20, 32, 47, 0.26);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  font-family: var(--font-body);
  background: var(--cream-50);
  color: var(--ink-900);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2.5px solid var(--red-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-600);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--red-600);
  transform-origin: left;
  transition: transform 420ms var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 60ms);
}
/* Inside a revealing block the dash draws itself; elsewhere (hero) it is static */
.reveal .eyebrow::before { transform: scaleX(0); }
.reveal.is-visible .eyebrow::before { transform: scaleX(1); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--navy-700);
  max-width: 62ch;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: var(--space-3);
}
.section-head h2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--red-600);
  transform-origin: left;
  transition: transform 520ms var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 140ms);
}
/* Only heads that take part in the scroll reveal draw their rule — any head
   without .reveal keeps the underline painted from the start. */
.section-head.reveal h2::after { transform: scaleX(0); }
.section-head.reveal.is-visible h2::after { transform: scaleX(1); }
.section-head--center h2 { margin: 0 auto; }
.section-head--center h2::after { transform-origin: center; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--navy-700);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 900px) { .container { padding-inline: var(--space-7); } }

/* Sections clip so that off-canvas reveal start positions can never widen the
   page. `clip` is preferred where supported: it creates no scroll container. */
.section { padding-block: var(--space-8); overflow: hidden; overflow: clip; }
.section--tight { padding-block: var(--space-7); }
.section--dark, .section--navy { background: var(--navy-900); color: var(--white); }
.section--dark h2, .section--dark h3, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--red { background: var(--red-600); color: var(--white); }
.section--red h2, .section--red h3 { color: var(--white); }
.section--red .section-head h2 { border-bottom-color: var(--white); }
.section--cream { background: var(--cream-50); }
.section--white { background: var(--white); }

/* Text on red or navy backgrounds reads white for contrast, regardless of
   the component's default (muted) color elsewhere on the page. */
.section--red .eyebrow,
.section--navy .eyebrow,
.section--dark .eyebrow {
  color: var(--white);
}
.section--red .eyebrow::before,
.section--navy .eyebrow::before,
.section--dark .eyebrow::before {
  background: var(--white);
}
.section--red .lede,
.section--navy .lede,
.section--dark .lede,
.section--red p,
.section--navy p,
.section--dark p,
.section--red .band__text p,
.section--navy .band__text p,
.section--dark .band__text p,
.section--red .mono-label,
.section--navy .mono-label,
.section--dark .mono-label {
  color: var(--white);
}

/* --reveal-delay is set per element by initScrollReveal so a grid that enters
   the viewport together sweeps in reading order instead of flashing at once. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* .is-stagger is set by initScrollReveal on grids that reveal as one block, so
   their cards fan in individually. It is never added under reduced motion. */
.reveal.is-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-stagger.is-visible > * { opacity: 1; transform: none; }

/* ---- Directional reveals -------------------------------------------------
   The default is a vertical rise. Two-column bands instead enter from the
   side each column occupies, and process rows advance from the left, so the
   movement always follows the layout rather than decorating it. */

/* Two columns only from 860px up — below that a band is stacked and a
   sideways entrance would be meaningless. */
@media (min-width: 860px) {
  .reveal.band { transform: none; } /* the parent just fades; children move */
  .reveal.band > * {
    transition: transform 560ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.band > *:first-child { transform: translateX(-40px); }
  .reveal.band > *:last-child { transform: translateX(40px); }
  /* --reverse flips the columns with `order`, so the sides flip too */
  .reveal.band--reverse > *:first-child { transform: translateX(40px); }
  .reveal.band--reverse > *:last-child { transform: translateX(-40px); }
  .reveal.band.is-visible > *:first-child,
  .reveal.band.is-visible > *:last-child { transform: none; }
}

/* Steps slide in from the left, one after another: the row reads as a
   sequence advancing. Leftward only — a rightward offset would widen the page. */
.reveal.is-stagger.step-row > *,
.reveal.is-stagger.step-grid > * { transform: translateX(-26px); }
.reveal.is-stagger.step-row.is-visible > *,
.reveal.is-stagger.step-grid.is-visible > * { transform: none; }

/* Band photography fades up out of a slight overscale as its block reveals */
.reveal .band__media img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 700ms var(--ease), transform 760ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible .band__media img { opacity: 1; transform: none; }

/* Each selector below mirrors one above at equal specificity, and sits later in
   the file, so every reveal start state is neutralised rather than out-weighed. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-stagger > * { opacity: 1; transform: none; }
  .reveal.band > *:first-child,
  .reveal.band > *:last-child,
  .reveal.is-stagger.step-row > *,
  .reveal.is-stagger.step-grid > *,
  .reveal .band__media img { transform: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85em 1.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--red-600); color: var(--white); }
.btn--primary:hover { background: var(--red-700); box-shadow: 0 10px 24px -10px rgba(200, 37, 58, 0.55); }

.btn--ghost-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.55); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn--ghost-dark { background: transparent; color: var(--navy-900); border: 1.5px solid rgba(25,40,64,0.3); }
.btn--ghost-dark:hover { background: rgba(25,40,64,0.06); border-color: var(--navy-900); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(25, 40, 64, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: var(--border-hairline-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand img { height: 46px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav__links {
  display: flex;
  gap: var(--space-5);
  font-size: 0.92rem;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  color: var(--gray-300);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--white); }

/* Airspace external-portal pill */
.nav__links a.nav__cta {
  border: 1.5px solid var(--red-600);
  border-radius: 999px;
  padding: 0.35em 1em;
  color: var(--white);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__links a.nav__cta::after { display: none; }
.nav__links a.nav__cta:hover { background: var(--red-600); }

.lang-toggle {
  display: flex;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
}
.lang-toggle button {
  padding: 0.3em 0.75em;
  border-radius: 999px;
  color: rgba(255,255,255,0.6);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-toggle button[aria-pressed="true"] { background: var(--red-600); color: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav-toggle span { width: 22px; height: 2px; background: var(--white); border-radius: 2px; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy-900);
    padding: var(--space-3) var(--space-5) var(--space-5);
    border-bottom: var(--border-hairline-dark);
  }
  /* The links must become blocks here: as inline boxes their vertical padding
     spills over the neighbouring rows instead of spacing them apart. */
  .site-header.is-open .nav__links a {
    display: block;
    padding-block: var(--space-3);
  }
  .site-header.is-open .nav__links a::after { display: none; }
  .site-header.is-open .nav__links li + li { border-top: var(--border-hairline-dark); }
  /* The Airspace pill keeps its own shape and sits between hairlines, not on one */
  .site-header.is-open .nav__links li:has(> .nav__cta),
  .site-header.is-open .nav__links li:has(> .nav__cta) + li { border-top: 0; }
  .site-header.is-open .nav__links a.nav__cta {
    display: inline-block;
    margin-block: var(--space-4);
    padding: 0.5em 1.2em;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 38%, var(--red-700) 100%);
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.55;
  mix-blend-mode: luminosity;
  /* Only a `from` keyframe, so the fade lands on whatever resting opacity the
     photo has (0.55) instead of hardcoding it in two places. */
  animation: photo-in 1100ms var(--ease) both;
}
@keyframes photo-in { from { opacity: 0; } }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,40,64,0.35) 0%, rgba(25,40,64,0.55) 55%, rgba(25,40,64,0.92) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-8) var(--space-7);
  max-width: 780px;
}
/* Hero lines fade up in sequence on load — no observer involved, so it runs
   before anything is scrolled. `both` keeps the end state under reduced
   motion, where the global block collapses the duration to nothing. */
.hero__content > * { animation: hero-in 620ms var(--ease) both; }
.hero__content > *:nth-child(1) { animation-delay: 60ms; }
.hero__content > *:nth-child(2) { animation-delay: 130ms; }
.hero__content > *:nth-child(3) { animation-delay: 200ms; }
.hero__content > *:nth-child(4) { animation-delay: 270ms; }
.hero__content > *:nth-child(5) { animation-delay: 340ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero h1 { color: var(--white); margin-block: var(--space-4); }
.hero .lede { color: var(--gray-300); }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

.hero__wordmark {
  height: 87px;
  width: auto;
  margin-top: var(--space-4);
}
@media (max-width: 640px) {
  .hero__wordmark { height: 60px; }
}
.hero__title--compact {
  font-size: clamp(1.4rem, 2.7vw, 1.95rem);
  max-width: 62ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* h2 two points (≈2.67px) smaller than the default scale */
.h2--sm { font-size: clamp(1.73rem, 3.4vw, 2.73rem); }

.btn--compact { padding-inline: 1em; }
@media (max-width: 640px) {
  .hero__title--compact { white-space: normal; }
}

.page-hero {
  min-height: 46vh;
}
.page-hero .hero__content { padding-block: var(--space-8) var(--space-6); }

/* ============================================================
   Ops board strip (stat strip)
   ============================================================ */
.ops-board {
  background: var(--ink-900);
  color: var(--gray-300);
  border-top: 1px solid var(--red-600);
}
.ops-board__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-5);
}
.ops-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ops-stat__value {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--white);
}
.ops-stat__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-600);
}

/* ============================================================
   Band sections (alternating image / text)
   ============================================================ */
.band {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 860px) {
  .band { grid-template-columns: 1fr 1fr; }
  .band--reverse .band__media { order: 2; }
}
.band__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__text { display: flex; flex-direction: column; gap: var(--space-4); }
.band__text .btn, .stack .btn { align-self: flex-start; }
.band__text p { color: var(--navy-700); }
.section--dark .band__text p { color: var(--gray-300); }

.band-stack { display: flex; flex-direction: column; gap: var(--space-7); }
.band-stack > .band:not(:last-child) { padding-bottom: var(--space-7); border-bottom: var(--border-hairline); }
.section--dark .band-stack > .band:not(:last-child) { border-bottom: var(--border-hairline-dark); }

/* ============================================================
   Tail Card — signature component
   ============================================================ */
.tail-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  display: flex;
  flex-direction: column;
}
.tail-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.tail-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background-image: radial-gradient(circle, var(--cream-50) 3.5px, transparent 3.6px);
  background-size: 16px 10px;
  background-position: center;
  z-index: 2;
}
.tail-card__photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-200); }
.tail-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.tail-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.tail-card__reg {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--red-600);
  font-weight: 600;
}
.tail-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--navy-900); }
.tail-card__name a {
  text-decoration-line: underline;
  text-decoration-color: rgba(201,38,58,0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.tail-card__name a:hover { color: var(--red-600); text-decoration-color: var(--red-600); }
.tail-card__sci { font-style: italic; color: var(--navy-700); font-size: 0.86rem; }
.tail-card__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--navy-700);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill--active { background: var(--status-active-bg); color: var(--status-active); }
.pill--grounded { background: var(--status-grounded-bg); color: var(--status-grounded); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
}

.family-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.family-tabs button {
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(25,40,64,0.2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--navy-700);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.family-tabs button[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.family-tabs button:hover:not([aria-pressed="true"]) { border-color: var(--navy-900); }

.fleet-group { margin-bottom: var(--space-7); }
.fleet-group__title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
}

/* ============================================================
   Placard / checklist card (Realismo Operativo)
   ============================================================ */
.placard {
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.placard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-600);
  border-bottom: var(--border-hairline-dark);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.95rem;
}
.checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 3px;
  border: 1.5px solid var(--red-600);
  border-radius: 3px;
}

/* ============================================================
   Patches (route badges)
   ============================================================ */
.patch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
  justify-items: center;
}
.patch-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.patch-card img {
  width: 100%;
  max-width: 170px;
  filter: drop-shadow(0 10px 18px rgba(20,32,47,0.25));
  transition: transform var(--dur-med) var(--ease);
}
.patch-card:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.patch-card__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }

/* ============================================================
   Cards (generic)
   ============================================================ */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* ============================================================
   Step cards (genuine sequence: application process)
   ============================================================ */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  counter-reset: step;
}
.step-card { position: relative; padding-top: var(--space-6); }
.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: var(--red-600);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.step-card h3 { margin-bottom: var(--space-2); }
.step-card p { color: var(--navy-700); font-size: 0.95rem; }

.channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.channel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.channel-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red-600); flex-shrink: 0; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.cta-band .btn { margin-top: var(--space-2); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink-900);
  color: var(--gray-300);
  padding-block: var(--space-7) var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hairline-dark);
}
.footer-brand img { height: 40px; margin-bottom: var(--space-3); }
.footer-brand p { font-size: 0.88rem; color: rgba(219,218,223,0.7); max-width: 32ch; }
.footer-col h4 { color: var(--white); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: var(--space-3); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.9rem; }
.footer-col a:hover { color: var(--white); }
.footer-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: rgba(219,218,223,0.55);
}
/* Its own line rather than a third item in .footer-base — that row is already
   two long strings apart, and a third would crowd it at desktop widths. */
.footer-copyright {
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(219,218,223,0.4);
}

/* ============================================================
   Fundacion badge block
   ============================================================ */
.funda-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.funda-block img { height: 56px; width: auto; flex-shrink: 0; }

/* ============================================================
   Live flights map + airport-style board
   ============================================================ */
.live-map {
  height: 440px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  /* Matches the light basemap, so tiles fade in from the map's own tone
     instead of flashing a dark panel first */
  background: var(--gray-200);
  position: relative;
  z-index: 0; /* keep Leaflet panes below the sticky header */
}

/* Full-bleed panel: the map and board run edge to edge, so the rounded corners
   come off — they would otherwise be cut against the viewport sides. The extra
   height keeps a very wide map from reading as a letterbox strip. */
.live-panel .live-map {
  border-radius: 0;
}
.live-panel .flight-board {
  border-radius: 0;
}
@media (min-width: 900px) {
  .live-panel .live-map { height: 520px; }
  /* The board keeps its full-bleed background, but its rows line up with the
     page's content column — six columns spread over a 1900px screen otherwise
     leave the data marooned, and the left edge stops matching every other
     section. Padding here plus zeroed outer cell padding puts the first column
     exactly on the container edge. */
  .live-panel .flight-board > * {
    max-width: var(--container-max);
    margin-inline: auto;
  }
  .live-panel .flight-board__meta { padding-inline: var(--space-7); }
  /* A collapsed-border table ignores its own padding, so the outer columns
     carry the inset that lands the first one on the container edge. */
  .live-panel .flight-board th:first-child,
  .live-panel .flight-board td:first-child { padding-left: var(--space-7); }
  .live-panel .flight-board th:last-child,
  .live-panel .flight-board td:last-child { padding-right: var(--space-7); }
}
.live-map .leaflet-container { height: 100%; background: var(--gray-200); }
/* The panel is a light map inside a white section — a hairline keeps its top
   edge from dissolving into the page. */
.live-panel { border-top: var(--border-hairline); }

.flight-board {
  background: var(--ink-900);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 2px solid var(--red-600);
  overflow-x: auto;
}
.flight-board table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  min-width: 640px;
}
.flight-board th {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-600);
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.flight-board td {
  color: var(--white);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.flight-board tr:last-child td { border-bottom: 0; }
.flight-board .board-route { color: var(--gray-300); }
.flight-board .board-route strong { color: var(--white); }
.flight-board .board-empty {
  text-align: center;
  color: var(--gray-300);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: var(--space-6);
}
.flight-board__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(219,219,223,0.6);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.board-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(46,125,79,0.25);
  color: #7fd6a4;
  white-space: nowrap;
}
/* One tone per flight phase, so the board can be read at a glance */
.board-status--taxi { background: rgba(219,219,223,0.18); color: var(--gray-300); }
.board-status--climb { background: rgba(86,148,214,0.22); color: #9dc6ef; }
.board-status--cruise { background: rgba(46,125,79,0.25); color: #7fd6a4; }
.board-status--descent { background: rgba(214,158,74,0.22); color: #f0c684; }
.board-status--approach { background: rgba(201,38,58,0.28); color: #f2a3ad; }

/* Airport chips at each end of a live route */
.route-endpoint {
  /* Leaflet gives the icon a 0×0 wrapper, so the chip has to lay itself out
     absolutely at its natural width or it collapses to nothing. */
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-4px, -4px); /* seat the dot on the coordinate */
  white-space: nowrap;
}
.route-endpoint__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--red-600);
  flex-shrink: 0;
}
.route-endpoint--arr .route-endpoint__dot { background: var(--red-600); border-color: var(--white); }
.route-endpoint__code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  background: rgba(15, 24, 38, 0.82);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 3px;
  padding: 1px 5px;
}
.plane-icon {
  color: var(--red-600);
  /* Lighter than it was over the dark basemap — a heavy shadow smudges on white */
  filter: drop-shadow(0 1px 2px rgba(20,32,47,0.35));
}

/* Live-data motion: a pulsing dot on the source line, dashes flowing along each
   route from departure to arrival, and a flash on figures that just changed. */
.board-live { display: inline-flex; align-items: center; gap: var(--space-2); }
.board-live__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-600);
  flex-shrink: 0;
}
.board-live__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red-600);
  animation: live-pulse 2.2s var(--ease) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* dashArray is "5 6", so one full period is 11 — the loop is seamless */
.route-line { animation: route-flow 1.4s linear infinite; }
@keyframes route-flow { to { stroke-dashoffset: -11; } }

.flight-board td.is-updated { animation: board-flash 1.6s var(--ease); }
@keyframes board-flash {
  from { background: rgba(201,38,58,0.35); }
  to   { background: transparent; }
}

/* ============================================================
   VATSIM badge (Community events)
   ============================================================ */
.vatsim-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.vatsim-badge:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.vatsim-badge img { height: 78px; width: auto; }

/* ============================================================
   Partners grid
   ============================================================ */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-5);
}
.partner-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.partner-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.partner-card__logo {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-card__logo img {
  max-height: 100%;
  max-width: 130px;
  object-fit: contain;
  border-radius: 8px;
}
.partner-card h3 { font-size: 1rem; }
.partner-card p { font-size: 0.85rem; color: var(--navy-700); line-height: 1.5; }

/* ============================================================
   Mini stats row (reused inside content sections)
   ============================================================ */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.section--dark .mini-stats,
.section--red .mini-stats {
  background: rgba(255,255,255,0.06);
  box-shadow: none;
  border: var(--border-hairline-dark);
}
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat__value { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--navy-900); }
.section--dark .mini-stat__value, .section--navy .mini-stat__value, .section--red .mini-stat__value { color: var(--white); }
.mini-stat__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-600); }
.section--red .mini-stat__label, .section--navy .mini-stat__label, .section--dark .mini-stat__label { color: var(--white); }

/* ============================================================
   Client / partner rows
   ============================================================ */
.client-list { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
}
.client-row:not(:last-child) { border-bottom: var(--border-hairline); }
.client-row__name { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); flex: 1 1 180px; }
.client-row__desc { color: var(--navy-700); font-size: 0.9rem; flex: 2 1 260px; }
.client-row__mult { font-family: var(--font-mono); font-weight: 600; color: var(--red-600); flex-shrink: 0; }

/* ============================================================
   Phase steps (numbered process)
   ============================================================ */
.step-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
}
/* Four fixed phases: 2×2 on phones, a single row from tablet up. A hard
   repeat(4,1fr) at phone widths overflows the viewport — the titles set a
   min-content floor the columns can't shrink past. */
.step-row--quad { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .step-row--quad { grid-template-columns: repeat(4, 1fr); }
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  position: relative;
}
.section--dark .step, .section--navy .step {
  background: rgba(255,255,255,0.06);
  box-shadow: none;
  border: var(--border-hairline-dark);
}
.step__number {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red-600);
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--navy-900); }
.section--dark .step__title, .section--navy .step__title { color: var(--white); }
.step__body { font-size: 0.88rem; color: var(--navy-700); }
.section--dark .step__body, .section--navy .step__body, .section--red .step__body { color: var(--white); }

/* ============================================================
   Utility
   ============================================================ */
.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;
}
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }