/* ============================================================================
   ATLANTIC AVIATION THAILAND — Design System
   Editorial / premium aviation. Serif display (Fraunces) + clean grotesk
   (Inter) + mono accent (JetBrains Mono) for eyebrows, labels and data.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Color */
  --c-ink:        #0a0d10;
  --c-navy-900:   #0a1622;
  --c-navy-800:   #0f2237;
  --c-navy-700:   #17324e;
  --c-navy-600:   #234869;
  --c-paper:      #f6f3ea;
  --c-paper-dim:  #ece6d6;
  --c-white:      #ffffff;
  --c-brass:      #c6a15b;
  --c-brass-light:#e6d4a8;
  --c-brass-dim:  #9c7f45;
  --c-ash-700:    #4c5661;
  --c-ash-500:    #737f8b;
  --c-ash-300:    #a9b2ba;
  --c-line-onlight: rgba(10, 15, 20, 0.12);
  --c-line-ondark:  rgba(246, 243, 234, 0.16);
  --c-text-onlight: #12181d;
  --c-text-onlight-mute: #545e67;
  --c-text-ondark:  #f6f3ea;
  --c-text-ondark-mute: rgba(246, 243, 234, 0.68);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-button: var(--font-mono);
  --fw-heading: 500;
  --fw-body: 400;
  --ls-heading: 0em;

  --fs-eyebrow: 0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --fs-h3:      clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --fs-h2:      clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --fs-h1:      clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
  --fs-hero:    clamp(3.25rem, 1.6rem + 6.5vw, 8rem);

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.65;

  /* Space */
  --space-xxs: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.65rem + 0.4vw, 1.25rem);
  --space-sm:  clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-md:  clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-lg:  clamp(3rem, 2rem + 4vw, 6rem);
  --space-xl:  clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-2xl: clamp(6rem, 4rem + 8vw, 12rem);

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 4rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --radius-btn: 999px;
  --card-shadow-resting: none;
  --card-border: 1px solid transparent;
  --heading-align: left;
  --c-btn-bg: var(--c-brass);
  --c-btn-hover: var(--c-brass-light);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  --header-h: 92px;
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.has-lenis { scroll-behavior: auto; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--c-text-onlight);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--c-brass); color: var(--c-ink); }

/* Lenis smooth-scroll requirement */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.display-hero {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: var(--fs-hero);
  line-height: 0.96;
  letter-spacing: -0.02em;
  /* line-height 0.96 is intentionally tighter than this font's own metrics
     (needed for the display-type look), which pulls the line box's bottom
     edge up above where descenders (g/y/p/q/j) actually paint. Inside
     .hero-headline-wrap's overflow:hidden reveal mask, that meant the last
     line's descenders were being clipped. This padding gives the mask
     boundary back exactly the room the font needs, scaled to this
     element's own fluid font-size so it holds at every breakpoint —
     without touching line-height (which would change line-to-line
     spacing) or the heading's position/animation. .hero-headline-wrap
     below carries a matching negative margin so the surrounding stack's
     total height (and therefore its bottom-anchored position in .hero)
     is unaffected — that has to live on the wrapper, not here: a
     negative margin on this element would get "seen through" by the
     wrapper's own auto-height calculation and silently cancel the
     padding's fix. */
  padding-bottom: 0.2em;
}

.lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 400; }

/* ---------------------------------------------------------------------------
   GOLD SHIMMER — brushed-metal light sweep for brass-colored text/marks.
   A slow, ease-in-out background-position sweep clipped to text (or, for
   non-text marks, a soft drop-shadow pulse). GPU-cheap: background-position
   and filter are the only animated properties, both on small elements, and
   the sweep pauses at rest on each end rather than looping continuously —
   reads as "catching light" rather than a loading-skeleton shimmer.
   ------------------------------------------------------------------------ */
@keyframes gold-shimmer {
  0%, 100% { background-position: 160% 0; }
  50%      { background-position: -60% 0; }
}
@keyframes gold-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(198,161,91,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(198,161,91,0.55)); }
}
.text-shimmer {
  background-image: linear-gradient(100deg,
    var(--c-brass) 0%, var(--c-brass) 38%,
    #f6e8c4 50%,
    var(--c-brass) 62%, var(--c-brass) 100%);
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-shimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .text-shimmer { animation: none; background-position: 40% 0; }
  .glow-pulse { animation: none; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow { background-image: linear-gradient(100deg, var(--c-brass) 0%, var(--c-brass) 38%, #f6e8c4 50%, var(--c-brass) 62%, var(--c-brass) 100%); background-size: 250% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-shimmer 7s ease-in-out infinite; }
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-brass);
  opacity: 0.8;
}
.eyebrow.no-rule::before { display: none; }

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

.text-mute { color: var(--c-text-onlight-mute); }
.on-dark .text-mute, .section-dark .text-mute { color: var(--c-text-ondark-mute); }

p + p { margin-top: 1em; }

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { position: relative; padding-block: var(--space-2xl); }
.section-sm { padding-block: var(--space-xl); }
.section-dark {
  background: var(--c-navy-900);
  color: var(--c-text-ondark);
}
.section-navy { background: var(--c-navy-800); color: var(--c-text-ondark); }
.section-paper-dim { background: var(--c-paper-dim); }

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

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 6rem);
  align-items: center;
}
.split.split-reverse { direction: rtl; }
.split.split-reverse > * { direction: ltr; }

