/* ==========================================================================
   eTripBooking.com — home
   Tokens and rules come from DESIGN.md. Motion: transform and opacity only.
   ========================================================================== */

:root {
  /* Colour: eTripBooking blue #2C45F5 from the logo, with an ice-blue accent (owner's choice, 6 Nov 2026) */
  --brand: #2c45f5;
  --brand-press: #1f36d8;
  --brand-tint: #e8ecff;
  --sun: #b7c8ff;
  --sun-press: #a3b8ff;
  --ink: #0d1533;
  --ink-2: #18224a;
  --ink-soft: #4a5474;
  --ink-mute: #5c6584;
  --paper: #f4f6fb;
  --surface: #ffffff;
  --line: #dfe3ee;
  --line-strong: #c6ccdd;
  --snow: #f7f8fc;
  --on-dark: #eef0f8;
  --on-dark-soft: #a9b1cf;
  --dark-line: rgb(255 255 255 / 12%);
  --error: #b42318;
  --error-bg: #fdf1ef;

  /* Type */
  --font: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape and depth */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-pill: 999px;
  --shadow-float: 0 1px 2px rgb(13 21 51 / 6%), 0 18px 40px -18px rgb(13 21 51 / 28%);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-reel: 480ms;

  /* Layout */
  --wrap: 1320px;
  --gutter: 24px;
  --inset: 12px;
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --inset: 8px; --r-xl: 22px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
input, select { accent-color: var(--ink); caret-color: var(--ink); }

::selection { background: #cfd8ff; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--snow);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease);
}
.skip:focus { transform: none; }

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(80px, 9vw, 128px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }

.btn--brand { background: var(--brand); color: var(--snow); }
.btn--brand:hover { background: var(--brand-press); }

.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { background: var(--sun-press); }

.btn--ink { background: var(--ink); color: var(--snow); }
.btn--ink:hover { background: var(--ink-2); }

.btn--line { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }

.btn--glass {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 14%);
  color: var(--snow);
}
.btn--glass:hover { background: rgb(255 255 255 / 22%); }

.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

/* ---------- Type ---------- */

.sec-title {
  max-width: 20ch;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.sec-title .soft { color: var(--ink-mute); font-weight: 400; }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: 36px;
}

.sec-note {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.sec-head > .sec-note { margin-top: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: fixed;
  inset: calc(var(--inset) + 12px) 0 auto;
  z-index: 50;
  pointer-events: none;
}

.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100% - 2 * var(--gutter) - 2 * var(--inset), 1240px);
  height: 62px;
  margin-inline: auto;
  padding: 0 8px 0 14px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 70%);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  pointer-events: auto;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav.is-scrolled .nav__bar {
  border-color: var(--line);
  background: rgb(255 255 255 / 90%);
  box-shadow: var(--shadow-float);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.035em;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--snow);
  font-size: 19px;
  font-weight: 650;
  line-height: 1;
  padding-bottom: 2px;
}
.brand__tld { color: var(--ink-mute); font-weight: 450; }

.nav__links {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__links a:hover { background: rgb(13 21 51 / 6%); color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: 6px; }


.nav__quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease);
}
.nav__quiet:hover { color: var(--ink); }

.nav__menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.nav__menu:hover { background: rgb(13 21 51 / 6%); }
.nav__menu .icon { width: 22px; height: 22px; }

.nav__sheet {
  display: grid;
  gap: 2px;
  width: min(100% - 2 * var(--gutter) - 2 * var(--inset), 1240px);
  margin: 8px auto 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.nav__sheet.is-open { opacity: 1; transform: none; }
/* A closed sheet must not exist for the pointer, or it swallows hovers and clicks under the nav. */
.nav__sheet[hidden] { display: none; }
.nav__sheet:not(.is-open) { pointer-events: none; }
@media (min-width: 1081px) {
  .nav__sheet { display: none; }
}
.nav__sheet a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 500;
}
.nav__sheet a:hover { background: var(--paper); }

@media (max-width: 1080px) {
  .nav__links, .nav__quiet { display: none; }
  .nav__end { margin-left: auto; }
  .nav__menu { display: grid; }
}
@media (max-width: 480px) {
  .cur-wrap { display: none; }
  .nav__bar { height: 58px; }
}

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

.hero { position: relative; padding: var(--inset) var(--inset) 0; }

.hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Sized so the search fields always land inside the first screen. */
  min-height: clamp(580px, calc(100svh - 72px), 880px);
  padding: clamp(112px, 14vh, 150px) 24px 220px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #a9c8e6;
  text-align: center;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* A paper wash under the copy so navy type holds on cloud, sky and the jet's nose alike. */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 40% at 50% 30%, rgb(243 245 247 / 72%), rgb(243 245 247 / 0%) 100%),
    linear-gradient(to bottom, rgb(243 245 247 / 34%), rgb(243 245 247 / 0%) 46%);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 5px 16px 5px 5px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 66%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13.5px;
  font-weight: 500;
}
.hero__badge-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--snow);
}
.hero__badge-icon .icon { width: 14px; height: 14px; stroke-width: 2; }

.hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.hero__lede {
  max-width: 36em;
  margin-top: 20px;
  color: #1a2446;
  font-size: clamp(16px, 1.3vw, 18.5px);
  font-weight: 450;
  line-height: 1.5;
  text-wrap: balance;
}

/* Copy settles in once on load. */
.hero__copy > * { animation: settle 520ms var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 70ms; }
.hero__copy > :nth-child(3) { animation-delay: 140ms; }
@keyframes settle {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Floating route chips, Navan-style, over the photo. */
.hero__chip {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 12px 16px 12px 14px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 16px;
  background: rgb(255 255 255 / 78%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float);
  text-align: left;
  animation: settle 520ms var(--ease) 260ms both;
}
.hero__chip--flight { left: clamp(24px, 7vw, 120px); bottom: 250px; }
.hero__chip--stay { right: clamp(24px, 7vw, 120px); bottom: 330px; }
.hero__chip-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.hero__chip-route .icon { width: 16px; height: 16px; }
.hero__chip-meta { color: var(--ink-soft); font-size: 13px; }
.hero__chip-meta .mono { color: var(--ink); }

@media (max-width: 1180px) {
  .hero__chip { display: none; }
}

/* Short laptop screens: tighter top and type so headline, jet and search all fit. */
@media (max-height: 800px) and (min-width: 761px) {
  .hero__frame { padding-top: 96px; }
  .hero__badge { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(44px, 9.4vh, 84px); }
  .hero__lede { margin-top: 14px; }
  .hero__chip--flight { bottom: 200px; }
  .hero__chip--stay { bottom: 260px; }
}

/* ---------- Search dock: the paper rises into the photo ---------- */

.dock {
  --rise: 124px;
  --fillet: 26px;
  position: relative;
  z-index: 3;
  width: min(100% - 48px, 1200px);
  margin: calc(-1 * var(--rise)) auto 0;
  padding: 16px 16px 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--paper);
}

/* Concave fillets where the dock meets the bottom edge of the photo. */
.dock::before,
.dock::after {
  content: "";
  position: absolute;
  top: calc(var(--rise) - var(--fillet));
  width: var(--fillet);
  height: var(--fillet);
  pointer-events: none;
}
.dock::before {
  left: calc(-1 * var(--fillet));
  background: radial-gradient(circle at 0 0, transparent calc(var(--fillet) - 0.5px), var(--paper) var(--fillet));
}
.dock::after {
  right: calc(-1 * var(--fillet));
  background: radial-gradient(circle at 100% 0, transparent calc(var(--fillet) - 0.5px), var(--paper) var(--fillet));
}

