/* ============================================================
   Fly US, design tokens
   Display: Rubik (700/800/900), Body: Heebo (300-700)
   Accent: single gold, reserved for CTAs and highlights.
   Radius system: pill for interactive controls, 14px for cards/inputs, 20px for the modal.
   ============================================================ */

:root {
  --navy-950: #071b33;
  --navy-900: #0a2745;
  --navy-800: #0e3358;
  --navy-700: #16456f;
  --teal-500: #14939d;
  --teal-400: #1fb0ab;
  --gold-500: #e3a53e;
  --gold-600: #c6841d;
  --gold-100: #fbeed9;

  --paper-0: #ffffff;
  --paper-50: #f6f8fa;
  --paper-100: #eaeff3;

  --ink-900: #0f2032;
  --ink-700: #2c4356;
  --ink-500: #5b7185;
  --ink-300: #9db0bf;

  --success-500: #1e9e6b;
  --error-500: #c0392b;
  --whatsapp-500: #25d366;
  --whatsapp-600: #1ebc5a;

  --radius-card: 14px;
  --radius-modal: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(15, 32, 50, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 32, 50, 0.12);
  --shadow-lg: 0 24px 64px rgba(7, 27, 51, 0.22);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Rubik", "Segoe UI", sans-serif;
  --font-body: "Heebo", "Segoe UI", sans-serif;

  --text-scale: 1;
  --header-h: 76px;
  --beta-bar-h: 40px;
  /* How far the white logo tab dips below the header bar onto the hero video */
  --brand-drop: 22px;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--beta-bar-h) + 16px); }
/* Never let a stray wide element create a horizontal scroll / white gutter
   beside the full-bleed sections. `clip` (not `hidden`) so it doesn't
   become a scroll container and break the sticky header. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper-0);
  font-size: calc(16px * var(--text-scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  right: 16px;
  top: -60px;
  background: var(--navy-950);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  z-index: 999;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold-500); color: var(--navy-950); }

.field input, .field textarea { caret-color: var(--teal-500); }

html { scrollbar-color: var(--navy-700) var(--paper-100); scrollbar-width: thin; }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--paper-100); }
body::-webkit-scrollbar-thumb { background: var(--navy-700); border-radius: var(--radius-pill); border: 3px solid var(--paper-100); }
body::-webkit-scrollbar-thumb:hover { background: var(--navy-800); }

.container {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3 { font-family: var(--font-display); color: var(--navy-950); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.2; }
h3 { font-size: 1.15rem; font-weight: 700; }

.section-head {
  max-width: 620px;
  margin-bottom: 44px;
}
.section-head p {
  margin-top: 10px;
  color: var(--ink-500);
  font-size: 1.05rem;
}

.section { padding-block: 96px; }
.section--tint { background: var(--paper-50); }

@media (max-width: 768px) {
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 32px; }
}

/* ============================================================
   Buttons (pill radius, one system)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-800); box-shadow: var(--shadow-md); }

.btn-accent { background: var(--gold-500); color: var(--navy-950); }
.btn-accent:hover { background: var(--gold-600); box-shadow: 0 10px 28px rgba(198, 132, 29, 0.35); transform: translateY(-1px); }

.btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.btn-ghost svg { color: var(--whatsapp-500); }

.btn-sm { padding: 10px 22px; font-size: 0.92rem; }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ============================================================
   Beta notice
   A dispatch-board strip, not a caution ribbon: same navy/gold
   pairing as the CTA system, so "this is a demo" reads as this
   brand talking, not a framework default bolted on top of it.
   ============================================================ */

.beta-bar {
  position: sticky;
  top: 0;
  z-index: 61;
  height: var(--beta-bar-h);
  background: var(--navy-950);
  border-bottom: 1px solid rgba(227, 165, 62, 0.25);
}
.beta-bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.beta-bar-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  animation: beta-pulse 2.6s ease-in-out infinite;
}
.beta-bar-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--navy-950);
  background: var(--gold-500);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}
.beta-bar-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beta-bar-text-short { display: none; }

