/* ============================================================
   Barnstormer Warbirds — vintage design system foundation
   Palette: warbird dealer identity (olive drab + gunmetal +
   cream parchment + brass + signal red CTAs).
   Fonts: Bebas Neue / Oswald / Playfair Display / Special Elite
   / Courier Prime (all SIL OFL, free commercial use).
   Motion lives only in section 13 (todo 9) inside the
   prefers-reduced-motion: no-preference gate.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */

:root {
  /* palette */
  --gunmetal:#1A1C1B;
  --gunmetal-2:#3E4440;
  --olive-drab:#6B6F4A;
  --parchment:#E3DCCB;
  --brass:#B38B3A;
  --signal-red:#C23A2A;

  /* derived ink / paper pairs */
  --ink:#1A1C1B;
  --paper:#E3DCCB;
  --body-fg:#1A1C1B;
  --body-bg:#E3DCCB;
  --hero-fg:#E3DCCB;
  --hero-bg:#1A1C1B;

  /* supporting tones (palette-derived only) */
  --ink-soft: rgba(26, 28, 27, 0.72);
  --ink-faint: rgba(26, 28, 27, 0.38);
  --paper-soft: rgba(227, 220, 203, 0.78);
  --paper-faint: rgba(227, 220, 203, 0.32);
  --brass-soft: rgba(179, 139, 58, 0.35);
  --signal-red-deep: #9E2E21;

  /* type families */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Playfair Display", "Georgia", serif;
  --font-accent: "Special Elite", "Courier Prime", "Courier New", monospace;
  --font-mono: "Courier Prime", "Courier New", monospace;

  /* type scale */
  --text-display: clamp(2.75rem, 7vw, 5.25rem);
  --text-h2: clamp(1.85rem, 3.2vw, 2.65rem);
  --text-h3: clamp(1.35rem, 2.1vw, 1.75rem);
  --text-h4: 1.15rem;
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-micro: 0.75rem;

  /* spacing scale (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* shape + line */
  --radius-0: 0;
  --radius-sm: 2px;
  --rule-brass: 2px dashed var(--brass);

  /* letterpress shadows */
  --letterpress-dark: 0 1px 0 rgba(227, 220, 203, 0.28), 0 -1px 1px rgba(26, 28, 27, 0.55);
  --letterpress-light: 0 1px 0 rgba(255, 255, 255, 0.22), 0 -1px 1px rgba(26, 28, 27, 0.18);

  /* paper texture: layered gradients + SVG turbulence noise (data URI, no image files) */
  --paper-texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(26, 28, 27, 0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(26, 28, 27, 0.02) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 12% 8%, rgba(179, 139, 58, 0.09), transparent 55%),
    radial-gradient(130% 100% at 88% 92%, rgba(107, 111, 74, 0.08), transparent 60%);
}

/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--body-bg);
  color: var(--body-fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--signal-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--signal-red-deep);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- 3. Type scale (five-font roles) ---------- */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-2);
  line-height: 1.12;
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h2);
  letter-spacing: 0.02em;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: 0.03em;
}

h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-2);
}

small {
  font-size: var(--text-small);
}

.caption {
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---------- 4. Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85em 1.8em;
  border: 2px solid var(--signal-red);
  border-radius: var(--radius-0);
  background-color: var(--signal-red);
  color: var(--parchment);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--gunmetal);
  border-color: var(--gunmetal);
  color: var(--parchment);
}

.btn--ghost {
  background-color: transparent;
  border: 2px solid var(--brass);
  color: var(--brass);
}

.btn--ghost:hover {
  background-color: var(--brass);
  border-color: var(--brass);
  color: var(--gunmetal);
}

/* ---------- 5. Eyebrow + spec table ---------- */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-1);
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: left;
}

.spec-table th,
.spec-table td {
  padding: 0.45em 0.7em;
  border-bottom: 1px solid var(--ink-faint);
  vertical-align: top;
}

