/* ==========================================================================
   A2Z "First Light" v2 — brand identity system (sitewide)
   Brand: Purple #4C1D95 · Cerulean #0088F0 · Navy #0F172A · Neutrals slate.
   The film hero stays cinematic (see a2z-film.css). Everything else uses
   these tokens. Loaded on every page after the redesign layer.
   Content / SEO / GEO untouched — visual tokens only.
   ========================================================================== */

/* Self-hosted Manrope + Fraunces (woff2) — see assets/fonts/ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
}

:root {
  /* Brand identity */
  --fl-purple: #4c1d95;
  --fl-purple-deep: #2e1065;
  --fl-cerulean: #0078d4;
  --fl-cerulean-hover: #0060ad;
  --fl-cerulean-soft: #e6f4fe;
  --fl-navy: #0f172a;
  --fl-brand-grad: linear-gradient(135deg, #4c1d95 0%, #0088f0 100%);

  /* film/cinematic tokens (hero only — gold kept for film accents) */
  --fl-ink: #0f172a;
  --fl-gold: #e8a33d;
  --fl-gold-deep: #c9832a;
  --fl-cream: #fbf6ee;
  --fl-mist: rgba(248, 250, 252, 0.72);
  --fl-display: 'Fraunces', 'Georgia', serif;
  --fl-ui: 'Manrope', 'Segoe UI', sans-serif;

  /* Product world — white + brand accents */
  --fl-white: #ffffff;
  --fl-fill: #f8fafc;
  --fl-hairline: #e2e8f0;
  --fl-text: #0f172a;
  --fl-text-2: #334155;
  --fl-link: var(--fl-cerulean);
  --fl-blue: var(--fl-cerulean);
  --fl-blue-soft: var(--fl-cerulean-soft);

  /* Dark bands / footer — purple → navy (brand) */
  --fl-band: #4c1d95;
  --fl-band-deep: #0f172a;
  --fl-band-mid: #2e1065;

  /* Token remap for the existing component system */
  --a2z-background: var(--fl-white);
  --a2z-surface: var(--fl-white);
  --a2z-surface-soft: var(--fl-fill);
  --a2z-surface-warm: var(--fl-fill);
  --a2z-ink: var(--fl-text);
  --a2z-text: var(--fl-text);
  --a2z-muted: var(--fl-text-2);
  --a2z-line: var(--fl-cerulean);
  --a2z-line-soft: var(--fl-hairline);
  --a2z-primary: var(--fl-cerulean);
  --a2z-primary-hover: var(--fl-cerulean-hover);
  --a2z-primary-soft: var(--fl-cerulean-soft);
  --a2z-brand: var(--fl-purple);
  --a2z-brand-deep: var(--fl-navy);
  --a2z-brand-mid: var(--fl-purple-deep);
  --a2z-brand-soft: var(--fl-cerulean-soft);
  --a2z-accent: var(--fl-cerulean);
  --a2z-accent-hover: var(--fl-cerulean-hover);
  --a2z-accent-soft: var(--fl-cerulean-soft);
  --a2z-accent-glow: rgba(0, 136, 240, 0.28);
  --a2z-border: var(--fl-hairline);
  --a2z-cream-100: var(--fl-white);
  --a2z-cream-200: var(--fl-fill);
  --a2z-gold: var(--fl-cerulean);
  --a2z-gold-light: #33a3f5;
  --a2z-gold-dark: var(--fl-cerulean-hover);
  --a2z-sky: var(--fl-cerulean);
  --a2z-sky-dark: var(--fl-cerulean-hover);
  --a2z-void: var(--fl-navy);
  --a2z-navy-950: var(--fl-navy);
  --a2z-navy-900: var(--fl-navy);
  --a2z-navy-800: var(--fl-purple-deep);
}

body.a2z-site {
  font-family: var(--fl-ui);
  background: var(--fl-white);
  color: var(--fl-text);
}

/* Headlines: tight modern sans below the film (serif lives in the hero only) */
h1, h2, h3, .a2z-section-title, .a2z-hero__headline {
  font-family: var(--fl-ui);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--fl-text);
}
.a2z-section-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.12; }
.a2z-section-lead, .a2z-section-sub { color: var(--fl-text-2); }