@media (max-width: 640px) {
  .beta-bar-text-full { display: none; }
  .beta-bar-text-short { display: inline; }
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: var(--beta-bar-h);
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-100);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* White logo tab: hangs from the header bar, its soft convex "belly" edge
   dipping past the header line so the mark sits proud of the hero video.
   The mark image carries only "Fly US"; the tagline is live text below it,
   so it stays crisp however small the lockup gets. */
.brand {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 42px calc(11px + var(--brand-drop));
  margin-bottom: calc(-1 * var(--brand-drop));
  background: #fff;
  border-radius: 0 0 64% 64% / 0 0 calc(var(--brand-drop) + 14px) calc(var(--brand-drop) + 14px);
  box-shadow: 0 16px 32px -20px rgba(7, 27, 51, 0.45);
  position: relative;
  z-index: 3;
}
.brand img { height: 38px; width: auto; display: block; }
.brand-tagline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--navy-900);
  white-space: nowrap;
}
.brand-tagline i { color: var(--gold-500); font-style: normal; }

@media (max-width: 900px) {
  .brand { padding: 11px 32px calc(9px + var(--brand-drop)); }
  .brand img { height: 34px; }
  .brand-tagline { font-size: 0.6rem; gap: 6px; }
}
@media (max-width: 480px) {
  :root { --brand-drop: 16px; }
  .brand { padding-inline: 18px; gap: 4px; }
  .brand img { height: 30px; }
  .brand-tagline { font-size: 0.56rem; letter-spacing: 0.06em; }
  .header-inner { gap: 10px; }
  .header-actions .btn-sm { padding: 9px 14px; font-size: 0.82rem; }
}

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink-700);
  position: relative;
  padding-block: 6px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--navy-950);
  cursor: pointer;
  padding: 6px;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--beta-bar-h)) 0 auto 0;
    background: #fff;
    flex-direction: column;
    padding: 12px 24px 24px;
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .nav-links a { display: block; width: 100%; padding: 12px 4px; }
  .nav-toggle { display: inline-flex; }

  /* Tighten the header row so the brand + CTA + menu button fit within a
     narrow viewport — otherwise the row overflows and pushes the whole page,
     leaving a white strip beside the flush-bleed hero. */
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 9px 16px; font-size: 0.85rem; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(86vh, 760px);
  padding-block: 84px 72px;
  background: var(--navy-950);
  color: #fff;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.hero-video.is-active { opacity: 1; }
.hero-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7, 27, 51, 0.92) 0%, rgba(7, 27, 51, 0.72) 42%, rgba(7, 27, 51, 0.42) 100%),
    linear-gradient(0deg, rgba(5, 19, 37, 0.55) 0%, transparent 40%);
}

.hero-flightpath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.hero-flightpath path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
  stroke-dashoffset: 400;
  animation: dash-draw 3.2s var(--ease-out) forwards 0.2s;
}

.hero-plane {
  position: absolute;
  width: 46px; height: 46px;
  color: var(--gold-500);
  top: 22%; left: 64%;
  transform: scaleX(-1) rotate(8deg);
  animation: plane-float 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.hero-star { position: absolute; color: rgba(255, 255, 255, 0.65); animation: twinkle 4.5s ease-in-out infinite; }
.hero-star--1 { width: 16px; height: 16px; top: 15%; left: 58%; animation-delay: 0.3s; }
.hero-star--2 { width: 11px; height: 11px; top: 46%; left: 81%; animation-delay: 1.4s; }
.hero-star--3 { width: 13px; height: 13px; top: 66%; left: 71%; animation-delay: 2.5s; }

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-copy { max-width: 620px; margin-inline-start: auto; }

.hero-copy h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.28;
}
.hero-title-divider {
  display: block;
  width: 52px;
  height: 4px;
  background: var(--gold-500);
  border-radius: var(--radius-pill);
  margin-block: 4px;
}
.hero-lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* Packages-only policy line — a quiet note under the hero CTAs, restating
   that Fly US does not sell flights on their own. The gold glyph is the
   only accent; no rule, so it reads as a caption rather than a callout. */