.spec-table th {
  width: 42%;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.spec-table td {
  color: var(--ink);
}

/* ---------- 6. Parchment section treatment ---------- */

.parchment,
.section--parchment {
  background-color: var(--parchment);
  background-image: var(--paper-texture);
  color: var(--ink);
}

/* dark metal band counterpart (hero / inquiry bands) */
.gunmetal,
.section--gunmetal {
  background-color: var(--hero-bg);
  color: var(--hero-fg);
}

.gunmetal .eyebrow,
.section--gunmetal .eyebrow {
  color: var(--brass);
}

/* ---------- 7. Letterpress utility ---------- */

.letterpress {
  text-shadow: var(--letterpress-dark);
}

.gunmetal .letterpress,
.section--gunmetal .letterpress,
.hero .letterpress {
  text-shadow: var(--letterpress-light);
}

/* ---------- 8. Stencil-style section divider ---------- */

/* brass strip art wired as the rule's own texture (f2 fix);
   the dashed border stays underneath as the load-failure fallback */
.stencil-rule {
  display: block;
  height: 2rem;
  margin: var(--space-4) 0;
  border: 0;
  border-top: var(--rule-brass);
  background-image: url('../assets/svg/stencil-rule.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.85;
}

.stencil-rule--ruled {
  border-top: 1px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  height: 6px;
  opacity: 1;
  background-image: none;
}

/* ---------- 9. Rivet-dot border utility ---------- */

.rivets {
  position: relative;
}

.rivets::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--brass) 1.2px, transparent 1.4px),
    radial-gradient(circle, var(--brass) 1.2px, transparent 1.4px),
    radial-gradient(circle, var(--brass) 1.2px, transparent 1.4px),
    radial-gradient(circle, var(--brass) 1.2px, transparent 1.4px);
  background-size: 4px 22px, 4px 22px, 22px 4px, 22px 4px;
  background-position: left top, right top, left top, left bottom;
  background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
}

/* ---------- 10. Wordmark lockup (typographic, no logo file) ---------- */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gunmetal);
  text-decoration: none;
}

.wordmark__rule {
  display: block;
  width: 2.25rem;
  height: 2px;
  background-color: var(--brass);
}

.wordmark__prop {
  display: none;
  width: 1.85rem;
  height: 1.85rem;
  color: var(--brass);
}

.wordmark__prop img,
.wordmark__prop svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* prop slot is live only when the propeller accent is present */
.wordmark__prop:has(img),
.wordmark__prop:has(svg) {
  display: inline-flex;
}

.gunmetal .wordmark,
.section--gunmetal .wordmark,
.hero .wordmark {
  color: var(--parchment);
}

/* ---------- 11. Static parallax-layer stubs (positioning only) ---------- */

.parallax {
  position: relative;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.parallax__layer--far { z-index: 1; }
.parallax__layer--mid { z-index: 2; }
.parallax__layer--near { z-index: 3; }

/* --- todo 6: page structure + hero layout ---
   Nav + hero composition only. No motion here (todo 9 owns it),
   no reduced-motion / focus-visible rules (todo 10 owns them). */

/* sticky site nav — keeps the Inquire CTA on screen at every scroll position */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.site-nav .wordmark {
  font-size: clamp(1.2rem, 3.6vw, 1.65rem);
}

.site-nav nav {
  flex: 1 1 auto;
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__links a {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment);
}

.site-nav__links a:hover {
  color: var(--brass);
}

.site-nav__cta {
  flex: 0 0 auto;
}

/* hero shell: content grid above the three static parallax layers */
.hero {
  padding: var(--space-6) var(--space-4);
}

.hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-5);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

