/* ==========================================================================
   A2Z homepage — premium post-hero pass ("Terminal White")
   Brand-aligned colour system + teak.io chaptered flow. Loads last, homepage
   only (body.a2z-home). The film hero (#a2z-film) and search card are NOT
   touched here. Content / SEO / GEO untouched — visual layer only.

   Brand: Purple #4C1D95 · Cerulean #0088F0 · Navy #0F172A · Neutrals slate.
   ========================================================================== */

:root {
  /* Brand palette (identity sheet) */
  --tw-purple: #4c1d95;
  --tw-purple-deep: #2e1065;
  --tw-cerulean: #0088f0;
  --tw-cerulean-hover: #0070c8;
  --tw-cerulean-soft: #e6f4fe;
  --tw-navy: #0f172a;
  /* Surfaces */
  --tw-mist: #f8fafc;
  --tw-mist-deep: #e2e8f0;
  --tw-ink: #0f172a;
  --tw-slate: #334155;
  --tw-hairline: #e2e8f0;
  /* Interactive accent = Cerulean (links, CTAs, gauges) */
  --tw-blue: var(--tw-cerulean);
  --tw-blue-hover: var(--tw-cerulean-hover);
  --tw-blue-soft: var(--tw-cerulean-soft);
  --tw-ghost: #cbd5e1;          /* ghost numerals */
  --tw-radius-tile: 28px;
  --tw-radius-card: 20px;
  --tw-shadow-raise: 0 22px 44px rgba(15, 23, 42, 0.12);
  --tw-shadow-card: 0 8px 22px rgba(15, 23, 42, 0.08);
  --tw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Logo-style brand gradient (purple → cerulean) */
  --tw-brand-grad: linear-gradient(135deg, #4c1d95 0%, #0088f0 100%);
}

/* --------------------------------------------------------------------------
   1. Remap legacy accents to brand cerulean / purple.
   (WhatsApp keeps its own brand green below.)
   -------------------------------------------------------------------------- */
body.a2z-home {
  --a2z-primary: var(--tw-cerulean);
  --a2z-primary-hover: var(--tw-cerulean-hover);
  --a2z-primary-soft: var(--tw-cerulean-soft);
  --a2z-gold: var(--tw-cerulean);
  --a2z-gold-light: #33a3f5;
  --a2z-gold-dark: var(--tw-cerulean-hover);
  --a2z-sky: var(--tw-cerulean);
  --a2z-sky-dark: var(--tw-cerulean-hover);
  --a2z-success: var(--tw-cerulean);
  --a2z-green-700: var(--tw-cerulean);
  --a2z-green-600: var(--tw-cerulean);
  --a2z-green-100: var(--tw-cerulean-soft);
  --a2z-accent: var(--tw-cerulean);
  --a2z-accent-glow: rgba(0, 136, 240, 0.28);
  --fl-fill: var(--tw-mist);
  --fl-hairline: var(--tw-hairline);
  --fl-blue: var(--tw-cerulean);
  --fl-band: var(--tw-purple);
  --fl-band-deep: var(--tw-navy);
}

body.a2z-home .a2z-floating-dock__book,
body.a2z-home .a2z-mobile-contact__btn--book {
  background: var(--tw-cerulean) !important;
  border-color: var(--tw-cerulean) !important;
  color: #fff !important;
}
body.a2z-home .a2z-floating-dock__btn--wa,
body.a2z-home .a2z-mobile-contact__btn--wa {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
}

/* Wordmark sits clean on the solid header — no tile treatment */
body.a2z-home .a2z-header.is-solid .a2z-header__logo-img {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. Page canvas — all white. Contrast comes from tiles and one mist band,
   not alternating coloured slabs.
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-section,
body.a2z-home .a2z-section--soft,
body.a2z-home .a2z-section--cream,
body.a2z-home .a2z-section--white {
  background: #ffffff;
}
body.a2z-home #reviews {
  background: var(--tw-mist);
}

/* Chapter air — sections breathe like product pages, not a brochure */
body.a2z-home .a2z-section,
body.a2z-home .fl-how {
  padding-top: clamp(84px, 10vw, 132px);
  padding-bottom: clamp(84px, 10vw, 132px);
}

/* --------------------------------------------------------------------------
   3. Type at product scale
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-section-title {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1.06;
  color: var(--tw-ink);
  max-width: 21ch;
}
body.a2z-home .a2z-section-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--tw-slate);
  max-width: 34rem;
}
body.a2z-home .a2z-eyebrow {
  color: var(--tw-slate) !important;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}
body.a2z-home .a2z-eyebrow::before { display: none; }

body.a2z-home .a2z-section-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(40px, 6vw, 64px);
}
body.a2z-home .a2z-text-link {
  color: var(--tw-blue);
  font-weight: 700;
  text-decoration: none;
}
body.a2z-home .a2z-text-link:hover { text-decoration: underline; }

/* Section CTAs (outside the hero) become pills */
body.a2z-home .a2z-section .a2z-btn--primary {
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
}

/* --------------------------------------------------------------------------
   4. Trust strip — quiet hairline row, no boxes
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-trust-strip {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid var(--tw-hairline);
}
body.a2z-home .a2z-trust-strip__list { gap: 12px 36px; padding: 22px 0; }
body.a2z-home .a2z-trust-strip__item {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tw-slate);
}
body.a2z-home .a2z-trust-strip__icon {
  width: 20px;
  height: 20px;
  background: transparent !important;
  border-radius: 0;
  color: var(--tw-blue) !important;
}
body.a2z-home .a2z-trust-strip__icon svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   5. How it works — SIGNATURE: teak-style pinned scrollytelling.
   Left column pins; a giant Fraunces numeral + progress gauge advance while
   the four steps stream past on the right, one lighting up at a time.
   -------------------------------------------------------------------------- */
body.a2z-home .fl-how { background: #fff; }

body.a2z-home .fl-how__layout { display: block; }

@media (min-width: 900px) {
  body.a2z-home .fl-how__layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.25fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  body.a2z-home .fl-how__aside {
    position: sticky;
    top: calc(var(--a2z-header-h, 72px) + 8vh);
    align-self: start;
  }
}

/* Left gauge — big active numeral + vertical fill */
body.a2z-home .fl-how__gauge {
  display: none;
  margin-top: 36px;
}
@media (min-width: 900px) {
  body.a2z-home .fl-how__gauge {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 22px;
  }
}
body.a2z-home .fl-how__gauge-num {
  font-family: var(--fl-display, 'Fraunces', Georgia, serif);
  font-size: clamp(4rem, 7vw, 6.6rem);
  font-weight: 600;
  line-height: 0.82;
  color: var(--tw-purple);
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
}
body.a2z-home .fl-how__gauge-track {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: var(--tw-hairline);
  overflow: hidden;
}
body.a2z-home .fl-how__gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tw-purple), var(--tw-cerulean));
  transition: width 0.5s var(--tw-ease);
}

