/* =============================================================================
   Riviera Aviation — Draft 04
   SINGLE-PAGE build: continuous scroll + hamburger menu (per Apr 22 feedback)
   Look & feel re-grounded on the shared jaysaircenter.com / vesperhangars.com
   design system (Aug 2026 request — "re-skin to match Jay's and Vesper
   hangars; all photos and verbiage intact"): Cormorant light serif display +
   DM Sans body, charcoal on warm white, gold accents, full-color photography.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   WEB FONTS — self-hosted variable fonts (latin subset) so the strict
   `font-src 'self'` CSP stays intact. One file covers the full weight range.
----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant';
  src: url('./media/fonts/Cormorant-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('./media/fonts/Cormorant-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./media/fonts/DMSans-normal.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   DESIGN TOKENS — palette matched to jaysaircenter.com
----------------------------------------------------------------------------- */
:root {
  --ink: #1A1A1A;        /* charcoal — text color (NOT dark panels) */
  --stone: #6E6A62;      /* warm grey — secondary text */
  --navy: #1B2838;       /* deep navy — dark panels/bands (both reference
                            sites use this exact value for dark sections) */
  --navy-deep: #16222E;  /* darker navy — utility top bar (per Vesper) */
  --gold: #C9A55B;       /* bright gold — accents on dark panels + decor */
  --gold-mid: #A98B47;   /* mid gold — headline italic accents on light bg */
  --gold-deep: #8F7539;  /* deep gold — small gold text on light bg (per
                            vesperhangars.com; bright gold fails contrast
                            on the cream ground at label sizes) */
  --cream: #F8F6F3;      /* warm white — page ground */
  --white: #FFFFFF;

  /* Kept for privacy.html (body background fallback token). */
  --paper: #F8F6F3;

  /* Alpha-derived tones */
  --ink-soft: rgba(26,26,26,0.78);       /* body copy on light bg */
  --white-soft: rgba(255,255,255,0.75);  /* secondary copy on dark bg */
  --line: rgba(26,26,26,0.12);
  --line-dark: rgba(255,255,255,0.14);

  --display: 'Cormorant', 'Times New Roman', Georgia, serif;
  --body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --page-pad-x: clamp(28px, 5.5vw, 88px);
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Fixed chrome footprint: utility top bar + header strip. Used by the
     hero offset, the open menu overlay, and section scroll anchoring. */
  --topbar-h: 42px;
  --header-height: clamp(64px, 7vw, 88px);
  --chrome-h: calc(var(--topbar-h) + var(--header-height));
}

/* -----------------------------------------------------------------------------
   RESET
----------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-family: var(--body); }
img, svg { display: block; max-width: 100%; height: auto; }

/* Visually hidden — accessible to AT, invisible to sighted users. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  /* DM Sans light on warm white — the Jay's Air Center body voice. Smaller
     scale than the VELVO-era 20px because DM Sans carries more ink per glyph;
     17px light with open leading reads airy without going under-inked. */
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color 0.35s var(--easing); }

/* Section anchor offset so the fixed chrome doesn't hide titles */
section[id] { scroll-margin-top: calc(var(--chrome-h) + 12px); }