.hero__subhead {
  max-width: 36rem;
  color: var(--paper-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* hero photo: framed accent panel beside the copy (never behind it) */
.hero__photo {
  margin: 0;
  border: 2px solid var(--brass);
  background-color: var(--gunmetal-2);
}

.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* static placement for the decorative layer art (data-parallax hooks live in HTML) */
.hero .parallax__layer img {
  position: absolute;
  display: block;
}

.hero .hero-sky {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-clouds--far  { top: 7%;  left: 0; width: 100%; }
.hero .hero-clouds--mid  { top: 34%; left: 0; width: 100%; }
.hero .hero-clouds--near { top: 63%; left: 0; width: 100%; }
.hero .hero-plane        { top: 9%;  left: 42%; width: clamp(8rem, 14vw, 13rem); }
.hero .hero-prop         { top: 12%; right: 5%;  width: clamp(3rem, 5vw, 4.5rem); }

@media (max-width: 52rem) {
  .site-nav {
    padding: var(--space-1) var(--space-3);
    gap: var(--space-1) var(--space-2);
  }

  .site-nav .wordmark {
    font-size: 1.15rem;
  }

  .site-nav__links {
    justify-content: flex-start;
    gap: var(--space-1) var(--space-2);
  }

  .site-nav__links a {
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
  }

  .hero {
    padding: var(--space-5) var(--space-3);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .hero__photo {
    max-width: 32rem;
  }
}

/* --- todo 7: fleet cards + restoration ---
   Static layout only: spec-card grid, sample-listing badge,
   restoration story band. No motion here (todo 9 owns it),
   no fixed background attachment, no keyframes. */

/* shared section shell — matches the hero's 72rem content measure */
#fleet,
#restoration {
  padding: var(--space-6) var(--space-4);
}

.fleet__head {
  max-width: 72rem;
  margin: 0 auto;
}

.fleet__head h2 {
  max-width: 48rem;
}

.fleet__note {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 3-up at >= 52rem, 1-up below */
.fleet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 72rem;
  margin: var(--space-5) auto 0;
}

@media (min-width: 52rem) {
  .fleet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* spec card: brass-ruled manifest panel */
.aircraft-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--brass);
  background-color: var(--parchment);
  background-image: var(--paper-texture);
}

.aircraft-card__photo {
  margin: 0;
  border-bottom: 2px solid var(--brass);
  background-color: var(--gunmetal-2);
}

.aircraft-card__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.aircraft-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-3);
}

.aircraft-card__nickname {
  margin: 0 0 var(--space-1);
  font-family: var(--font-accent);
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  color: var(--brass);
}

.aircraft-card__role {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.aircraft-card .spec-table {
  margin: var(--space-2) 0;
}

.aircraft-card__price {
  margin: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* pin the card CTA to the bottom edge of the stretched card */
.aircraft-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* sample-listing microcopy stamp */
.badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 var(--space-2);
  padding: 0.3em 0.75em;
  border: 1px solid var(--brass);
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* restoration story: copy column + stencil-rule framed photo */
.restoration__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 52rem) {
  .restoration__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-5);
  }
}

.restoration__copy p {
  max-width: 40rem;
}

.restoration__photo {
  margin: 0;
  padding: var(--space-1);
  border: var(--rule-brass);
  background-color: var(--parchment);
}

.restoration__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--brass);
}

.restoration__photo .caption {
  margin: var(--space-1) 0 0;
  text-align: center;
}

/* --- todo 8: why-fly + testimonials + inquiry --- */
/* Static layout only: audience blocks, pull-quotes, inquiry band.
   No motion here (todo 9 owns it); reduced-motion and focus rules
   are owned by todo 10. Section-1 tokens only, no new palette. */

/* shared section shell — 72rem content measure (matches todo 6/7) */
#why-fly,
#stories,
#inquire {
  padding: var(--space-6) var(--space-4);
}

.why-fly__head,
.stories__head,
.inquire__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.why-fly__head h2,
.stories__head h2 {
  max-width: 48rem;
}

.stories__note {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* why-fly: three audience stanzas on the gunmetal band.
   SVG accents need the dark ground (plane-silhouette is parchment-toned). */
.why-fly__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 72rem;
  margin: var(--space-5) auto 0;
}