/* Right rail of steps — colour cards with L→R push on the active step */
body.a2z-home .fl-how__steps {
  margin-top: clamp(40px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin-left: 0;
}
@media (min-width: 900px) {
  body.a2z-home .fl-how__steps { margin-top: 0; }
}
body.a2z-home .fl-how__step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
  border: 1px solid var(--tw-hairline);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--tw-shadow-card);
  list-style: none;
  transition: transform 0.45s var(--tw-ease), box-shadow 0.45s var(--tw-ease), border-color 0.45s var(--tw-ease);
}
body.a2z-home .fl-how__step:first-child { border-top: 1px solid var(--tw-hairline); }
body.a2z-home .fl-how__step::before { display: none !important; }
/* Content above the wipe — exclude .fl-how__push or it loses position:absolute */
body.a2z-home .fl-how__step > *:not(.fl-how__push) { position: relative; z-index: 1; }

/* Colour push panel — slides LEFT → RIGHT when the step is active */
body.a2z-home .fl-how__step .fl-how__push {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: var(--tw-brand-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
  border-radius: inherit;
}
body.a2z-home .fl-how__steps .fl-how__step:nth-child(2) .fl-how__push {
  background: linear-gradient(105deg, var(--tw-cerulean) 0%, var(--tw-purple) 100%);
}
body.a2z-home .fl-how__steps .fl-how__step:nth-child(3) .fl-how__push {
  background: linear-gradient(105deg, var(--tw-purple) 0%, var(--tw-navy) 100%);
}
body.a2z-home .fl-how__steps .fl-how__step:nth-child(4) .fl-how__push {
  background: linear-gradient(105deg, var(--tw-purple-deep) 0%, var(--tw-cerulean) 100%);
}

/* Keep every step fully readable — no fade on inactive */
.js body.a2z-home .fl-how.is-flow-in .fl-how__step,
.js body.a2z-home .fl-how__step,
body.a2z-home .fl-how__step {
  opacity: 1 !important;
}

.js body.a2z-home .fl-how__step.is-active .fl-how__push {
  transform: scaleX(1);
}
.js body.a2z-home .fl-how__step.is-active {
  transform: translateX(6px);
  box-shadow: var(--tw-shadow-raise);
  border-color: transparent;
}

/* Numerals on each card */
.js body.a2z-home .fl-how__num,
html:not(.js) body.a2z-home .fl-how__num,
body.a2z-home .fl-how__num {
  display: block;
  width: auto;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  font-family: var(--fl-display, 'Fraunces', Georgia, serif);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--tw-purple);
  margin: 0 0 8px;
  transform: none !important;
  transition: color 0.4s var(--tw-ease);
}
.js body.a2z-home .fl-how__step.is-active .fl-how__num { color: #fff; }
html:not(.js) body.a2z-home .fl-how__num { color: var(--tw-purple); }

@media (max-width: 899px) {
  body.a2z-home .fl-how__num { color: var(--tw-purple) !important; }
  .js body.a2z-home .fl-how__step.is-active .fl-how__num { color: #fff !important; }
}
@media (min-width: 900px) {
  body.a2z-home .fl-how__num { display: block; }
  body.a2z-home .fl-how__step { padding-left: clamp(22px, 2.8vw, 34px); }
}

body.a2z-home .fl-how__title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.024em;
  margin-bottom: 8px;
  color: var(--tw-ink);
  transition: color 0.4s var(--tw-ease), transform 0.5s var(--tw-ease);
}
@media (min-width: 900px) {
  .js body.a2z-home .fl-how__step.is-active .fl-how__title { transform: translateX(4px); }
}
body.a2z-home .fl-how__desc {
  font-size: 1.02rem;
  color: var(--tw-slate);
  max-width: 42ch;
  margin: 0;
  transition: color 0.4s var(--tw-ease);
}
.js body.a2z-home .fl-how__step.is-active .fl-how__title,
.js body.a2z-home .fl-how__step.is-active .fl-how__desc {
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Services — two large mist tiles, borderless, hover raises to white
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-services-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  body.a2z-home .a2z-services-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
body.a2z-home .a2z-service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tw-mist);
  border: 0;
  border-radius: var(--tw-radius-tile);
  padding: clamp(30px, 3.6vw, 44px);
  box-shadow: none;
  transition: transform 0.45s var(--tw-ease), box-shadow 0.45s var(--tw-ease);
}
body.a2z-home .a2z-service-card > * { position: relative; z-index: 1; }
/* colour-split: a brand panel wipes across on hover (teak/tinywins-style) */
body.a2z-home .a2z-service-card__split {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tw-brand-grad); /* purple → cerulean (logo) */
  clip-path: circle(0% at 82% 14%);
  transition: clip-path 0.6s var(--tw-ease);
  pointer-events: none;
}
body.a2z-home .a2z-services-grid .a2z-service-card:nth-child(2) .a2z-service-card__split {
  background: linear-gradient(140deg, var(--tw-purple) 0%, var(--tw-navy) 100%);
}
body.a2z-home .a2z-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tw-shadow-raise);
}
body.a2z-home .a2z-service-card:hover .a2z-service-card__split { clip-path: circle(145% at 82% 14%); }
body.a2z-home .a2z-service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  color: var(--tw-blue);
  box-shadow: var(--tw-shadow-card);
  margin-bottom: 22px;
  transition: background 0.4s var(--tw-ease), color 0.4s var(--tw-ease), box-shadow 0.4s var(--tw-ease);
}
body.a2z-home .a2z-service-card:hover .a2z-service-card__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}
body.a2z-home .a2z-service-card__title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.024em;
  transition: color 0.4s var(--tw-ease);
}
body.a2z-home .a2z-service-card__copy { color: var(--tw-slate); transition: color 0.4s var(--tw-ease); }
body.a2z-home .a2z-service-card__link { color: var(--tw-blue); font-weight: 700; transition: color 0.4s var(--tw-ease); }
body.a2z-home .a2z-service-card:hover .a2z-service-card__title,
body.a2z-home .a2z-service-card:hover .a2z-service-card__copy,
body.a2z-home .a2z-service-card:hover .a2z-service-card__link { color: #fff; }

/* --------------------------------------------------------------------------
   7. Hotels feature — one calm mist panel, image floats inside
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-hotels-feature,
body.a2z-white.a2z-home .a2z-hotels-feature {
  background: var(--tw-mist);
  border: 0;
  border-radius: var(--tw-radius-tile);
  padding: clamp(32px, 5vw, 60px);
  box-shadow: none;
  gap: clamp(28px, 5vw, 56px);
}
body.a2z-home .a2z-hotels-feature__img,
body.a2z-white.a2z-home .a2z-hotels-feature__img {
  position: relative;
  border-radius: var(--tw-radius-card);
  overflow: hidden;
  box-shadow: var(--tw-shadow-raise);
}
/* colour-split curtain: a brand panel wipes off the photo as it enters view */
@media (prefers-reduced-motion: no-preference) {
  .js body.a2z-home .a2z-hotels-feature__img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(130deg, var(--tw-purple) 0%, var(--tw-navy) 100%);
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
  }
  .js body.a2z-home .a2z-hotels-feature__img.is-in::after { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   8. Airports — responsive grid (2 / 3 / 4 per row, wraps to a second row).
   Cards reveal with a scaled colour-lift; "View all" reads as a real CTA.
   -------------------------------------------------------------------------- */
/* overflow-x:clip on html/body kills position:sticky in Chrome.
   Must beat body.a2z-site.a2z-php1 (2 classes) from redesign CSS.
   Desktop only — mobile re-clips so hard left/right swipe cannot show a white edge. */
@media (min-width: 761px) {
  html:has(body.a2z-home) {
    overflow-x: visible;
  }
  body.a2z-site.a2z-php1.a2z-home {
    overflow-x: visible;
  }
}
@media (max-width: 760px) {
  html:has(body.a2z-home),
  html:has(body.a2z-site) {
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }
  body.a2z-site.a2z-php1.a2z-home,
  body.a2z-site {
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }
  body.a2z-home main,
  body.a2z-home .a2z-film,
  body.a2z-home .a2z-section,
  body.a2z-home .fl-how,
  body.a2z-home .a2z-support-band {
    overflow-x: clip;
    max-width: 100%;
  }
}

body.a2z-home .a2z-airports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}
@media (min-width: 640px) {
  body.a2z-home .a2z-airports-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 980px) {
  body.a2z-home .a2z-airports-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
body.a2z-home .a2z-airport-card {
  flex: initial;
  width: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  transition: transform 0.45s var(--tw-ease), box-shadow 0.45s var(--tw-ease), border-color 0.45s var(--tw-ease);
}
body.a2z-home .a2z-airport-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 28px 54px rgba(15, 23, 42, 0.22);
  border-color: rgba(0, 136, 240, 0.45);
}
body.a2z-home .a2z-airport-card__thumb { position: relative; overflow: hidden; }
body.a2z-home .a2z-airport-card__thumb img {
  transition: transform 0.6s var(--tw-ease);
  will-change: transform;
}
body.a2z-home .a2z-airport-card:hover .a2z-airport-card__thumb img { transform: scale(1.09); }
body.a2z-home .a2z-airport-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(76, 29, 149, 0.55));
  opacity: 0;
  transition: opacity 0.45s var(--tw-ease);
}
body.a2z-home .a2z-airport-card:hover .a2z-airport-card__thumb::after { opacity: 1; }
body.a2z-home .a2z-airport-card__code {
  background: var(--tw-brand-grad);
  letter-spacing: 0.1em;
  box-shadow: 0 4px 12px rgba(0, 136, 240, 0.35);
  z-index: 2;
}
body.a2z-home .a2z-airport-card__body { padding: 16px 18px 18px; }
body.a2z-home .a2z-airport-card__name {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.a2z-home .a2z-airport-card__meta { color: var(--tw-slate); }
body.a2z-home .a2z-airport-card__actions a {
  color: var(--tw-blue);
  font-weight: 700;
}

/* "View all airports" → outlined pill so the section reads finished */
body.a2z-home #airports .a2z-section-head .a2z-text-link {
  border: 1.5px solid rgba(0, 136, 240, 0.45);
  border-radius: 999px;
  padding: 10px 22px;
  color: var(--tw-cerulean);
  transition: background 0.25s var(--tw-ease), color 0.25s var(--tw-ease), border-color 0.25s var(--tw-ease);
}
body.a2z-home #airports .a2z-section-head .a2z-text-link:hover {
  background: var(--tw-cerulean);
  border-color: var(--tw-cerulean);
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. Why A2Z — SIGNATURE: pinned left visual / streaming right feature panels.
   The photo + heading pin and drift; features arrive one-by-one along a rail.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.a2z-home .a2z-why-a2z__grid {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.05fr);
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }
  body.a2z-home .a2z-why-a2z__visual {
    position: sticky;
    top: calc(var(--a2z-header-h, 72px) + 9vh);
    align-self: start;
  }
}
body.a2z-home .a2z-why-a2z__photo,
body.a2z-php1.a2z-home .a2z-why-a2z__photo {
  border-radius: var(--tw-radius-tile);
  box-shadow: var(--tw-shadow-raise);
  aspect-ratio: 4 / 5;
}
@media (min-width: 900px) {
  body.a2z-home .a2z-why-a2z__photo { aspect-ratio: 5 / 6; }
}