.hero-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  line-height: 1.6;
}
.hero-policy-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--gold-500);
}
.hero-policy-note strong { color: #fff; font-weight: 700; }

/* Same policy note, restated at the top of the request form — an evenly
   bordered tinted callout, gold glyph as the accent. */
.form-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 24px;
  background: var(--paper-50);
  border: 1px solid var(--paper-100);
  border-radius: var(--radius-card);
  color: var(--ink-700);
  font-size: 0.9rem;
  line-height: 1.6;
}
.form-policy-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--gold-500);
}
.form-policy-note strong { color: var(--navy-800); font-weight: 700; }

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-media-overlay {
    background:
      linear-gradient(180deg, rgba(7, 27, 51, 0.55) 0%, rgba(7, 27, 51, 0.88) 62%, rgba(7, 27, 51, 0.96) 100%);
  }
  .hero-copy { max-width: none; }
  /* Open a band of sky above the headline on mobile so the plane still has
     somewhere to sit (desktop keeps it beside the copy). */
  .hero { padding-block: 116px 72px; }
  .hero-plane {
    width: 32px; height: 32px;
    top: 44px; left: 6%;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  }
}
@media (max-width: 480px) {
  .hero { padding-block: 104px 72px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* Shared accent spans (used in the hero headline) */
.manifesto-dash { color: var(--gold-500); font-weight: 700; }
.manifesto-accent { color: var(--gold-500); }

/* ============================================================
   Advantages, credentials ledger
   A statement, not a grid of cards: two ruled columns of numbered
   entries, closer to how a prospectus lists what it stands behind.
   ============================================================ */

.advantages-ledger {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--paper-100);
}

.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 32px 6px;
}
.ledger-row:nth-child(n+3) { border-top: 1px solid var(--paper-100); }
.ledger-row:nth-child(even) { border-inline-start: 1px solid var(--paper-100); padding-inline-start: 30px; }
.ledger-row:nth-child(odd) { padding-inline-end: 30px; }

.ledger-num {
  flex-shrink: 0;
  min-width: 64px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy-950);
  opacity: 0.16;
  line-height: 1;
  transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.ledger-row:hover .ledger-num { opacity: 1; color: var(--gold-600); }

.ledger-body h3 { margin-bottom: 8px; }
.ledger-body p { color: var(--ink-500); font-size: 0.96rem; max-width: 42ch; }

@media (max-width: 900px) {
  .advantages-ledger { grid-template-columns: 1fr; }
  .ledger-row:nth-child(n+2) { border-top: 1px solid var(--paper-100); }
  .ledger-row:nth-child(even) { border-inline-start: none; padding-inline-start: 6px; }
  .ledger-row:nth-child(odd) { padding-inline-end: 6px; }
}
@media (max-width: 480px) {
  .ledger-row { padding-block: 26px; gap: 16px; }
  .ledger-num { min-width: 46px; font-size: 1.5rem; }
}

/* ============================================================
   About / Video
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.about-copy h2 { margin-bottom: 20px; }
.about-copy p { color: var(--ink-700); margin-bottom: 16px; max-width: 52ch; }
.about-video {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--navy-950);
}
.about-video video { width: 100%; height: auto; max-height: 70vh; display: block; object-fit: contain; background: var(--navy-950); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   Testimonials
   ============================================================ */

.testimonials-viewport { position: relative; margin-top: 8px; }
.testimonials-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 24px 20px;
  scrollbar-width: none;
}
.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 clamp(280px, 32vw, 360px);
  scroll-snap-align: start;
  background: var(--paper-50);
  border: 1px solid var(--paper-100);
  border-radius: var(--radius-card);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-mark { width: 30px; height: 30px; color: var(--gold-500); opacity: 0.85; }