@media (min-width: 52rem) {
  .why-fly__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.why-fly__block {
  border-top: var(--rule-brass);
  padding-top: var(--space-3);
}

.why-fly__accent {
  display: block;
  height: 3rem;
  margin: 0 0 var(--space-2);
}

.why-fly__accent img {
  display: block;
  height: 3rem;
  width: auto;
}

.why-fly__block p {
  margin: 0;
  color: var(--paper-soft);
}

/* stories: parchment pull-quote panels (brass-ruled, like restoration__photo) */
.stories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 72rem;
  margin: var(--space-5) auto 0;
}

@media (min-width: 52rem) {
  .stories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.pull-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-3);
  border: var(--rule-brass);
  background-color: var(--parchment);
  background-image: var(--paper-texture);
}

.pull-quote blockquote {
  flex: 1 1 auto;
  margin: 0;
}

.pull-quote blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-h4);
  line-height: 1.55;
  color: var(--ink);
}

.pull-quote__attr {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--brass-soft);
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* inquiry: centered conversion band on gunmetal */
.inquire__inner {
  text-align: center;
}

.inquire__line {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-h4);
  color: var(--paper-soft);
}

.inquire__actions {
  margin: 0 0 var(--space-3);
}

.inquire__contact {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  color: var(--paper-soft);
}

.inquire__contact a {
  color: var(--brass);
}

.inquire__contact a:hover {
  color: var(--parchment);
}

.inquire__sep {
  margin: 0 var(--space-1);
  color: var(--paper-faint);
}

.inquire__support {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--paper-soft);
}

@media (max-width: 52rem) {
  #why-fly,
  #stories,
  #inquire {
    padding: var(--space-5) var(--space-3);
  }
}

/* ---------- 13. Motion layer (todo 9) ----------
   Parallax + flight animations. Every decorative motion
   declaration (and its keyframes) lives inside
   prefers-reduced-motion: no-preference — todo 10 completes
   the reduce path. Animated properties: transform / opacity
   ONLY (iOS-safe, GPU-composited; no top/left/width/height
   in any keyframe body).

   Engines:
   - Primary: CSS scroll-driven animations (animation-timeline)
     gated on @supports — parallax depth bands far 0.2x lag /
     mid 0.5x lag / near 1.0x+ rush, plus the plane cross.
   - Fallback: js/main.js loads vendored GSAP ScrollTrigger
     (vendor/) ONLY when animation-timeline is unsupported,
     mirroring the same transforms. */

@media (prefers-reduced-motion: no-preference) {

/* overscan (static positioning, never animated) so translated
   layers and drifting cloud strips never expose hero edges */
.hero .parallax__layer .hero-sky {
  top: -26vh;
  bottom: auto;
  height: calc(100% + 34vh);
}

.hero .parallax__layer .hero-clouds {
  left: -6%;
  width: 112%;
}

/* will-change only on continuously animated layers */
.parallax__layer--far,
.parallax__layer--mid,
.parallax__layer--near,
.hero .hero-prop,
.hero .hero-plane,
.hero .parallax__layer .hero-clouds {
  will-change: transform;
}

/* --- keyframes: transform / opacity only --- */

@keyframes engine-shudder {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  15% {
    transform: translate3d(3px, -2px, 0) rotate(0.35deg);
  }
  30% {
    transform: translate3d(-3px, 2px, 0) rotate(-0.4deg);
  }
  45% {
    transform: translate3d(2px, 3px, 0) rotate(0.3deg);
  }
  60% {
    transform: translate3d(-4px, -1px, 0) rotate(-0.25deg);
  }
  75% {
    transform: translate3d(2px, -2px, 0) rotate(0.15deg);
  }
  90% {
    transform: translate3d(-1px, 1px, 0) rotate(-0.1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes prop-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes cloud-drift {
  from {
    transform: translate3d(-2.5%, 0, 0);
  }
  to {
    transform: translate3d(2.5%, 0, 0);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes plane-cross {
  from {
    transform: translate3d(-75vw, 0, 0);
  }
  to {
    transform: translate3d(75vw, 0, 0);
  }
}

@keyframes parallax-far {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 22vh, 0);
  }
}

@keyframes parallax-mid {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 11vh, 0);
  }
}

@keyframes parallax-near {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -7vh, 0);
  }
}