.dock__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 14px;
}

.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--ink); background: var(--paper); }
.tab[aria-selected="true"] { background: var(--brand-tint); color: var(--brand); }
.tab .icon { width: 17px; height: 17px; }

.seg { display: inline-flex; gap: 4px; }
.seg[hidden] { display: none; }
.seg label { position: relative; cursor: pointer; }
.seg input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { border-color: var(--brand); background: var(--surface); color: var(--brand); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The search row: one white bar, cells divided by hairlines. */
.search {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.9fr 0.9fr 1.1fr auto;
  align-items: stretch;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(13 21 51 / 4%);
}
.search[hidden] { display: none; }
.search--hotels { grid-template-columns: 1.7fr 0.9fr 0.9fr 1.1fr auto; }

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 18px;
  border-radius: 18px;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field + .field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}
.field:hover,
.field:focus-within { background: var(--paper); }
.field:hover::before,
.field:focus-within::before,
.field:hover + .field::before,
.field:focus-within + .field::before { opacity: 0; }
.field:has(input:focus-visible),
.field:has(.pax-toggle:focus-visible),
.field:has(.date-btn:focus-visible),
.field.is-active { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand); }

.field label,
.field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.field label .icon,
.field__label .icon { width: 14px; height: 14px; }

.field input,
.pax-toggle {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-align: left;
  text-overflow: ellipsis;
  outline: none;
}
.field input::placeholder { color: #7f8c99; font-weight: 450; }
.field input[type="date"] { font-variant-numeric: tabular-nums; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.field input:disabled { color: var(--ink-mute); }
.field.is-off { opacity: 0.45; }
.field.is-off label { cursor: default; }

.pax-toggle { cursor: pointer; white-space: nowrap; overflow: hidden; }

.field.is-invalid { background: var(--error-bg); box-shadow: inset 0 0 0 1.5px var(--error); }
.field.is-invalid::before, .field.is-invalid + .field::before { opacity: 0; }
.field.is-invalid label { color: var(--error); }

.swap {
  position: absolute;
  top: 50%;
  right: -19px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.swap:hover { border-color: var(--ink); }
.swap.is-turned { transform: translateY(-50%) rotate(180deg); }
.swap .icon { width: 16px; height: 16px; }
.field--from + .field { padding-left: 30px; }

.search__go {
  min-height: 66px;
  margin-left: 6px;
  padding: 0 28px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 600;
}

.search__error {
  position: absolute;
  left: 16px;
  top: calc(100% + 10px);
  color: var(--error);
  font-size: 14px;
  font-weight: 500;
}
.search__error:empty { display: none; }

/* Travellers popover */
.field--pax { position: relative; }
.pax {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 340px;
  padding: 6px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: left;
  transform-origin: top right;
  animation: pop 200ms var(--ease) both;
}
.pax[hidden] { display: none; }
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pax__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.pax__name { display: block; font-weight: 550; }
.pax__hint { display: block; color: var(--ink-mute); font-size: 13px; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.stepper button:hover:not(:disabled) { border-color: var(--ink); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper .icon { width: 16px; height: 16px; }
.stepper output { min-width: 2ch; font-family: var(--mono); font-size: 16px; text-align: center; }
.pax__select { display: grid; gap: 8px; padding: 14px 0 4px; }
.pax__select select {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}
.pax__done { width: 100%; margin-top: 14px; }


/* Hero responsive */
@media (max-width: 1120px) {
  .search,
  .search--hotels {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .field { background: var(--surface); border: 1px solid var(--line); }
  .field:hover, .field:focus-within { background: var(--surface); border-color: var(--line-strong); }
  .field + .field::before { display: none; }
  .field--from, .field--from + .field { grid-column: span 2; }
  .search--hotels .field--wide { grid-column: span 4; }
  .search__go { margin: 0; }
  .field--from + .field { padding-left: 30px; }
}

@media (max-width: 760px) {
  .hero__frame {
    min-height: 600px;
    padding: 112px 16px 132px;
  }
  .hero__photo { object-position: 50% 66%; }
  .hero__lede { font-size: 16px; }
  .dock {
    --rise: 64px;
    --fillet: 18px;
    width: calc(100% - 24px);
    padding: 12px 10px 0;
  }
  .dock__bar { padding-bottom: 12px; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  .search, .search--hotels { grid-template-columns: 1fr 1fr; }
  .field--from, .field--from + .field, .search--hotels .field--wide { grid-column: span 2; }
  .field--pax, .search__go { grid-column: span 2; }
  .field--from + .field { padding-left: 18px; }
  .swap { top: auto; bottom: -23px; right: 18px; transform: none; }
  .swap.is-turned { transform: rotate(180deg); }
  .pax { left: 0; right: 0; width: auto; transform-origin: top center; }
  .search__error { position: static; grid-column: 1 / -1; padding: 2px 4px 0; }
}
@media (max-width: 400px) {
  .tab .icon { display: none; }
}

/* ==========================================================================
   Popular destinations — the reel
   Panels are stacked and slid with translateX; nothing changes width.
   ========================================================================== */

.reel {
  --open-w: 50%;
  --closed-w: 120px;
  position: relative;
  z-index: 0; /* own stacking context, so panel z-indexes never cover the travellers popover */
  height: clamp(480px, 64vh, 600px);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink);
}

.reel__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--open-w);
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--x, 0px), 0, 0);
  transition: transform var(--t-reel) var(--ease);
}
/* The 3px seam between panels. */
.reel__panel + .reel__panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: 3px;
  background: var(--paper);
}

.reel__photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  width: var(--open-w);
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--ix, 0px), 0, 0) scale(1.05);
  transition: transform 700ms var(--ease);
}
.reel__panel.is-open .reel__photo { transform: translate3d(0, 0, 0) scale(1); }

/* Closed panels sit a step darker; the open one comes up to full light. */
.reel__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgb(8 12 36 / 30%);
  transition: opacity var(--t-reel) var(--ease);
}
.reel__panel.is-open .reel__shade { opacity: 0; }

.reel__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(8 12 36 / 88%) 0%, rgb(8 12 36 / 42%) 42%, rgb(8 12 36 / 8%) 100%);
}

.reel__spine {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--snow);
  cursor: pointer;
}
.reel__spine:focus-visible { outline: none; }
.reel__panel.is-open .reel__spine { cursor: default; }

/* Code pinned to the top, name to the bottom: every panel lines up whatever the name's length. */
.reel__spine-in {
  position: absolute;
  top: 24px;
  bottom: 28px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: var(--closed-w);
  transform: translate3d(var(--lx, 0px), 0, 0);
  transition: transform var(--t-reel) var(--ease), opacity 300ms var(--ease) 180ms;
}
.reel__panel.is-open .reel__spine-in {
  opacity: 0;
  transition: transform var(--t-reel) var(--ease), opacity 140ms var(--ease);
}
.reel__spine-name {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.reel__code {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgb(8 12 36 / 55%);
  font-size: 12.5px;
}
/* Keyboard focus on a spine shows on the panel's own headline. */
.reel__panel:has(.reel__spine:focus-visible) .reel__name {
  outline: 2px solid var(--sun);
  outline-offset: 8px;
  border-radius: 6px;
}
.reel__panel:not(.is-open):has(.reel__spine:focus-visible) .reel__code {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}

.reel__body {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 14px;
  width: var(--open-w);
  padding: clamp(28px, 3.2vw, 44px);
  color: var(--snow);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.reel__panel.is-open .reel__body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 380ms var(--ease) 170ms, transform 380ms var(--ease) 170ms;
}

.reel__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(8 12 36 / 55%);
  font-size: 13px;
}
.reel__route .icon { width: 14px; height: 14px; }
.reel__route span { color: rgb(255 255 255 / 72%); margin-left: 4px; }

