/* =========================================================
   Tangmere Aircraft Sales — Design Tokens
   Quiet editorial direction: parchment paper, deep ink, a
   single restrained brass accent. Serif display for a calm,
   considered feel rather than a loud, dynamic one.
   ========================================================= */
:root {
  --paper:      #F3EEE1;
  --paper-dim:  #EAE3D2;
  --ink:        #16212B;
  --ink-soft:   #2B3A46;
  --slate:      #55606B;
  --brass:      #A9782F;
  --brass-deep: #7A5420;
  --brass-light:#C99748;
  --cloud:      #DFD7C0;
  --white:      #FFFFFF;
  --success:    #2E6140;
  --pending:    #7A5420;
  --sold:       #6B655A;

  /* EB Garamond: a true old-style. Small x-height and generous
     proportions, so display sizes run larger and tracking stays at
     zero. Mono is reserved for registrations and serials only. */
  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --container: 1180px;
  --gutter: clamp(24px, 5vw, 80px);
  --nav-h: 84px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0; }

/* Emphasis in running copy is set in the serif italic, so the accent
   falls on a real word rather than on a decorative flourish. */
p em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1em;
}

ul { list-style: none; margin: 0; padding: 0; }

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

.section-title {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.section-title--light { color: var(--paper); }

/* The kicker sits in serif italic, the way a standfirst does in print.
   That is a real job for the italic, rather than decoration. */
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brass-deep);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  min-height: 48px;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-deep); }
.btn--full { width: 100%; }
.btn--header { flex-shrink: 0; }

/* =========================================================
   Header
   Transparent over the hero photo by default (light logo,
   light text); switches to solid paper once scrolled past
   the hero, via .site-header--solid (toggled in script.js).
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(10, 14, 20, .38) 0%, rgba(10, 14, 20, 0) 100%);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header--solid {
  background: var(--paper);
  border-bottom-color: var(--cloud);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.site-header__inner .nav { grid-column: 1; justify-self: start; }
.site-header__inner .brand { grid-column: 2; justify-self: center; }
.site-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand__mark { width: 48px; height: auto; }
.brand__mark--dark { display: none; }
.site-header--solid .brand__mark--light { display: none; }
.site-header--solid .brand__mark--dark { display: block; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--paper);
  transition: color .3s var(--ease);
}
.brand__word em {
  font-style: italic;
  font-weight: 400;
  color: rgba(243, 238, 225, 0.7);
  font-size: 0.8em;
  transition: color .3s var(--ease);
}
.site-header--solid .brand__word { color: var(--ink); }
.site-header--solid .brand__word em { color: var(--slate); }

.site-header .brand__word {
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  font-size: 0.92rem;
  color: var(--paper);
  transition: color .3s var(--ease);
}
.site-header--solid .nav { color: var(--ink); }
.nav a { position: relative; padding: 4px 0; }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

/* =========================================================
   Language switch — quiet dropdown, header only. UI only:
   the site has no translated content, so this presents the
   choice without pretending to switch a language that
   doesn't exist yet.
   ========================================================= */
.lang-switch { position: relative; }
.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(243, 238, 225, 0.35);
  border-radius: 2px;
  padding: 8px 12px;
  min-height: 36px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.site-header--solid .lang-switch__toggle { color: var(--ink); border-color: var(--cloud); }