.stack { display: flex; flex-direction: column; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.section-head .headline { max-width: 42ch; margin-top: var(--space-xs); }
.section-head .side-note { max-width: 32ch; padding-bottom: 0.3em; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.split-reverse { direction: ltr; }
  /* Two-class selector so this reliably beats the unconditional .fleet-split
     column-ratio rule below regardless of source order (equal-specificity,
     single-class rules would otherwise be decided by position in the file). */
  .split.fleet-split { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 0.6em;
  padding: 1em 1.9em;
  font-family: var(--font-button);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  border: 1px solid currentColor;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); position: relative; z-index: 1; }
.btn:hover svg { transform: translate(3px, -3px); }
.btn > span, .btn > svg { position: relative; z-index: 1; }

.btn-primary {
  background: var(--c-btn-bg);
  border-color: var(--c-btn-bg);
  color: var(--c-ink);
}
/* Brushed-metal light sweep on hover — a single translated pseudo-element,
   GPU-only (transform), so it costs nothing at rest. */
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg) translateX(0);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { transform: skewX(-20deg) translateX(340%); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }
.btn-primary:hover { background: var(--c-btn-hover); border-color: var(--c-btn-hover); }

.btn-outline-dark { color: var(--c-ink); border-color: var(--c-line-onlight); }
.btn-outline-dark:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

.btn-outline-light { color: var(--c-paper); border-color: var(--c-line-ondark); }
.btn-outline-light:hover { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }

.btn-ghost { padding: 0; border: 0; text-transform: none; font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0; gap: 0.5em; }
.btn-ghost .underline { position: relative; }
.btn-ghost .underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform var(--dur-med) var(--ease-out);
}
.btn-ghost:hover .underline::after { transform: scaleX(0); transform-origin: left; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* ---------------------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 200; /* above .mobile-menu (190) so the toggle/close control and brand stay on top while the menu is open */
  display: flex;
  align-items: center;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.site-header.is-scrolled {
  background: rgba(10, 14, 18, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--c-line-ondark);
  height: 76px;
}

.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--c-paper); }
.brand .brand-mark { width: 40px; height: 40px; object-fit: contain; color: var(--c-brass); flex-shrink: 0; animation: gold-glow-pulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .brand .brand-mark { animation: none; } }
.brand .brand-name { font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }

.nav-primary { display: flex; align-items: center; gap: clamp(0.7rem, 1vw, 1.35rem); flex-wrap: nowrap; }
.nav-primary a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-ondark-mute);
  transition: color var(--dur-fast) var(--ease-out);
  padding-block: 0.4em;
  white-space: nowrap;
}
.nav-primary a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out);
}
.nav-primary a:hover, .nav-primary a.is-active { color: var(--c-paper); }
.nav-primary a:hover::after, .nav-primary a.is-active::after { transform: scaleX(1); }
.nav-primary a.is-active::after {
  background-image: linear-gradient(100deg, var(--c-brass) 0%, var(--c-brass) 38%, #f6e8c4 50%, var(--c-brass) 62%, var(--c-brass) 100%);
  background-size: 250% 100%;
  animation: gold-shimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .nav-primary a.is-active::after { animation: none; } }

.nav-cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav-cta .btn { display: none; }
@media (min-width: 1100px) { .nav-cta .btn { display: inline-flex; } }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; z-index: 210;
}
.nav-toggle span { width: 22px; height: 1px; background: var(--c-paper); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
@media (min-width: 1220px) { .nav-toggle { display: none; } }
@media (max-width: 1219px) {
  .nav-primary { display: none; }
  /* Subtle persistent scrim behind the icon only (not the whole header) so it
     stays readable over bright hero/banner sky regardless of scroll position. */
  .nav-toggle { position: relative; }
  .nav-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(10, 14, 18, 0.55);
    backdrop-filter: blur(6px);
    z-index: -1;
  }
}
@media (min-width: 1220px) and (max-width: 1360px) { .nav-cta .btn { display: none; } }

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 190;
  background: var(--c-navy-900);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-lg) var(--container-pad);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-in-out), visibility 0.6s;
  visibility: hidden;
  pointer-events: none;
}
body.nav-open .mobile-menu { transform: translateY(0); visibility: visible; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.5rem); color: var(--c-paper); display: block; padding-block: 0.2em; border-bottom: 1px solid var(--c-line-ondark); }
.mobile-menu .mobile-meta { margin-top: var(--space-lg); color: var(--c-text-ondark-mute); font-family: var(--font-mono); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   7. PRELOADER — Cessna 182 flight sequence, GSAP-driven
   A single GSAP master timeline (main.js §3) tweens one proxy value from
   0-100 and writes plane X position, runway fill, gauge arc/needle, the
   percentage readout, the glow intensity and status text every tick — so
   all of it is sample-for-sample synchronized. The propeller is its own
   continuous GSAP tween running alongside the master timeline. Plane
   position is computed from the runway/aircraft's *real* rendered widths
   (getBoundingClientRect), never viewport units, re-measured on resize.

   Hiding the preloader is NOT allowed to depend solely on GSAP completing:
   an independent plain setTimeout hard-cap (main.js) forcibly reveals the
   page no matter what, even if GSAP failed to load or its ticker stalled.
   That's why .preloader carries no CSS `transition` on opacity — GSAP owns
   the normal fade-out tween directly; the emergency path below sets the
   final state with a plain class toggle (a hard snap, not an animation),
   so the two mechanisms can never fight over the same property.
   ------------------------------------------------------------------------ */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--c-navy-900);
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  /* Last-resort, JS-independent fallback: forces this non-interactive and
     invisible ~3.2s in even if main.js/GSAP never ran at all. Harmless
     no-op once the normal path has already set display:none well before
     this fires. */
  animation: preloader-failsafe 0.01s linear 3.2s forwards;
}
.preloader.is-hidden { opacity: 0; pointer-events: none; }
@keyframes preloader-failsafe { to { visibility: hidden; pointer-events: none; } }