.reel__name {
  font-size: clamp(46px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.reel__line { max-width: 44ch; color: rgb(255 255 255 / 84%); font-size: 16px; }

.reel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
  margin-top: 8px;
}
.reel__fare { color: rgb(255 255 255 / 72%); font-size: 13.5px; line-height: 1.3; }
.reel__fare strong { display: block; color: var(--snow); font-size: 24px; font-weight: 500; }
.reel__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.reel.is-resizing .reel__panel,
.reel.is-resizing .reel__photo,
.reel.is-resizing .reel__spine-in { transition: none; }

/* Under 760px the reel becomes a swipeable row of open cards. */
@media (max-width: 760px) {
  .reel {
    display: flex;
    gap: 12px;
    height: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    border-radius: 0;
    background: none;
    scrollbar-width: none;
  }
  .reel::-webkit-scrollbar { display: none; }
  .reel__panel {
    position: relative;
    flex: 0 0 86%;
    width: auto;
    height: 500px;
    border-radius: var(--r-lg);
    transform: none;
    scroll-snap-align: start;
  }
  .reel__panel + .reel__panel::before,
  .reel__spine,
  .reel__shade { display: none; }
  .reel__photo, .reel__panel.is-open .reel__photo { width: 100%; transform: none; }
  .reel__body {
    width: 100%;
    padding: 22px;
    gap: 10px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .reel__line { font-size: 15px; }
}

/* ==========================================================================
   About — heading row and four tiles
   ========================================================================== */

.about { padding-top: 0; }

.about__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  gap: 24px 64px;
  margin-bottom: 40px;
}
.about__lede {
  max-width: 50ch;
  justify-self: end;
  color: var(--ink-soft);
  font-size: 17px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 230px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tile__big {
  font-size: clamp(46px, 4.8vw, 68px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.tile__unit {
  margin-left: 8px;
  color: var(--ink-mute);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tile__text { max-width: 30ch; color: var(--ink-soft); font-size: 15px; }
.tile--sun { background: var(--sun); }
.tile--sun .tile__text { color: rgb(13 21 51 / 82%); }

@media (max-width: 960px) {
  .about__head { grid-template-columns: 1fr; }
  .about__lede { justify-self: start; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; gap: 20px; padding: 24px; }
}

/* ==========================================================================
   Hotels
   ========================================================================== */

.stays { padding-top: 0; }

.stays__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.city-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  max-width: 100%;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}
.city-search:focus-within { border-color: var(--brand); }
.city-search .icon { color: var(--ink-mute); }
.city-search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
}
.city-search input::placeholder { color: #7f8c99; }

.arrows { display: flex; gap: 8px; }
.arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.arrow:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--snow); }
.arrow:disabled { opacity: 0.35; cursor: default; }

.stays__track {
  display: grid;
  grid-auto-columns: calc((100% - 3 * 16px) / 3.35);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.stays__track::-webkit-scrollbar { display: none; }
.stays__track > li { scroll-snap-align: start; }

/* On wide screens the row runs off the right edge of the window, so the cut card reads as "more". */
@media (min-width: 1081px) {
  .stays__track {
    margin-right: calc((100% - 100vw) / 2);
    padding-right: calc((100vw - 100%) / 2);
  }
}

.stay {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.stay__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line);
}
.stay__media img { width: 100%; height: 100%; object-fit: cover; }
.stay__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgb(13 21 51 / 78%);
  color: var(--snow);
  font-size: 12.5px;
  font-weight: 500;
}
.stay__save {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.stay__save:active { transform: scale(0.92); }
.stay__save[aria-pressed="true"] { color: var(--brand); }
.stay__save[aria-pressed="true"] .icon { fill: var(--brand); }

.stay__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px 8px 6px;
}
.stay__title { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.stay__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-mute); font-size: 13.5px; }
.stay__meta span { display: inline-flex; align-items: center; gap: 6px; }
.stay__meta .icon { width: 15px; height: 15px; }
.stay__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.stay__price { color: var(--ink-mute); font-size: 13px; line-height: 1.3; }
.stay__price strong { display: block; color: var(--ink); font-size: 21px; font-weight: 500; }
.stay:hover .btn--line { border-color: var(--ink); }

@media (max-width: 1080px) {
  .stays__track { grid-auto-columns: calc((100% - 16px) / 2.2); }
}
@media (max-width: 640px) {
  .stays__track {
    grid-auto-columns: 84%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .stays__tools { width: 100%; }
  .city-search { width: 100%; }
  .arrows { display: none; }
}

/* ==========================================================================
   Departures board — the signature moment
   ========================================================================== */

.board-sec {
  margin-inline: var(--inset);
  padding-block: clamp(72px, 8vw, 112px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--on-dark);
}
.board-sec :focus-visible { outline-color: var(--sun); }
.board-sec .sec-title { color: var(--snow); }
.board-sec .sec-title .soft { color: var(--on-dark-soft); }

.board-sec__in {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) 1.6fr;
  align-items: start;
  gap: 48px 64px;
}
.board-sec__copy p { max-width: 40ch; margin: 18px 0 28px; color: var(--on-dark-soft); }

.board {
  --cell: clamp(15px, 1.35vw, 19px);
  padding: 14px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  background: #070c24;
}
.board {
  --w-code: calc(3 * 1.12 * var(--cell) + 4px);
  --w-city: calc(10 * 1.12 * var(--cell) + 18px);
  --w-time: calc(7 * 1.12 * var(--cell) + 12px);
}
.board__head,
.board__row {
  display: grid;
  grid-template-columns: var(--w-code) var(--w-city) var(--w-time) 1fr 40px;
  align-items: center;
  gap: 18px;
}
.board__head {
  padding: 4px 12px 12px;
  color: #8d95b8;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.board__h-fare { justify-self: end; }

.board__row {
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background-color var(--t-fast) var(--ease);
}
.board__row:hover,
.board__row:focus-visible { background: rgb(255 255 255 / 6%); }
.board__rows li + li .board__row { margin-top: 2px; }

.flaps {
  display: inline-flex;
  gap: 2px;
  font-family: var(--mono);
  font-size: var(--cell);
  font-weight: 500;
  line-height: 1;
  white-space: pre;
  color: #edf0f3;
}
.flaps--fare { justify-self: end; color: var(--sun); }

.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.12em;
  height: 1.6em;
  border-radius: 3px;
  background: #151d40;
  perspective: 160px;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 40%);
}
/* The hinge line across the middle of each flap. */
.flap::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgb(0 0 0 / 55%);
}
.flap__c { display: block; backface-visibility: hidden; }

.board__city { display: none; }

