/* Explore Travel: values follow the Brand Identity Guidelines 2026 */

:root {
  --night: #0A0A0A;
  --lime: #B6FF00;
  --paper: #F6F6F0;
  --field: #5E9400;
  --milestone: #A3A39A;
  --white: #FFFFFF;
  --error: #C62828;

  --section-gap: 110px;
  --gutter: 32px;
  --radius-hero: 36px;
  --radius-card: 24px;
  --tap: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Themes: the two primary versions on the logo sheet */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --bg-alt: #151515;
  --text: var(--white);
  --text-soft: #B9B9B0;
  --line: #2C2C2A;
  --accent-text: var(--lime);
  --focus: var(--white);
  --skeleton: #222220;
  --dialog: #151515;
  --field-bg: #0A0A0A;
  --logo-badge: var(--white);
  --logo-e: var(--night);
  --logo-word: var(--white);
  --logo-o: var(--lime);
  --logo-travel: var(--milestone);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper);
  --bg-alt: var(--white);
  --text: var(--night);
  --text-soft: #55554E;
  --line: #DDDDD3;
  --accent-text: #4A7500;
  --focus: var(--night);
  --skeleton: #E7E7DE;
  --dialog: var(--white);
  --field-bg: var(--white);
  --logo-badge: var(--night);
  --logo-e: var(--white);
  --logo-word: var(--night);
  --logo-o: var(--field);
  --logo-travel: #6B6B63;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}

img, svg { display: block; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
}

.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.lime { color: var(--lime); }

.ico { fill: none; stroke: currentColor; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }

