/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --navy:    #06091a;
  --navy2:   #0c1128;
  --navy3:   #111830;
  --navy4:   #1a2240;
  --gold:    #c9a84c;
  --gold2:   #e8c06a;
  --gold3:   #f2d080;
  --gold-lt: rgba(201,168,76,0.12);
  --red:     #d4341a;
  --red2:    #e8432a;
  --cream:   #fdf8ee;
  --white:   #ffffff;
  --mid:     #8890aa;
  --dim:     #555e7a;
  --border:  rgba(201,168,76,0.18);
  --border2: rgba(201,168,76,0.08);
  --radius:  14px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 70px;
}

/* Background: cabin/airhostess image via Unsplash */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('../../img/home/home4.jpg');
  background-size: cover;
  background-position: center 30%;
  transition: opacity 0.5s;
}

/* Multi-layer overlay: deep navy tint + radial warmth from right */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(6,9,26,0.92) 0%,
      rgba(6,9,26,0.78) 40%,
      rgba(6,9,26,0.55) 65%,
      rgba(6,9,26,0.40) 100%),
    radial-gradient(ellipse 60% 80% at 75% 50%,
      rgba(201,168,76,0.08),
      transparent 60%);
}

/* Gold grain texture */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px 48px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Hero headline area ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 22px;
  animation: fadeUp 0.7s 0.1s both;
}

.hero-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow: 0 0 8px rgba(201,168,76,0.6);
}

.hero-eyebrow span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold2);
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 14px;
  animation: fadeUp 0.7s 0.2s both;
}

.hero-title em {
  font-style: italic;
  color: var(--gold2);
}

.hero-subtitle {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  text-align: center;
  letter-spacing: 0.5px;
  margin-bottom: 44px;
  animation: fadeUp 0.7s 0.3s both;
}

.hero-subtitle strong {
  color: var(--gold2);
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   BOOKING FORM CARD
═══════════════════════════════════════════ */
.form-card {
  width: 100%;
  max-width: 900px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.3),
    0 40px 100px rgba(0,0,0,0.55),
    0 0 80px rgba(201,168,76,0.06);
  animation: fadeUp 0.7s 0.4s both;
  position: relative;
}

/* Trip type tabs */
.form-tabs {
  display: flex;
  background: var(--navy2);
  padding: 6px 6px 0;
  gap: 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.form-tab {
  flex: 1;
  padding: 13px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.form-tab.active {
  background: rgba(255,255,255,0.97);
  color: var(--red);
}

.form-tab:not(.active):hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
}

/* Cabin selector (inside tab bar) */
.cabin-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  align-self: center;
}

.cabin-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold2);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23e8c06a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.cabin-select option { background: var(--navy2); color: var(--white); }

/* Form body */
.form-body {
  padding: 28px 28px 24px;
  background: #ffffff;
}

/* Desktop main row */
.form-row-main {
  display: grid;
  grid-template-columns: 1.5fr 44px 1.5fr 1fr 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.form-row-bottom {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 10px;
  align-items: end;
}

/* Field wrapper */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mid);
  padding-left: 2px;
}

.field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 14px;
  color: var(--gold);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.field input,
.field select {
  width: 100%;
  height: 52px;
  padding: 0 14px 0 42px;
  background: #f7f5f0;
  border: 1.5px solid #e8e2d4;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.field input::placeholder { color: #aaa8a0; font-weight: 400; }

.field input:focus,
.field select:focus {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.14);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Swap button */
.swap-btn {
  width: 44px;
  height: 52px;
  border-radius: 12px;
  background: var(--gold-lt);
  border: 1.5px solid rgba(201,168,76,0.25);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  align-self: end;
}

.swap-btn:hover {
  background: rgba(201,168,76,0.2);
  border-color: var(--gold);
  transform: rotate(180deg);
}

/* Search btn */
/* Search button shake for invalid fields */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ── Search button ── */
.search-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #d4341a 0%, #e8432a 50%, #d4341a 100%);
  background-size: 200% 100%;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.5px;
  transition: all 0.22s ease, background-position 0.4s ease;
  box-shadow: 0 4px 20px rgba(212,52,26,0.32);
  position: relative;
  overflow: hidden;
  user-select: none;
}
/* Shimmer sweep on idle */
.search-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: none;
}
.search-btn:hover::before {
  left: 150%;
  transition: left 0.55s ease;
}
.search-btn:hover {
  background-position: 100% 0;
  box-shadow: 0 8px 32px rgba(212,52,26,0.5);
  transform: translateY(-2px);
}
.search-btn:active { transform: translateY(0); box-shadow: 0 4px 16px rgba(212,52,26,0.35); }

/* Loading state */
.search-btn.loading {
  background: linear-gradient(135deg, #b82d14, #c93820) !important;
  cursor: wait;
  transform: none !important;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(212,52,26,0.25);
}
.search-btn.loading::before { display: none; }

/* Success state */
.search-btn.success {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  box-shadow: 0 4px 20px rgba(22,163,74,0.4) !important;
  transform: none !important;
  pointer-events: none;
}
.search-btn.success::before { display: none; }

/* SVG spinner inside button */
.search-spinner {
  display: none;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.search-btn.loading .search-spinner { display: block; }
.search-btn.loading .search-icon   { display: none; }
.search-btn.loading .search-label  { opacity: 0.85; }

/* Spinner animation */
.search-spinner circle {
  fill: none;
  stroke: rgba(255,255,255,0.35);
  stroke-width: 2.5;
}
.search-spinner path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-origin: center;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success check icon */
.search-check {
  display: none;
  width: 20px; height: 20px; flex-shrink: 0;
}
.search-btn.success .search-check  { display: block; }
.search-btn.success .search-icon   { display: none; }
.search-btn.success .search-spinner{ display: none; }

.search-check polyline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkDraw 0.4s 0.1s ease forwards;
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

.search-icon { font-size: 18px; flex-shrink: 0; }
.search-label { transition: opacity 0.2s; }

/* Pax field needs full width base */
.pax-field { width: 100%; }

/* Mobile cabin field: hidden by default, shown via mobile media query */
.mob-cabin-field { display: none; flex-direction: column; gap: 4px; width: 100%; }

/* Search wrap */
#searchWrap { min-width: 200px; }

/* ── Passenger display trigger ── */
.pax-display {
  height: 52px;
  padding: 0 14px 0 42px;
  background: #f7f5f0;
  border: 1.5px solid #e8e2d4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  position: relative;
  user-select: none;
}
.pax-display:hover,
.pax-display.open {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.14);
}
/* Chevron arrow */
.pax-display::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #9090a8;
  transition: transform 0.2s ease;
}
.pax-display.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.pax-display-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}

/* ── Passenger dropdown — opens UPWARD ── */
.pax-dropdown {
  position: absolute;
  bottom: calc(100% + 10px);  /* ← opens UP above the trigger */
  left: 0;
  min-width: 300px;
  background: #ffffff;
  border: 1px solid #e8e4dc;
  border-radius: 18px;
  padding: 0;
  z-index: 600;               /* ← above form-card overflow */
  box-shadow:
    0 -4px 24px rgba(0,0,0,0.10),
    0 -16px 48px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.04);
  display: none;
  overflow: hidden;
  animation: paxSlideUp 0.2s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes paxSlideUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.pax-dropdown.open { display: block; }

/* Dropdown header */
.pax-dropdown-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid #f0ede8;
  background: linear-gradient(135deg, #faf8f3 0%, #f5f2ea 100%);
}
.pax-dropdown-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #9090a8;
}

/* Passenger rows */
.pax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f5f3ee;
  transition: background 0.12s;
}
.pax-row:last-of-type { border-bottom: none; }
.pax-row:hover { background: #faf8f3; }

.pax-row-info { display: flex; flex-direction: column; gap: 3px; }
.pax-row-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600; color: #1a1a2e;
}
.pax-row-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 400; color: #9090a8;
}

/* Counter controls */
.pax-counter {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pax-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid #e0dbd0;
  background: #ffffff;
  color: #444;
  font-size: 18px; font-weight: 400;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.16s ease;
  line-height: 1;
  touch-action: manipulation;
}
.pax-btn:hover:not(:disabled) {
  border-color: var(--red);
  background: rgba(212,52,26,0.06);
  color: var(--red);
  transform: scale(1.08);
}
.pax-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.pax-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 700;
  color: #1a1a2e;
  min-width: 22px; text-align: center;
}

/* Done button */
.pax-done {
  display: block;
  width: calc(100% - 36px);
  margin: 12px 18px 14px;
  padding: 11px;
  background: linear-gradient(135deg, #d4341a, #e8432a);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 14px rgba(212,52,26,0.3);
  touch-action: manipulation;
}
.pax-done:hover {
  background: linear-gradient(135deg, #e8432a, #f05535);
  box-shadow: 0 6px 20px rgba(212,52,26,0.45);
  transform: translateY(-1px);
}

/* Form extras */
.form-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.form-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}

.form-badge-icon { font-size: 14px; }

.form-promo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-input {
  height: 38px;
  padding: 0 14px;
  background: #f7f5f0;
  border: 1.5px solid #e8e2d4;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--navy);
  outline: none;
  width: 150px;
  transition: border-color var(--transition);
}

.promo-input::placeholder { color: #bbb; }
.promo-input:focus { border-color: var(--gold); }

.promo-apply {
  height: 38px;
  padding: 0 14px;
  background: var(--navy2);
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gold2);
  cursor: pointer;
  transition: all var(--transition);
}

.promo-apply:hover { background: var(--navy4); }
.promo-apply:disabled { opacity: 0.6; cursor: not-allowed; }

/* Promo toast alert */
.promo-toast {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 20px 14px 16px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: normal;
}
.promo-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.promo-toast.success {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}
.promo-toast.error {
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}
.promo-toast-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.promo-toast-body { flex: 1; }
.promo-toast-title { font-weight: 700; margin-bottom: 2px; }
.promo-toast-sub   { font-size: 12px; opacity: 0.8; }
.promo-toast-close {
  background: none; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; opacity: 0.45;
  padding: 0; margin-left: 4px; flex-shrink: 0;
  color: inherit; transition: opacity 0.15s;
}
.promo-toast-close:hover { opacity: 0.8; }

/* ── Trust badges below form ── */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  animation: fadeUp 0.7s 0.55s both;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

.trust-icon { font-size: 16px; }

.trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════════
   WHY SECTION  —  redesigned
═══════════════════════════════════════════ */

/* ── Section wrapper ── */
.why-section {
  background: var(--white);
  padding: 100px 48px;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid texture */
.why-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,168,76,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

/* ── Header row ── */
.why-header {
  margin-bottom: 56px;
}

.why-header-left {}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: '';
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  border-radius: 2px;
  flex-shrink: 0;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.5px;
  margin-bottom: 48px;
}
.section-title em {
  font-style: italic;
  color: var(--gold);
}

/* why-header-right / why-header-desc removed */

/* Trust chips row */
/* why-chips removed */

/* ── MAIN GRID ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── CARD ── */
.why-card {
  background: #fff;
  border: 1px solid #ede8da;
  border-radius: 22px;
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1),
              box-shadow 0.25s cubic-bezier(.4,0,.2,1),
              border-color 0.25s;
}

/* Gold top accent bar — slides in on hover */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

/* Large number watermark */
.why-card::after {
  content: attr(data-num);
  position: absolute;
  bottom: -14px; right: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 96px;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.04;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.25s;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(6,9,26,.10);
  border-color: rgba(201,168,76,.35);
}
.why-card:hover::before { transform: scaleX(1); }
.why-card:hover::after  { opacity: .06; }

/* Icon wrap */
.why-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(212,52,26,.10) 0%,
    rgba(201,168,76,.10) 100%);
  border: 1px solid rgba(201,168,76,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.why-card:hover .why-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 8px 24px rgba(212,52,26,.15);
}

/* Card number badge */
.why-card-num {
  position: absolute;
  top: 26px; right: 26px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 700;
  color: rgba(201,168,76,.5);
  letter-spacing: 1px;
}

.why-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.2;
}

.why-card-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.78;
}

/* Feature bullet list (optional per card) */
.why-card-list {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.why-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--dim);
}
.why-card-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Bottom CTA strip inside section */
.why-cta-strip {
  margin-top: 60px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 60%, #1a2040 100%);
  border-radius: 24px;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.why-cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,168,76,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.why-cta-strip::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--gold3));
}
.why-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.why-cta-title em { font-style: italic; color: var(--gold2); }
.why-cta-sub {
  font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,.5);
  position: relative; z-index: 1;
}
.why-cta-btns {
  display: flex; gap: 12px; align-items: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.why-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--navy);
  font-size: 13px; font-weight: 700;
  padding: 12px 26px; border-radius: 100px;
  text-decoration: none; white-space: nowrap;
  border: none; cursor: pointer;
  box-shadow: 0 4px 18px rgba(201,168,76,.35);
  transition: opacity .15s, transform .1s;
}
.why-btn-primary:hover { opacity: .92; transform: translateY(-1px); }
.why-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 12px 22px; border-radius: 100px;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.why-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .why-header { margin-bottom: 36px; }
  .why-grid   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-cta-strip { grid-template-columns: 1fr; gap: 22px; }
  .why-cta-btns  { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .why-section { padding: 64px 18px; }
  .why-grid    { grid-template-columns: 1fr; gap: 14px; }
  .why-cta-strip { padding: 28px 22px; }
  .why-cta-btns { flex-direction: column; align-items: stretch; }
  .why-btn-primary, .why-btn-ghost { justify-content: center; }
}

/* ═══════════════════════════════════════════
   AIRLINES STRIP
═══════════════════════════════════════════ */
.airlines-strip {
  background: var(--navy2);
  padding: 44px 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.strip-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  margin-bottom: 28px;
}

.airlines-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.airline-badge {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
  transition: all var(--transition);
}

.airline-badge:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.2);
  color: var(--gold2);
}


/* ═══════════════════════════════════════════
   SHARED SECTION UTILITIES
═══════════════════════════════════════════ */
.sec { padding: 90px 48px; }
.sec-dark  { background: var(--navy2); }
.sec-navy  { background: var(--navy3); }
.sec-white { background: #fff; }
.sec-inner { max-width: 1140px; margin: 0 auto; }
.sec-head  { margin-bottom: 52px; }
.sec-eyebrow { font-size:10px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold2);margin-bottom:10px;display:block; }
.sec-eyebrow.red { color:var(--red); }
.sec-title { font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.1;letter-spacing:-0.5px; }
.sec-title.light { color:var(--white); }
.sec-title.dark  { color:var(--navy); }
.sec-title em { font-style:italic;color:var(--gold2); }
.sec-title.dark em { color:var(--red); }
.sec-sub { font-size:15px;font-weight:300;line-height:1.8;max-width:520px;margin-top:14px; }
.sec-sub.light { color:rgba(255,255,255,0.5); }
.sec-sub.dark  { color:var(--dim); }

/* ═══════════════════════════════════════════
   STATS TICKER
═══════════════════════════════════════════ */
.stats-strip { background:linear-gradient(90deg,var(--navy),var(--navy3),var(--navy));border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.stats-inner { display:flex;align-items:stretch;max-width:1140px;margin:0 auto; }
.stat-item { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;border-right:1px solid rgba(201,168,76,0.12);transition:background var(--transition); }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(201,168,76,0.04); }
.stat-num { font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:700;color:var(--gold2);line-height:1;letter-spacing:-1px;margin-bottom:4px; }
.stat-label { font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid); }

/* ═══════════════════════════════════════════
   HOT DEALS
═══════════════════════════════════════════ */
.deals-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.deal-card { background:var(--navy3);border:1px solid var(--border);border-radius:20px;overflow:hidden;position:relative;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow var(--transition),border-color var(--transition);cursor:pointer; }
.deal-card:hover { transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(201,168,76,.3);border-color:rgba(201,168,76,.4); }
.deal-img { width:100%;height:160px;background-size:cover;background-position:center;position:relative;overflow:hidden; }
.deal-img::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,9,26,.9) 100%); }
.deal-badge { position:absolute;top:14px;left:14px;z-index:2;background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:100px; }
.deal-body { padding:20px 22px 22px; }
.deal-route { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.deal-city { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--white);line-height:1; }
.deal-arrow { color:var(--gold2);font-size:16px;flex-shrink:0; }
.deal-meta { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
.deal-info { display:flex;flex-direction:column;gap:3px; }
.deal-airline { font-size:11px;font-weight:500;color:var(--mid);letter-spacing:.5px; }
.deal-cabin { font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold2); }
.deal-price-wrap { text-align:right; }
.deal-was { font-size:11px;color:var(--mid);text-decoration:line-through;margin-bottom:2px; }
.deal-price { font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;color:var(--gold2);letter-spacing:-.5px;line-height:1; }
.deal-pp { font-size:10px;color:var(--mid); }

/* ═══════════════════════════════════════════
   POPULAR ROUTES
═══════════════════════════════════════════ */
.routes-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.route-card { background:var(--navy4);border:1px solid rgba(201,168,76,.1);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:transform .26s cubic-bezier(.34,1.56,.64,1),border-color var(--transition),background var(--transition);position:relative;overflow:hidden; }
.route-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));transform:scaleX(0);transform-origin:left;transition:transform .3s ease; }
.route-card:hover { transform:translateY(-4px);border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.05); }
.route-card:hover::before { transform:scaleX(1); }
.route-iata { display:flex;align-items:center;gap:8px; }
.route-code { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--white);line-height:1;letter-spacing:-1px; }
.route-plane { color:var(--gold2);font-size:14px; }
.route-city { font-size:11px;color:var(--mid);margin-top:2px; }
.route-from { font-size:11px;color:rgba(255,255,255,.3);margin-top:-8px; }
.route-bottom { display:flex;align-items:flex-end;justify-content:space-between; }
.route-price-lbl { font-size:9px;color:var(--mid);text-transform:uppercase;letter-spacing:1.5px; }
.route-price { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--gold2);letter-spacing:-.3px; }
.route-cta { font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold2);border:1px solid rgba(201,168,76,.25);border-radius:100px;padding:5px 14px;transition:background var(--transition); }
.route-card:hover .route-cta { background:rgba(201,168,76,.12); }
.route-card:hover .route-code {
    color: var(--navy4);
}

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.how-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative; }
.how-grid::before { content:'';position:absolute;top:42px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent); }
.how-step { display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;position:relative; }
.how-num-wrap { width:84px;height:84px;border-radius:50%;border:1px solid var(--border);background:var(--navy3);display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition); }
.how-step:hover .how-num-wrap { border-color:var(--gold2);background:rgba(201,168,76,.08);box-shadow:0 0 0 8px rgba(201,168,76,.05); }
.how-icon { font-size:30px; }
.how-title { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--white);margin-bottom:10px; }
.how-text { font-size:13px;font-weight:300;color:var(--mid);line-height:1.75; }

/* ═══════════════════════════════════════════
   BUSINESS CLASS EXPERIENCE
═══════════════════════════════════════════ */
.exp-layout { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
.exp-visual { position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--navy3); }
.exp-img { width:100%;height:100%;background-image:url('../../img/home/businessinside.webp');background-size:cover;background-position:center;transition:transform .6s ease; }
.exp-visual:hover .exp-img { transform:scale(1.04); }
.exp-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,9,26,.3),transparent 60%,rgba(6,9,26,.5) 100%); }
.exp-float { position:absolute;bottom:22px;left:22px;background:rgba(6,9,26,.85);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:12px; }
.exp-float-icon { font-size:24px; }
.exp-float-text { display:flex;flex-direction:column;gap:2px; }
.exp-float-label { font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--mid); }
.exp-float-val { font-size:13px;font-weight:600;color:var(--white); }
.exp-badge { position:absolute;top:20px;right:20px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border-radius:100px; }
.exp-perks { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px; }
.perk-item { background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:18px 16px;display:flex;align-items:flex-start;gap:12px;transition:border-color var(--transition),background var(--transition); }
.perk-item:hover { border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.05); }
.perk-ico { font-size:22px;flex-shrink:0;margin-top:1px; }
.perk-name { font-size:13px;font-weight:600;color:var(--white);margin-bottom:3px; }
.perk-desc { font-size:11px;font-weight:300;color:var(--mid);line-height:1.6; }

/* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
.testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.testi-card { background:#fff;border:1px solid #eeeae0;border-radius:20px;padding:28px 26px;position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow var(--transition); }
.testi-card:hover { transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.1); }
.testi-quote-mark { font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:700;color:rgba(201,168,76,.15);line-height:.6;position:absolute;top:22px;left:22px;pointer-events:none; }
.testi-stars { color:#e8b84b;font-size:14px;letter-spacing:2px;margin-bottom:14px; }
.testi-text { font-size:14px;font-weight:300;color:var(--dim);line-height:1.8;margin-bottom:20px;font-style:italic; }
.testi-author { display:flex;align-items:center;gap:12px; }
.testi-av { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--navy3),var(--navy));border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:700;color:var(--gold2);flex-shrink:0; }
.testi-name { font-size:14px;font-weight:600;color:var(--navy); }
.testi-route { font-size:11px;color:var(--mid);margin-top:2px; }
.testi-cabin { margin-left:auto;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:100px;padding:3px 10px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold); }

/* ═══════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════ */
.cta-band { background:var(--navy2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden; }
.cta-band::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 70% 50%,rgba(201,168,76,.1),transparent 60%),radial-gradient(ellipse 40% 60% at 10% 50%,rgba(212,52,26,.06),transparent 55%); }
.cta-band-inner { max-width:1140px;margin:0 auto;padding:70px 48px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;position:relative;z-index:1; }
.cta-band-title { font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.5vw,42px);font-weight:700;color:var(--white);line-height:1.15;letter-spacing:-.5px;margin-bottom:12px; }
.cta-band-title em { font-style:italic;color:var(--gold2); }
.cta-band-sub { font-size:14px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7;max-width:460px; }
.cta-band-actions { display:flex;flex-direction:column;gap:14px;align-items:flex-end; }
.cta-band-price { text-align:right; }
.cta-band-price-label { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px; }
.cta-band-price-val { font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:700;color:var(--gold2);letter-spacing:-2px;line-height:1; }
.cta-band-price-sub { font-size:12px;color:var(--mid);margin-top:2px; }
.btn-primary { display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;border:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.3px;padding:16px 32px;border-radius:12px;cursor:pointer;box-shadow:0 6px 28px rgba(212,52,26,.35);transition:all var(--transition);white-space:nowrap; }
.btn-primary:hover { background:linear-gradient(135deg,#e03d20,#f05535);box-shadow:0 10px 36px rgba(212,52,26,.5);transform:translateY(-2px); }
.btn-ghost { display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--gold2);border:1px solid var(--border);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;padding:13px 26px;border-radius:12px;cursor:pointer;transition:all var(--transition);white-space:nowrap; }
.btn-ghost:hover { background:var(--gold-lt);border-color:rgba(201,168,76,.35); }

/* ═══════════════════════════════════════════
   DESTINATIONS
═══════════════════════════════════════════ */
.dest-grid { display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:16px; }
.dest-card { border-radius:18px;overflow:hidden;position:relative;cursor:pointer; }
.dest-card:first-child { grid-row:1/3; }
.dest-img { width:100%;height:100%;background-size:cover;background-position:center;transition:transform .5s ease; }
.dest-card:hover .dest-img { transform:scale(1.06); }
.dest-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,26,.05) 0%,rgba(6,9,26,.75) 100%);transition:background var(--transition); }
.dest-card:hover .dest-overlay { background:linear-gradient(180deg,rgba(6,9,26,.1) 0%,rgba(6,9,26,.85) 100%); }
.dest-info { position:absolute;bottom:20px;left:20px;right:20px; }
.dest-city { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:#fff;line-height:1;margin-bottom:5px; }
.dest-card:first-child .dest-city { font-size:38px; }
.dest-country { font-size:12px;color:rgba(255,255,255,.5);margin-bottom:10px; }
.dest-price-tag { display:inline-flex;align-items:center;gap:6px;background:rgba(6,9,26,.7);backdrop-filter:blur(8px);border:1px solid rgba(201,168,76,.25);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--gold2); }