/* Right column — step stream with L→R colour push on the active step */
@media (min-width: 900px) {
  body.a2z-home .a2z-why-grid.a2z-features--grid {
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
    padding-left: 34px;
  }
  /* progress rail */
  body.a2z-home .a2z-why-grid.a2z-features--grid::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--tw-hairline);
  }
  .js body.a2z-home .a2z-why-grid.a2z-features--grid::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 2px;
    height: var(--fl-rail, 0%);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tw-cerulean), var(--tw-purple));
    transition: height 0.5s var(--tw-ease);
  }
}

/* Why steps — mist tiles that accept a left→right colour push */
body.a2z-home .a2z-why-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--tw-hairline);
  border-radius: 20px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  box-shadow: var(--tw-shadow-card);
  transition: transform 0.45s var(--tw-ease), box-shadow 0.45s var(--tw-ease), border-color 0.45s var(--tw-ease);
}
body.a2z-home .a2z-why-card > * { position: relative; z-index: 1; }

/* Colour push panel — slides LEFT → RIGHT when the step is active */
body.a2z-home .a2z-why-card .a2z-why-card__push {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tw-brand-grad); /* purple → cerulean */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
  border-radius: inherit;
}
/* alternate brand fills so each step feels distinct */
body.a2z-home .a2z-why-grid .a2z-why-card:nth-child(3n+2) .a2z-why-card__push {
  background: linear-gradient(105deg, var(--tw-cerulean) 0%, var(--tw-purple) 100%);
}
body.a2z-home .a2z-why-grid .a2z-why-card:nth-child(3n+3) .a2z-why-card__push {
  background: linear-gradient(105deg, var(--tw-purple) 0%, var(--tw-navy) 100%);
}