.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; width: min(88vw, 460px); }

.preloader-mark { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-paper); margin-top: 0.3rem; }
.preloader-tagline { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-ondark-mute); margin-top: -0.3rem; }
.preloader-aircraft-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass-dim); margin-top: 0.35rem; }

/* --- Flight line: runway + plane travel strictly within its bounds --- */
.preloader-scene { position: relative; width: 100%; height: 56px; margin-top: 0.5rem; }
.preloader-runway { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--c-line-ondark); overflow: visible; }
.preloader-runway-fill {
  width: 100%; height: 100%; border-radius: 2px; background: var(--c-brass); transform: scaleX(0); transform-origin: left;
  /* --glow is a GSAP-animated custom property (intensifies as speed rises). */
  --glow: 3px;
  filter: drop-shadow(0 0 var(--glow) rgba(198, 161, 91, 0.7));
}

/* left:0 + JS-set translateX(px) — measured against the runway's real width,
   never vw — is what keeps the plane's own box fully inside the line at
   every progress value. No initial transform here on purpose: JS sets the
   correct 0%-position transform before first paint. Raised above the line
   (bottom offset) rather than sitting on it, like an aircraft in ground effect. */
.preloader-plane { position: absolute; left: 0; bottom: 12.5px; width: clamp(64px, 19vw, 86px); color: var(--c-brass); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.preloader-plane svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Rotation only, on the inner wrapper — GSAP tweens this element's rotation
   directly for the end-of-flight pitch-up. Kept separate from the outer
   element's per-frame JS-driven translateX so the two never fight over
   one transform string. */
.preloader-prop { transform-origin: 131px 32px; }

.preloader-trails { position: absolute; top: 58%; right: 100%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; opacity: 0; filter: blur(0.4px); }
.preloader-trails span { display: block; height: 2px; width: 30px; background: linear-gradient(to left, var(--c-brass), transparent); border-radius: 2px; transform: scaleX(0); transform-origin: right; }
.preloader-trails span:nth-child(1) { width: 40px; }
.preloader-trails span:nth-child(3) { width: 20px; }

.preloader-status-text { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-ondark-mute); margin-top: 0.15rem; }

/* --- Aviation-style gauge: the primary visual, now first in the stack --- */
.preloader-gauge { position: relative; width: 138px; height: 84px; }
.preloader-gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge-backing { fill: rgba(0, 0, 0, 0.32); }
.gauge-track { fill: none; stroke: var(--c-line-ondark); stroke-width: 2; }
.gauge-arc { fill: none; stroke: var(--c-brass-light); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(198, 161, 91, 0.75)); }
.gauge-ticks line { stroke: rgba(246, 243, 234, 0.45); stroke-width: 1.1; }
.gauge-ticks-minor line { stroke: rgba(246, 243, 234, 0.24); stroke-width: 0.7; }
.gauge-tick-labels text { font-family: var(--font-mono); font-size: 5.5px; fill: var(--c-text-ondark-mute); text-anchor: middle; }
.gauge-needle { stroke: var(--c-paper); stroke-width: 1.4; stroke-linecap: round; transform-origin: 50px 52px; transform: rotate(-90deg); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
.gauge-pivot { fill: var(--c-brass); }

.preloader-gauge-readout { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
/* Sized to always stay inside the dial's open lower chord, never touching the
   arc or tick marks, at every viewport from 320px to desktop — see the
   "100%" width check in the verification notes for this change. */
.preloader-gauge-pct { font-family: var(--font-mono); font-size: clamp(1.05rem, 1rem + 1.6vw, 1.6rem); font-weight: 600; color: var(--c-paper); letter-spacing: 0.02em; line-height: 1; }
.preloader-gauge-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass-light); text-shadow: 0 0 8px rgba(198, 161, 91, 0.5); }