/* ═══════════════════════════════════════════
   LIVE ASSISTANCE
═══════════════════════════════════════════ */
.assist-layout { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
.assist-channels { display:flex;flex-direction:column;gap:14px;margin-top:32px; }
.assist-channel { display:flex;align-items:center;gap:16px;background:rgba(201,168,76,.06);border:1px solid var(--border);border-radius:14px;padding:18px 20px;cursor:pointer;transition:border-color var(--transition),background var(--transition);text-decoration:none; }
.assist-channel:hover { border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.1); }
.assist-ch-icon { width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.06));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.assist-ch-body { flex:1; }
.assist-ch-label { font-size:11px;color:var(--mid);margin-bottom:3px;letter-spacing:1px;text-transform:uppercase; }
.assist-ch-val { font-size:16px;font-weight:600;color:var(--white); }
.assist-ch-sub { font-size:11px;color:var(--mid);margin-top:2px; }
.assist-ch-arrow { font-size:18px;color:var(--gold2); }
.assist-visual { background:var(--navy3);border:1px solid var(--border);border-radius:24px;padding:36px 32px;position:relative;overflow:hidden; }
.assist-visual::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,.12),transparent 60%); }
.chat-bubble-wrap { position:relative;z-index:1; }
.chat-time { font-size:10px;color:var(--mid);text-align:center;margin-bottom:16px;letter-spacing:.5px; }
.chat-bubble { border-radius:18px;padding:13px 16px;margin-bottom:10px;max-width:85%;font-size:13px;line-height:1.6; }
.chat-bubble.agent { background:var(--navy4);border:1px solid var(--border);color:rgba(255,255,255,.85);border-radius:18px 18px 18px 4px; }
.chat-bubble.user { background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;margin-left:auto;border-radius:18px 18px 4px 18px; }
.chat-agent-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.chat-agent-av { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--navy); }
.chat-agent-name { font-size:11px;font-weight:600;color:var(--gold2); }
.chat-agent-status { font-size:10px;color:var(--mid); }
.chat-typing { display:flex;gap:4px;align-items:center;background:var(--navy4);border:1px solid var(--border);border-radius:18px 18px 18px 4px;padding:12px 16px;width:fit-content;margin-bottom:10px; }
.chat-dot { width:6px;height:6px;border-radius:50%;background:var(--mid);animation:chatDot 1.4s infinite both; }
.chat-dot:nth-child(2){animation-delay:.2s} .chat-dot:nth-child(3){animation-delay:.4s}
@keyframes chatDot { 0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1} }

/* ═══════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════ */
.newsletter-sec { background:linear-gradient(135deg,#b8893a,#c9a84c 40%,#dfc06e 70%,#c9a84c);padding:72px 48px;text-align:center;position:relative;overflow:hidden; }
.newsletter-sec::before { content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px; }
.newsletter-inner { max-width:640px;margin:0 auto;position:relative;z-index:1; }
.newsletter-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(6,9,26,.15);border:1px solid rgba(6,9,26,.2);border-radius:100px;padding:6px 16px;margin-bottom:20px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--navy); }
.newsletter-title { font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,44px);font-weight:700;color:var(--navy);letter-spacing:-.5px;line-height:1.1;margin-bottom:12px; }
.newsletter-sub { font-size:14px;color:rgba(6,9,26,.6);margin-bottom:28px;line-height:1.7; }
.newsletter-form { display:flex;gap:10px;background:rgba(255,255,255,.4);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);border-radius:14px;padding:8px; }
.newsletter-input { flex:1;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);padding:0 14px;outline:none; }
.newsletter-input::placeholder { color:rgba(6,9,26,.4); }
.newsletter-btn { background:var(--navy);color:var(--gold2);border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;padding:13px 24px;cursor:pointer;white-space:nowrap;transition:background var(--transition); }
.newsletter-btn:hover { background:var(--navy3); }
.newsletter-note { font-size:11px;color:rgba(6,9,26,.45);margin-top:12px; }


/* ═══════════════════════════════════════════
   FLOATING CALL BAR (mobile)
═══════════════════════════════════════════ */
.float-call { display:none;position:fixed;bottom:20px;left:14px;right:14px;z-index:200;background:linear-gradient(135deg,var(--red),var(--red2));border-radius:14px;padding:14px 20px;box-shadow:0 8px 32px rgba(212,52,26,.45);align-items:center;gap:14px;text-decoration:none; }
.float-call-icon { font-size:24px; }
.float-call-text { flex:1; }
.float-call-label { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7); }
.float-call-num { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:#fff; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal { opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ═══════════════════════════════════════════
   NEW SECTIONS RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1024px) {
  .deals-grid { grid-template-columns:1fr 1fr; }
  .routes-grid { grid-template-columns:1fr 1fr; }
  .how-grid { grid-template-columns:1fr 1fr;gap:36px; }
  .how-grid::before { display:none; }
  .exp-layout { gap:36px; }
  .dest-grid { grid-template-columns:1fr 1fr;grid-template-rows:auto; }
  .dest-card:first-child { grid-row:auto; }
  .footer-5col { grid-template-columns:1fr 1fr 1fr !important; }
  .cta-band-inner { grid-template-columns:1fr;gap:32px; }
  .cta-band-actions { align-items:flex-start;flex-direction:row;flex-wrap:wrap; }
  .assist-layout { gap:36px; }
}
@media (max-width:768px) {
  .sec { padding:60px 20px; }
  .deals-grid { grid-template-columns:1fr; }
  .routes-grid { grid-template-columns:1fr 1fr; }
  .how-grid { grid-template-columns:1fr 1fr; }
  .how-paths { grid-template-columns:1fr !important; }
  .exp-layout { grid-template-columns:1fr; }
  .exp-visual { aspect-ratio:16/9; }
  .testi-grid { grid-template-columns:1fr; }
  .assist-layout { grid-template-columns:1fr; }
  .dest-grid { grid-template-columns:1fr;grid-template-rows:auto;gap:12px; }
  .dest-card,.dest-card:first-child { height:200px; }
  .footer-grid { grid-template-columns:1fr 1fr;gap:32px; }
  .footer-5col { grid-template-columns:1fr 1fr !important; gap:28px !important; }
  .footer-bottom-bar { flex-direction:column; align-items:flex-start; }
  .stats-inner { flex-wrap:wrap; }
  .stat-item { flex:1 1 50%;border-bottom:1px solid rgba(201,168,76,.12); }
  .newsletter-sec { padding:52px 20px; }
  .newsletter-form { flex-direction:column; }
  .newsletter-input { padding:14px; }
  .float-call { display:flex; }
  body { padding-bottom:80px; }
  .cta-band-inner { padding:48px 20px; }
  .mega-footer { padding:52px 20px 0; }
  .testi-cabin { display:none; }
}
@media (max-width:480px) {
  .routes-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; }
  .how-paths { grid-template-columns:1fr !important; gap:16px !important; }
  .exp-perks { grid-template-columns:1fr; }
  .footer-5col { grid-template-columns:1fr !important; }
  .footer-bottom { flex-direction:column;align-items:flex-start; }
  .stat-item { flex:1 1 100%; }
  .cta-band-actions { flex-direction:column; }
}

/* ═══════════════════════════════════════════
   FORM LAYOUT — DESKTOP (>900px)
   5-col: From | swap | To | Depart | Return
═══════════════════════════════════════════ */
.form-row-main {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.form-row-bottom {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 10px;
  align-items: end;
}

/* ═══════════════════════════════════════════
   TABLET (≤900px)
   2-col: From | To on row1, dates+pax on row2
═══════════════════════════════════════════ */

/* ≤1200px — hide Blog, My Reservation, Customer Support */
@media (max-width: 1200px) {
  .navbar { padding: 0 24px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; }
  .nav-hide-1200 { display: none !important; }
}

/* ≤960px — hide Hotel + Live Help too, only Flights stays */
@media (max-width: 960px) {
  .nav-links li:not(:first-child) { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 900px) {
  .navbar { padding: 0 28px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .hero-inner { padding: 48px 28px 60px; }

  /* Row 1: From [swap] To */
  .form-row-main {
    grid-template-columns: 1fr 48px 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }

  /* Depart and Return drop to second row, each half width */
  .field-depart { grid-column: 1; grid-row: 2; }
  .field-return { grid-column: 2 / span 2; grid-row: 2; }

  /* Swap stays in middle of row 1 */
  .swap-btn { grid-column: 2; grid-row: 1; }

  .form-row-bottom { grid-template-columns: 1fr 180px; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-section { padding: 60px 28px; }
}

.mob-form-label    { display: none; }
.mob-referral-nudge { display: none; }

/* ═══════════════════════════════════════════
   MOBILE (≤620px) — BEAUTIFUL REDESIGN
═══════════════════════════════════════════ */
@media (max-width: 620px) {

  /* ── Navbar ── */
  .navbar { padding: 0 16px; height: 56px; }
  .logo-badge { font-size: 13px; padding: 3px 9px; }
  .logo-text { font-size: 16px; }
  .mobile-menu { top: 56px; }

  /* ── Hero: warm gradient background ── */
  .hero-bg-img { opacity: 0.18; }
  .hero-bg-overlay {
    background: linear-gradient(160deg,
      #07091e 0%,
      #12183a 40%,
      #1a1032 70%,
      #0e0a20 100%);
  }
  .hero { min-height: 100svh; align-items: flex-start; padding-top: 56px; }
  .hero-inner { padding: 18px 14px 32px; width: 100%; gap: 0; }

  /* Hide desktop decorations */
  .cabin-toggle  { display: none !important; }
  .hero-eyebrow  { display: none !important; }
  .hero-title    { display: none !important; }
  .hero-subtitle { display: none !important; }
  .hero-trust    { display: none !important; }

  /* ── Mobile label above form ── */
  .mob-form-label {
    display: block !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; font-weight: 700; font-style: italic;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    padding-left: 4px;
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(201,168,76,0.25);
  }

  /* ── Form card: glass morphism ── */
  .form-card {
    width: 100% !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.97) !important;
    box-shadow:
      0 0 0 1px rgba(201,168,76,0.28),
      0 24px 64px rgba(0,0,0,0.55),
      0 0 0 6px rgba(255,255,255,0.05) !important;
    overflow: hidden;
  }

  /* ── Tabs — pill style ── */
  .form-tabs {
    padding: 8px 8px 0 !important;
    gap: 4px !important;
    background: #0c1128 !important;
  }
  .form-tab {
    font-size: 12px !important; font-weight: 700 !important;
    padding: 11px 10px !important;
    border-radius: 12px 12px 0 0 !important;
    letter-spacing: 0.2px !important;
  }
  .form-tab.active { color: var(--red) !important; }
  .cabin-selector { display: none !important; }

  /* ── Form body ── */
  .form-body { padding: 16px 14px 14px !important; }
  .form-row-main  { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 10px !important; width: 100% !important; }
  .form-row-bottom { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }

  /* ── Cabin class field ── */
  .mob-cabin-field { display: flex !important; flex-direction: column; gap: 5px; width: 100% !important; margin-bottom: 10px; }

  /* ── Field labels ── */
  .field-label {
    font-size: 9px !important; font-weight: 800 !important;
    letter-spacing: 2px !important; text-transform: uppercase;
    color: #9090a8 !important;
    padding-left: 4px !important;
  }

  /* ── All fields full width ── */
  .field, .field-depart, .field-return, .pax-field {
    width: 100% !important; grid-column: unset !important;
    grid-row: unset !important; flex: none !important;
    min-width: 0 !important; max-width: 100% !important;
  }

  /* ── Inputs: slightly taller, softer ── */
  .field input, .field select {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 14px !important;
    border: 1.5px solid #ede9e0 !important;
    background: #faf8f3 !important;
    box-sizing: border-box !important;
    padding-left: 44px !important;
    color: #1a1a2e !important;
  }
  .field input:focus, .field select:focus {
    background: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
  }
  .field input::placeholder { color: #b8b4a8 !important; font-weight: 400 !important; }
  .field input.cal-trigger { background: #faf8f3 !important; color: #1a1a2e !important; }

  /* ── Field icons — gold tint ── */
  .field-icon { font-size: 17px !important; }

  /* ── Swap button — glowing circle ── */
  .swap-btn {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important; align-self: center !important;
    margin: -4px auto !important; transform: rotate(90deg) !important;
    font-size: 17px !important; flex-shrink: 0 !important;
    background: linear-gradient(135deg, #1a1a2e, #2d1f3d) !important;
    border-color: rgba(201,168,76,0.4) !important;
    color: var(--gold2) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 4px rgba(201,168,76,0.08) !important;
    z-index: 2; position: relative;
  }
  .swap-btn::after { content: none !important; }

  /* ── Pax display ── */
  .pax-display {
    width: 100% !important; height: 52px !important;
    font-size: 15px !important; border-radius: 14px !important;
    border: 1.5px solid #ede9e0 !important;
    background: #faf8f3 !important;
    box-sizing: border-box !important;
    padding-left: 44px !important;
  }
  .pax-display:hover, .pax-display.open {
    background: #fff !important;
    border-color: var(--gold) !important;
  }
  .pax-display-text { font-size: 15px !important; font-weight: 500 !important; }
  /* Mobile pax dropdown — full width, opens upward */
  .pax-dropdown {
    left: 0 !important; right: 0 !important;
    min-width: 0 !important;
    z-index: 2000 !important;
    border-radius: 16px !important;
  }
  .pax-row { padding: 13px 18px !important; }
  .pax-btn { width: 38px !important; height: 38px !important; font-size: 20px !important; }

  /* ── Search button — big glowing pill ── */
  .search-btn {
    width: 100% !important;
    height: 58px !important;
    font-size: 16px !important; font-weight: 800 !important;
    border-radius: 16px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 28px rgba(212,52,26,0.45),
                0 2px 8px rgba(212,52,26,0.2),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
    min-width: 0 !important;
  }
  .search-spinner { width: 22px !important; height: 22px !important; }
  .search-btn:hover, .search-btn:active {
    box-shadow: 0 12px 36px rgba(212,52,26,0.55) !important;
    transform: translateY(-2px) !important;
  }
  #searchWrap { width: 100% !important; min-width: 0 !important; }

  /* ── Referral nudge ── */
  .mob-referral-nudge {
    display: flex !important; align-items: center; gap: 10px;
    background: rgba(201,168,76,0.07);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 14px; padding: 11px 16px; margin-top: 14px;
    font-size: 12px; color: var(--gold2); font-weight: 600;
    text-decoration: none; letter-spacing: 0.2px;
  }

  /* ── Floating call bar ── */
  /* Hide float-call on small phones — phone number is in navbar */
  .float-call { display: none !important; }
  body { padding-bottom: 16px; }

  /* ── Form extras hidden ── */
  .form-extras { display: none !important; }

  /* ── Chat — lifted above the float-call bar (bar ≈68px + 20px bottom + 12px gap) ── */
  .chat-widget-fab { bottom: 100px; right: 14px; }
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 172px; }
  .chat-fab-label { display: none; }

  /* ── Section spacing ── */
  .why-section { padding: 48px 16px; }
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .footer { padding: 28px 16px 22px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links { flex-wrap: wrap; gap: 12px; }
      .nav-call-label {
        display: none;
    }
}
/* ═══════════════════════════════════════════
   CABIN CLASS TOGGLE (hero eyebrow)
═══════════════════════════════════════════ */
.cabin-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 4px;
  gap: 3px;
  margin-bottom: 22px;
  animation: fadeUp 0.7s 0.1s both;
}
.cabin-pill {
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--transition);
  white-space: nowrap;
}
.cabin-pill.active-econ {
  background: linear-gradient(135deg,#1e8a3e,#27ae60);
  color: #fff;
  box-shadow: 0 4px 14px rgba(39,174,96,0.35);
}
.cabin-pill.active-biz {
  background: linear-gradient(135deg,var(--gold),var(--gold2));
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(201,168,76,0.35);
}
.cabin-pill.active-first {
  background: linear-gradient(135deg,#8b3dff,#a966ff);
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,61,255,0.35);
}

/* ═══════════════════════════════════════════
   CABIN COMPARISON TABLE
═══════════════════════════════════════════ */
.cabin-compare { position:relative; }
.compare-toggle-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.compare-tab {
  padding: 10px 26px;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all var(--transition);
}
.compare-tab.active { border-color: var(--gold2); color: var(--gold2); background: rgba(201,168,76,0.08); }
.compare-tab:hover:not(.active) { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); }

.cabin-cards-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  align-items: start;
}
.cabin-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--navy3);
  position: relative;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow var(--transition);
}
.cabin-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.cabin-card.featured {
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15), 0 20px 60px rgba(0,0,0,0.4);
  transform: translateY(-8px);
}
.cabin-card.featured:hover { transform: translateY(-14px); }

.cabin-card-badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 4px 12px;
  border-radius: 100px;
}
.badge-econ  { background: linear-gradient(135deg,#1e8a3e,#27ae60); color:#fff; }
.badge-biz   { background: linear-gradient(135deg,var(--gold),var(--gold2)); color:var(--navy); }
.badge-first { background: linear-gradient(135deg,#8b3dff,#a966ff); color:#fff; }
.badge-pop   { background: var(--red); color: #fff; }

.cabin-card-top {
  padding: 32px 28px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cabin-card-icon { font-size: 36px; margin-bottom: 14px; }
.cabin-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 700; color: var(--white);
  margin-bottom: 6px;
}
.cabin-card-sub { font-size: 12px; color: var(--mid); letter-spacing: 0.3px; }
.cabin-card-price {
  margin-top: 18px;
  display: flex; align-items: baseline; gap: 6px;
}
.cabin-card-from { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--mid); }
.cabin-card-amt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1;
}
.cabin-card-pp { font-size: 11px; color: var(--mid); align-self: flex-end; padding-bottom: 4px; }

.cabin-features { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.cabin-feat {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.6);
}
.cabin-feat-icon { font-size: 16px; flex-shrink: 0; }
.cabin-feat strong { color: var(--white); font-weight: 500; }
.cabin-feat.dimmed { opacity: 0.3; }

.cabin-card-cta {
  margin: 0 28px 28px;
  display: block;
  padding: 13px;
  border-radius: 12px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
}
.cta-econ  { background: linear-gradient(135deg,#1e8a3e,#27ae60); color: #fff; box-shadow: 0 4px 18px rgba(39,174,96,0.3); }
.cta-econ:hover  { box-shadow: 0 8px 28px rgba(39,174,96,0.5); transform: translateY(-1px); }
.cta-biz   { background: linear-gradient(135deg,var(--gold),var(--gold2)); color: var(--navy); box-shadow: 0 4px 18px rgba(201,168,76,0.3); }
.cta-biz:hover   { box-shadow: 0 8px 28px rgba(201,168,76,0.5); transform: translateY(-1px); }
.cta-first { background: linear-gradient(135deg,#8b3dff,#a966ff); color: #fff; box-shadow: 0 4px 18px rgba(139,61,255,0.3); }
.cta-first:hover { box-shadow: 0 8px 28px rgba(139,61,255,0.5); transform: translateY(-1px); }

/* ═══════════════════════════════════════════
   REFERRAL PROGRAM
═══════════════════════════════════════════ */
/* ── REFERRAL SECTION — WHITE THEME ── */
.referral-sec {
  background: #ffffff;
  padding: 96px 48px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #f0ebe0;
  border-bottom: 1px solid #f0ebe0;
}

/* Subtle warm dot-grid texture */
.referral-sec::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,168,76,.07) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Soft warm glow bottom-right */
.referral-sec::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 65%);
  bottom: -160px; right: -120px;
  pointer-events: none;
}

.referral-inner {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
  position: relative; z-index: 1;
}

/* ── Steps (left side) ── */
.referral-steps {
  display: flex; flex-direction: column;
  gap: 16px; margin-top: 32px;
}

.ref-step {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fdfaf4;
  border: 1px solid #ede8da;
  border-radius: 16px; padding: 20px 22px;
  transition: border-color var(--transition),
              background var(--transition),
              box-shadow var(--transition);
}
.ref-step:hover {
  border-color: rgba(201,168,76,.45);
  background: #fffdf7;
  box-shadow: 0 8px 28px rgba(201,168,76,.10);
  transform: translateX(4px);
}

.ref-step-num {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}

.ref-step-body {}
/* ── DARK text for white bg ── */
.ref-step-title {
  font-size: 15px; font-weight: 600;
  color: var(--navy); margin-bottom: 4px;
}
.ref-step-text {
  font-size: 13px; font-weight: 300;
  color: #666e88; line-height: 1.68;
}

/* Reward chips row */
.ref-chips-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
}
.ref-chip {
  display: flex; align-items: center; gap: 10px;
  background: #fdfaf4;
  border: 1px solid #ede8da;
  border-radius: 12px; padding: 13px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.ref-chip:hover {
  border-color: rgba(201,168,76,.4);
  box-shadow: 0 4px 16px rgba(201,168,76,.10);
}
.ref-chip-icon { font-size: 20px; }
.ref-chip-label {
  font-size: 10px; color: #888ea8;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 2px;
}
.ref-chip-val {
  font-size: 17px; font-weight: 700;
  color: var(--navy);
}
.ref-chip-val span { color: var(--gold); }

/* ── Visual card (right side) — white card on white bg ── */
.referral-visual {
  background: var(--navy);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 28px;
  padding: 38px 32px;
  position: relative; overflow: hidden;
  text-align: center;
  box-shadow: 0 24px 64px rgba(6,9,26,.12);
}
/* Gold shimmer top */
.referral-visual::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--gold3));
}
/* Inner glow */
.referral-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% -5%,
    rgba(201,168,76,.14), transparent 58%);
  pointer-events: none;
}

.ref-visual-inner { position: relative; z-index: 1; }
.ref-trophy { font-size: 52px; margin-bottom: 14px; display: block; }
.ref-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px; font-weight: 700;
  color: var(--gold2); letter-spacing: -3px; line-height: 1;
  margin-bottom: 4px;
}
.ref-amount-label {
  font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 28px;
}

.ref-code-box {
  background: rgba(255,255,255,.04);
  border: 1.5px dashed rgba(201,168,76,.35);
  border-radius: 12px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.ref-code-box:hover {
  background: rgba(201,168,76,.07);
  border-color: rgba(201,168,76,.6);
}
.ref-code-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(255,255,255,.4); margin-bottom: 4px;
}
.ref-code-val {
  font-family: 'DM Sans', monospace;
  font-size: 20px; font-weight: 700;
  color: var(--white); letter-spacing: 3px;
}
.ref-code-copy {
  font-size: 11px; font-weight: 600;
  color: var(--gold2); letter-spacing: 1px; text-transform: uppercase;
}

.ref-share-row { display: flex; gap: 10px; justify-content: center; }
.ref-share-btn {
  flex: 1; padding: 11px 8px;
  border-radius: 10px;
  border: 1px solid rgba(201,168,76,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer; letter-spacing: .3px;
  transition: all var(--transition);
}
.ref-share-btn:hover {
  background: rgba(201,168,76,.10);
  border-color: rgba(201,168,76,.35);
  color: var(--gold2);
}

.ref-disclaimer {
  font-size: 11px; color: rgba(255,255,255,.22);
  margin-top: 16px; line-height: 1.6;
}
/* Heading + sub overrides for white-bg referral section */
.referral-sec .sec-title.light  { color: var(--navy) !important; }
.referral-sec .sec-eyebrow      { color: var(--red) !important; }
.referral-sec .sec-sub.light    { color: #666e88 !important; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .referral-inner { grid-template-columns: 1fr; gap: 40px; }
  .referral-sec   { padding: 64px 24px; }
  .ref-chips-row  { gap: 10px; }
}
@media (max-width: 560px) {
  .referral-sec  { padding: 52px 18px; }
  .ref-chips-row { flex-direction: column; }
  .ref-chip      { width: 100%; }
}

/* ═══════════════════════════════════════════
   ECONOMY DEALS RIBBON (inside deals section)
═══════════════════════════════════════════ */
.deal-cabin-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 8px;
  border-radius: 4px;
}
.tag-econ  { background: rgba(39,174,96,0.15); color: #4dd179; border: 1px solid rgba(39,174,96,0.25); }
.tag-biz   { background: rgba(201,168,76,0.12); color: var(--gold2); border: 1px solid var(--border); }
.tag-first { background: rgba(139,61,255,0.12); color: #c084fc; border: 1px solid rgba(139,61,255,0.25); }

/* ═══════════════════════════════════════════
   CHAT WIDGET
═══════════════════════════════════════════ */
.chat-widget-fab {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px;
}
.chat-fab-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--navy3),var(--navy4));
  border: 1.5px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 3px rgba(201,168,76,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.chat-fab-btn:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 4px rgba(201,168,76,0.2); }