@media (min-width: 900px) {
  /* node on the rail — sits outside the rounded tile */
  body.a2z-home .a2z-why-card::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--tw-hairline);
    z-index: 2;
    transition: border-color 0.4s var(--tw-ease), background 0.4s var(--tw-ease), box-shadow 0.4s var(--tw-ease), transform 0.4s var(--tw-ease);
  }
  .js body.a2z-home .a2z-why-card.is-active::before {
    border-color: var(--tw-cerulean);
    background: var(--tw-cerulean);
    box-shadow: 0 0 0 4px rgba(0, 136, 240, 0.2);
    transform: translateY(-50%) scale(1.2);
  }
  /* keep inactive steps fully readable — only a soft lift for the active one */
  .js body.a2z-home #why-a2z.is-flow-in .a2z-why-card { opacity: 1; }
  .js body.a2z-home .a2z-why-card.is-active { opacity: 1; }
}

/* Active step: colour push fills L→R; copy flips light */
.js body.a2z-home .a2z-why-card.is-active .a2z-why-card__push {
  transform: scaleX(1);
}
.js body.a2z-home .a2z-why-card.is-active {
  transform: translateX(6px);
  box-shadow: var(--tw-shadow-raise);
}
body.a2z-home .a2z-why-card:hover { transform: none; box-shadow: none; }
.js body.a2z-home .a2z-why-card.is-active:hover { transform: translateX(6px); }

