/* Somali Airlines website — shared styles.
   Layout: organised like Etihad (top menu with full-width drop-downs, booking first, "Flights from…" route tiles, benefit cards),
   finished like Apple (white and #F5F5F7 surfaces, large clean type, rounded photo tiles, quiet links). */
:root {
  --navy: #0B2545;
  --navy-deep: #081B33;
  --blue: #1D5FB4;
  --blue-dark: #174D93;
  --blue-soft: #E8F0FA;
  --ink: #13283F;
  --heading: #0E1A2B;
  --muted: #56667A;
  --line: #E3E8EF;
  --hair: rgba(14, 26, 43, 0.08);
  --mist: #F3F6FA;
  --grey: #F5F5F7;
  --white: #FFFFFF;
  --sand: #8E5E1C;
  --tbc-bg: #FFF0BF;
  --tbc-fg: #6B4D00;
  --ok: #1E7A4C;
  --ok-soft: #E6F4EC;
  --err: #B42318;
  /* System font first: SF Pro on Apple devices, Inter (loaded from Google Fonts) everywhere else. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-booking: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1340px;
  --gutter: 32px;
  --radius: 16px;
  --tile: 28px;
  --tile-inset: 16px;
  --topbar: 64px;
  --tabbar: 0px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 16px); }
body {
  margin: 0; font-family: var(--font); font-size: 17px; color: var(--ink); background: var(--white);
  line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; text-wrap: balance; color: var(--heading); }
p { margin: 0; }
button { font: inherit; }
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.accent { color: inherit; }
mark.tbc {
  background: var(--tbc-bg); color: var(--tbc-fg); border-radius: 6px;
  padding: 1px 7px; font-size: max(13px, 0.86em); font-weight: 600; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Green: provisional information from the sister airline, to be replaced by Somali Airlines' own. */
mark.tbc--sister { background: #DDF3E4; color: #11512A; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--white); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* The browser's own details, themed from the palette. */
::selection { background: var(--blue-soft); color: var(--heading); }
html { accent-color: var(--blue); caret-color: var(--blue); scrollbar-color: #C3CBD6 transparent; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Shell: frosted top bar, full-width drop-down menu, phone tab bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  --bar-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-left: max(var(--bar-pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--bar-pad), env(safe-area-inset-right, 0px));
  background: var(--white); border-bottom: 0;
}
/* Over the home photo, a fine line under the menu, inside the same column (as on daallo.com). */
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"]))::after {
  content: ""; position: absolute; left: var(--bar-pad); right: var(--bar-pad); bottom: 0; height: 1px; background: rgba(255,255,255,0.22);
}
.topbar.is-solid, body:not(:has(.hero)) .topbar { box-shadow: 0 10px 24px -18px rgba(8,27,51,0.35); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 38px; width: auto; }
.logo .logo__white { display: none; }
.topbar { transition: background .25s ease, border-color .25s ease; }
/* Home: the top bar sits over the full-bleed hero photo, as on daallo-airlines.com, until the page
   scrolls (site.js adds .is-solid) or a menu opens. */
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) {
  background: transparent; box-shadow: none;
}
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) :is(.nav__btn, .topbar__link) { color: var(--white); }
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) :is(.nav__btn, .topbar__link):hover { color: var(--white); background: rgba(255,255,255,0.16); }
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) .logo__color { display: none; }
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) .logo__white { display: block; }
/* Over the photograph the button turns white, so it reads against sky and sea alike. */
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) .pill { background: var(--white); color: var(--navy); }
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) .pill:hover { background: var(--blue-soft); }
body:has(.hero) .topbar:not(.is-solid):not(:has([aria-expanded="true"])) .nav__btn.is-current::after { background: var(--white); }
.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: 16px; }
/* Contact icon: only shown on smaller screens, where the menu moves to the tab bar. */
.topbar__link { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 999px; color: var(--heading); text-decoration: none; transition: background .2s ease, color .2s ease; }
.topbar__link:hover { color: var(--blue); background: var(--blue-soft); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 17px; border-radius: 999px; background: var(--blue); color: var(--white); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.pill:hover { background: var(--blue-dark); }

/* Main menu in the top bar. Hovering a menu item or link highlights it in brand blue. */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--heading); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.nav__btn svg { width: 11px; height: 11px; stroke-width: 2.6; opacity: .75; margin-top: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav__btn:hover svg, .nav__btn[aria-expanded="true"] svg { opacity: 1; }
.nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--blue); background: var(--blue-soft); }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The section you are in carries a small dot under its name. */
.nav__btn.is-current::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); }
.nav__btn.is-current { color: var(--blue); }

/* Mobile tab bar items (icon above a short label). */
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 9px 2px 10px;
  border: 0; border-radius: 14px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-align: center;
}
.rail__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.rail__item:hover { color: var(--blue); }
.rail__item:hover .rail__icon { background: var(--blue-soft); }
.rail__item[aria-expanded="true"] { color: var(--blue); }
.rail__item[aria-expanded="true"] .rail__icon { background: var(--blue-soft); }