.board__go {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  color: var(--snow);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.board__go .icon { width: 16px; height: 16px; }
.board__row:hover .board__go,
.board__row:focus-visible .board__go { border-color: var(--sun); background: var(--sun); color: var(--ink); }

@media (max-width: 1080px) {
  .board-sec__in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .board { --cell: 14px; padding: 8px; }
  .board__head, .board__row { grid-template-columns: var(--w-code) 1fr auto 32px; gap: 12px; }
  .board__head { padding: 4px 8px 10px; }
  .board__h-time, .flaps--time, .flaps--city { display: none; }
  .board__h-city { display: block; }
  .board__city { display: block; font-size: 15px; font-weight: 500; }
  .board__row { padding: 8px; }
  .board__go { width: 32px; height: 32px; }
}

/* ==========================================================================
   How booking works: four stages, each with a small preview
   ========================================================================== */

.how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: step;
}
.how__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.how__visual {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-bottom: 10px;
  padding: 18px;
  border-radius: calc(var(--r-xl) - 8px);
  background: linear-gradient(160deg, var(--brand-tint) 0%, var(--paper) 70%);
}
.how__n { padding: 0 12px; color: var(--brand); font-size: 13px; font-weight: 600; }
.how__title { padding: 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.how__line { padding: 0 12px; color: var(--ink-soft); font-size: 15px; }

/* Mini product previews */
.mini {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(13 21 51 / 5%), 0 14px 28px -18px rgb(13 21 51 / 30%);
  font-size: 13px;
}
.mini .icon { width: 14px; height: 14px; flex: none; }
.mini__route { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.mini__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.mini__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  min-height: 34px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--snow);
  font-weight: 600;
}
.mini__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-soft); }
.mini__row span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.mini__row .mono { color: var(--ink); }
.mini__row--total { padding-top: 8px; border-top: 1px dashed var(--line-strong); color: var(--ink); font-weight: 600; }
.mini__row--total .mono { color: var(--brand); font-weight: 600; }
.mini__doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--paper);
  font-weight: 550;
}
.mini__doc .icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--snow);
  stroke-width: 2.5;
}
.mini__ref { color: var(--ink-mute); font-size: 12px; }
.mini__ref .mono { color: var(--ink); font-weight: 600; }
.mini--chat { gap: 8px; background: var(--paper); }
.mini__bubble {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--surface);
  line-height: 1.4;
}
.mini__bubble--me {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--brand);
  color: var(--snow);
}

/* The Singapore desk panel */
.desk {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--on-dark);
  scroll-margin-top: 110px;
}
.desk :focus-visible { outline-color: var(--sun); }
.desk__copy { padding: clamp(24px, 3.4vw, 48px); }
.desk__eyebrow { color: var(--sun); font-size: 14px; font-weight: 600; }
.desk__title {
  margin-top: 10px;
  color: var(--snow);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.038em;
}
.desk__lede { max-width: 46ch; margin-top: 14px; color: var(--on-dark-soft); font-size: 16.5px; }
.desk__does {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 28px 0 32px;
}
.desk__does li { display: flex; align-items: center; gap: 10px; color: var(--snow); font-size: 15px; }
.desk__does .icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgb(183 200 255 / 16%);
  color: var(--sun);
  stroke-width: 2.5;
}
.desk__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.desk__actions .icon { width: 17px; height: 17px; }
.desk__hours { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--on-dark-soft); font-size: 14px; }
.desk__hours .icon { width: 16px; height: 16px; }
.desk__media { position: relative; min-height: 360px; overflow: hidden; border-radius: calc(var(--r-xl) - 6px); }
.desk__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1180px) {
  .how__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .desk { grid-template-columns: 1fr; }
  .desk__media { min-height: 260px; order: -1; }
}
@media (max-width: 600px) {
  .how__grid { grid-template-columns: 1fr; }
  .desk__does { grid-template-columns: 1fr; }
  .desk__actions .btn { width: 100%; }
}

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

.foot {
  margin: 0 var(--inset) var(--inset);
  padding: 72px 0 28px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--on-dark-soft);
}
.foot :focus-visible { outline-color: var(--sun); }

.brand--light { color: var(--snow); }
.brand--light .brand__mark { background: var(--sun); color: var(--ink); }
.brand--light .brand__tld { color: var(--on-dark-soft); }

.foot__top {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 48px 64px;
  padding-bottom: 56px;
}
.foot__brand p { max-width: 34ch; margin-top: 16px; font-size: 15px; }

.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.foot__h { margin-bottom: 14px; color: var(--snow); font-size: 14px; font-weight: 600; }
.foot__cols li a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 14.5px;
  transition: color var(--t-fast) var(--ease);
}
.foot__cols li a:hover { color: var(--snow); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  font-size: 13.5px;
}

@media (max-width: 960px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 560px);
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--snow);
  font-size: 14.5px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.toast .icon { color: var(--sun); }
.toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast__action {
  flex: none;
  min-height: 36px;
  margin-left: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.toast__action:hover { background: var(--sun-press); }
.toast__action[hidden] { display: none; }

/* Reduced transparency: the remaining glass becomes solid. */
@media (prefers-reduced-transparency: reduce) {
  .nav__bar, .hero__chip, .hero__badge, .desk__card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}

/* ==========================================================================
   Reduced motion: state changes stay, movement goes.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   Date buttons, airport dropdown and calendar (replace the browser's own)
   ========================================================================== */

.search { position: relative; }
.field--date { cursor: pointer; }

.date-btn {
  width: 100%;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.date-btn.is-empty { color: #7f88a3; font-weight: 450; }
.date-btn:disabled { color: var(--ink-mute); cursor: default; }

/* ---------- Airport / city dropdown ---------- */

.combo {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: max(100%, 400px);
  max-height: min(380px, 60vh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: left;
  animation: pop 180ms var(--ease) both;
  scrollbar-width: thin;
}
.combo[hidden] { display: none; }
.city-search { position: relative; }
.city-search .combo { width: 100%; }

.combo__group {
  padding: 10px 10px 6px;
  color: var(--ink-mute);
  font-size: 12.5px;
  font-weight: 550;
}
.combo__opt {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.combo__opt.is-active { background: var(--brand-tint); }
.combo__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-soft);
}
.combo__opt.is-active .combo__icon { background: var(--surface); color: var(--brand); }
.combo__icon .icon { width: 17px; height: 17px; }
.combo__text { display: grid; min-width: 0; line-height: 1.3; }
.combo__main { overflow: hidden; color: var(--ink); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.combo__sub { overflow: hidden; color: var(--ink-mute); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.combo__code {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.combo__opt.is-active .combo__code { border-color: rgb(44 69 245 / 35%); color: var(--brand); }
.combo__opt[aria-selected="true"] .combo__main::after {
  content: "  ✓";
  color: var(--brand);
}
.combo__empty { padding: 18px 12px; color: var(--ink-mute); font-size: 14px; }

/* ---------- Calendar ---------- */

.cal {
  position: absolute;
  top: calc(100% + 10px);
  left: var(--cal-left, 0px);
  z-index: 40;
  width: 700px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: left;
  animation: pop 200ms var(--ease) both;
}
.cal[hidden] { display: none; }

.cal__top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--months, 2), 1fr);
  gap: 36px;
}
.cal__nav {
  position: absolute;
  top: -6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal__nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__nav--prev { left: -4px; }
.cal__nav--next { right: -4px; }
.cal__nav .icon { width: 16px; height: 16px; }

.cal__title {
  margin-bottom: 14px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}
.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal__week span {
  padding-bottom: 8px;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal__day span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal__day:hover:not(:disabled) span { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal__day:disabled { color: #b4bacb; cursor: default; }
.cal__day.is-today span::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

/* The band between the two chosen dates. */
.cal__day.is-range::before,
.cal__day.is-start.has-end::before,
.cal__day.is-end::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  background: var(--brand-tint);
}
.cal__day.is-start.has-end::before { left: 50%; }
.cal__day.is-end::before { right: 50%; }
.cal__day.is-start:not(.has-end)::before { display: none; }
.cal__day.is-preview::before { background: rgb(44 69 245 / 7%); }

.cal__day.is-start span,
.cal__day.is-end span { background: var(--brand); color: var(--snow); box-shadow: none; }
.cal__day.is-start:hover span,
.cal__day.is-end:hover span { background: var(--brand-press); box-shadow: none; }
.cal__day.is-start.is-today span::after,
.cal__day.is-end.is-today span::after { background: var(--snow); }
.cal__day:focus-visible { outline: none; }
.cal__day:focus-visible span { outline: 2px solid var(--brand); outline-offset: 2px; }

.cal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cal__summary { color: var(--ink-soft); font-size: 14px; }
.cal__summary strong { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .combo { width: 100%; }
  .cal {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 16px 12px 14px;
  }
  .cal__day { height: 42px; }
  .cal__day span { width: 38px; height: 38px; }
  .cal__foot .btn { flex: 1; }
}

/* ==========================================================================
   Popovers open upward when there is no room below
   ========================================================================== */

.combo { max-height: min(380px, 60vh, var(--pop-max, 100vh)); }
.cal,
.pax { max-height: var(--pop-max, none); overflow-y: auto; overscroll-behavior: contain; }

.combo.is-up,
.pax.is-up,
.cal.is-up {
  top: auto;
  bottom: calc(100% + 10px);
  animation-name: pop-up;
}
.combo.is-up { transform-origin: bottom left; }
.pax.is-up { transform-origin: bottom right; }
@keyframes pop-up {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Hero: popular picks under the search
   ========================================================================== */

.quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 6px 2px;
}
.quick__label { color: var(--ink-mute); font-size: 13.5px; font-weight: 500; }
.quick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.quick__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.quick__chip:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.quick__fare { color: var(--ink-mute); font-size: 12.5px; font-weight: 450; }
.quick__chip:hover .quick__fare { color: var(--brand); }
.dock[data-mode="hotels"] .quick__fare { display: none; }
.quick__help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-left: auto;
  color: var(--brand);
  font-size: 14px;
  font-weight: 550;
}
.quick__help:hover { text-decoration: underline; text-underline-offset: 3px; }
.quick__help .icon { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .quick { padding: 12px 2px 0; }
  .quick__list {
    flex-wrap: nowrap;
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding: 2px 10px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quick__list::-webkit-scrollbar { display: none; }
  .quick__chip { white-space: nowrap; }
  .quick__help { margin-left: 0; }
}

/* ==========================================================================
   Two ways to book: wide photo cards, the button arrives on hover (Heligo)
   ========================================================================== */

.ways { padding-top: 0; }
.ways__list { display: grid; gap: 16px; }

.way {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 320px;
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--snow);
}
.way__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark on the side the words are on, so the photo keeps its far half. */
.way__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgb(8 12 36 / 92%) 0%, rgb(8 12 36 / 70%) 46%, rgb(8 12 36 / 18%) 100%);
}
.way--flip .way__veil { transform: scaleX(-1); }

.way__text { display: grid; gap: 12px; max-width: 48ch; }
.way--flip .way__text { grid-column: 2; justify-items: end; text-align: right; }
.way__eyebrow { color: var(--sun); font-size: 14px; font-weight: 550; }
.way__title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.way__line { color: rgb(247 248 252 / 80%); font-size: 16px; }

.way__cta {
  justify-self: end;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease);
}
.way--flip .way__cta { grid-column: 1; grid-row: 1; justify-self: start; }
.way__cta .icon { width: 16px; height: 16px; }
.way:hover .way__cta,
.way:focus-within .way__cta { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .way,
  .way--flip {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    min-height: 440px;
  }
  .way--flip .way__text,
  .way--flip .way__cta { grid-column: 1; grid-row: auto; justify-self: start; justify-items: start; text-align: left; }
  .way__cta { justify-self: start; }
  .way__veil,
  .way--flip .way__veil {
    transform: none;
    background: linear-gradient(to top, rgb(8 12 36 / 92%) 0%, rgb(8 12 36 / 55%) 55%, rgb(8 12 36 / 15%) 100%);
  }
}

/* ==========================================================================
   Trips we plan: tall photo cards
   ========================================================================== */

.trips__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trip {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 24px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--snow);
}
.trip img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(8 12 36 / 90%) 0%, rgb(8 12 36 / 45%) 46%, rgb(8 12 36 / 0%) 72%);
}
.trip__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(8 12 36 / 62%);
  font-size: 12.5px;
  font-weight: 500;
}
.trip__title { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.trip__line { margin-top: 8px; color: rgb(247 248 252 / 82%); font-size: 14.5px; line-height: 1.5; }
.trip__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--sun);
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.trip__more .icon { width: 16px; height: 16px; }
.trip:hover .trip__more,
.trip:focus-visible .trip__more { opacity: 1; transform: none; }
.trip:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (max-width: 1080px) {
  .trips__grid { grid-template-columns: repeat(2, 1fr); }
  .trip { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 640px) {
  .trips__grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .trips__grid::-webkit-scrollbar { display: none; }
  .trips__grid > li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ==========================================================================
   Travel notes: one featured guide, three open cards beneath it
   ========================================================================== */

.journal { padding-top: 0; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.feature__media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 8px);
  background: var(--line);
}
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.feature__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3.2vw, 44px);
}
.feature__title {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.feature__title a { transition: color var(--t-fast) var(--ease); }
.feature__title a:hover { color: var(--brand); }
.feature__line { max-width: 52ch; color: var(--ink-soft); font-size: 16.5px; }
.feature__points { display: grid; gap: 0; border-top: 1px solid var(--line); }
.feature__points li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}
.feature__when { color: var(--brand); font-size: 13.5px; font-weight: 600; padding-top: 1px; }
.feature__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}
.byline { display: inline-flex; align-items: center; gap: 12px; }
.byline > span:last-child { display: grid; line-height: 1.3; }
.byline strong { font-size: 14.5px; font-weight: 600; }
.byline > span:last-child > span { color: var(--ink-mute); font-size: 13px; }
.byline__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding-bottom: 2px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--snow);
  font-size: 19px;
  font-weight: 650;
}
.feature .btn .icon { width: 16px; height: 16px; }

.note__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.note__tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
}

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: 40px;
}
.note { position: relative; display: flex; flex-direction: column; gap: 12px; }
.note__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--line);
  margin-bottom: 6px;
}
.note__media img { width: 100%; height: 100%; object-fit: cover; }
.note__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.note__go .icon { width: 18px; height: 18px; }
.note__title {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* The title link covers the whole card. */
.note__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.note__title a { transition: color var(--t-fast) var(--ease); }
.note__line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 15px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.note:hover .note__title a { color: var(--brand); }
.note:hover .note__go,
.note:focus-within .note__go { opacity: 1; transform: none; }
.note__title a:focus-visible { outline: none; }
.note__title a:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 4px; }