@media (max-width: 420px) {
  .preloader-mark { font-size: 0.7rem; }
  .preloader-status-text { font-size: 0.64rem; }
  .preloader-gauge { width: 116px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Handled in JS for the GSAP-driven pieces (instant end-state, no tween);
     this only covers anything that might still be pure-CSS. */
  .preloader-plane-body { transition: none; }
}

/* ---------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--c-text-ondark);
  overflow: hidden;
  background: var(--c-navy-900);
}
.hero-media { position: absolute; inset: -30px; z-index: 0; will-change: transform; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* --hero-overlay-rgb / --hero-overlay-strength are set inline per active
     slide (index.php on first paint, main.js on slide change) — the 0.35/
     0.15/0.88 stops are unchanged from the original design, just scaled by
     strength (0-100, default 100 = identical to the original fixed values). */
  background: linear-gradient(180deg,
    rgba(var(--hero-overlay-rgb, 10,14,18), calc(var(--hero-overlay-strength, 100) / 100 * 0.35)) 0%,
    rgba(var(--hero-overlay-rgb, 10,14,18), calc(var(--hero-overlay-strength, 100) / 100 * 0.15)) 35%,
    rgba(var(--hero-overlay-rgb, 10,14,18), calc(var(--hero-overlay-strength, 100) / 100 * 0.88)) 100%);
}

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-in-out);
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos-x, center) var(--hero-pos-y, center); transform: scale(1.06); transition: transform 6s var(--ease-out); }
.hero-slide.is-active img { transform: scale(1); }
@media (max-width: 700px) {
  .hero-slide img { object-position: var(--hero-pos-mobile-x, center) var(--hero-pos-mobile-y, center); }
}
.hero-slide-label {
  position: absolute; left: var(--container-pad); bottom: var(--space-lg); z-index: 2;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-text-ondark-mute);
  display: flex; align-items: center; gap: 0.6em;
}
.hero-slide-label::before { content: ""; width: 22px; height: 1px; background: var(--c-brass); }
.hero-dots { position: absolute; right: var(--container-pad); bottom: var(--space-lg); z-index: 3; display: flex; gap: 0.5rem; }
.hero-dots button { width: 28px; height: 2px; background: var(--c-line-ondark); transition: background var(--dur-fast); }
.hero-dots button.is-active { background: var(--c-brass); }
@media (max-width: 700px) { .hero-slide-label { display: none; } }

.hero-content { position: relative; z-index: 2; padding: var(--space-xl) var(--container-pad) var(--space-2xl); width: 100%; max-width: var(--container-max); margin-inline: auto; }
.hero-content.align-center { text-align: center; }
.hero-content.align-center .hero-sub { margin-inline: auto; }
.hero-headline-wrap { overflow: hidden; margin-bottom: calc(var(--fs-hero) * -0.2); }
.hero .display-hero { max-width: 18ch; }
.hero-content.align-center .display-hero { max-width: 22ch; margin-inline: auto; }
.hero-sub { max-width: 46ch; margin-top: var(--space-sm); color: var(--c-text-ondark-mute); }
.hero-actions { margin-top: var(--space-md); }
.hero-actions.align-center { justify-content: center; }
.hero-actions.align-right { justify-content: flex-end; }
.hero-scroll-cue {
  position: absolute; left: var(--container-pad); bottom: var(--space-lg); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-text-ondark-mute);
}
.hero-scroll-cue .line { width: 1px; height: 46px; background: linear-gradient(var(--c-brass), transparent); }
@media (max-width: 700px) { .hero-scroll-cue { display: none; } }

/* ---------------------------------------------------------------------------
   8. CARDS — AIRCRAFT
   ------------------------------------------------------------------------ */
.aircraft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
@media (max-width: 900px) { .aircraft-grid { grid-template-columns: 1fr; } }

/* Fixed text-left / image-right layout for every aircraft (no left/right
   alternation) — the image column is given a bit more width than the text
   column to match the reference layout. The shared .split media query
   (max-width:900px) still collapses this to one column, text first. */
.fleet-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr); }

.fleet-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.fleet-gallery-item { display: block; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; }
.fleet-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-fast) var(--ease-out); }
.fleet-gallery-item:hover img { transform: scale(1.08); }
/* Inert filler for an aircraft with fewer than 4 gallery photos uploaded —
   keeps the 4-slot grid shape identical across every aircraft. */
.fleet-gallery-empty { aspect-ratio: 1/1; border-radius: var(--radius-md); background: rgba(255,255,255,0.04); }

