/* ============================================================
   ZINO AVIATION — LUXURY TYPE SYSTEM
   GT Alpina (display serif, licensed, local files) over Jost (UI sans).
   Lifted from index-luxury.html and made site-wide.

   TO REVERT TO POPPINS: remove this stylesheet's <link> from the page
   head and un-comment the Poppins <link> directly above it. Nothing
   else needs touching — every rule here is additive.
   ============================================================ */

/* ---- GT Alpina (Grilli Type), served from assets/fonts ------ */
@font-face {
  font-family: 'GT Alpina';
  src: url('../assets/fonts/GT%20Alpina%20Lt.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../assets/fonts/GT%20Alpina.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../assets/fonts/GT%20Alpina%20Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../assets/fonts/GT%20Alpina%20Regular%20Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../assets/fonts/GT%20Alpina%20Bold%20Italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* GT Alpina draws ™ at almost full cap height, so "Concierge™" set at
   heading size reads as the letters T and M rather than a mark. This face
   claims that ONE character and hands it to a system font that draws it
   as a proper small superscript. `unicode-range` keeps it to U+2122, so
   nothing else on the page changes hands. */
@font-face {
  font-family: 'ZA Trademark';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI'), local('Liberation Sans');
  unicode-range: U+2122;
  font-display: swap;
}

:root {
  --sans: 'ZA Trademark', 'Jost', sans-serif;
  /* Cormorant Garamond only stands in if the licensed files ever go missing */
  --serif: 'ZA Trademark', 'GT Alpina', 'Cormorant Garamond', Georgia, serif;
}

/* Jost sets a little lighter than Poppins at the same weight, so the
   base body weight comes up a step to hold its colour on the page. */
body { font-family: var(--sans); font-weight: 400; }

/* ---- Display: the serif ------------------------------------- */
h1, h2, h3, h4,
.hero-headline, .hero-line1, .hero-line2,
.confidence-title, .journey-title, .revenue-title, .knowledge-title,
.jv-title, .acq-showcase-title, .acq-ed-title,
.acq-fan-title, .fold-card-label, .acq-ed-close-lead,
.sp-lead, .acq-showcase-aside {
  font-family: var(--serif);
}

/* A serif carries more weight per em than Poppins did, so the heavy
   weights and tight tracking the sans needed are dialled back. */
h1, h2, h3, h4,
.acq-showcase-title, .acq-ed-title, .confidence-title {
  font-weight: 400;
  letter-spacing: -0.005em;
}
body.acq-page main h2,
body.acq-page .sp-head h2,
body.acq-page .sp-cta h2,
body.acq-page .acq-showcase-title,
body.acq-page .acq-ed-title,
body.acq-page .acq-inc-head h2 {
  font-weight: 400;
  letter-spacing: -0.008em;
}
.sp-hero h1, .hero-headline, .hero-line1, .hero-line2, .acq-hero-head h1 {
  font-weight: 400;
  letter-spacing: 0;
}
/* card titles keep a touch more weight so they hold against photography */
.acq-fan-title, .acq-diff-card h3, .acq-bento-card h3,
.fold-card-label, .sp-diff-item h3, .sp-card h3, .acq-deck-card h3 {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.sp-lead, .acq-showcase-aside, .acq-ed-close-lead {
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---- Labels, controls and chrome stay in the sans ----------- */
.eyebrow, .sp-hero-eyebrow, .acq-sublabel, .tagline-gold,
.nav, .nav-pill-item, .nav-cta, .nav-dropdown-panel span, .mobile-menu a,
.btn, .journey-pill, .hero-btn, .card-link, .sp-card-index,
.acq-bento-index, .acq-fan-index, .acq-diff-index, .acq-deck-index,
.acq-pill, .fold-tag, .fold-hint, .acq-adv-pillar span,
.footer-col h4, .footer-tagline, .footer-contact, .footer-bottom,
.sp-field label, .sp-form-note, .hero-marquee, .hero-tags,
.acq-ed-close-sub, .section-index {
  font-family: var(--sans);
}
/* the nav dropdown's bold entries are labels, not display type */
.nav-dropdown-panel strong { font-family: var(--sans); font-weight: 600; }
/* small uppercase labels need their tracking back */
.eyebrow, .sp-hero-eyebrow, .acq-sublabel, .acq-pill, .fold-tag {
  letter-spacing: 0.2em;
}
.acq-pill { letter-spacing: 0.04em; }

/* ============================================================
   CTA PASS
   Client: "make it square." Dara: "leave my golden CTAs, we just
   stop the curved edges." So the shape is squared and the label picks
   up the luxury tracking, but the palette stays the brand gold.
   The HEADER CTA is deliberately excluded: it goes back exactly to
   how it was, rounded, per Dara.
   ============================================================ */
.btn,
.journey-pill,
.hero-btn,
.mobile-menu a.mobile-cta,
body.acq-page main .btn {
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 18px 34px;
  transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
/* primary: brand gold, as it always was */
.btn-primary,
.hero-btn-primary,
.journey-pill--gold,
.mobile-menu a.mobile-cta,
body.acq-page main .btn-primary {
  background: var(--gold);
  background-image: none;
  color: #1b190f;
  border: 1px solid var(--gold);
  box-shadow: 0 8px 22px rgba(181,155,72,0.26);
}
.btn-primary:hover,
.hero-btn-primary:hover,
.journey-pill--gold:hover,
.mobile-menu a.mobile-cta:hover,
body.acq-page main .btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  background-image: none;
  color: #1b190f;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(181,155,72,0.4);
}
/* secondary on dark: hairline outline that fills gold on hover */
.btn-outline-light,
.hero-btn-secondary,
.journey-pill,
.journey-pill--ghost,
body.acq-page main .btn-outline-light {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background-image: none;
  box-shadow: none;
}
.btn-outline-light:hover,
.hero-btn-secondary:hover,
.journey-pill:hover,
body.acq-page main .btn-outline-light:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #1b190f;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(181,155,72,0.34);
}
/* The closing-section gold pill also carries .journey-pill, whose outline
   background is declared above it — so it needs the extra class to keep
   its gold. */
.journey-pill.journey-pill--gold {
  background: var(--gold); color: #1b190f; border: 1px solid var(--gold);
  box-shadow: 0 8px 22px rgba(181,155,72,0.26);
}
.journey-pill.journey-pill--gold:hover {
  background: var(--gold-light); border-color: var(--gold-light); color: #1b190f;
}

/* secondary on light grounds */
.btn-outline,
body.acq-page main .btn-outline,
body.acq-page .sp-cream .btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(34,34,34,0.32);
  background-image: none;
}
.btn-outline:hover,
body.acq-page main .btn-outline:hover {
  background: var(--gold); border-color: var(--gold); color: #1b190f;
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(181,155,72,0.34);
}

/* The header CTA is NOT part of the squared system — Dara asked for it
   back exactly as it was: rounded, gold, at its original scale. */
.nav-cta,
body.acq-page .nav-cta {
  border-radius: 30px;
  font-family: var(--sans);
  padding: 11px 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--gold);
  background-image: none;
  color: var(--navy);
  border: 1px solid var(--gold);
  box-shadow: 0 8px 22px rgba(181,155,72,0.26);
}
.nav-cta:hover {
  background: var(--gold-light); border-color: var(--gold-light);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(181,155,72,0.35);
}

/* "I just said slow that down, it's changing too quickly."
   Longer, gentler reveals across the whole site. */
.reveal, .reveal-card, .reveal-list > * {
  transition-duration: 1.25s !important;
  transition-timing-function: cubic-bezier(.16,.8,.28,1) !important;
}

/* Small screens: the squared CTAs are letter-spaced and uppercase, so the
   longer labels ("Experience The JetVault Experience") outrun a 390px
   viewport. They step down and stack full width instead of overflowing. */
@media (max-width: 560px){
  .btn, .journey-pill, .hero-btn, .mobile-menu a.mobile-cta {
    font-size: 11.5px; letter-spacing: 0.13em; padding: 16px 20px;
  }
  .sp-actions .btn, .acq-hero-ctas .btn, .hero-btns .hero-btn {
    flex: 1 1 100%; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
  }
}