.lang-switch__toggle:hover,
.lang-switch__toggle[aria-expanded="true"] { border-color: var(--brass); color: var(--brass-deep); }
.site-header--solid .lang-switch__toggle:hover,
.site-header--solid .lang-switch__toggle[aria-expanded="true"] { color: var(--brass-deep); }
.lang-switch__globe { width: 17px; height: 17px; flex-shrink: 0; }
.lang-switch__chevron { width: 10px; height: 7px; flex-shrink: 0; transition: transform .2s var(--ease); }
.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--cloud);
  border-radius: 2px;
  box-shadow: 0 16px 36px -16px rgba(22, 33, 43, 0.4);
  z-index: 10;
  padding: 6px;
  list-style: none;
  margin: 0;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu li {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.lang-switch__menu li:hover { background: var(--paper-dim); }
.lang-switch__menu li[aria-selected="true"] { color: var(--brass-deep); font-weight: 600; }

.lang-switch--mobile {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cloud);
}
.lang-switch--mobile button {
  background: none;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  padding: 8px 14px;
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
}
.lang-switch--mobile button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(243, 238, 225, 0.5);
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
  transition: border-color .3s var(--ease);
}
.site-header--solid .nav-toggle { border-color: var(--cloud); }
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--paper);
  transition: transform .2s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.site-header--solid .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--cloud);
}
.mobile-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--cloud);
  font-size: 1.05rem;
}
.mobile-nav .btn { margin-top: 16px; }
.mobile-nav.is-open { display: flex; }

/* =========================================================
   Hero — full-bleed photo, quiet scrim, centered composition
   ========================================================= */
/* The hero fills exactly one screen so the stamp and scroll cue always
   land at the bottom edge, where they read as an invitation to scroll.
   The headline block takes the space between via auto margins, which
   centres it without ever pushing the foot out of view. */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: var(--paper);
  padding: calc(var(--nav-h) + 16px) var(--gutter) clamp(20px, 3vh, 44px);
}
.hero__bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--ink);
}
.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Clips stack. The incoming clip fades in on top while the outgoing one
   stays fully opaque beneath it; fading both at once would dip through to
   the page background halfway through every change. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
/* Where iOS/Safari refuses autoplay (Low Power Mode) it overlays its own
   play glyph mid-hero, between the buttons. The film starts on the
   visitor's first tap instead (script.js), so the glyph is never needed. */
.hero__slide::-webkit-media-controls,
.hero__slide::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero__slide.is-entering {
  opacity: 1;
  z-index: 2;
  transition: opacity 1.2s ease-in-out;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 16, 23, .42) 0%, rgba(12, 16, 23, .58) 32%, rgba(12, 16, 23, .5) 62%, rgba(12, 16, 23, .78) 100%);
  z-index: 1;
}
.hero__inner {
  max-width: 760px;
  /* auto block margins absorb the free space above and below, centring
     this block while leaving the foot pinned to the bottom edge */
  margin: auto;
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .eyebrow { color: var(--brass-light); }
.hero__headline {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, min(6vw, 9vh), 5.2rem);
  line-height: 1.06;
  max-width: 18ch;
}
.hero__headline span { display: block; }
.hero__lede {
  margin-top: clamp(16px, 3vh, 34px);
  color: rgba(243, 238, 225, 0.85);
  font-size: 1.05rem;
  max-width: 48ch;
}
.hero__actions {
  margin-top: clamp(20px, 3.5vh, 40px);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero .btn--primary:hover { background: var(--white); border-color: var(--white); }
.hero .btn--ghost {
  color: var(--paper);
  border-color: rgba(243, 238, 225, 0.5);
}
.hero .btn--ghost:hover {
  border-color: var(--brass-light);
  color: var(--brass-light);
}

.hero__foot {
  position: relative;
  z-index: 2;
  /* Holds the stamp clear of the buttons above. Scales with viewport
     height so it opens up on desktop without crowding short screens. */
  margin-top: clamp(20px, 7vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0.95;
}
.hero__stamp img { width: 64px; height: auto; }
.hero__stamp span {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper);
}

/* A quiet, slow light gliding down a thin line — the hero's one
   other considered motion moment, understated rather than a bouncing dot. */
.hero__scroll-cue {
  position: relative;
  display: block;
  width: 1px;
  height: 42px;
  background: rgba(243, 238, 225, 0.28);
}
.hero__scroll-cue::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-light);
  box-shadow: 0 0 6px 1px rgba(201, 151, 72, 0.55);
  transform: translate(-50%, 0);
  animation: scroll-cue-glide 3.2s ease-in-out infinite;
}
@keyframes scroll-cue-glide {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, 34px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue::after { animation: none; opacity: 0.6; top: 0; }
}