.card-aircraft {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-navy-800);
  color: var(--c-text-ondark);
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.card-aircraft .card-media { position: absolute; inset: 0; }
.card-aircraft .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card-aircraft:hover .card-media img { transform: scale(1.06); }
.card-aircraft .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,18,0) 30%, rgba(10,14,18,0.92) 100%); }
.card-aircraft .card-body { position: relative; z-index: 2; padding: var(--space-md); }
.card-aircraft .card-category { display: block; margin-bottom: 0.5rem; }
.card-aircraft h3 { font-size: var(--fs-h4); }
.card-aircraft .card-tagline { margin-top: 0.5rem; color: var(--c-text-ondark-mute); max-width: 34ch; }
.card-aircraft .card-specs {
  display: flex; gap: var(--space-md); margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line-ondark); font-family: var(--font-mono); font-size: 0.78rem;
}
.card-aircraft .spec b { display: block; color: var(--c-paper); font-size: 1rem; margin-bottom: 0.2em; }
.card-aircraft .spec span { color: var(--c-text-ondark-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.card-aircraft .card-arrow {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line-ondark);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.card-aircraft .card-arrow svg { width: 16px; height: 16px; }
.card-aircraft:hover .card-arrow { background: var(--c-brass); transform: rotate(45deg); }

/* ---------------------------------------------------------------------------
   9. SERVICES / TRAINING CARDS
   ------------------------------------------------------------------------ */
.service-list { display: flex; flex-direction: column; }
.service-row {
  display: grid; grid-template-columns: 90px 1.4fr 1fr 40px; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0; border-top: 1px solid var(--c-line-ondark);
  transition: padding-left var(--dur-med) var(--ease-out);
}
.service-list .section-dark & { }
.service-row:last-child { border-bottom: 1px solid var(--c-line-ondark); }
.service-row .index { font-family: var(--font-mono); color: var(--c-brass); font-size: 0.85rem; }
.service-row h3 { font-size: var(--fs-h4); }
.service-row p { color: var(--c-text-ondark-mute); max-width: 42ch; }
.service-row .row-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-ondark); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.service-row .row-arrow svg { width: 14px; height: 14px; }
.service-row:hover { padding-left: var(--space-xs); }
.service-row:hover .row-arrow { background: var(--c-brass); transform: rotate(45deg); }
@media (max-width: 800px) {
  .service-row { grid-template-columns: 50px 1fr 40px; }
  .service-row p { grid-column: 2 / 3; }
}

.training-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
@media (max-width: 1100px) { .training-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .training-grid { grid-template-columns: 1fr; } }

.card-training {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--c-white);
  border: var(--card-border);
  box-shadow: var(--card-shadow-resting);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.card-training:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(10,15,20,0.12); border-color: transparent; }
.card-training .icon-wrap { width: 52px; height: 52px; border-radius: 50%; background: var(--c-paper-dim); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm); color: var(--c-brass-dim); }
.card-training .icon-wrap svg { width: 24px; height: 24px; }
.card-training .card-level { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ash-500); }
.card-training h4 { margin-top: 0.6rem; }
.card-training p { margin-top: 0.6rem; color: var(--c-text-onlight-mute); }
.card-training .card-duration { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--c-line-onlight); font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-ash-500); }

/* ---------------------------------------------------------------------------
   10. STATS
   ------------------------------------------------------------------------ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-item { padding-top: var(--space-sm); border-top: 1px solid var(--c-line-ondark); }
.stat-icon { display: block; width: 22px; height: 22px; margin-bottom: 0.6rem; color: var(--c-brass-dim); }
.stat-icon svg { width: 100%; height: 100%; }
.stat-value {
  font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 4.5rem); line-height: 1; display: flex; align-items: baseline; gap: 0.1em;
  background-image: linear-gradient(100deg, var(--c-brass) 0%, var(--c-brass) 38%, #f6e8c4 50%, var(--c-brass) 62%, var(--c-brass) 100%);
  background-size: 250% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-shimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .stat-value { animation: none; background-position: 40% 0; } }
.stat-label { margin-top: 0.8rem; color: var(--c-text-ondark-mute); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; max-width: 20ch; }

/* ---------------------------------------------------------------------------
   11. DESTINATIONS
   ------------------------------------------------------------------------ */
.destinations-search { position: relative; max-width: 420px; margin-bottom: var(--space-md); }
.destinations-search input {
  width: 100%; padding: 0.9em 1.2em; border-radius: 999px; border: 1px solid var(--c-line-onlight);
  background: var(--c-white); font-family: var(--font-mono); font-size: 0.9rem;
}
.destinations-search input:focus { outline: none; border-color: var(--c-ink); }
.destinations-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-ash-500); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.destinations-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--c-line-onlight); }
table.destinations-table { width: 100%; border-collapse: collapse; min-width: 640px; }
table.destinations-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-ash-500); padding: 1em 1.2em; background: var(--c-paper-dim); white-space: nowrap;
}
table.destinations-table td { padding: 0.9em 1.2em; border-top: 1px solid var(--c-line-onlight); font-size: 0.92rem; }
table.destinations-table tr:hover td { background: var(--c-paper-dim); }
table.destinations-table .code { font-family: var(--font-mono); color: var(--c-brass-dim); }
table.destinations-table .no-results td { text-align: center; color: var(--c-ash-500); padding: 2rem; }

/* ---------------------------------------------------------------------------
   12. TESTIMONIALS
   ------------------------------------------------------------------------ */