body.a2z-home .a2z-why-card h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -0.02em;
  margin: 16px 0 6px;
  color: var(--tw-ink);
  transition: color 0.4s var(--tw-ease);
}
body.a2z-home .a2z-why-card p {
  color: var(--tw-slate);
  font-size: 1.02rem;
  transition: color 0.4s var(--tw-ease);
}
body.a2z-home .a2z-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--tw-cerulean-soft);
  color: var(--tw-cerulean);
  box-shadow: none;
  transition: background 0.4s var(--tw-ease), color 0.4s var(--tw-ease), box-shadow 0.4s var(--tw-ease);
}
.js body.a2z-home .a2z-why-card.is-active h3,
.js body.a2z-home .a2z-why-card.is-active p { color: #fff; }
.js body.a2z-home .a2z-why-card.is-active .a2z-feature__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.a2z-home .a2z-why-card .a2z-why-card__push { transition: none; }
  .js body.a2z-home #why-a2z.is-flow-in .a2z-why-card { opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. Offers — mist tiles with colour-split hover (three brand hues)
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-offer-card,
body.a2z-white.a2z-home .a2z-offer-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tw-mist);
  border: 0;
  border-radius: var(--tw-radius-tile);
  padding: clamp(28px, 3vw, 38px);
  min-height: 210px;
  box-shadow: none;
  transition: transform 0.45s var(--tw-ease), box-shadow 0.45s var(--tw-ease);
}
body.a2z-home .a2z-offer-card > * { position: relative; z-index: 1; }
body.a2z-home .a2z-offer-card__split {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tw-brand-grad); /* purple → cerulean */
  clip-path: circle(0% at 18% 90%);
  transition: clip-path 0.6s var(--tw-ease);
  pointer-events: none;
}
/* brand variety across the three offer cards */
body.a2z-home .a2z-offers-grid .a2z-offer-card:nth-child(2) .a2z-offer-card__split {
  background: linear-gradient(140deg, var(--tw-cerulean) 0%, var(--tw-purple) 100%);
}
body.a2z-home .a2z-offers-grid .a2z-offer-card:nth-child(3) .a2z-offer-card__split {
  background: linear-gradient(140deg, var(--tw-purple) 0%, var(--tw-navy) 100%);
}
body.a2z-home .a2z-offer-card:hover,
body.a2z-white.a2z-home .a2z-offer-card:hover {
  border: 0;
  transform: translateY(-6px);
  box-shadow: var(--tw-shadow-raise);
}
body.a2z-home .a2z-offer-card:hover .a2z-offer-card__split { clip-path: circle(150% at 18% 90%); }
body.a2z-home .a2z-offer-card__kicker { color: var(--tw-blue) !important; transition: color 0.4s var(--tw-ease); }
body.a2z-home .a2z-offer-card__title {
  font-size: 1.3rem;
  letter-spacing: -0.022em;
  transition: color 0.4s var(--tw-ease);
}
body.a2z-home .a2z-offer-card__copy { color: var(--tw-slate); transition: color 0.4s var(--tw-ease); }
body.a2z-home .a2z-offer-card__cta { color: var(--tw-blue); font-weight: 700; transition: color 0.4s var(--tw-ease); }
body.a2z-home .a2z-offer-card:hover .a2z-offer-card__kicker,
body.a2z-home .a2z-offer-card:hover .a2z-offer-card__title,
body.a2z-home .a2z-offer-card:hover .a2z-offer-card__copy,
body.a2z-home .a2z-offer-card:hover .a2z-offer-card__cta { color: #fff !important; }

/* --------------------------------------------------------------------------
   11. Reviews — the one mist band; quotes set in the display serif
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-review,
body.a2z-php1.a2z-home .a2z-review {
  background: #fff;
  border: 0;
  border-radius: var(--tw-radius-tile);
  box-shadow: var(--tw-shadow-card);
  padding: clamp(26px, 3vw, 40px);
}
body.a2z-home .a2z-review p {
  font-family: var(--fl-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tw-ink);
}
body.a2z-home .a2z-review__verified {
  color: var(--a2z-trustpilot-green, #00b67a) !important;
  border-color: var(--a2z-trustpilot-green, #00b67a) !important;
}
body.a2z-home .a2z-trustpilot__brand { color: var(--a2z-trustpilot-green, #00b67a) !important; }
body.a2z-home .a2z-trustpilot__star-box {
  background: var(--a2z-trustpilot-green, #00b67a) !important;
  color: #fff !important;
}
body.a2z-home .a2z-trustpilot:hover { border-color: var(--a2z-trustpilot-green, #00b67a); }
body.a2z-home .a2z-review .a2z-stars__item { color: var(--a2z-trustpilot-green, #00b67a) !important; }
body.a2z-home .a2z-reviews-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tw-hairline);
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.a2z-home .a2z-reviews-carousel__btn:hover {
  background: var(--tw-ink);
  border-color: var(--tw-ink);
  color: #fff;
}
body.a2z-home .a2z-reviews-dots__btn.is-active { background: var(--tw-blue); }

/* --------------------------------------------------------------------------
   12. FAQ — hairline rows, no boxes (Apple accordion)
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--tw-hairline);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.a2z-home .a2z-faq-list .a2z-faq-item:last-child {
  border-bottom: 1px solid var(--tw-hairline);
}
body.a2z-home .a2z-faq-item.is-open {
  border-color: var(--tw-hairline);
  box-shadow: none;
}
body.a2z-home .a2z-faq-item__trigger {
  padding: 22px 6px;
  background: transparent;
}
body.a2z-home .a2z-faq-item__trigger:hover { background: transparent; }
body.a2z-home .a2z-faq-item__question {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
body.a2z-home .a2z-faq-item.is-open .a2z-faq-item__question { color: var(--tw-blue); }
body.a2z-home .a2z-faq-item__answer {
  padding: 0 6px 24px;
  font-size: 1rem;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   13. Support band — keep the navy, soften the cards
   -------------------------------------------------------------------------- */
body.a2z-home .a2z-support-band__card {
  border-radius: 18px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.45s var(--tw-ease);
}
body.a2z-home .a2z-support-band__card:hover { transform: translateY(-3px); }
body.a2z-home .a2z-support-band .a2z-eyebrow { color: #9ec8f5 !important; }

/* --------------------------------------------------------------------------
   14. Motion — one system: soft rise reveals + image parallax.
   .fl-reveal / .is-in driven by a2z-reveal.js + a2z-flow.js.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js body.a2z-home .fl-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.75s var(--tw-ease),
      transform 0.75s var(--tw-ease);
    transition-delay: var(--fl-reveal-delay, 0ms);
  }
  /* directional variants — "different things on different sides" */
  .js body.a2z-home .fl-reveal.fl-from-left { transform: translateX(-52px); }
  .js body.a2z-home .fl-reveal.fl-from-right { transform: translateX(52px); }
  .js body.a2z-home .fl-reveal.fl-zoom { transform: scale(0.93); }
  .js body.a2z-home .fl-reveal.fl-rise-lg { transform: translateY(46px); }
  .js body.a2z-home .fl-reveal.is-in,
  .js body.a2z-home .fl-reveal.is-forced {
    opacity: 1;
    transform: none;
  }

  body.a2z-home .fl-parallax-frame {
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
  }
  body.a2z-home .fl-parallax-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16) translate3d(0, var(--fl-py, 0%), 0);
    will-change: transform;
  }

  /* Floating decorative accents (behind content, transform only) */
  body.a2z-home .fl-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, var(--fl-orb-y, 0px), 0);
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.a2z-home .fl-parallax-frame img { transform: none !important; }
  body.a2z-home .fl-orb { display: none; }
  body.a2z-home .a2z-service-card:hover,
  body.a2z-home .a2z-offer-card:hover,
  body.a2z-home .a2z-airport-card:hover,
  body.a2z-home .a2z-support-band__card:hover { transform: none; }
  .js body.a2z-home .fl-how__num { transition: none; }
  /* no colour-split wipe: hide the panel and keep text readable on mist */
  body.a2z-home .a2z-service-card__split,
  body.a2z-home .a2z-offer-card__split,
  body.a2z-home .a2z-why-card__push,
  body.a2z-home .fl-how__push { display: none; }
  body.a2z-home .a2z-service-card:hover .a2z-service-card__title,
  body.a2z-home .a2z-service-card:hover .a2z-service-card__copy,
  body.a2z-home .a2z-service-card:hover .a2z-service-card__link,
  body.a2z-home .a2z-offer-card:hover .a2z-offer-card__kicker,
  body.a2z-home .a2z-offer-card:hover .a2z-offer-card__title,
  body.a2z-home .a2z-offer-card:hover .a2z-offer-card__copy,
  body.a2z-home .a2z-offer-card:hover .a2z-offer-card__cta,
  .js body.a2z-home .a2z-why-card.is-active h3,
  .js body.a2z-home .a2z-why-card.is-active p,
  .js body.a2z-home .fl-how__step.is-active .fl-how__title,
  .js body.a2z-home .fl-how__step.is-active .fl-how__desc,
  .js body.a2z-home .fl-how__step.is-active .fl-how__num {
    color: inherit !important;
  }
  body.a2z-home .a2z-offer-card:hover .a2z-offer-card__kicker { color: var(--tw-blue) !important; }
  .js body.a2z-home .a2z-why-card.is-active p { color: var(--tw-slate) !important; }
  .js body.a2z-home .fl-how__step.is-active .fl-how__num { color: var(--tw-purple) !important; }
}