/* =========================================================
   Page intro — simple light header for standalone pages
   (Fleet, About Us), echoing the aircraft detail page pattern
   but kept light rather than a dark ink band.
   ========================================================= */
.page-intro {
  border-bottom: 1px solid var(--cloud);
}
.page-intro__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(32px, 5vw, 48px);
}
.page-intro__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--slate);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.page-intro__back:hover { color: var(--brass-deep); }
.page-intro h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  margin-top: 16px;
}
.page-intro__sub {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--slate);
}

/* =========================================================
   Intro — quiet two-column editorial text, no imagery
   ========================================================= */
.intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  border-top: 1px solid var(--cloud);
}
.intro--page { border-top: none; }
.intro__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 16px;
  color: var(--brass-deep);
}
.intro__col p {
  color: var(--ink-soft);
  max-width: 46ch;
}

/* =========================================================
   Services — dark ink section, a deliberate rhythm break
   between the light intro and the light fleet grid
   ========================================================= */
.services {
  background: var(--ink);
}
.services__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px);
}
.services .section-title { max-width: 640px; }
.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(243, 238, 225, 0.14);
  border-top: 1px solid rgba(243, 238, 225, 0.14);
  border-left: 1px solid rgba(243, 238, 225, 0.14);
}
.services__list li {
  background: var(--ink);
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(243, 238, 225, 0.14);
  border-bottom: 1px solid rgba(243, 238, 225, 0.14);
}
.services__list li:last-child { grid-column: span 2; }
.services__list li:last-child p { max-width: 46ch; }
.services__tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--brass-light);
  margin-bottom: 20px;
}
.services__list h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
  color: var(--paper);
}
.services__list p {
  color: rgba(243, 238, 225, 0.72);
  font-size: 0.95rem;
}

/* =========================================================
   Fleet
   ========================================================= */
.fleet {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--cloud);
}
.fleet--full { border-top: none; padding-top: clamp(24px, 4vw, 48px); }
.fleet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.fleet__head .section-title { margin-bottom: 0; }
.fleet__sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--slate);
}

.fleet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 32px);
}
.fleet__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 5vw, 56px);
}
.fleet-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cloud);
  border-radius: 3px;
  background: var(--white);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.fleet-card:hover {
  border-color: var(--brass);
  transform: translateY(-6px);
  box-shadow: 0 32px 56px -28px rgba(22, 33, 43, 0.32);
}
.fleet-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 110% at 50% 40%, var(--paper) 0%, var(--paper) 45%, var(--cloud) 80%, rgba(169, 120, 47, 0.2) 100%);
  border-bottom: 1px solid var(--cloud);
  overflow: hidden;
  cursor: pointer;
}
.fleet-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform .6s var(--ease);
}
.fleet-card:hover .fleet-card__media img:not(.fleet-card__placeholder-mark) {
  transform: scale(1.045);
}
.fleet-card__media--placeholder { background: var(--ink); }
.fleet-card__media--placeholder img.fleet-card__placeholder-mark {
  object-fit: contain;
  padding: 0;
  width: 34px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}
.fleet-card__status {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--paper);
}
.fleet-card__media--placeholder .fleet-card__status {
  background: rgba(255, 255, 255, 0.1);
  color: var(--paper);
  border-color: rgba(243, 238, 225, 0.5);
}
.fleet-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  padding: 3px;
  box-shadow: 0 6px 14px -6px rgba(22, 33, 43, 0.35);
}
.fleet-card__badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.fleet-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
/* Named craft take italics, the way vessels and named aircraft do in
   print. This is the italic doing real work rather than decorating. */
.fleet-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.fleet-card__title:hover { color: var(--brass-deep); }
/* Registrations and serials are the one place monospace earns its
   keep: they are alphanumeric identifiers where 0/O and 1/I have to
   stay distinguishable. Everywhere else it was decoration. */