/* Page hero bands (airport/blog/faq pages) keep the cinematic serif on navy */
[class*="hero"] h1 {
  font-family: var(--fl-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* Eyebrows/kickers: small caps grey on white, light gold inside dark hero bands */
.a2z-section .kicker, .kicker, .a2z-eyebrow {
  color: var(--fl-text-2) !important;
  font-family: var(--fl-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
}
[class*="hero"] .kicker, [class*="hero"] [class*="kicker"], [class*="hero"] .a2z-eyebrow {
  color: var(--fl-gold) !important;
}

/* Buttons — cerulean CTAs (brand identity) */
.a2z-btn--primary, .a2z-btn-book {
  background: var(--fl-cerulean) !important;
  border-color: var(--fl-cerulean) !important;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 136, 240, 0.28) !important;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.a2z-btn--primary:hover, .a2z-btn-book:hover {
  background: var(--fl-cerulean-hover) !important;
  transform: translateY(-1px);
}
.a2z-btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--fl-cerulean);
  outline-offset: 2px;
}

/* Cards + surfaces: white on white separated by hairlines and quiet fills */
.a2z-search-card, .a2z-card, .a2z-parking-card,
.a2z-service-card, .a2z-offer-card, .a2z-review-card {
  background: var(--fl-white);
  border: 1px solid var(--fl-hairline);
  border-radius: 18px;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.35s ease;
}
.a2z-service-card:hover, .a2z-offer-card:hover, .a2z-parking-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(29, 29, 31, 0.08);
}

/* Section rhythm: white / quiet-grey alternation, generous air */
.a2z-section { background: var(--fl-white); padding-top: 84px; padding-bottom: 84px; }
.a2z-section--white { background: var(--fl-white); }
.a2z-section--soft, .a2z-section--cream { background: var(--fl-fill); }

/* Dark page bands + footer — brand purple → navy */
.a2z-results-hero, body.a2z-white .a2z-results-hero,
.a2z-support-band, body.a2z-white .a2z-support-band,
body.a2z-php1 .a2z-support-band,
body.a2z-white .a2z-support-band {
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(0, 136, 240, 0.28), transparent 55%),
    linear-gradient(155deg, var(--fl-band-deep) 0%, var(--fl-band) 48%, var(--fl-band-mid) 100%) !important;
}

/* Results filter chips: conversion blue active */
.a2z-results-page .a2z-filter-chip.is-active,
.a2z-results-page [class*="chip"].is-active,
.a2z-results-page [class*="filter"] button.is-active {
  background: var(--fl-blue) !important;
  color: #fff !important;
  border-color: var(--fl-blue) !important;
}

/* Page-hero entrance — one gentle rise on load, JS-gated, motion-safe */
@keyframes fl-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.js .a2z-results-hero .a2z-container,
.js [class*="hero"]:not(.a2z-film) > .a2z-container {
  animation: fl-hero-in 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .js .a2z-results-hero .a2z-container,
  .js [class*="hero"]:not(.a2z-film) > .a2z-container { animation: none; }
}

/* Footer — brand purple → navy (matches support band) */
.a2z-footer, footer.a2z-footer,
body.a2z-php1 .a2z-footer,
body.a2z-white .a2z-footer {
  background:
    radial-gradient(800px 300px at 85% 0%, rgba(0, 136, 240, 0.22), transparent 55%),
    linear-gradient(180deg, var(--fl-band) 0%, var(--fl-band-deep) 100%) !important;
  color: rgba(255, 255, 255, 0.78);
}
.a2z-footer a,
body.a2z-php1 .a2z-footer a { color: rgba(255, 255, 255, 0.82); }
.a2z-footer a:hover,
body.a2z-php1 .a2z-footer a:hover { color: #ffffff; }
.a2z-footer h3,
body.a2z-php1 .a2z-footer h3 { color: #ffffff; }
.a2z-footer__copy,
.a2z-footer__tagline,
.a2z-footer__bottom { color: rgba(255, 255, 255, 0.62); }
.a2z-footer__logo {
  width: min(168px, 52vw);
  height: auto;
  display: block;
  filter: none;
}
.a2z-footer__airports {
  border-color: rgba(255, 255, 255, 0.14);
}
.a2z-support-band .a2z-eyebrow {
  color: rgba(196, 181, 253, 0.95) !important;
}
.a2z-support-band__card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}
.a2z-quote-pill {
  background: var(--fl-cerulean) !important;
  border-color: rgba(0, 136, 240, 0.45) !important;
}
.a2z-floating-dock__btn--faq {
  background: var(--fl-purple) !important;
  color: #fff !important;
  border-color: rgba(196, 181, 253, 0.35) !important;
}
.a2z-floating-dock__book {
  background: var(--fl-cerulean) !important;
  color: #fff !important;
}
.a2z-floating-dock__btn--wa {
  background: #25d366 !important;
  color: #fff !important;
}

/* ---- How it works — white band, sequential step lighting ------------------
   Each step's number chip fills blue and its connector draws in sequence as
   the section enters view. Pure CSS transitions gated on .is-in (IO). */
.fl-how { background: var(--fl-white); padding: 96px 0; }
.fl-how .a2z-section-title { max-width: 16ch; }
.fl-how__steps {
  list-style: none;
  margin: 48px 0 0; padding: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.fl-how__step { position: relative; padding: 8px 4px 0; }
/* connector line to the next step (hidden on stacked/narrow layouts) */
.fl-how__step::before {
  content: '';
  position: absolute;
  top: 28px; left: 56px; right: -28px;
  height: 2px;
  background: var(--fl-hairline);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: calc(var(--fl-reveal-delay, 0ms) + 250ms);
}
.fl-how__step:last-child::before { display: none; }
.js .fl-how__step.is-in::before { transform: scaleX(1); background: var(--fl-blue-soft); }
@media (max-width: 700px) { .fl-how__step::before { display: none; } }
.fl-how__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--fl-white);
  border: 2px solid var(--fl-hairline);
  color: var(--fl-text-2);
  font: 700 1rem/1 var(--fl-ui);
  margin-bottom: 16px;
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: var(--fl-reveal-delay, 0ms);
}
.js .fl-how__step.is-in .fl-how__num {
  background: var(--fl-blue);
  border-color: var(--fl-blue);
  color: #fff;
  transform: scale(1.06);
}
html:not(.js) .fl-how__num { background: var(--fl-blue); border-color: var(--fl-blue); color: #fff; }
.fl-how__title {
  font: 700 1.2rem/1.2 var(--fl-ui);
  letter-spacing: -0.015em;
  color: var(--fl-text);
  margin: 0 0 8px;
}
.fl-how__desc {
  font: 500 0.95rem/1.55 var(--fl-ui);
  color: var(--fl-text-2);
  margin: 0;
}

/* ---- Trust row under the search CTA -------------------------------------- */
.fl-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font: 600 0.8rem/1.4 var(--fl-ui);
  color: var(--fl-text-2);
}
.fl-trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.fl-trust-row svg { width: 14px; height: 14px; flex: none; color: var(--fl-blue); }