.testimonial-slider { position: relative; max-width: 880px; overflow: hidden; }
.testimonial-track { display: flex; }
.testimonial-slide { min-width: 100%; }
.testimonial-slide .quote-mark {
  font-family: var(--font-display); font-size: 4rem; line-height: 1; display: block; margin-bottom: var(--space-xs);
  background-image: linear-gradient(100deg, var(--c-brass) 0%, var(--c-brass) 38%, #f6e8c4 50%, var(--c-brass) 62%, var(--c-brass) 100%);
  background-size: 250% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-shimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .testimonial-slide .quote-mark { animation: none; background-position: 40% 0; } }
.testimonial-slide blockquote { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 400; line-height: 1.35; }
.testimonial-meta { display: flex; align-items: center; gap: 1rem; margin-top: var(--space-md); }
.testimonial-meta .avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--c-navy-700); }
.testimonial-meta .avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-meta .name { font-weight: 600; }
.testimonial-meta .role { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-text-ondark-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.testimonial-controls { display: flex; gap: 0.75rem; margin-top: var(--space-lg); }
.testimonial-controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line-ondark); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out); }
.testimonial-controls button:hover { background: rgba(255,255,255,0.08); }
.testimonial-controls svg { width: 16px; height: 16px; }
.testimonial-dots { display: flex; gap: 0.4rem; align-items: center; margin-left: 0.5rem; }
.testimonial-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-ondark); transition: background var(--dur-fast); }
.testimonial-dots .dot.is-active { background: var(--c-brass); }

/* ---------------------------------------------------------------------------
   13. FORMS
   ------------------------------------------------------------------------ */
/* Spam honeypot — off-screen, not display:none, so it still "exists" to a bot
   filling every field but is never visible or reachable for a real visitor. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-ondark-mute); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: transparent; border: 0; border-bottom: 1px solid var(--c-line-ondark);
  padding: 0.75em 0.1em; color: var(--c-paper); transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--c-brass); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: 0.85rem; color: var(--c-text-ondark-mute); margin-top: var(--space-xs); }
.form-alert { padding: 1em 1.25em; border-radius: var(--radius-sm); margin-bottom: var(--space-sm); font-size: 0.92rem; }
.form-alert.success { background: rgba(198,161,91,0.15); border: 1px solid var(--c-brass); color: var(--c-brass-light); }
.form-alert.error { background: rgba(200,60,60,0.15); border: 1px solid #c85555; color: #f2b3b3; }

/* ---------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------ */
.site-footer { background: var(--c-ink); color: var(--c-text-ondark); padding-top: var(--space-xl); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--c-line-ondark); }
.footer-brand .brand { color: var(--c-paper); }
.footer-brand p { margin-top: var(--space-sm); color: var(--c-text-ondark-mute); max-width: 34ch; }
.footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-brass); margin-bottom: var(--space-sm); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a, .footer-col address { color: var(--c-text-ondark-mute); font-style: normal; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--c-paper); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-sm); flex-wrap: wrap; gap: 1rem; }
.footer-bottom .socials { display: flex; gap: 1rem; }
.footer-bottom .socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-line-ondark); display: flex; align-items: center; justify-content: center; }
.footer-bottom .socials svg { width: 15px; height: 15px; }
.footer-bottom small { color: var(--c-text-ondark-mute); font-family: var(--font-mono); font-size: 0.75rem; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

.marquee-cta { position: relative; padding-block: var(--space-lg); overflow: hidden; border-top: 1px solid var(--c-line-ondark); border-bottom: 1px solid var(--c-line-ondark); }
.marquee-track { display: flex; white-space: nowrap; }
.marquee-track span { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 5rem); padding-inline: 1.5rem; color: var(--c-text-ondark); opacity: 0.9; }
.marquee-track span i { color: var(--c-brass); font-style: normal; margin-inline: 0.4em; }

/* ---------------------------------------------------------------------------
   15. MOTION HOOKS (state set by GSAP in main.js)
   ------------------------------------------------------------------------ */
/* Content stays visible by default (progressive enhancement). Only hidden
   pre-reveal once main.js confirms GSAP actually loaded and initialized —
   see the ".gsap-ready" class toggle at the top of main.js. This prevents
   entire sections from being permanently invisible if a CDN script fails
   to load, is blocked, or the network is offline. */