.fleet-card__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--slate);
}
.fleet-card__link {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fleet-card__link:hover { color: var(--ink); }
.fleet-card__arrow { display: inline-block; transition: transform .2s var(--ease); }
.fleet-card__link:hover .fleet-card__arrow { transform: translateX(4px); }

.status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.status--available { color: var(--success); }
.status--pending { color: var(--pending); }
.status--incoming { color: var(--ink-soft); }
.status--sold { color: var(--sold); }

/* =========================================================
   Team
   ========================================================= */
.team {
  background: var(--paper-dim);
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--cloud);
  border-bottom: 1px solid var(--cloud);
}
.team__intro {
  max-width: var(--container);
  margin: 0 auto clamp(32px, 5vw, 48px);
}
.team__intro .eyebrow { display: block; margin-bottom: 14px; }
.team__about {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 68ch;
}
.team__list {
  max-width: var(--container);
  margin: 0 auto;
}
.team__list li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--cloud);
}
.team__list li:first-child { border-top: 1px solid var(--cloud); }
.team__initial {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.team__list h3 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.team__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brass-deep);
  margin-bottom: 10px;
}
.team__list p:last-child {
  color: var(--ink-soft);
  max-width: 56ch;
}

/* =========================================================
   Contact — the one deliberate dark bookend, closing the
   hero's tone rather than switching light/dark every section
   ========================================================= */
.contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) var(--gutter);
}
.contact__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
}
.contact__intro p { color: rgba(243, 238, 225, 0.75); max-width: 46ch; margin-top: 8px; }
.contact__details {
  margin-top: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact__details li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(243, 238, 225, 0.15);
  font-size: 0.98rem;
}
.contact__details span:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brass-light);
}
.contact__details a:hover { color: var(--brass-light); }

.contact__form {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: fit-content;
}
.contact__form[hidden],
.contact__success[hidden] {
  display: none;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate);
}
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--cloud);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  min-height: 44px;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--brass);
}
/* -- Post-submit confirmation: replaces the form in place -- */
.contact__success {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  border-radius: 2px;
  text-align: center;
  animation: contact-success-in .5s var(--ease) both;
}
@keyframes contact-success-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact__success { animation: none; }
}
.contact__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  color: var(--brass-deep);
  margin-bottom: 20px;
}
.contact__success-icon svg { width: 28px; height: 28px; }
.contact__success-title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom: 12px;
}
.contact__success-body {
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 auto;
}
.contact__success-actions {
  margin-top: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.contact__success-actions .btn { width: 100%; max-width: 320px; }
.contact__success-reset {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.contact__success-reset:hover { color: var(--ink); }

/* =========================================================
   Aircraft detail pages
   ========================================================= */
.aircraft-hero {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(24px, 4vw, 40px);
}
.aircraft-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) var(--gutter) clamp(32px, 5vw, 48px);
}
.aircraft-hero__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(243, 238, 225, 0.6);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.aircraft-hero__back:hover { color: var(--brass-light); }
.aircraft-hero__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brass-light);
  margin-bottom: 16px;
}
.aircraft-hero h1 {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  max-width: 18ch;
  color: var(--paper);
}
.aircraft-hero__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(243, 238, 225, 0.55);
}
.aircraft-hero__meta .status {
  color: var(--paper);
  border-color: rgba(243, 238, 225, 0.45);
}

.aircraft-photo {
  background: var(--ink);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.aircraft-photo__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.aircraft-photo img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  border-radius: 3px;
  background: radial-gradient(75% 90% at 50% 50%, var(--paper-dim) 0%, var(--paper-dim) 45%, var(--cloud) 72%, var(--ink-soft) 100%);
  padding: clamp(16px, 3vw, 32px);
}
.aircraft-photo__frame { position: relative; }
.aircraft-photo__badge {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3vw, 32px);
  width: clamp(72px, 9vw, 92px);
  height: clamp(72px, 9vw, 92px);
  border-radius: 50%;
  background: var(--white);
  padding: 5px;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.45);
}
.aircraft-photo__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: none;
  padding: 0;
}
.aircraft-hero__badge {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  padding: 3px;
}
.aircraft-hero__badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* Specs, highlights, note and CTA all share one continuous dark
   zone with the hero/photo above — no jarring cut back to paper. */
