/* ============================================================
   WHEELHOUSE FORMS — THE PRIVATE LOUNGE
   A high-class jet-port lounge at dusk. The departure board
   is the navigation; picking a destination flies you there.
   Palette: charcoal, champagne gold, dusk sky, cream.
   ============================================================ */

:root {
  /* ---------- PALETTE: DUSK LOUNGE ---------- */
  --char:    #F3F0E9;    /* ivory marble — page base */
  --char-2:  #EAE6DA;    /* raised section */
  --board:   #12110D;    /* departure board housing (stays dark) */
  --line:    #DCD5C4;    /* hairlines */

  --cream:   #211E17;    /* headlines — deep ink on marble */
  --linen:   #4C4739;    /* body prose */
  --stone:   #8B8371;    /* captions */

  --gold:       #B8923F; /* champagne gold, deepened for daylight */
  --gold-deep:  #8F6E27;
  --gold-soft:  rgba(184, 146, 63, 0.14);
  --dusk:       #7FB0D6; /* midday sky over the tarmac */

  --flap:       #140F08; /* split-flap cell — espresso */
  --flap-lit:   #201810;

  /* ---------- TYPE ---------- */
  --display: "Montserrat", "Segoe UI", sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --board-f: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --t-hero:  clamp(2.2rem, 5.5vw, 4.2rem);
  --t-h2:    clamp(1.6rem, 3.6vw, 2.8rem);
  --t-body:  clamp(1rem, 1.15vw, 1.125rem);
  --t-small: 0.875rem;
  --t-micro: 0.72rem;

  /* ---------- RHYTHM ---------- */
  --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 7rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --page-max: 1200px;
  --measure: 58ch;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 250ms; --med: 600ms; --slow: 1100ms; --cinema: 1600ms;

  --z-nav: 100; --z-veil: 200; --z-intro: 300;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--char);
  color: var(--linen);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--char); }

/* ---------- VEIL (page transitions) ---------- */
.veil {
  position: fixed; inset: 0;
  background: var(--char);
  z-index: var(--z-veil);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--med) var(--ease-inout);
}
body.is-leaving .veil { opacity: 1; pointer-events: all; }
body.is-entering .veil { opacity: 1; }
body.is-entering.is-ready .veil { opacity: 0; }

/* ---------- FLY-AWAY DEPARTURE TRANSITION ---------- */
.flyveil {
  position: fixed; inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    var(--char);
}
body.is-flying .flyveil {
  animation: flyOut 950ms var(--ease-inout) forwards;
  pointer-events: all;
}
@keyframes flyOut {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.15); }
}
body.is-flying .lounge__scene { transform: scale(1.14); filter: brightness(1.35); }