/* Drop-down panels: full width under the top bar, groups of links plus a preview card. */
.panel {
  position: fixed; z-index: 44; left: 0; right: 0; top: var(--topbar);
  max-height: calc(100vh - var(--topbar)); overflow-y: auto;
  background: var(--white); color: var(--ink);
  border-top: 1px solid var(--hair); box-shadow: 0 30px 60px -30px rgba(8,27,51,0.3);
}
.panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-block: 36px 40px; }
.panel__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.panel__group h3 { font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.panel__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel__group a {
  display: inline-block; padding: 5px 10px; margin-left: -10px; border-radius: 8px;
  color: var(--heading); text-decoration: none; font-size: 17px; font-weight: 500; transition: background .15s ease, color .15s ease;
}
.panel__group a:hover { color: var(--blue); background: var(--blue-soft); }
.panel__card { background: var(--grey); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.panel__card h4 { font-size: 20px; }
.panel__card p { color: var(--muted); font-size: 15px; }

.app { min-width: 0; }

.tabbar {
  display: none; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--white);
  box-shadow: 0 -10px 24px -18px rgba(8,27,51,0.35);
}
.tabbar__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabbar .rail__item { padding: 6px 0 4px; font-size: 13px; }
.tabbar .rail__icon { height: 28px; }

.sheet {
  position: fixed; z-index: 70; inset: 0; background: var(--white); overflow-y: auto;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.sheet__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: 64px; background: var(--white); border-bottom: 1px solid var(--hair); }
.sheet__head h2 { font-size: 20px; }
.sheet__close { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--grey); color: var(--heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sheet__menu { padding-block: 20px; border-bottom: 1px solid var(--hair); }
.sheet__menu > h3 { font-size: 20px; margin-bottom: 10px; }
.sheet .panel__groups { gap: 16px; }

/* ---------- AI travel assistant ---------- */
.ai-fab {
  position: fixed; z-index: 48; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 16px; border: 0; border-radius: 999px;
  background: var(--navy); color: var(--white); font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 14px 34px -12px rgba(8,27,51,0.55);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s ease;
}
.ai-fab:hover { background: var(--blue); transform: translateY(-2px); }
.ai {
  position: fixed; z-index: 65; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 48px)); height: min(640px, calc(100vh - var(--topbar) - 48px));
  display: flex; flex-direction: column; background: var(--white); border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(8,27,51,0.45), 0 0 0 1px var(--hair);
}
.ai__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--line); }
.ai__head h2 { font-size: 20px; letter-spacing: -0.015em; }
.ai__head p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ai__close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--grey); color: var(--heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ai__close:hover { background: var(--blue-soft); color: var(--blue); }
.ai__log { flex: 1; overflow-y: auto; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.ai__welcome p { color: #3E4F63; font-size: 15px; }
.ai__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.ai__chip { border: 1px solid var(--line); background: var(--white); color: var(--heading); border-radius: 999px; padding: 9px 14px; font-size: 15px; text-align: start; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.ai__chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.ai__msg { max-width: 88%; font-size: 15px; line-height: 1.5; padding: 11px 15px; border-radius: 18px; }
.ai__msg p + p, .ai__msg p + ul, .ai__msg ul + p { margin-top: 8px; }
.ai__msg ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.ai__msg a { color: inherit; font-weight: 600; }
.ai__msg--user { align-self: flex-end; background: var(--navy); color: var(--white); border-end-end-radius: 6px; white-space: pre-wrap; }
.ai__msg--assistant { align-self: flex-start; background: var(--grey); color: var(--ink); border-end-start-radius: 6px; }
.ai__msg--assistant a { color: var(--blue); }
.ai__msg.is-thinking { color: var(--muted); animation: ai-pulse 1.4s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .55; } }
.ai__action { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 15px; font-weight: 600; text-decoration: none; }
.ai__action:hover { background: var(--blue); color: var(--white); }
.ai__off { margin: 0 20px 8px; padding: 12px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--navy); font-size: 15px; }
.ai__form { display: flex; align-items: flex-end; gap: 8px; margin: 8px 16px 6px; padding: 6px 6px 6px 16px; border: 1px solid #CAD3DE; border-radius: 24px; transition: border-color .2s ease, box-shadow .2s ease; }
.ai__form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,95,180,0.14); }
.ai__form textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 15px; line-height: 1.45; padding: 8px 0; color: var(--ink); max-height: 140px; }
.ai__send, .ai__stop { flex: none; height: 40px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
.ai__send { width: 40px; background: var(--blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.ai__send:hover { background: var(--navy); }
.ai__send:disabled { background: #C3CBD6; cursor: not-allowed; }
.ai__stop { padding: 0 16px; background: var(--grey); color: var(--heading); }
.ai__fine { padding: 0 20px 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* A booking-card tab that hands over to the Somali Airlines booking system. */

/* ---------- Flight-day calendar (booking form) ---------- */
.date-btn.empty .cp-city { color: #5E6D80; font-weight: 400; }
.date-btn:disabled { cursor: not-allowed; }
.cal { position: absolute; z-index: 30; width: 340px; max-width: 100%; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(8,27,51,0.35); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal__head strong { font-size: 15px; color: var(--navy); }
.cal__nav { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--grey); color: var(--heading); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cal__nav:hover { background: var(--blue-soft); color: var(--blue); }
.cal__nav:disabled { opacity: .35; cursor: not-allowed; }
.cal__note { margin: 6px 0 10px; font-size: 13px; color: var(--muted); text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__dow { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 0; }
.cal__day { aspect-ratio: 1; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal__day.is-fly { font-weight: 700; color: var(--navy); }
.cal__day:not(:disabled):hover { background: var(--blue-soft); color: var(--blue); }
.cal__day:disabled { color: #B8C1CC; cursor: default; }
.cal__day[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.cal__key { margin-top: 10px; font-size: 13px; color: var(--muted); }


/* ---------- Fare explorer (Economy fares page) ---------- */
.fx { display: flex; flex-direction: column; gap: 16px; }
.fx h2 { font-size: 30px; }
.fx__intro { color: #3E4F63; }
.fx__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fx__bar .ff { flex: 1 1 300px; }
.fx__month { display: flex; align-items: center; gap: 12px; }
.fx__month strong { min-width: 140px; text-align: center; color: var(--navy); }
.fx__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fx__dow { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.fx__day { min-height: 68px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border-radius: 12px; background: var(--grey); color: var(--muted); font: inherit; font-size: 14px; border: 1px solid transparent; }
.fx__day.is-fly { background: var(--white); color: var(--heading); border-color: var(--line); cursor: pointer; text-align: start; transition: border-color .2s ease, background .2s ease; }
.fx__day.is-fly:hover { border-color: var(--blue); }
.fx__day[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.fx__num { font-weight: 600; font-variant-numeric: tabular-nums; }
.fx__fare { font-size: 12.5px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.fx__day[aria-pressed="true"] .fx__fare { color: var(--white); }
.fx__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; border-top: 1px solid var(--line); }
.fx__pick p { color: var(--muted); }
.fx__info { display: flex; flex-direction: column; gap: 2px; }
.fx__info strong { color: var(--navy); font-size: 17px; }
.fx__price { font-weight: 600; color: var(--blue); }

/* ---------- Trip checklist (Plan page) ---------- */
.ck { display: flex; flex-direction: column; gap: 14px; }
.ck__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.ck__head h2 { font-size: 30px; }
.ck__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.ck__count strong { color: var(--navy); font-size: 20px; }
.ck__bar { height: 6px; border-radius: 999px; background: #DDE3EA; overflow: hidden; }
.ck__bar span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .4s cubic-bezier(.16,1,.3,1); }
.ck__intro { font-size: 15px; color: var(--muted); }
.ck__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ck__group { margin: 0; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--grey); display: grid; gap: 4px; }
.ck__group legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 700; color: var(--navy); }
.ck__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; font-size: 15px; color: #3E4F63; cursor: pointer; }
.ck__item input { width: 18px; height: 18px; margin: 2px 0 0; }
.ck__item input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: #9AABC0; }
.ck .link-btn { align-self: flex-start; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-dark); }
.btn--outline { color: var(--navy); border-color: #C9D3DF; background: var(--white); }
.btn--outline:hover { border-color: var(--navy); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--blue-soft); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Apple-style text link: "Learn more ›" */
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--blue); text-decoration: none; font-size: 17px; font-weight: 400; }
.more::after { content: "›"; font-size: 1.15em; line-height: 1; margin-left: 4px; transition: transform .2s ease; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover::after { transform: translateX(2px); }
.more--light { color: var(--white); }

/* ---------- Page head (inner pages): a light rounded tile ---------- */
.page-head { background: var(--grey); color: var(--heading); position: relative; overflow: hidden; margin: 12px var(--tile-inset) 0; border-radius: var(--tile); }
.page-head .wrap { position: relative; padding-block: 48px 56px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.page-head h1 { color: var(--heading); font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; max-width: 820px; }
.page-head .tagline { font-size: 20px; color: var(--muted); margin-top: 12px; }
.page-head .lead { max-width: 680px; color: #3E4F63; font-size: 20px; margin-top: 16px; }
.page-head--split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.page-head__media { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.dest-grid--explore .dest { height: 260px; }
.dest-grid--explore .dest:nth-child(-n+2) { grid-column: span 3; height: 300px; }

/* ---------- Content layout (inner pages) ---------- */
.page-body { padding-block: 56px 96px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.prose { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.prose > h2 { font-size: 30px; margin-top: 30px; }
.prose > h2:first-child { margin-top: 0; }
.prose > p { color: #3E4F63; font-size: 17px; max-width: 70ch; }
.prose ul.bullets { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #3E4F63; max-width: 70ch; }
.prose ul.bullets li::marker { color: var(--blue); }
.prose .btn-row { margin-top: 18px; }
.defs { display: grid; gap: 14px; margin: 0; }
.defs div { display: grid; gap: 2px; }
.defs dt { font-weight: 600; color: var(--navy); }
.defs dd { margin: 0; color: #3E4F63; }

.callout { display: flex; gap: 14px; background: var(--blue-soft); border-radius: 14px; padding: 18px 20px; color: var(--ink); max-width: 76ch; }
.callout svg { flex: none; color: var(--blue); margin-top: 3px; }
.callout strong { display: block; color: var(--navy); margin-bottom: 2px; }
.callout--warn { background: #FDF3E7; }
.callout--warn svg { color: #B4590E; }
.source { font-size: 15px; color: var(--muted); }
.source a { font-weight: 600; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--grey); padding: 12px 18px; }
td { padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; color: #3E4F63; }
td:first-child { color: var(--navy); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; max-width: 76ch; }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; counter-increment: step; }
.steps li::before {
  content: counter(step); width: 36px; height: 36px; border-radius: 999px; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px;
}
.steps strong { color: var(--navy); display: block; }
.steps span { color: #3E4F63; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stat-strip div { background: var(--white); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-strip span { font-size: 13px; color: var(--muted); }
.stat-strip strong { font-size: 20px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-strip small { font-size: 13px; color: var(--muted); }

.link-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.link-group { background: var(--grey); border-radius: 18px; padding: 20px 22px; }
.link-group h3 { font-size: 17px; margin-bottom: 10px; }
.link-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link-group a { text-decoration: none; font-size: 15px; }
.link-group a:hover { text-decoration: underline; text-underline-offset: 3px; }

.form { display: grid; gap: 14px; max-width: 640px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ff { display: flex; flex-direction: column; gap: 6px; }
.ff label { font-size: 15px; font-weight: 600; color: var(--navy); }
.ff input, .ff select, .ff textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--white);
  border: 1px solid #CAD3DE; border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.ff textarea { min-height: 130px; resize: vertical; }
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,95,180,0.14); }
.ff small { color: var(--muted); font-size: 13px; }
.ff__opt { font-weight: 400; color: var(--muted); }
/* A field's problem, named under it and tied to it with aria-describedby (site.js). */
.ff__error { margin: 0; color: var(--err); font-size: 13px; font-weight: 600; }
.ff [aria-invalid="true"] { border-color: var(--err); }
.ff [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180,35,24,0.14); }
.form-result { border-radius: 12px; padding: 14px 18px; background: var(--ok-soft); color: #134A30; }
.form-result--info { background: var(--blue-soft); color: var(--navy); }
.form-result { display: grid; gap: 8px; }
.form-result[hidden] { display: none; }
.form-result:focus { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Sidebar (inner pages) ---------- */
.side { position: sticky; top: calc(var(--topbar) + 24px); display: flex; flex-direction: column; gap: 20px; }
.side__nav { background: var(--grey); border-radius: 18px; padding: 20px 22px; }
.side__nav h2 { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--heading); margin-bottom: 6px; }
.side__nav h3 { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--navy); margin: 14px 0 6px; letter-spacing: 0; }
.side__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side__nav a { display: block; padding: 5px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.side__nav a:hover { background: var(--white); }
.side__nav a[aria-current="page"] { background: var(--white); color: var(--blue); font-weight: 600; }
.help-card { background: var(--navy); color: var(--white); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.help-card h2 { color: var(--white); font-size: 20px; }
.help-card p { color: rgba(255,255,255,0.8); font-size: 15px; }
.help-card .more { font-size: 15px; }

/* ---------- Home: hero tile ---------- */
/* Full-bleed: the photo runs edge to edge and up behind the top bar. */
.hero {
  position: relative; display: flex; flex-direction: column; min-height: max(600px, min(86vh, 900px)); overflow: hidden;
  margin-top: calc(-1 * var(--topbar)); color: var(--white); background: var(--navy);
}
/* Anchored to the photo's top edge so the sky shows above the sea (owner, 10 Nov 2026). */
.hero__img { position: absolute; width: 100%; object-fit: cover; object-position: 65% 0%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,27,51,0.5) 0, rgba(8,27,51,0.32) 64px, rgba(8,27,51,0) 150px),
              linear-gradient(90deg, rgba(8,27,51,0.62) 0%, rgba(8,27,51,0.3) 40%, rgba(8,27,51,0) 70%);
}
.hero__body { position: relative; z-index: 2; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--topbar) + 72px) 200px; }
.hero h1 { color: var(--white); font-size: clamp(36px, 3vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; max-width: 11em; text-wrap: balance; }
.hero__lead { font-size: 17px; line-height: 1.5; max-width: 520px; margin-top: 16px; color: rgba(255,255,255,0.9); }
.hero .btn-row { margin-top: 32px; }

/* ---------- Booking card (kept exactly as before) ---------- */
.booking { position: relative; z-index: 5; margin: -130px var(--tile-inset) 0; }
/* Home: hero text and booking panel share one wider column so their left edges line up. */
.booking .wrap, .hero__body.wrap { max-width: 1340px; }
.booking__card, .prose .booking__card { font-family: var(--font-booking); font-size: 17px; letter-spacing: 0; line-height: 1.6; }
.booking__card { background: var(--white); border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(8,27,51,0.32), 0 2px 6px rgba(8,27,51,0.05); }
/* Home, laptops and desktops: Daallo's hero layout (owner, 10 Nov 2026). The photo is as tall as the screen allows
   once the full-size booking card sits under it, so headline, button and the whole card fit on the first screen and
   the card clears the "Ask Somali Airlines" button. The card overlaps the photo by 46px. */
@media (min-width: 861px) {
  .hero { min-height: max(440px, calc(100svh - 330px)); }
  .hero__body { padding-block: calc(var(--topbar) + 40px) 90px; }
  .booking { margin: -46px 0 0; }   /* no side inset: the card shares the headline's and logo's left edge */
}
/* Short laptop screens (about 720 px tall): tighter spacing so the card still clears the assistant button. */
@media (min-width: 861px) and (max-height: 740px) {
  .hero { min-height: 400px; }
  .hero__body { padding-block: calc(var(--topbar) + 24px) 70px; }
  .hero .btn-row { margin-top: 24px; }
}
.bk-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab {
  flex: 1; min-width: max-content; height: 60px; padding: 0 20px; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--muted); box-shadow: inset 0 -2px 0 transparent;
}
.bk-tab:hover { color: var(--ink); }
.bk-tab[aria-selected="true"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }
.bk-panel { padding: 22px 26px 26px; }
.bk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--mist); }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg button[aria-checked="true"] { background: var(--white); color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(8,27,51,0.12); }
.link-btn { border: 0; background: none; padding: 0; color: var(--blue); font-size: 15px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-grid {
  position: relative; display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr) auto;
}
.bk-grid > .fld--from { grid-column: 1; grid-row: 1; }
.bk-grid > .fld--to { grid-column: 2; grid-row: 1; padding-left: 26px; }
.bk-grid > .swap { grid-column: 1 / 3; grid-row: 1; justify-self: center; z-index: 2; }
.bk-grid--short { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.bk-grid--status { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) auto; }
.bk-lookup .bk-help.is-warn { color: #9A3412; }
.cal__day.is-biz { text-decoration: underline dotted; text-underline-offset: 4px; }
/* In a page's reading column the form is narrower: cities on one row, dates and travellers on the next. */
.prose .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prose .bk-grid > .fld--from { grid-column: 1 / 3; }
.prose .bk-grid > .fld--to { grid-column: 3 / 5; }
.prose .bk-grid > .swap { grid-column: 1 / 5; }
.prose .bk-grid > .bk-search { grid-column: 1 / -1; }
.fld {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 64px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fld:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,95,180,0.12); }
.fld > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.fld input, .fld select, .fld > button.fld__btn {
  width: 100%; border: 0; outline: 0; padding: 0; background: transparent; text-align: left;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.fld input::placeholder { color: #5E6D80; font-weight: 400; }
/* City list (From / To): city, airport name and a 3-letter code pill, as on the Daallo website. */
.cp-native { display: none !important; }
.cp-btn { display: flex; align-items: baseline; gap: 7px; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.cp-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-code { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--blue); }
.cp-btn.empty .cp-city { color: #5E6D80; font-weight: 400; }
.cp { position: absolute; z-index: 30; width: 380px; max-width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(8,27,51,0.35); overflow: hidden; text-align: left; }
.cp-search { padding: 12px; border-bottom: 1px solid var(--line); }
.cp-search input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--mist); }
.cp-search input:focus { outline: 2px solid var(--blue); outline-offset: 0; background: var(--white); }
.cp-list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.cp-list li[data-code] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.cp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cp-txt b { font-size: 15px; color: var(--navy); font-weight: 600; }
.cp-txt small { font-size: 13px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pill { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--white); background: var(--blue); border-radius: 999px; padding: 3px 10px; }
.cp-list li.act, .cp-list li[data-code]:hover { background: var(--mist); }
.cp-list li.cur { background: var(--blue-soft); }
.cp-list li.cur .cp-txt b::after { content: " \2713"; color: var(--blue); }
.cp-list li.off { cursor: default; opacity: .45; }
.cp-list li.off:hover { background: transparent; }
.cp-list li.off .cp-pill { background: #8C9AAB; }
.cp-none { padding: 14px; color: var(--muted); font-size: 15px; }
.fld.is-off { background: var(--mist); }
.fld.is-off input { color: #9AA5B2; }
.swap {
  align-self: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.swap:hover { border-color: var(--navy); }
.bk-search {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 24px;
  border: 0; border-radius: 12px; background: var(--blue); color: var(--white); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.bk-search:hover { background: var(--navy); }
.bk-hints { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 20px; }
.bk-hints .warn { color: #A04A0C; }
.bk-hints .good { color: var(--ok); font-weight: 600; }
.bk-note { margin-top: 12px; font-size: 15px; color: var(--navy); background: var(--blue-soft); border-radius: 10px; padding: 10px 14px; }
.bk-help { margin-top: 12px; font-size: 13px; color: var(--muted); }
.promo-field { margin-top: 12px; max-width: 320px; }
.pax {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 48px);
  background: var(--white); border-radius: 14px; padding: 18px; box-shadow: 0 20px 50px -18px rgba(8,27,51,0.35); border: 1px solid var(--line);
  display: grid; gap: 14px; cursor: default;
}
.pax__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pax__row strong { display: block; font-size: 15px; color: var(--navy); }
.pax__row small { color: var(--muted); font-size: 13px; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid #C9D3DF; background: var(--white); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 16px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pax__note { font-size: 13px; color: var(--muted); }

/* ---------- Home: sections ---------- */
.section { padding-block: 96px; }
.section--grey { background: var(--grey); }
.section--tight { padding-top: 56px; }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; }
.section-head .aside { max-width: 62ch; color: var(--ink); font-size: 17px; }

/* Quick links under the booking card: base list styles; the row of pills is set under "Quick links" below. */
.quick { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quick a { display: flex; align-items: center; text-decoration: none; color: var(--heading); font-weight: 500; text-align: center; transition: color .2s ease; }
.quick__icon { display: inline-flex; color: var(--blue); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.quick a:hover { color: var(--blue); }

/* Departure-city switch and route tiles ("Flights from …", as on Etihad). */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--grey); }
.segmented button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.segmented button[aria-selected="true"] { background: var(--white); color: var(--heading); font-weight: 600; box-shadow: 0 1px 4px rgba(8,27,51,0.12); }
.routes__bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.routes__bar .segmented { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.routes__bar .segmented::-webkit-scrollbar { display: none; }
/* Route tiles: one row of four that ends inside the page; "Show all routes" opens further rows of four. */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.track.is-folded .route:nth-child(n+5) { display: none; }
.routes__more { margin-top: 24px; }
.routes__more .more { border: 0; background: none; padding: 0; font: inherit; font-size: 17px; color: var(--blue); cursor: pointer; }
.route {
  position: relative; display: block; height: 420px; overflow: hidden; border-radius: 24px; background: var(--navy);
  color: var(--white); text-decoration: none; scroll-snap-align: start;
}
.route img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.route:hover img { transform: scale(1.04); }
.route::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,27,51,0.25) 0%, rgba(8,27,51,0) 28%, rgba(8,27,51,0) 45%, rgba(8,27,51,0.82) 100%); }
.route__tag {
  position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(8,27,51,0.55); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.route__body { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.route__city { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.route__days { font-size: 15px; color: rgba(255,255,255,0.85); }
.route__price { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.route__price strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.route__price small { font-size: 13px; color: rgba(255,255,255,0.8); }
.routes__note { margin-top: 18px; font-size: 15px; color: var(--ink); }

/* Benefit cards (Etihad "Life's better as a Guest", on Apple's light grey). */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* Before you fly: small cards that scroll sideways on phones. */
.essentials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.essential { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.essential__fig { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--heading); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.essential:hover .essential__fig { color: var(--blue); }
.essential h3 { font-size: 20px; color: var(--heading); margin-top: 4px; }
.essential p { color: var(--ink); font-size: 17px; }
.essential .more { margin-top: auto; font-size: 15px; }

/* Full-width photo tile with a centred headline (Apple's large tiles). */
.feature {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 600px; overflow: hidden;
  border-radius: var(--tile); color: var(--white); background: var(--navy); padding: 72px 32px 40px;
}
.feature img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,27,51,0.82) 0%, rgba(8,27,51,0.62) 34%, rgba(8,27,51,0.08) 62%, rgba(8,27,51,0.5) 100%); }
.feature > * { position: relative; z-index: 2; }
.feature h2 { color: var(--white); font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.035em; }
.feature p { max-width: 560px; margin-top: 14px; font-size: 20px; color: rgba(255,255,255,0.9); }
.feature .more { margin-top: 18px; }
.feature__credit { position: absolute; right: 20px; bottom: 14px; max-width: calc(100% - 40px); text-align: right; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,0.72); }
.feature__credit a { color: inherit; }

/* Cargo: the headline holds the left half, the sentence and the action the right, so the band is full across. */
.cargo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; align-items: end; background: var(--navy); color: var(--white); border-radius: var(--tile); padding: 56px; }
.cargo h2 { color: var(--white); font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.03em; }
.cargo p { color: rgba(255,255,255,0.82); max-width: 60ch; }
.cargo__body .btn { margin-top: 24px; }


/* Journey band: a full-bleed photographic chapter between two horizons. */
.feature--bleed { border-radius: 0; min-height: clamp(560px, 72vh, 760px); justify-content: center; padding: 140px 32px 150px; }
.feature--bleed .feature__credit { bottom: calc(clamp(40px, 6vw, 96px) + 10px); }

/* ---------- Along the coast: destination inspiration, apart from the route list ---------- */
.coast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.coast__item { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The lead place is a wide panorama: its horizon runs the full width of the page. */
.coast__item--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: end; }
.coast__img { display: block; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3; background: var(--mist); }
.coast__item--lead .coast__img { aspect-ratio: 21 / 9; border-radius: var(--tile); }
.coast__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.coast__img:hover img { transform: scale(1.03); }
.coast figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.coast h3 { font-size: 20px; letter-spacing: -0.02em; }
.coast__item--lead h3 { font-size: 36px; }
.coast p { color: var(--ink); font-size: 15px; }
.coast__fly { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.coast__fly::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.coast__fly--yes { color: var(--blue); }
.coast__fly--yes::before { background: var(--blue); }
.coast__fly--no { color: var(--muted); }
.coast__fly--no::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.coast__fly:hover { text-decoration: underline; }
.coast__credit { font-size: 13px; color: var(--muted); margin-top: 2px; }
.coast__credit a { color: inherit; }

/* ---------- A personal touch: one real photograph beside three short notes ---------- */
.touch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.touch__img { margin: 0; }
.touch__img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 70% 60%; border-radius: var(--tile); }
.touch__img figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.touch__img figcaption a { color: inherit; }
.touch__body h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; }
.touch__lead { margin-top: 14px; color: var(--ink); font-size: 20px; max-width: 460px; }
.touch__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; }
.touch__list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; }
.touch__list h3 { font-size: 20px; letter-spacing: -0.015em; grid-row: span 2; }
.touch__list p { color: var(--ink); font-size: 15px; }
.touch__list .more { font-size: 15px; }

/* The page's one motion moment: the hero photo settles into place on arrival.
   It starts fully visible, so nothing waits on the animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: settle 2.4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
}

/* ---------- Fare cards and destination tiles (Economy fares and Explore pages) ---------- */
.fares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fare {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px;
  background: var(--white); text-decoration: none; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.fare__img { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--navy); }
.fare__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.fare:hover .fare__img img { transform: scale(1.04); }
.fare__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,27,51,0) 50%, rgba(8,27,51,0.65) 100%); }
.fare__dest { position: absolute; z-index: 1; left: 20px; bottom: 14px; color: var(--white); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.fare__body { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 24px; flex: 1; }
.fare:hover { border-color: #B7C6D9; box-shadow: 0 16px 36px -24px rgba(8,27,51,0.35); }
.fare__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--blue-soft); color: var(--blue); }
.chip--dom { background: #EEF0F3; color: #3E4F63; }
.fare__freq { font-size: 13px; color: var(--muted); }
.fare__route { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.fare__code { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); line-height: 1; }
.fare__city { font-size: 13px; color: var(--muted); margin-top: 6px; }
.fare__line { height: 0; border-top: 1px dashed #B8C4D2; position: relative; }
.fare__line svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--white); padding: 0 4px; color: var(--blue); box-sizing: content-box; }
.fare__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.fare__from { font-size: 13px; color: var(--muted); }
.fare__price { font-size: 30px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fare__price small { font-size: 15px; font-weight: 500; color: var(--muted); margin-right: 4px; }
.fare__per { font-size: 13px; color: var(--muted); }
.fare__book { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--blue); white-space: nowrap; }
.prose .fares { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dest-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.dest { position: relative; display: block; border-radius: 22px; overflow: hidden; color: var(--white); text-decoration: none; background: var(--navy); grid-column: span 2; height: 340px; }
.dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.dest:hover img { transform: scale(1.04); }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,27,51,0) 40%, rgba(8,27,51,0.82) 100%); }
.dest__body { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.dest__tag { font-size: 15px; color: rgba(255,255,255,0.88); }
.dest__name { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Review / results ---------- */
.trip { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.trip__leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--line); align-items: center; }
.trip__leg:first-child { border-top: 0; }
.trip__codes { font-size: 20px; font-weight: 600; color: var(--navy); }
.trip__meta { color: var(--muted); font-size: 15px; }
.trip__price { text-align: right; }
.trip__sum { background: var(--grey); padding: 20px 24px; display: grid; gap: 8px; }
.trip__sum div { display: flex; justify-content: space-between; gap: 16px; }
.trip__total { font-size: 20px; font-weight: 600; color: var(--navy); }

/* ---------- Footer: light grey, small type (Apple) ---------- */
.footer { background: var(--grey); color: var(--ink); font-size: 15px; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 56px; padding-block: 72px 40px; }
.footer__brand img { height: 34px; width: auto; }
.footer__brand .big { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 600; color: var(--heading); letter-spacing: -0.02em; line-height: 1.25; margin-top: 20px; }
.footer__brand .small { margin-top: 6px; font-size: 15px; }
.footer__contact { margin-top: 22px; display: grid; gap: 12px; }
.footer__contact strong { color: var(--heading); display: block; font-weight: 600; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
/* Thirteen destinations: on wide screens they share two short columns, so the footer ends level. */
@media (min-width: 1181px) {
  .footer__cols { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); }
  .footer__col:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: 24px; }
}
.footer__col h2 { font-family: var(--font); color: var(--heading); font-size: 15px; font-weight: 600; margin-bottom: 12px; letter-spacing: 0; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink); text-decoration: none; font-size: 15px; display: inline-block; padding-block: 2px; }
.footer a:hover { color: var(--heading); text-decoration: underline; }
/* Extra room at the bottom so the floating help button never covers the legal links. */
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px 88px; font-size: 13px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Cookie banner ---------- */
.cookie { position: relative; z-index: 51; background: var(--navy); color: var(--white); }
.cookie .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 12px; }
.cookie p { font-size: 15px; color: rgba(255,255,255,0.9); max-width: 86ch; }
.cookie a { color: var(--white); }
.cookie .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
.cookie .btn--primary { background: var(--white); color: var(--navy); }
.cookie .btn--primary:hover { background: var(--blue-soft); }
.cookie .btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.cookie .btn--outline:hover { border-color: var(--white); }

.toggle-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; border-top: 1px solid var(--line); }
.toggle-row:first-child { border-top: 0; }
.toggle-row strong { color: var(--navy); display: block; }
.toggle-row span { color: var(--muted); font-size: 15px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #C9D3DF; transition: background .2s ease; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--white); transition: transform .2s ease; }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:disabled + i { opacity: .6; }
.switch input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }

.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.sitemap h2 { font-size: 20px; margin-bottom: 10px; }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sitemap a { text-decoration: none; }
.sitemap a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-grid .bk-search { grid-column: 1 / -1; }
  .bk-grid--short, .bk-grid--status { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .essentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .cargo { grid-template-columns: 1fr; align-items: start; }
  .coast { grid-template-columns: 1fr 1fr; }
  .coast__item--lead { grid-template-columns: 1fr; }
  .coast__item--lead .coast__img { aspect-ratio: 16 / 9; }
  .coast__item:last-child { grid-column: 1 / -1; }
  .touch { grid-template-columns: 1fr; gap: 36px; }
  .touch__body { order: -1; }   /* stacked: the heading leads, the photograph and its credit follow */
  .page-grid { grid-template-columns: 1fr; gap: 48px; }
  .side { position: static; }
  .fares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stories { grid-template-columns: 1fr 1fr; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest { grid-column: span 1; height: 320px; }
  .page-head--split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .dest-grid--explore .dest:nth-child(-n+2) { grid-column: span 1; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones and small tablets: the side menu becomes a bottom tab bar. */
/* Tablets and phones: the top menu moves to a bottom tab bar with a full menu sheet. */
@media (max-width: 1080px) {
  :root { --tabbar: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .nav, .panel { display: none !important; }
  .topbar__link { display: inline-flex; margin-left: auto; }
  .tabbar { display: block; }
  body { padding-bottom: var(--tabbar); }
  .ai-fab { bottom: calc(var(--tabbar) + 14px); padding: 0 16px; min-height: 48px; }
  .ai-fab span { display: none; }
  .ai { right: 0; left: 0; bottom: var(--tabbar); width: auto; height: calc(100vh - var(--topbar) - var(--tabbar)); border-radius: 22px 22px 0 0; }
}
@media (max-width: 680px) {
  .coast { grid-template-columns: 1fr; gap: 32px; }
  .coast__item:last-child { grid-column: auto; }
  .coast__item--lead .coast__img { aspect-ratio: 4 / 3; border-radius: 22px; }
  .touch__list li { grid-template-columns: 1fr; }
  .touch__list h3 { grid-row: auto; }
  .feature--bleed { padding: 96px 20px 110px; min-height: 560px; }
  :root { --gutter: 20px; --tile-inset: 8px; --tile: 22px; --topbar: 58px; }
  .logo img { height: 32px; }
  .topbar .pill { display: none; }
  .hero { min-height: 500px; }
  .hero__body { padding-block: calc(var(--topbar) + 32px) 124px; }
  .hero h1 { font-size: 32px; }
  .hero__lead { font-size: 17px; margin-top: 12px; }
  .hero .btn-row { display: none; }
  .booking { margin-top: -96px; }
  .bk-panel { padding: 18px 16px 20px; }
  .bk-tabs { padding: 0; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .bk-tabs.is-end { -webkit-mask-image: none; mask-image: none; }
  /* On a phone each pick shows the city and its code only, so the five picks stay light under the map. */
  .bk-tab { flex: none; font-size: 15px; padding: 0 14px; }
  .bk-grid, .bk-grid--short, .bk-grid--status { grid-template-columns: 1fr; }
  .bk-grid > .fld--to { grid-column: 1; grid-row: 2; padding-left: 14px; }
  .bk-grid > .swap { grid-column: 1; grid-row: 1 / 3; justify-self: end; margin-right: 48px; transform: rotate(90deg); }
  .prose .bk-grid { grid-template-columns: 1fr; }
  .prose .bk-grid > .fld--from { grid-column: 1; }
  .prose .bk-grid > .fld--to { grid-column: 1; grid-row: 2; }
  .prose .bk-grid > .swap { grid-column: 1; grid-row: 1 / 3; }
  .section { padding-block: 64px; }
  .section--tight { padding-top: 40px; }
  .quick { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .quick::-webkit-scrollbar { display: none; }
  .quick li { flex: 0 0 92px; }
  .segmented { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .stories, .fares, .prose .fares, .dest-grid { grid-template-columns: 1fr; }
  .essential__fig { font-size: 36px; }
  .dest { grid-column: auto; height: 280px; }
  .feature { min-height: 520px; padding: 48px 20px 28px; }
  .feature::before { background: linear-gradient(180deg, rgba(8,27,51,0.86) 0%, rgba(8,27,51,0.74) 58%, rgba(8,27,51,0.12) 82%, rgba(8,27,51,0.5) 100%); }
  .feature p { font-size: 17px; }
  .cargo { grid-template-columns: 1fr; padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .ck__groups { grid-template-columns: 1fr; }
  .fx__day { min-height: 56px; padding: 6px; }
  .fx__fare { font-size: 12.5px; }
  .fx__cur { display: none; }
  .page-head .wrap { padding-block: 32px 40px; }
  .page-body { padding-block: 40px 64px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  td, th { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Departure city select ("Flights from") ---------- */
.origin { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15px; }
.origin span { font-weight: 600; color: var(--heading); }
.origin select {
  min-height: 44px; padding: 0 44px 0 18px; border: 0; border-radius: 999px; background-color: var(--grey); color: var(--heading);
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E1A2B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; transition: background-color .2s ease;
}
.origin select:hover { background-color: var(--blue-soft); }

/* ---------- Feedback on every control ---------- */
.btn, .pill { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.btn:active, .pill:active { transform: scale(.97); }

/* ---------- Entrances (site.js adds .rise only below the first screen, and only where motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(24px); }
  .rise.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--rise-delay, 0ms); }
}

@media (max-width: 680px) {
  /* Quick links: a 3 x 2 grid that ends inside the margins instead of a row cut at the screen edge. */
  .quick { overflow: visible; }
  .quick li { width: auto; }
  /* Routes on a phone: a list of rows, picture left, fare under the name, nothing cut at the edge. */
  .routes__bar { flex-wrap: wrap; }
  .origin { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .origin select { width: 100%; }
  .track { grid-template-columns: 1fr; gap: 12px; }
  .route { height: auto; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; background: var(--grey); color: var(--ink); border-radius: 20px; }
  .route::after, .route__tag { display: none; }
  .route img { position: static; width: 112px; height: 112px; border-radius: 20px 0 0 20px; }
  .route__body { position: static; padding: 14px 16px 14px 0; gap: 2px; }
  .route__city { font-size: 20px; color: var(--heading); }
  .route__days { color: var(--ink); font-size: 15px; }
  .route__price { margin-top: 6px; }
  .route__price strong { font-size: 17px; color: var(--heading); }
  .route__price small { color: var(--muted); }
  .essentials { grid-template-columns: 1fr; gap: 36px; }
  .footer__brand .big { font-size: 30px; }
}

.essentials__more { margin-top: 40px; }

.footer__contact { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 64px; }
@media (max-width: 680px) { .footer__contact { grid-template-columns: 1fr; } }
/* Tablet: route rows in two columns, the same composition as the phone list, nothing cut at the edge. */
@media (min-width: 681px) and (max-width: 1020px) {
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .route { height: auto; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; background: var(--grey); color: var(--ink); border-radius: 20px; }
  .route::after, .route__tag { display: none; }
  .route img { position: static; width: 112px; height: 112px; border-radius: 20px 0 0 20px; }
  .route__body { position: static; padding: 14px 16px 14px 0; gap: 2px; }
  .route__city { font-size: 20px; color: var(--heading); }
  .route__days { color: var(--ink); font-size: 15px; }
  .route__price { margin-top: 6px; }
  .route__price strong { font-size: 17px; color: var(--heading); }
  .route__price small { color: var(--muted); }
}

/* Next flights: the two coming dates under a calendar's note; in the booking calendar they can be picked. */
.cal__soon-line { margin: -4px 0 10px; font-size: 13px; color: var(--ink); text-align: center; }
.cal__soon { border: 0; padding: 2px 4px; margin: 0 -2px; border-radius: 6px; background: transparent; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cal__soon:hover { background: var(--blue-soft); }
.fx__soon-line { font-size: 15px; color: var(--ink); font-weight: 600; }

/* ---------- Leaving this week: a week of real departure dates under "Flights from" ---------- */
.board { margin-top: 72px; }
.board__title { font-size: 30px; letter-spacing: -0.025em; }
.board__lead { margin-top: 10px; max-width: 62ch; color: var(--ink); font-size: 17px; }
.board__days { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; }
.board__day { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 18px; border-radius: 18px; background: var(--grey); }
.board__day.is-today { background: var(--blue-soft); }
.board__date { display: flex; align-items: baseline; gap: 10px; }
.board__date strong { font-size: 20px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.board__date span { font-size: 15px; font-weight: 600; color: var(--blue); }
.board__none { color: var(--muted); font-size: 15px; }
.board__flights { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.board__flight {
  display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--white); color: var(--heading); text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.board__flight:hover { background: var(--blue); color: var(--white); }
.board__flight:hover .board__fare, .board__flight:hover .board__to small { color: var(--white); }
.board__flight:active { transform: scale(.97); }
.board__to { font-size: 17px; font-weight: 600; }
.board__to small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.board__fare { font-size: 15px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }

/* ---------- Quick links: one row of pills under the booking card ---------- */
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.quick a { flex-direction: row; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--grey); font-size: 15px; }
.quick a:hover { background: var(--blue-soft); }
.quick__icon svg { width: 20px; height: 20px; }
.quick a:hover .quick__icon { transform: none; }

/* The drawing line on the map sits above its grey route and never takes a click. */

@media (max-width: 680px) {
  .board { margin-top: 56px; }
  .board__day { grid-template-columns: 1fr; padding: 14px; }
  .board__flight { width: 100%; justify-content: space-between; border-radius: 14px; }
  .quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick a { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .board__flights { flex-direction: column; }
  .board__flights li { width: 100%; }
  .quick a { text-align: left; }
}

/* ---------- Photographs drift against the scroll (site.js sets `translate`; the frame has room to spare) ---------- */
.hero__img { inset: 0; height: 100%; }   /* the hero photo stays still, so its sky is not pushed off the top */
.feature--bleed > img { inset: -56px 0 auto; height: calc(100% + 112px); }
.photo-credits { margin-top: 20px; padding-inline: max(0px, calc(var(--gutter) - var(--tile-inset))); font-size: 13px; color: var(--muted); }
.photo-credits a { color: inherit; }

/* ---------- Check a fare: a navy field with the answer on a white card ---------- */
.fc-section { background: var(--navy); color: var(--white); }
/* Home: Check a fare comes first under the booking card, with the same breathing room the quick links had. */
.fc-section--first { margin-top: 56px; }
@media (max-width: 680px) { .fc-section--first { margin-top: 40px; } }
.fc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fc__ask h2 { color: var(--white); font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; }
.fc__lead { margin-top: 14px; max-width: 46ch; font-size: 17px; color: rgba(255,255,255,0.88); }
.fc__fields { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.fc__field > span, .fc__trip legend, .fc__people legend { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.88); }
.fc__field select {
  width: 100%; min-height: 52px; padding: 0 44px 0 16px; border: 0; border-radius: 14px; appearance: none; -webkit-appearance: none;
  background-color: rgba(255,255,255,0.12); color: var(--white); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; transition: background-color .2s ease;
}
.fc__field select:hover { background-color: rgba(255,255,255,0.2); }
.fc__field select option { color: var(--heading); background: var(--white); }
.fc__trip, .fc__people { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.fc__trip { display: flex; flex-wrap: wrap; gap: 8px; }
.fc__trip legend { width: 100%; }
.fc__trip label { position: relative; cursor: pointer; }
.fc__trip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fc__trip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 15px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.fc__trip label:hover span { background: rgba(255,255,255,0.2); }
.fc__trip input:checked + span { background: var(--white); color: var(--navy); }
.fc__trip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }
/* Travellers stack as three rows at every width: label left, 44px steppers right, nothing squeezed. */
.fc__people { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fc__people legend { grid-column: 1 / -1; }
.fc__count { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 12px 12px 12px 16px; border-radius: 16px; background: rgba(255,255,255,0.08); }
.fc__count > span { display: flex; flex-direction: column; min-width: 0; }
.fc__count strong { font-size: 15px; }
.fc__count small { font-size: 13px; color: rgba(255,255,255,0.75); }
.fc__count button { width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.14); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, transform .15s ease; }
.fc__count button:hover:not(:disabled) { background: rgba(255,255,255,0.26); }
.fc__count button:active:not(:disabled) { transform: scale(.94); }
.fc__count button:disabled { opacity: .35; cursor: default; }
.fc__count button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.fc__count output { min-width: 20px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc__people legend span { margin-left: 8px; font-weight: 400; color: rgba(255,255,255,0.75); }
.fc__answer { padding: 36px; border-radius: var(--tile); background: var(--white); color: var(--ink); }
.fc__price { margin-top: 6px; font-family: var(--font-display); font-size: 74px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--heading); font-variant-numeric: tabular-nums; }
.fc__price small { font-size: 30px; letter-spacing: -0.02em; vertical-align: 0.9em; margin-right: 2px; }
.fc__price.is-open { font-size: 36px; letter-spacing: -0.03em; line-height: 1.1; }
.fc__for { margin-top: 8px; font-size: 17px; color: var(--ink); }
.fc__legs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 6px; }
.fc__leg { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--grey); }
.fc__leg-route { display: flex; flex-direction: column; gap: 2px; }
.fc__leg-route strong { font-size: 17px; color: var(--heading); }
.fc__leg-route small { font-size: 13px; color: var(--muted); }
.fc__leg-fare { font-size: 17px; font-weight: 600; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc__kids { margin-top: 16px; font-size: 15px; color: var(--ink); }
.fc__included { margin: 20px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.fc__go { margin-top: 24px; }
.fc__note { margin-top: 14px; font-size: 15px; }
.fc__fallback-title { font-size: 20px; margin-bottom: 14px; color: var(--heading); }
/* On the Economy fares page the checker sits in the reading column as one navy panel. */
.fc-section--inline { margin: 8px 0 48px; padding: 40px; border-radius: var(--tile); }
.fc--inline { grid-template-columns: 1fr; gap: 32px; }
@media (max-width: 1020px) {
  .fc { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .fc__fields { grid-template-columns: 1fr; }
  .fc__answer { padding: 24px 20px; }
  .fc__price { font-size: 52px; }
  .fc__price small { font-size: 20px; }
  .fc-section--inline { padding: 28px 20px; }
}

/* Tablet: the top bar (menu button and Book a flight) is enough; the bottom tab bar is for phones only. */
@media (min-width: 681px) and (max-width: 1080px) {
  :root { --tabbar: 0px; }
  .tabbar { display: none; }
}

/* ---------- Refine and move (round 6) ---------- */
/* The aircraft that rides the tip of each drawing route on the map. */
@media (prefers-reduced-motion: no-preference) {
  /* Arrival: the hero's headline, sentence and button rise into the light once, one after another. */
  @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .hero__body > h1, .hero__body > .hero__lead, .hero__body > .btn-row { animation: arrive .9s cubic-bezier(.16,1,.3,1) both; }
  .hero__body > .hero__lead { animation-delay: .12s; }
  .hero__body > .btn-row { animation-delay: .24s; }
  /* Check a fare: each new answer settles in, row by row. */
  @keyframes settle-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .fc__answer.is-fresh > * { animation: settle-in .5s cubic-bezier(.16,1,.3,1) both; }
  .fc__answer.is-fresh > :nth-child(2) { animation-delay: 40ms; }
  .fc__answer.is-fresh > :nth-child(3) { animation-delay: 80ms; }
  .fc__answer.is-fresh > :nth-child(4) { animation-delay: 120ms; }
  .fc__answer.is-fresh > :nth-child(n+5) { animation-delay: 160ms; }
  /* Leaving this week: a new departure city ripples its week in, day by day. */
  .board__day.is-fresh { animation: settle-in .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--ripple, 0ms); }
}

/* Inner pages, desktop: the assistant launcher is a compact round button, so it never sits over the side menu.
   The home page keeps the labelled pill. */
@media (min-width: 1081px) {
  body:not(:has(.hero)) .ai-fab { width: 52px; padding: 0; justify-content: center; }
  body:not(:has(.hero)) .ai-fab span { display: none; }
}

/* -- Home page on the Daallo layout (owner's request, 5 Nov 2026) --------------------------------
   Same structure and proportions as the Daallo Airlines demo home page: full-width bands that
   alternate white and mist, an uppercase eyebrow over each heading, photo fare cards, tall journey
   cards, a welcome split, pillars, planning cards, the experience band and a dark cargo band.
   Somali Airlines colours take the place of Daallo colours: blue (--blue) where Daallo uses green,
   navy (--navy) where Daallo uses forest green. Only the home page uses these "dl-" classes. */
.dl-band { padding-block: 88px; }
.dl-band--mist { background: var(--mist); }
.dl-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin: 0; }
.dl-h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 700; line-height: 1.1; margin: 14px 0 12px; }
.dl-lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0; }
.dl-lead--gap { margin-bottom: 40px; }
.dl-center { text-align: center; }
.dl-center .dl-lead { margin: 0 auto; }
.dl-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; font-size: 16px; color: var(--blue); text-decoration: none; }
.dl-link svg { transition: transform .2s; }
.dl-link:hover svg { transform: translateX(3px); }
.dl-head-row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.dl-head-row .dl-link { white-space: nowrap; }
.dl-fine { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 14px; color: var(--muted); }
.dl-fine::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }

/* Fare cards */
.dl-fare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dl-fare { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.dl-fare__ph { position: relative; height: 178px; background: var(--navy); }
.dl-fare__ph img { width: 100%; height: 100%; object-fit: cover; }
.dl-pills { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.dl-pill { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1; }
.dl-pill--dark { background: rgba(11,37,69,.78); color: var(--white); }
.dl-fare__b { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.dl-fare h3 { font-size: 21px; letter-spacing: -.01em; }
.dl-fare__via { font-size: 14px; color: var(--muted); margin-top: 4px; }
.dl-price { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1.5px solid var(--ink); margin-top: 16px; padding-top: 12px; }
.dl-price__l { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.dl-price__v { font-size: 34px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-price__v small { font-size: 13px; color: var(--blue); letter-spacing: .08em; margin-right: 4px; }
.dl-fare__note { font-size: 13px; color: var(--muted); margin: 6px 0 14px; }
.dl-fare__book { margin-top: auto; font-size: 15px; }

/* Journey cards: tall photos, five in a row; a row you swipe below 1100 px */
.dl-jhead { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.dl-jhead .dl-lead { margin: 0 auto; }
.dl-jcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.dl-jcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3/5; border-radius: 20px; overflow: hidden; background: var(--navy); color: var(--white); isolation: isolate; box-shadow: 0 1px 2px rgba(8,27,51,.08), 0 12px 32px -18px rgba(8,27,51,.45); }
.dl-jcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.dl-jcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,27,51,.94) 0%, rgba(8,27,51,.72) 30%, rgba(8,27,51,.18) 58%, rgba(8,27,51,0) 72%); }
.dl-jtag { position: absolute; top: 16px; left: 16px; padding: 6px 11px; border-radius: 999px; background: rgba(8,27,51,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.dl-jbody { padding: 0 20px 18px; }
.dl-jcard h3 { color: var(--white); font-size: 24px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 6px; }
.dl-jcard p { margin: 0 0 16px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.82); }
.dl-jcta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); color: var(--white); font-size: 14px; font-weight: 700; text-decoration: none; }
.dl-jcta::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.dl-jcta:focus-visible { outline: none; }
.dl-jcta:focus-visible::after { outline: 3px solid #8DB7EC; outline-offset: 3px; }
.dl-jgo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.16); flex: none; transition: background .25s; }
.dl-jgo svg { width: 15px; height: 15px; transform: rotate(-45deg); }
.dl-jcard:hover img { transform: scale(1.05); }
.dl-jcard:hover .dl-jgo { background: var(--blue); }
.dl-more { text-align: center; margin-top: 32px; }

/* Welcome: no photo; the heading on the left, the words and button on the right, top edges aligned */
.dl-welcome__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 72px; align-items: start; }
.dl-welcome__head .dl-h2 { margin-bottom: 0; max-width: 13ch; }
.dl-welcome__copy { display: flex; flex-direction: column; gap: 18px; padding-top: 34px; }
.dl-welcome__copy p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.dl-welcome__copy > div { margin-top: 10px; }
.dl-exp__media figcaption { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 12px; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.dl-exp__media figcaption a { color: inherit; }

/* Pillars and planning cards */
.dl-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.dl-pillar { border: 1px solid var(--line); border-radius: 10px; padding: 30px 28px; text-align: left; }
.dl-pillar .dl-ico { width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 22px; }
.dl-pillar h3 { font-size: 22px; margin-bottom: 8px; }
.dl-pillar p, .dl-plan p { margin: 0; color: var(--muted); }
.dl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dl-plan { border: 1px solid var(--line); border-radius: 10px; padding: 30px; display: grid; grid-template-columns: 44px 1fr; gap: 6px 20px; align-content: start; background: var(--white); }
.dl-plan .dl-ico { width: 44px; height: 44px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; grid-row: span 3; }
.dl-plan h3 { font-size: 24px; }
.dl-plan .dl-link { margin-top: 12px; font-size: 15px; justify-self: start; }

/* Experience and cargo: photo beside words */
.dl-exp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dl-exp--flip { grid-template-columns: 1fr 1.1fr; }
.dl-exp__media { position: relative; margin: 0; }
.dl-exp__media img { border-radius: 12px; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.dl-exp__p { font-size: 18px; color: var(--muted); margin: 0 0 30px; }
.dl-cargo { background: var(--navy); color: var(--white); }
.dl-cargo .dl-h2 { color: var(--white); }
.dl-cargo .dl-eyebrow { color: #8DB7EC; }
.dl-cargo .dl-exp__p { color: #D6E3F5; }
.dl-photo-note { margin-top: 40px; font-size: 13px; color: #B9CBE3; }

@media (max-width: 1100px) {
  .dl-jcards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .dl-jcards::-webkit-scrollbar { display: none; }
  .dl-jcard { flex: 0 0 260px; scroll-snap-align: start; }
}
@media (max-width: 1020px) {
  .dl-fare-grid, .dl-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-exp, .dl-exp--flip, .dl-welcome__in { grid-template-columns: 1fr; }
  .dl-welcome__copy { padding-top: 0; }
  .dl-welcome__head .dl-h2 { max-width: none; }
  .dl-three { grid-template-columns: 1fr; }
  .dl-band { padding-block: 64px; }
}
@media (max-width: 680px) {
  .dl-band { padding-block: 52px; }
  .dl-h2 { font-size: 28px; }
  .dl-fare-grid, .dl-four { grid-template-columns: 1fr; }
  .dl-fare__ph { height: 160px; }
  .dl-price__v { font-size: 30px; }
  .dl-jhead { margin-bottom: 28px; }
  .dl-jcard { flex-basis: 72%; }
  .dl-jcard h3 { font-size: 22px; }
  .dl-exp { gap: 32px; }
  .dl-welcome__copy p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-jcard img, .dl-link svg { transition: none; }
  .dl-jcard:hover img { transform: none; }
}