@media (hover: none) {
  .note__go { opacity: 1; transform: none; }
}
@media (max-width: 1080px) {
  .feature { grid-template-columns: 1fr; }
  .feature__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .notes {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .notes::-webkit-scrollbar { display: none; }
  .notes > li { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 520px) {
  .feature__points li { grid-template-columns: 1fr; gap: 4px; }
  .feature__foot .btn { width: 100%; }
}

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

.faq { padding-top: 0; }
.faq__in {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 40px clamp(40px, 6vw, 96px);
}
.faq__aside > p { max-width: 38ch; margin-top: 18px; color: var(--ink-soft); }
.faq__help {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 28px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.faq__help-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.faq__help-line { margin-bottom: 6px; color: var(--ink-soft); font-size: 15px; }
.faq__help .icon { width: 17px; height: 17px; }

.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 18px 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--brand); }
.faq__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq__icon .icon { width: 16px; height: 16px; }
.faq__list details[open] .faq__icon {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--snow);
  transform: rotate(45deg);
}
.faq__a {
  max-width: 62ch;
  padding: 0 56px 26px 0;
  color: var(--ink-soft);
  font-size: 16px;
}
.faq__list details[open] .faq__a { animation: settle 320ms var(--ease) both; }

@media (max-width: 960px) {
  .faq__in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .faq__a { padding-right: 0; }
}