.chat-fab-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red);
  font-size: 10px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--navy);
  animation: pulseRed 2s infinite;
}
@keyframes pulseRed {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,52,26,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(212,52,26,0); }
}
.chat-fab-label {
  background: rgba(6,9,26,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--gold2);
  white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  transition: all 0.25s ease;
  pointer-events: none;
}
.chat-widget-fab:hover .chat-fab-label { opacity: 1; transform: translateX(0); }

/* Chat panel */
.chat-panel {
  position: fixed;
  bottom: 100px; right: 28px;
  z-index: 299;
  width: 360px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  transform: scale(0.92) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
}
.chat-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.chat-panel-header {
  background: linear-gradient(135deg,var(--navy3),var(--navy4));
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
}
.chat-panel-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg,var(--gold),var(--gold2));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond',serif;
  font-size: 18px; font-weight: 700; color: var(--navy);
  flex-shrink: 0;
  position: relative;
}
.chat-panel-av::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--navy3);
}
.chat-panel-info { flex: 1; }
.chat-panel-name { font-size: 15px; font-weight: 600; color: var(--white); }
.chat-panel-status { font-size: 11px; color: #4ade80; }
.chat-panel-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: var(--mid); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.chat-panel-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.chat-panel-body { padding: 18px 16px; max-height: 300px; overflow-y: auto; }
.chat-panel-body::-webkit-scrollbar { width: 4px; }
.chat-panel-body::-webkit-scrollbar-track { background: transparent; }
.chat-panel-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 2px; }

.cp-msg { margin-bottom: 12px; }
.cp-msg-time { font-size: 9px; color: var(--mid); text-align: center; margin-bottom: 10px; letter-spacing: 0.5px; }
.cp-bubble {
  padding: 11px 14px; border-radius: 16px;
  font-size: 13px; line-height: 1.55; max-width: 85%;
}
.cp-bubble.agent { background: var(--navy4); border: 1px solid var(--border); color: rgba(255,255,255,0.82); border-radius: 16px 16px 16px 4px; }
.cp-bubble.user { background: linear-gradient(135deg,var(--red),var(--red2)); color: #fff; margin-left: auto; border-radius: 16px 16px 4px 16px; }
.cp-quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cp-qr {
  font-size: 12px; font-weight: 500;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 14px;
  color: var(--gold2); cursor: pointer;
  transition: all var(--transition);
}
.cp-qr:hover { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.4); }

.chat-panel-footer { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.chat-panel-input-row {
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 8px 12px;
}
.chat-panel-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: var(--white);
}
.chat-panel-input::placeholder { color: rgba(255,255,255,0.25); }
.chat-panel-send {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,var(--gold),var(--gold2));
  border: none; color: var(--navy);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.chat-panel-send:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(201,168,76,0.35); }
.chat-panel-options {
  display: flex; gap: 14px; margin-top: 10px;
  justify-content: center;
}
.chat-panel-opt {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--mid);
  text-decoration: none; transition: color var(--transition);
}
.chat-panel-opt:hover { color: var(--gold2); }

/* Mobile chat adjustments */
@media (max-width:620px) {
  .chat-widget-fab { bottom: 20px; right: 14px; }
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 90px; }
  .chat-fab-label { display: none; }
}
@media (max-width:768px) {
  .cabin-cards-row { grid-template-columns: 1fr; }
  .cabin-card.featured { transform: none; }
  /* referral responsive handled in section CSS */
}
@media (max-width:480px) {
  .compare-toggle-row { gap: 8px; }
  .compare-tab { padding: 8px 16px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE-FIRST AUDIT FIXES
   — Production-ready, app-like feel on all devices
═══════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL SAFE AREA + SMOOTH SCROLL ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* ── 2. iOS INPUT ZOOM FIX — all inputs ≥ 16px on mobile ── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  .newsletter-input { font-size: 16px !important; }
}

/* ── 3. MINIMUM TOUCH TARGET 44×44px on all interactive elements ── */
@media (max-width: 768px) {
  button, a, [role="button"], label[for] {
    min-height: 44px;
  }
  .nav-hamburger, .chat-widget-fab,
  .float-call, .form-tab {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── 4. SECTION PADDING — comfortable on every screen ── */
@media (max-width: 768px) {
  .sec         { padding: 52px 20px !important; }
  .why-section { padding: 52px 18px !important; }
  .referral-sec { padding: 52px 18px !important; }
  .newsletter-sec { padding: 48px 18px !important; }
  .cta-band-inner { padding: 40px 20px !important; }
  .mega-footer    { padding: 44px 18px 0 !important; }
  /* Accreditation badges — 2-column on mobile */
  .accred-strip-badges { gap: 12px !important; }
  .accred-badge { padding: 10px 14px !important; gap: 10px !important; }
  .accred-badge-seal { width: 36px !important; height: 36px !important; }
  .accred-dot { display: none !important; }
}
@media (max-width: 480px) {
  .sec          { padding: 44px 16px !important; }
  .why-section  { padding: 44px 16px !important; }
  .referral-sec { padding: 44px 16px !important; }
}

/* ── 5. TYPOGRAPHY SCALE — readable on small screens ── */
@media (max-width: 480px) {
  .sec-title, .section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .why-cta-title {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }
  .sec-sub, .section-sub {
    font-size: 14px !important;
  }
  /* Bump tiny labels to 12px minimum on mobile */
  .sec-eyebrow, .section-eyebrow,
  .ref-code-label, .ref-chip-label,
  .why-card-num, .spd-sub,
  .ref-amount-label, .ref-disclaimer,
  .deal-was, .deal-pp, .route-from,
  .route-city, .testi-route,
  .assist-ch-sub, .perk-desc {
    font-size: 12px !important;
  }
}

/* ── 6. WHY SECTION — hide number watermarks on mobile (noise) ── */
@media (max-width: 640px) {
  .why-card::after { display: none; }
  .why-card-num    { display: none; }
  .why-card        { padding: 24px 20px; border-radius: 16px; }
  .why-icon-wrap   { width: 48px; height: 48px; font-size: 22px; margin-bottom: 14px; }
  .why-card-title  { font-size: 18px; }
  .why-card-text   { font-size: 13px; }
  .why-card-list   { display: none; } /* hide bullets — keep cards compact */
  .why-cta-strip   { padding: 28px 20px !important; }
  .why-cta-btns    { flex-direction: column; width: 100%; }
  .why-btn-primary,
  .why-btn-ghost   { justify-content: center; width: 100%; }
}

/* ── 7. REFERRAL SECTION — white bg mobile ── */
@media (max-width: 640px) {
  .referral-steps  { gap: 12px; }
  .ref-step        { padding: 16px 16px; border-radius: 13px; }
  .ref-step-title  { font-size: 14px; }
  .ref-step-text   { font-size: 13px; }
  .ref-chips-row   { flex-direction: column; gap: 10px; }
  .ref-chip        { width: 100%; }
  .referral-visual { border-radius: 22px; padding: 28px 22px; }
  .ref-amount      { font-size: 56px; }
  .ref-share-row   { gap: 8px; }
  .ref-share-btn   { font-size: 12px; padding: 10px 6px; }
}

/* ── 8. STATS STRIP — 2-col on mobile ── */
@media (max-width: 640px) {
  .stats-inner     { flex-wrap: wrap; }
  .stat-item       { flex: 1 1 50%; min-width: 50%; border-right: none !important;
                     border-bottom: 1px solid rgba(201,168,76,.12) !important;
                     padding: 20px 16px !important; text-align: center; }
  .stat-num        { font-size: clamp(32px, 8vw, 44px) !important; }
}
@media (max-width: 380px) {
  .stat-item { flex: 1 1 100%; }
}

/* ── 9. DEALS GRID — single column on small mobile ── */
@media (max-width: 480px) {
  .deals-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .deal-card  { border-radius: 16px; }
  .routes-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .route-price { font-size: 20px !important; }
}
@media (max-width: 360px) {
  .routes-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. CABIN CARDS — single column + hide decorative elements ── */
@media (max-width: 640px) {
  .cabin-grid      { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cabin-card      { border-radius: 18px !important; }
  .cabin-card.featured { transform: none !important; }
  .cabin-card-pp   { display: none; } /* hide "per person" note */
}

/* ── 11. DESTINATIONS GRID — 2-col on tablet, 1-col on small ── */
@media (max-width: 640px) {
  .dest-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dest-card, .dest-card:first-child {
    height: 160px !important; grid-row: auto !important;
    border-radius: 14px !important;
  }
  .dest-city-name { font-size: 14px !important; }
  .dest-country-name { font-size: 11px !important; }
  .dest-price-badge  { font-size: 10px !important; padding: 3px 8px !important; }
}
@media (max-width: 380px) {
  .dest-grid { grid-template-columns: 1fr !important; }
  .dest-card, .dest-card:first-child { height: 150px !important; }
}

/* ── 12. TESTIMONIALS — stack + hide less-critical content ── */
@media (max-width: 640px) {
  .testi-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .testi-cabin    { display: none !important; }
  .testi-route    { display: none !important; }
}

/* ── 13. HOW IT WORKS — stack on mobile ── */
@media (max-width: 640px) {
  .how-grid         { grid-template-columns: 1fr !important; gap: 0 !important; }
  .how-grid::before { display: none !important; }
  .how-step         {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(201,168,76,.1);
    align-items: start;
  }
  .how-step:last-child { border-bottom: none; }
  .how-step-num     { margin: 0 !important; width: 44px; height: 44px; }
  .how-step-body    { text-align: left !important; padding-top: 2px; }
  .how-step h3      { text-align: left !important; font-size: 15px; }
  .how-step p       { text-align: left !important; }
  .how-paths        { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── 14. EXPERIENCE SECTION — hide decorative visual on mobile ── */
@media (max-width: 640px) {
  .exp-layout       { grid-template-columns: 1fr !important; gap: 32px !important; }
  .exp-visual       { display: none !important; } /* hide image on small — saves space */
  .exp-perks        { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ── 15. CTA BAND — stack on mobile ── */
@media (max-width: 640px) {
  .cta-band-inner   { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cta-band-title   { font-size: clamp(22px, 6vw, 30px) !important; }
  .cta-band-actions { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .cta-band-actions a,
  .cta-band-actions button { width: 100% !important; justify-content: center !important; text-align: center !important; }
}

/* ── 16. FOOTER — single column ── */
@media (max-width: 640px) {
  .footer-5col    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  /* Hide secondary footer columns on very small screens */
  .footer-5col > *:not(:first-child):not(:nth-child(2)) { display: none !important; }
}
@media (max-width: 380px) {
  .footer-5col > *:not(:first-child) { display: none !important; }
}

/* ── 17. NEWSLETTER — full-width stacked ── */
@media (max-width: 640px) {
  .newsletter-form  { flex-direction: column !important; gap: 10px !important; }
  .newsletter-input { width: 100% !important; }
  .newsletter-btn   { width: 100% !important; justify-content: center !important; }
}

/* ── 18. CHAT WIDGET — optimized for mobile ── */
@media (max-width: 480px) {
  .chat-panel       { right: 8px !important; left: 8px !important; width: auto !important; max-height: 72vh !important; }
  .chat-panel-body  { max-height: 40vh !important; }
  .chat-bubble      { font-size: 13px !important; }
}

/* Float-call hidden on ≤620px — handled above */

/* ── 20. SECTION HEADERS — centre-align on mobile for cleaner look ── */
@media (max-width: 640px) {
  .sec-head        { text-align: center !important; margin-bottom: 36px !important; }
  .sec-sub         { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
  .why-header      { text-align: center !important; margin-bottom: 36px !important; }
  .section-eyebrow { justify-content: center !important; }
  .section-title   { text-align: center !important; }
  /* But keep why-cta-strip left aligned */
  .why-cta-strip .why-cta-title,
  .why-cta-strip .why-cta-sub { text-align: left !important; }
}

/* ── 21. SCROLLBAR — hidden on mobile (app-like) ── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* ── 22. SMOOTH MOMENTUM SCROLL on iOS ── */
.chat-panel-body,
.deals-grid,
.routes-grid {
  -webkit-overflow-scrolling: touch;
}

/* ── 23. PREVENT TEXT SELECTION on interactive elements ── */
button, .form-tab, .cabin-tab,
.nav-hamburger, .chat-widget-fab,
.ref-code-box, .ref-share-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 24. FOCUS RINGS — visible for accessibility ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── 25. SAFE AREA INSETS (iPhone notch + home bar) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .float-call    { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  /* Chat FAB must clear float-call bar (≈68px) + its bottom offset + gap */
  .chat-widget-fab { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
  body             { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .navbar          { padding-top: env(safe-area-inset-top); }
  .mobile-menu     { padding-bottom: env(safe-area-inset-bottom); }
  /* Disclaimer grid stacks on small screens */
  .disclaimer-grid { grid-template-columns: 1fr !important; }
}

/* ── END AUDIT FIXES ── */
/* ═══════════════════════════════════════════
   RECENT SEARCHES DROPDOWN
═══════════════════════════════════════════ */
.recent-searches {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e8e4dc;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.14);
  z-index: 1800;
  display: none;
  overflow: hidden;
  animation: acFadeIn 0.16s ease;
}
.recent-searches.open { display: block; }
.rs-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #f5f3ee;
}
.rs-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #b0a8c0;
}
.rs-clear-all {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #d4341a; background: none; border: none;
  cursor: pointer; padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.14s;
}
.rs-clear-all:hover { background: rgba(212,52,26,0.07); }
.rs-item {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f8f6f2;
  transition: background 0.12s;
}
.rs-item:last-child { border-bottom: none; }
.rs-item:hover { background: #faf8f3; }
.rs-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(212,52,26,0.08), rgba(212,52,26,0.04));
  border: 1px solid rgba(212,52,26,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.rs-info { flex: 1; min-width: 0; }
.rs-route {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  color: #9090a8; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; color: #b0a8c0;
  flex-shrink: 0;
}
.rs-delete {
  width: 20px; height: 20px;
  background: none; border: none; cursor: pointer;
  color: #ccc; font-size: 14px; line-height: 1;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all 0.14s; flex-shrink: 0;
  padding: 0;
}
.rs-delete:hover { background: rgba(212,52,26,0.1); color: #d4341a; }
.rs-empty {
  padding: 16px 14px; text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: #b0a8c0;
}


.ac-wrap { position: relative; width: 100%; }
.ac-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e8e4dc;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.16);
  z-index: 1900;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: none;
  animation: acFadeIn 0.16s ease;
}
@keyframes acFadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.ac-dropdown.open { display: block; }
.ac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid #f5f3ee;
  transition: background 0.12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.focused {
  background: #faf8f3;
}
.ac-iata {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 800;
  color: #d4341a;
  background: rgba(212,52,26,0.08);
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}
.ac-info { flex: 1; min-width: 0; }
.ac-city {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-city b { color: #d4341a; font-weight: 800; }
.ac-airport {
  font-size: 11px; font-weight: 400;
  color: #9090a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.ac-country {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 500;
  color: #b0a8c0;
  flex-shrink: 0;
}
.ac-empty {
  padding: 18px 16px; text-align: center;
  font-size: 13px; color: #b0a8c0;
}
/* Scrollbar */
.ac-dropdown::-webkit-scrollbar { width: 5px; }
.ac-dropdown::-webkit-scrollbar-track { background: transparent; }
.ac-dropdown::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* Mobile adjustments */
@media (max-width: 620px) {
  .ac-dropdown { border-radius: 12px; max-height: 260px; }
  .ac-item { padding: 9px 12px; gap: 10px; }
  .ac-iata { font-size: 12px; min-width: 36px; }
  .ac-city { font-size: 12px; }
  .ac-airport { font-size: 10px; }
}



/* Trigger inputs */
.field input.cal-trigger,
input.cal-trigger {
  cursor: pointer !important;
  caret-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Backdrop */
/* ── Overlay — transparent, no blur, just closes on click ── */
#calOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1998;
  background: transparent;
  cursor: pointer;
}
#calOverlay.open { display: block; }

/* ── Panel shell — navy theme ── */
#calPanel {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 1999;
  width: 580px;
  background: var(--navy2);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.1),
    0 8px 32px rgba(0,0,0,0.5),
    0 32px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  top: -9999px;
  left: -9999px;
  animation: calSlideIn 0.22s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes calSlideIn {
  from { opacity:0; transform:translateY(-8px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
#calPanel.open { display: flex; }

/* ── Header — deep navy with gold accent line ── */
#calHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 13px;
  background: var(--navy);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  gap: 8px;
  position: relative;
}
#calHeader::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
}

/* ── Nav arrows ── */
#calPrev, #calNext {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.2);
  background: rgba(201,168,76,0.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
#calPrev svg, #calNext svg {
  width: 16px; height: 16px;
  stroke: rgba(255,255,255,0.6);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#calPrev:hover, #calNext:hover {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.5);
  transform: scale(1.1);
}
#calPrev:hover svg, #calNext:hover svg { stroke: #e8c06a; }
#calPrev:disabled { opacity: 0.2; pointer-events: none; }

#calTitles {
  display: flex; flex: 1;
  justify-content: space-around;
  gap: 4px;
}
#calTitles span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; font-weight: 700; font-style: italic;
  color: var(--gold2);
  text-align: center; flex: 1;
  letter-spacing: 0.3px;
}

/* ── Close button ── */
#calClose {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: all 0.15s ease;
}
#calClose:hover {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.4);
}
#calClose svg {
  width: 14px; height: 14px;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

/* ── Calendar body — dark background ── */
#calBody {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: var(--navy2);
}
#calSep {
  background: rgba(201,168,76,0.15);
  margin: 10px 0;
}
#calM0, #calM1 { padding: 10px 16px 14px; }

/* ── Day-of-week labels ── */
.cdow-row {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  margin-bottom: 4px;
  padding: 6px 0 4px;
}
.cdow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(201,168,76,0.45);
  text-align: center;
  padding: 2px 0;
}

/* ── Days grid ── */
.cdays {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
}
.cday {
  aspect-ratio: 1;
  min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.82);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, transform 0.12s;
  position: relative;
}
.cday:not(.cempty):not(.cpast):not(.csel):not(.crange):hover {
  background: rgba(201,168,76,0.14);
  color: var(--gold2);
  transform: scale(1.12);
}
.cempty { cursor: default; pointer-events: none; }
.cpast  { color: rgba(255,255,255,0.18); cursor: not-allowed; pointer-events: none; font-weight: 400; }

/* ── Selected dates — gold ── */
.csel {
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.45) !important;
  border-radius: 50% !important;
  z-index: 2;
  transform: scale(1.05);
}

/* ── Range fill ── */
.crange {
  background: rgba(201,168,76,0.12);
  color: var(--gold2);
  border-radius: 0;
  font-weight: 500;
}
/* Start/end caps with flat connecting sides */
.crs {
  border-radius: 50% 0 0 50% !important;
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.4) !important;
}
.cre {
  border-radius: 0 50% 50% 0 !important;
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.4) !important;
}

/* ── Today indicator ── */
.ctoday:not(.csel):not(.crs):not(.cre) {
  font-weight: 700;
  color: var(--gold2);
}
.ctoday:not(.csel):not(.crs):not(.cre)::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold2);
}

/* ── Footer ── */
#calFoot {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 20px 14px;
  border-top: 1px solid rgba(201,168,76,0.15);
  background: var(--navy);
  gap: 10px;
}
#calInfo {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
#calInfo b { color: var(--gold2); font-weight: 700; }

#calClearBtn {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.3);
  background: none; border: none; cursor: pointer;
  padding: 7px 12px; border-radius: 8px;
  transition: all 0.15s;
  touch-action: manipulation;
  letter-spacing: 0.3px;
}
#calClearBtn:hover {
  background: rgba(201,168,76,0.1);
  color: var(--gold2);
}

#calDoneBtn {
  font-size: 13px; font-weight: 700;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border: none; cursor: pointer;
  padding: 9px 22px; border-radius: 100px;
  transition: all 0.18s;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(201,168,76,0.3);
  touch-action: manipulation;
}
#calDoneBtn:hover {
  background: linear-gradient(135deg, var(--gold2), var(--gold3));
  box-shadow: 0 6px 20px rgba(201,168,76,0.5);
  transform: translateY(-1px);
}
#calDoneBtn:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.2);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 660px) {
  #calPanel {
    position: fixed !important;
    /* Centred small card — NOT full width, NOT bottom sheet */
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    visibility: visible !important;
    width: calc(100vw - 20px) !important;
    max-width: 460px !important;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px !important;
    animation: calPopIn 0.22s cubic-bezier(0.34,1.3,0.64,1) both !important;
  }
  @keyframes calPopIn {
    from { opacity: 0; transform: translate(-50%,-50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  }
  /* ONE month on mobile — the second month was being clipped mid-week */
  #calBody { grid-template-columns: 1fr !important; }
  #calSep, #calM1 { display: none !important; }
  #calTitles #calT1 { display: none !important; }
  #calTitles { justify-content: center !important; }
  #calHeader { padding: 12px 14px 10px !important; }
  #calTitles span { font-size: 16px !important; }
  #calPrev, #calNext { width: 40px !important; height: 40px !important; }
  #calPrev svg, #calNext svg { width: 16px !important; height: 16px !important; }
  #calClose { width: 40px !important; height: 40px !important; }
  #calClose svg { width: 14px !important; height: 14px !important; }
  #calM0 { padding: 8px 12px 14px !important; }
  /* Full-size tap targets now that there is room for them */
  .cdow { font-size: 12px !important; padding: 4px 0 !important; letter-spacing: 0 !important; }
  .cday { min-height: 42px !important; min-width: 0 !important; font-size: 15px !important; }
  .cdays { gap: 2px !important; }
  /* Footer */
  #calFoot { padding: 12px 16px 14px !important; }
  #calInfo { font-size: 13px !important; }
  #calClearBtn { font-size: 13px !important; padding: 10px 14px !important; }
  #calDoneBtn { font-size: 13px !important; padding: 11px 22px !important; }
}
/* Very small phones */
@media (max-width: 380px) {
  #calPanel { width: calc(100vw - 12px) !important; }
  #calM0 { padding: 6px 8px 12px !important; }
  .cday { min-height: 38px !important; font-size: 14px !important; }
  #calTitles span { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════
   LEGAL PROTECTION — content & UI guards
═══════════════════════════════════════════ */
/* Disable text selection on key UI/brand elements */
.navbar, .hero-title, .hero-subtitle, .logo-badge, .logo-text,
.deal-card, .route-card, .sec-title, .mega-footer,
.deal-price, .route-price, .deal-city, .route-code {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Disable image dragging */
img, .deal-img, .dest-img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* Selectable elements (form inputs must remain selectable) */
input, textarea, select, .ac-dropdown, .recent-searches {
  -webkit-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
}

@media print {
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  .navbar,.mobile-menu,.float-call,.chat-widget-fab,
  #calPanel,#calOverlay,.pax-dropdown,.ac-dropdown,
  .recent-searches,.form-card,.hero-trust,.search-btn {display:none!important;}
  body,html{background:#fff!important;}
  .hero{min-height:auto!important;padding:20px 0!important;}
  .sec{padding:32px 24px!important;}
}

/* ── Newsletter section — matches screenshot design ── */
.newsletter-sec {
  background: linear-gradient(160deg, #c4973d 0%, #d4a84c 30%, #e8c060 55%, #d0a040 80%, #b8882e 100%);
  padding: 90px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Subtle noise grain to break flat gold */
.newsletter-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.newsletter-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Badge — thin outlined pill exactly as in screenshot */
.newsletter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(6,9,26,0.35);
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 26px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(6,9,26,0.7);
}
.newsletter-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(6,9,26,0.5);
  display: inline-block;
}

/* Headline — large serif, dark navy, no italic */
.newsletter-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: 18px;
}

/* Subtitle — two lines, slightly muted */
.newsletter-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(6,9,26,0.62);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto 36px;
}

/* Form wrapper — white/translucent pill, full width, generous height */
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 16px;
  padding: 7px 7px 7px 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 680px;
  margin: 0 auto;
}
.newsletter-form:focus-within {
  border-color: rgba(6,9,26,0.4);
  box-shadow: 0 0 0 4px rgba(6,9,26,0.06);
}

/* Email input */
.newsletter-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
  outline: none;
  min-width: 0;
  padding: 6px 0;
}
.newsletter-input::placeholder { color: rgba(6,9,26,0.38); }