.stars { color: var(--gold-500); letter-spacing: 2px; font-size: 1rem; }
.testimonial-quote { color: var(--ink-700); line-height: 1.6; font-size: 0.98rem; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.author-badge {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.95rem; color: var(--ink-900); }
.testimonial-author span { font-size: 0.85rem; color: var(--ink-500); }

.testimonials-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.carousel-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-100);
  background: #fff;
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.carousel-btn:hover { border-color: var(--gold-500); background: var(--gold-100); }
.carousel-btn svg { width: 20px; height: 20px; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-list { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--paper-100); border-radius: var(--radius-card); overflow: hidden; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy-950);
  cursor: pointer;
}
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-600); transition: transform 0.3s var(--ease-out); }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-item.is-open .faq-question { border-bottom: 1px solid var(--paper-100); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.faq-answer > p {
  overflow: hidden;
  padding: 0 24px;
  color: var(--ink-500);
  line-height: 1.65;
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > p { padding: 18px 24px 22px; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { background: var(--navy-950); color: rgba(255, 255, 255, 0.78); padding-block: 64px 26px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1fr;
  gap: 40px;
}
.footer-logo-chip {
  display: inline-flex;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 14px 20px;
  margin-bottom: 18px;
}
.footer-logo { height: 52px; width: auto; display: block; }
.footer-brand p { max-width: 34ch; font-size: 0.92rem; line-height: 1.65; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }

.footer-col h4 { font-family: var(--font-display); color: #fff; font-size: 0.98rem; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.92rem; transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--gold-500); }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold-500); }

.footer-bottom {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-beta-note { color: var(--gold-500); font-weight: 600; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* clears the fixed WhatsApp/accessibility buttons, which otherwise sit on top of this row at narrow widths */
  .site-footer { padding-block-end: 104px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
}

/* ============================================================
   Floating WhatsApp button
   ============================================================ */

.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--whatsapp-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55); }
.whatsapp-fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp-500);
  animation: whatsapp-pulse 2.6s ease-out infinite;
}

/* ============================================================
   Accessibility widget
   ============================================================ */

.a11y-widget { position: fixed; bottom: 24px; left: 24px; z-index: 70; }
.a11y-toggle {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy-950);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.a11y-toggle svg { width: 26px; height: 26px; }
.a11y-toggle:hover { background: var(--navy-800); transform: scale(1.06); }

.a11y-panel {
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 300px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--paper-100);
  padding: 8px;
  animation: panel-in 0.22s var(--ease-out);
}
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.a11y-panel-head h2 { font-size: 1.05rem; }
.a11y-close { background: none; border: none; color: var(--ink-500); cursor: pointer; padding: 4px; }
.a11y-close svg { width: 18px; height: 18px; }

.a11y-options { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-50);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  text-align: right;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.a11y-option:hover { background: var(--paper-100); }
.a11y-option.is-active { border-color: var(--gold-500); background: var(--gold-100); color: var(--navy-950); }
.a11y-option--reset { justify-content: center; color: var(--error-500); }
.a11y-option--stepper { cursor: default; }
.a11y-stepper { display: flex; gap: 6px; }
.a11y-stepper button {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--paper-100);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}