/* --------------------------------------------------------------------------
   16. Depth & richness — gradient washes and floating orbs so sections read
   crafted, not flat. Decorative only (behind content).
   -------------------------------------------------------------------------- */
body.a2z-home #services,
body.a2z-home #offers {
  position: relative;
  overflow: clip; /* contain orbs; sections here have no sticky children */
}
/* #hotels must NOT overflow:clip — that kills position:sticky (sheet overlap) */
body.a2z-home #hotels {
  position: relative;
}
body.a2z-home #why-a2z {
  position: relative; /* no clip: it holds the sticky visual column */
}
body.a2z-home #services .a2z-container,
body.a2z-home #hotels .a2z-container,
body.a2z-home #offers .a2z-container,
body.a2z-home #why-a2z .a2z-container { position: relative; z-index: 1; }

body.a2z-home .fl-orb--blue { background: radial-gradient(circle, rgba(0,136,240,0.32), transparent 70%); }
body.a2z-home .fl-orb--sky { background: radial-gradient(circle, rgba(76,29,149,0.28), transparent 70%); }

/* Service tiles: gradient sheen + lifted image feel */
body.a2z-home .a2z-service-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, var(--tw-mist) 60%);
}
body.a2z-home .a2z-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(0,136,240,0.35), rgba(76,29,149,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--tw-ease);
  pointer-events: none;
}
body.a2z-home .a2z-service-card:hover::after { opacity: 1; }