.gsap-ready [data-reveal] { opacity: 0; }
.gsap-ready [data-hero-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.gsap-ready [data-hero-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-mask] { overflow: hidden; }
.parallax-wrap { overflow: hidden; }
.parallax-img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .parallax-img { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   16. UTILITIES
   ------------------------------------------------------------------------ */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.max-w-prose { max-width: 60ch; }
.text-center { text-align: center; }
/* ---------------------------------------------------------------------------
   GLOBAL IMAGE RATIO SYSTEM — pair one of these aspect boxes with .img-cover
   so any uploaded photo (whatever its real dimensions) always fills its slot
   without ever changing that slot's size. Original uploads are never
   force-cropped server-side (admin/includes/auth.php only caps max dimensions
   + converts to WebP) — these display-layer boxes are what keep layout
   stable. Current usage:
     - Fleet main image ....... aspect-4-3  (recommended source ~1200x900)
     - Fleet gallery thumbs ... 1:1 square  (.fleet-gallery-item, by design —
                                 kept square rather than 4:3 to avoid a
                                 visual redesign of the existing gallery)
     - About image ............ aspect-3-4  (recommended source ~900x1200)
     - Destinations images .... aspect-4-3  (reserved; no photo slots on that
                                 page yet — recommended source ~800x600 if
                                 added later)
     - Page banners ............ full-bleed background via .page-hero, always
                                 background-size:cover — no fixed ratio needed
                                 since it's a CSS background, not an <img>.
   ------------------------------------------------------------------------ */
.rounded-img { border-radius: var(--radius-lg); overflow: hidden; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-3-4 { aspect-ratio: 3/4; }
.aspect-16-9 { aspect-ratio: 16/9; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.hairline { border-top: 1px solid var(--c-line-onlight); }
.section-dark .hairline, .on-dark .hairline { border-top-color: var(--c-line-ondark); }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 800px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar { padding-top: var(--space-sm); border-top: 1px solid var(--c-line-ondark); }
.pillar .icon-wrap { width: 52px; height: 52px; border-radius: 50%; background: rgba(198,161,91,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm); color: var(--c-brass); }
.pillar .icon-wrap svg { width: 22px; height: 22px; }
.pillar h4 { margin-bottom: 0.5rem; }

.fleet-detail { padding-block: var(--space-xl); }
.fleet-detail:not(:last-child) { border-bottom: 1px solid var(--c-line-onlight); }
.spec-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-line-onlight); }
.spec-table .spec b { display: block; font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.2em; }
.spec-table .spec span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-onlight-mute); }
@media (max-width: 600px) { .spec-table { grid-template-columns: repeat(2, 1fr); } }

.fleet-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
@media (max-width: 700px) { .fleet-info-grid { grid-template-columns: 1fr; } }
.fleet-info-block { display: flex; gap: 0.85rem; padding: var(--space-sm); background: var(--c-paper-dim); border-radius: var(--radius-md); min-width: 0; }
.fleet-info-block > div { min-width: 0; }
.fleet-info-block .icon-wrap { width: 38px; height: 38px; border-radius: 50%; background: rgba(198,161,91,0.16); color: var(--c-brass-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fleet-info-block .icon-wrap svg { width: 17px; height: 17px; }
.fleet-info-block .label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ash-500); margin-bottom: 0.3em; }
.fleet-info-block p { font-size: 0.88rem; color: var(--c-text-onlight-mute); }

.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); counter-reset: step; }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }
.process-step { padding-top: var(--space-sm); border-top: 1px solid var(--c-line-onlight); }
.process-step .step-num { font-family: var(--font-mono); color: var(--c-brass-dim); font-size: 0.85rem; }
.process-step h4 { margin-top: 0.6rem; }
.process-step p { margin-top: 0.5rem; color: var(--c-text-onlight-mute); font-size: 0.95rem; }

.info-card { background: var(--c-navy-800); border-radius: var(--radius-lg); padding: var(--space-md); }
.info-card .info-row { display: flex; gap: 1rem; padding-block: var(--space-xs); border-top: 1px solid var(--c-line-ondark); }
.info-card .info-row:first-child { border-top: 0; }
.info-card .info-row > div { min-width: 0; overflow-wrap: break-word; }
.info-card .info-row .icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: rgba(198,161,91,0.14); display: flex; align-items: center; justify-content: center; color: var(--c-brass); flex-shrink: 0; }
.info-card .info-row .icon-wrap svg { width: 18px; height: 18px; }
.info-card .info-row .label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-ondark-mute); margin-bottom: 0.2em; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Fixed, responsive banner height shared by every inner page (Fleet, Training,
   Destinations, Types of Flights, Aircraft Services, Contact, and any future
   CMS page) — min-height + flex centering means only the background image,
   title, and subtitle change page-to-page; height, alignment, and spacing
   never do, regardless of how much (or little) title/subtitle text a page has. */
.page-hero {
  /* Tuned to sit above the tallest current banner's natural (padding + two-line
     subtitle) height at both mobile and desktop widths, so every banner clamps
     up to this same floor — verified against all 6 inner pages at 390px and
     1280px viewports. Grows gracefully (never clips) if a much longer title/
     subtitle is entered later; it just won't be perfectly identical to the rest
     in that rare case. */
  min-height: clamp(560px, 594px + 6.7vw, 725px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--space-lg));
  padding-bottom: var(--space-lg);
  background: var(--c-navy-900);
  color: var(--c-text-ondark);
}
.page-hero.has-banner-image {
  background-size: cover;
  background-position: var(--banner-pos-x, center) var(--banner-pos-y, center);
}
@media (max-width: 700px) {
  .page-hero.has-banner-image {
    background-position: var(--banner-pos-mobile-x, center) var(--banner-pos-mobile-y, center);
  }
}
.page-hero .display-hero { font-size: var(--fs-h1); max-width: 20ch; }
.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-ondark-mute); margin-bottom: var(--space-sm); }
.breadcrumb a:hover { color: var(--c-brass); }

/* Phase 15: custom-page banner height/alignment variants — opt-in, 'standard'
   height is the untouched default rule above. */