/* ---- Accessibility runtime states ---- */
body.a11y-contrast { background: #000; color: #fff; }
body.a11y-contrast .site-header,
body.a11y-contrast .section,
body.a11y-contrast .site-footer,
body.a11y-contrast .modal,
body.a11y-contrast .a11y-panel,
body.a11y-contrast .testimonial-card,
body.a11y-contrast .faq-item { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3,
body.a11y-contrast p, body.a11y-contrast span, body.a11y-contrast a,
body.a11y-contrast label, body.a11y-contrast li { color: #fff !important; }
body.a11y-contrast .btn-accent { background: #ffe08a; color: #000; }
body.a11y-contrast a:not(.btn) { text-decoration: underline; }
body.a11y-contrast .advantages-ledger,
body.a11y-contrast .ledger-row { border-color: #fff !important; }
body.a11y-contrast .ledger-num { color: #fff !important; opacity: 0.6 !important; }

body.a11y-readable-font, body.a11y-readable-font * { font-family: "Arial", "Heebo", sans-serif !important; letter-spacing: 0.01em; }

body.a11y-mark-headings h1, body.a11y-mark-headings h2, body.a11y-mark-headings h3 {
  outline: 2px dashed var(--gold-600);
  outline-offset: 4px;
}
body.a11y-mark-links a:not(.btn):not(.whatsapp-fab):not(.a11y-toggle) {
  text-decoration: underline;
  text-decoration-color: var(--gold-600);
  text-decoration-thickness: 2px;
}

body.a11y-keyboard-nav :focus-visible {
  outline: 4px solid var(--gold-500) !important;
  outline-offset: 4px !important;
}

body.a11y-no-motion *, body.a11y-no-motion *::before, body.a11y-no-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Quote modal
   ============================================================ */

body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 20, 36, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.modal-overlay.is-visible { opacity: 1; }
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  padding: 40px 40px 34px;
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.modal-overlay.is-visible .modal { transform: scale(1) translateY(0); opacity: 1; }

.modal-close {
  position: absolute;
  top: 20px; left: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--paper-50);
  color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover { background: var(--paper-100); }

.modal-body h2 { margin-bottom: 6px; }
.modal-sub { color: var(--ink-500); margin-bottom: 28px; }

.form-part { margin-bottom: 26px; }
.form-part h3 { color: var(--navy-800); font-size: 0.98rem; margin-bottom: 14px; }

.field-row { display: grid; gap: 16px; margin-bottom: 16px; }
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-row .field { margin-bottom: 0; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--ink-700); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--paper-100);
  background: var(--paper-50);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: var(--ink-900);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 84px; }

.field-error {
  display: none;
  font-size: 0.82rem;
  color: var(--error-500);
  font-weight: 600;
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--error-500);
  background: #fdf1f0;
}
.field.has-error .field-error { display: block; }

.stepper-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; margin-bottom: 16px; }
.stepper-field {
  border: 1.5px solid var(--paper-100);
  background: var(--paper-50);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.stepper-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-700); }

/* One age selector per child, revealed under the traveller steppers. */
.child-ages { margin-bottom: 16px; }
.child-ages-title { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 10px; }
.child-ages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.child-age-field { margin-bottom: 0; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-900);
  background: #fff;
  color: var(--navy-900);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.stepper button:hover { background: var(--navy-900); color: #fff; }
.stepper output { min-width: 20px; font-weight: 700; font-size: 1rem; }

/* ---- Toggle switch (multi-destination / car rental / cruise) ---- */
.toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 16px;
}
.toggle-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  border: 1.5px solid var(--paper-100);
  position: relative;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.toggle-field input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 32, 50, 0.3);
  transition: transform 0.22s var(--ease-out);
}
.toggle-field input[type="checkbox"]:checked { background: var(--teal-500); border-color: var(--teal-500); }
.toggle-field input[type="checkbox"]:checked::before { transform: translateX(-20px); }
.toggle-field input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.toggle-field span { font-weight: 600; font-size: 0.92rem; color: var(--navy-950); }

.toggle-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.toggle-section-head h3 { margin-bottom: 0; }
.toggle-section-head .toggle-field { margin-bottom: 0; }

/* ---- Reveal wrapper for optional sections ---- */
.field-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease-out); }
.field-reveal-inner { overflow: hidden; }
.toggle-section.is-enabled .field-reveal { grid-template-rows: 1fr; }

/* ---- Per-destination hotel block, nested inside a destination card ---- */
.dest-hotel { margin: 4px 0 16px; padding-top: 14px; border-top: 1px dashed var(--paper-100); }
.dest-hotel .toggle-field { margin-bottom: 0; }
.dest-hotel.is-enabled .toggle-field { margin-bottom: 16px; }
.dest-hotel.is-enabled .field-reveal { grid-template-rows: 1fr; }

/* ---- Repeatable cards (destinations / vehicles) ---- */
.repeat-card {
  border: 1.5px solid var(--paper-100);
  background: var(--paper-50);
  border-radius: var(--radius-card);
  padding: 18px 18px 4px;
  margin-bottom: 14px;
}
.repeat-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.repeat-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--teal-500);
  background: rgba(20, 147, 157, 0.1);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.repeat-card-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-100);
  background: #fff;
  color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.repeat-card-remove:hover { border-color: var(--error-500); color: var(--error-500); }
.repeat-card-remove svg { width: 14px; height: 14px; }
.repeat-card-remove[hidden] { display: none; }