/* --- time-based flight animations --- */

.hero .hero-prop {
  animation: prop-spin 0.3s linear infinite;
}

.hero .hero-clouds--far {
  animation: cloud-drift 58s ease-in-out -12s infinite alternate;
}

.hero .hero-clouds--mid {
  animation: cloud-drift 40s ease-in-out -20s infinite alternate;
}

.hero .hero-clouds--near {
  animation: cloud-drift 26s ease-in-out -7s infinite alternate;
}

/* engine-start shudder: once on load, then settle.
   position/z-index lift the shudder (and its z-4 content) back
   above the z1-3 layers — its transform creates a stacking context */
.hero-shudder {
  position: relative;
  z-index: 4;
  animation: engine-shudder 0.5s linear 1 both;
}

/* letterpress hero copy: subtle fade / translate-in on load */
.hero .letterpress {
  animation: hero-rise 0.8s ease-out 0.1s both;
}

.hero__subhead {
  animation: hero-rise 0.8s ease-out 0.22s both;
}

.hero__actions {
  animation: hero-rise 0.8s ease-out 0.34s both;
}

/* --- scroll-driven parallax + plane cross (primary engine) ---
   Layer ranges 0 120vh ≈ js MOTION_RANGE 1.2 (innerHeight); the
   plane cross finishes in 28vh so the sweep completes while the
   plane is still on screen (it slips under the sticky nav at
   ~20vh of scroll). Far layer lags most (slowest), near rushes. */
@supports (animation-timeline: view()) {

.parallax__layer--far {
  animation: parallax-far linear both;
  animation-timeline: scroll(root);
  animation-range: 0 120vh;
}

.parallax__layer--mid {
  animation: parallax-mid linear both;
  animation-timeline: scroll(root);
  animation-range: 0 120vh;
}

.parallax__layer--near {
  animation: parallax-near linear both;
  animation-timeline: scroll(root);
  animation-range: 0 120vh;
}

.hero-plane {
  animation: plane-cross linear both;
  animation-timeline: scroll(root);
  animation-range: 0 28vh;
}

}

}

/* --- todo 10: reduced-motion + keyboard path ---
   WCAG 2.2.2 (Level A) pause/stop/hide gate + keyboard operability
   + AA contrast. Section 13's no-preference gate stays the primary
   motion switch; the reduce block below is the explicit rest-pose
   layer (defense in depth) and never disables motion for visitors
   who did not ask. Contrast repairs are derived from section-1
   tokens via color-mix() — no new palette vars, core hexes intact. */

/* --- skip link: clipped until keyboard focus (first focusable,
   targets #main). Hidden state: 1px clipped box, zero layout impact. */
.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-2);
  z-index: 300;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0.65em 1.3em;
  border: 2px solid var(--brass);
  background-color: var(--gunmetal);
  color: var(--parchment);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* --- focus rings: 2px + offset on every interactive path.
   Never strip the outline without a replacement; brass on dark
   bands, signal-red on parchment. */
.site-nav a:focus-visible,
.btn:focus-visible,
.btn--ghost:focus-visible,
.aircraft-card a:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* brass ring is 2.3:1 on parchment (below the 3:1 non-text floor) —
   signal-red ring reads 3.9:1 there and stays on-brand */
.parchment a:focus-visible,
.section--parchment a:focus-visible,
#fleet a:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--signal-red);
  outline-offset: 3px;
}

/* --- AA contrast repairs (measured pairs; browser-computed logged
   in evidence) ---
   (c) .btn parchment-on-signal-red was 3.91:1 at 15px/600 (needs 4.5)
       -> deepen the CTA surface with a palette-derived red mix (4.7:1)
   (d) .eyebrow brass-on-parchment was 2.30:1 at 13px (needs 4.5)
       -> dark brass derived mix (4.7:1); gunmetal bands keep pure
       --brass via .gunmetal .eyebrow (5.44:1 there)
   footer bare link was 3.91:1 signal-red-on-parchment -> --signal-red-deep (5.4:1) */