/* CTA button — deep navy, gold text, rounded inside the pill */
.newsletter-btn {
  background: var(--navy);
  color: #e8c060;
  border: none;
  border-radius: 11px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 15px 28px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.newsletter-btn:hover {
  background: #0e1530;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(6,9,26,0.28);
}

/* Fine-print note */
.newsletter-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(6,9,26,0.48);
  margin-top: 16px;
  line-height: 1.6;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-note strong { color: rgba(6,9,26,0.65); }

/* Success state */
.nl-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 28px;
  background: rgba(6,9,26,0.1);
  border: 1.5px solid rgba(6,9,26,0.2);
  border-radius: 16px;
  max-width: 480px;
  margin: 0 auto;
  animation: fadeUp 0.4s ease;
}
.nl-success-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #e8c060;
  box-shadow: 0 4px 20px rgba(6,9,26,0.3);
}
.nl-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 700; color: var(--navy);
}
.nl-success-msg {
  font-size: 13px; color: rgba(6,9,26,0.6);
  text-align: center; line-height: 1.65; max-width: 360px;
}

/* Mobile */
@media (max-width: 640px) {
  .newsletter-sec  { padding: 60px 20px; }
  .newsletter-form { flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; }
  .newsletter-input{ padding: 10px 4px; font-size: 16px; }
  .newsletter-btn  { width: 100%; padding: 15px; border-radius: 10px; text-align: center; }
}

.lang-selector { position:relative; flex-shrink:0; }
.lang-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(201,168,76,0.25); border-radius:100px;
  padding:6px 12px 6px 10px; cursor:pointer;
  color:rgba(255,255,255,0.8);
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px;
  transition:all 0.2s ease; white-space:nowrap;
}
.lang-btn:hover { background:rgba(201,168,76,0.12); border-color:rgba(201,168,76,0.5); color:var(--gold2); }
.lang-flag { font-size:15px; line-height:1; }
.lang-code { font-size:11px; font-weight:700; letter-spacing:1px; }
.lang-chevron { width:10px; height:7px; stroke:currentColor; transition:transform 0.2s; }
.lang-selector.open .lang-chevron { transform:rotate(180deg); }
.lang-selector.open .lang-btn { background:rgba(201,168,76,0.14); border-color:rgba(201,168,76,0.55); color:var(--gold2); }
.lang-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:165px; background:var(--navy2);
  border:1px solid rgba(201,168,76,0.22); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.55); overflow:hidden; z-index:500;
  animation:langDrop 0.18s ease both;
}
@keyframes langDrop { from{opacity:0;transform:translateY(-6px) scale(0.97)} to{opacity:1;transform:none} }
.lang-selector.open .lang-dropdown { display:block; }
.lang-option {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500;
  color:rgba(255,255,255,0.65); cursor:pointer;
  transition:all 0.14s; border-bottom:1px solid rgba(255,255,255,0.04);
}
.lang-option:last-child { border-bottom:none; }
.lang-option:hover,.lang-option.active { background:rgba(201,168,76,0.1); color:var(--gold2); padding-left:20px; }
.lang-option.active { font-weight:700; }
[dir="rtl"] .lang-dropdown { right:auto; left:0; }
@media(max-width:768px){ .lang-code{display:none} .lang-btn{padding:6px 8px;gap:4px} }


/*!
 * asaptrips-airports.css  v3.0.0
 * Styles for asaptrips-airports.js
 *
 * COLLISION SAFETY
 *   Every selector is prefixed .asap-  including the state classes
 *   (.asap-open, .asap-focus, .asap-is-metro, .asap-is-child). The host page
 *   already defines a generic .open (.mobile-menu.open, .pax-display.open), so
 *   an unprefixed state class would have been a real hazard.
 *
 *   The host page also applies a global reset:
 *     *, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
 *     * { scrollbar-width: none }
 *   Every rule below therefore sets its own padding explicitly and never relies
 *   on a browser default, and the scrollbar is re-enabled just for the dropdown
 *   so a scrollable list still looks scrollable.
 *
 *   Retheme by overriding the custom properties on .asap-ac-drop — they are all
 *   namespaced --asap-* and do not touch the page's own --gold, --cream, etc.
 */

.asap-ac-drop {
  --asap-bg:         #ffffff;
  --asap-border:     #e2e8f0;
  --asap-radius:     12px;
  --asap-shadow:     0 12px 32px rgba(15, 23, 42, .14);
  --asap-text:       #0f172a;
  --asap-muted:      #64748b;
  --asap-hover:      #eff6ff;
  --asap-metro-bg:   #f8fafc;
  --asap-mark:       #1d4ed8;
  --asap-max-height: 340px;

  position: absolute;
  z-index: 9999;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 260px;
  max-height: var(--asap-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0 0 4px;
  background: var(--asap-bg);
  border: 1px solid var(--asap-border);
  border-radius: var(--asap-radius);
  box-shadow: var(--asap-shadow);
  font-family: inherit;
  text-align: left;
  display: none;
  -webkit-overflow-scrolling: touch;

  /* the page hides all scrollbars globally; put one back here only */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.asap-ac-drop::-webkit-scrollbar { width: 8px; height: 8px; }
.asap-ac-drop::-webkit-scrollbar-track { background: transparent; }
.asap-ac-drop::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.asap-ac-drop.asap-open { display: block; }

.asap-ac-head {
  padding: 10px 14px 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--asap-muted);
  letter-spacing: .01em;
}

.asap-ac-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  margin: 0;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.asap-ac-item:hover,
.asap-ac-item.asap-focus { background: var(--asap-hover); }

.asap-ac-item.asap-is-metro { background: var(--asap-metro-bg); }
.asap-ac-item.asap-is-metro .asap-ac-title { font-weight: 700; }
.asap-ac-item.asap-is-metro:hover,
.asap-ac-item.asap-is-metro.asap-focus { background: var(--asap-hover); }

.asap-ac-item.asap-is-child { padding-left: 34px; }

.asap-ac-glyph {
  flex: 0 0 auto;
  color: var(--asap-muted);
  font-size: 14px;
  line-height: 1.5;
}
.asap-ac-item.asap-is-child .asap-ac-glyph { color: #94a3b8; }

.asap-ac-body { display: block; min-width: 0; }

.asap-ac-title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--asap-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asap-ac-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--asap-muted);
  margin-left: 4px;
}

.asap-ac-sub {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--asap-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* <mark> would otherwise pick up the browser's yellow highlight */
.asap-ac-title mark {
  background: none;
  color: var(--asap-mark);
  font-weight: 700;
  padding: 0;
}

.asap-ac-empty {
  padding: 14px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--asap-muted);
}

@media (max-width: 640px) {
  .asap-ac-drop { --asap-max-height: 58vh; min-width: 0; }
  .asap-ac-item { padding: 12px 14px; }
  .asap-ac-item.asap-is-child { padding-left: 36px; }
}