/* ---- Planning tabs (concierge vs agent) ---- */
.planning-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1.5px solid var(--paper-100);
  margin-bottom: 14px;
}
.planning-tabs button {
  appearance: none;
  border: none;
  background: none;
  padding: 12px 8px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-500);
  cursor: pointer;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.planning-tabs button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1.5px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--teal-500);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease-out);
}
.planning-tabs button[aria-selected="true"] { color: var(--navy-950); }
.planning-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.planning-tabs button:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: -3px;
  border-radius: 6px;
}

.planning-hint {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.55;
  margin-bottom: 14px;
}
.planning-panel[hidden] { display: none; }
.planning-panel .repeat-card { margin-bottom: 0; }
[data-plan-only][hidden] { display: none; }

/* ---- Destinations multi-select (concierge tab) ---- */
.multiselect { position: relative; }
.multiselect-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1.5px solid var(--paper-100);
  background: var(--paper-50);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: var(--ink-900);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.multiselect-toggle:hover { border-color: var(--ink-300); }
.multiselect-toggle[aria-expanded="true"] { border-color: var(--teal-500); background: #fff; }
.multiselect-toggle svg {
  width: 16px; height: 16px;
  color: var(--ink-500);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.multiselect-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.multiselect-menu {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--paper-100);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.multiselect-menu[hidden] { display: none; }
.multiselect-group + .multiselect-group {
  margin-top: 6px;
  border-top: 1px solid var(--paper-100);
  padding-top: 6px;
}
.multiselect-group-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  padding: 6px 10px 4px;
}
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink-700);
  cursor: pointer;
}
.multiselect-option:hover { background: var(--paper-50); }
.multiselect-option input {
  width: 16px; height: 16px;
  accent-color: var(--teal-500);
  flex-shrink: 0;
  cursor: pointer;
}

.multiselect-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.multiselect-chips:empty { display: none; }
.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-500);
  background: rgba(20, 147, 157, 0.1);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
}
.multiselect-chip button {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 147, 157, 0.16);
  color: var(--teal-500);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.multiselect-chip button:hover { background: var(--teal-500); color: #fff; }

/* ---- Yes / No segmented control (private transfer) ---- */
.field-static-label { font-size: 0.88rem; font-weight: 600; color: var(--ink-700); }
.yesno {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--paper-50);
  border: 1.5px solid var(--paper-100);
  border-radius: 10px;
  width: max-content;
}
.yesno-option { position: relative; cursor: pointer; }
.yesno-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.yesno-option span {
  display: block;
  min-width: 64px;
  text-align: center;
  padding: 8px 18px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-500);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.yesno-option input:checked + span { background: var(--teal-500); color: #fff; }
.yesno-option input:focus-visible + span { outline: 2px solid var(--teal-500); outline-offset: 2px; }

.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1.5px dashed var(--ink-300);
  background: transparent;
  color: var(--teal-500);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
  margin-top: 12px;
  margin-bottom: 16px;
}
.btn-add:hover { border-color: var(--teal-500); background: rgba(20, 147, 157, 0.06); }
.btn-add svg { width: 16px; height: 16px; }

#quote-submit { margin-top: 6px; position: relative; }

/* Plane taxiing along a short dashed runway inside the button — the
   same gold-on-dashes motif as the hero flight path, in miniature,
   so "sending" reads as this brand rather than a generic spinner. */
.btn-spinner {
  display: none;
  position: relative;
  width: 34px; height: 16px;
}
.btn-spinner::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  border-top: 2px dashed rgba(15, 32, 50, 0.3);
  transform: translateY(-50%);
}
.btn-spinner svg {
  position: absolute;
  top: 50%; right: -6px;
  width: 15px; height: 15px;
  color: var(--navy-950);
  transform: translateY(-50%) scaleX(-1);
  animation: btn-plane-taxi 1.1s linear infinite;
}
#quote-submit.is-loading .btn-label { opacity: 0.6; }
#quote-submit.is-loading .btn-spinner { display: inline-block; }
#quote-submit.is-loading { cursor: not-allowed; }