/* -----------------------------------------------------------------------------
   UTILITY TOP BAR — slim navy strip with a gold contact link. Fixed above the
   header, mirroring vesperhangars.com (Jay's has the same bar).
----------------------------------------------------------------------------- */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 61;
  background: var(--navy-deep);
  color: rgba(248,246,243,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.top-bar p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar a {
  color: var(--gold);
  font-weight: 400;
}

.top-bar a:hover { color: #DBBC7E; }

@media (max-width: 700px) {
  .top-bar p { font-size: 12px; }
  /* Keep the actionable phone number visible on small screens; drop the location. */
  .top-bar__loc { display: none; }
}

/* -----------------------------------------------------------------------------
   FIXED HEADER — solid light strip below the top bar: hamburger (left),
   centered logo, CTA (right). Mirrors Jay's white header band.
----------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  height: var(--header-height);
  display: grid;
  /* 5 cols: [hamburger] [1fr] [centered brand] [1fr] [CTA] */
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  padding: 0 var(--page-pad-x);
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.brand-link {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  display: inline-block;
  line-height: 0;
  transition: opacity 0.35s var(--easing);
}

.brand-logo {
  width: clamp(150px, 13vw, 188px);
  height: auto;
  display: block;
  transition: filter 0.35s var(--easing);
}

.brand-link:hover { opacity: 0.72; }

/* -----------------------------------------------------------------------------
   HAMBURGER BUTTON — left side with a "Menu" label, per Jay's header.
----------------------------------------------------------------------------- */
.nav-toggle {
  /* Explicit row 1: this button sits in DOM order after the col-3 brand and
     col-5 CTA, and grid auto-placement's cursor cannot move backwards to
     col 1 — without this the button wraps onto a second row. */
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
}

.nav-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle__label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 639px) {
  .nav-toggle__label { display: none; }
}

.nav-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
  border-radius: 2px;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--easing), opacity 0.2s var(--easing);
}

/* When the full-screen menu is open the solid cream header band stays put
   above the navy overlay (Jay's-style chrome); only the icon morphs to an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===================================================================
   Header CTA — "Inquire" (and A/B variants)
   - Lives in grid column 3 of the .site-header (between centered brand
     and the column-4 hamburger). Right-justified within its column.
   - Matches the hairline / charcoal aesthetic: outline only, no fill.
   - Inverts to white when menu is open or page is at the top of the
     hero, mirroring the existing brand-logo / nav-toggle state flips.
   =================================================================== */
.cta-inquire {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  /* Jay's-style CTA: squared, solid dark block on the light header band. */
  color: var(--white);
  background-color: var(--navy);
  padding: 0.9em 1.8em;
  border: 1px solid var(--navy);
  border-radius: 0;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cta-inquire:hover,
.cta-inquire:focus-visible {
  opacity: 0.85;
  outline: none;
}

/* Sub-640px: shrink so it doesn't crowd the centered logo. */
@media (max-width: 639px) {
  .cta-inquire {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 0.75em 1.1em;
  }
}

/* -----------------------------------------------------------------------------
   FULL-SCREEN MENU OVERLAY
----------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0;
  background: rgba(22,34,46,0.97);
  color: var(--white);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.45s var(--easing), transform 0.45s var(--easing), visibility 0.45s;
  display: flex;
  align-items: flex-start;        /* top-align so the menu list never rises
                                     into the fixed chrome band on short
                                     viewports (e.g., landscape phones). */
  justify-content: center;
  padding-top: var(--chrome-h);
  overflow-y: auto;                /* let the menu scroll if the link list is
                                     taller than (viewport - chrome) on very
                                     short screens, instead of overlapping. */
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav ol {
  list-style: none;
  margin: auto 0;                  /* with .site-nav now align-items:flex-start,
                                     auto vertical margins re-center the list in
                                     whatever space is left below the header.
                                     On short viewports where the list overflows,
                                     auto margins collapse and the list sticks to
                                     the top of the scrollable area. */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.2vw, 36px);
  text-align: center;
}

.site-nav a {
  font-family: var(--display);
  font-size: clamp(36px, 5.5vw, 64px);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 300;
  color: var(--white);
  display: inline-block;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--easing), left 0.35s var(--easing);
}

.site-nav a:hover::after { width: 40%; left: 30%; }

/* Prevent body scroll when menu open */
body.menu-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   HERO — STILL IMAGE + SCROLL FLY-OFF
   Two stacked layers:
     .hero__clouds  — photographic cloud backdrop that persists after scroll
     .hero__photo   — the still PC-24 image; JS translates + fades it on scroll
----------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Full-bleed band that starts BELOW the fixed chrome (Jay's/Vesper pattern:
     the hero photo sits under the solid header strip, not behind it). */
  max-width: none;
  margin: var(--chrome-h) 0 0;
  padding: 0;
  height: calc(100vh - var(--chrome-h));
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
  /* Base sky gradient matches the blue-grey tones of the video so the
     transition feels continuous when the video fades. */
  background: linear-gradient(180deg, var(--navy) 0%, var(--stone) 60%, var(--white) 100%);
}