/* Offer tiles: same treatment */
body.a2z-home .a2z-offer-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, var(--tw-mist) 60%);
}

/* --------------------------------------------------------------------------
   15. Mobile tuning
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  body.a2z-home .a2z-section,
  body.a2z-home .fl-how {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  body.a2z-home .a2z-service-card,
  body.a2z-home .a2z-offer-card { border-radius: 22px; }
  body.a2z-home .a2z-hotels-feature { border-radius: 22px; }
  body.a2z-home .fl-how__desc { max-width: none; }
}

@media (min-width: 900px) {
  body.a2z-home #main {
    min-height: calc(100svh - 420px);
  }
}

/* --------------------------------------------------------------------------
   18. Airport hotels — full-bleed deep-purple coloured strip (edge to edge).
   The whole #hotels section becomes the band; the feature sits transparent
   inside the container. Blue CTA turns crisp white-on-purple. Colour/chrome
   only — copy, links and SEO untouched.
   -------------------------------------------------------------------------- */
body.a2z-home #hotels,
body.a2z-white.a2z-home #hotels {
  background:
    radial-gradient(1100px 360px at 82% 0%, rgba(0, 136, 240, 0.22), transparent 55%),
    linear-gradient(150deg, var(--tw-purple) 0%, var(--tw-purple-deep) 55%, var(--tw-navy) 100%);
}
/* feature keeps breathing room on the purple strip */
body.a2z-home #hotels .a2z-hotels-feature,
body.a2z-white.a2z-home #hotels .a2z-hotels-feature {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* text flips to light for contrast on the purple strip */
body.a2z-home .a2z-hotels-feature .a2z-eyebrow { color: rgba(233, 224, 255, 0.85); }
body.a2z-home .a2z-hotels-feature .a2z-section-title { color: #ffffff; }
body.a2z-home .a2z-hotels-feature .a2z-section-lead { color: rgba(255, 255, 255, 0.82); }
/* the blue CTA becomes a crisp white button with deep-purple label */
body.a2z-home .a2z-hotels-feature .a2z-btn--primary {
  background: var(--tw-cerulean) !important; /* brand CTA on purple strip */
  color: #ffffff !important;
  border-color: var(--tw-cerulean) !important;
  box-shadow: 0 12px 30px rgba(0, 136, 240, 0.35) !important;
  transition: transform 0.25s var(--tw-ease), box-shadow 0.25s var(--tw-ease), background 0.25s var(--tw-ease), color 0.25s var(--tw-ease);
}
body.a2z-home .a2z-hotels-feature .a2z-btn--primary:hover {
  background: var(--tw-cerulean-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 136, 240, 0.42) !important;
}
/* recolour the floating orb in this section to match the purple strip */
body.a2z-home #hotels .fl-orb {
  background: radial-gradient(circle, rgba(76, 29, 149, 0.28), transparent 70%);
}