.btn {
  background-color: color-mix(in srgb, var(--signal-red) 85%, var(--gunmetal));
  border-color: color-mix(in srgb, var(--signal-red) 85%, var(--gunmetal));
}

.eyebrow {
  color: color-mix(in srgb, var(--brass) 58%, var(--gunmetal));
}

footer a {
  color: var(--signal-red-deep);
}

footer a:hover {
  color: var(--gunmetal);
}

/* --- reduced-motion path: same DOM, full hero composition, still --- */
@media (prefers-reduced-motion: reduce) {

/* every animated class neutralized — covers time-based loops and the
   scroll-driven engine alike (their declarations never apply under
   reduce; this is the explicit rest state) */
.hero-shudder,
.hero .hero-prop,
.hero .hero-clouds--far,
.hero .hero-clouds--mid,
.hero .hero-clouds--near,
.hero .letterpress,
.hero__subhead,
.hero__actions,
.parallax__layer--far,
.parallax__layer--mid,
.parallax__layer--near,
.hero-plane {
  animation: none;
}

/* freeze layers at their designed rest poses (todo 6 static placement):
   plane parked INSIDE the hero (not mid-transit), prop at 0deg,
   clouds at natural positions — the no-preference overscan and the
   plane-cross translate never apply here */
.parallax__layer--far,
.parallax__layer--mid,
.parallax__layer--near,
.hero .hero-prop,
.hero .hero-plane,
.hero .hero-clouds {
  transform: none;
}

.hero .hero-plane {
  top: 9%;
  left: 42%;
}

.hero .hero-prop {
  top: 12%;
  right: 5%;
}

.hero .hero-clouds--far  { top: 7%;  left: 0; width: 100%; }
.hero .hero-clouds--mid  { top: 34%; left: 0; width: 100%; }
.hero .hero-clouds--near { top: 63%; left: 0; width: 100%; }

}

/* --- todo 11: responsive polish + sweep fixes ---
   Sweep result at 360/390/768/1024/1440: zero overflow, grids correct,
   hero type clean, console/network/anchors/mailto all green. One defect:
   7 interactive targets under the 44px touch floor (nav wordmark, the
   4 nav links, inquiry mailto, footer attribution link). Fix = expand
   the HIT AREA with padding plus a compensating negative margin, so the
   visual layout is unchanged (inline vertical padding never grows the
   line box; negative inline margin cancels the horizontal advance, and
   negative block margins cancel flex-item cross growth). Section-1
   spacing tokens only — no new palette vars. */

.wordmark {
  padding: 0.55rem 0;
  margin-block: -0.55rem;
}

.site-nav__links a {
  padding: 0.95rem 0.55rem;
  margin: 0 -0.55rem;
}

/* footer + inquiry contact links: already >=44px wide, so vertical
   padding only — a negative horizontal margin overflows at 360
   (vertical-only is the deliberate choice; f2 fix adds the footer's
   horizontal band padding below) */
.inquire__contact a,
footer a {
  padding: 0.95rem 0;
}

/* --- f2-fix: footer measure + stencil wiring --- */
/* Footer band: same measure pattern as .fleet / .restoration /
   .why-fly / .stories / .inquire — --space-4 inline padding on the
   band (--space-3 under 52rem) plus the 72rem inner measure, so the
   disclaimer gets the same left/right breathing room as every other
   band instead of running flush to the viewport edges. The
   stencil-rule wiring lives in section 8 on .stencil-rule. */
footer {
  padding: var(--space-5) var(--space-4);
}

footer p {
  max-width: 72rem;
  margin-inline: auto;
}

@media (max-width: 52rem) {
  footer {
    padding: var(--space-5) var(--space-3);
  }
}