.aircraft-specs {
  background: var(--ink);
  padding-top: clamp(8px, 1.5vw, 16px);
}
.aircraft-specs__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 6vw, 64px);
}
.aircraft-specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(243, 238, 225, 0.12);
  border: 1px solid rgba(243, 238, 225, 0.12);
}
.aircraft-specs__grid > div {
  background: var(--ink-soft);
  padding: 20px 24px;
}
.aircraft-specs__grid span {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--brass-light);
  margin-bottom: 6px;
}
/* The value is the identifier, so it takes the mono, not the label. */
.aircraft-specs__grid strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}

.aircraft-highlights {
  background: var(--ink);
}
.aircraft-highlights__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
}
.aircraft-highlights h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 24px;
  color: var(--paper);
}
.aircraft-highlights ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 32px;
  max-width: 900px;
}
.aircraft-highlights li {
  position: relative;
  padding-left: 22px;
  color: rgba(243, 238, 225, 0.75);
  font-size: 1rem;
}
.aircraft-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--brass-light);
}
.aircraft-note {
  display: block;
  max-width: 900px;
  margin-top: clamp(24px, 4vw, 40px);
  color: rgba(243, 238, 225, 0.5);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
}

.aircraft-cta {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(48px, 7vw, 80px);
  text-align: center;
  border-top: 1px solid rgba(243, 238, 225, 0.12);
}
.aircraft-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--paper); }
.aircraft-cta p {
  margin: 16px auto 32px;
  max-width: 50ch;
  color: rgba(243, 238, 225, 0.75);
}

/* =========================================================
   Footer — quiet, no animated closing statement
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: rgba(243, 238, 225, 0.7);
  border-top: 1px solid rgba(243, 238, 225, 0.12);
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) var(--gutter) 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
}
.site-footer__top { display: flex; flex-direction: column; gap: 10px; }
.brand--footer .brand__word { color: var(--paper); }
.brand--footer .brand__word em { color: rgba(243, 238, 225, 0.6); }
.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: rgba(243, 238, 225, 0.6);
}
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.9rem; }
.footer-nav a:hover { color: var(--brass-light); }
.footer-social { display: flex; gap: 20px; font-family: var(--font-body); font-size: 0.8rem; }
.footer-social a:hover { color: var(--brass-light); }
.site-footer__mark {
  display: flex;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 16px) var(--gutter) clamp(24px, 4vw, 40px);
}
.site-footer__mark img { width: 40px; height: auto; opacity: 0.9; }
.site-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(243, 238, 225, 0.45);
}
.site-footer__badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================================
   Hero load-in — one quiet, orchestrated fade-up. No other
   section animates; content just appears as you scroll.
   ========================================================= */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: reveal-up .8s var(--ease) both;
}
.reveal--delay-1 { animation-delay: .12s; }
.reveal--delay-2 { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .contact__inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .services__list { grid-template-columns: repeat(2, 1fr); }
  .intro { grid-template-columns: 1fr; }
  .fleet__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .site-header__inner { display: flex; justify-content: space-between; }
  .nav, .btn--header, .lang-switch:not(.lang-switch--mobile) { display: none; }
  .nav-toggle { display: flex; }
  .hero { min-height: 100vh; }
  .team__list li { grid-template-columns: 56px 1fr; }
  .team__initial { width: 56px; height: 56px; font-size: 0.95rem; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .fleet__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-header__inner { padding: 12px var(--gutter); }
  .brand__word { font-size: 0.85rem; }
  .contact__details li { grid-template-columns: 1fr; gap: 4px; }
}