/* Focus: an outline with a lime halo, never lime alone */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(182, 255, 0, .55);
}

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--lime); color: var(--night);
  padding: 12px 18px; border-radius: 12px; font-weight: 500;
}
.skip:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 28px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 500; font-size: 16px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lime { background: var(--lime); color: var(--night); }
.btn-lime:hover { background: #C6FF33; }
.btn-black { background: var(--night); color: var(--white); }
.btn-black:hover { background: #2A2A2A; }
.btn-ghost { border-color: var(--white); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--night); }
.btn-outline { border-color: var(--text); color: var(--text); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); flex: none;
  background: transparent; border: 0; border-radius: 50%; color: inherit;
  transition: background-color .2s;
}
.icon-btn:hover { background: rgba(127, 127, 127, .18); }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 1. Navigation */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1344px; min-height: 80px; margin-inline: auto; padding: 12px var(--gutter);
}
.logo { display: block; flex: none; border-radius: 12px; }
.logo svg { height: 48px; width: auto; aspect-ratio: 512 / 150; }
.nav-links { display: flex; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 16px;
  border-radius: 999px; font-weight: 500; text-decoration: none;
  transition: background-color .2s;
}
.nav-link:hover, .nav-item:hover > .nav-link { background: rgba(127, 127, 127, .18); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--logo-o); border-radius: 4px; }
.nav-chev { width: 10px; height: 7px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.nav-item:hover .nav-chev { transform: rotate(180deg); }

/* Header hover menus: only on a wide screen with a mouse. Phones and tablets use the plain burger list. */
.mega { display: none; }
@media (min-width: 1101px) and (hover: hover) {
  .mega {
    position: absolute; top: calc(100% - 6px); left: 50%; z-index: 60;
    display: block; width: min(1180px, calc(100vw - 48px));
    max-height: calc(100vh - 90px); overflow-y: auto;
    background: var(--bg-alt); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
    transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
  }
  .nav-item:hover > .mega, .nav-item:has(:focus-visible) > .mega {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .15s, transform .15s var(--ease);
  }
  /* Bridges the gap between the link and the menu, so the mouse can cross it */
  .nav-item:hover > .nav-link::after { content: ""; position: absolute; left: 0; right: 0; top: 60px; height: 30px; }
}
.mega-body { display: grid; gap: 28px; padding: 24px; }
.mega-flights { grid-template-columns: minmax(0, 1fr) 340px; }
.mega-holidays { grid-template-columns: 390px minmax(0, 1fr); }
.mega-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.mega-title::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--logo-o); }
.mega-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mega-tile { position: relative; display: block; height: 104px; overflow: hidden; border-radius: 16px; background: var(--skeleton); color: var(--white); text-decoration: none; }
.mega-holidays .mega-tile { height: 150px; }
.mega-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.mega-tile:hover img { transform: scale(1.06); }
.mega-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.9) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,0) 80%); }
.mega-tile-text { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; display: flex; flex-direction: column; }
.mega-tile-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.mega-codes { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--lime); }
.mega-airlines { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-bottom: 14px; }
.mega-airline { display: flex; align-items: center; gap: 8px; min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; }
.mega-airline:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-code { display: grid; place-items: center; width: 32px; height: 28px; flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--accent-text); }
.mega-card { padding: 16px; background: var(--lime); color: var(--night); border-radius: 16px; --focus: var(--night); }
.mega-card h3 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.mega-card p { margin: 4px 0 12px; font-size: 13px; line-height: 1.4; }
.mega-card .btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.mega-airs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mega-air {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; transition: border-color .2s;
}
.mega-air:hover { border-color: var(--lime); }
.mega-air-logo { display: flex; align-items: center; height: 30px; }
.mega-air-logo img { max-height: 28px; max-width: 120px; width: auto; height: auto; }
.mega-air-text { display: flex; flex-direction: column; }
.mega-air .mega-tile-name { font-size: 14px; }
.mega-air-hub { font-size: 12px; color: var(--text-soft); }
.mega-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mega-link { display: flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 500; text-decoration: none; }
.mega-link:hover { color: var(--accent-text); }
.mega-month { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--accent-text); text-decoration: none; }
.mega-month:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-foot { display: flex; align-items: center; gap: 24px; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 13px; }
.mega-foot a, .mega-hours { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.mega-foot .foot-icon { width: 17px; height: 17px; }
.mega-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-all { margin-left: auto; font-weight: 700; color: var(--accent-text); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-cta { min-height: var(--tap); padding: 8px 22px; }
.burger { display: none; }

[data-theme="dark"] .moon, [data-theme="light"] .sun { display: none; }

/* 2. Hero */
.hero { padding-inline: var(--gutter); }
.hero-frame {
  position: relative; overflow: hidden;
  max-width: 1344px; margin-inline: auto;
  height: min(560px, calc(100svh - 80px)); min-height: 480px;
  border-radius: var(--radius-hero);
  background: #1A120C;
  color: var(--white);
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: drift 14s var(--ease) both;
}
/* The overlay keeps white text at 12:1 or better */
.hero-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.76) 48%, rgba(10,10,10,.18) 82%);
}
.hero-copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  height: 100%; padding: 32px 64px 88px;
}
.hero h1 { font-size: clamp(64px, 7.5vw, 96px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.promise { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); max-width: 30em; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; }

@keyframes drift { from { transform: scale(1.03); } to { transform: scale(1); } }

/* Service pages: a shorter hero with the description */
.page-hero .hero-frame { height: auto; min-height: 400px; }
.page-hero .hero-frame::after { background: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.78) 58%, rgba(10,10,10,.3) 92%); }
.page-hero .hero-copy { height: auto; min-height: 400px; padding: 40px 64px 100px; }
.page-hero h1 { font-size: clamp(50px, 6vw, 76px); }
.page-hero .promise { max-width: 40em; font-size: 17px; }
.page-hero.no-search .hero-copy { padding-bottom: 40px; }
/* Pages with a real photo: text on the dark left, the photo clear on the right */
.has-photo .hero-frame { background: var(--night); }
.has-photo .hero-photo { left: auto; right: 0; width: 66%; }
.has-photo .hero-frame::after { background: linear-gradient(90deg, #0A0A0A 34%, rgba(10,10,10,.82) 44%, rgba(10,10,10,.12) 62%, rgba(10,10,10,0) 100%); }
.has-photo .promise { max-width: 29em; }
.section-note { margin-top: 20px; font-size: 14px; color: var(--text-soft); max-width: 46em; }

/* 3. Search widget: always light so it is the next thing the eye finds */
.search {
  position: relative; z-index: 5;
  max-width: 1216px;
  margin: -64px auto 0;
  padding-inline: var(--gutter);
  animation: fade-up .7s .15s var(--ease) backwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.search-panel {
  --focus: var(--night);
  background: var(--white); color: var(--night);
  border-radius: 28px;
  padding: 18px 24px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.tabs { display: flex; gap: 6px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 6px 16px 6px 12px;
  background: transparent; border: 0; border-radius: 999px; color: var(--night);
  font-weight: 500; font-size: 15px; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.tab svg { width: 22px; height: 22px; flex: none; }
.tab:hover { background: var(--paper); }
.tab[aria-pressed="true"] { background: var(--night); color: var(--white); }

/* Dropdowns: flight type, cabin class and hotel rating */
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nice-select {
  display: block; width: 100%; min-height: 52px; padding: 10px 42px 10px 14px;
  appearance: none; -webkit-appearance: none; color-scheme: light;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  color: var(--night);
  border: 1.5px solid #BDBDB4; border-radius: 14px;
  font-size: 16px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.nice-select:hover { border-color: #6B6B63; }
.nice-select:focus, .nice-select:focus-visible { outline: 0; border-color: var(--night); box-shadow: 0 0 0 3px var(--lime); }

/* Flights only: Return, One way or Multi-city */
.trip-types { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 8px; }
.trip-types[hidden] { display: none; }
.trip-type { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 15px; font-weight: 500; cursor: pointer; }
.trip-type input {
  flex: none; width: 20px; height: 20px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--white); border: 2px solid #6B6B63; border-radius: 50%;
  cursor: pointer; transition: border-color .15s;
}
.trip-type:hover input { border-color: var(--night); }
.trip-type input:checked { background: var(--lime); border: 6px solid var(--night); }

/* Multi-city rows */
.leg-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.leg-first { display: none; }
.legs { display: flex; flex-direction: column; gap: 12px; }
.legs[hidden] { display: none; }
.leg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 6px; }
.leg-row { display: flex; align-items: stretch; gap: 8px; }
.leg-remove {
  min-height: 28px; padding: 0 4px;
  background: none; border: 0; color: var(--night);
  font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.add-leg {
  align-self: flex-start; min-height: var(--tap); padding: 6px 16px;
  background: none; border: 1.5px dashed #6B6B63; border-radius: 999px;
  color: var(--night); font-size: 14px; font-weight: 500;
}
.add-leg:hover { border-style: solid; border-color: var(--night); }
.bar.is-multi { flex-wrap: wrap; }
.bar.is-multi .leg-first { display: block; flex: 1 1 100%; order: -1; margin-bottom: -2px; }
.bar.is-multi .legs { flex: 1 1 100%; order: 1; }
.bar.is-multi .seg-who { flex: 1 1 0; order: 2; }
.bar.is-multi .search-go { order: 3; }

/* The bar: tiles that open a popup when clicked */
.bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }

/* Flights only: Direct flights tick box */
.direct { flex: 1 1 100%; order: 5; }
.direct[hidden] { display: none; }
.direct-label { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 15px; font-weight: 500; cursor: pointer; }
.direct-label input {
  flex: none; width: 22px; height: 22px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--white); border: 2px solid #6B6B63; border-radius: 6px;
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.direct-label:hover input { border-color: var(--night); }
.direct-label input:checked {
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%230A0A0A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color: var(--night);
}
.seg {
  position: relative; min-width: 0;
  background: var(--paper);
  border: 1.5px solid transparent; border-radius: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.seg:hover { border-color: #BDBDB4; }
.seg:focus-within { border-color: var(--night); box-shadow: 0 0 0 3px var(--lime); }
.seg.has-error { border-color: var(--error); box-shadow: none; }
.seg[hidden], .swap[hidden], .date-part[hidden] { display: none; }
.seg label, .seg small {
  display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #55554E;
}
.seg-place { flex: 1 1 0; padding: 10px 16px; cursor: text; }
.seg-place input {
  display: block; width: 100%; padding: 2px 0 0;
  background: none; border: 0; outline: 0; box-shadow: none; color: var(--night);
  color-scheme: light; font-size: 16px; font-weight: 500; text-overflow: ellipsis;
}
.seg-place input::placeholder { color: #6B6B63; font-weight: 400; opacity: 1; }
.seg-place input[readonly] { cursor: pointer; }
.seg-place input:focus-visible { outline: 0; box-shadow: none; }

.swap {
  position: relative; z-index: 2; flex: none; align-self: center;
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-inline: -22px;
  background: var(--white); color: var(--night);
  border: 1.5px solid #D6D6CC; border-radius: 50%;
  transition: border-color .15s, transform .2s var(--ease);
}
.swap:hover { border-color: var(--night); transform: rotate(180deg); }
.swap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.seg-dates { flex: 1.25 1 0; display: flex; }
.seg-who { flex: 1.2 1 0; display: flex; }
.who-btn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-part, .who-btn {
  flex: 1 1 0; min-width: 0; padding: 10px 16px;
  background: none; border: 0; border-radius: 14px;
  color: var(--night); text-align: left;
  transition: background-color .15s;
}
.date-part + .date-part { border-left: 1px solid #DDDDD3; border-radius: 0 14px 14px 0; }
.date-part.is-active, .who-btn.is-active { background: var(--white); }
.date-part:focus-visible, .who-btn:focus-visible { outline: 0; box-shadow: none; }
.val { display: block; padding-top: 2px; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.val.is-empty { color: #6B6B63; font-weight: 400; }
.search-go { flex: none; min-width: 150px; min-height: 64px; border-radius: 16px; }
.search-err { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--error); }

/* Popups */
.pop {
  position: absolute; top: calc(100% + 10px); z-index: 20;
  background: var(--white); color: var(--night);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3), 0 0 0 1px rgba(10, 10, 10, .06);
}
.pop[hidden] { display: none; }

.place-list { left: 0; width: max(100%, 280px); max-height: 300px; overflow-y: auto; margin: 0; padding: 8px; }
.place-list li {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px;
  border-radius: 12px; font-weight: 500; cursor: pointer;
}
.place-list li:hover, .place-list li.is-active { background: var(--paper); }

/* Calendar */
.cal { left: 50%; transform: translateX(-50%); width: 680px; padding: 20px 24px; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cal-month h4 { margin: 0 0 12px; text-align: center; font-size: 16px; font-weight: 700; line-height: 36px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-week { margin-bottom: 4px; font-size: 12px; font-weight: 500; color: #6B6B63; text-align: center; }
.day {
  position: relative; aspect-ratio: 1; padding: 0;
  background: none; border: 0; border-radius: 50%;
  font-size: 14px; font-weight: 500; color: var(--night);
  transition: background-color .12s;
}
.day:hover:not(:disabled) { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--night); }
.day:disabled { color: #BDBDB4; cursor: default; }
.day.is-today { box-shadow: inset 0 0 0 1.5px #BDBDB4; }
.day.in-range, .day.is-preview { background: rgba(182, 255, 0, .32); border-radius: 0; }
.day.is-start, .day.is-end { background: var(--lime); font-weight: 700; }
.day.range-start { border-radius: 50% 0 0 50%; }
.day.range-end { border-radius: 0 50% 50% 0; }
.cal-nav {
  position: absolute; top: 20px; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--paper); border: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--night);
}
.cal-nav:hover:not(:disabled) { background: var(--night); color: var(--white); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-prev { left: 24px; }
.cal-next { right: 24px; }
.cal-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #E7E7DE; }
.cal-hint { flex: 1; font-size: 13px; color: #55554E; }
.cal-clear { min-height: 44px; padding: 0 12px; background: none; border: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; color: var(--night); }
.cal-done { min-height: 44px; padding: 8px 24px; }

/* Travellers */
.who-pop { right: 0; width: 360px; padding: 20px; cursor: default; }
.who-opt { margin-bottom: 10px; }
.who-opt[hidden] { display: none; }
.seg .who-opt label { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--night); }
.who-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.who-row strong { display: block; font-weight: 700; line-height: 1.3; }
.seg .who-row small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: #55554E; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper output { min-width: 30px; text-align: center; font-weight: 700; }
.step {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: #ECECE5; border: 1.5px solid transparent; border-radius: 12px;
  font-size: 22px; font-weight: 500; line-height: 1; color: var(--night);
  transition: background-color .12s, border-color .12s;
}
.step:hover:not(:disabled) { border-color: var(--night); }
.step:disabled { color: #A3A39A; cursor: default; }
.who-done { width: 100%; min-height: 52px; margin-top: 10px; border-radius: 14px; }

.field { min-width: 0; }
.field label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  color-scheme: light; /* keeps the date icons visible in the dark theme */
  background: var(--white); color: var(--night);
  border: 1.5px solid #BDBDB4; border-radius: 14px;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: #6B6B63; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #6B6B63; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--night);
  box-shadow: 0 0 0 4px var(--lime);
}
.field.has-error input, .field.has-error textarea { border-color: var(--error); box-shadow: none; }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, .2); }
.field-err { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--error); }
[data-theme="dark"] .quote .field-err { color: #FF8A80; }

/* Sections */
.section { padding-block: var(--section-gap) 0; }
.section h2 { margin-bottom: 40px; }

/* 4. Destination cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  --arrow: 46px;
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  background: var(--skeleton);
  color: var(--white); text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), opacity .3s;
}
/* A dark gradient from the bottom so white text always passes */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 26%, rgba(10,10,10,0) 58%);
}
.card.is-loading { animation: pulse 1.4s ease-in-out infinite; }
.card.is-loading img { opacity: 0; }
.card.is-loading::after, .card.is-loading > span { visibility: hidden; }
@keyframes pulse { 50% { opacity: .55; } }

.chip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 5px 13px; border-radius: 999px;
  background: var(--lime); color: var(--night);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.card-body {
  position: absolute; left: 20px; right: 80px; bottom: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
}
.card-name { font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.card-meta { font-size: 14px; }
.card-arrow {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: grid; place-items: center;
  width: var(--arrow); height: var(--arrow); border-radius: 50%;
  background: var(--lime); color: var(--night);
  font-size: 20px; line-height: 1;
  transition: width .25s var(--ease), height .25s var(--ease);
}
.card:focus-visible { outline-offset: 3px; }
@media (hover: hover) {
  .card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0, 0, 0, .34); }
  .card:hover img { transform: scale(1.04); }
  .card:hover { --arrow: 58px; }
}

/* Package cards */
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pack {
  --arrow: 46px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px; text-align: left;
  background: var(--bg-alt); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.pack-top { border-color: var(--logo-o); }
.pack-tier { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.pack-stars { margin-left: 4px; letter-spacing: .08em; }
.pack-name { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.pack-tagline { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.pack-includes { margin-top: 14px; margin-bottom: 18px; font-size: 13px; color: var(--text-soft); }
.pack-foot { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: 58px; margin-top: auto; }
.pack-price { font-size: 14px; }
.pack-price strong { font-size: 22px; font-weight: 700; }
.pack .card-arrow { position: static; }
@media (hover: hover) {
  .pack:hover { --arrow: 58px; transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
}

/* Blog */
.blog-heading { margin-bottom: 40px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); color: var(--text); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-photo { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--skeleton); }
.blog-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-soft); }
.chip-inline { position: static; }
.blog-title { margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.blog-excerpt { margin: 8px 0 16px; font-size: 15px; color: var(--text-soft); }
.blog-read { margin-top: auto; font-weight: 500; color: var(--accent-text); }
@media (hover: hover) {
  .blog-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
  .blog-card:hover img { transform: scale(1.04); }
}
.post { max-width: 760px; margin-inline: auto; }
.post-back { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: 12px; font-weight: 500; text-decoration: none; }
.post-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.post h2 { margin-top: 12px; }
.post-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-block: 28px; border-radius: var(--radius-card); }
.post > p:not(.post-meta) { margin-bottom: 18px; font-size: 17px; line-height: 1.7; }

/* Sliding airline strip. Dark theme: white logos merged into the page. Light theme: colour logos on a white band. */
.logo-strip {
  margin-top: 48px; padding-block: 10px; overflow: hidden;
  background: var(--white);
  transition: background-color .25s;
}
[data-theme="dark"] .logo-strip { background: transparent; }
[data-theme="dark"] .logo-color, [data-theme="light"] .logo-white { display: none; }
.logo-track {
  display: flex; align-items: center; width: max-content;
  animation: logo-slide 70s linear infinite;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
.logo-item {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 172px; height: 72px; margin-inline: 6px; padding: 10px 16px;
}
.logo-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
@keyframes logo-slide { to { transform: translateX(-50%); } }

/* ---- Flights page ---- */
.partners .logo-strip { margin-top: 28px; }

/* Trending destinations */
.trend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.trend-card {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.05;
  border-radius: var(--radius-card);
  background: var(--skeleton); color: var(--white); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trend-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.trend-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 38%, rgba(10,10,10,0) 70%); }
/* Airport codes: a white label that turns lime on hover */
.trend-codes {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  background: var(--white); color: var(--night); border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  transition: background-color .2s;
}
.trend-codes svg { width: 14px; height: 14px; }
.trend-body { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.trend-name { font-size: 26px; font-weight: 700; line-height: 1.15; }
/* Glass button that fills with lime on hover */
.trend-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 18px;
  background: rgba(255, 255, 255, .14); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 500;
  transition: background-color .2s, color .2s, border-color .2s;
}
@media (hover: hover) {
  .trend-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
  .trend-card:hover img { transform: scale(1.05); }
  .trend-card:hover .trend-codes { background: var(--lime); }
  .trend-card:hover .trend-go { background: var(--lime); color: var(--night); border-color: var(--lime); }
}
.trend-card:focus-visible .trend-go { background: var(--lime); color: var(--night); border-color: var(--lime); }

/* Flight deals: region list on the left, tickets on the right */
.fare-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; margin-top: 32px; align-items: start; }
.fare-regions { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card); }
.fare-region {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 8px 16px; background: none; border: 0; border-radius: 14px;
  color: var(--text); font-size: 15px; font-weight: 500; text-align: left;
  transition: background-color .15s;
}
.fare-region small { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.fare-region:hover { background: rgba(127, 127, 127, .14); }
.fare-region[aria-pressed="true"] { background: var(--lime); color: var(--night); }
.fare-region[aria-pressed="true"] small { color: var(--night); }
.fare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fare-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; overflow: hidden;
  background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-left: 4px solid var(--logo-o); border-radius: 20px;
}
.fare-main { padding: 16px 18px; }
.fare-airline { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 500; }
/* Transparent logos: colour in the light theme, white in the dark theme */
.fare-logo { display: flex; align-items: center; height: 32px; }
.fare-logo img { display: block; width: auto; height: auto; max-height: 30px; max-width: 130px; }
.fare-route { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fare-end { display: flex; flex-direction: column; }
.fare-end strong { font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.fare-end small { font-size: 12px; color: var(--text-soft); }
.fare-to { text-align: right; }
.fare-stub {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 12px; border-left: 2px dashed var(--line); text-align: center;
}
.fare-stub::before, .fare-stub::after {
  /* The notches where the stub tears off */
  content: ""; position: absolute; left: -11px; width: 20px; height: 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
}
.fare-stub::before { top: -11px; }
.fare-stub::after { bottom: -11px; }
.fare-stub small { font-size: 12px; color: var(--text-soft); }
.fare-stub strong { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--accent-text); }
.fare-btn { margin-top: 8px; min-height: 40px; padding: 6px 14px; font-size: 13px; }
.fare-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.fare-foot p { font-size: 13px; color: var(--text-soft); }
.fare-foot .btn { min-height: var(--tap); padding: 8px 20px; font-size: 14px; }

/* Sliders: seasonal offers and airline experience */
.slider-row {
  display: flex; gap: 20px; margin-top: 32px; padding-block: 4px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider-row::-webkit-scrollbar { display: none; }
.slider-row > * { scroll-snap-align: start; }
.slider-controls { margin-top: 12px; }
.slider-controls .route-arrow:disabled { opacity: .35; cursor: default; }
.sea-card {
  flex: 0 0 calc((100% - 40px) / 3); display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.sea-photo { position: relative; height: 200px; background: var(--skeleton); color: var(--white); }
.sea-photo img { width: 100%; height: 100%; object-fit: cover; }
.sea-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 60%); }
/* The season and the dates share one dark glass label style */
.sea-when, .sea-photo .chip {
  position: absolute; top: 16px; z-index: 2; padding: 5px 12px;
  background: rgba(10, 10, 10, .65); color: var(--white);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4;
}
.sea-when { right: 16px; background: var(--lime); color: var(--night); font-weight: 600; }
.sea-photo .chip { left: 16px; }
.sea-place { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; }
.sea-place strong { font-size: 26px; font-weight: 700; line-height: 1.15; }
.sea-place small { font-size: 13px; opacity: .85; }
.sea-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.sea-body .fare-route { margin-top: 0; }
.sea-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sea-logo { display: flex; align-items: center; height: 28px; max-width: 110px; }
.sea-logo img { max-height: 28px; max-width: 110px; width: auto; height: auto; }
.sea-tags { display: flex; gap: 6px; }
.sea-tags span { padding: 3px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; }
.sea-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 2px dashed var(--line); }
.sea-buy p { font-size: 13px; color: var(--text-soft); }
.sea-buy strong { font-size: 24px; font-weight: 700; color: var(--text); }
.sea-buy .btn { flex: none; min-height: var(--tap); padding: 8px 18px; font-size: 14px; }

/* Airline experience: a full photo card, with the white logo, name and line over the bottom */
.best-card {
  position: relative; flex: 0 0 calc((100% - 40px) / 3); height: 380px; padding: 0; overflow: hidden;
  background: var(--skeleton); color: var(--white); text-align: center;
  border: 0; border-radius: var(--radius-card);
}
.best-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.best-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.65) 32%, rgba(10,10,10,0) 62%); }
.best-body { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.best-logo { display: block; width: auto; height: auto; max-height: 34px; max-width: 120px; margin-bottom: 10px; }
.best-name { font-size: 28px; font-weight: 700; line-height: 1.2; }
.best-note { margin-top: 4px; font-size: 15px; opacity: .9; }
.best-name::after { content: ""; display: block; width: 36px; height: 3px; margin: 8px auto 0; border-radius: 3px; background: var(--lime); }
@media (hover: hover) {
  .best-card:hover .best-photo { transform: scale(1.05); }
}

/* Umrah and holiday deal cards, styled like tickets */
.deal-tabs { display: flex; gap: 8px; margin: 28px 0 24px; overflow-x: auto; scrollbar-width: none; }
.deal-tabs::-webkit-scrollbar { display: none; }
.deal-tab {
  flex: none; min-height: var(--tap); padding: 0 20px;
  background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s;
}
.deal-tab:hover { border-color: var(--text); }
.deal-tab[aria-pressed="true"] { background: var(--lime); color: var(--night); border-color: var(--lime); }
.deal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.deal-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.deal-photo { position: relative; height: 210px; background: var(--skeleton); }
.deal-photo img { width: 100%; height: 100%; object-fit: cover; }
.deal-main { flex: 1; padding: 18px 20px 16px; }
.deal-place { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--accent-text); }
.deal-place svg { width: 17px; height: 17px; flex: none; }
.deal-title { margin-top: 8px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.deal-includes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.deal-includes li { display: flex; align-items: center; gap: 6px; }
.deal-includes svg { width: 15px; height: 15px; flex: none; }
.deal-ticket { position: relative; padding: 18px 20px 20px; border-top: 2px dashed var(--line); }
.deal-ticket::before, .deal-ticket::after {
  /* The notches of a tear-off ticket */
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
}
.deal-ticket::before { left: -11px; }
.deal-ticket::after { right: -11px; }
.deal-route { display: flex; align-items: center; gap: 10px; }
.deal-route strong { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.deal-path { position: relative; flex: 1 1 auto; min-width: 28px; height: 18px; }
.deal-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--milestone); }
.deal-path svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; padding: 1px; transform: translate(-50%, -50%) rotate(35deg); background: var(--bg-alt); color: var(--accent-text); }
.deal-nights { flex: none; padding: 3px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; }
.deal-via { margin-top: 6px; font-size: 13px; color: var(--text-soft); }
.deal-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.deal-price { font-size: 13px; line-height: 1.2; }
.deal-price strong { font-size: 24px; font-weight: 700; }
.deal-price small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.deal-btn { flex: none; min-height: var(--tap); padding: 8px 18px; font-size: 14px; }
.deal-note { margin-top: 18px; font-size: 13px; color: var(--text-soft); }
.deal-note a { color: var(--text); font-weight: 500; text-underline-offset: 3px; }
@media (hover: hover) {
  .deal-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
}

/* Holidays page: holidays filtered by trip type */
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pick {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.pick[hidden] { display: none; }
.pick-photo { position: relative; height: 240px; overflow: hidden; background: var(--skeleton); color: var(--white); }
.pick-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .75), transparent 55%); }
.pick-tag, .pick-nights {
  position: absolute; top: 16px; z-index: 2; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4;
}
.pick-tag { left: 16px; background: rgba(10, 10, 10, .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pick-nights { right: 16px; background: var(--lime); color: var(--night); font-weight: 600; }
.pick-place { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; }
.pick-place strong { font-size: 26px; font-weight: 700; line-height: 1.15; }
.pick-place small { font-size: 13px; opacity: .85; }
.pick-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.pick-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 14px; }
.pick-includes li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pick-includes span {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  font-size: 11px; color: var(--accent-text);
}
.pick-buy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
}
.pick-includes { margin-bottom: 18px; }
.pick-price { font-size: 13px; line-height: 1.2; }
.pick-price strong { font-size: 24px; font-weight: 700; }
.pick-price small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.pick-buy .btn { flex: none; min-height: var(--tap); padding: 8px 18px; font-size: 14px; }
@media (hover: hover) {
  .pick:hover { transform: translateY(-8px); border-color: var(--lime); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
  .pick:hover .pick-photo img { transform: scale(1.05); }
}

/* Holidays page: why book with us */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.why-item {
  position: relative; padding: 26px 24px 28px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.why-num { position: absolute; top: 22px; right: 24px; font-size: 14px; font-weight: 700; color: var(--text-soft); letter-spacing: .06em; }
.why-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--night); }
.why-icon svg { width: 26px; height: 26px; }
.why-item h3 { margin-top: 20px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.why-item p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Holidays page: FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 64px; align-items: start; }
.faq-side h2 { margin: 12px 0 14px; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -.03em; }
.faq-help { margin-top: 28px; padding: 24px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card); }
.faq-help strong { font-size: 19px; }
.faq-help p { margin: 6px 0 18px; font-size: 15px; color: var(--text-soft); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 20px; transition: border-color .2s; }
.faq-item[open] { border-color: var(--lime); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 22px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .2s, transform .3s var(--ease); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-plus { background: var(--lime); border-color: var(--lime); color: var(--night); transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.faq-item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 20px; }

/* Section headings on the home page */
/* Left-aligned: a small label with the brand's dot, the headline, and the description on the right */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end; gap: 12px 48px;
}
.sec-head h2 { margin: 0; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.accent { color: var(--accent-text); }
.eyebrow {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--logo-o); }
.sec-sub { padding-bottom: 6px; color: var(--text-soft); }