/* Back layer: photographic cloud backdrop from the same PC-24 scene. */
.hero__clouds {
  position: absolute;
  inset: -5% -6%;
  z-index: 0;
  background-image: url('./media/hero/pc24-hero-clouds.jpg');
  background-size: cover;
  background-position: center 30%;
  /* Very slow parallax drift — clouds feel alive without distracting. */
  animation: cloudDrift 120s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cloudDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d( 2.5%,  1%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__clouds { animation: none; transform: scale(1.04); }
}

/* Front layer: still photo. JS drives the fly-off transform on scroll. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('./media/hero/pc24-hero.jpg');
  background-size: cover;
  background-position: center 48%;
  will-change: transform, opacity;
  transition: transform 0.08s linear, opacity 0.08s linear;
  transform-origin: 40% 55%;
}

/* Veil on top of both layers — left-weighted vignette for headline
   legibility (hero copy is left-aligned, Vesper-style). */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22,34,46,0.60) 0%, rgba(22,34,46,0.28) 45%, rgba(22,34,46,0.00) 72%),
    linear-gradient(180deg, rgba(22,34,46,0.20) 0%, rgba(22,34,46,0.00) 40%, rgba(22,34,46,0.25) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo { transition: none; }
}

/* Hero copy — existing tagline + description, surfaced per the reference
   sites (both put a serif headline, subcopy, and a CTA on the hero photo). */
.hero__content {
  position: relative;
  z-index: 3;
  padding: 0 var(--page-pad-x);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(44px, 5.4vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--white);
  margin: 0 0 22px;
  max-width: 14ch;
}

.hero__title .italic {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.hero__sub {
  font-family: var(--body);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  /* Wrap before the aircraft nose in the hero photo. */
  max-width: 38ch;
  margin: 0 0 34px;
}

.hero__cta {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  padding: 16px 32px;
  transition: background 0.25s var(--easing), color 0.25s var(--easing), border-color 0.25s var(--easing);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  outline: none;
}

/* -----------------------------------------------------------------------------
   GENERIC SECTIONS
----------------------------------------------------------------------------- */
section {
  padding: clamp(80px, 10vw, 140px) var(--page-pad-x);
  max-width: 1280px;
  margin: 0 auto;
}

section.full-bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--body);
  /* 11px / 0.18em tracking — measured off the reference sites' kickers. */
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  /* Gold accent labels — the Jay's/Vesper signature detail. Deep variant on
     light ground; dark panels override to bright gold. */
  color: var(--gold-deep);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--display);
  /* Interior headings on both reference sites sit at 36-38px — hero scale is
     reserved for the hero. Leading 1.12 matches Jay's 36/40. */
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: 0;
  margin: 0 0 28px;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}

.section-title .italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  /* Gold italic accent word — Vesper's headline signature. Mid gold holds
     large-text contrast on the cream/white grounds. */
  color: var(--gold-mid);
}

.section-lede {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 28px;
}

.prose p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 22px;
}

/* -----------------------------------------------------------------------------
   SPLIT — the reference sites' core layout: alternating two-column
   text / image sections. Text is DOM-first (mobile stacks text over media);
   --rev flips the media to the left on desktop.
----------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.5vw, 80px);
  align-items: center;
}

.split__text { min-width: 0; }

.split--rev .split__media { order: -1; }

.split__media {
  margin: 0;
  min-width: 0;
}

.split__media--photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy);
}

.split__media--portrait { aspect-ratio: 4 / 5; }

.split__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--rev .split__media { order: 0; }
}

/* -----------------------------------------------------------------------------
   SECTION VISUALS — photographs render full-color per the Aug 2026 restyle
   and live inside .split columns (see SPLIT above).
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   PRICING WATERMARK — stacked brand mark, faint, centered behind copy.
----------------------------------------------------------------------------- */
.pricing-callout { position: relative; overflow: hidden; }