/* ---- Scroll reveals (site-wide, IO-driven via a2z-reveal.js) -------------
   Small and quiet: 14px rise, quick settle. Nothing hidden without html.js. */
.js .fl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
              transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: var(--fl-reveal-delay, 0ms);
}
.js .fl-reveal.is-in { opacity: 1; transform: none; }
/* Never leave content invisible if IO misses (SEO / no-blank content) */
.js .fl-reveal.is-forced,
html:not(.js) .fl-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fl-how__step::before, .fl-how__num { transition: none !important; }
  .js .fl-how__step::before { transform: scaleX(1); }
  .js .fl-how__num { background: var(--fl-blue); border-color: var(--fl-blue); color: #fff; transform: none; }
}

/* Mobile booking tablet — opaque, readable, no GPU blur */
@media (max-width: 760px) {
  .a2z-field-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .a2z-search-card {
    border-radius: 16px;
    padding: 18px 16px 20px;
  }
  .a2z-tab {
    min-height: 44px;
    font-size: 0.8rem;
  }
  .a2z-input,
  .a2z-select {
    min-height: 48px;
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* Hide chrome while booking sheet is open */
body.a2z-quote-open .a2z-mobile-contact,
body.a2z-quote-open .a2z-floating-dock {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Airport blog — Hotels near [Airport] callout (white-label deep link only)
   -------------------------------------------------------------------------- */
.a2z-hotel-section {
  margin: 36px 0 40px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--fl-fill, #f8fafc);
  border: 1px solid var(--fl-hairline, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.a2z-hotel-section__eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-purple, #4c1d95);
}
.a2z-hotel-section__title {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fl-navy, #0f172a);
}
.a2z-hotel-section__lead,
.a2z-hotel-section__note {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fl-text-2, #334155);
  max-width: 62ch;
}
.a2z-hotel-section__points {
  margin: 0 0 16px;
  padding-left: 1.2em;
  color: var(--fl-navy, #0f172a);
  font-size: 0.98rem;
  line-height: 1.55;
}
.a2z-hotel-section__points li { margin-bottom: 6px; }
.a2z-hotel-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 8px;
}
.a2z-hotel-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
}
.a2z-hotel-section__cta:focus-visible,
.a2z-hotel-section__secondary:focus-visible {
  outline: 3px solid var(--fl-cerulean, #0088f0);
  outline-offset: 2px;
}
.a2z-hotel-section__secondary {
  font-weight: 700;
  color: var(--fl-cerulean, #0088f0);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a2z-hotel-section__secondary:hover { color: var(--fl-cerulean-hover, #0070c8); }
.a2z-hotel-cta-inline {
  margin: 28px 0 8px;
  padding: 14px 0 4px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--fl-text-2, #334155);
  border-top: 1px solid var(--fl-hairline, #e2e8f0);
}
.a2z-hotel-inline-link {
  font-weight: 700;
  color: var(--fl-cerulean, #0088f0);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a2z-hotel-inline-link:hover { color: var(--fl-cerulean-hover, #0070c8); }
.a2z-hotel-inline-link:focus-visible {
  outline: 3px solid var(--fl-cerulean, #0088f0);
  outline-offset: 2px;
}
@media (max-width: 360px) {
  .a2z-hotel-section { padding: 20px 16px; }
  .a2z-hotel-section__actions { flex-direction: column; align-items: stretch; }
  .a2z-hotel-section__cta { width: 100%; text-align: center; }
}