/* Popular airlines */
.air-wrap { display: flex; align-items: stretch; gap: 16px; margin-top: 32px; }
.air-intro {
  position: relative; flex: 0 0 374px; height: 340px; overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--skeleton); color: var(--white);
}
.air-intro > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.air-intro::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .78); }
.air-intro-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 24px; }
.air-intro-body h3 { font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.air-intro-body p { margin-top: 8px; font-size: 15px; }
.air-intro-body .btn { margin-top: 16px; min-height: var(--tap); padding: 8px 20px; font-size: 14px; }
.air-arrows { display: flex; gap: 10px; margin-top: auto; }
.air-arrows .route-arrow { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); }
.air-arrows .route-arrow:hover:not(:disabled) { border-color: var(--white); }
.air-arrows .route-arrow:disabled { opacity: .35; cursor: default; }
.air-row {
  flex: 1 1 0; min-width: 0; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--radius-card);
}
.air-row::-webkit-scrollbar { display: none; }
.air-card {
  position: relative; flex: 0 0 254px; height: 340px; padding: 0; overflow: hidden;
  background: var(--skeleton); color: var(--white); text-align: left;
  border: 0; border-radius: var(--radius-card);
  scroll-snap-align: start;
}
.air-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.air-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.68) 26%, rgba(10,10,10,0) 52%);
}
.air-body { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.air-name { font-size: 22px; font-weight: 700; line-height: 1.2; }
.air-price { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
@media (hover: hover) {
  .air-card:hover img { transform: scale(1.04); }
}

/* Flights from London carousel */
.route-stage {
  position: relative; height: 368px; max-width: 1120px; margin: 16px auto 0;
  overflow: hidden; touch-action: pan-y; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.route {
  position: absolute; top: 24px; left: 50%;
  width: 390px; height: 320px; overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--skeleton); color: var(--white);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
}
.route img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.route::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 36%, rgba(10,10,10,0) 72%);
}
.route[data-pos="0"] { z-index: 5; transform: translateX(-50%); cursor: default; }
/* Side cards are dimmed, not see-through, so the cards behind them don't show through */
.route[data-pos="1"] { z-index: 4; transform: translateX(32%) scale(.82); filter: brightness(.62); }
.route[data-pos="-1"] { z-index: 4; transform: translateX(-132%) scale(.82); filter: brightness(.62); }
.route[data-pos="2"] { z-index: 3; transform: translateX(72%) scale(.66); filter: brightness(.36); }
.route[data-pos="-2"] { z-index: 3; transform: translateX(-172%) scale(.66); filter: brightness(.36); }
.route[data-pos="out"] { z-index: 1; transform: translateX(-50%) scale(.5); opacity: 0; pointer-events: none; }
.route-body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.route-name { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.route-price { margin-top: 2px; font-size: 14px; }
.route-price strong { font-size: 20px; font-weight: 700; }
.route-btn { margin-top: 12px; min-height: var(--tap); padding: 8px 20px; font-size: 14px; }
.route:not([data-pos="0"]) .route-btn { pointer-events: none; }
.route-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; }
.route-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.route-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  background: var(--bg-alt); color: var(--text);
  border: 1.5px solid var(--line); border-radius: 50%;
  transition: border-color .15s;
}
.route-arrow:hover { border-color: var(--text); }
.route-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route-dots { display: flex; align-items: center; }
.route-dot { display: grid; place-items: center; width: 22px; height: 44px; padding: 0; background: none; border: 0; }
.route-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--milestone); transition: width .25s var(--ease), background-color .25s;
}
.route-dot[aria-current="true"] { width: 36px; }
.route-dot[aria-current="true"]::before { width: 30px; background: var(--logo-o); }