/* --------------------------------------------------------------------------
   19. Sticky purple hotels + sliding airports sheet (scroll animation).
   DO NOT remove sticky / z-index / sheet overlap casually — that IS the motion.
   Breathing room = pad #hotels content + give sticky runway (padding-bottom),
   then use a MILD negative margin on #airports — never kill sticky to "fix clip".
   Layout/motion only — copy & SEO untouched.
   -------------------------------------------------------------------------- */
body.a2z-home #hotels {
  position: sticky !important;
  top: 0;
  z-index: 0;
  overflow: visible; /* sticky dies under overflow:clip/hidden */
  /* Content fits in the pinned viewport with air around it */
  padding-top: clamp(64px, 8vw, 100px);
  /* Extra sticky runway so the full hotels block is readable before the sheet covers it */
  padding-bottom: clamp(120px, 16vw, 200px);
  min-height: 100svh;
  box-sizing: border-box;
}
body.a2z-home #hotels .fl-orb { display: none; }

body.a2z-home #hotels .a2z-hotels-feature,
body.a2z-white.a2z-home #hotels .a2z-hotels-feature {
  padding: 0;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}

body.a2z-home #airports {
  position: relative;
  z-index: 2;
  /* Mild sheet overlap — keeps the wipe animation without eating the CTA */
  margin-top: clamp(-56px, -5vw, -28px);
  background: #ffffff;
  border-top-left-radius: clamp(28px, 4vw, 48px);
  border-top-right-radius: clamp(28px, 4vw, 48px);
  box-shadow: 0 -24px 56px rgba(15, 23, 42, 0.22);
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

/* Space between airport cards so the grid can breathe */
body.a2z-home #airports .a2z-airports-grid {
  gap: clamp(18px, 2.4vw, 28px);
}
body.a2z-home #airports .a2z-section-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}
/* Also give services cards a little more air before hotels */
body.a2z-home #services {
  padding-bottom: clamp(72px, 9vw, 120px);
}
body.a2z-home #services .a2z-services-grid {
  gap: clamp(18px, 2.5vw, 28px);
}
/* Keep later sections above the pinned hotels strip */
body.a2z-home #why-a2z,
body.a2z-home #offers,
body.a2z-home #reviews,
body.a2z-home #faqs,
body.a2z-home #recently-viewed,
body.a2z-home .a2z-support-band {
  position: relative;
  z-index: 3;
  background: #ffffff;
}
body.a2z-home #reviews { background: var(--tw-mist); }