.page-hero--compact { min-height: clamp(360px, 380px + 4vw, 460px); }
.page-hero--tall { min-height: clamp(680px, 720px + 8vw, 860px); }
.page-hero--full { min-height: 100vh; }
.page-hero.align-center .container { text-align: center; }
.page-hero.align-center .breadcrumb { justify-content: center; }
.page-hero.align-center .eyebrow { justify-content: center; }
.page-hero.align-center .display-hero { max-width: none; margin-inline: auto; }
.page-hero.align-center .hero-sub { margin-inline: auto; }

/* Phase 15: custom-page layout options (Container Width / Section Padding) —
   opt-in modifier classes, combined with the existing .container/.section. */
.container-narrow { max-width: 760px; }
.container-wide { max-width: 1720px; }
.container-full { width: 100%; padding-inline: var(--container-pad); }
.section-padding-compact { padding-block: var(--space-lg); }
.section-padding-spacious { padding-block: calc(var(--space-2xl) + var(--space-lg)); }

.whatsapp-fab {
  position: fixed; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 150;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform var(--dur-fast) var(--ease-out);
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------------
   17. FLEET GALLERY LIGHTBOX
   ------------------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 11, 14, 0.94);
  backdrop-filter: blur(8px);
}

.lightbox-stage {
  position: relative;
  width: min(90vw, 1400px);
  height: min(78vh, 1400px);
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.lightbox.is-open .lightbox-stage { transform: scale(1); opacity: 1; }

.lightbox-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.lightbox-img.is-active { opacity: 1; pointer-events: auto; }

.lightbox-close, .lightbox-nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(10, 14, 18, 0.55);
  border: 1px solid var(--c-line-ondark);
  color: var(--c-paper);
  backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(10, 14, 18, 0.85); border-color: var(--c-brass); }
.lightbox-close svg, .lightbox-nav svg { width: 20px; height: 20px; }

.lightbox-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 46px; height: 46px; }
.lightbox-nav { top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: clamp(0.75rem, 3vw, 2rem); }
.lightbox-next { right: clamp(0.75rem, 3vw, 2rem); }

.lightbox-counter {
  position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2.25rem); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--c-text-ondark-mute); background: rgba(10, 14, 18, 0.55);
  padding: 0.45em 1em; border-radius: var(--radius-btn); backdrop-filter: blur(6px);
  z-index: 1;
}
.lightbox-counter-current { color: var(--c-paper); }

@media (max-width: 700px) {
  .lightbox-stage { width: 94vw; height: 68vh; }
  .lightbox-close { width: 40px; height: 40px; top: 0.85rem; right: 0.85rem; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-nav svg, .lightbox-close svg { width: 17px; height: 17px; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-counter { bottom: 1rem; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-stage, .lightbox-img, .lightbox-nav { transition: none !important; }
  .lightbox-stage { transform: none !important; }
  .lightbox-img { transform: none !important; }
}

html.lightbox-locked, html.lightbox-locked body { overflow: hidden; height: 100%; }
html.lightbox-locked body { position: fixed; width: 100%; }

/* ---------------------------------------------------------------------------
   18. DESTINATIONS — Experience Sections (Destination Flights / Local Sightseeing)
   ------------------------------------------------------------------------ */
.dest-feature { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-lg); align-items: center; }
.dest-feature-reverse { grid-template-columns: 1fr 200px; }
@media (max-width: 900px) {
  .dest-feature, .dest-feature-reverse { grid-template-columns: 1fr; text-align: center; }
  .dest-feature-reverse .dest-feature-icon { order: -1; }
  .dest-chip-row, .dest-fact-grid { justify-content: center; }
  .dest-fact { text-align: left; }
}

.dest-feature-icon { position: relative; width: 200px; height: 200px; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dest-feature-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(198, 161, 91, 0.35); }
.dest-feature-ring::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid rgba(198, 161, 91, 0.22); }
.dest-feature-glyph { position: relative; width: 108px; height: 108px; border-radius: 50%; background: rgba(198, 161, 91, 0.12); color: var(--c-brass); display: flex; align-items: center; justify-content: center; }
.dest-feature-glyph svg { width: 44px; height: 44px; }
.dest-feature-icon-light .dest-feature-ring { border-color: rgba(246, 243, 234, 0.28); }
.dest-feature-icon-light .dest-feature-ring::before { border-color: rgba(246, 243, 234, 0.16); }
.dest-feature-icon-light .dest-feature-glyph { background: rgba(246, 243, 234, 0.1); color: var(--c-brass); }

.dest-feature-body { color: var(--c-text-onlight-mute); }
.dest-feature-body-dark { color: var(--c-text-ondark-mute); }

.dest-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dest-chip { padding: 0.5em 1.15em; border-radius: 999px; border: 1px solid var(--c-line-onlight); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-onlight-mute); }

.dest-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 600px) { .dest-fact-grid { grid-template-columns: 1fr; } }
.dest-fact { display: flex; gap: 0.85rem; }
.dest-fact .icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--c-brass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dest-fact .icon-wrap svg { width: 18px; height: 18px; }
.dest-fact .label { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-ondark-mute); margin-bottom: 0.3em; }
.dest-fact p { font-size: 0.92rem; color: var(--c-text-ondark); }