/* Where to go by month */
.month-pills {
  display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 28px 0 24px; padding: 6px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.month-pills::-webkit-scrollbar { display: none; }
.month-pill {
  flex: none; min-width: 52px; min-height: var(--tap); padding: 0 10px;
  background: none; border: 0; border-radius: 999px;
  color: var(--text-soft); font-size: 14px; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.month-pill:hover { color: var(--text); }
.month-pill[aria-pressed="true"] { background: var(--lime); color: var(--night); }

.weather-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 232px; gap: 16px; }
.weather-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--skeleton); color: var(--white); text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.weather-big { grid-row: span 2; }
.weather-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.weather-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.76) 38%, rgba(10,10,10,0) 74%);
}
.temp-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px;
  background: var(--white); color: var(--night); border-radius: 999px;
  font-size: 13px; font-weight: 500;
}
.temp-chip svg { width: 18px; height: 18px; fill: none; stroke: #4A7500; stroke-width: 2; stroke-linecap: round; }
.weather-body { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; }
.weather-country { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.weather-name { font-size: 21px; font-weight: 700; line-height: 1.25; }
.weather-blurb { margin-top: 4px; font-size: 15px; }
.weather-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 8px; font-size: 13px; }
.weather-flight { display: inline-flex; align-items: center; gap: 6px; }
.weather-flight svg { width: 15px; height: 15px; flex: none; color: inherit; }
.weather-price strong { font-size: 17px; font-weight: 700; }
.weather-big .weather-body { left: 24px; right: 24px; bottom: 22px; }
.weather-big .weather-name { font-size: 40px; line-height: 1.15; letter-spacing: -.02em; }
.weather-big .weather-price strong { font-size: 24px; }
.weather-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.weather-foot p { font-size: 13px; color: var(--text-soft); }
.weather-foot .btn { flex: none; }
@media (hover: hover) {
  .weather-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0, 0, 0, .34); }
  .weather-card:hover img { transform: scale(1.04); }
}

/* 5. How it works */
/* Three panels across the full width of the page, each centred under its number */
.how .wrap { max-width: none; }
.how h2 { text-align: center; font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -.03em; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: 320px; padding: 48px 32px;
  background: var(--bg-alt); text-align: center;
  border: 1.5px solid var(--line); border-radius: var(--radius-hero);
}
.step-num {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 24px;
  background: var(--text); color: var(--bg);
  font-size: 30px; font-weight: 700;
}
.step-end { background: var(--lime); color: var(--night); }
.steps h3 { margin-top: 28px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.steps p { margin-top: 12px; font-size: 17px; color: var(--text-soft); max-width: 24em; }

/* 6. CTA band */
.cta {
  --focus: var(--night);
  margin-top: var(--section-gap);
  background: var(--lime); color: var(--night);
}
.cta :focus-visible { box-shadow: 0 0 0 8px var(--white); }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding-block: 72px;
}
.cta h2 { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.05; }
.cta p { margin-top: 12px; font-size: 18px; max-width: 32em; }
.cta .btn { flex: none; min-width: 190px; min-height: 58px; }