.pricing-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
  position: relative;
  z-index: 1;
}

.pricing-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
}

.pricing-watermark img {
  width: min(52%, 480px);
  height: auto;
  display: block;
}

/* -----------------------------------------------------------------------------
   .section-visual--video — moving-clouds video as the Experience section's
   split-column media (4:3, matching the photo columns).

   Filter applied at the figure level so it cascades to the rendered video +
   poster composited output.
----------------------------------------------------------------------------- */
.section-visual--video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Poster is baked in as a background so even if the video never loads
     (slow connection, data saver, CSP), the figure still has visual content. */
  background: url('./media/video/moving-clouds-poster.jpg') center 40% / cover var(--navy);
  filter: saturate(0.9) contrast(1.02);
}

.section-visual--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the sun/horizon band visible after the 4:3 cover crop. */
  object-position: center 40%;
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-playing motion. The poster (rendered via background-image above)
     remains as the static fallback. */
  .section-visual--video video { display: none; }
}

/* Chapter rhythm — alternate white and cream section grounds against the
   cream body, the same quiet alternation both reference sites use, with a
   hairline at each chapter break. Section order in the DOM: hero(1),
   experience(2), benefits(3, explicit white), pricing(4, navy), aircraft(5),
   charter(6), sales(7), story(8) → cream/white/navy/white/cream/white/cream. */
.section--clouds {
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--line);
}
section.section--clouds:nth-of-type(even) { background: transparent; }
.section--clouds > .section-inner { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   THREE-PILLAR GRID (The Experience)
----------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-top: 48px;
}

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

.pillar {
  /* Borderless cards — Jay's service cards are image + kicker + title + body
     with no rules. */
  border-top: none;
  padding-top: 0;
}

.pillar__photo {
  margin: 0 0 20px;
  /* 4:3 landscape, matching Jay's service-card image proportion. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy);
  border-radius: 0;
}

.pillar__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--easing);
}

.pillar:hover .pillar__photo img {
  transform: scale(1.02);
}

.pillar__num {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  /* Gold numerals — mirrors Jay's/Vesper numbered-chip accents. */
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.pillar__title {
  font-family: var(--display);
  /* Jay's card titles sit ~20px serif; 400 keeps small serif sizes legible. */
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.pillar__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   SERVICES LIST + PRICING CALLOUT
----------------------------------------------------------------------------- */
/* Gold-dot feature list — the reference sites mark list items with small
   gold bullets/checks instead of hairline rows. */
.services__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.services__list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.services__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-mid);
}

.services__note {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--stone);
  border-left: 2px solid var(--gold-mid);
  padding-left: 20px;
  max-width: 52ch;
}

.pricing-callout {
  /* Deep navy band — the reference sites' dark-panel color. */
  background: var(--navy);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) var(--page-pad-x);
}

.pricing-callout .section-title,
.pricing-callout .prose p {
  color: var(--white);
}

/* Gold label on the dark panel — high-signal Jay's detail. */
.pricing-callout .section-eyebrow { color: var(--gold); }

/* Bright gold italic accents on the navy panel (Vesper's on-dark accent). */
.pricing-callout .section-title .italic { color: var(--gold); }

.pricing-callout .underline-line {
  background-image: linear-gradient(var(--white-soft), var(--white-soft));
  background-position: 0 92%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
}

/* -----------------------------------------------------------------------------
   AIRCRAFT SECTION — focus text only, no invented fleet
----------------------------------------------------------------------------- */
.aircraft-focus {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: 48px;
}

@media (max-width: 880px) { .aircraft-focus { grid-template-columns: 1fr; } }

.focus-card {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  padding: 22px 0 24px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-top-color 0.3s var(--easing);
}

.focus-card:hover { border-top-color: var(--gold); }
.focus-card:hover .focus-card__cta { color: var(--gold-deep); }
.focus-card:hover .focus-card__cta::after { transform: translateX(5px); }

.focus-card:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 8px;
}

.focus-card__kicker {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.focus-card__title {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}

.focus-card__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.focus-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.25s var(--easing);
}