@media (prefers-color-scheme: dark) {
  .asap-ac-drop {
    --asap-bg:       #0f172a;
    --asap-border:   #1e293b;
    --asap-text:     #e2e8f0;
    --asap-muted:    #94a3b8;
    --asap-hover:    #1e293b;
    --asap-metro-bg: #16202f;
    --asap-mark:     #60a5fa;
    --asap-shadow:   0 12px 32px rgba(0, 0, 0, .5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — MOBILE SEARCH CARD
   Appended after all existing CSS. Scope is deliberately narrow: the search
   card only. Nothing else on the page is touched — not the calendar, not the
   sections, not the footer.

   The page already styles this form at `max-width: 620px`, stacking six boxed
   fields with their own borders. This replaces that with the approved layout:
   one card, hairline divisions, no inner borders.

     ┌─────────────────────┬──────────────────┐
     │ Economy             │ 1 Traveler       │   ← trip options
     ├─────────────────────┴──────────────────┤
     │ LEAVING FROM              [ Delhi, IN ]│   ← geo chip on the label line
     │ ✈  New York (JFK)                  (⇅) │   ← swap straddles the divider
     ├────────────────────────────────────────┤
     │ GOING TO                               │
     │ 📍 London (LHR)                        │
     ├────────────────────┬───────────────────┤
     │ DEPARTURE DATE     │ RETURN DATE       │
     │ Aug 16, 2026       │ Aug 23, 2026      │
     └────────────────────┴───────────────────┘
     [          SEARCH FLIGHTS               ]

   Breakpoint is 899px — wider than the page's 620px, and meeting the desktop
   sheet exactly at 900px so no width falls between them. These rules come later
   in the stylesheet, so they win wherever both apply.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 899px, not 768px. The desktop row needs at least 900px for seven columns, so
   anything narrower gets the card — otherwise 769–899px falls through to the
   page's own styling, which is neither layout. */
@media (max-width: 899px) {

  /* ── the card ───────────────────────────────────────────────────────────*/
  .form-body { padding: 12px 12px 14px !important; }

  /* ── trip options: cabin + travellers as the card's top row ─────────────*/
  .m-optionrow {
    display: flex !important; gap: 0 !important;
    margin: 0 0 0 !important; padding: 0 !important;
    background: linear-gradient(180deg, #ffffff, #fdfcfa) !important;
    border: 1.5px solid #eae4d6 !important; border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 1px 2px rgba(90,72,30,.05) !important;
    position: relative !important;
  }
  .m-optionrow > * {
    flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important;
    padding: 11px 14px !important; position: relative !important;
    width: auto !important;
  }
  .m-optionrow > *:first-child { border-right: 1px solid #f1ede3 !important; }
  .m-optionrow .field-label { display: none !important; }   /* the icon says it */
  .m-optionrow .field-input-wrap {
    margin: 0 !important; background: transparent !important;
    border: 0 !important; padding: 0 !important; min-height: 0 !important;
  }
  .m-optionrow select,
  .m-optionrow .pax-display {
    height: 32px !important; width: 100% !important;
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important;
    padding: 0 0 0 28px !important;
    font-size: 16px !important;              /* 16px keeps iOS from zooming */
    font-weight: 600 !important; color: var(--navy) !important;
  }
  .m-optionrow .pax-display { display: flex !important; align-items: center !important; }
  /* Sizing only — the glyph itself comes from icons-and-motion.css as a mask.
     These rules previously set a font-size, which (at two-class specificity)
     beat the icon sheet's `font-size: 0` and left the emoji showing on mobile
     while desktop had switched to SVG. */
  .m-optionrow .field-icon {
    left: 0 !important; font-size: 0 !important;
    width: 17px !important; height: 17px !important;
    top: 50% !important; margin-top: -8.5px !important;
    transform: none !important;
  }
  .mob-cabin-field { display: flex !important; flex-direction: column !important; }

  /* ── the trip panel completes the same card ─────────────────────────────*/
  .form-row-main {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin: 0 0 12px !important;
    background: linear-gradient(180deg, #fdfcfa, #ffffff 40%) !important;
    border: 1.5px solid #eae4d6 !important;
    border-top: 1px solid #f1ede3 !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 1px 2px rgba(90,72,30,.05),
                0 10px 24px -10px rgba(60,45,15,.18),
                0 28px 56px -28px rgba(30,22,8,.22) !important;
    position: relative !important; overflow: visible !important;
  }

  /* each field is a row in the card, not a box of its own */
  .form-row-main > div {
    padding: 11px 14px 10px !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; min-width: 0 !important;
    width: auto !important; position: relative !important;
    grid-column: auto !important; grid-row: auto !important;
  }
  .form-row-main > div:nth-of-type(1),          /* Leaving From */
  .form-row-main > div:nth-of-type(2) {         /* Going To     */
    grid-column: 1 / -1 !important;
    border-bottom: 1px solid #f1ede3 !important;
    padding-right: 66px !important;             /* clear of the swap control */
  }
  .form-row-main > div:nth-of-type(3) {         /* Departure */
    grid-column: 1 !important;
    border-right: 1px solid #f1ede3 !important;
  }
  .form-row-main > div:nth-of-type(4) { grid-column: 2 !important; }

  /* labels: quiet, fixed height so the swap lands exactly on the divider */
  .form-row-main .field-label {
    display: block !important;
    font-size: 9px !important; font-weight: 700 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    color: #b3aebf !important;
    height: 11px !important; line-height: 11px !important;
    margin: 0 0 4px !important; padding: 0 !important;
  }

  /* inputs are borderless — the card is the frame */
  .form-row-main .field-input-wrap {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; min-height: 0 !important;
  }
  .form-row-main .field-icon {
    font-size: 0 !important; left: 0 !important;
    width: 17px !important; height: 17px !important;
    top: auto !important; bottom: 7px !important;
    margin-top: 0 !important; transform: none !important;
  }
  .form-row-main input,
  .form-row-main input.cal-trigger {
    height: 32px !important; width: 100% !important;
    font-size: 16.5px !important; font-weight: 600 !important;
    color: var(--navy) !important;
    background: transparent !important; border: 0 !important;
    padding: 0 0 0 28px !important; border-radius: 0 !important;
    box-shadow: none !important;
  }
  .form-row-main input:focus,
  .form-row-main input.cal-trigger:focus,
  .form-row-main .field-input-wrap:focus-within {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; outline: 0 !important;
  }
  .form-row-main input::placeholder { color: #c6c1b4 !important; font-weight: 400 !important; }

  /* focus reads on the row, so the card never looks fractured */
  .form-row-main > div:focus-within {
    background: #fdfbf5 !important;
    box-shadow: inset 3px 0 0 var(--gold) !important;
  }

  /* ── swap: centred on the From/To divider ───────────────────────────────
     From row = 11(pad) + 11(label) + 4(gap) + 32(input) + 10(pad) = 68px.
     A 44px control at top:46px centres on 68px exactly. (The test recomputes
     this from the CSS, and caught the 2px drift when the padding changed.)  */
  .form-row-main > .swap-btn {
    position: absolute !important;
    top: 46px !important; right: 12px !important; left: auto !important;
    width: 44px !important; height: 44px !important;
    margin: 0 !important; z-index: 6 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(140deg, #1a2342, #0c1128) !important;
    border: 1.5px solid rgba(201,168,76,.55) !important;
    color: var(--gold2) !important; font-size: 16px !important;
    transform: rotate(90deg) !important;
    box-shadow: 0 0 0 4px #fff,
                0 0 0 5px rgba(201,168,76,.16),
                0 6px 16px rgba(20,15,5,.28) !important;
    transition: transform .34s cubic-bezier(.2,.7,.3,1) !important;
  }
  .form-row-main > .swap-btn:active { transform: rotate(270deg) scale(.93) !important; }
  .swap-btn::after { content: none !important; }

  /* ── geo chip: on the label line, positioned by CSS alone ───────────────
     The page injects it as position:absolute inside .field. With the fields
     stacked it landed on the swap control, so it is pinned here instead —
     absolute, so it adds no height, and clear of the swap by design.        */
  #geo-badge {
    position: absolute !important;
    top: 26px !important; right: 66px !important;
    left: auto !important; bottom: auto !important;
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    margin: 0 !important; padding: 4px 10px !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    line-height: 14px !important; color: #8a8398 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    background: linear-gradient(180deg, #fdfbf5, #f6f3ea) !important;
    border: 1px solid rgba(201,168,76,.30) !important;
    border-radius: 20px !important; box-shadow: none !important;
    animation: none !important; white-space: nowrap !important;
    max-width: 140px !important; overflow: hidden !important;
    text-overflow: ellipsis !important; z-index: 4 !important;
  }
  #geo-badge button { font-size: 11px !important; margin-left: 2px !important; }


  /* ── cabin class: a custom control matching the Traveller panel ──────────
     The page uses a native <select>. The operating system draws that list, and
     no CSS reaches inside it — which is why it looked nothing like the rest of
     the form.

     The native <select> stays in the DOM and stays authoritative: this UI writes
     to it and fires `change`, so the page's own code is untouched. That matters
     here because the MOBILE select has no id — the search reads #cabinSelect,
     the desktop one — so the control writes to both. If the script fails, the
     select is simply left visible and everything still works.                */
  .m-cabin { position: relative !important; width: 100% !important; }

  .m-cabin-display {
    display: flex !important; align-items: center !important;
    height: 32px !important; padding-left: 28px !important;
    font-size: 16px !important; font-weight: 600 !important;
    color: var(--navy) !important; cursor: pointer !important;
    user-select: none !important; position: relative !important;
  }
  .m-cabin-display::after {              /* chevron, matching .pax-display */
    content: '' !important; position: absolute !important;
    right: 2px !important; top: 50% !important; margin-top: -6px !important;
    width: 8px !important; height: 8px !important;
    border-right: 2px solid #b3aebf !important;
    border-bottom: 2px solid #b3aebf !important;
    transform: rotate(45deg) !important;
    transition: transform .22s ease !important;
  }
  .m-cabin.open .m-cabin-display::after {
    transform: rotate(225deg) !important; margin-top: -2px !important;
  }

  .m-cabin-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 12px) !important; left: -14px !important;
    width: min(320px, calc(100vw - 44px)) !important;
    max-height: min(58vh, 460px) !important; overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #ece6d8 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(6,9,26,.06),
                0 20px 48px -12px rgba(6,9,26,.45) !important;
    z-index: 1500 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .m-cabin.open .m-cabin-panel { display: block !important; }

  .m-cabin-head {
    padding: 13px 18px 11px !important;
    border-bottom: 1px solid #f4f1ea !important;
    font-size: 9px !important; font-weight: 800 !important;
    letter-spacing: 1.8px !important; text-transform: uppercase !important;
    color: #b3aebf !important;
  }

  .m-cabin-opt {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; gap: 12px !important;
    width: 100% !important; min-height: 54px !important;
    padding: 12px 18px !important;
    border: 0 !important; border-top: 1px solid #f6f3ec !important;
    background: transparent !important; cursor: pointer !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important; font-weight: 600 !important;
    color: var(--navy) !important; text-align: left !important;
  }
  .m-cabin-opt:first-of-type { border-top: 0 !important; }
  .m-cabin-opt:active { background: #fbf9f4 !important; }
  .m-cabin-opt[aria-selected="true"] { color: #b8892a !important; }
  .m-cabin-opt[aria-selected="true"]::after {
    content: '\2713' !important; font-size: 14px !important;
    font-weight: 700 !important; color: #b8892a !important;
  }
  .m-cabin-opt-sub {
    display: block !important; font-size: 11.5px !important;
    font-weight: 400 !important; color: #a09aae !important; margin-top: 1px !important;
  }

  /* the native select stays in the form, just not drawn */
  .m-cabin-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
  }

  /* ── search button ──────────────────────────────────────────────────────*/
  
  /* pill, with an inner highlight so it reads as a surface not a swatch */
  /* Gold, matching desktop. The action was red here and gold there — the same
     button reading differently at two widths is the clearest sign a design was
     applied twice rather than designed once. */
  .search-btn {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    width: 100% !important; height: 56px !important;
    font-size: 16.5px !important; font-weight: 800 !important;
    letter-spacing: .3px !important; border-radius: 28px !important;
    background: linear-gradient(140deg, #f0c65a 0%, #e0a92f 55%, #d99f22 100%) !important;
    color: #1a1408 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42),
                0 8px 22px -6px rgba(201,150,20,.45),
                0 18px 38px -20px rgba(150,105,10,.5) !important;
  }
  .search-btn .search-label,
  .search-btn .search-icon { color: #1a1408 !important; }


  /* ── PREMIUM FINISH ──────────────────────────────────────────────────────
     Restraint rather than effects. Four things do the work:
       a softer radius carried consistently through every edge,
       a warm off-white gradient so the card reads as paper, not a flat panel,
       a gold seam along the top edge where the card meets the tab bar,
       and a layered warm shadow instead of a single grey drop.               */

  /* a gold seam along the top edge, where the card meets the tabs */
  .m-optionrow::before {
    content: '' !important; position: absolute !important;
    top: -1px !important; left: 18px !important; right: 18px !important;
    height: 1px !important; border-radius: 1px !important;
    background: linear-gradient(90deg,
      transparent, rgba(201,168,76,.55) 30%, rgba(201,168,76,.55) 70%, transparent) !important;
    pointer-events: none !important;
  }

  /* the tab bar's top corners follow the card */
  .form-tabs { border-radius: 22px 22px 0 0 !important; }
  .form-tab { border-radius: 14px 14px 0 0 !important; }

  /* focus tint follows the card's curve at the first and last rows */
  .form-row-main > div:nth-of-type(1):focus-within { border-radius: 0 !important; }
  .form-row-main > div:nth-of-type(3):focus-within { border-radius: 0 0 0 22px !important; }
  .form-row-main > div:nth-of-type(4):focus-within { border-radius: 0 0 22px 0 !important; }
  .m-optionrow > *:first-child:focus-within { border-radius: 22px 0 0 0 !important; }
  .m-optionrow > *:last-child:focus-within  { border-radius: 0 22px 0 0 !important; }

  .search-btn:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                0 4px 14px -6px rgba(212,52,26,.45) !important;
  }


  /* the hero's cabin toggle repeats what the form already asks — removed here
     too, and the hero closes up so the card sits higher */
  .cabin-toggle { display: none !important; }


  /* ── HERO COPY ON MOBILE ─────────────────────────────────────────────────
     The page hides the headline below 620px and shows only a small label, so
     the phone visitor never sees what the business actually is. The headline
     is the one line that says it, so it stays — just sized for the screen.   */
  .hero-title {
    display: block !important; order: 1 !important;
    font-size: 27px !important; line-height: 1.12 !important;
    text-align: center !important;
    margin: 0 8px 8px !important; letter-spacing: -.4px !important;
  }
  .hero-title em { display: block !important; margin-top: 2px !important; }

  /* the small label becomes the line beneath it */
  .mob-form-label {
    display: block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12.5px !important; font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: .3px !important;
    color: rgba(255,255,255,.60) !important;
    text-align: center !important;
    margin: 0 16px 18px !important;
    order: 2 !important;
  }
  /* explicit order, so the sequence does not depend on DOM position alone:
     headline (1), sub-line (2), form (3), recent searches (4),
     accreditations (5), referral (6) — each set on its own rule rather than in
     a block of its own.
     Anything left unnumbered defaults to 0 and jumps to the top.             */

  /* the price line stays hidden — three lines of copy above a form is more
     than a phone screen can give before the fold */
  .hero-subtitle { display: none !important; }

  /* The USP chips that used to sit here are replaced by the accreditation
     block in recent-strip.css — memberships that can be checked, rather than
     offers. .hero-trust is hidden there.                                     */

  /* ── the action row ─────────────────────────────────────────────────────
     With passengers paired into the card's top row, this holds only the search
     button. It is forced to a single full-width column so the button can never
     land in a leftover grid cell — the half-width, left-hugging button in the
     reported screenshot was exactly that.                                    */
  .form-row-bottom {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .form-row-bottom > * {
    width: 100% !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* ── close the gap under the card ───────────────────────────────────────
     The hero reserves desktop-height space beneath the form, which reads as a
     band of empty navy under the button on a phone.                          */
  .form-card { margin-bottom: 0 !important; order: 3 !important; }
  .hero-inner {
    display: flex !important; flex-direction: column !important;
    padding-top: 14px !important; padding-bottom: 18px !important;
  }
  .mob-referral-nudge { margin: 14px 0 0 !important; order: 6 !important; }

  /* ── mobile polish ──────────────────────────────────────────────────────*/
  /* the helper lines and cabin pills belong to desktop only */
  .field-hint, .m-cabinpills { display: none !important; }

  /* ── the airport dropdown must span the card, not the inner wrap ────────
     .field-input-wrap is position:relative, so it is the containing block. It
     sits inside the field's 14px left / 66px right padding — these offsets are
     exactly that padding, so the list aligns with the card edges.            */
  .form-row-main .ac-dropdown,
  .form-row-main .asap-ac-drop {
    left: -14px !important; right: -66px !important;
    width: auto !important; min-width: 0 !important;
    top: calc(100% + 10px) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(6,9,26,.06),
                0 20px 48px -12px rgba(6,9,26,.45) !important;
    z-index: 1200 !important;
  }
  .form-row-main .ac-item,
  .form-row-main .asap-ac-item { padding: 12px 16px !important; min-height: 54px !important; }

  /* the recent-searches panel spans the card, like the results list */
  .form-row-main .recent-searches {
    left: -14px !important; right: -66px !important;
    width: auto !important; min-width: 0 !important;
    top: calc(100% + 10px) !important;
    max-height: min(58vh, 400px) !important; overflow-y: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(6,9,26,.06),
                0 20px 48px -12px rgba(6,9,26,.45) !important;
    z-index: 1250 !important;
  }
  .rs-item { padding: 12px 16px !important; min-height: 54px !important; }

  /* ── passenger panel: the page opens it upward, which was right when the
        trigger sat at the bottom of the form. It is the top row now, so it
        opens downward. Styled in place — not relocated. ────────────────────*/
  /* ── passenger panel ─────────────────────────────────────────────────────
     The page opens it upward (`bottom: calc(100% + 10px)`), which was right
     when the trigger sat at the bottom of the form. It is the card's top row
     now, so it opens downward.

     Its rows are ~88px tall by default, which pushed the Done button past the
     panel's own height and clipped it. Every part is given an explicit height
     here so the total is known rather than emergent:

         header 38 + rows 3 x 58 + Done block 70  =  282px

     That sits well inside the cap, so nothing can be cut off.               */
  .m-optionrow .pax-dropdown {
    top: calc(100% + 10px) !important; bottom: auto !important;
    left: auto !important; right: -14px !important;
    width: min(320px, calc(100vw - 44px)) !important;
    min-width: 0 !important;
    max-height: min(74vh, 520px) !important;
    overflow-y: auto !important; z-index: 1500 !important;
    padding: 0 0 2px !important;
    border-radius: 20px !important;
    border: 1px solid #ece6d8 !important;
    box-shadow: 0 0 0 1px rgba(6,9,26,.06),
                0 20px 48px -12px rgba(6,9,26,.45) !important;
  }
  .pax-dropdown .pax-dropdown-header {
    padding: 12px 16px 10px !important;
    background: #fff !important;
    border-bottom: 1px solid #f4f1ea !important;
  }
  .pax-dropdown .pax-dropdown-title {
    font-size: 9px !important; font-weight: 800 !important;
    letter-spacing: 1.8px !important; text-transform: uppercase !important;
    color: #b3aebf !important;
  }
  .pax-dropdown .pax-row {
    padding: 10px 16px !important; min-height: 58px !important;
    border-bottom: 0 !important;
    border-top: 1px solid #f6f3ec !important;
  }
  .pax-dropdown .pax-row:first-of-type { border-top: 0 !important; }
  .pax-dropdown .pax-row-label { font-size: 15px !important; font-weight: 600 !important; }
  .pax-dropdown .pax-row-sub { font-size: 11.5px !important; color: #a09aae !important; }
  .pax-dropdown .pax-btn {
    width: 36px !important; height: 36px !important; font-size: 18px !important;
  }
  .pax-dropdown .pax-count {
    min-width: 28px !important; text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }
  /* Done: explicit height, and margin that keeps it clear of the panel edge */
  .pax-dropdown .pax-done {
    width: calc(100% - 32px) !important;
    margin: 10px 16px 14px !important;
    height: 46px !important; padding: 0 !important;
    border-radius: 13px !important;
    font-size: 15px !important; font-weight: 700 !important;
  }
}

@media (max-width: 380px) {
  .form-row-main input { font-size: 16px !important; }
  #geo-badge { max-width: 112px !important; right: 62px !important; }

  /* ── reduced motion ─────────────────────────────────────────────────────
     This sheet animates the swap control, the field focus tint and the search
     button. All of it is optional. */
  @media (prefers-reduced-motion: reduce) {
    .form-row-main > .swap-btn,
    .form-row-main > .swap-btn:active,
    .search-btn, .search-btn:active { transition: none !important; }
    .form-row-main > .swap-btn:active { transform: rotate(90deg) !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BACKGROUND — every width
   Outside any media query. The photograph, the wash and the pools should look
   the same on a phone as on a desktop; keeping them in the desktop block meant
   the premium treatment simply stopped below 900px.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-bg-img {
  display: block !important;
  opacity: .92 !important;
  filter: saturate(1.05) contrast(1.03) !important;
  background-position: center 32% !important;
}

.hero-bg-overlay {
  background:
    /* keeps the headline readable without dimming the whole frame */
    radial-gradient(ellipse 62% 40% at 50% 30%, rgba(6,10,24,.58), transparent 72%),
    /* the gold pool the card sits in front of, echoing the sun */
    radial-gradient(ellipse 76% 46% at 50% 84%, rgba(201,168,76,.22), transparent 66%),
    /* corners settled so the sky does not blow out at the edges */
    radial-gradient(ellipse 60% 60% at 6% 4%, rgba(9,13,30,.55), transparent 70%),
    radial-gradient(ellipse 60% 60% at 94% 6%, rgba(9,13,30,.50), transparent 70%),
    linear-gradient(180deg,
      rgba(9,13,28,.52) 0%,
      rgba(11,16,34,.20) 30%,
      rgba(9,13,28,.34) 66%,
      rgba(8,11,24,.90) 100%) !important;
}

/* No route arcs. They cut across the frame and passed over the search card,
   which is the one thing that must sit cleanly on its own. The photograph
   already supplies the horizon; a drawn line over it was decoration
   competing with the form.                                                 */

.hero-bg::after { opacity: .45 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — DESKTOP HERO, rebuilt to the supplied reference
   Scoped to min-width: 900px. The mobile card is untouched.

   Five changes from what the page has, all read off the screenshot:
     1. ONE ROW — passengers and the button join the itinerary
     2. cabin becomes four PILLS, top right, instead of a dropdown
     3. every field gains a HELPER LINE beneath its value
     4. the action is GOLD, not red
     5. the hero drops the photograph for flat navy

   The grid is declared once with plain fractional columns. No negative margins,
   no absolute positioning, no magic offsets — that was the failure mode last
   time. Every element stays in a column of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── 1. BACKGROUND — the photograph, lit ────────────────────────────────
     The wing-and-sunset shot is the page's own image and it carries the whole
     mood, so it leads. I had hidden it while trying a drawn background; that
     was the wrong call — a real horizon does something no gradient can.

     The wash is now light enough for the sky, the sun rays and the wing to
     read, with two exceptions: a soft pool behind the headline so the copy
     keeps its contrast, and a deeper foot so the trust bar stays legible.
     The route arcs stay, faint, as an accent over the sky rather than a
     substitute for it.                                                       */
  /* the hero background now lives outside this block — it applies at every
     width, so the treatment does not stop at 900px */


  /* The cabin toggle above the headline repeated the choice the form already
     offers, in a different visual language. Removed; the form's pill row is the
     single place cabin is chosen. */
  .cabin-toggle { display: none !important; }
  .hero-inner { padding-top: 34px !important; }
  .hero-title { margin-bottom: 14px !important; }

  .hero-subtitle {
    max-width: 720px !important;
    margin: 0 auto 30px !important;
    line-height: 1.7 !important;
  }

  /* ── 2. the card ────────────────────────────────────────────────────────*/
  .form-card {
    max-width: 1180px !important;
    margin-left: auto !important; margin-right: auto !important;
    background: #ffffff !important;
    border-radius: 28px !important;
    border: 0 !important;
    box-shadow: 0 30px 70px -24px rgba(4,8,20,.60),
                0 80px 140px -70px rgba(4,8,20,.70) !important;
    overflow: visible !important;
  }
  .form-body { padding: 0 26px 22px !important; }

  /* ── 3. top row: trip type left, cabin pills right ──────────────────────*/
  .form-tabs {
    background: transparent !important;
    border-radius: 28px 28px 0 0 !important;
    padding: 20px 26px 16px !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .form-tab {
    flex: 0 0 auto !important;
    border-radius: 100px !important;
    padding: 11px 22px !important;
    font-size: 14px !important; font-weight: 700 !important;
    color: #6b7280 !important; background: transparent !important;
    transition: background .2s ease, color .2s ease !important;
  }
  .form-tab:hover { color: var(--navy) !important; background: #f5f3ee !important; }
  /* the navy pill is set once, in brand-red-and-nav.css, so it is identical
     at every width */

  .cabin-selector {
    margin-left: auto !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  .cabin-select { display: none !important; }   /* kept in the form, not drawn */

  .m-cabinpills { display: flex !important; gap: 8px !important; }
  .m-cabinpill {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    padding: 10px 18px !important;
    border-radius: 100px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    color: #6b7280 !important;
    background: #ffffff !important;
    border: 1.5px solid #e6e2d8 !important;
    cursor: pointer !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease !important;
  }
  .m-cabinpill:hover { border-color: #d6cfbc !important; color: var(--navy) !important; }
  /* filled, as the hero pill was — the chosen cabin should read at a glance */
  .m-cabinpill.active {
    background: linear-gradient(135deg, var(--gold2), var(--gold)) !important;
    border-color: var(--gold) !important;
    color: #1a1408 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(201,168,76,.35) !important;
  }

  /* a masked glyph per cabin, in the same family as the field icons */
  .m-cabinpill::before {
    content: '' !important;
    width: 15px !important; height: 15px !important; flex: 0 0 15px !important;
    background: currentColor !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
  }
  /* plane */
  .m-cabinpill:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.12 2.12 0 0 0-3-3L13 8 4.8 6.2a1 1 0 0 0-.9 1.7l4.6 3.4-2.3 2.3-2.4-.6a1 1 0 0 0-.9 1.7l2.6 2 2 2.6a1 1 0 0 0 1.7-.9l-.6-2.4 2.3-2.3 3.4 4.6a1 1 0 0 0 1.7-.9Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.12 2.12 0 0 0-3-3L13 8 4.8 6.2a1 1 0 0 0-.9 1.7l4.6 3.4-2.3 2.3-2.4-.6a1 1 0 0 0-.9 1.7l2.6 2 2 2.6a1 1 0 0 0 1.7-.9l-.6-2.4 2.3-2.3 3.4 4.6a1 1 0 0 0 1.7-.9Z'/%3E%3C/svg%3E");
  }
  /* star — premium */
  .m-cabinpill:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.2l5.9-.9Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.2l5.9-.9Z'/%3E%3C/svg%3E");
  }
  /* briefcase — business */
  .m-cabinpill:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3C/svg%3E");
  }
  /* crown — first */
  .m-cabinpill:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20l-1.5-9-5 4L12 5 8.5 13l-5-4Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20l-1.5-9-5 4L12 5 8.5 13l-5-4Z'/%3E%3C/svg%3E");
  }

  /* ── 4. one row: itinerary, passengers and the action ───────────────────*/
  .form-row-main {
    grid-template-columns:
      minmax(0,1.05fr) 40px minmax(0,1.05fr)
      minmax(0,1.02fr) minmax(0,1.02fr) minmax(0,.92fr)
      minmax(140px,172px) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }
  /* Grid children default to `min-width: auto`, so they refuse to shrink below
     their content — the hint lines ("Cheapest days highlighted") pushed the row
     wider than the card and the button spilled past its right edge. */
  .form-row-main > * { min-width: 0 !important; }

  .form-row-main > .field,
  .form-row-main > .pax-field {
    background: #f5f3ee !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    padding: 12px 14px 11px !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  .form-row-main > .field:hover,
  .form-row-main > .pax-field:hover { background: #f1eee7 !important; }
  .form-row-main > .field:focus-within,
  .form-row-main > .pax-field:focus-within {
    background: #ffffff !important;
    border-color: var(--gold) !important;
  }

  .form-row-main .field-label {
    font-size: 9.5px !important; font-weight: 700 !important;
    letter-spacing: 1.8px !important; text-transform: uppercase !important;
    color: #9ca3af !important; margin: 0 0 5px !important;
  }
  .form-row-main .field-input-wrap {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; min-height: 0 !important; box-shadow: none !important;
  }
  .form-row-main .field-icon { display: none !important; }
  .form-row-main input,
  .form-row-main input.cal-trigger,
  .form-row-main .pax-display {
    height: 26px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    font-size: 16.5px !important; font-weight: 700 !important;
    color: var(--navy) !important; letter-spacing: -.2px !important;
    text-overflow: ellipsis !important;
  }
  .form-row-main input:focus,
  .form-row-main input.cal-trigger:focus {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; outline: 0 !important;
  }
  .form-row-main input::placeholder { color: #b6bcc6 !important; font-weight: 600 !important; }

  /* the geo chip sits on the label line inside the From cell, so it neither
     adds height nor breaks out of the row */
  .form-row-main > .field:first-child { position: relative !important; }
  /* The chip sat at the top-right and covered "LEAVING FROM". It belongs on the
     hint line — same place, same size as the helper text it stands in for. */
  #geo-badge {
    position: absolute !important;
    left: 13px !important; bottom: 9px !important; top: auto !important; right: auto !important;
    margin: 0 !important; padding: 3px 8px !important;
    font-size: 10px !important; font-weight: 600 !important;
    line-height: 13px !important; color: #8a8398 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    background: #ffffff !important; border: 1px solid #e6e2d8 !important;
    border-radius: 20px !important; box-shadow: none !important;
    animation: none !important; white-space: nowrap !important;
    max-width: calc(100% - 26px) !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
  }
  /* where a chip is present it replaces the helper line beneath it */
  .form-row-main > .field:has(#geo-badge) .field-hint { visibility: hidden !important; }

  .field-hint {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important; font-weight: 400 !important;
    color: #9ca3af !important; margin-top: 4px !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .form-row-main > .swap-btn {
    align-self: center !important; justify-self: center !important;
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #e6e2d8 !important;
    color: #6b7280 !important; font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(12,17,40,.10) !important;
    transition: transform .38s cubic-bezier(.2,.7,.3,1),
                border-color .2s ease, color .2s ease !important;
  }
  .form-row-main > .swap-btn:hover {
    transform: rotate(180deg) !important;
    border-color: var(--gold) !important; color: #8a6d1f !important;
  }
  .swap-btn::after { content: none !important; }

  /* ── 5. the action, in gold ─────────────────────────────────────────────*/
  /* the action sits in the row like any other cell — same height, same radius,
     no halo. It reads as part of the rail, not a badge stuck on the end. */
  .search-btn {
    height: auto !important; align-self: stretch !important;
    width: 100% !important;
    border-radius: 16px !important;
    background: linear-gradient(140deg, #f0c65a 0%, #e0a92f 55%, #d99f22 100%) !important;
    color: #1a1408 !important;
    font-size: 15px !important; font-weight: 800 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
    transition: filter .2s ease !important;
  }
  .search-btn:hover { filter: brightness(1.05) !important; }
  .search-btn .search-label { color: #1a1408 !important; }

  .form-row-bottom { display: none !important; }

  /* ── 6. promo and trust ─────────────────────────────────────────────────*/
  .form-extras {
    margin-top: 18px !important; padding-top: 18px !important;
    border-top: 1px solid #eeeae0 !important;
    align-items: center !important;
  }
  .promo-input {
    height: 44px !important; border-radius: 12px !important;
    background: #ffffff !important; border: 1.5px solid #e6e2d8 !important;
    padding: 0 16px !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    letter-spacing: 1.6px !important; text-transform: uppercase !important;
    transition: border-color .2s ease !important;
  }
  .promo-input::placeholder { letter-spacing: 1.6px !important; color: #b6bcc6 !important; }
  .promo-input:focus { border-color: var(--gold) !important; outline: 0 !important; }
  .promo-apply {
    height: 44px !important; border-radius: 12px !important;
    padding: 0 26px !important;
    background: linear-gradient(140deg, #172046, #0c1128) !important;
    color: #ffffff !important; border: 0 !important;
    font-size: 14px !important; font-weight: 700 !important;
  }
  .form-badge { font-size: 13px !important; color: #6b7280 !important; }

  /* The results list inherited the width of its cell — roughly 160px, which
     truncated every city, code and country to an initial. It breaks out to a
     readable width instead; it is absolutely positioned, so overflowing the
     cell costs nothing. */
  /* The recent-searches panel is `left:0; right:0` inside .ac-wrap, which is a
     narrow grid cell — so it opened about 160px wide and was unusable. Same
     break-out as the airport list. */
  .ac-dropdown, .asap-ac-drop {
    min-width: 340px !important; width: max-content !important;
    max-width: 420px !important;
    left: 0 !important; right: auto !important;
    border-radius: 16px !important;
    border: 1px solid #e6e2d8 !important;
    box-shadow: 0 20px 48px -14px rgba(12,17,40,.42) !important;
    z-index: 1200 !important;
  }
  .pax-dropdown {
    border-radius: 16px !important;
    border: 1px solid #e6e2d8 !important;
    box-shadow: 0 20px 48px -14px rgba(12,17,40,.42) !important;
  }
  .ac-item, .asap-ac-item { padding: 11px 18px !important; }

  /* The recent-searches panel is a different component from the results list —
     a white dropdown with a header and stacked rows. I had swept it into the
     rule above, which gave it `width: max-content`: as wide as its widest row,
     which for a route like "New York (JFK) → London (LHR)" ran off the card.
     It gets its own width, wide enough to read a route on one line. */
  .recent-searches {
    left: 0 !important; right: auto !important;
    width: 380px !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    max-height: min(60vh, 420px) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    border: 1px solid #e6e2d8 !important;
    box-shadow: 0 20px 48px -14px rgba(12,17,40,.42) !important;
    z-index: 1250 !important;
  }
  .rs-item { padding: 11px 16px !important; min-height: 54px !important; }
  /* the To field's list opens leftward so it cannot run off the card */
  .form-row-main > .field:nth-of-type(3) .asap-ac-drop,
  .form-row-main > .field:nth-of-type(3) .ac-dropdown {
    left: auto !important; right: 0 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .swap-btn:hover { transform: none !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — ICONS AND MOTION
   Outside any media query: icons and button behaviour should be identical at
   every width. Only the sizes differ, at the foot of this file.

   ICONS
   The form used emoji — 🎫 ✈ 📍 📅 — which each platform draws differently:
   different weights, different colours, different baselines, and always a
   little cartoonish beside Cormorant Garamond. These are stroked SVGs applied
   as CSS masks, so they take a single tint (the brand gold), sit on the text
   baseline, and stay crisp on any display.

   Passengers had no icon at all; it has one now, so every field reads the same.

   MOTION
   Buttons announce themselves rather than sitting inert: a slow sheen crosses
   the search button, the gold deepens on hover, and every control gives press
   feedback. All of it is suppressed under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the mask scaffold ──────────────────────────────────────────────────── */
.field-icon {
  display: inline-block;
  width: 18px; height: 18px;
  font-size: 0 !important;            /* hides the emoji character underneath */
  position: absolute;
  top: 50%; margin-top: -9px;
  pointer-events: none;
}
.field-icon::before {
  content: '';
  position: absolute; inset: 0;
  /* NO background here. The colour is applied by each icon rule below, so a
     .field-icon with no matching mask stays invisible instead of painting a
     solid gold rectangle — which is what appeared beside the travellers icon. */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;     mask-position: center;
  -webkit-mask-size: contain;        mask-size: contain;
  transition: background .2s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}

/* plane taking off — Leaving From.
   From and To carry no modifier class, only `.field`, so they are addressed by
   position. The swap control is a <button>, so among the row's DIVs these are
   reliably 1 and 2. */
.form-row-main > div:nth-of-type(1) .field-icon::before {
  background: var(--gold);
  /* A simple plane silhouette. The "take-off" glyph has a runway line and a
     tilted fuselage that turn to mush at 17px — this reads at any size. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.12 2.12 0 0 0-3-3L13 8 4.8 6.2a1 1 0 0 0-.9 1.7l4.6 3.4-2.3 2.3-2.4-.6a1 1 0 0 0-.9 1.7l2.6 2 2 2.6a1 1 0 0 0 1.7-.9l-.6-2.4 2.3-2.3 3.4 4.6a1 1 0 0 0 1.7-.9Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.12 2.12 0 0 0-3-3L13 8 4.8 6.2a1 1 0 0 0-.9 1.7l4.6 3.4-2.3 2.3-2.4-.6a1 1 0 0 0-.9 1.7l2.6 2 2 2.6a1 1 0 0 0 1.7-.9l-.6-2.4 2.3-2.3 3.4 4.6a1 1 0 0 0 1.7-.9Z'/%3E%3C/svg%3E");
}
/* map pin — Going To */
.form-row-main > div:nth-of-type(2) .field-icon::before {
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* calendar — both date fields */
.field-depart .field-icon::before,
.field-return .field-icon::before {
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}
/* ticket — cabin */
.mob-cabin-field .field-icon::before,
.cabin-selector .field-icon::before {
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v14'/%3E%3C/svg%3E");
}
/* travellers — the field DID have an icon span (a 🧑 emoji), so this masks that
   span like every other field rather than adding a second glyph of its own. */
.pax-field .field-icon::before {
  background: var(--gold);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* the icon warms and lifts a little when its field is active */
.field:focus-within .field-icon::before,
.pax-field:focus-within .field-icon::before {
  background: var(--gold2);
  transform: translateY(-1px) scale(1.04);
}

/* browsers without mask support keep the emoji rather than showing nothing */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .field-icon { font-size: 16px !important; }
  .field-icon::before { content: none; }
}

/* ── MOTION ───────────────────────────────────────────────────────────────
   A single slow sheen crossing the search button is enough to draw the eye
   without the page feeling busy.                                            */
@keyframes asapSheen {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  55%  { transform: translateX(240%)  skewX(-18deg); }
  100% { transform: translateX(240%)  skewX(-18deg); }
}
@keyframes asapBreathe {
  0%, 100% { box-shadow: 0 6px 20px -6px rgba(212,52,26,.45); }
  50%      { box-shadow: 0 10px 30px -6px rgba(212,52,26,.70); }
}

/* the sheen needs a positioned, clipping box; the breathe draws the eye */
.search-btn {
  position: relative; overflow: hidden;
  animation: asapBreathe 3.6s ease-in-out infinite;
}
.search-btn::after {
  content: '';
  position: absolute; top: -60%; left: 0;
  width: 45%; height: 220%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.42), transparent);
  animation: asapSheen 4.2s ease-in-out infinite;
  animation-delay: 1.4s;
  pointer-events: none;
}
.search-btn:hover { animation-play-state: paused; }
.search-btn:active { transform: scale(.985); }

/* every control gives press feedback */
.swap-btn:active,
.promo-apply:active,
.m-cabinpill:active,
.pax-btn:active { transform: scale(.94); }
.swap-btn, .promo-apply, .m-cabinpill, .pax-btn {
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              border-color .2s ease, background .2s ease, color .2s ease;
}

.promo-apply { position: relative; overflow: hidden; }
.promo-apply::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(232,192,106,.22), transparent);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.promo-apply:hover::after { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .search-btn, .search-btn::after { animation: none !important; }
  .promo-apply::after { transition: none !important; }
  .swap-btn:active, .promo-apply:active,
  .m-cabinpill:active, .pax-btn:active,
  .search-btn:active { transform: none !important; }
  .field:focus-within .field-icon::before,
  .pax-field:focus-within .field-icon::before { transform: none !important; }
}

/* ── sizes per breakpoint ─────────────────────────────────────────────────*/
@media (min-width: 900px) {
  .form-row-main .field-icon { display: inline-block !important; left: 0 !important; }
  .form-row-main input,
  .form-row-main input.cal-trigger { padding-left: 26px !important; }
  .form-row-main .pax-display { padding-left: 26px !important; }
  .field-icon { width: 17px; height: 17px; margin-top: -8.5px; }
}
@media (max-width: 899px) {
  .field-icon { width: 17px; height: 17px; margin-top: -8.5px; }
  /* match the mobile sheet's specificity so the mask box is sized there too */
  .form-row-main .field-icon::before,
  .m-optionrow .field-icon::before,
  .pax-field .field-icon::before { inset: 0 !important; }
  .m-optionrow .pax-display,
  .m-optionrow select { padding-left: 26px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — THE THIRD COLOUR, AND THE NAVBAR
   Outside any media query except where sizes differ, so both apply at every
   width.

   THE LOGO IS RED, WHITE AND GOLD. The page had been using only two of them:
   navy structure and gold action. Red appeared once, in the logo badge, and
   nowhere else — which reads as an orphan rather than a brand colour.

   Red is given one job: THE CURRENT STATE. Gold keeps the action, navy keeps
   the structure. Three colours, three meanings, no overlap — the moment red
   also means "click me" it competes with the gold button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the selected trip type ───────────────────────────────────────────────
   A dark navy pill with white type, as in the approved design. I tried red two
   ways and both were worse: filled, it read as a second action button and
   competed with the gold Search; as red type on a light pill it cleared AA by
   only 4.88:1 and looked washed beside the navy tabs.

   So red stays where the logo puts it — the badge — and the form keeps two
   colours: navy for state, gold for action. Bold and 15px carried over from the
   red attempt, because the selected tab genuinely was too quiet before.      */
.form-tab.active {
  background: linear-gradient(140deg, #172046, #0c1128) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .2px !important;
  box-shadow: 0 4px 14px rgba(12,17,40,.30) !important;
}
.form-tab.active::after { display: none !important; }

/* ── the navbar ───────────────────────────────────────────────────────────
   A hairline that fades at both ends rather than a hard rule, links that
   underline from the centre out, and a call button that reads as the most
   important thing in the bar without shouting.                             */
.navbar {
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 0 !important;
  position: relative;
}
.navbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,.42) 22%, rgba(201,168,76,.42) 78%, transparent);
  pointer-events: none;
}

.nav-links a {
  position: relative;
  transition: color .2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 2px;
  /* scaleX from the centre, not left/right offsets. Animating left and right
     forces a layout pass on every frame; a transform is composited. Same
     effect, none of the cost. */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover::after,
.nav-links a.nav-active::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--gold2) !important; }

/* the logo badge is where the red lives — give it a little presence */
.logo-badge {
  box-shadow: 0 2px 8px rgba(212,52,26,.35);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav-logo:hover .logo-badge { transform: translateY(-1px); }

/* the call button: the one gold object in the bar */


@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none !important; }
  .nav-links a.nav-active::after { transform: scaleX(1) !important; }
  .nav-logo:hover .logo-badge { transform: none !important; }
}

/* ── small screens ────────────────────────────────────────────────────────*/
@media (max-width: 899px) {
  /* the bar carries only the logo, the call and the menu, so give them room */
  .navbar { padding-left: 12px !important; padding-right: 12px !important; }
  .lang-selector { transform: scale(.92); transform-origin: center; }

  /* the mobile menu inherits the same underline language */
  /* transitions only the two properties that actually change on :active —
     `color` was listed but never set here, which is dead CSS */
  .mobile-menu a {
    border-left: 2px solid transparent !important;
    transition: border-left-color .2s ease, background .2s ease !important;
  }
  .mobile-menu a:active {
    border-left-color: var(--gold) !important;
    background: rgba(201,168,76,.08) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — RECENT SEARCHES AS A STRIP
   Outside any media query: it should look the same at every width, only the
   card size changes.

   The page renders this as an absolutely-positioned dropdown under "Leaving
   From", shown on focus. Below the form it is a different thing: always there,
   a row of cards you swipe through. `.rs-below` is added by script once the
   panel has been moved, so the original dropdown styling still applies if the
   move never happens.
   ═══════════════════════════════════════════════════════════════════════════ */

.recent-searches.rs-below {
  display: block !important;          /* no longer gated on .open */
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: auto !important;
  /* .hero-inner is a flex column on mobile with explicit `order` values. An
     element without one defaults to `order: 0`, which sorts BEFORE everything
     numbered — which is why the strip appeared above the headline instead of
     below the form. It takes the slot after the card. */
  order: 4 !important;
}

/* header: the label and Clear all, on the dark background above the cards */
.rs-below .rs-header {
  padding: 0 2px 10px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.rs-below .rs-title {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
}
.rs-below .rs-clear-all {
  color: var(--gold2) !important;
  font-size: 12px !important; font-weight: 600 !important;
  padding: 4px 8px !important; border-radius: 8px !important;
}
.rs-below .rs-clear-all:hover { background: rgba(201,168,76,.12) !important; }

/* the track: one row, swiped horizontally, snapping card to card */
.rs-below .rs-track {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  padding: 2px 2px 10px !important;
  scrollbar-width: thin !important;
}
.rs-below .rs-track::-webkit-scrollbar { height: 5px; }
.rs-below .rs-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22); border-radius: 3px;
}

/* each search becomes a card */
.rs-below .rs-item {
  flex: 0 0 auto !important;
  width: 268px !important;
  scroll-snap-align: start !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(6,9,26,.14),
              0 12px 28px -14px rgba(6,9,26,.45) !important;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease !important;
}
.rs-below .rs-item:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(6,9,26,.18),
              0 18px 36px -14px rgba(6,9,26,.5) !important;
}
.rs-below .rs-item:active { transform: translateY(0) !important; }

.rs-below .rs-icon {
  flex: 0 0 auto !important;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  background: linear-gradient(140deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important; font-size: 15px !important;
}
.rs-below .rs-info { min-width: 0 !important; }
.rs-below .rs-route {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--navy) !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rs-below .rs-meta {
  font-size: 11.5px !important; color: #8d8577 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rs-below .rs-delete {
  flex: 0 0 auto !important;
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  color: #b0a89a !important; font-size: 14px !important;
  background: transparent !important; border: 0 !important;
}
.rs-below .rs-delete:hover {
  background: rgba(212,52,26,.10) !important; color: #d4341a !important;
}

.rs-below .rs-empty {
  color: rgba(255,255,255,.5) !important;
  background: transparent !important;
  text-align: left !important; padding: 0 2px 8px !important;
}

@media (max-width: 899px) {
  .recent-searches.rs-below { margin-top: 14px !important; }
  .rs-below .rs-item { width: 232px !important; padding: 12px !important; }
  .rs-below .rs-route { font-size: 13.5px !important; }
  /* let the cards run to the screen edge, so the row reads as swipeable */
  .rs-below .rs-track {
    margin: 0 -14px !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-below .rs-item:hover,
  .rs-below .rs-item:active { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCREDITATIONS BELOW THE FORM (mobile)
   These replace the generic trust chips. "Live Chat 24/7" and "Refer & Earn
   $50" are offers; ASTA, CLIA and PCI-DSS are memberships that can be checked —
   which is what a stranger deciding whether to hand over a card needs.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* the chips they replace */
  .hero-trust { display: none !important; }

  .m-accred {
    order: 5 !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
  }
  .m-accred-head {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 9px !important; font-weight: 700 !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
    color: rgba(255,255,255,.42) !important;
    margin: 0 2px 8px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  .m-accred-head::after {
    content: '' !important; flex: 1 1 auto !important; height: 1px !important;
    background: linear-gradient(90deg, rgba(201,168,76,.28), transparent) !important;
  }
  .m-accred-grid + .m-accred-head { margin-top: 16px !important; }

  .m-accred-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .m-accred-item {
    display: flex !important; align-items: center !important; gap: 9px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    min-width: 0 !important;
  }
  .m-accred-badge {
    flex: 0 0 auto !important;
    width: 30px !important; height: 30px !important;
    border-radius: 9px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .m-accred-badge svg { width: 15px !important; height: 15px !important; }
  .m-accred-text { min-width: 0 !important; }
  .m-accred-text b {
    display: block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    color: #ffffff !important; line-height: 1.25 !important;
  }
  .m-accred-text i {
    display: block !important; font-style: normal !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 9.5px !important; line-height: 1.3 !important;
    color: rgba(255,255,255,.46) !important;
    margin-top: 1px !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   asaptrips — LANGUAGE BUTTON AND AIRPORT SUGGESTIONS
   Outside any media query, so both look the same at every width.

   Two flat components made material:

   THE LANGUAGE BUTTON was a plain translucent pill on the navbar. It now has a
   gold hairline, a lift on hover, and a panel whose rows read as a list rather
   than a stack of text.

   THE SUGGESTION LIST was a white box with grey rows — no depth, no hierarchy,
   and the matched text no heavier than the rest. The city is now the loudest
   thing in each row, the matched characters heavier still, and the row you are
   about to choose is unmistakable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the language button ──────────────────────────────────────────────────*/
.lang-btn {
  gap: 7px !important;
  padding: 7px 11px !important;
  border-radius: 100px !important;
  background: linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(201,168,76,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: transform .2s cubic-bezier(.2,.7,.3,1),
              border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.lang-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(232,192,106,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              0 4px 14px rgba(201,168,76,.20) !important;
}
.lang-btn:active { transform: translateY(0) !important; }

/* the flag sits in its own tile, so the button reads as a control not a label */
.lang-flag {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important;
  width: 20px !important; height: 20px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.10) !important;
  font-size: 12px !important;
}
.lang-code { color: inherit !important; }
.lang-chevron { opacity: .75 !important; transition: transform .22s ease !important; }

/* the panel */
.lang-dropdown {
  min-width: 190px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(201,168,76,.24) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 20px 44px -14px rgba(4,8,20,.75) !important;
  overflow: hidden !important;
}
.lang-option {
  border-bottom: 0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  gap: 11px !important;
  position: relative !important;
  transition: background .18s ease, color .18s ease !important;
}
.lang-option:hover { background: rgba(201,168,76,.12) !important; }
.lang-option .lang-flag { background: rgba(255,255,255,.07) !important; }

/* the current language is ticked, not merely bolder */
.lang-option.active {
  background: rgba(201,168,76,.14) !important;
  color: var(--gold2) !important;
}
.lang-option.active::after {
  content: '\2713' !important;
  margin-left: auto !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--gold2) !important;
}

/* ── airport suggestions ──────────────────────────────────────────────────*/
.asap-ac-drop {
  --asap-hover: #fbf8f0;
  padding: 0 0 5px !important;
  border: 1px solid #e8e2d4 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 2px 6px rgba(20,15,5,.06),
              0 22px 50px -16px rgba(12,17,40,.42) !important;
  overflow: hidden !important;
}

/* the header reads as a label, with a hairline under it */
.asap-ac-head {
  background: linear-gradient(180deg, #fdfbf6, #faf7f0) !important;
  border-bottom: 1px solid #f0e9d9 !important;
  color: #a9a08c !important;
}

.asap-ac-item {
  position: relative !important;
  border-top: 0 !important;
  transition: background .15s ease !important;
}
/* a hairline between rows that stops short of the edges */
.asap-ac-item + .asap-ac-item::before {
  content: '' !important;
  position: absolute !important; top: 0 !important;
  left: 16px !important; right: 16px !important; height: 1px !important;
  background: #f4efe4 !important;
}
.asap-ac-item.asap-is-child::before { left: 40px !important; }

/* the row you are about to choose: a gold rail and a warm wash, so keyboard
   and pointer selection look identical */
.asap-ac-item:hover,
.asap-ac-item.asap-focus {
  background: var(--asap-hover) !important;
}
.asap-ac-item.asap-focus::after {
  content: '' !important;
  position: absolute !important; left: 0 !important; top: 4px !important; bottom: 4px !important;
  width: 3px !important; border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
}

/* THE CITY IS THE ANSWER — it carries the weight */
.asap-ac-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  letter-spacing: -.1px !important;
}
.asap-ac-item.asap-is-metro .asap-ac-title { font-weight: 800 !important; }
.asap-ac-sub {
  font-size: 12.5px !important;
  color: #8e8878 !important;
}

/* the characters you typed, heavier and gold, so the match is obvious */
.asap-ac-title mark,
.asap-ac-sub mark {
  background: none !important;
  color: #8a6d1f !important;
  font-weight: 800 !important;
}

/* the code as a quiet chip rather than loose text */
.asap-ac-code {
  display: inline-block !important;
  margin-left: 8px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(201,168,76,.11) !important;
  border: 1px solid rgba(201,168,76,.24) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .7px !important; color: #8a6d1f !important;
  vertical-align: 1px !important;
}
.asap-ac-item.asap-is-metro .asap-ac-code {
  background: rgba(201,168,76,.20) !important;
  border-color: rgba(201,168,76,.42) !important;
}

.asap-ac-glyph { color: #b9b1a0 !important; }
.asap-ac-item.asap-is-metro .asap-ac-glyph { color: var(--gold) !important; }
.asap-ac-item:hover .asap-ac-glyph,
.asap-ac-item.asap-focus .asap-ac-glyph { color: #8a6d1f !important; }

@media (prefers-reduced-motion: reduce) {
  .lang-btn, .lang-btn:hover, .lang-btn:active { transform: none !important; }
  .lang-btn, .lang-option, .asap-ac-item { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE STACKING TRAP
   `.hero-inner` is `position: relative; z-index: 2`, which creates a stacking
   context. Everything inside it — the airport list, the traveller panel, the
   cabin panel — is therefore capped at LEVEL 2 in the root context, no matter
   what z-index it carries. The module asks for 9999 and still loses to the chat
   button at 300, which is why a chat bubble and a gift icon showed through the
   suggestion list.

   The fix is to raise the ANCESTOR, not the panel. But raising it permanently
   would put a transparent 1180px block over the chat button and swallow clicks
   on it, so it is raised only while the form is in use:

     :focus-within  — any field focused, which is exactly when a panel opens
     :has(...)      — a panel present without focus (older Safari ignores this
                      and falls back to :focus-within, which covers the same
                      cases in practice)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-inner:focus-within { z-index: 400 !important; }
.hero-inner:has(.asap-ac-drop),
.hero-inner:has(.pax-dropdown.open),
.hero-inner:has(.m-cabin.open) { z-index: 400 !important; }

/* inside that context, the suggestion list sits above the other panels */
.asap-ac-drop { z-index: 1300 !important; }

/* ── AND STATE THE ORDER INSIDE THE HERO ─────────────────────────────────
   Raising the ancestor fixes the chat button, but not the trust bar directly
   beneath the card — its icons still came through the open list.

   `.hero-trust` carries `animation: fadeUp .7s .55s both`. A FILLING animation
   leaves the element promoted to its own compositor layer indefinitely, and a
   promoted layer can paint above non-promoted content when the paint order is
   only implied. The text sat behind correctly; the emoji, drawn as colour
   glyphs on that layer, did not.

   Nothing here relies on compositing behaviour any more: the card and the bar
   are both positioned, both numbered, and the card is higher. */
.form-card { position: relative !important; z-index: 20 !important; }
.hero-trust,
.mob-referral-nudge,
.recent-searches.rs-below,
.m-accred { position: relative !important; z-index: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE MOBILE NAVBAR
   Four controls were competing in ~540px: the logo, a language pill reading
   "US ⌄", a gold call button carrying the full number, and the hamburger. The
   call button alone took a third of the bar.

   The logic is: never remove a control, reduce it — and only fall back to the
   hamburger for something the hamburger already contains.

     ≥900px   logo · links · language · call with number
     <900px   language becomes a flag-only circle; the call tightens but keeps
              its number, because that number is the point of the page
     <430px   the call collapses to a gold circle. The number is not lost — the
              menu already ends with "📞 +1-888-485-0220", so the fallback
              exists rather than being invented for this breakpoint.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .navbar { gap: 8px !important; }

  /* language: the flag alone. "US" and the chevron are redundant next to it. */
  .lang-btn {
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  .lang-code, .lang-chevron { display: none !important; }
  .lang-flag {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important;
    background: none !important;
    font-size: 14px !important;
  }
  .lang-dropdown { right: 0 !important; min-width: 176px !important; }

  /* the call button: tighter, but the number stays */
  .logo-text { font-size: 15px !important; }
  .logo-badge { font-size: 12px !important; padding: 3px 8px !important; }
}

@media (max-width: 430px) {
  /* the number moves to the menu, which already carries it */
  .navbar { padding-left: 10px !important; padding-right: 10px !important; }
  .logo-text { font-size: 14px !important; }
}


/* ── keep the three commercial links for as long as the bar itself shows ──
   The page's 960px rule hides every item except the first. Premium cabins are
   the highest-margin product here, so Book Premium survives alongside Flights
   and Hotel; the editorial and support links still drop away.               */
@media (max-width: 960px) {
  .nav-links li.nav-keep { display: list-item !important; }
  .nav-links { gap: 22px !important; }
}


/* ── shared surface ───────────────────────────────────────────────────── */
.asap-ac-drop,
.ac-dropdown,
.recent-searches,
.pax-dropdown {
  background: var(--navy2) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.10),
    0 8px 32px rgba(0,0,0,0.50),
    0 32px 80px rgba(0,0,0,0.40) !important;
  color: var(--cream) !important;
  overflow: hidden !important;
}
/* keep the lists scrollable after the overflow:hidden above */
.asap-ac-drop, .ac-dropdown, .recent-searches { overflow-y: auto !important; }

/* ── 1. airport autocomplete ──────────────────────────────────────────── */
.asap-ac-drop {
  --asap-bg:       var(--navy2);
  --asap-border:   rgba(201,168,76,0.25);
  --asap-text:     #f3ede0;
  --asap-muted:    #8890aa;
  --asap-hover:    rgba(201,168,76,0.13);
  --asap-metro-bg: rgba(201,168,76,0.06);
  --asap-mark:     var(--gold2);
  --asap-shadow:   none;
  scrollbar-color: rgba(201,168,76,0.35) transparent;
}
.asap-ac-drop::-webkit-scrollbar-thumb,
.ac-dropdown::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35) !important; }

.asap-ac-head {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(201,168,76,0.20) !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 11px 16px !important;
}
.asap-ac-item, .ac-item {
  border-bottom: 1px solid rgba(201,168,76,0.10) !important;
  color: #f3ede0 !important;
}
.asap-ac-item:last-child, .ac-item:last-child { border-bottom: 0 !important; }
.asap-ac-item:hover, .asap-ac-item.asap-focus,
.ac-item:hover, .ac-item.focused {
  background: rgba(201,168,76,0.13) !important;
}
.asap-ac-title { color: #f3ede0 !important; }
.asap-ac-sub, .asap-ac-glyph { color: #8890aa !important; }
.asap-ac-item.asap-is-child .asap-ac-glyph { color: #5d6580 !important; }
.asap-ac-title mark { color: var(--gold2) !important; }
/* the IATA code chip */
.asap-ac-code {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 6px;
  padding: 1px 6px;
}
.asap-ac-empty { color: #8890aa !important; }

/* ── 2. recent searches ───────────────────────────────────────────────── */
.recent-searches, .rs-item { color: #f3ede0 !important; }
.rs-item { border-bottom: 1px solid rgba(201,168,76,0.10) !important; }
.rs-item:hover { background: rgba(201,168,76,0.13) !important; }

/* ── 3. passenger panel ───────────────────────────────────────────────── */
.pax-dropdown .pax-dropdown-header {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(201,168,76,0.20) !important;
}
.pax-dropdown .pax-dropdown-title {
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
}
.pax-dropdown .pax-row {
  border-top: 1px solid rgba(201,168,76,0.10) !important;
  border-bottom: 0 !important;
}
.pax-dropdown .pax-row:first-of-type { border-top: 0 !important; }
.pax-dropdown .pax-row:hover { background: rgba(201,168,76,0.07) !important; }
.pax-dropdown .pax-row-label { color: #f3ede0 !important; }
.pax-dropdown .pax-row-sub   { color: #8890aa !important; }
.pax-dropdown .pax-count     { color: var(--gold2) !important; }
.pax-dropdown .pax-btn {
  background: transparent !important;
  border: 1.5px solid rgba(201,168,76,0.35) !important;
  color: var(--gold2) !important;
}
.pax-dropdown .pax-btn:hover:not(:disabled) {
  background: rgba(201,168,76,0.15) !important;
  border-color: var(--gold) !important;
  color: var(--gold3) !important;
}
/* Done was red — the card's primary action is gold everywhere else */
.pax-dropdown .pax-done {
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  color: var(--navy) !important;
  box-shadow: 0 4px 14px rgba(201,168,76,0.28) !important;
}
.pax-dropdown .pax-done:hover {
  background: linear-gradient(135deg, var(--gold2), var(--gold3)) !important;
  box-shadow: 0 6px 20px rgba(201,168,76,0.40) !important;
}

/* the inset hairline between rows (declared elsewhere as a ::before) */
.asap-ac-item + .asap-ac-item::before {
  background: rgba(201,168,76,0.14) !important;
}
.asap-ac-head { background: var(--navy) !important; }

/* ── the panels sit over a white card, so give them a little separation ── */
@media (max-width: 899px) {
  .form-row-main .asap-ac-drop,
  .form-row-main .ac-dropdown,
  .form-row-main .recent-searches,
  .m-optionrow .pax-dropdown {
    border-radius: 20px !important;
    box-shadow:
      0 0 0 1px rgba(201,168,76,0.14),
      0 20px 48px -12px rgba(0,0,0,0.55) !important;
  }
  /* the swap control was sitting on top of the open list */
  .form-row-main .asap-ac-drop.asap-open ~ .swap-btn,
  .swap-btn { z-index: 5 !important; }

  /* the traveller panel was flush with the card's edge, squaring off its
     rounded corner. `.pax-dropdown`'s containing block is the traveller field,
     not the card, so it stays right-aligned — just pulled in a few px. */
  .m-optionrow .pax-dropdown {
    right: -8px !important; left: auto !important;
    width: min(320px, calc(100vw - 56px)) !important;
  }
}
@media (max-width: 899px) {

  /* ── 1. the page ──────────────────────────────────────────────────────
     The reference has no photograph — a flat #f7f9fc field with one cool
     radial behind the top right. The image is dropped rather than faded,
     which also removes the hero's largest mobile download.                */
  body, .hero { background: #f7f9fc !important; }
  .hero-bg-img, .hero-bg::after { display: none !important; }
  .hero-bg-overlay {
    background:
      linear-gradient(rgba(247,249,252,.91), rgba(247,249,252,.96)),
      radial-gradient(circle at 90% 35%, #dce8f6 0, transparent 28%) !important;
  }

  /* ── 2. header ────────────────────────────────────────────────────────
     Hamburger first, then the logo, with the call control at the far right —
     the order in the reference. Only the visual order changes; the DOM order
     stays as it is, so tab order and screen readers are unaffected.        */

  .navbar > * { order: 3; }
  .logo, .nav-logo, .logo-wrap { order: 2 !important; margin-right: auto !important; }
  .lang-btn { order: 4 !important; }

  /* ── 3. hero copy ─────────────────────────────────────────────────────*/
  /* the navbar is in normal flow, so the hero's 56px top padding was a second
     navbar's worth of empty space above the headline */
  .hero { padding-top: 56px !important; }
  .hero-inner { padding: 30px 12px 34px !important; }
  .nav-hamburger {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 34px !important; padding: 0 !important;
  }
  .hero-title {
    color: #101a2d !important;
    font-size: 32px !important;
    line-height: 1.06 !important;
    letter-spacing: -1.2px !important;
    margin-bottom: 0 !important;
  }
  .hero-title em { color: #d99a00 !important; display: block !important; }
  .hero-subtitle, .mob-form-label {
    color: #626c7c !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 16px auto 26px !important;
    max-width: 34ch !important;
  }

  /* ── 4. the search card ───────────────────────────────────────────────*/
  .form-card {
    background: rgba(255,255,255,.97) !important;
    border-radius: 20px !important;
    border: 0 !important;
    padding: 10px !important;
    box-shadow: 0 18px 50px rgba(13,28,55,.14) !important;
    overflow: visible !important;
  }
  .form-body { padding: 0 !important; }

  /* trip tabs — an even grid, navy pill on the selected one */
  .form-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    background: transparent !important;
    padding: 0 0 12px !important;
    border-radius: 0 !important;
  }
  .form-tab {
    border-radius: 16px !important;
    padding: 13px 4px !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: #4e5a70 !important; background: transparent !important;
  }
  .form-tab.active {
    background: #0b1730 !important; color: #fff !important;
    box-shadow: none !important;
  }

  /* cabin + travellers: one bordered strip, square-shouldered at the bottom
     so it reads as the top of a single stacked control                     */
  .m-optionrow {
    border: 1px solid #e5e8ee !important;
    border-radius: 16px 16px 0 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  .m-optionrow > * {
    padding: 16px 13px !important;
    font-size: 15px !important; font-weight: 700 !important;
  }
  .m-optionrow > *:first-child { border-right: 1px solid #e5e8ee !important; }

  /* route + dates share one bordered block, closed off at the bottom */
  .form-row-main {
    border: 1px solid #e5e8ee !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  /* FROM and TO — full width, generous, room kept clear for the swap control */
  .form-row-main > div:nth-of-type(1),
  .form-row-main > div:nth-of-type(2) {
    border-bottom: 1px solid #e5e8ee !important;
    padding: 18px 55px 16px 15px !important;
    background: transparent !important;
  }
  /* DEPARTURE and RETURN — the pair at the foot, tighter and side by side */
  .form-row-main > .field-depart,
  .form-row-main > .field-return {
    padding: 15px 13px !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
  .form-row-main > .field-depart { border-right: 1px solid #e5e8ee !important; }
  .form-row-main > .field-depart .field-label,
  .form-row-main > .field-return .field-label { white-space: nowrap !important; }
  .form-row-main > .field-depart input,
  .form-row-main > .field-return input {
    font-size: 15px !important; font-weight: 700 !important;
    padding-left: 24px !important;
  }

  .form-row-main label,
  .form-row-main .field-label {
    color: #6d7890 !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    margin-bottom: 6px !important;
  }
  .form-row-main input {
    font-size: 20px !important; font-weight: 700 !important;
    color: #101a2d !important; background: transparent !important;
    /* the field glyph is absolutely positioned at left:0 — leave it room */
    padding-left: 28px !important;
  }
  .form-row-main input::placeholder { color: #9aa3b2 !important; font-weight: 500 !important; }

  /* the caption line under a chosen airport / date — added by script below */
  .rf-sub {
    font-size: 13px !important; color: #7b8495 !important;
    margin-top: 4px !important; font-weight: 400 !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* swap control */
  .swap-btn {
    right: -6px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important; height: 50px !important;
    background: #fff !important;
    border: 1px solid #e1e4ea !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
    color: #b27b00 !important;
  }
  .swap-btn svg, .swap-btn span { color: #b27b00 !important; fill: #b27b00 !important; }

  /* the action */
  .search-btn {
    width: 100% !important;
    margin-top: 14px !important;
    border-radius: 40px !important;
    padding: 17px !important;
    background: linear-gradient(180deg, #f7bd28, #eaaa0b) !important;
    color: #101a2d !important;
    font-size: 17px !important; font-weight: 800 !important;
    letter-spacing: .4px !important;
    box-shadow: 0 7px 16px rgba(224,166,19,.25) !important;
  }

  /* ── 5. accreditations — plain type, no coloured tiles ────────────────*/
  .m-accred { margin-top: 34px !important; }
  .m-accred-head {
    color: #647086 !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  .m-accred-head::before,
  .m-accred-head::after {
    content: '' !important; flex: 1 1 auto !important;
    height: 1px !important; background: #ccd2dc !important;
  }
  .m-accred-grid { gap: 18px 10px !important; }
  .m-accred-item {
    display: block !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
  }
  .m-accred-badge { display: none !important; }
  .m-accred-text b {
    font-size: 21px !important; font-weight: 800 !important;
    color: #101a2d !important;
  }
  .m-accred-text i {
    font-size: 12px !important; color: #737d8f !important;
    line-height: 1.35 !important; -webkit-line-clamp: 3 !important;
  }
  /* the second group (SSL / Cloudflare / PCI / Trustpilot) is replaced by the
     security row at the foot of the block, and repeated in the footer already */
  .m-accred > :nth-child(3),
  .m-accred > :nth-child(4) { display: none !important; }

  /* ── 6. benefits card ─────────────────────────────────────────────────*/
  .m-benefits {
    order: 7 !important;
    width: 100% !important;
    margin-top: 30px !important;
    background: #fff !important;
    border: 1px solid #e7eaf0 !important;
    border-radius: 22px !important;
    padding: 12px !important;
    box-shadow: 0 10px 30px rgba(13,28,55,.07) !important;
  }
  .m-benefit {
    display: flex !important; align-items: center !important; gap: 14px !important;
    padding: 14px 8px !important;
    border-bottom: 1px solid #e5e8ee !important;
  }
  .m-benefit:last-child { border-bottom: 0 !important; }
  .m-benefit-icon {
    flex: none !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    background: #eef2f8 !important;
    display: grid !important; place-items: center !important;
  }
  .m-benefit-icon svg { width: 20px !important; height: 20px !important; }
  .m-benefit b {
    display: block !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #101a2d !important;
  }
  .m-benefit span {
    font-size: 13px !important; color: #747e90 !important; line-height: 1.4 !important;
  }

  /* ── 7. support bar ───────────────────────────────────────────────────*/
  .m-support {
    order: 8 !important;
    width: 100% !important;
    margin-top: 24px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: #0b1730 !important;
    color: #fff !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
  }
  .m-support-agent {
    flex: none !important;
    width: 54px !important; height: 54px !important;
    border-radius: 50% !important;
    background: #dce3ed !important;
    display: grid !important; place-items: center !important;
  }
  .m-support-agent svg { width: 28px !important; height: 28px !important; }
  .m-support-text { flex: 1 !important; min-width: 0 !important; }
  .m-support-text b {
    display: block !important; font-size: 16px !important; font-weight: 700 !important;
    line-height: 1.25 !important;
  }
  .m-support-text span { color: #cbd3df !important; font-size: 13px !important; }
  /* at 390px the three-across layout the reference uses squeezes the copy to
     three ragged lines — the action drops to its own full-width row instead */
  .m-support { flex-wrap: wrap !important; }
  .m-support-text b { font-size: 15px !important; }
  .m-support-cta {
    flex: 1 0 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
    border: 1px solid #f3b51b !important;
    background: transparent !important;
    color: #f3b51b !important;
    padding: 11px 15px !important;
    border-radius: 28px !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: .4px !important;
    text-decoration: none !important;
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    white-space: nowrap !important;
  }
  .m-support-cta svg { width: 14px !important; height: 14px !important; }

  /* ── 8. security row ──────────────────────────────────────────────────*/
  .m-security {
    order: 9 !important;
    width: 100% !important;
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 6px 9px !important;
    padding: 22px 0 6px !important;
    color: #7a8495 !important; font-size: 11.5px !important;
  }
  .m-security span {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    white-space: nowrap !important;
  }
  .m-security svg { width: 12px !important; height: 12px !important; }
  .m-security i {
    font-style: normal !important; color: #ccd2dc !important;
  }

  /* the referral nudge sits between the badges and the benefits */
  .mob-referral-nudge { order: 6 !important; }
}

/* ── small phones: the date pair is the first thing to run out of room ──── */
@media (max-width: 380px) {
  .form-row-main > .field-depart,
  .form-row-main > .field-return { padding: 14px 10px !important; }
  .form-row-main > .field-depart input,
  .form-row-main > .field-return input {
    font-size: 13.5px !important; padding-left: 22px !important;
  }
  .form-row-main > .field-depart .field-label,
  .form-row-main > .field-return .field-label { font-size: 11px !important; }
  .hero-title { font-size: 29px !important; }
}
@media (max-width: 899px) {
  .ei {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 1em; height: 1em;
    vertical-align: -0.14em;
    flex: none;
  }
  .ei svg { width: 100%; height: 100%; display: block; }
  /* a little air where the icon leads a line of text */
  .ei + span, .ei { margin-right: .02em; }

  /* Decorative icon wells: these held full-colour emoji, so their own text
     colour was never meant to be seen and is near-invisible on their tinted
     backgrounds. A stroked icon needs a stated colour — gold, matching the
     rest of the page's accents. */
  .why-icon-wrap, .cabin-card-icon, .perk-ico,
  .ref-chip-icon, .ref-trophy, .assist-ch-icon,
  .m-benefit-icon { color: var(--gold) !important; }
  .why-icon-wrap .ei, .cabin-card-icon .ei, .perk-ico .ei,
  .ref-chip-icon .ei, .ref-trophy .ei, .assist-ch-icon .ei {
    color: var(--gold) !important;
  }
  /* on the white "why" cards the gold needs a touch more weight to read */
  .why-icon-wrap .ei svg { stroke-width: 1.6 !important; }
  .why-icon-wrap { background: rgba(201,168,76,.10) !important; }
}

@media (max-width: 899px) {

  /* ── 1. the photograph ────────────────────────────────────────────────
     Same Unsplash asset the desktop hero uses, so nothing new is downloaded
     on a warm cache. Cropped to the wing and the horizon, lightened, then
     masked away before it reaches the search card. */
  .hero-bg-img {
    display: block !important;
    /* Two layers, not a fallback chain: CSS paints them front-to-back, and a
       layer whose file fails to load simply paints nothing, so the one behind
       shows through. Drop `hero-wing.jpg` beside this file and it wins;
       without it the page falls back to the hosted asset. */
    /* The hero is ~1200px tall on a phone and the card covers all but its
       first ~160px, so an image stretched over the whole box is cropped to a
       sliver by `cover` and lands behind the card. Pinned to the top band —
       the strip that is actually visible — instead. */
    inset: 0 0 auto 0 !important;
    height: 430px !important;
    /* Three layers, painted front to back. A layer whose file fails to load
       paints nothing, so the one behind shows through:
         1. hero-wing.jpg   — drop it beside this file and it wins
         2. the hosted photo — what the desktop hero uses
         3. an embedded sky-and-wing drawing — no network, cannot fail
       The drawing is authored at the band's own 390x430 aspect, so it needs
       almost no cropping. */
    background-image:
      url('hero-wing.jpg'),
      url('../../img/mbg2.webp'),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20430%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22sk%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220.15%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%239ec1e3%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23c8dcf0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e8f0f8%22%2F%3E%20%3C%2FlinearGradient%3E%20%3CradialGradient%20id%3D%22sn%22%20cx%3D%220.82%22%20cy%3D%220.1%22%20r%3D%220.55%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffeec9%22%20stop-opacity%3D%220.95%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffeec9%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FradialGradient%3E%20%3ClinearGradient%20id%3D%22wg%22%20x1%3D%220.05%22%20y1%3D%221%22%20x2%3D%220.95%22%20y2%3D%220%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237e93b0%22%2F%3E%3Cstop%20offset%3D%220.35%22%20stop-color%3D%22%23b9c8dc%22%2F%3E%3Cstop%20offset%3D%220.7%22%20stop-color%3D%22%23e9f0f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22cl%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.92%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.06%22%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%22390%22%20height%3D%22430%22%20fill%3D%22url%28%23sk%29%22%2F%3E%20%3Crect%20width%3D%22390%22%20height%3D%22430%22%20fill%3D%22url%28%23sn%29%22%2F%3E%20%3Cg%20fill%3D%22url%28%23cl%29%22%3E%20%3Cellipse%20cx%3D%2255%22%20cy%3D%2246%22%20rx%3D%22130%22%20ry%3D%2218%22%2F%3E%20%3Cellipse%20cx%3D%22255%22%20cy%3D%2226%22%20rx%3D%22120%22%20ry%3D%2214%22%2F%3E%20%3Cellipse%20cx%3D%22355%22%20cy%3D%2278%22%20rx%3D%22130%22%20ry%3D%2220%22%2F%3E%20%3Cellipse%20cx%3D%22150%22%20cy%3D%2296%22%20rx%3D%22150%22%20ry%3D%2214%22%20opacity%3D%220.5%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M40%20158%20L58%20148%20L392%20214%20L392%20244%20L74%20200%20L26%20214%20L10%20194%20L22%20172%20Z%22%20fill%3D%22url%28%23wg%29%22%2F%3E%20%3Cpath%20d%3D%22M40%20158%20L58%20148%20L392%20214%20L392%20224%20L60%20176%20Z%22%20fill%3D%22%2393a7c2%22%2F%3E%20%3Cpath%20d%3D%22M22%20172%20L10%20194%20L-6%20186%20L4%20164%20Z%22%20fill%3D%22%236f8299%22%2F%3E%20%3Cpath%20d%3D%22M74%20200%20L392%20244%20L392%20282%20L110%20238%20L66%20228%20L60%20212%20Z%22%20fill%3D%22%23dfe7f1%22%20opacity%3D%220.7%22%2F%3E%20%3Cpath%20d%3D%22M58%20148%20L392%20214%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.7%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22url%28%23cl%29%22%20opacity%3D%220.45%22%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%22320%22%20rx%3D%22230%22%20ry%3D%2230%22%2F%3E%20%3Cellipse%20cx%3D%2250%22%20cy%3D%22380%22%20rx%3D%22180%22%20ry%3D%2224%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") !important;
    background-position: 55% 40%, 55% 40%, center !important;
    background-size: cover, cover, cover !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    opacity: .92 !important;
    filter: saturate(.85) brightness(1.14) contrast(.95) !important;
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 56%, rgba(0,0,0,.55) 80%, transparent 100%) !important;
            mask-image: linear-gradient(180deg,
      #000 0%, #000 56%, rgba(0,0,0,.55) 80%, transparent 100%) !important;
  }
  /* a soft white pool behind the headline so it stays legible over the sky,
     then solid paper from the card downwards */
  .hero-bg-overlay {
    background:
      radial-gradient(105% 20% at 50% 13%, rgba(255,255,255,.70), rgba(255,255,255,.12) 72%, transparent),
      linear-gradient(180deg,
        rgba(247,249,252,.04) 0%,
        rgba(247,249,252,.10) 20%,
        rgba(247,249,252,.55) 31%,
        #f7f9fc 38%) !important;
  }
  .hero-bg::after { display: none !important; }

  /* ── 2. the field icons become tiles ──────────────────────────────────
     `.field-icon` is already a mask scaffold — an 18px box whose ::before
     carries the glyph — so it only needs to grow into a tile and recolour.
     The mask itself is untouched, which keeps the desktop icons identical. */

  /* FROM and TO — a cool tile with a deep blue glyph */
  .form-row-main > div:nth-of-type(1) .field-icon,
  .form-row-main > div:nth-of-type(2) .field-icon {
    width: 34px !important; height: 34px !important;
    margin-top: -17px !important;
    border-radius: 10px !important;
    background: #eef2f8 !important;
  }
  .form-row-main > div:nth-of-type(1) .field-icon::before,
  .form-row-main > div:nth-of-type(2) .field-icon::before {
    inset: 8px !important;
    background: #0f1b3d !important;
  }
  .form-row-main > div:nth-of-type(1) input,
  .form-row-main > div:nth-of-type(2) input { padding-left: 46px !important; }

  /* DEPARTURE and RETURN — a warm tile with an amber glyph */
  .field-depart .field-icon,
  .field-return .field-icon {
    width: 28px !important; height: 28px !important;
    margin-top: -14px !important;
    border-radius: 8px !important;
    background: #fdf1dc !important;
  }
  .field-depart .field-icon::before,
  .field-return .field-icon::before {
    inset: 6px !important;
    background: #d99a00 !important;
  }
  .form-row-main > .field-depart input,
  .form-row-main > .field-return input { padding-left: 38px !important; }

  /* the tile must not warm up and jump on focus the way a bare glyph did */
  .field:focus-within .field-icon::before { transform: none !important; }
  .form-row-main > div:nth-of-type(1):focus-within .field-icon::before,
  .form-row-main > div:nth-of-type(2):focus-within .field-icon::before {
    background: #0f1b3d !important;
  }
  .field-depart:focus-within .field-icon::before,
  .field-return:focus-within .field-icon::before { background: #d99a00 !important; }

  /* cabin and travellers stay untiled, in the neutral of the design */
  .mob-cabin-field .field-icon::before,
  .pax-field .field-icon::before { background: #0f1b3d !important; }

  /* ── 3. benefit icons: rounded squares, not circles ───────────────────*/
  .m-benefit-icon {
    border-radius: 14px !important;
    background: #eef2f8 !important;
    color: #1f2c44 !important;
  }
  .m-benefit-icon .ei, .m-benefit-icon svg { color: #1f2c44 !important; stroke: #1f2c44 !important; }

  /* ── 4. trip tabs carry an icon, as in the design ─────────────────────*/
  .form-tab .ti {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .45em;
  }
  .form-tab .ti svg { width: 100%; height: 100%; }
}
@media (max-width: 899px) {

  /* ── navbar: circle icon + "Call Us" over the number ──────────────────
     The gold pill is dropped for the reference's quieter treatment: a
     gold-ringed circle beside two lines of white type. */
  
  /* the whole call control must not be the flex item that gives way — it was
     being squeezed to 32px, which is why the number vanished */
  .navbar { gap: 7px !important; }
  
  /* an earlier breakpoint collapses the whole control to a 38px circle and
     hides both lines; the reference keeps them, so they are put back */
 
  /* the logo is the piece with slack, so it is the one that yields */
  .logo, .logo-text { font-size: 17px !important; }
  .logo-badge { padding: 2px 6px !important; font-size: 13px !important; }
  
  /* the flag loses its gold ring, as in the reference */
  .lang-btn {
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    padding: 0 4px !important;
  }
  .lang-btn .lang-flag {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important; overflow: hidden !important;
    background: transparent !important;
  }

  /* ── hero headline: the reference sets it in the body sans, not a serif ─*/
  .hero-title {
    font-family: 'DM Sans', Inter, system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    letter-spacing: -.6px !important;
  }
  .hero-title em { font-style: normal !important; font-weight: 800 !important; }
  .hero-subtitle, .mob-form-label { font-size: 14.5px !important; }

  /* ── three trip tabs ──────────────────────────────────────────────────*/
  .form-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  .form-tab {
    font-size: 13px !important; padding: 12px 2px !important;
    color: #1f2937 !important;
  }
  .form-tab.active { color: #ffffff !important; }
  .form-tab .ti { margin-right: .3em !important; }
  .mc-note {
    grid-column: 1 / -1;
    margin: 2px 2px 0; padding: 8px 10px;
    border-radius: 10px; background: rgba(201,168,76,.10);
    border: 1px solid rgba(201,168,76,.28);
    font-size: 11.5px; color: #7a6220; line-height: 1.35;
  }
  .mc-note a { color: #8a6d1f; font-weight: 700; }

  /* ── the swap control sits on the card's edge ─────────────────────────*/
  .form-card, .form-body, .form-row-main { overflow: visible !important; }
  .form-row-main .swap-btn {
    /* the control is rotated 90deg so the desktop's horizontal ⇄ reads as a
       vertical swap between the stacked fields. The glyph is drawn vertically
       now, so the rotation comes off and the centring transform stays. */
    transform: translateY(-50%) !important;
    right: 4px !important;
    width: 44px !important; height: 44px !important;
    background: #fff !important;
    border: 1px solid #e1e4ea !important;
    box-shadow: 0 6px 18px rgba(13,28,55,.13) !important;
  }
  /* the hairline between FROM and TO starts after the icon tile */
  .form-row-main > div:nth-of-type(1) { border-bottom: 0 !important; position: relative; }
  .form-row-main > div:nth-of-type(1)::after {
    content: ''; position: absolute; left: 46px; right: 0; bottom: 0;
    height: 1px; background: #e5e8ee;
  }

  /* ── accreditations: four across with rules, as in the reference ──────*/
  .m-accred-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }
  .m-accred-item {
    padding: 2px 6px !important;
    border-left: 1px solid #dfe4ec !important;
    border-radius: 0 !important;
  }
  .m-accred-item:first-child { border-left: 0 !important; }
  .m-accred-text b { font-size: 14px !important; letter-spacing: -.2px !important; }
  .m-accred-text i {
    font-size: 8.5px !important; line-height: 1.3 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* ── benefits: three across inside one card ───────────────────────────*/
  .m-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 6px !important;
  }
  .m-benefit {
    flex-direction: row !important; align-items: flex-start !important;
    gap: 8px !important; padding: 12px 7px !important;
    border-bottom: 0 !important;
    border-left: 1px solid #e5e8ee !important;
  }
  .m-benefit:first-child { border-left: 0 !important; }
  .m-benefit-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .m-benefit-icon svg, .m-benefit-icon .ei { width: 16px !important; height: 16px !important; }
  .m-benefit b { font-size: 11px !important; line-height: 1.25 !important; }
  .m-benefit span { font-size: 9.5px !important; line-height: 1.3 !important; }

  /* ── support bar: the action returns to the right-hand side ───────────*/
  .m-support { flex-wrap: nowrap !important; gap: 11px !important; }
  .m-support-agent { width: 46px !important; height: 46px !important; }
  .m-support-text b { font-size: 13px !important; }
  .m-support-text span { font-size: 11px !important; }
  .m-support-cta {
    flex: none !important; width: auto !important; margin-top: 0 !important;
    padding: 10px 13px !important; font-size: 11px !important;
  }


  /* ── icons redrawn to the reference exactly ───────────────────────────
     The reference uses solid silhouettes for the route glyphs and a heavier
     line for the seat; ours were all light outlines. */
  .form-row-main > div:nth-of-type(1) .field-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%3E%3Cg%20transform%3D%27rotate%2842%2012%2012%29%27%3E%3Cpath%20d%3D%27M21%2016v-2l-8-5V3.5a1.5%201.5%200%200%200-3%200V9l-8%205v2l8-2.5V19l-2%201.5V22l3.5-1%203.5%201v-1.5L13%2019v-5.5z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%3E%3Cg%20transform%3D%27rotate%2842%2012%2012%29%27%3E%3Cpath%20d%3D%27M21%2016v-2l-8-5V3.5a1.5%201.5%200%200%200-3%200V9l-8%205v2l8-2.5V19l-2%201.5V22l3.5-1%203.5%201v-1.5L13%2019v-5.5z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
  }
  .form-row-main > div:nth-of-type(2) .field-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.6A2.6%202.6%200%201%201%2012%206.4a2.6%202.6%200%200%201%200%205.2z%27%2F%3E%3C%2Fsvg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.6A2.6%202.6%200%201%201%2012%206.4a2.6%202.6%200%200%201%200%205.2z%27%2F%3E%3C%2Fsvg%3E") !important;
  }
  .field-depart .field-icon::before,
  .field-return .field-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2716.5%27%20rx%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M3%2010h18M8%202.6v3.6M16%202.6v3.6%27%2F%3E%3Cpath%20d%3D%27M7.6%2014.2h2.2M12.6%2014.2h3.8M7.6%2017.4h4.6%27%2F%3E%3C%2Fsvg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2716.5%27%20rx%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M3%2010h18M8%202.6v3.6M16%202.6v3.6%27%2F%3E%3Cpath%20d%3D%27M7.6%2014.2h2.2M12.6%2014.2h3.8M7.6%2017.4h4.6%27%2F%3E%3C%2Fsvg%3E") !important;
  }

  /* the travellers control had a filled triangle where the reference — and
     the cabin control beside it — use a thin chevron */
  .pax-display::after {
    width: 8px !important; height: 8px !important;
    border: 0 !important;
    border-right: 2px solid #6b7280 !important;
    border-bottom: 2px solid #6b7280 !important;
    border-radius: 1px !important;
    transform: translateY(-70%) rotate(45deg) !important;
  }
  .pax-display.open::after {
    transform: translateY(-30%) rotate(-135deg) !important;
  }

  /* the swap control: two separate arrows, not the single ⇄ character.
     A later rule re-asserts the button's font-size, so the character is
     taken out with colour and indent rather than by collapsing the type. */
  .swap-btn {
    color: transparent !important;
    text-indent: -999px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
  }
  .swap-btn::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-indent: 0 !important;
    display: block !important;
    width: 19px !important; height: 19px !important;
    background: #d99a00 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203.5v17M8%203.5%204.6%207M8%203.5%2011.4%207%27%2F%3E%3Cpath%20d%3D%27M16%2020.5v-17M16%2020.5%2012.6%2017M16%2020.5%2019.4%2017%27%2F%3E%3C%2Fsvg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203.5v17M8%203.5%204.6%207M8%203.5%2011.4%207%27%2F%3E%3Cpath%20d%3D%27M16%2020.5v-17M16%2020.5%2012.6%2017M16%2020.5%2019.4%2017%27%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
  }


  /* ── the cabin and traveller glyphs the reference uses ────────────────*/
  .mob-cabin-field .field-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.6%203.4h.6a2%202%200%200%201%202%201.8l.6%205.9h6.1a3.2%203.2%200%200%201%203.2%203.2v.5%27%2F%3E%3Cpath%20d%3D%27M10.8%2011.1h8.5%27%2F%3E%3Cpath%20d%3D%27M19.1%2014.8%2020%2020.4%27%2F%3E%3Cpath%20d%3D%27M8.2%2011.1%206.9%2020.4%27%2F%3E%3Cpath%20d%3D%27M5.4%2020.4h15.4%27%2F%3E%3C%2Fsvg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.6%203.4h.6a2%202%200%200%201%202%201.8l.6%205.9h6.1a3.2%203.2%200%200%201%203.2%203.2v.5%27%2F%3E%3Cpath%20d%3D%27M10.8%2011.1h8.5%27%2F%3E%3Cpath%20d%3D%27M19.1%2014.8%2020%2020.4%27%2F%3E%3Cpath%20d%3D%27M8.2%2011.1%206.9%2020.4%27%2F%3E%3Cpath%20d%3D%27M5.4%2020.4h15.4%27%2F%3E%3C%2Fsvg%3E") !important;
  }
  .pax-field .field-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4.5%2020.5a7.5%207.5%200%200%201%2015%200'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4.5%2020.5a7.5%207.5%200%200%201%2015%200'/%3E%3C/svg%3E") !important;
  }
}

/* The header carries five things and the phone number is 100px of it. Below
   430px the row cannot hold all of them, so the language switcher — the only
   one that is not navigation, branding or the primary CTA — steps out. */
@media (max-width: 429px) {
  .lang-selector, .lang-btn { display: none !important; }
  .logo, .logo-text { font-size: 15.5px !important; }
  .logo-badge { padding: 2px 5px !important; font-size: 12px !important; }
  .navbar { gap: 6px !important; }
}

/* Below 340px the number itself no longer fits beside the logo, so the call
   control falls back to the icon alone — it is still a tel: link. */
@media (max-width: 339px) {
}

@media (max-width: 359px) {
  /* on the narrowest phones the label goes too, leaving icon + number */
  .logo, .logo-text { font-size: 14px !important; }
  .nav-hamburger { width: 28px !important; }
  .navbar { padding-left: 8px !important; padding-right: 8px !important; }
  .m-accred-text i { font-size: 8px !important; }
  .m-benefit b { font-size: 10px !important; }
}
@media (max-width: 899px) {

  /* ── badge row ────────────────────────────────────────────────────────*/
  .m-accred-head { color: #4a5878 !important; letter-spacing: 2.2px !important; }
  /* the CLIA ship rides above the wordmark, so the row needs headroom and
     must not clip it */
  .m-accred-grid { padding-top: 13px !important; overflow: visible !important; }
  .m-accred-item { padding: 2px 5px !important; overflow: visible !important; }
  .m-accred-text b {
    font-size: 15px !important; font-weight: 800 !important;
    color: #16294d !important; letter-spacing: -.3px !important;
    position: relative !important; display: inline-block !important;
  }
  .m-accred-text i { color: #55637d !important; font-size: 8.5px !important; }
  .m-accred-text sup {
    font-size: 6px !important; vertical-align: super !important;
    margin-left: 1px !important; font-weight: 700 !important;
  }
  /* the CLIA mark: the ship rides above and across the wordmark */
  .clia-wrap { position: relative !important; display: inline-block !important; }
  .clia-ship {
    position: absolute !important; right: -7px !important; top: -11px !important;
    width: 30px !important; height: 16px !important; pointer-events: none !important;
  }
  .clia-ship svg { width: 100%; height: 100%; display: block; }

  /* ── benefits: round wells, filled marks ──────────────────────────────*/
  .m-benefit-icon {
    border-radius: 50% !important;
    background: #e9eef6 !important;
    width: 34px !important; height: 34px !important;
  }
  .m-benefit-icon svg { width: 17px !important; height: 17px !important; color: #16294d !important; }
  .m-benefit b { color: #16294d !important; font-weight: 700 !important; font-size: 11.5px !important; }
  .m-benefit span { color: #5b6880 !important; }

  /* ── support bar ──────────────────────────────────────────────────────*/
  .m-support { background: #12234a !important; padding: 14px 14px !important; }
  .m-support-agent {
    width: 50px !important; height: 50px !important;
    background: transparent !important; overflow: hidden !important;
  }
  .m-support-agent svg { width: 50px !important; height: 50px !important; }
  .m-support-text b { font-size: 13.5px !important; color: #fff !important; }
  .m-support-text span { color: #b9c4d8 !important; font-size: 11.5px !important; }
  .m-support-cta {
    border: 1.6px solid #f0b429 !important;
    color: #f0b429 !important;
    border-radius: 26px !important;
    padding: 10px 14px !important;
    font-size: 11.5px !important; font-weight: 800 !important;
    letter-spacing: .5px !important;
  }
  .m-support-cta svg { width: 15px !important; height: 15px !important; }

  /* ── security row ─────────────────────────────────────────────────────*/
  .m-security { color: #5b6880 !important; font-size: 11.5px !important; }
  .m-security svg { width: 13px !important; height: 13px !important; }
  .m-security em { font-style: normal !important; }

  /* ── the referral nudge moves below the whole block ───────────────────*/
  .mob-referral-nudge { order: 10 !important; margin-top: 18px !important; }
}
@media (max-width: 899px) {

  /* ── 1. the cabin and traveller panels were being clipped ─────────────
     `.m-optionrow` was given `overflow:hidden` to round its top corners, and
     that clipped both dropdowns that open out of it — the cabin panel opened
     (its chevron flipped) but was cut off and invisible. The corners are
     rounded on the cells instead. */
  .m-optionrow { overflow: visible !important; }
  .m-optionrow > *:first-child { border-top-left-radius: 16px !important; }
  .m-optionrow > *:last-child  { border-top-right-radius: 16px !important; }
  .m-cabin-panel, .pax-dropdown { z-index: 1600 !important; }

  /* ── the cabin panel was the odd one out ──────────────────────────────
     Airport list, calendar and traveller panel are all navy with gold
     accents; the cabin panel was cream. It joins them rather than the other
     three changing, so the card keeps one dropdown language. */
  .m-cabin-panel {
    background: var(--navy2) !important;
    border: 1px solid rgba(201,168,76,.25) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,.10),
                0 8px 32px rgba(0,0,0,.50),
                0 32px 80px rgba(0,0,0,.40) !important;
    overflow: hidden !important;
  }
  .m-cabin-head {
    background: var(--navy) !important;
    border-bottom: 1px solid rgba(201,168,76,.20) !important;
    color: var(--gold) !important;
  }
  .m-cabin-opt {
    border-top: 1px solid rgba(201,168,76,.10) !important;
    color: #f3ede0 !important;
    background: transparent !important;
  }
  .m-cabin-opt:first-of-type { border-top: 0 !important; }
  .m-cabin-opt:active { background: rgba(201,168,76,.13) !important; }
  .m-cabin-opt-sub { color: #8890aa !important; }
  .m-cabin-opt[aria-selected="true"] { color: var(--gold2) !important; }
  .m-cabin-opt[aria-selected="true"]::after { color: var(--gold2) !important; }

  /* the swap disc must not sit on top of an open panel */
  .m-cabin.open ~ * .swap-btn,
  body:has(.m-cabin.open) .swap-btn,
  body:has(.pax-dropdown.open) .swap-btn { opacity: 0 !important; }

  /* ── 2. the slide-out menu sat under the chat button ──────────────────*/
  .mobile-menu { z-index: 400 !important; }
  body.menu-open .chat-widget-fab,
  body.menu-open .chat-panel { display: none !important; }

  /* ── 3. one typeface across the whole form ────────────────────────────
     The passenger +/- buttons were falling through to Arial. */
  .pax-btn, .pax-count, .pax-done,
  .form-card, .form-card input, .form-card button, .form-card select,
  .m-accred, .m-benefits, .m-support, .m-security {
    font-family: 'DM Sans', Inter, system-ui, -apple-system, sans-serif !important;
  }

  /* ── 4. the swap control ──────────────────────────────────────────────
     Navy disc, gold arrows, a white collar so it reads as a control sitting
     on the card rather than a hole in it. Sits on the FROM/TO divider —
     the exact top is set by script, since the caption line under a chosen
     airport changes the first field's height. */
  .form-row-main .swap-btn {
    right: 10px !important;
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    background: linear-gradient(150deg, #16294d, #0b1730) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(11,23,48,.28),
                0 0 0 1px rgba(11,23,48,.06) !important;
    z-index: 6 !important;
  }
  .form-row-main .swap-btn::before {
    width: 18px !important; height: 18px !important;
    background: #f0b429 !important;
  }
  .form-row-main .swap-btn:active { box-shadow: 0 2px 8px rgba(11,23,48,.3) !important; }
  /* the FROM/TO hairline stops short so it does not run under the disc */
  .form-row-main > div:nth-of-type(1)::after { right: 62px !important; }
}

/* ── 5. the flag returns on small phones ────────────────────────────────
   It was dropped below 430px for want of room. It comes back as the flag
   alone — no country code — and the logo and phone type give up the pixels. */
@media (max-width: 429px) {
  
  .lang-btn { padding: 0 !important; }
  .lang-btn .lang-code, .lang-btn svg { display: none !important; }
  .lang-btn .lang-flag {
    width: 24px !important; height: 24px !important; font-size: 15px !important;
  }
  .logo, .logo-text { font-size: 14.5px !important; }
  .logo-badge { padding: 2px 4px !important; font-size: 11.5px !important; }
  .navbar { gap: 5px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .nav-hamburger { width: 30px !important; }
}
@media (max-width: 899px) {

  /* ── shared surface ───────────────────────────────────────────────────*/
  .asap-ac-drop, .ac-dropdown, .recent-searches,
  .pax-dropdown, .m-cabin-panel, #calPanel {
    background: #ffffff !important;
    border: 1px solid #e5e8ee !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(13,28,55,.05),
                0 18px 44px -12px rgba(13,28,55,.26) !important;
    color: #16294d !important;
  }
  .asap-ac-drop, .ac-dropdown, .recent-searches { overflow-y: auto !important; }

  /* ── 1. airport list ──────────────────────────────────────────────────*/
  .asap-ac-drop {
    --asap-bg:       #ffffff;
    --asap-border:   #e5e8ee;
    --asap-text:     #16294d;
    --asap-muted:    #6b7280;
    --asap-hover:    #f4f7fc;
    --asap-metro-bg: #fafbfd;
    --asap-mark:     #8a6d1f;
    scrollbar-color: #cbd5e1 transparent;
  }
  .asap-ac-drop::-webkit-scrollbar-thumb,
  .ac-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
  .asap-ac-head {
    background: #f7f9fc !important;
    border-bottom: 1px solid #eaeef4 !important;
    color: #6b7280 !important;
  }
  .asap-ac-item, .ac-item {
    border-bottom: 0 !important;
    color: #16294d !important;
    background: transparent !important;
  }
  .asap-ac-item + .asap-ac-item::before { background: #eef1f6 !important; }
  .asap-ac-item:hover, .asap-ac-item.asap-focus,
  .ac-item:hover, .ac-item.focused { background: #f4f7fc !important; }
  .asap-ac-title { color: #16294d !important; }
  .asap-ac-sub   { color: #6b7280 !important; }
  .asap-ac-glyph { color: #9aa3b2 !important; }
  .asap-ac-item.asap-is-metro .asap-ac-glyph { color: #b8892a !important; }
  .asap-ac-title mark, .asap-ac-sub mark { color: #8a6d1f !important; }
  .asap-ac-code {
    color: #8a6d1f !important;
    background: rgba(201,168,76,.14) !important;
    border: 1px solid rgba(201,168,76,.34) !important;
  }
  .asap-ac-empty { color: #6b7280 !important; }
  /* the keyboard rail stays gold — it is a marker, not type */
  .asap-ac-item.asap-focus::after { background: var(--gold) !important; }

  /* ── 2. recent searches ───────────────────────────────────────────────*/
  .rs-below .rs-item { color: #16294d !important; }
  .rs-below .rs-item:hover { background: #f4f7fc !important; }

  /* ── 3. travellers ────────────────────────────────────────────────────*/
  .pax-dropdown .pax-dropdown-header {
    background: #f7f9fc !important;
    border-bottom: 1px solid #eaeef4 !important;
  }
  .pax-dropdown .pax-dropdown-title { color: #6b7280 !important; }
  .pax-dropdown .pax-row {
    border-top: 1px solid #eef1f6 !important;
    background: transparent !important;
  }
  .pax-dropdown .pax-row:first-of-type { border-top: 0 !important; }
  .pax-dropdown .pax-row:hover { background: #f8fafc !important; }
  .pax-dropdown .pax-row-label { color: #16294d !important; }
  .pax-dropdown .pax-row-sub   { color: #6b7280 !important; }
  .pax-dropdown .pax-count     { color: #16294d !important; }
  .pax-dropdown .pax-btn {
    background: #ffffff !important;
    border: 1.5px solid #dfe4ec !important;
    color: #16294d !important;
  }
  .pax-dropdown .pax-btn:hover:not(:disabled) {
    background: #f4f7fc !important;
    border-color: var(--gold) !important;
    color: #8a6d1f !important;
  }
  /* Done stays a gold fill with navy type — 10.4:1, and gold as a fill is
     exactly where it still works */
  .pax-dropdown .pax-done {
    background: linear-gradient(135deg, #f0b429, #e0a61a) !important;
    color: #14213d !important;
    box-shadow: 0 4px 14px rgba(224,166,26,.28) !important;
  }

  /* ── 4. cabin class ───────────────────────────────────────────────────*/
  .m-cabin-panel { overflow: hidden !important; }
  .m-cabin-head {
    background: #f7f9fc !important;
    border-bottom: 1px solid #eaeef4 !important;
    color: #6b7280 !important;
  }
  .m-cabin-opt {
    border-top: 1px solid #eef1f6 !important;
    color: #16294d !important;
    background: transparent !important;
    position: relative !important;
  }
  .m-cabin-opt:first-of-type { border-top: 0 !important; }
  .m-cabin-opt:active { background: #f4f7fc !important; }
  .m-cabin-opt-sub { color: #6b7280 !important; }
  /* the chosen cabin: navy and heavier, with a gold rail and tick */
  .m-cabin-opt[aria-selected="true"] {
    color: #16294d !important;
    font-weight: 800 !important;
    background: #f8fafd !important;
  }
  .m-cabin-opt[aria-selected="true"]::after { color: var(--gold2) !important; }
  .m-cabin-opt[aria-selected="true"]::before {
    content: '' !important;
    position: absolute !important; left: 0 !important; top: 6px !important; bottom: 6px !important;
    width: 3px !important; border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
  }

  /* ── 5. calendar ──────────────────────────────────────────────────────*/
  #calOverlay { background: rgba(13,28,55,.34) !important; }
  #calHeader {
    background: #f7f9fc !important;
    border-bottom: 1px solid #eaeef4 !important;
  }
  #calBody, #calM0, #calM1 { background: #ffffff !important; }
  #calTitles span { color: #16294d !important; }
  #calPrev, #calNext, #calClose {
    background: #ffffff !important;
    border: 1px solid #e2e7ef !important;
    color: #16294d !important;
  }
  #calPrev svg, #calNext svg, #calClose svg { stroke: #16294d !important; }
  .cdow  { color: #7b8495 !important; }
  .cday  { color: #16294d !important; }
  .cpast { color: #c2c9d4 !important; }
  /* the hover wash was painting over the selected end date — it now excludes
     selected cells, and only applies where a pointer can actually hover */
  @media (hover: hover) {
    .cday:hover:not(.cpast):not(.cempty):not(.csel):not(.crs):not(.cre):not(.crange) {
      background: #f1f5fb !important;
    }
  }
  .ctoday { color: #8a6d1f !important; font-weight: 700 !important; }
  .ctoday::after { background: var(--gold) !important; }
  /* the range: a pale navy wash, the ends solid navy */
  .crange { background: #eaf0fa !important; color: #16294d !important; }
  /* both ends of a range are navy discs. `.cre` carried a pale fill from the
     dark theme, which left the return date as white type on near-white. */
  .csel, .crs, .cre {
    background: #16294d !important; color: #ffffff !important;
    font-weight: 700 !important;
  }
  #calSep { background: #eef1f6 !important; }
  #calFoot {
    background: #f7f9fc !important;
    border-top: 1px solid #eaeef4 !important;
  }
  #calInfo   { color: #4a5568 !important; }
  #calInfo b { color: #16294d !important; }
  #calClearBtn { color: #6b7280 !important; background: transparent !important; }
  #calDoneBtn {
    background: #16294d !important; color: #ffffff !important;
    border: 0 !important;
  }
  #calDoneBtn:disabled { background: #e5e8ee !important; color: #a3acbb !important; }
}
@media (max-width: 899px) {

  /* ── 1. controls that leak between 621px and 899px ────────────────────
     The page's own mobile rules stop at 620px, but this build's mobile
     design runs to 899px. In the gap, four desktop pieces reappeared on top
     of the mobile card — including a second cabin <select>, which is the
     stray gold "Economy" box. Each is a duplicate of something the mobile
     layout already provides. */
  .cabin-selector { display: none !important; }   /* the new cabin panel replaces it */
  .float-call     { display: none !important; }   /* navbar + support bar already call */
  .hero-eyebrow   { display: none !important; }   /* .mob-referral-nudge says this */
  .form-extras    { display: none !important; }   /* promo + badges live lower down */

  /* ── 2. the type stack ────────────────────────────────────────────────
     DM Sans arrives from Google Fonts, so on a cold 4G load the first paint
     is in a fallback. Naming close system faces first for each platform
     keeps that first paint from reflowing badly: SF on iOS, Roboto on
     Android, Segoe on Windows. `display=swap` is already on the link. */
  body, .form-card, .form-card input, .form-card button, .form-card select,
  .m-accred, .m-benefits, .m-support, .m-security,
  .asap-ac-drop, .pax-dropdown, .m-cabin-panel, #calPanel {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-text-size-adjust: 100%;
  }

  /* ── 3. a floor on size ───────────────────────────────────────────────
     Nothing below 11px, and captions land on 11–12. Anything smaller is
     guesswork on a phone held at arm's length. */
 
  .m-accred-head      { font-size: 11px !important; letter-spacing: 1.6px !important; }
  .m-accred-text i    { font-size: 11px !important; line-height: 1.35 !important; }
  .m-benefit b        { font-size: 12.5px !important; line-height: 1.3 !important; }
  .m-benefit span     { font-size: 11px !important; line-height: 1.35 !important; }
  .m-benefit, .m-benefit b, .m-benefit span { min-width: 0 !important; }
  .m-security         { font-size: 12px !important; }
  .m-support-text span{ font-size: 12.5px !important; }
  .rf-sub             { font-size: 13px !important; }
  .form-row-main label, .form-row-main .field-label { font-size: 11.5px !important; }
  .mob-referral-nudge { font-size: 12.5px !important; }
  .rs-below .rs-title { font-size: 11px !important; }
  .stat-label         { font-size: 11.5px !important; }

  /* every text input stays at 16px: below that iOS zooms the page on focus
     and the layout jumps */
  .form-card input, .form-card select, #promoInput, #nlEmail, #chatInput {
    font-size: 16px !important;
  }

  /* ── 3b. the same floor, applied to the sections below the hero ────────
     These are the page's own micro-labels, most at 9–10px. On a phone that
     is guesswork; 11px is the lowest that stays readable at arm's length. */
  .deal-badge, .deal-cabin-tag, .deal-pp, .deal-airline,
  .route-price-lbl, .route-cta,
  .cabin-card-badge, .cabin-card-from,
  .cta-band-price-label, .newsletter-badge,
  .chat-time, .cp-msg-time, .chat-fab-badge,
  .sec-eyebrow, .ref-code-copy {
    font-size: 11px !important;
  }
  /* the registered mark rides small by convention, but not at 6px */
  .m-accred-text sup { font-size: 8px !important; }

  /* Two sections carry a decorative layer a few px wider than the viewport
     at some sizes. It predates this work (it is present in v15). `clip`
     trims it without creating a scroll container. */
  .referral-sec, .sec { overflow-x: clip !important; }

  /* ── 4. the badge row cannot hold four captions at a legible size ──────
     At 390px each column is ~88px. "International Airlines Travel Agent
     Network" needs 8.5px to fit there, which is unreadable. The acronym is
     the part people recognise, so below 480px the captions step out and the
     acronyms carry the row; above it they return at 11px. */
  /* The accreditation body's full name is the substance of the claim — the
     acronym alone is not — so the captions stay. Four columns at 390px means
     10px, under the 11px floor used elsewhere; that is the trade for keeping
     the reference's four-across row. Switching `.m-accred-grid` to
     `repeat(2, 1fr)` would return them to 12px. */
  .m-accred-text i {
    display: -webkit-box !important;
    font-size: 10px !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 4 !important;
    margin-top: 3px !important;
  }
  .m-accred-text b { font-size: 15px !important; }
  .m-accred-item   { padding: 6px 3px !important; }
}

/* ── the benefits card ─────────────────────────────────────────────────
   The reference lays these out three across, but that reference is a ~1070px
   render. At 390px each column is ~110px, which forces either 9px type or
   words breaking mid-syllable ("Guarant / ee"). Below 481px they stack: same
   round wells, same marks, same copy, at a size that can actually be read.
   Above 481px the three columns return. */
@media (max-width: 480px) {
  .m-benefits { grid-template-columns: 1fr !important; padding: 8px !important; }
  .m-benefit {
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 8px !important;
    border-left: 0 !important;
    border-bottom: 1px solid #e5e8ee !important;
  }
  .m-benefit:last-child { border-bottom: 0 !important; }
  .m-benefit-icon { width: 38px !important; height: 38px !important; }
  .m-benefit-icon svg { width: 19px !important; height: 19px !important; }
  .m-benefit b    { font-size: 14px !important; }
  .m-benefit span { font-size: 12px !important; }
}

@media (max-width: 379px) {
  /* four acronyms at 15px will not sit in 320px of column */
  .m-accred-text b { font-size: 13.5px !important; }
  .m-accred-text i { font-size: 9px !important; }
  .m-accred-item   { padding: 6px 2px !important; }
}

@media (min-width: 481px) and (max-width: 899px) {
  /* more room per column above 480px, so the caption clears the floor */
  .m-accred-text i { display: -webkit-box !important; font-size: 11.5px !important; }
  .m-accred-text b { font-size: 16px !important; }
}