/* A touch screen has no hover, so anything revealed on hover is simply there. */
@media (hover: none) {
  .way__cta,
  .trip__more { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .way__cta,
  .trip__more { transform: none; }
}

/* ==========================================================================
   Reel photos: sized to their own shape and moved in step with the panel
   ========================================================================== */

.reel__photo {
  width: var(--open-w);
  transform: translate3d(var(--ix, 0px), 0, 0);
  transition: transform var(--t-reel) var(--ease);
}
.reel__panel.is-open .reel__photo { transform: translate3d(var(--ix, 0px), 0, 0); }

/* ==========================================================================
   Currency switcher
   ========================================================================== */

.cur-wrap { position: relative; }
.nav__currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__currency:hover,
.nav__currency[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.nav__currency .icon { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
.nav__currency[aria-expanded="true"] .icon { transform: rotate(180deg); }

.cur {
  position: absolute;
  top: calc(100% + 16px);
  right: -60px;
  z-index: 60;
  width: 440px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: pop 200ms var(--ease) both;
  transform-origin: top right;
}
.cur[hidden] { display: none; }
.cur__title { margin: 0 6px 10px; font-size: 15px; font-weight: 600; }
.cur__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cur__opt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cur__opt:hover { background: var(--paper); }
.cur__opt[aria-selected="true"] { background: var(--brand-tint); color: var(--brand); }
.cur__code { font-size: 13px; font-weight: 600; }
.cur__name { overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.cur__opt[aria-selected="true"] .cur__name { color: var(--brand); }
.cur__sym { color: var(--ink-mute); font-size: 13px; }
.cur__note { margin: 12px 6px 0; color: var(--ink-mute); font-size: 12.5px; }

.nav__sheet { max-height: calc(100dvh - 110px); overflow-y: auto; }
.nav__sheet-cur { margin-top: 6px; padding: 14px 4px 4px; border-top: 1px solid var(--line); }
.nav__sheet-cur > p { padding: 0 10px 8px; color: var(--ink-mute); font-size: 13px; font-weight: 500; }

/* ==========================================================================
   Chat assistant, bottom right
   ========================================================================== */

.chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.chat > * { pointer-events: auto; }

.chat__launch {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--snow);
  box-shadow: 0 14px 30px -10px rgb(44 69 245 / 60%), 0 2px 6px rgb(13 21 51 / 18%);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.chat__launch:hover { background: var(--brand-press); transform: translateY(-2px); }
.chat__launch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chat__launch .icon {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.chat__icon-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chat__launch[aria-expanded="true"] .chat__icon-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chat__launch[aria-expanded="true"] .chat__icon-close { opacity: 1; transform: none; }

.chat__teaser {
  position: relative;
  display: flex;
  max-width: 270px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 6px 18px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: settle 420ms var(--ease) both;
}
.chat__teaser[hidden] { display: none; }
.chat__teaser-open {
  padding: 14px 40px 14px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.chat__teaser-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.chat__teaser-x:hover { background: var(--paper); color: var(--ink); }
.chat__teaser-x .icon { width: 15px; height: 15px; }

.chat__panel {
  display: flex;
  flex-direction: column;
  width: 390px;
  height: min(620px, calc(100dvh - 130px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(13 21 51 / 8%), 0 30px 60px -20px rgb(13 21 51 / 40%);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 220ms var(--ease), transform 280ms var(--ease);
}
.chat__panel[hidden] { display: none; }
.chat__panel.is-open { opacity: 1; transform: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 16px 16px;
  background: var(--ink);
  color: var(--snow);
}
.chat__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding-bottom: 2px;
  border-radius: 12px;
  background: var(--brand);
  font-size: 20px;
  font-weight: 650;
}
.chat__name { font-size: 15.5px; font-weight: 600; }
.chat__status { display: flex; align-items: center; gap: 6px; color: var(--on-dark-soft); font-size: 12.5px; }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ad08a; }
.chat__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  color: var(--snow);
  cursor: pointer;
}
.chat__close:hover { background: rgb(255 255 255 / 18%); }
.chat__close:focus-visible { outline-color: var(--sun); }
.chat__close .icon { width: 17px; height: 17px; }

.chat__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
}
.chat__msg { display: flex; flex-direction: column; gap: 8px; max-width: 86%; }
.chat__msg--bot { align-self: flex-start; }
.chat__msg--me { align-self: flex-end; align-items: flex-end; }
.chat__bubble { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.chat__msg--bot .chat__bubble {
  border-bottom-left-radius: 6px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(13 21 51 / 6%);
  color: var(--ink);
}
.chat__msg--me .chat__bubble { border-bottom-right-radius: 6px; background: var(--brand); color: var(--snow); }
.chat__links { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat__link:hover { background: var(--brand); color: var(--snow); }

.chat__typing {
  flex-direction: row;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 16px 16px 16px 6px;
  background: var(--surface);
}
.chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  animation: typing 1s ease-in-out infinite;
}
.chat__typing span:nth-child(2) { animation-delay: 150ms; }
.chat__typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes typing {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.chat__chips[hidden] { display: none; }
.chat__chip {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chat__chip:hover { border-color: var(--brand); color: var(--brand); }

.chat__form { display: flex; gap: 8px; padding: 12px 14px 8px; border-top: 1px solid var(--line); }
.chat__form input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 16px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chat__form input:focus { border-color: var(--brand); background: var(--surface); }
.chat__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--snow);
  cursor: pointer;
}
.chat__send:hover { background: var(--brand-press); }
.chat__send .icon { width: 18px; height: 18px; }
.chat__foot { padding: 0 18px 12px; color: var(--ink-mute); font-size: 11.5px; }

@media (max-width: 600px) {
  .chat { right: 14px; bottom: 14px; left: 14px; }
  .chat__panel { width: 100%; height: min(78dvh, 640px); }
  .chat__launch { width: 58px; height: 58px; }
  .toast { bottom: 88px; }
  .flap.is-pad { display: none; }
}

/* Phone menu: currencies as compact code + symbol buttons. */
.nav__sheet-cur .cur__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.nav__sheet-cur .cur__name { display: none; }
.nav__sheet-cur .cur__opt { grid-template-columns: auto auto; justify-content: center; gap: 6px; padding: 0 6px; }

/* Phones: longer currency fares still fit the board row. */
@media (max-width: 760px) {
  .board { --cell: 13px; }
  .board__head,
  .board__row { grid-template-columns: var(--w-code) minmax(0, 1fr) auto; gap: 10px; }
  .board__head > span:last-child,
  .board__go { display: none; }
  .board__city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Phones: confirmations drop from the top, clear of the chat button. */
@media (max-width: 600px) {
  .toast { top: 84px; bottom: auto; transform: translate(-50%, -16px); }
  .toast.is-on { transform: translate(-50%, 0); }
}


/* ==========================================================================
   Route map: flights from your nearest airport (MapLibre GL + OpenFreeMap)
   ========================================================================== */

.routes { padding-top: 0; }
.routes__in {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
  gap: 16px;
}

.map__stage {
  position: relative;
  height: clamp(460px, 62vh, 620px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  background: #eef1f7;
}
/* Beats maplibre-gl.css, which loads later and sets the map container to position: relative. */
.map__stage .map__canvas { position: absolute; inset: 0; }

.map__loading,
.map__failed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink-mute);
  font-size: 14px;
  text-align: center;
}
.map__failed { display: none; }
.is-ready .map__loading,
.is-failed .map__loading { display: none; }
.is-failed .map__failed { display: grid; }

.map__key {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 94%);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  pointer-events: none;
}
.map__key span { display: inline-flex; align-items: center; gap: 7px; }
.map__key-dot { width: 10px; height: 10px; border: 1.5px solid var(--brand); border-radius: 50%; background: #ffffff; }
.map__key-dot--origin { border-color: #ffffff; background: var(--brand); box-shadow: 0 0 0 3px rgb(44 69 245 / 20%); }
.map__key-dot--home { border-color: #ffffff; background: var(--ink); }
.map__key-dot--you { border-color: #ffffff; background: var(--ink-soft); box-shadow: 0 0 0 3px rgb(183 200 255 / 70%); }

/* Map markers */
.mpin { position: relative; display: grid; place-items: center; cursor: default; }
.mpin__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 1px 3px rgb(13 21 51 / 18%);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mpin__dot .icon { width: 12px; height: 12px; stroke-width: 2; }
.mpin--dest,
.mpin--home { cursor: pointer; }
.mpin--dest.is-hot .mpin__dot,
.mpin--dest:hover .mpin__dot { border-color: var(--ink); background: var(--ink); color: #ffffff; transform: scale(1.18); }
.mpin--home .mpin__dot { width: 26px; height: 26px; border: 2px solid #ffffff; background: var(--ink); color: #ffffff; }
.mpin--home.is-hot .mpin__dot,
.mpin--home:hover .mpin__dot { background: var(--brand); transform: scale(1.12); }
.mpin--origin .mpin__dot {
  width: 32px;
  height: 32px;
  border: 2.5px solid #ffffff;
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 0 0 7px rgb(44 69 245 / 18%), 0 2px 6px rgb(13 21 51 / 25%);
}
.mpin--origin .mpin__dot .icon { width: 15px; height: 15px; }
.mpin--user .mpin__dot {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  background: var(--ink-soft);
  box-shadow: 0 0 0 6px rgb(183 200 255 / 60%);
}
.mpin__label {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgb(13 21 51 / 16%);
  transform: translateY(-50%);
  pointer-events: none;
}
.mpin--origin .mpin__label { background: var(--brand); color: #ffffff; font-size: 12.5px; }

/* Hover card on the map */
.mtip .maplibregl-popup-content {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--snow);
  box-shadow: var(--shadow-float);
  font-family: var(--font);
}
.mtip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.mtip.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.mtip.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--ink); }
.mtip.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.mtip.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.mtip.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--ink); }
.mtip.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--ink); }
.mtip.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--ink); }
.mtip { pointer-events: none; }
.mtip__route { color: var(--on-dark-soft); font-size: 12px; }
.mtip__place { margin-top: 3px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.mtip__fare { margin-top: 8px; color: var(--on-dark-soft); font-size: 12.5px; }
.mtip__fare strong { color: var(--sun); font-size: 20px; font-weight: 600; }
.mtip__note { margin-top: 4px; color: var(--on-dark-soft); font-size: 11.5px; }

/* Map controls in the site's style */
.map__stage .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-float);
}
.map__stage .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.map__stage .maplibregl-ctrl-top-right { top: 6px; right: 6px; }
.map__stage .maplibregl-ctrl-attrib { font-family: var(--font); font-size: 11px; }
.map__stage .maplibregl-cooperative-gesture-screen {
  background: rgb(13 21 51 / 55%);
  color: #ffffff;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
}

/* Side panel */
.map__panel {
  display: flex;
  flex-direction: column;
  height: clamp(460px, 62vh, 620px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.map__origin { padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.map__label { color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.map__airport { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.map__place { margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; }
.map__place .mono { color: var(--brand); font-weight: 600; }
.map__status { margin-top: 12px; color: var(--ink-mute); font-size: 13.5px; }
.map__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.map__seg { padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); }
.map__seg span { min-height: 36px; padding: 0 14px; }
.map__locate .icon { width: 16px; height: 16px; }
.map__locate[hidden] { display: none; }
.map__count { padding: 14px 24px 8px; color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.map__list { flex: 1; padding: 0 12px 12px; overflow-y: auto; overscroll-behavior: contain; }

.route {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.route:hover,
.route.is-hot { background: var(--brand-tint); }
.route__code { color: var(--brand); font-size: 13px; font-weight: 600; }
.route__city { display: block; font-size: 15px; font-weight: 600; }
.route__meta { display: block; overflow: hidden; color: var(--ink-mute); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.route__fare { line-height: 1.2; text-align: right; }
.route__from { display: block; color: var(--ink-mute); font-size: 11.5px; }
.route__fare strong { font-size: 15px; font-weight: 600; }
.map__empty { padding: 20px 12px; color: var(--ink-soft); font-size: 14.5px; }

@media (max-width: 1080px) {
  .routes__in { grid-template-columns: 1fr; }
  .map__stage { height: 460px; }
  .map__panel { height: auto; max-height: 560px; }
}
@media (max-width: 600px) {
  .map__stage { height: 380px; }
  .map__key { display: none; }
  .map__origin { padding: 20px 18px 16px; }
  .map__count { padding-inline: 18px; }
  .mpin__label { font-size: 11px; }
  .mpin--dest .mpin__dot { width: 18px; height: 18px; }
  .mpin--dest .mpin__dot .icon { width: 10px; height: 10px; }
}

/* Change the starting point */
.map__stage,
.map__panel { height: clamp(520px, 68vh, 680px); }
.map__change { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.map__change-label { display: block; margin-bottom: 8px; color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.map__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.map__search:focus-within { border-color: var(--brand); background: var(--surface); }
.map__search > .icon { width: 16px; height: 16px; color: var(--ink-mute); }
.map__search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}
.map__search input::placeholder { color: #7f88a3; }
.map__search .combo { top: calc(100% + 6px); left: 0; z-index: 30; width: 100%; max-height: 260px; }
.map__change-actions { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 8px; }
.map__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.map__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.map__link:disabled { opacity: 0.6; cursor: progress; }
.map__link[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.map__link .icon { width: 16px; height: 16px; }

.map__pick-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 120px);
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--snow);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}
.map__pick-hint[hidden] { display: none; }
.map__pick-hint button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.map__stage.is-picking .maplibregl-canvas,
.map__stage.is-picking .mpin { cursor: crosshair; }

@media (max-width: 1080px) {
  .map__stage { height: 480px; }
  .map__panel { height: auto; max-height: 640px; }
}
@media (max-width: 600px) {
  .map__stage { height: 380px; }
  .map__pick-hint { max-width: calc(100% - 80px); font-size: 12.5px; }
}

/* ==========================================================================
   Phones: the search folds to its tabs until one is tapped
   ========================================================================== */

@media (max-width: 760px) {
  .tab { gap: 6px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; }
  .tab .icon { width: 15px; height: 15px; }

  .dock.is-collapsed { padding-bottom: 12px; }
  .dock.is-collapsed .dock__bar { padding-bottom: 0; }
  .dock.is-collapsed .seg,
  .dock.is-collapsed .search,
  .dock.is-collapsed .quick { display: none; }
  /* Folded: no tab looks chosen until one is tapped. */
  .dock.is-collapsed .tab[aria-selected="true"] { background: transparent; color: var(--ink-soft); }
  .dock:not(.is-collapsed) .search:not([hidden]),
  .dock:not(.is-collapsed) .quick,
  .dock:not(.is-collapsed) .seg:not([hidden]) { animation: settle 260ms var(--ease) both; }
}
@media (max-width: 380px) {
  .tab { padding: 0 8px; font-size: 13px; }
  .tab .icon { display: none; }
}

/* Phones: a hero that reads in two lines and leaves the jet clear. */
@media (max-width: 760px) {
  .hero__frame { min-height: 560px; padding-top: 100px; }
  .hero h1 { font-size: clamp(34px, 10.4vw, 52px); }
  .hero__badge { margin-bottom: 16px; font-size: 12.5px; }
  .hero__lede { max-width: 34ch; margin-top: 14px; font-size: 15px; }
}
@media (max-width: 420px) {
  .hero__badge-place { display: none; }
}

/* About tiles carry the trust points that used to sit under the hero. */
.tile { justify-content: flex-start; gap: 0; }
.tile__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.tile__badge .icon { width: 14px; height: 14px; color: var(--brand); stroke-width: 2.25; }
.tile--sun .tile__badge { background: rgb(255 255 255 / 55%); color: var(--ink); }
.tile__big { margin-top: 28px; }
.tile__text { margin-top: auto; padding-top: 24px; }
@media (max-width: 520px) {
  .tile__big { margin-top: 18px; }
  .tile__text { padding-top: 14px; }
}

/* Phones and small tablets: each reel card is its own full photo (this must come after
   the desktop reel rules above, which size and slide the photo inside a stacked panel). */
@media (max-width: 760px) {
  .reel__photo,
  .reel__panel.is-open .reel__photo { width: 100%; transform: none; }
}

/* Route map layout: starting point, map, routes. Phones read them top to bottom;
   wide screens put the map on the left and the two cards on the right. */
.routes__in {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "map origin" "map list";
  height: clamp(580px, 74vh, 740px);
}
.map__origin {
  grid-area: origin;
  padding: 22px 24px;
  border-bottom: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.map__stage { grid-area: map; height: auto; min-height: 0; }
.map__routes {
  grid-area: list;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.map__routes .map__count { padding-top: 18px; }

@media (max-width: 1080px) {
  .routes__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "origin" "map" "list";
    height: auto;
  }
  .map__stage { height: 460px; }
  .map__routes { max-height: 560px; }
}
@media (max-width: 600px) {
  .map__origin { padding: 20px 18px; }
  .map__stage { height: 380px; }
  .map__routes { max-height: 520px; }
}

/* Phones: tile descriptions use the full card width, two lines each. */
@media (max-width: 520px) {
  .tile__text { max-width: none; }
}

/* Hotels: "View all" beside the search and arrows. */
.stays__all { min-height: 46px; background: var(--surface); }
.stays__all .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .stays__all { width: 100%; }
}
@media (min-width: 1081px) {
  .stays .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* Hotels: "View all" sits by the arrows on wide screens and under the cards on phones. */
.stays__more { display: none; }
.stays__more .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .stays__tools { display: none; }
  .stays__more { display: flex; width: 100%; margin-top: 20px; background: var(--surface); }
}

/* "Pick on the map" hint: one clean line, white, out of the way of the controls. */
.map__pick-hint {
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 130px);
  padding: 5px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  animation: hint-in 220ms var(--ease) both;
}
@keyframes hint-in { from { opacity: 0; } to { opacity: 1; } }
.map__pick-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
}
.map__pick-icon .icon { width: 16px; height: 16px; }
.map__pick-text { overflow: hidden; text-overflow: ellipsis; }
.map__pick-hint button {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.map__pick-hint button:hover { background: var(--line); color: var(--ink); }
@media (max-width: 600px) {
  .map__pick-hint {
    top: auto;
    right: 46px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    font-size: 13px;
    transform: none;
  }
  .map__pick-text { flex: 1; }
}

/* Route list: a scroll box beside the map on wide screens; part of the page on phones and tablets. */
.map__more-row { display: none; }
@media (max-width: 1080px) {
  .map__routes { max-height: none; overflow: visible; }
  .map__list { flex: none; overflow: visible; overscroll-behavior: auto; padding-bottom: 16px; }
  .map__list:not(.is-expanded) > li:nth-child(n+9):not(.map__more-row) { display: none; }
  .map__more-row { display: block; padding: 8px 0 0; }
  .map__more { width: 100%; }
}

/* 404 page */
.lost {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  min-height: 100svh;
  padding: 48px var(--gutter);
  text-align: center;
}
.lost .brand { margin-bottom: 24px; }
.lost__code { color: var(--brand); font-size: 15px; font-weight: 600; }
.lost__title { max-width: 18ch; font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; }
.lost__line { max-width: 46ch; color: var(--ink-soft); font-size: 17px; }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* Hero, cleaner: the jet's wings sit in the open sky between the headline and the search. */
.hero__photo { object-position: 50% 52%; }
.hero__lede { max-width: none; }
@media (max-width: 760px) {
  .hero__photo { object-position: 50% 66%; }
  .hero__lede { max-width: 30ch; }
}

/* Wide screens: the photo runs down past the search row (main.js measures --hero-rise).
   The frame grows by as much as the dock rises, plus a small drop that sets the search
   panel a little lower under the headline. */
@media (min-width: 761px) {
  .hero { --hero-drop: 8px; }
  .dock { --rise: var(--hero-rise, 124px); }
  /* Even padding above the tabs and a short step down to the search row. */
  .dock { padding-top: 16px; }
  .dock__bar { padding-bottom: 10px; }
  .hero__frame { min-height: calc(clamp(580px, calc(100svh - 72px), 880px) + var(--hero-rise, 124px) - 124px + var(--hero-drop)); }
}