/* ---------- INTRO FILM OVERLAY ---------- */
.intro {
  position: fixed; inset: 0;
  z-index: var(--z-intro);
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 900ms var(--ease-inout);
}
.intro.is-done { opacity: 0; pointer-events: none; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro__skip {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vh, 2.5rem);
  padding: 0.8em 1.8em;
  border: 1px solid rgba(244, 237, 221, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.intro__skip:hover { border-color: var(--gold); background: rgba(0, 0, 0, 0.7); }

/* ---------- CORNER MARK + REEL ---------- */
.mark {
  position: fixed;
  top: clamp(1rem, 3vh, 2rem);
  left: var(--gutter);
  z-index: var(--z-nav);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.3;
  padding: 0.4rem 0.7rem;
  margin: -0.4rem -0.7rem;
  border-radius: 6px;
  transition: background var(--med) var(--ease-out);
}
body.is-scrolled .mark {
  background: rgba(243, 240, 233, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mark em { font-style: normal; color: var(--gold); }
.mark small {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* lounge page: match the headline panel's text color */
.page-lounge .mark {
  color: #F4EDDD;
  /* the lounge photo is bright right where this sits before any scroll —
     a permanent soft shadow + faint scrim keeps it legible either way */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.4);
  background: rgba(20, 16, 10, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-lounge .mark em { color: #D7B36A; }
.page-lounge.is-scrolled .mark {
  background: rgba(26, 20, 13, 0.6);
}
/* Desktop header nav — sits on the same line as the corner mark instead of
   stacking down the right edge. The old vertically-centered fixed column
   kept colliding with page content whenever the window was resized to an
   in-between width, because it had no relationship to the mark or the rest
   of the header — two independent fixed-position guesses at where there'd
   be room. Anchoring it to the same "top" as .mark and laying it out as a
   plain horizontal row removes that guesswork. Mobile is untouched: .reel
   is display:none below 820px regardless of what's here (see the mobile
   breakpoint), and the hamburger + full-screen menu take over instead. */
.reel {
  position: fixed;
  /* nudged up slightly from .mark's own "top" value — the pill's own line
     height/padding still center it a touch lower than the mark's tightly
     set text, even after matching line-height */
  top: calc(clamp(1rem, 3vh, 2rem) - 0.21rem);
  right: var(--gutter);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}
/* Dark-glass pill on every page — not just the lounge. Matches the
   .hangar__gate badge already used on the Works page. */
.reel__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  color: #E9E2CF;
  /* .reel__link never set its own line-height, so it was inheriting the
     body's 1.75 — nearly double .mark's explicit 1.3 — which is what made
     these pills look fat and sit visibly lower than the mark text next to
     them. Matching .mark's line-height (and trimming padding to match) is
     what actually gets them onto the same visual line at the same size. */
  line-height: 1.3;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(215, 179, 106, 0.32);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: color var(--fast) var(--ease-out), background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.reel__label {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reel__num { font-family: var(--display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.75; }
.reel__link:hover { color: #FFFFFF; background: rgba(26, 20, 13, 0.82); border-color: rgba(215, 179, 106, 0.5); }
.reel__link.is-active { color: #D7B36A; border-color: rgba(215, 179, 106, 0.55); background: rgba(26, 20, 13, 0.85); }
/* narrower desktop widths (just above the mobile breakpoint): tighten
   everything so the three pills never crowd into the corner mark */
@media (min-width: 821px) and (max-width: 1080px) {
  .mark { font-size: 0.82rem; }
  .reel { gap: 0.35rem; }
  .reel__link { padding: 0.24rem 0.55rem; gap: 0.35rem; }
  .reel__label { font-size: 0.6rem; letter-spacing: 0.12em; }
  .reel__num { font-size: 0.62rem; }
}

/* ---------- MOBILE NAV (hamburger + full-screen menu, <=820px) ---------- */
.nav-toggle {
  display: none; /* shown only under the 820px breakpoint below */
  position: fixed;
  /* .mark sits at the same fixed "top" value, but its own box is shorter
     and pulled up by a negative margin, so its visual center sits higher
     than a plain top-aligned box would — nudge up to match its center */
  top: calc(clamp(1rem, 3vh, 2rem) - 0.4rem);
  right: calc(var(--gutter) - 0.6rem);
  z-index: var(--z-nav);
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(215, 179, 106, 0.25);
  background: rgba(26, 20, 13, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(26, 20, 13, 0.82); border-color: rgba(215, 179, 106, 0.5); outline: none; }
.nav-toggle__bars { position: relative; width: 0.8rem; height: 0.6rem; }
.nav-toggle__bars span {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px;
  background: #E9E2CF; border-radius: 2px;
  transition: transform var(--fast) var(--ease-out), opacity var(--fast) var(--ease-out), top var(--fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; margin-top: -1px; }
.nav-toggle__bars span:nth-child(3) { top: 100%; margin-top: -2px; }
body.nav-open .nav-toggle__bars span:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bars span:nth-child(3) { top: 50%; margin-top: -1px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  padding: var(--gutter);
  background: rgba(15, 11, 7, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--med) var(--ease-out), transform var(--med) var(--ease-out);
}
body.nav-open .mobile-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  min-height: 3rem;
  border: 1px solid rgba(215, 179, 106, 0.2);
  border-radius: 12px;
  color: #E9E2CF;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { background: rgba(215, 179, 106, 0.12); border-color: rgba(215, 179, 106, 0.5); color: #FFFFFF; outline: none; }
.mobile-menu__link.is-active { color: #D7B36A; border-color: rgba(215, 179, 106, 0.55); }
.mobile-menu__num { font-family: var(--display); font-weight: 700; font-size: 0.8rem; opacity: 0.7; }

/* ---------- PRIMITIVES ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker::before { content: ""; width: 2.5rem; height: 1px; background: var(--gold); }
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--gold); }
.prose { max-width: var(--measure); }
.prose strong { color: var(--cream); font-weight: 600; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 1.05em 2.4em;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: #211E17;
  background: var(--gold);
  cursor: pointer;
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 30px rgba(215, 179, 106, 0.25); }
.btn .arrow { transition: transform var(--med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

/* ---------- REVEAL + ENTRANCE ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-enter { opacity: 0; transform: translateY(44px); }
body.is-ready .hero-enter {
  animation: heroEnter var(--cinema) var(--ease-out) forwards;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes heroEnter { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   THE LOUNGE — full-viewport scene + departure board
   ============================================================ */
.lounge {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-6) var(--gutter) var(--s-4);
  overflow: hidden;
  isolation: isolate;
}
.lounge__scene {
  position: absolute; inset: 0;
  z-index: -2;
  transition: transform 950ms var(--ease-inout), filter 950ms var(--ease-inout);
  will-change: transform;
  /* daylight placeholder until assets/lounge.webp arrives */
  background:
    linear-gradient(180deg, #A8CBE4 0%, #C7DEEE 40%, #E9F1F5 56%, #C9C4B4 60%, #EFEBDF 62%, #F3F0E9 100%);
}
.lounge__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.lounge__scrim {
  display: none; /* removed — show the lounge photo untouched */
}

.lounge__head {
  max-width: min(92vw, 980px);   /* same width as the departure board */
  margin: 0 auto var(--s-4);
  width: 100%;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 4vw, 3rem) clamp(1.2rem, 2.2vw, 1.7rem);
  background: rgba(26, 20, 13, 0.6);   /* same glass as the reel menu */
  border: 1px solid rgba(215, 179, 106, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(15, 13, 9, 0.35);
}
/* board-matched text inside the smoked panel */
.lounge__head .lounge__title { color: #F4EDDD; }
.lounge__head .lounge__title em { color: #D7B36A; }
.lounge__head .kicker { color: #D7B36A; }
.lounge__head .kicker::before { background: #D7B36A; }
.lounge__title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-top: 0.6rem; }
.lounge__sub {
  max-width: 58ch;
  margin: 0.7rem auto 0;
  font-size: var(--t-small);
  color: #E4DECC;
}

/* ---------- THE DEPARTURE BOARD ---------- */
.board {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  background: rgba(15, 11, 7, 0.95);
  border: 1px solid rgba(215, 179, 106, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(33, 30, 23, 0.35);
  overflow: hidden;
}
.board__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 9rem;
  gap: var(--s-2);
  align-items: center;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid rgba(215, 179, 106, 0.18);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #A99F82;
}
.board__head span:nth-child(2), .board__head span:nth-child(3) { text-align: center; }
.board__title {
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.board__title .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #D7B36A;
  animation: blink 2.4s var(--ease-inout) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 9rem;
  gap: var(--s-2);
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(215, 179, 106, 0.14);
  cursor: pointer;
  transition: background var(--fast) var(--ease-out);
}
.board__row:last-child { border-bottom: 0; }
.board__row:hover, .board__row:focus-visible { background: rgba(215, 179, 106, 0.1); outline: none; }

.flaps { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.flap {
  display: inline-grid;
  place-items: center;
  min-width: 1.05em;
  height: 1.65em;
  padding: 0 0.08em;
  background: linear-gradient(180deg, var(--flap-lit) 0 49%, var(--flap) 51% 100%);
  border-radius: 3px;
  font-family: var(--board-f);
  font-weight: 500;
  font-size: clamp(0.72rem, 1.35vw, 1.02rem);
  color: #F4EDDD;
  text-transform: uppercase;
}
.flap--space { background: transparent; }
.flaps--gate { justify-content: center; }
.flaps--status { justify-content: center; }
.flaps--status .flap { color: #D7B36A; }
.board__row:hover .flaps--status .flap { color: #F4EDDD; background: linear-gradient(180deg, #4A3A1C 0 49%, #3A2D14 51% 100%); }

.board__foot {
  padding: 0.7rem 1.4rem;
  font-family: var(--body);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A99F82;
  border-top: 1px solid rgba(215, 179, 106, 0.18);
  text-align: center;
}

/* ============================================================
   CONCIERGE — quiet closing section
   ============================================================ */
.concierge {
  position: relative;
  padding: var(--s-6) var(--gutter);
  text-align: center;
  background:
    radial-gradient(70% 100% at 50% 130%, rgba(215, 179, 106, 0.12), transparent 60%),
    var(--char-2);
  border-top: 1px solid var(--line);
}
.concierge__inner { max-width: var(--page-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.concierge__title { font-size: var(--t-h2); }
.concierge__prose { margin-inline: auto; }

/* ============================================================
   PAGE 02 — THE FLEET (the hangar gallery)
   ============================================================ */
.pagehead {
  padding: calc(var(--s-6) + 3rem) var(--gutter) var(--s-5);
  text-align: center;
}
.pagehead__title { font-size: var(--t-hero); margin-top: var(--s-2); }
.pagehead__sub { max-width: 54ch; margin: var(--s-2) auto 0; color: var(--linen); }

.hangar {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-6);
}
.hangar__item { margin-bottom: var(--s-6); }
.hangar__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
/* keeps the gate + status pills glued together as one unit so the outer
   .hangar__eyebrow row can still wrap "Reserve a seat" onto its own line
   on narrow screens without ever splitting the two pills apart from
   each other. */
.hangar__badges {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
}
.hangar__gate {
  font-family: var(--board-f);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: #F4EDDD;
  background: rgba(15, 11, 7, 0.95);
  border: 1px solid rgba(215, 179, 106, 0.25);
  padding: 0.45em 1em;
  border-radius: 999px;
}
.hangar__gate em { font-style: normal; color: #D7B36A; }
.hangar__status {
  font-family: var(--body);
  font-weight: 600;
  /* sized to match .hangar__gate (font-size, letter-spacing, padding) so
     the two pills read as the same size next to each other */
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid rgba(184, 146, 63, 0.45);
  border-radius: 999px;
  padding: 0.45em 1em;
  background: var(--gold-soft);
}
.hangar__board {
  margin-left: auto;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color var(--fast) var(--ease-out);
}
.hangar__board:hover { color: var(--cream); }
.hangar__frame {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(33, 30, 23, 0.3);
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
}
.hangar__frame img {
  width: 100%;
  transition: transform var(--slow) var(--ease-out);
}
.hangar__frame:hover { transform: translateY(-6px); box-shadow: 0 34px 80px rgba(33, 30, 23, 0.4); }
.hangar__frame:hover img { transform: scale(1.03); }

/* cinematic caption bar — for photographic frames (no title baked into the
   art itself, unlike the illustrated posters) so the product name still
   reads at a glance. A soft bottom scrim + small tracked gold caps, like a
   film title card fading in over a scene, rather than a sticker slapped on. */
.hangar__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.2rem 1.4rem 1.1rem;
  background: linear-gradient(180deg, rgba(10, 8, 5, 0) 0%, rgba(10, 8, 5, 0.55) 55%, rgba(10, 8, 5, 0.86) 100%);
  display: flex;
  align-items: center;
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F4EDDD;
  pointer-events: none;
}
.hangar__caption::before { content: ""; width: 1.4rem; height: 1px; background: #D7B36A; margin-right: 0.8em; flex-shrink: 0; }

/* solo arrival mode: only the chosen gate is on the page, centered */
.hangar__item.is-hidden { display: none; }
body.is-solo .parlor--charter, body.is-solo .parlor--story { display: none; }
body.is-solo main {
  min-height: calc(100svh - 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.is-solo .pagehead { padding: calc(var(--s-5) + 3rem) var(--gutter) var(--s-4); }
body.is-solo .hangar { padding-bottom: var(--s-4); max-width: 880px; width: 100%; }
body.is-solo .hangar__item { margin-bottom: var(--s-4); }
.hangar__fleetlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.hangar__fleetlink[hidden] { display: none; }

/* generic quiet section on marble */
.parlor {
  padding: var(--s-6) var(--gutter);
  background: var(--char-2);
  border-top: 1px solid var(--line);
}
.parlor__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-5);
  align-items: start;
}
.parlor__title { font-size: var(--t-h2); margin-top: var(--s-2); }
@media (max-width: 900px) { .parlor__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ============================================================
   PAGE 03 — FLIGHT PLAN (boarding-pass contact)
   ============================================================ */
.pass {
  max-width: 720px;
  margin: 0 auto var(--s-6);
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(33, 30, 23, 0.3);
  overflow: hidden;
}
.pass__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 1.1rem 1.6rem;
  background: var(--board);
  color: #F4EDDD;
  font-family: var(--board-f);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pass__head em { font-style: normal; color: #D7B36A; }
.pass__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 1.6rem;
  border-bottom: 1px dashed var(--line);
}
.pass__city { text-align: center; }
.pass__city .code {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.08em;
  color: var(--cream);
  display: block;
}
.pass__city .name { font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.pass__plane { color: var(--gold-deep); font-size: 1.4rem; }
.pass__form { padding: var(--s-3) 1.6rem var(--s-4); display: grid; gap: var(--s-3); }
.pass__field { display: grid; gap: 0.45rem; }
.pass__field label {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.pass__field input, .pass__field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--cream);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85em 1em;
  transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.pass__field input:focus, .pass__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.pass__field textarea { min-height: 8rem; resize: vertical; }
.pass__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 1.6rem var(--s-4);
  font-size: var(--t-small);
  color: var(--stone);
}
.pass__foot a { color: var(--gold-deep); }
.pass__foot a:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line); padding: var(--s-4) var(--gutter); background: var(--board); }
.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--stone);
}
.footer a { transition: color var(--fast) var(--ease-out); display: inline-block; padding: 0.3rem 0.1rem; }
.footer a:hover { color: var(--gold); }

/* ---------- ACCESSIBILITY / RESPONSIVE ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero-enter { opacity: 1; transform: none; }
}
@media (max-width: 820px) {
  .reel { display: none; }
  .nav-toggle { display: flex; }
  /* The lounge photo's ceiling / light-fixture strip sits right under the
     fixed header (mark + hamburger) with nothing masking it on phones —
     the header floats independently of the flex-end-anchored .lounge__head
     panel below it, leaving that strip of raw photo exposed in between. A
     soft top-down scrim (same dark glass tone as the header pills) blends
     it away without touching the photo file itself or affecting desktop,
     where the horizontal reel nav already gives the top of the frame
     enough visual weight that it doesn't read as bare ceiling. */
  .lounge::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 22vh;
    background: linear-gradient(180deg, rgba(20, 16, 10, 0.68) 0%, rgba(20, 16, 10, 0.34) 55%, rgba(20, 16, 10, 0) 100%);
    z-index: -1;
    pointer-events: none;
  }
  .board__head { grid-template-columns: minmax(0, 1fr) 3.2rem 6.4rem; }
  .board__row  { grid-template-columns: minmax(0, 1fr) 3.2rem 6.4rem; padding: 0.85rem 0.9rem; }
  .flap { font-size: 0.62rem; }
  .board__head { font-size: 0.56rem; letter-spacing: 0.18em; }
  /* .pagehead's tall top padding was sized to clear the old full desktop
     side nav — the compact hamburger up top needs far less clearance, so
     the old value just reads as a big empty gap before "02 · The Fleet" etc. */
  .pagehead { padding-top: calc(var(--s-5) + 2rem); }
  body.is-solo .pagehead { padding-top: calc(var(--s-4) + 2rem); }
  /* The gate + status pills (desktop-sized for a wide row) plus the
     "Reserve a seat" link crowded and wrapped onto multiple lines at
     phone widths. Shrinking the two pills lets .hangar__badges keep them
     together on one line; "Reserve a seat" is free to drop to its own
     line below via .hangar__eyebrow's existing wrap if a given phone is
     too narrow for all three. */
  .hangar__gate { font-size: 0.6rem; padding: 0.4em 0.75em; letter-spacing: 0.12em; }
  .hangar__status { font-size: 0.6rem; padding: 0.4em 0.75em; letter-spacing: 0.12em; }
  .hangar__badges { gap: 0.4rem; }
  /* Same treatment for the "See the Full Fleet" / "Back to the Lounge"
     pair shown after arriving from a single departure-board gate — the
     .btn class's desktop padding (sized for full-width CTAs elsewhere on
     the site) was oversized here and forced the two links onto separate
     lines. */
  .hangar__fleetlink { gap: 0.6rem; }
  .hangar__fleetlink .btn { padding: 0.7em 1.4em; font-size: 0.62rem; letter-spacing: 0.14em; }
  .hangar__fleetlink .hangar__board { font-size: 0.62rem; letter-spacing: 0.14em; }
  /* Footer was carrying the same desktop padding/type scale as the rest
     of the site — far too tall a band for a simple copyright + 3 links
     on a phone. */
  .footer { padding: 0.9rem var(--gutter); }
  .footer__inner { font-size: 0.62rem; gap: 0.4rem 0.8rem; }
}
@media (max-width: 480px) {
  .board__head { grid-template-columns: minmax(0, 1fr) 2.4rem 5.2rem; padding: 0.75rem 0.8rem; }
  .board__row  { grid-template-columns: minmax(0, 1fr) 2.4rem 5.2rem; padding: 0.85rem 0.8rem; }
  .flap { font-size: 0.56rem; min-width: 0.95em; }
  .board__head { font-size: 0.5rem; letter-spacing: 0.14em; }
  .lounge__head { padding: 0.9rem 1rem 1.1rem; }
  .mark { font-size: 0.82rem; }
}
@media (max-width: 640px) {
  /* the long "Wheelhouse Forms LLC · Private Lounge" kicker (and any other
     long kicker text) doesn't fit on one line at phone widths — the default
     inline-flex layout (dash + text as two flex items, row direction) lets
     the text wrap on its own while the dash stays put, which looks like a
     misaligned, half-stacked mess. Stack the dash above the text instead,
     both centered, so a wrap always looks intentional. */
  .kicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    letter-spacing: 0.2em;
  }
  .kicker::before { width: 2rem; }
}