/* 7. Footer: always black, with the reversed logo */
.footer {
  --logo-badge: var(--white); --logo-e: var(--night); --logo-word: var(--white);
  --logo-o: var(--lime); --logo-travel: var(--milestone); --focus: var(--white);
  background: var(--night); color: var(--white);
  padding-block: 72px 32px;
}
/* The tagline, small, under the logo and description */
.footer-banner { margin-top: 28px; }
.banner-line {
  display: flex; align-items: center; gap: .22em;
  font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap;
}
.banner-pill {
  display: inline-block; padding: .04em .26em .1em;
  background: var(--lime); color: var(--night);
  border-radius: .24em;
}
.banner-services {
  margin-top: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--white);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer-brand > p { margin-top: 20px; max-width: 26em; color: #C9C9C0; }
.footer .logo { display: inline-block; }
.footer h3 { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--milestone); margin-bottom: 10px; }
.footer li a, .footer li.plain { display: flex; align-items: center; gap: 10px; min-height: var(--tap); white-space: nowrap; }
.foot-icon { width: 20px; height: 20px; flex: none; }
.line-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer li a { text-decoration: none; }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 48px; font-size: 14px; color: var(--milestone);
}
.footer-base::before { content: ""; flex-basis: 100%; border-top: 1px solid #2C2C2A; margin-bottom: 18px; }

/* Mobile bottom bar */
.bottom-bar { display: none; }

/* Trip request dialog */
.quote {
  --field-text: var(--night);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 28px; border: 0; border-radius: 28px;
  background: var(--dialog); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.quote::backdrop { background: rgba(10, 10, 10, .72); }
.quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote h2 { font-size: 32px; }
.quote-lead { margin: 8px 0 20px; color: var(--text-soft); }
.quote .field { margin-bottom: 14px; }
.quote textarea { resize: vertical; }
.quote-send { width: 100%; margin-top: 6px; }
.quote-email { display: flex; align-items: center; justify-content: center; min-height: var(--tap); margin-top: 8px; font-weight: 500; }
.quote-email[hidden] { display: none; }
.group-back {
  display: block; width: 100%; min-height: var(--tap); margin-top: 8px;
  background: none; border: 0; color: inherit; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px;
}

/* Tablet */
@media (max-width: 1024px) {
  .cards, .packs, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .weather-grid { grid-template-columns: 1fr 1fr; }
  .weather-big { grid-column: 1 / -1; grid-row: span 1; }
  .air-intro { flex-basis: 300px; }
  .deal-grid, .pick-grid, .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fare-wrap { grid-template-columns: minmax(0, 1fr); }
  .fare-regions { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .fare-region { flex: none; }
  .fare-grid { grid-template-columns: minmax(0, 1fr); }
  .sea-card, .best-card { flex-basis: calc((100% - 20px) / 2); }
  .route[data-pos="2"], .route[data-pos="-2"] { opacity: 0; pointer-events: none; }
  .tabs-row, .tabs { flex-wrap: wrap; }
  .bar, .leg-row { flex-wrap: wrap; }
  .bar.is-multi .search-go { flex: 1 1 100%; }
  /* Same order as phones: the tick box comes just before the Search button */
  .direct { order: 8; }
  .bar .search-go, .bar.is-multi .search-go { order: 9; }
  .seg-place { flex: 1 1 40%; }
  .seg-dates { flex: 1 1 55%; }
  .seg-who { flex: 1 1 35%; }
  .search-go { flex: 1 1 100%; min-height: 56px; }
  .cal { left: 0; transform: none; width: 340px; padding-inline: 16px; }
  .cal-months { grid-template-columns: 1fr; }
  .cal-prev { left: 16px; }
  .cal-next { right: 16px; }
  .footer-grid { grid-template-columns: 1.2fr .7fr 1.3fr; }
  .page-hero .hero-copy { padding-inline: 44px; }
  .page-hero .hero-frame::after { background: linear-gradient(90deg, rgba(10,10,10,.86), rgba(10,10,10,.8) 75%, rgba(10,10,10,.3)); }
  .has-photo .hero-photo { width: 62%; }
  .has-photo .hero-frame::after { background: linear-gradient(90deg, #0A0A0A 38%, rgba(10,10,10,.86) 58%, rgba(10,10,10,.2) 82%, rgba(10,10,10,0) 100%); }
  .has-photo .promise { max-width: 24em; }
  .hero-copy { padding-inline: 44px; padding-bottom: 96px; }
  .hero-frame { height: min(560px, calc(100svh - 80px)); }
  .hero-frame::after { background: linear-gradient(90deg, rgba(10,10,10,.86), rgba(10,10,10,.74) 70%, rgba(10,10,10,.4)); }
}

/* The links no longer fit on one line: switch to the burger menu */
@media (max-width: 1100px) {
  .burger { display: inline-grid; }
  .burger path { transition: transform .2s var(--ease), opacity .2s; transform-origin: 12px 12px; }
  .burger[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
  .burger[aria-expanded="true"] .b2 { opacity: 0; }
  .burger[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }
  .nav { position: sticky; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 12px;
    padding: 12px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-link { min-height: 48px; font-size: 18px; padding-inline: 12px; }
  .nav-chev { display: none; }
}

/* Mobile: same story, less width, thumb first */
@media (max-width: 760px) {
  :root { --section-gap: 56px; --gutter: 16px; --radius-hero: 30px; --tap: 48px; }

  html { scroll-padding-top: 80px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .nav-inner { min-height: 68px; padding-block: 8px; gap: 8px; }
  .logo svg { height: 42px; }
  .nav-cta { display: none; }

  /* Inset 12px, 440px tall, rounded 30 */
  .hero { padding-inline: 12px; }
  .hero-frame { height: min(440px, calc(100svh - 68px)); min-height: 420px; }
  .hero-frame::after { background: rgba(10, 10, 10, .76); }
  .hero-copy { padding: 24px 20px 56px; justify-content: flex-end; }
  .hero h1 { font-size: 50px; }
  .promise { margin-top: 12px; font-size: 16px; }
  .hero-actions { flex-direction: column; align-self: stretch; gap: 4px; margin-top: 18px; }
  .hero-actions .btn { width: 100%; min-height: 52px; }
  .hero-actions .btn-ghost { border-color: transparent; min-height: 48px; text-decoration: underline; text-underline-offset: 4px; }
  .hero-actions .btn-ghost:hover { background: none; color: var(--white); }

  .page-hero .hero-frame { height: auto; min-height: 340px; }
  .page-hero .hero-frame::after { background: rgba(10, 10, 10, .76); }
  .page-hero .hero-copy { min-height: 340px; padding: 28px 20px 56px; }
  .page-hero.no-search .hero-copy { padding-bottom: 24px; }
  .page-hero h1 { font-size: 44px; }
  .page-hero .promise { font-size: 15px; }
  /* Phones: the photo sits on top, the text underneath */
  .has-photo .hero-frame { min-height: 480px; }
  .has-photo .hero-copy { min-height: 480px; }
  .has-photo .hero-photo { right: 0; left: 0; width: 100%; height: 56%; }
  .has-photo .hero-frame::after { background: linear-gradient(to top, #0A0A0A 44%, rgba(10,10,10,.75) 54%, rgba(10,10,10,0) 76%); }
  .has-photo .promise { max-width: none; }

  /* The search bar sits on the page: tabs, flight type, one joined block of fields, tick box, Search */
  .search { margin-top: -30px; padding-inline: 12px; }
  .search-panel { border-radius: 24px; padding: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
  .search.pop-open { z-index: 100; animation: none; }
  .search.pop-open::before { content: ""; position: fixed; inset: 0; z-index: 15; background: rgba(10, 10, 10, .55); }

  .tabs-row { display: block; margin-bottom: 8px; }
  .tabs { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 56px; padding: 6px 4px;
    background: var(--paper); border-radius: 14px;
    font-size: 11px;
  }
  .tab svg { width: 20px; height: 20px; }
  .trip-types { flex-wrap: nowrap; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
  .trip-type { gap: 6px; font-size: 14px; white-space: nowrap; }
  .leg-remove { min-height: 48px; }
  .add-leg { align-self: stretch; }

  .bar, .bar.is-multi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
  .seg-place { padding-block: 10px; }
  .date-part, .who-btn { padding: 10px 12px; min-height: 60px; }
  .bar > .seg-dates .date-part { padding-inline: 8px; }
  .bar > .seg-dates .val { font-size: 14px; }
  .bar.is-multi > .seg-dates .date-part { padding-inline: 12px; }
  .bar.is-multi > .seg-dates .val { font-size: 16px; }
  .bar > .seg-place { grid-column: 1 / -1; border-radius: 4px; }
  .bar > [data-seg="from"], .bar > [data-seg="from"][hidden] ~ [data-seg="to"] { border-radius: 16px 16px 4px 4px; }
  .bar > .seg-dates { border-radius: 4px 4px 4px 16px; }
  .bar > .seg-who { border-radius: 4px 4px 16px 4px; }
  .swap {
    grid-column: 1 / -1; justify-self: end; align-self: center;
    margin: -18px 12px -18px 0; transform: rotate(90deg);
  }
  .swap:hover { transform: rotate(90deg); }
  .direct { grid-column: 1 / -1; margin-top: 4px; }
  .bar .search-go, .bar.is-multi .search-go { grid-column: 1 / -1; width: 100%; }
  .place-list { width: 100%; }

  /* Multi-city: each flight is its own joined block */
  .bar.is-multi .leg-first { grid-column: 1 / -1; margin-bottom: 4px; }
  .bar.is-multi > .seg-dates { grid-column: 1 / -1; border-radius: 4px 4px 16px 16px; }
  .bar.is-multi .legs { grid-column: 1 / -1; margin-block: 10px 6px; }
  .bar.is-multi > .seg-who { grid-column: 1 / -1; border-radius: 16px; }
  .leg-row { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .leg-row .seg { flex: none; border-radius: 4px; }
  .leg-row .seg:first-child { border-radius: 16px 16px 4px 4px; }
  .leg-row .seg:last-child { border-radius: 4px 4px 16px 16px; }

  /* Calendar and travellers rise from the bottom of the screen */
  .cal, .who-pop {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; transform: none;
    width: auto; max-height: 90dvh; overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
  }
  .cal-months { grid-template-columns: 1fr; }
  .cal-prev { left: 16px; top: 16px; }
  .cal-next { right: 16px; top: 16px; }
  .cal-nav { width: 44px; height: 44px; }
  .cal-month h4 { line-height: 44px; }
  .day { font-size: 15px; aspect-ratio: auto; height: 46px; }
  .day.is-start, .day.is-end, .day:not(.in-range):not(.is-preview) { border-radius: 14px; }
  .day.range-start { border-radius: 14px 0 0 14px; }
  .day.range-end { border-radius: 0 14px 14px 0; }
  .cal-foot { flex-wrap: wrap; }
  .cal-hint { flex-basis: 100%; }
  .cal-clear { margin-right: auto; }
  .step { width: 48px; height: 48px; }
  .stepper { gap: 8px; }

  .section h2 { margin-bottom: 24px; }
  .logo-strip { margin-top: 28px; padding-block: 6px; }
  .logo-item { width: 124px; height: 56px; margin-inline: 4px; padding: 8px 10px; }
  .logo-track { animation-duration: 55s; }

  /* Flights page */
  .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .trend-card { aspect-ratio: 3 / 4; }
  .trend-codes { top: 10px; left: 10px; padding: 4px 9px; font-size: 10px; }
  .trend-codes svg { width: 12px; height: 12px; }
  .trend-body { left: 8px; right: 8px; bottom: 12px; }
  .trend-name { font-size: 19px; }
  .trend-go { margin-top: 8px; padding: 6px 12px; font-size: 12px; }
  .fare-wrap { margin-top: 20px; }
  .fare-regions { margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); background: none; border: 0; border-radius: 0; gap: 8px; }
  .fare-region {
    flex-direction: column; justify-content: center; gap: 0;
    min-height: 52px; padding: 6px 18px; text-align: center; line-height: 1.25;
    background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; font-weight: 700;
  }
  .fare-region small { font-size: 11px; font-weight: 400; }
  .fare-region[aria-pressed="true"] { border-color: var(--lime); }
  .fare-card { grid-template-columns: minmax(0, 1fr) 122px; }
  .fare-main { padding: 14px; }
  .fare-end strong { font-size: 18px; }
  .fare-stub strong { font-size: 22px; }
  .fare-btn { min-height: 44px; }
  .fare-foot { flex-direction: column; align-items: stretch; }
  .slider-row {
    gap: 12px; margin-top: 20px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .sea-card, .best-card { flex-basis: 84vw; max-width: 340px; }
  .best-card { height: 340px; }
  .best-name { font-size: 24px; }

  /* Holidays page: one holiday per row, why-us cards stack, FAQ text a little smaller */
  .pick-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pick-photo { height: 200px; }
  .pick-place strong { font-size: 22px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .why-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .why-icon { grid-row: span 2; width: 44px; height: 44px; }
  .why-icon svg { width: 22px; height: 22px; }
  .why-item h3 { margin-top: 0; padding-right: 28px; font-size: 17px; }
  .why-item p { margin-top: 4px; font-size: 14px; }
  .why-num { top: 20px; right: 20px; font-size: 12px; }
  .faq-item summary { min-height: 58px; padding: 14px 16px; font-size: 15px; }
  .faq-item p { padding: 0 16px 16px; font-size: 14px; }

  /* Deals: tabs scroll sideways, cards swipe with the next one peeking in */
  .deal-tabs { margin: 20px calc(var(--gutter) * -1) 16px; padding-inline: var(--gutter); }
  .deal-grid {
    display: flex; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 2px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .deal-grid::-webkit-scrollbar { display: none; }
  .deal-card { flex: 0 0 84vw; max-width: 340px; scroll-snap-align: start; }
  .deal-photo { height: 180px; }
  .deal-btn { min-height: 48px; }

  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sec-head h2 { margin: 0; }
  .sec-sub { padding-bottom: 0; }

  /* Airlines: the intro card on top, then a swipe row with the next card peeking in */
  .air-wrap { flex-direction: column; margin-top: 20px; }
  .air-intro { flex: none; height: auto; }
  .air-intro-body { height: auto; padding: 20px; }
  .air-arrows { display: none; }
  .air-intro-body .btn { min-height: 48px; }
  .air-row { flex: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); border-radius: 0; gap: 12px; }
  .air-card { flex: 0 0 min(250px, 68vw); height: 320px; }

  /* Carousel: one card with the next ones peeking in, moved by swiping */
  .route-stage { height: 340px; margin-inline: calc(var(--gutter) * -1); -webkit-mask-image: none; mask-image: none; }
  .route { top: 16px; width: min(290px, 76vw); height: 308px; }
  .route[data-pos="1"] { transform: translateX(46%) scale(.84); }
  .route[data-pos="-1"] { transform: translateX(-146%) scale(.84); }
  .route-name { font-size: 28px; }
  .route-foot { flex-direction: column-reverse; margin-top: 8px; }
  .route-controls { gap: 8px; }
  .route-dot { width: 18px; }
  .route-dot[aria-current="true"] { width: 32px; }
  .route-dot[aria-current="true"]::before { width: 26px; }

  /* Months scroll sideways; the big card sits above a 2 x 2 grid */
  .month-pills { margin-block: 20px 16px; }
  .weather-grid { grid-auto-rows: 216px; gap: 10px; }
  .weather-big { grid-row: span 1; height: 280px; }
  .weather-grid { grid-template-rows: 280px; }
  .weather-big .weather-name { font-size: 32px; }
  .weather-body { left: 12px; right: 12px; bottom: 12px; }
  .weather-big .weather-body { left: 18px; right: 18px; bottom: 16px; }
  .weather-card:not(.weather-big) .weather-name { font-size: 18px; }
  .weather-card:not(.weather-big) .weather-meta { flex-direction: column; margin-top: 4px; }
  .temp-chip { top: 10px; left: 10px; }
  .weather-foot { flex-direction: column; align-items: stretch; text-align: center; }

  /* Swipe row showing about 1.2 cards */
  .cards {
    display: flex; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 4px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 80vw; max-width: 340px; scroll-snap-align: start; }

  .packs, .blog-grid { grid-template-columns: 1fr; gap: 12px; }
  .pack { padding: 20px; }
  .pack-name { font-size: 22px; }
  .blog-heading { margin-bottom: 24px; }
  .post > p:not(.post-meta) { font-size: 16px; }
  .post-photo { margin-block: 20px; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .steps li { min-height: 0; padding: 32px 20px; border-radius: var(--radius-card); }
  .step-num { width: 64px; height: 64px; border-radius: 20px; font-size: 26px; }
  .steps h3 { margin-top: 18px; font-size: 30px; }
  .steps p { margin-top: 8px; font-size: 16px; }

  .cta-inner { flex-direction: column; align-items: stretch; padding-block: 48px; gap: 24px; }
  .cta .btn { width: 100%; }

  .footer { padding-block: 48px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-base { margin-top: 28px; }

  .bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .bottom-bar .btn { min-height: 48px; padding-inline: 12px; }

  /* The trip request becomes a bottom sheet */
  .quote {
    width: 100%; max-width: 100%; margin: auto 0 0;
    border-radius: 28px 28px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 92dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Landing pages built by site-builder: flights to a country, holiday destinations and types, airlines */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.crumbs [aria-current] { color: var(--white); }
.lp-hero h1 { overflow-wrap: break-word; }
.lp-hero-logo img { display: block; height: 56px; width: auto; max-width: 240px; margin-bottom: 18px; }
.lp-alt { margin-top: var(--section-gap); padding-bottom: var(--section-gap); background: var(--bg-alt); }
.lp-alt .lp-step, .lp-alt .lp-logo, .lp-alt .lp-temp { background: var(--bg); }

.lp-facts-sec { padding-top: 48px; }
.lp-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lp-facts li { padding: 16px 18px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 20px; }
.lp-facts span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.lp-facts strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }

.pick-place a { color: inherit; text-decoration: none; }
.pick-place a:hover { text-decoration: underline; text-underline-offset: 4px; }

.lp-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 32px; }
.lp-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 124px; padding: 18px; text-align: center; text-decoration: none;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 20px;
  font-size: 14px; font-weight: 500; transition: border-color .2s, transform .2s var(--ease);
}
.lp-logo:hover { border-color: var(--lime); transform: translateY(-4px); }
.lp-logo-img { display: flex; align-items: center; justify-content: center; height: 44px; }
.lp-logo-img img { max-height: 40px; max-width: 140px; width: auto; height: auto; }

.lp-bars, .lp-temps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
.lp-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp-bar-fill { position: relative; width: 100%; height: 170px; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px; }
.lp-bar-fill::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: calc(var(--h) - 8px); background: var(--lime); border-radius: 10px; }
.lv1 .lp-bar-fill::after { opacity: .3; }
.lv2 .lp-bar-fill::after { opacity: .55; }
.lv3 .lp-bar-fill::after { opacity: .8; }
.lp-bar strong { font-size: 14px; }
.lp-bar small { font-size: 11px; color: var(--text-soft); }

.lp-temp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 10px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; }
.lp-temp strong { font-size: 16px; }
.lp-temp small { font-size: 12px; color: var(--text-soft); }
.lp-temp-bar { position: relative; width: 10px; height: 96px; overflow: hidden; background: var(--line); border-radius: 99px; }
.lp-temp-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 99px; }
.lp-temp.cool .lp-temp-bar::after { background: #5BB8F5; }
.lp-temp.mild .lp-temp-bar::after { background: #9BD94A; }
.lp-temp.warm .lp-temp-bar::after { background: #FFBF2E; }
.lp-temp.hot .lp-temp-bar::after { background: #FF6A3D; }
.lp-temp.is-best, .lp-alt .lp-temp.is-best { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.lp-key { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border: 2px solid var(--lime); border-radius: 4px; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.lp-steps.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-steps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-step { padding: 24px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card); }
.lp-step-num { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--lime); color: var(--night); border-radius: 50%; font-size: 14px; font-weight: 700; }
.lp-step h3 { margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.lp-step p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

.lp-article { max-width: 820px; }
.section .lp-article h2 { margin: 40px 0 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; }
.section .lp-article h2:first-child { margin-top: 0; }
.lp-article p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--text-soft); }

.section .lp-related-title { margin-bottom: 0; font-size: 24px; font-weight: 700; }
.lp-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 18px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s;
}
.lp-link:hover { border-color: var(--lime); }

.lp-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.lp-route {
  display: flex; flex-direction: column; padding: 22px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: border-color .2s, transform .3s var(--ease);
}
.lp-route-tag { align-self: flex-start; padding: 4px 12px; background: var(--lime); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 600; }
.lp-route-codes { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.lp-route-line { flex: 1; min-width: 14px; border-top: 1.5px dashed var(--milestone); }
.lp-route-stop { padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--accent-text); }
.lp-route h3 { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.lp-route > p:not(.lp-route-codes) { flex: 1; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.lp-route-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lp-route-foot small { font-size: 13px; color: var(--text-soft); }
.lp-route-foot .btn, .pick-buy a.btn { flex: none; min-height: var(--tap); padding: 8px 18px; font-size: 14px; }

.lp-airs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.lp-air {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
  text-decoration: none; transition: border-color .2s, transform .3s var(--ease);
}
.lp-air .lp-logo-img { justify-content: flex-start; height: 48px; margin-bottom: 14px; }
.lp-air strong { font-size: 19px; font-weight: 700; }
.lp-air small { font-size: 13px; color: var(--text-soft); }
.lp-air-go { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500; color: var(--accent-text); }
@media (hover: hover) {
  .lp-route:hover, .lp-air:hover { border-color: var(--lime); transform: translateY(-6px); }
}

@media (max-width: 1024px) {
  .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-routes, .lp-steps.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-airs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lp-hero h1 { font-size: 40px; }
  .lp-hero-logo img { height: 34px; }
  .lp-facts-sec { padding-top: 32px; }
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lp-facts li { padding: 12px 14px; border-radius: 16px; }
  .lp-facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lp-facts strong { font-size: 14px; }
  .lp-bars, .lp-temps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
  .lp-bar-fill { height: 110px; }
  .lp-temp-bar { height: 64px; }
  .lp-temp strong { font-size: 14px; }
  .lp-steps, .lp-steps.n2, .lp-steps.n4, .lp-routes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .lp-step { padding: 20px; }
  .lp-airs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-air { padding: 16px; }
  .lp-air strong { font-size: 16px; }
  .lp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .lp-logo { min-height: 104px; padding: 14px; }
  .lp-article p { font-size: 16px; }
  .lp-link { font-size: 13px; padding: 0 14px; }
}
.sec-head + .pick-grid, .sec-head + .lp-routes { margin-top: 32px; }
@media (min-width: 1025px) {
  /* Four cards fill one row instead of leaving one on its own */
  .pick-grid:has(> .pick:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick-grid:has(> .pick:nth-child(4):last-child) .pick-includes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sec-head + .pick-grid, .sec-head + .lp-routes { margin-top: 24px; }
}
/* ===== Flights-to pages: compare flights, city grid, demand by month, FAQ ===== */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Compare flights */
.fc-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; margin: 32px 0 22px; }
.fc-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 16px 20px; text-align: left; cursor: pointer;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--line); border-radius: 20px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.fc-tile small { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.fc-tile strong { font-size: 26px; font-weight: 700; line-height: 1.15; }
.fc-tile span { font-size: 13px; opacity: .8; }
.fc-tile:not(:disabled):hover { border-color: var(--text); }
.fc-tile[aria-pressed="true"] { background: var(--lime); color: var(--night); border-color: var(--lime); }
.fc-tile[aria-pressed="true"]::after { content: ""; position: absolute; left: 30px; bottom: -7px; width: 14px; height: 14px; background: var(--lime); border-radius: 3px; transform: rotate(45deg); }
.fc-tile:disabled { cursor: default; opacity: .5; }
.fc-count { display: flex; flex-direction: column; justify-content: center; padding: 0 6px; line-height: 1.3; }
.fc-count strong { font-size: 18px; }
.fc-count span, .fc-count small { font-size: 13px; color: var(--text-soft); }

.fc-list { display: flex; flex-direction: column; gap: 14px; }
.fc-card[hidden] { display: none; }
.fc-card {
  overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: border-color .2s, box-shadow .2s;
}
.fc-card:hover { border-color: rgba(182, 255, 0, .5); }
.fc-card.is-top { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 18px 40px rgba(0, 0, 0, .22); }
.fc-top { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 28px; padding: 20px 24px; }
.fc-air { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-logo { display: flex; align-items: center; justify-content: center; height: 40px; }
.fc-logo img { max-height: 34px; max-width: 120px; width: auto; height: auto; }
.fc-badge { padding: 3px 10px; background: rgba(182, 255, 0, .14); color: var(--accent-text); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fc-badge[hidden] { display: none; }
.fc-leg + .fc-leg { padding-left: 28px; border-left: 1px dashed var(--line); }
.fc-leg-label { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--text-soft); }
.fc-leg-row { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 14px; margin-top: 6px; }
.fc-end strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: .03em; line-height: 1.2; }
.fc-end small { display: block; font-size: 12px; color: var(--text-soft); }
.fc-end-to { text-align: right; }
.fc-path { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.fc-path small { font-size: 12px; color: var(--text-soft); }
.fc-path small:first-child { font-weight: 600; color: var(--text); }
.fc-line { position: relative; display: block; width: 100%; height: 14px; }
.fc-line::before { content: ""; position: absolute; left: 0; right: 16px; top: 50%; border-top: 1.5px solid var(--line); }
.fc-line i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: var(--bg-alt); border: 2px solid var(--lime); border-radius: 50%; transform: translate(-50%, -50%); }
.fc-path:has(.is-direct) .fc-line i { display: none; }
.fc-plane { position: absolute; right: 0; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: var(--accent-text); stroke: none; }
.fc-stop.is-direct { font-weight: 600; color: var(--accent-text); }

.fc-bottom {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: rgba(127, 127, 127, .06); border-top: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--lime);
}
.fc-chips { display: flex; flex-wrap: wrap; flex: 1; gap: 6px; min-width: 0; }
.fc-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; }
.fc-chips .ic { width: 13px; height: 13px; }
.fc-chips .fc-cabin { background: rgba(182, 255, 0, .14); border-color: transparent; color: var(--accent-text); }
.fc-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); background: none; border: 0; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.fc-toggle .ic, .fc-more .ic { width: 16px; height: 16px; transition: transform .2s; }
.fc-toggle[aria-expanded="true"] .ic, .fc-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.fc-price { line-height: 1.1; text-align: right; }
.fc-price strong { font-size: 26px; font-weight: 700; }
.fc-price small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-soft); }
.fc-actions { display: flex; gap: 8px; }
.fc-wa { display: grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; color: var(--text); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, color .2s; }
.fc-wa svg { width: 20px; height: 20px; }
.fc-wa:hover { border-color: var(--lime); color: var(--accent-text); }
.fc-quote { min-height: var(--tap); padding: 8px 18px; font-size: 14px; }
.fc-details { padding: 0 24px 20px; border-top: 1px dashed var(--line); }
.fc-details[hidden] { display: none; }
.fc-details dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 18px; }
.fc-details dt { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.fc-details dd { margin-top: 3px; font-size: 14px; line-height: 1.45; }
.fc-more {
  display: flex; align-items: center; gap: 6px; min-height: var(--tap); margin: 22px auto 0; padding: 0 22px;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.fc-more:hover { border-color: var(--lime); }

/* City grid */
.fb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 14px; margin-top: 32px; }
.fb-big { grid-column: span 2; grid-row: span 2; }
.b2 .fb-card:not(.fb-big), .b3 .fb-more { grid-column: span 2; }
.fb-card { position: relative; isolation: isolate; overflow: hidden; background: var(--skeleton); color: var(--white); border-radius: var(--radius-card); }
.fb-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.fb-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .05) 78%); }
.fb-tag, .fb-code { position: absolute; top: 16px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.fb-tag { left: 16px; background: var(--lime); color: var(--night); }
.fb-code { right: 16px; background: rgba(10, 10, 10, .55); letter-spacing: .06em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fb-body { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; }
.fb-body h3 { font-size: 24px; font-weight: 700; line-height: 1.1; }
.fb-big .fb-body h3 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.02em; }
.fb-body p { margin-top: 4px; font-size: 13px; opacity: .85; }
.fb-card:not(.fb-big) .fb-body > p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fb-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.fb-stat strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; }
.fb-big .fb-stat strong { font-size: 32px; }
.fb-stat small { font-size: 12px; opacity: .8; }
.fb-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px;
  background: rgba(255, 255, 255, .14); color: var(--white); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s;
}
.fb-big .fb-btn { min-height: 48px; padding: 0 22px; background: var(--lime); color: var(--night); border-color: var(--lime); font-size: 15px; }
.fb-more { display: flex; flex-direction: column; padding: 22px; background: var(--lime); color: var(--night); }
.fb-more::after { display: none; }
.fb-more h3 { font-size: 22px; font-weight: 700; }
.fb-more p { margin-top: 6px; font-size: 14px; opacity: .8; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.fb-chips li { padding: 5px 12px; background: rgba(10, 10, 10, .1); border-radius: 999px; font-size: 13px; font-weight: 600; }
.fb-any { align-self: stretch; min-height: 48px; margin-top: auto; background: var(--night); color: var(--white); font-size: 14px; }
@media (hover: hover) {
  .fb-card:hover img { transform: scale(1.05); }
  .fb-card:not(.fb-big):hover .fb-btn { background: var(--lime); color: var(--night); border-color: var(--lime); }
}

/* Demand by month */
.dm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 32px; }
.dm-chart { min-width: 0; padding: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.dm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.dm-title { font-size: 16px; font-weight: 700; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-soft); }
.dm-legend li { display: flex; align-items: center; gap: 6px; }
.dm-legend li::before { content: ""; width: 10px; height: 10px; background: var(--lime); border-radius: 3px; }
.dm-legend .lv1::before, .dm-bar.lv1 .dm-fill { opacity: .28; }
.dm-legend .lv2::before, .dm-bar.lv2 .dm-fill { opacity: .5; }
.dm-legend .lv3::before, .dm-bar.lv3 .dm-fill { opacity: .78; }
.dm-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.dm-axis { display: grid; grid-template-rows: repeat(4, 50px); margin-top: 28px; font-size: 11px; color: var(--text-soft); }
.dm-bars {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
  background: linear-gradient(to bottom, transparent 28px, transparent 28px), repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 50px) 0 28px / 100% 200px no-repeat;
}
.dm-bar {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 0 8px;
  background: none; color: var(--text); border: 1px solid transparent; border-radius: 14px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.dm-icons { display: flex; justify-content: center; align-items: flex-end; gap: 2px; height: 22px; color: var(--text-soft); }
.dm-icons .ic { width: 14px; height: 14px; }
.dm-col { position: relative; width: 66%; height: 200px; }
.dm-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: var(--lime); border-radius: 8px 8px 4px 4px; transition: height .4s var(--ease); }
.dm-mon { font-size: 13px; font-weight: 600; }
.dm-bar:hover { background: rgba(127, 127, 127, .08); }
.dm-bar[aria-pressed="true"] { background: rgba(182, 255, 0, .1); border-color: var(--lime); }
.dm-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-soft); }
.dm-keys li { display: flex; align-items: center; gap: 6px; }
.dm-keys .ic { width: 14px; height: 14px; }
.dm-panel { display: flex; flex-direction: column; padding: 24px; background: var(--night); color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.dm-month { font-size: 28px; font-weight: 700; line-height: 1.15; }
.dm-level { align-self: flex-start; margin-top: 8px; padding: 4px 12px; background: var(--lime); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 700; }
.dm-level:empty { display: none; }
.dm-tip { margin-top: 12px; font-size: 14px; line-height: 1.5; opacity: .8; }
.dm-facts { display: grid; gap: 12px; margin: 18px 0 20px; }
.dm-facts div { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dm-facts dt { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.dm-facts dd { margin-top: 2px; font-size: 15px; font-weight: 600; }
.dm-panel .btn { margin-top: auto; }

/* FAQ with a photo */
.fq-photo { position: relative; margin-top: 24px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--skeleton); border-radius: var(--radius-card); }
.fq-photo img { width: 100%; height: 100%; object-fit: cover; }
.fq-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; background: var(--white); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 600; }
.fq-help { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding: 22px; background: var(--lime); color: var(--night); border-radius: var(--radius-card); --focus: var(--night); }
.fq-help strong { grid-column: 1 / -1; font-size: 19px; }
.fq-help p { grid-column: 1 / -1; margin-bottom: 4px; font-size: 14px; }
.fq-help .btn { min-height: 48px; padding: 0 14px; font-size: 14px; }
.fq-help .btn svg { width: 18px; height: 18px; }
.fq-wa { background: var(--night); color: var(--white); }
.fq-quote { background: transparent; color: var(--night); border-color: var(--night); }

@media (max-width: 1024px) {
  .fc-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-count { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; padding: 0; }
  .fc-top { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; padding: 18px; }
  .fc-leg + .fc-leg { padding-left: 18px; }
  .fc-bottom { flex-wrap: wrap; padding: 12px 18px; }
  .fc-chips { flex-basis: 100%; }
  .fc-price { margin-left: auto; }
  .fb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); }
  .fb-big { grid-column: 1 / -1; grid-row: span 1; }
  .dm { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .fc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0 18px; }
  .fc-tile { padding: 12px 14px; border-radius: 16px; }
  .fc-tile strong { font-size: 20px; }
  .fc-tile span { font-size: 12px; }
  .fc-tile[aria-pressed="true"]::after { display: none; }
  .fc-top { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .fc-air { flex-direction: row; justify-content: space-between; }
  .fc-leg + .fc-leg { padding: 14px 0 0; border-left: 0; border-top: 1px dashed var(--line); }
  .fc-end strong { font-size: 19px; }
  .fc-bottom { gap: 10px; padding: 12px 16px; }
  .fc-toggle { order: 3; flex-basis: 100%; justify-content: center; min-height: 36px; }
  .fc-price { margin-left: 0; text-align: left; }
  .fc-price strong { font-size: 22px; }
  .fc-actions { margin-left: auto; }
  .fc-details { padding: 0 16px 16px; }
  .fc-details dl { grid-template-columns: 1fr 1fr; }
  .fb { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(220px, auto); gap: 12px; margin-top: 24px; }
  .fb-big, .b2 .fb-card:not(.fb-big), .b3 .fb-more { grid-column: auto; }
  .fb-big { min-height: 300px; }
  .fb-big .fb-body h3 { font-size: 34px; }
  .fb-big .fb-stat strong { font-size: 24px; }
  .dm-chart, .dm-panel { padding: 18px; }
  .dm-plot { grid-template-columns: minmax(0, 1fr); overflow-x: auto; scrollbar-width: thin; }
  .dm-axis { display: none; }
  .dm-bars { min-width: 560px; }
  .dm-col { height: 150px; }
  .dm-bars { background-size: 100% 150px; }
  .fq-help { grid-template-columns: minmax(0, 1fr); }
}
.dm-facts dd, .fc-details dd { margin-left: 0; }

/* ===== Airline pages: featured route, connections, about the airline ===== */
.ft {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 340px; margin-top: 32px; overflow: hidden;
  background: var(--night); color: var(--white); border: 1px solid var(--line); border-radius: 28px;
}
.ft-photo { position: relative; background: var(--skeleton); }
.ft-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #0A0A0A); }
.ft-tag { position: absolute; top: 18px; left: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--lime); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 700; }
.ft-tag .ic { width: 14px; height: 14px; }
.ft-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 36px 40px; }
.ft-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ft-body h3 { margin-top: 8px; font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.ft-text { max-width: 34em; margin-top: 10px; font-size: 15px; line-height: 1.55; opacity: .8; }
.ft-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: stretch; margin-top: 22px; }
.ft-stats li { padding: 12px 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.ft-stats strong { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
.ft-stats small { display: block; margin-top: 2px; font-size: 12px; opacity: .7; }
.ft-btn { min-height: 48px; margin-top: 22px; padding: 0 22px; background: var(--lime); color: var(--night); font-size: 15px; }
.ft-also { margin-top: 12px; font-size: 13px; opacity: .65; }

.cx { margin-top: 48px; }
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.cx-head h3 { font-size: 22px; font-weight: 700; }
.cx-head p { margin-top: 2px; font-size: 14px; color: var(--text-soft); }
.cx-filters { display: flex; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; }
.cx-filters::-webkit-scrollbar { display: none; }
.cx-filter { flex: none; min-height: 40px; padding: 0 16px; background: none; color: var(--text); border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.cx-filter:hover { background: rgba(127, 127, 127, .12); }
.cx-filter[aria-pressed="true"] { background: var(--lime); color: var(--night); }
.cx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cx-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card);
  transition: transform .3s var(--ease), border-color .2s;
}
.cx-card[hidden] { display: none; }
.cx-photo { position: relative; height: 170px; background: var(--skeleton); color: var(--white); }
.cx-photo img { width: 100%; height: 100%; object-fit: cover; }
.cx-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .8), transparent 55%); }
.cx-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; background: rgba(10, 10, 10, .6); border-radius: 999px; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cx-line { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cx-line i { flex: 1; border-top: 1.5px dashed rgba(255, 255, 255, .6); }
.cx-line b { padding: 2px 7px; background: rgba(255, 255, 255, .2); border-radius: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cx-plane { flex: none; width: 13px; height: 13px; fill: var(--lime); stroke: none; }
.cx-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.cx-body h4 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.cx-body > p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.cx-facts { display: grid; gap: 7px; margin: 14px 0 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; }
.cx-facts li { display: flex; align-items: center; gap: 8px; }
.cx-facts .ic { flex: none; width: 15px; height: 15px; color: var(--accent-text); }
.cx-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: auto;
  background: rgba(182, 255, 0, .12); color: var(--accent-text); border-radius: 12px;
  font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s;
}
.cx-btn:hover { background: var(--lime); color: var(--night); }
.cx-net {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; overflow: hidden;
  background: radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .45), transparent 38%), var(--lime);
  color: var(--night); border-radius: var(--radius-card); --focus: var(--night);
}
.cx-net-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(10, 10, 10, .1); border-radius: 999px; font-size: 12px; font-weight: 600; }
.cx-net-tag .ic { width: 14px; height: 14px; }
.cx-net strong { margin-top: 18px; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.cx-net .cx-net-label { margin-top: 6px; font-size: 15px; font-weight: 600; }
.cx-net p { margin-top: 14px; font-size: 13px; opacity: .8; }
.cx-net .cx-net-label { opacity: 1; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.cx-chips li { padding: 5px 12px; background: rgba(10, 10, 10, .1); border-radius: 999px; font-size: 13px; font-weight: 600; }
.cx-ask { align-self: stretch; min-height: 46px; margin-top: auto; background: var(--night); color: var(--white); font-size: 14px; }
@media (hover: hover) {
  .cx-card:hover { transform: translateY(-6px); border-color: var(--lime); }
  .cx-card:hover .cx-btn { background: var(--lime); color: var(--night); }
}

.ab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 40px 64px; }
.section .ab-text h2 { margin: 12px 0 18px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.03em; }
.ab-text p:not(.eyebrow) { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--text-soft); }
.ab-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ab-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(182, 255, 0, .12); color: var(--accent-text); border-radius: 999px; font-size: 13px; font-weight: 600; }
.ab-tags .ic { width: 14px; height: 14px; }
.ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-stat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 22px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card); }
.ab-stat strong { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ab-stat small { margin-top: 8px; font-size: 13px; color: var(--text-soft); }
.ab-ic { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; color: var(--text-soft); }
.ab-stat:first-child { background: var(--lime); color: var(--night); border-color: var(--lime); }
.ab-stat:first-child small, .ab-stat:first-child .ab-ic { color: var(--night); opacity: .7; }

@media (max-width: 1024px) {
  .ft { grid-template-columns: minmax(0, 1fr); }
  .ft-photo { height: 260px; }
  .ft-photo::after { background: linear-gradient(to bottom, transparent 60%, #0A0A0A); }
  .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ft { margin-top: 24px; border-radius: 24px; }
  .ft-photo { height: 200px; }
  .ft-body { padding: 22px; }
  .ft-stats { gap: 6px; }
  .ft-stats li { padding: 10px; }
  .ft-stats strong { font-size: 15px; }
  .ft-stats small { font-size: 11px; }
  .ft-btn { align-self: stretch; }
  .cx { margin-top: 36px; }
  .cx-head { align-items: stretch; }
  .cx-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-net strong { font-size: 52px; }
  .ab-stats { gap: 10px; }
  .ab-stat { min-height: 120px; padding: 16px; }
  .ab-ic { top: 14px; right: 14px; width: 18px; height: 18px; }
}
/* Footer: sister brands under the Explore Travel logo */
.footer-family { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-family h3 { margin-bottom: 14px; }
.family-brand { display: flex; align-items: center; gap: 16px; max-width: 30em; }
.family-brand + .family-brand { margin-top: 14px; }
.family-brand img { flex: none; width: auto; height: 44px; }
.family-brand .family-logo { flex: none; width: 160px; }
.family-brand p { font-size: 13px; line-height: 1.5; color: #C9C9C0; }
@media (max-width: 760px) {
  .family-brand img { height: 38px; }
  .family-brand .family-logo { width: 140px; }
}