@keyframes btn-plane-taxi {
  0% { right: 100%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { right: -6px; opacity: 0; }
}

/* Submission feedback (loading / success / error) is handled by
   FlyUsToast — see toast.js and the Toasts section below. */

/* ---- Full-screen "sending" dial -------------------------------------
   The button's plane-on-a-dashed-runway motif, scaled up into a circular
   runway centred on the page while a quote request is in flight. */
.sending-overlay[hidden] { display: none; }
.sending-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(7, 27, 51, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sending-fade 0.2s ease-out;
}
.sending-dial {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
}
.sending-ring {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 238, 217, 0.7);
  animation: sending-ring-spin 9s linear infinite;
}
.sending-ring::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(227, 165, 62, 0.25);
}
.sending-orbit {
  position: absolute;
  inset: 16px;
  animation: sending-orbit-spin 2.6s linear infinite;
}
.sending-plane {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  color: var(--gold-500);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  /* nose points along the orbit's clockwise tangent */
  transform: scaleX(-1) rotate(28deg);
}
.sending-text {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold-100);
  letter-spacing: 0.01em;
}

@keyframes sending-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sending-ring-spin { to { transform: rotate(360deg); } }
@keyframes sending-orbit-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sending-overlay { animation: none; }
  .sending-ring { animation-duration: 24s; }
  .sending-orbit { animation: sending-pulse 1.6s ease-in-out infinite; }
  .sending-plane { transform: scaleX(-1); }
}
.a11y-no-motion .sending-ring { animation-duration: 24s; }
.a11y-no-motion .sending-orbit { animation: sending-pulse 1.6s ease-in-out infinite; }
.a11y-no-motion .sending-plane { transform: scaleX(-1); }
@keyframes sending-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; padding: 30px 22px 26px; }
  .field-row.cols-2 { grid-template-columns: 1fr; }
  .stepper-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Keyframes
   ============================================================ */

@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes beta-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes plane-float {
  0%, 100% { transform: scaleX(-1) rotate(8deg) translate(0, 0); }
  50% { transform: scaleX(-1) rotate(6deg) translate(-10px, -14px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1); }
}
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Toasts — FlyUsToast, matched to the admin panel's sonner stack:
   bottom-anchored, stacking, auto-dismissing status notes.
   ============================================================ */
.fu-toaster {
  position: fixed;
  bottom: 24px;
  left: 24px;
  /* clear the accessibility FAB that also lives bottom-left */
  margin-bottom: 66px;
  z-index: 1000;
  margin-inline: 0;
  margin-top: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 356px;
  max-width: calc(100vw - 48px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .fu-toaster {
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin-bottom: 74px;
    width: auto;
    max-width: none;
  }
}

.fu-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--paper-0);
  border: 1px solid #dfe6ec;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.fu-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fu-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

.fu-toast__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
}

.fu-toast__icon svg {
  width: 100%;
  height: 100%;
}

.fu-toast__content {
  flex: 1 1 auto;
  min-width: 0;
}

.fu-toast__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.fu-toast__desc {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-500);
}

.fu-toast__close {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #dfe6ec;
  border-radius: 6px;
  background: var(--paper-0);
  color: var(--ink-500);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.fu-toast__close:hover {
  color: var(--ink-900);
  border-color: var(--ink-500);
}

.fu-toast__close svg {
  width: 12px;
  height: 12px;
}

.fu-toast--success {
  background: #d7efe3;
  border-color: #b7e2cf;
  color: #0f7a4f;
}

.fu-toast--error {
  background: #f7dcd8;
  border-color: #efc4bd;
  color: #b03325;
}

.fu-toast--info {
  background: #cfe0ee;
  border-color: #b6cfe4;
  color: var(--navy-700);
}

.fu-toast--success .fu-toast__desc,
.fu-toast--error .fu-toast__desc,
.fu-toast--info .fu-toast__desc {
  color: inherit;
  opacity: 0.82;
}

.fu-toast--loading .fu-toast__icon {
  color: var(--navy-700);
}

.fu-toast__spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: fu-toast-spin 0.7s linear infinite;
}

@keyframes fu-toast-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-flightpath path { animation: none; stroke-dashoffset: 0; }
  .hero-plane, .hero-star, .whatsapp-fab-ring { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.001s !important; animation-duration: 0.001s !important; }
}