.focus-card__cta::after {
  content: "→";
  display: inline-block;
  font-size: 13px;
  transition: transform 0.25s var(--easing);
}

/* -----------------------------------------------------------------------------
   AIRCRAFT DETAILS MODAL
----------------------------------------------------------------------------- */
.aircraft-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--easing), visibility 0.35s;
}

.aircraft-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.aircraft-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 34, 46, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.aircraft-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 18px));
  width: min(1000px, calc(100% - clamp(32px, 6vw, 80px)));
  max-height: min(860px, calc(100vh - clamp(32px, 6vh, 80px)));
  background: var(--white);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(15, 21, 27, 0.45);
  transition: transform 0.4s var(--easing);
}

.aircraft-modal.is-open .aircraft-modal__panel {
  transform: translate(-50%, -50%);
}

@media (max-width: 820px) {
  .aircraft-modal__panel {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
  }
}

.aircraft-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--easing), border-color 0.25s var(--easing);
}

.aircraft-modal__close:hover {
  background: var(--white);
  border-color: var(--ink);
}

.aircraft-modal__close:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.aircraft-modal__slot {
  display: contents;
}

.aircraft-modal__image {
  margin: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(26,26,26,0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(28px, 4vw, 56px);
  border-right: 1px solid var(--line);
}

@media (max-width: 820px) {
  .aircraft-modal__image {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 40px 24px;
  }
}

.aircraft-modal__image svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

/* Photo variant — fills the entire image side, no padding/gradient,
   passed through the brand duotone so it matches the rest of the site. */
.aircraft-modal__image--photo {
  padding: 0;
  background: var(--ink);
  align-items: stretch;
  justify-content: stretch;
}

.aircraft-modal__image--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
  /* Full-color photography — duotone retired with the Aug 2026 restyle. */
}

.aircraft-modal__content {
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 48px);
  overflow-y: auto;
}

.aircraft-modal__kicker {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.aircraft-modal__title {
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.aircraft-modal__tagline {
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-style: italic;
  color: var(--stone);
  margin: 0 0 24px;
  line-height: 1.45;
}

.aircraft-modal__description {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.aircraft-modal__specs {
  margin: 0;
  border-top: 1px solid var(--line);
}

.aircraft-modal__specs > div {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.aircraft-modal__specs dt {
  margin: 0;
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
  align-self: center;
}

.aircraft-modal__specs dd {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

body.modal-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   FOOTER / INQUIRY BLOCK
----------------------------------------------------------------------------- */
.site-footer {
  /* Deep navy footer, matching both reference sites. */
  background: var(--navy);
  color: var(--white);
  padding: clamp(72px, 9vw, 120px) var(--page-pad-x) 36px;
}

.inquiry {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(36px, 5vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
}

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

.inquiry__eyebrow { color: var(--gold); }

.inquiry__title {
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 300;
  margin: 0 0 16px;
  line-height: 1.15;
  color: var(--white);
  text-wrap: balance;
}

.inquiry__title .italic { color: var(--gold); font-family: var(--display); font-style: italic; font-weight: 300; }

.inquiry__intro {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white-soft);
  max-width: 54ch;
}

.inquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}

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

.inquiry__line { margin: 0; }
.inquiry__line dt {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.inquiry__line dd {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.contact-links a {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--easing);
}
.contact-links a:hover { border-color: var(--white-soft); }
.contact-links a:focus-visible {
  outline: 1px solid var(--white-soft);
  outline-offset: 4px;
}

/* Ensure all footer links meet the 44px touch-target minimum on mobile. */
.inquiry__line dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}
.inquiry__line dd a:focus-visible {
  outline: 1px solid var(--white-soft);
  outline-offset: 4px;
}

.footer-meta {
  max-width: 1280px;
  margin: 40px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  /* --stone is now a warm grey tuned for light backgrounds; on the charcoal
     footer it would fall below contrast minimums, so use soft white here. */
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

@media (max-width: 640px) { .footer-meta { flex-direction: column; } }