/* ==========================================================================
   Elekea Travels — public design system
   Mobile-first. Tokens → base → layout → components → pages → utilities
   ========================================================================== */

/* Calm Coast — white surfaces, deep navy text, ocean-teal accent. body.admin keeps its own palette below. */
:root {
  color-scheme: light;
  /* colour */
  --ink: #142433;
  --ink-2: #3d4f5f;
  --muted: #6b7a88;
  --line: #e4e9ee;
  --line-2: #d3dbe3;
  --bg: #ffffff;
  --surface: #ffffff;
  --sand: #f4f7f9;
  --sand-2: #e9eef2;
  --forest: #0f2433;
  --forest-2: #17344a;
  --accent: #0e7c7b;
  --accent-2: #0a6564;
  --accent-soft: #e3f3f2;
  --on-accent: #ffffff;
  --gold: #e3a33b;
  --gold-grad: linear-gradient(120deg, #18a5a2 0%, #0e7c7b 55%, #0a5f66 100%);
  --success: #23845a;
  --success-soft: #e5f4ec;
  --warning: #a8690e;
  --warning-soft: #fbf2e1;
  --danger: #c0392b;
  --danger-soft: #fbe8e6;
  --info: #2367a8;
  --info-soft: #e6eff9;

  /* type */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-poster: "Montserrat", "Arial Black", system-ui, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --fs-hero: clamp(2.8rem, 1.6rem + 5.6vw, 6.4rem);

  /* shape */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(20, 36, 51, .06), 0 1px 1px rgba(20, 36, 51, .04);
  --shadow: 0 14px 34px -14px rgba(20, 36, 51, .18), 0 2px 6px rgba(20, 36, 51, .05);
  --shadow-lg: 0 34px 70px -26px rgba(20, 36, 51, .32);

  /* layout */
  --container: 1280px;
  --gutter: 20px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 84px; }
}

/* admin panel keeps the original light palette */
body.admin {
  color-scheme: light;
  --ink: #15201b; --ink-2: #3b4842; --muted: #6a756f; --line: #e7e2d9; --line-2: #d9d2c5;
  --bg: #fbfaf7; --surface: #ffffff; --sand: #f4efe6; --sand-2: #ece5d8; --forest: #1c3329; --forest-2: #24443a;
  --accent: #c4552f; --accent-2: #a9441f; --accent-soft: #fbece5; --on-accent: #fff; --gold: #e0a23a;
  --success: #2f7d57; --success-soft: #e6f3ec; --warning: #a86b12; --warning-soft: #fbf1df;
  --danger: #bf3b2b; --danger-soft: #fbe9e6; --info: #28639e; --info-soft: #e5eef8;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Manrope", system-ui, sans-serif;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(21, 32, 27, .06), 0 1px 1px rgba(21, 32, 27, .04);
  --shadow: 0 10px 30px -12px rgba(21, 32, 27, .18), 0 2px 6px rgba(21, 32, 27, .05);
  --shadow-lg: 0 30px 60px -20px rgba(21, 32, 27, .35);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 50; }
h3, h4 { line-height: 1.2; letter-spacing: -.01em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip-link:focus { top: 12px; }

.icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1440px; }
.section { padding-block: clamp(64px, 5vw + 32px, 128px); }
.section--tight { padding-block: clamp(40px, 3vw + 24px, 72px); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--forest); color: #eef2ef; }
.section--dark .eyebrow { color: #f1b394; }
.section--dark .lead { color: rgba(238, 242, 239, .78); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.grid { display: grid; gap: var(--gap, 24px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }

/* section header */
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 3vw, 56px); }
.section-head__text { max-width: 640px; }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head .lead { margin-top: 14px; }
@media (min-width: 900px) {
  .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.lead { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.65; }
.muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: .95rem; letter-spacing: .005em; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon--move { transform: translateX(3px); }
.btn--accent { --btn-bg: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-2); box-shadow: 0 10px 24px -10px rgba(196, 85, 47, .7); }
.btn--dark:hover { --btn-bg: #000; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--sand); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--outline:hover { --btn-bd: var(--ink); }
.btn--ghost-light { --btn-bg: rgba(255, 255, 255, .18); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); }
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .22); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .2s, gap .2s; }
.link-arrow:hover { border-color: currentColor; gap: 12px; }
.link-arrow .icon { width: 18px; height: 18px; }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- badges / chips */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--neutral { background: var(--sand); color: var(--ink-2); }
.badge--accent { background: var(--accent); color: #fff; }
.badge--glass { background: rgba(255, 255, 255, .96); color: var(--ink); }
.badge--dark { background: rgba(21, 32, 27, .86); color: #fff; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all .2s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip .icon { width: 16px; height: 16px; }
.chip--removable .icon { opacity: .6; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); background: var(--sand); padding: 5px 10px; border-radius: 8px; }
.tag .icon { width: 14px; height: 14px; }

.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--line-2); font-size: .95em; line-height: 1; }
.stars__s.is-on { color: var(--gold); }
.stars__v { margin-left: 6px; color: var(--ink); font-weight: 700; font-size: .92em; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); }
.rating .icon { width: 16px; height: 16px; color: var(--gold); fill: var(--gold); }
.rating small { color: var(--muted); font-weight: 500; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h);
  background: rgba(251, 250, 247, .98);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-color: var(--line); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.site-header--overlay { position: fixed; inset: 0 0 auto 0; background: transparent; color: #fff; }
.site-header--overlay.is-scrolled, .site-header--overlay.is-open { background: rgba(251, 250, 247, .98); color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand__logo { height: 40px; width: auto; flex: none; overflow: visible; --brand-teal: #0E7C7B; }
@media (min-width: 768px) { .brand__logo { height: 44px; } }
.brand__sun { fill: #E0A458; }
.brand__teal { fill: var(--brand-teal); }
/* light teal wherever the logo sits on a dark or photo background */
.site-header--overlay:not(.is-scrolled):not(.is-open) .brand__logo, .footer-brand .brand__logo, .admin-side__brand .brand__logo, .auth__media .brand__logo { --brand-teal: #5FC2BE; }
.brand img { max-height: 40px; width: auto; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; transition: background-color .2s; white-space: nowrap; }
.nav__link:hover, .nav__item.is-open > .nav__link { background: rgba(21, 32, 27, .06); }
.site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link:hover { background: rgba(255, 255, 255, .14); }
.nav__link .icon { width: 16px; height: 16px; transition: transform .2s; }
.nav__item { position: relative; }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }
.nav__link.is-active { color: var(--accent); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-actions .btn { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: inherit; transition: background-color .2s; }
.icon-btn:hover { background: rgba(21, 32, 27, .07); }
.site-header--overlay:not(.is-scrolled):not(.is-open) .icon-btn:hover { background: rgba(255, 255, 255, .15); }
.icon-btn .icon { width: 22px; height: 22px; }
.account-link { display: none; }

@media (min-width: 1024px) {
  .nav { display: block; margin-left: 16px; }
  .header-actions .btn { display: inline-flex; }
  .account-link { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* mega menu */
.mega {
  position: absolute; top: calc(100% + 14px); left: -24px;
  width: min(900px, 90vw);
  background: var(--surface); color: var(--ink);
  border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(11, 34, 51, .45), 0 2px 8px rgba(11, 34, 51, .06); border: 1px solid var(--line);
  padding: 22px;
  display: grid; gap: 22px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .3s var(--ease), visibility .2s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__title { margin: 4px 0 12px; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.mega__title::before { content: ""; display: block; width: 20px; height: 2px; margin-bottom: 10px; background: currentColor; }
.mega__list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }

/* destinations: two photo lists + a feature card */
.mega--dest { grid-template-columns: 1fr 1fr 1.05fr; padding: 26px; }
.mega__dest { display: grid; grid-template-columns: 48px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 7px; margin-inline: -7px; border-radius: 14px; transition: background-color .2s; }
.mega__dest img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; }
.mega__dest strong { display: block; font-size: .95rem; font-weight: 600; }
.mega__dest small { display: block; font-size: .76rem; color: var(--muted); }
.mega__dest .icon { width: 16px; height: 16px; color: var(--accent); opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .25s var(--ease); }
.mega__dest:hover { background: var(--sand); }
.mega__dest:hover .icon { opacity: 1; transform: none; }
.mega__feature { position: relative; display: flex; align-items: flex-end; min-height: 300px; padding: 22px; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; }
.mega__feature img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mega__feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 15, 24, 0) 30%, rgba(5, 15, 24, .85)); }
.mega__feature:hover img { transform: scale(1.06); }
.mega__feature-text { display: grid; gap: 6px; }
.mega__feature-text small, .mega__preview-text small { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a7ece8; }
.mega__feature-text strong, .mega__preview-text strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.mega__feature-text > span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: rgba(255, 255, 255, .85); }
.mega__feature-text .icon { width: 14px; height: 14px; }

/* experiences / services: icon list + a live photo preview */
.mega--rich { width: min(760px, 90vw); grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 1fr auto; align-items: stretch; }
.mega__menu { list-style: none; display: grid; align-content: start; gap: 2px; margin: 0; padding: 0; }
.mega__menu--two { grid-template-columns: 1fr 1fr; column-gap: 6px; }
.mega__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; font-size: .92rem; transition: background-color .2s, color .2s; }
.mega__item strong { font-weight: 600; line-height: 1.25; }
.mega__chip { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); transition: background-color .2s, color .2s, transform .3s var(--ease); }
.mega__chip .icon { width: 18px; height: 18px; }
.mega__item:hover, .mega__item.is-on { background: var(--sand); }
.mega__item:hover .mega__chip, .mega__item.is-on .mega__chip { background: var(--accent); color: #fff; transform: rotate(-6deg); }
.mega__preview { position: relative; grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: flex-end; min-height: 320px; padding: 20px; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; background: #0b1c29; }
.mega__preview img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform 1.2s var(--ease); }
.mega__preview img.is-swap { opacity: 0; transform: scale(1.06); }
.mega__preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 15, 24, 0) 25%, rgba(5, 15, 24, .88)); }
.mega__preview-text { display: grid; gap: 8px; }
.mega__preview-text > span { font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.mega__all { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 4px 10px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.mega__all .icon { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.mega__all:hover .icon { transform: translateX(4px); }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 16, 13, .45); opacity: 0; transition: opacity .3s; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(440px, 100%);
  background: var(--bg); color: var(--ink);
  transform: translateX(100%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.drawer__body { padding: 16px var(--gutter) 32px; flex: 1; }
.drawer__nav { list-style: none; }
.drawer__nav > li { border-bottom: 1px solid var(--line); }
.drawer__nav a, .drawer__nav summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; cursor: pointer; list-style: none; }
.drawer__nav summary::-webkit-details-marker { display: none; }
.drawer__nav details[open] summary .icon { transform: rotate(180deg); }
.drawer__nav summary .icon { transition: transform .2s; }
.drawer__sub { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding-bottom: 18px; }
.drawer__sub a { font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 8px 0; color: var(--ink-2); }
.drawer__foot { padding: 20px var(--gutter) 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; flex: none; }
body.no-scroll { overflow: hidden; }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 18s ease-out forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 14, 11, .55) 0%, rgba(8, 14, 11, .1) 32%, rgba(8, 14, 11, .15) 55%, rgba(8, 14, 11, .78) 100%); }
.hero__content { padding-top: calc(var(--header-h) + 72px); padding-bottom: 32px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, .25); }
.hero__eyebrow .icon { width: 16px; height: 16px; }
.hero h1 { font-size: var(--fs-hero); font-weight: 400; max-width: 11ch; letter-spacing: -.03em; line-height: .98; }
.hero h1 em { font-style: italic; font-weight: 300; }
.hero__sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 520px; margin-top: 22px; color: rgba(255, 255, 255, .88); }
.hero__proof { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 28px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); }
.hero__proof strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: #fff; line-height: 1.1; }
.hero__search { padding-bottom: clamp(24px, 4vw, 56px); }

/* ---------------------------------------------------------------- trip search */
.trip-search {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 10px;
  display: grid; gap: 4px;
}
.trip-search__title { font-family: var(--font-display); font-size: 1.25rem; padding: 10px 12px 6px; }
.trip-search__field { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; transition: background-color .15s; }
.trip-search__field:hover, .trip-search__field:focus-within { background: var(--sand); }
.trip-search__field > .icon { color: var(--accent); width: 22px; height: 22px; }
.trip-search__field label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trip-search__field select, .trip-search__field input {
  width: 100%; border: 0; background: transparent; padding: 2px 0 0; font-weight: 600; font-size: 1rem; appearance: none; -webkit-appearance: none; outline: none; min-height: 26px;
}
.trip-search__field > div { flex: 1; min-width: 0; }
.trip-search .btn { min-height: 56px; margin: 6px 4px 4px; }
@media (min-width: 1024px) {
  .trip-search { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: center; border-radius: 999px; padding: 8px 8px 8px 12px; gap: 0; }
  .trip-search__title { display: none; }
  .trip-search__field { border-radius: 999px; padding: 8px 18px; }
  .trip-search__field + .trip-search__field::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  .trip-search__field:hover::before, .trip-search__field:hover + .trip-search__field::before { opacity: 0; }
  .trip-search .btn { margin: 0 0 0 8px; min-height: 60px; padding: 0 28px; }
}

/* ---------------------------------------------------------------- cards: destination */
.dest-grid { display: grid; gap: 16px; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.dest-grid::-webkit-scrollbar { display: none; }
.dest-grid > * { scroll-snap-align: start; }
@media (min-width: 640px) { .dest-grid { grid-auto-columns: 46%; } }
@media (min-width: 1024px) {
  .dest-grid { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; overflow: visible; margin: 0; padding: 0; }
  .dest-grid > :first-child { grid-column: span 2; grid-row: span 2; }
  .dest-grid > :nth-child(4) { grid-row: span 2; }
}
.dest-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; padding: 22px; }
@media (min-width: 1024px) { .dest-grid .dest-card { min-height: 0; height: 100%; } }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.dest-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .72) 100%); transition: background .3s; }
.dest-card:hover img { transform: scale(1.06); }
.dest-card__count { position: absolute; top: 18px; left: 18px; }
.dest-card__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 500; }
.dest-card__desc { font-size: var(--fs-sm); color: rgba(255, 255, 255, .86); margin: 8px 0 0; max-width: 42ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dest-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: var(--fs-sm); }
.dest-card__cta .icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.dest-card:hover .dest-card__cta .icon { transform: translateX(4px); }
.dest-card__arrow { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; transform: scale(.8) rotate(-20deg); opacity: 0; transition: all .3s var(--ease); }
.dest-card:hover .dest-card__arrow { transform: none; opacity: 1; }
.dest-card__arrow .icon { width: 18px; height: 18px; }

/* destination index list card */
.dest-list { display: grid; gap: 24px; }
@media (min-width: 700px) { .dest-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dest-list { grid-template-columns: repeat(3, 1fr); } }
.dest-list .dest-card { min-height: 460px; }

/* ---------------------------------------------------------------- cards: experience */
.exp-row { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
.exp-row::-webkit-scrollbar { display: none; }
.exp-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .exp-row { grid-auto-columns: 36%; } }
@media (min-width: 1024px) { .exp-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; } }
.exp-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; color: #fff; isolation: isolate; }
@media (min-width: 1024px) { .exp-card { aspect-ratio: 5 / 4; } }
.exp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.exp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .66)); }
.exp-card:hover img { transform: scale(1.07); }
.exp-card__body { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.exp-card__icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .26); display: grid; place-items: center; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, .3); }
.exp-card__icon .icon { width: 22px; height: 22px; }
.exp-card__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
.exp-card__meta { font-size: var(--fs-xs); font-weight: 600; opacity: .85; }

/* ---------------------------------------------------------------- cards: package */
.pkg-grid { display: grid; gap: 28px 24px; }
@media (min-width: 640px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg-grid--2 { }
@media (min-width: 1100px) { .pkg-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.pkg-row { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
.pkg-row::-webkit-scrollbar { display: none; }
.pkg-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .pkg-row { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .pkg-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: 28px 24px; } }

.pkg-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); transition: box-shadow .3s, transform .3s var(--ease), border-color .3s; }
.pkg-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.pkg-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pkg-card:hover .pkg-card__media img { transform: scale(1.05); }
.pkg-card__badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-card__duration { position: absolute; bottom: 14px; left: 14px; }
.pkg-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex: 1; }
.pkg-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pkg-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pkg-card__meta .icon { width: 15px; height: 15px; }
.pkg-card__title { font-size: 1.35rem; font-weight: 500; }
.pkg-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pkg-card__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pkg-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.price { line-height: 1.15; }
.price__from { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.price__value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.price__value small { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: 0; }
.price__was { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; margin-left: 6px; font-family: var(--font-body); }
.pkg-card__actions { display: flex; gap: 8px; position: relative; z-index: 2; }

/* ---------------------------------------------------------------- why us */
.why-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }
.why-item { padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.section--dark .why-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.why-item:hover { transform: translateY(-4px); }
.why-item__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.section--dark .why-item__icon { background: rgba(241, 179, 148, .14); color: #f1b394; }
.why-item__icon .icon { width: 26px; height: 26px; }
.why-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
.why-item p { font-size: var(--fs-sm); margin: 0; color: var(--ink-2); }
.section--dark .why-item p { color: rgba(238, 242, 239, .72); }

/* ---------------------------------------------------------------- testimonials */
.quote-row { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
.quote-row::-webkit-scrollbar { display: none; }
.quote-row > * { scroll-snap-align: start; }
@media (min-width: 768px) { .quote-row { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .quote-row { grid-auto-columns: calc((100% - 36px) / 3); } }
.quote-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); }
.quote-card .icon--quote { width: 30px; height: 30px; color: var(--accent); opacity: .9; }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.45; font-weight: 400; letter-spacing: -.005em; }
.quote-card footer { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: #fff; font-weight: 700; font-size: .95rem; flex: none; }
.quote-card__who strong { display: block; font-size: var(--fs-sm); }
.quote-card__who span { font-size: var(--fs-xs); color: var(--muted); }
.scroller-nav { display: flex; gap: 8px; }
.scroller-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: all .2s; }
.scroller-nav button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.scroller-nav .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- editorial */
.editorial { display: grid; gap: 20px; }
@media (min-width: 960px) { .editorial { grid-template-columns: 1.35fr 1fr; gap: 24px; } }
.editorial__side { display: grid; gap: 20px; }
.story { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; min-height: 300px; padding: 28px; }
.story--lg { min-height: 480px; }
@media (min-width: 960px) { .story--lg { min-height: 620px; padding: 40px; } }
.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .75)); }
.story:hover img { transform: scale(1.05); }
.story__kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-bottom: 10px; }
.story h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.4rem); font-weight: 400; max-width: 18ch; }
.story--lg h3 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.2rem); }
.story p { margin: 12px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .86); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- CTA band */
.cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); text-align: center; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 18, 14, .45), rgba(10, 18, 14, .75)); }
.cta-band h2 { font-size: var(--fs-3xl); font-weight: 400; max-width: 14ch; margin-inline: auto; }
.cta-band p { margin: 18px auto 30px; max-width: 520px; color: rgba(255, 255, 255, .86); font-size: var(--fs-md); }
.cta-band .cluster { justify-content: center; }

/* ---------------------------------------------------------------- page hero (inner pages) */
.page-hero { position: relative; color: #fff; isolation: isolate; min-height: clamp(460px, 70vh, 720px); display: flex; align-items: flex-end; overflow: hidden; margin-top: calc(var(--header-h) * -1); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 14, 11, .5) 0%, rgba(8, 14, 11, .08) 35%, rgba(8, 14, 11, .72) 100%); }
.page-hero__content { padding-block: calc(var(--header-h) + 60px) clamp(36px, 5vw, 64px); width: 100%; }
.page-hero h1 { font-size: var(--fs-3xl); font-weight: 400; max-width: 16ch; }
.page-hero__tagline { font-size: var(--fs-lg); color: rgba(255, 255, 255, .9); margin-top: 14px; max-width: 560px; font-family: var(--font-display); font-style: italic; font-weight: 300; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.page-hero--plain { min-height: 0; color: var(--ink); margin-top: 0; }
.page-hero--plain::after { display: none; }
.page-hero--plain .page-hero__content { padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 48px); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: inherit; opacity: .85; margin-bottom: 18px; list-style: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .icon { width: 14px; height: 14px; opacity: .7; }

/* ---------------------------------------------------------------- content blocks */
.prose { font-size: 1.06rem; line-height: 1.8; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose p:first-of-type::first-letter { }
.two-col { display: grid; gap: 40px; }
@media (min-width: 1024px) { .two-col { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; } }
.two-col--wide-aside { }
@media (min-width: 1024px) { .two-col--wide-aside { grid-template-columns: minmax(0, 1fr) 420px; } }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--surface); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.fact .icon { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.fact dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 2px 0 0; font-weight: 700; }

.feature-list { display: grid; gap: 14px; list-style: none; }
@media (min-width: 640px) { .feature-list--2 { grid-template-columns: repeat(2, 1fr); gap: 14px 28px; } }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list .icon { width: 20px; height: 20px; margin-top: 3px; }
.feature-list--check .icon { color: var(--success); }
.feature-list--cross .icon { color: var(--danger); }
.feature-list--accent .icon { color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.5vw, 32px); }
.card--flat { background: var(--sand); border-color: transparent; }
.card__title { font-size: 1.35rem; margin-bottom: 18px; }

.subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(251, 250, 247, .99); border-bottom: 1px solid var(--line); }
.subnav__list { display: flex; gap: 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 16px 14px; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--ink); border-color: var(--accent); }

.block { padding-block: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.block__head h2 { font-size: var(--fs-xl); }

/* things to do cards */
.todo-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .todo-grid { grid-template-columns: repeat(2, 1fr); } }
.todo { padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; gap: 16px; }
.todo__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); line-height: 1; min-width: 34px; }
.todo h3 { font-size: 1.1rem; margin-bottom: 6px; }
.todo p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* month strip */
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (min-width: 640px) { .months { grid-template-columns: repeat(12, 1fr); } }
.month { text-align: center; padding: 10px 0; border-radius: 10px; font-size: var(--fs-xs); font-weight: 700; background: var(--sand); color: var(--muted); }
.month.is-best { background: var(--forest); color: #fff; }

/* info list */
.info-list { display: grid; gap: 0; list-style: none; }
.info-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.info-list li:last-child { border: 0; }
.info-list span { color: var(--muted); }
.info-list strong { text-align: right; }

/* ---------------------------------------------------------------- accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { width: 20px; height: 20px; transition: transform .25s var(--ease); flex: none; }
.accordion details[open] summary .icon { transform: rotate(45deg); }
.accordion__body { padding: 0 0 22px; color: var(--ink-2); max-width: 72ch; }

/* ---------------------------------------------------------------- gallery */
.gallery-hero { display: grid; gap: 8px; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.gallery-hero__item { position: relative; overflow: hidden; background: var(--sand); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; }
.gallery-hero__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .3s; }
.gallery-hero__item:hover img { transform: scale(1.04); }
.gallery-hero__item:first-child { aspect-ratio: 4 / 3; }
.gallery-hero__item:not(:first-child) { display: none; }
@media (min-width: 900px) {
  .gallery-hero { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; }
  .gallery-hero__item:first-child { grid-row: span 2; aspect-ratio: auto; }
  .gallery-hero__item:not(:first-child) { display: block; }
  .gallery-hero--3 { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 1200px) { .gallery-hero { grid-template-rows: 260px 260px; } }
.gallery-hero__all { position: absolute; right: 16px; bottom: 16px; z-index: 3; }

.masonry { columns: 2; column-gap: 12px; }
@media (min-width: 900px) { .masonry { columns: 3; column-gap: 16px; } }
.masonry__item { break-inside: avoid; margin-bottom: 12px; border-radius: var(--r); overflow: hidden; display: block; width: 100%; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; }
@media (min-width: 900px) { .masonry__item { margin-bottom: 16px; } }
.masonry__item img { width: 100%; transition: transform .8s var(--ease); }
.masonry__item:hover img { transform: scale(1.04); }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 10, .96); display: none; flex-direction: column; color: #fff; }
.lightbox.is-open { display: flex; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: var(--fs-sm); }
.lightbox__stage { flex: 1; display: grid; place-items: center; position: relative; min-height: 0; padding: 0 12px 24px; }
.lightbox__stage img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.lightbox__prev { left: 16px; } .lightbox__next { right: 16px; }
.lightbox__prev:hover, .lightbox__next:hover { background: rgba(255, 255, 255, .25); }
.lightbox .icon-btn { color: #fff; }
.lightbox__caption { text-align: center; padding: 0 16px 20px; color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); min-height: 1.5em; }

/* ---------------------------------------------------------------- package detail */
.pkg-head { padding-block: 24px 28px; }
.pkg-head h1 { font-size: var(--fs-3xl); font-weight: 400; max-width: 20ch; }
.pkg-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); }
.pkg-head__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.pkg-head__meta .icon { width: 18px; height: 18px; color: var(--accent); }
.pkg-head .breadcrumbs { color: var(--muted); }

.booking-card { position: sticky; top: calc(var(--header-h) + 72px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.booking-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.booking-card__price .price__value { font-size: 2.2rem; }
.booking-card__save { margin-top: 6px; }
.booking-card form { display: grid; gap: 12px; margin-top: 20px; }
.booking-card__note { display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--muted); margin-top: 14px; line-height: 1.5; }
.booking-card__note .icon { width: 16px; height: 16px; color: var(--success); margin-top: 1px; }
.booking-card__help { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.booking-card__help .avatar { background: var(--accent-soft); color: var(--accent); }
.aside-hide-mobile { display: none; }
@media (min-width: 1024px) { .aside-hide-mobile { display: block; } }

.mobile-book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--surface); border-top: 1px solid var(--line); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .18); transform: translateY(110%); transition: transform .35s var(--ease); }
.mobile-book-bar.is-visible { transform: none; }
.mobile-book-bar .price__value { font-size: 1.35rem; }
@media (min-width: 1024px) { .mobile-book-bar { display: none; } }
body.has-book-bar { padding-bottom: 84px; }
@media (min-width: 1024px) { body.has-book-bar { padding-bottom: 0; } }

/* itinerary timeline */
.timeline { position: relative; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); }
.tl-day { position: relative; padding-left: 64px; }
.tl-day + .tl-day { margin-top: 10px; }
.tl-day__marker { position: absolute; left: 0; top: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); display: grid; place-items: center; font-weight: 800; font-size: .9rem; transition: all .25s; }
.tl-day[open] .tl-day__marker, .tl-day:hover .tl-day__marker { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-day > summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tl-day > summary::-webkit-details-marker { display: none; }
.tl-day__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tl-day__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.tl-day > summary .icon { width: 20px; height: 20px; color: var(--muted); transition: transform .25s; flex: none; }
.tl-day[open] > summary .icon { transform: rotate(180deg); }
.tl-day__body { padding: 4px 0 24px; display: grid; gap: 18px; }
.tl-day__body p { margin: 0; color: var(--ink-2); line-height: 1.75; }
.tl-day__img { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 8; }
.tl-day__img img { width: 100%; height: 100%; object-fit: cover; }
.tl-day__meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* reviews */
.review-summary { display: grid; gap: 24px; align-items: center; }
@media (min-width: 640px) { .review-summary { grid-template-columns: 200px 1fr; } }
.review-score { text-align: center; padding: 24px; border-radius: var(--r-lg); background: var(--sand); }
.review-score strong { display: block; font-family: var(--font-display); font-size: 3.4rem; font-weight: 500; line-height: 1; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: 600; }
.bar__track, .bar__fill { display: block; }
.bar__track { height: 8px; border-radius: 999px; background: var(--sand-2); overflow: hidden; }
.bar__fill { height: 100%; background: var(--gold); border-radius: inherit; }
.review-list { display: grid; gap: 16px; margin-top: 28px; }
.review { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.review__head .avatar { background: var(--sand-2); color: var(--ink); }
.review__title { font-weight: 800; margin-bottom: 6px; }
.review p { margin: 0; color: var(--ink-2); }

/* accommodation tier tabs */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--sand); border-radius: 999px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); transition: all .2s; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tab-panel[hidden] { display: none; }
.stay-card { display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 700px) { .stay-card { grid-template-columns: 260px 1fr; } }
.stay-card + .stay-card { margin-top: 14px; }
.stay-card__img { aspect-ratio: 16 / 10; background: var(--sand); }
@media (min-width: 700px) { .stay-card__img { aspect-ratio: auto; } }
.stay-card__img img { width: 100%; height: 100%; object-fit: cover; }
.stay-card__body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.stay-card__body h3 { font-size: 1.25rem; }
.stay-card__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

.activity-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .activity-grid { grid-template-columns: repeat(2, 1fr); } }
.activity { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.activity__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.activity__icon .icon { width: 22px; height: 22px; }
.activity h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.activity p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; }
.field > label, .label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a756f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(21, 32, 27, .08); }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea, .input.is-invalid { border-color: var(--danger); }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } .span-2 { grid-column: span 2; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 1px 0 0; flex: none; }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; pointer-events: none; }
.input-icon .input, .input-icon .select { padding-left: 46px; }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); }
.stepper__label strong { display: block; font-size: .95rem; }
.stepper__label small { color: var(--muted); font-size: var(--fs-xs); }
.stepper__ctrl { display: flex; align-items: center; gap: 12px; }
.stepper__ctrl button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: all .15s; }
.stepper__ctrl button:hover:not(:disabled) { border-color: var(--ink); }
.stepper__ctrl button:disabled { opacity: .35; cursor: not-allowed; }
.stepper__ctrl .icon { width: 16px; height: 16px; }
.stepper__ctrl input { width: 36px; text-align: center; border: 0; font-weight: 800; font-size: 1.05rem; background: transparent; -moz-appearance: textfield; }
.stepper__ctrl input::-webkit-outer-spin-button, .stepper__ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* option cards (radio / checkbox) */
.option-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .option-grid--2 { grid-template-columns: repeat(2, 1fr); } .option-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__box { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--surface); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.option:hover .option__box { border-color: var(--muted); }
.option input:checked + .option__box { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: #fffefb; }
.option input:focus-visible + .option__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.option__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.option__title { font-weight: 800; display: flex; align-items: center; gap: 10px; }
.option__title .icon { width: 20px; height: 20px; color: var(--accent); }
.option__price { font-weight: 800; white-space: nowrap; font-size: var(--fs-sm); }
.option__price small { font-weight: 600; color: var(--muted); }
.option__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.option__tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: all .2s; }
.option--check .option__tick { border-radius: 7px; }
.option__tick .icon { width: 14px; height: 14px; color: #fff; opacity: 0; }
.option input:checked + .option__box .option__tick { background: var(--ink); border-color: var(--ink); }
.option input:checked + .option__box .option__tick .icon { opacity: 1; }
.option__media { display: flex; gap: 14px; align-items: center; }
.option__media img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }

/* ---------------------------------------------------------------- alerts / states */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; font-size: var(--fs-sm); font-weight: 600; }
.alert .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--info { background: var(--info-soft); color: var(--info); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }
.alert ul { margin: 6px 0 0 18px; font-weight: 500; }
.toast-stack { position: fixed; z-index: 150; left: 50%; top: calc(var(--header-h) + 12px); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: grid; gap: 10px; }
.toast-stack .alert { box-shadow: var(--shadow); animation: toastIn .4s var(--ease); background-color: var(--surface); border: 1px solid var(--line); }
.toast-stack .alert--success { color: var(--success); }
.toast-stack .alert--error { color: var(--danger); }
.toast-stack .alert--info { color: var(--info); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } }
.toast-stack .alert button { margin-left: auto; border: 0; background: transparent; color: inherit; padding: 0; }

.empty { text-align: center; padding: clamp(48px, 6vw, 96px) 24px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.empty__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; margin: 0 auto 18px; color: var(--accent); }
.empty__icon .icon { width: 32px; height: 32px; }
.empty h3 { font-size: 1.5rem; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 420px; margin: 0 auto 22px; }

.skeleton { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-lg); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.is-loading-results { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* ---------------------------------------------------------------- listing / filters */
.listing { display: grid; gap: 32px; }
@media (min-width: 1100px) { .listing { grid-template-columns: 290px minmax(0, 1fr); gap: 48px; align-items: start; } }
.filters { display: none; }
@media (min-width: 1100px) { .filters { display: block; position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; } }
.filters__group { padding-block: 20px; border-bottom: 1px solid var(--line); }
.filters__group:first-child { padding-top: 0; }
.filters__title { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.filters__options { display: grid; gap: 10px; }
.pill-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-option { position: relative; }
.pill-option input { position: absolute; opacity: 0; }
.pill-option span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.pill-option span .icon { width: 16px; height: 16px; }
.pill-option input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.results-bar__count { font-weight: 700; }
.results-bar__count span { color: var(--muted); font-weight: 500; }
.results-bar .select { min-height: 44px; width: auto; font-size: var(--fs-sm); font-weight: 700; }
.filter-toggle { display: inline-flex; }
@media (min-width: 1100px) { .filter-toggle { display: none; } }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.style-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; padding-bottom: 4px; }
.style-strip::-webkit-scrollbar { display: none; }
.style-strip .chip { flex: none; }
.style-strip .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* filter sheet (mobile) */
.sheet { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(10, 16, 13, .45); opacity: 0; transition: opacity .3s; }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; background: var(--bg); border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .38s var(--ease); display: flex; flex-direction: column; }
.sheet.is-open { pointer-events: auto; }
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); }
.sheet__head::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
.sheet__body { overflow-y: auto; padding: 8px var(--gutter) 20px; flex: 1; }
.sheet__foot { padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.sheet__foot .btn { flex: 1; }

/* pagination */
.pagination { display: flex; justify-content: center; margin-top: 48px; }
.pagination ul { display: flex; gap: 6px; list-style: none; flex-wrap: wrap; justify-content: center; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; font-size: var(--fs-sm); background: var(--surface); transition: all .15s; }
.pagination a:hover { border-color: var(--ink); }
.pagination .active a, .pagination .active span { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- booking wizard */
.checkout-header { position: sticky; top: 0; z-index: 90; background: rgba(251, 250, 247, .99); border-bottom: 1px solid var(--line); }
.checkout-header__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.secure-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--success); }
.secure-note .icon { width: 16px; height: 16px; }

.progress { display: flex; gap: 6px; list-style: none; counter-reset: step; margin: 28px 0 32px; overflow-x: auto; scrollbar-width: none; }
.progress::-webkit-scrollbar { display: none; }
.progress li { flex: 1; min-width: 44px; }
.progress__bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress__bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }
.progress li.is-done .progress__bar::after, .progress li.is-current .progress__bar::after { width: 100%; }
.progress li.is-current .progress__bar::after { background: var(--ink); }
.progress__label { display: none; margin-top: 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.progress li.is-current .progress__label, .progress li.is-done .progress__label { color: var(--ink); }
@media (min-width: 768px) { .progress__label { display: block; } }
.progress-mobile { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: -18px 0 18px; }
@media (min-width: 768px) { .progress-mobile { display: none; } }

.checkout { display: grid; gap: 28px; padding-bottom: 120px; }
@media (min-width: 1024px) { .checkout { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; padding-bottom: 80px; } }
.step h1, .step h2.step__title { font-size: var(--fs-2xl); margin-bottom: 8px; }
.step__intro { color: var(--ink-2); margin-bottom: 28px; }
.step__section + .step__section { margin-top: 36px; }
.step__section > h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 800; letter-spacing: 0; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.step__section > h3 .icon { width: 20px; height: 20px; color: var(--accent); }
.step__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.js .step:not(.is-active) { display: none; }
.js .step.is-active { animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } }
html:not(.js) .step + .step { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
html:not(.js) .step__nav [data-step-next], html:not(.js) .step__nav [data-step-prev] { display: none; }

.summary { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.summary__head { display: flex; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.summary__head img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex: none; }
.summary__head h3 { font-size: 1.15rem; }
.summary__head p { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.summary__body { padding: 18px; display: grid; gap: 12px; font-size: var(--fs-sm); }
.summary__row { display: flex; justify-content: space-between; gap: 16px; }
.summary__row span { color: var(--ink-2); }
.summary__row strong { text-align: right; }
.summary__row--muted span, .summary__row--muted strong { color: var(--muted); font-weight: 500; }
.summary__divider { height: 1px; background: var(--line); margin: 4px 0; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px; background: var(--sand); }
.summary__total strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; }
.summary__foot { padding: 14px 18px 18px; font-size: var(--fs-xs); color: var(--muted); display: grid; gap: 8px; }
.summary__foot div { display: flex; gap: 8px; align-items: center; }
.summary__foot .icon { width: 16px; height: 16px; color: var(--success); }
.summary.is-updating .summary__total strong { opacity: .5; }
.summary-desktop { display: none; }
@media (min-width: 1024px) { .summary-desktop { display: block; } }

.checkout-bar { position: fixed; z-index: 85; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .2); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .checkout-bar { display: none; } }
.checkout-bar__total { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; }
.checkout-bar__total small { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.checkout-bar__total small .icon { width: 14px; height: 14px; }
.checkout-bar__total strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }

.review-block { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.review-block + .review-block { margin-top: 12px; }
.review-block__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; }
.review-block__head button { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.review-block__body { padding: 14px 18px; display: grid; gap: 8px; font-size: var(--fs-sm); }

/* payment */
.pay-methods { display: grid; gap: 12px; }
.test-banner { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--warning-soft), var(--warning-soft) 10px, #fff7e8 10px, #fff7e8 20px); color: var(--warning); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 20px; border: 1px solid #f0ddb5; }
.test-banner .icon { width: 18px; height: 18px; }
.method-fields { margin-top: 12px; display: none; }
.option input:checked ~ .method-fields { display: block; }
.instructions { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.instructions div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: var(--fs-sm); background: var(--surface); }
.instructions div:nth-child(odd) { background: var(--sand); }
.instructions span { color: var(--muted); }
.instructions strong { text-align: right; word-break: break-word; }
.pending-pulse { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px; position: relative; }
.pending-pulse::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent); opacity: .3; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { transform: scale(.85); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
.pending-pulse .icon { width: 34px; height: 34px; }

/* confirmation */
.confirm-hero { text-align: center; padding: clamp(40px, 6vw, 72px) 0 32px; }
.confirm-hero__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; margin: 0 auto 24px; animation: pop .6s var(--ease); box-shadow: 0 0 0 12px var(--success-soft); }
.confirm-hero__icon--pending { background: var(--warning); box-shadow: 0 0 0 12px var(--warning-soft); }
.confirm-hero__icon--cancelled { background: var(--danger); box-shadow: 0 0 0 12px var(--danger-soft); }
.confirm-hero__icon .icon { width: 40px; height: 40px; stroke-width: 2.5; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
.confirm-hero h1 { font-size: var(--fs-3xl); font-weight: 400; }
.confirm-hero p { color: var(--ink-2); max-width: 540px; margin: 14px auto 0; font-size: var(--fs-md); }
.ref-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 20px; border-radius: 999px; background: var(--surface); border: 1px dashed var(--line-2); font-weight: 800; letter-spacing: .06em; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ticket__media { position: relative; aspect-ratio: 16 / 6; }
.ticket__media img { width: 100%; height: 100%; object-fit: cover; }
.ticket__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .65)); }
.ticket__media div { position: absolute; left: 24px; bottom: 20px; right: 24px; color: #fff; z-index: 2; }
.ticket__media h2 { font-size: var(--fs-xl); }
.ticket__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .ticket__grid { grid-template-columns: repeat(4, 1fr); } }
.ticket__grid > div { background: var(--surface); padding: 18px 20px; }
.ticket__grid dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ticket__grid dd { margin: 4px 0 0; font-weight: 700; }

.next-steps { display: grid; gap: 14px; list-style: none; counter-reset: ns; }
@media (min-width: 768px) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-steps li { counter-increment: ns; padding: 22px; border-radius: var(--r); background: var(--sand); }
.next-steps li::before { content: "0" counter(ns); display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); margin-bottom: 10px; }
.next-steps strong { display: block; margin-bottom: 4px; }
.next-steps p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------------------------------------------------------------- auth pages */
.auth { min-height: 100vh; display: grid; }
@media (min-width: 1024px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth__media { position: relative; display: none; color: #fff; isolation: isolate; overflow: hidden; }
@media (min-width: 1024px) { .auth__media { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; } }
.auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .7)); }
.auth__media blockquote { margin: 0; font-family: var(--font-display); font-size: 2rem; line-height: 1.25; max-width: 18ch; font-weight: 400; }
.auth__panel { display: flex; flex-direction: column; padding: 24px var(--gutter) 40px; }
.auth__form { width: 100%; max-width: 420px; margin: auto; padding-block: 40px; }
.auth__form h1 { font-size: var(--fs-2xl); margin-bottom: 8px; }
.auth__form > p { color: var(--ink-2); margin-bottom: 28px; }
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; margin: 8px 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- account */
.account { display: grid; gap: 28px; padding-block: 32px 80px; }
@media (min-width: 1024px) { .account { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-top: 48px; } }
.account-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.account-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .account-nav { flex-direction: column; position: sticky; top: calc(var(--header-h) + 24px); } }
.account-nav a, .account-nav button { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; border: 0; background: none; width: 100%; text-align: left; }
.account-nav a:hover, .account-nav button:hover { background: var(--sand); color: var(--ink); }
.account-nav a.is-active { background: var(--ink); color: #fff; }
.account-nav .icon { width: 18px; height: 18px; }
.account-head h1 { font-size: var(--fs-2xl); }
.account-head p { color: var(--ink-2); margin: 8px 0 0; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.stat span { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 500; margin-top: 6px; }
.trip-card { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .25s; }
.trip-card:hover { box-shadow: var(--shadow); }
@media (min-width: 700px) { .trip-card { grid-template-columns: 220px 1fr; } }
.trip-card__img { aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .trip-card__img { aspect-ratio: auto; } }
.trip-card__img img { width: 100%; height: 100%; object-fit: cover; }
.trip-card__body { padding: 20px 22px; display: grid; gap: 10px; }
.trip-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.trip-card h3 { font-size: 1.3rem; }
.trip-card__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.trip-card__meta span { display: inline-flex; gap: 6px; align-items: center; }
.trip-card__meta .icon { width: 16px; height: 16px; color: var(--muted); }
.trip-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.list-stack { display: grid; gap: 14px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; background: var(--bg); }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; overflow: hidden; background: radial-gradient(60% 50% at 90% 100%, rgba(224, 164, 88, .1), rgba(224, 164, 88, 0) 70%), radial-gradient(50% 60% at 0% 0%, rgba(14, 124, 123, .22), rgba(14, 124, 123, 0) 70%), #0b1c29; color: rgba(238, 242, 239, .72); padding-top: clamp(56px, 6vw, 88px); margin-top: auto; }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: #fff; }
.ft-cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft-cta__kicker { margin: 0; font-size: .95rem; font-weight: 600; color: #a7ece8; }
.ft-cta__kicker::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 14px; background: currentColor; }
body:not(.admin) .ft-cta__title { margin: 10px 0 0; max-width: 14ch; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: .95; color: #fff; }
.ft-grid { display: grid; gap: 40px; padding-block: clamp(44px, 5vw, 64px); }
@media (min-width: 640px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ft-grid { grid-template-columns: 1.3fr .8fr 1fr .9fr 1.3fr; gap: 40px; } }
.ft-brand .brand { color: #fff; }
.footer-brand .brand__logo, .ft-brand .brand__logo { --brand-teal: #5FC2BE; }
.ft-brand p { margin: 20px 0 0; max-width: 34ch; font-size: .9rem; line-height: 1.7; }
body:not(.admin) .ft-col h4 { margin: 0 0 18px; font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #7fd3cf; }
.ft-col ul { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; font-size: .92rem; }
.ft-col li a { position: relative; display: inline-block; }
.ft-col li a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: #E0A458; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.ft-col li a:hover::after { transform: scaleX(1); }
.ft-more { display: inline-flex !important; align-items: center; gap: 6px; color: #a7ece8; }
.ft-more .icon { width: 14px; height: 14px; }
.ft-contact { display: grid; gap: 10px; }
.ft-contact > * { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); font-size: .88rem; color: #fff; transition: background-color .25s, border-color .25s; }
.ft-contact a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.ft-contact span { grid-row: 1 / span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(95, 194, 190, .15); color: #7fd3cf; }
.ft-contact .icon { width: 17px; height: 17px; }
.ft-contact small { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.socials { display: flex; gap: 8px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); display: grid; place-items: center; transition: all .2s; }
.socials a:hover { background: #fff; color: #0b1c29; }
.socials .icon { width: 18px; height: 18px; }
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }
.ft-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ft-top { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ft-top__bird { width: 26px; height: 26px; margin: -4px 0; transition: transform .4s var(--ease); }
.ft-top__bird path { fill: #fff; transition: fill .25s; }
.ft-top__bird .ft-top__tail { fill: #5FC2BE; }
.ft-top:hover { background: #fff; color: #0b1c29 !important; }
.ft-top:hover .ft-top__bird { transform: translateY(-4px); }
.ft-top:hover .ft-top__bird path:first-child { fill: #0b1c29; }
.ft-top:hover .ft-top__bird .ft-top__tail { fill: var(--accent); }

/* giant wordmark: writes itself, the sun rises, the swallow lands */
.footer-wordmark { padding: 0 var(--gutter); user-select: none; }
.footer-wordmark svg { display: block; width: min(1180px, 100%); height: auto; margin: 0 auto -1%; overflow: visible; }
.fw-word { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fw-sun { fill: #E0A458; opacity: .55; }
.fw-bird path { fill: rgba(255, 255, 255, .55); }
.fw-bird .fw-tail { fill: rgba(95, 194, 190, .6); }
.fw-line { font: 700 3.2px var(--font-body); letter-spacing: .5px; fill: rgba(255, 255, 255, .35); }
.footer-wordmark.is-armed .fw-word { stroke-dashoffset: 1; }
.footer-wordmark.is-armed .fw-sun { opacity: 0; transform: translateY(8px); }
.footer-wordmark.is-armed .fw-bird { opacity: 0; translate: -60px 26px; }
.footer-wordmark.is-armed .fw-line { opacity: 0; }
.footer-wordmark.is-drawn .fw-word { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.6, 0, .3, 1); }
.footer-wordmark.is-drawn .fw-sun { opacity: .55; transform: none; transition: opacity 1s 1.8s, transform 1.2s 1.8s var(--ease); }
.footer-wordmark.is-drawn .fw-bird { opacity: 1; translate: 0 0; transition: opacity .6s 2.2s, translate 1.3s 2.2s cubic-bezier(.2, .7, .2, 1); }
.footer-wordmark.is-drawn .fw-line { opacity: 1; transition: opacity 1s 2.9s; }
@media (prefers-reduced-motion: reduce) { .footer-wordmark * { transition: none !important; } }

/* ---------------------------------------------------------------- misc pages */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } }
.split__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.stat-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.stat-inline strong { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.stat-inline span { font-size: var(--fs-sm); color: var(--muted); }
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.contact-card { display: flex; gap: 16px; padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.contact-card .why-item__icon { margin: 0; width: 48px; height: 48px; }
.contact-card strong { display: block; }
.legal h2 { font-size: var(--fs-lg); margin: 36px 0 12px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 20px; margin-bottom: 1em; }
.credit-list { columns: 1; column-gap: 32px; font-size: var(--fs-sm); }
@media (min-width: 900px) { .credit-list { columns: 2; } }
.credit-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); list-style: none; }

/* ---------------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.center { text-align: center; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }
.w-100 { width: 100%; }
.nowrap { white-space: nowrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Calm Coast theme layer — public site only (admin keeps its own theme)
   ========================================================================== */
body:not(.admin) { background: var(--bg); letter-spacing: .005em; }
body:not(.admin) h1, body:not(.admin) h2, body:not(.admin) h3, body:not(.admin) h4 { font-weight: 600; letter-spacing: -.005em; font-variation-settings: normal; color: var(--ink); }
body:not(.admin) h1 em, body:not(.admin) h2 em, .gold-text { font-style: italic; color: var(--accent); }
body:not(.admin) ::selection { background: var(--accent); color: #fff; }
body:not(.admin) :focus-visible { outline-color: var(--accent); }

/* eyebrow: thin accent rule + wide tracking */
body:not(.admin) .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .28em; font-size: .7rem; }
body:not(.admin) .eyebrow::before { width: 32px; height: 2px; background: var(--accent); }
body:not(.admin) .section-head h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; }
body:not(.admin) .lead { color: var(--ink-2); }

/* sections */
body:not(.admin) .section--sand { background: var(--sand); }
body:not(.admin) .section--dark { background: var(--forest); color: #eaf1f5; }
body:not(.admin) .section--dark h2, body:not(.admin) .section--dark h3 { color: #fff; }
body:not(.admin) .section--dark .eyebrow { color: #7fd3cf; }
body:not(.admin) .section--dark .eyebrow::before { background: #7fd3cf; }
body:not(.admin) .section--dark .lead, body:not(.admin) .section--dark .why-item p { color: rgba(234, 241, 245, .78); }

/* buttons: crisp, uppercase */
body:not(.admin) .btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; }
body:not(.admin) .btn--accent, body:not(.admin) .btn--dark { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
body:not(.admin) .btn--accent:hover, body:not(.admin) .btn--dark:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); box-shadow: 0 12px 28px -12px rgba(14, 124, 123, .6); }
body:not(.admin) .btn--outline:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); }
body:not(.admin) .btn--sm { font-size: .68rem; }
body:not(.admin) .link-arrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; }
body:not(.admin) .link { color: var(--accent); }

/* chips, badges, pills */
body:not(.admin) .badge { border-radius: 4px; text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }
body:not(.admin) .badge--accent { background: var(--accent); color: #fff; }
body:not(.admin) .chip, body:not(.admin) .pill-option span, body:not(.admin) .pagination a, body:not(.admin) .pagination span { border-radius: 4px; }
body:not(.admin) .chip:hover { border-color: var(--accent); color: var(--accent); }
body:not(.admin) .style-strip .chip.is-active,
body:not(.admin) .pill-option input:checked + span,
body:not(.admin) .pagination .active a, body:not(.admin) .pagination .active span,
body:not(.admin) .account-nav a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* header: white glass; transparent with white text only over the home hero */
body:not(.admin) .site-header { background: rgba(255, 255, 255, .99); border-bottom-color: var(--line); }
body:not(.admin) .nav__link { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 600; border-radius: 0; position: relative; }
.site-header .brand { flex: none; }
/* mid-size desktops: tighter menu so the logo and every label fit on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
  body:not(.admin) .nav__link { padding: 10px 7px; letter-spacing: .1em; }
  .site-header__inner { gap: 12px; }
  .site-header .nav { margin-left: 4px; }
}
@media (min-width: 1024px) and (max-width: 1099px) { .header-actions .btn { display: none; } }
body:not(.admin) .nav__link:hover, body:not(.admin) .nav__item.is-open > .nav__link { background: transparent; color: var(--accent); }
body:not(.admin) .nav__link.is-active { color: var(--accent); }
body:not(.admin) .nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--accent); }
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link:hover { background: transparent; color: #9be3df; }
body:not(.admin) .brand { font-weight: 700; font-size: 1.75rem; }
body:not(.admin) .subnav a.is-active { border-color: var(--accent); color: var(--accent); }

/* cards */
body:not(.admin) .pkg-card:hover { border-color: rgba(14, 124, 123, .35); }
body:not(.admin) .pkg-card__title { font-size: 1.5rem; }
body:not(.admin) .price__value { color: var(--ink); font-weight: 700; }
body:not(.admin) .dest-card__name { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); color: #fff; }
body:not(.admin) .dest-card__cta { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; }
body:not(.admin) .dest-card__arrow { background: #fff; color: var(--accent); border-radius: 4px; }
body:not(.admin) .exp-card__name, body:not(.admin) .story h3, body:not(.admin) .cta-band h2, body:not(.admin) .page-hero h1, body:not(.admin) .ticket__media h2, body:not(.admin) .auth__media blockquote { color: #fff; }
body:not(.admin) .exp-card__name { font-size: 1.65rem; }
body:not(.admin) .exp-card__icon { border-radius: 4px; }
body:not(.admin) .why-item__icon, body:not(.admin) .activity__icon, body:not(.admin) .empty__icon { border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
body:not(.admin) .section--dark .why-item__icon { background: rgba(127, 211, 207, .14); color: #7fd3cf; }
body:not(.admin) .why-item h3 { font-size: 1.4rem; }
body:not(.admin) .quote-card blockquote { font-size: 1.4rem; font-style: italic; }
body:not(.admin) .quote-card .icon--quote { color: var(--accent); }
body:not(.admin) .avatar { background: var(--accent); color: #fff; }
body:not(.admin) .review__head .avatar { background: var(--sand-2); color: var(--ink); }
body:not(.admin) .scroller-nav button { border-radius: 4px; }
body:not(.admin) .scroller-nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
body:not(.admin) .story__kicker { letter-spacing: .26em; }
body:not(.admin) .cta-band .eyebrow { color: #9be3df !important; }
body:not(.admin) .todo__num, body:not(.admin) .next-steps li::before { color: var(--accent); font-style: italic; }
body:not(.admin) .month { border-radius: 4px; }
body:not(.admin) .month.is-best { background: var(--accent); color: #fff; }
body:not(.admin) .tabs, body:not(.admin) .tabs button { border-radius: 4px; }
body:not(.admin) .tl-day[open] .tl-day__marker, body:not(.admin) .tl-day:hover .tl-day__marker { background: var(--accent); border-color: var(--accent); color: #fff; }
body:not(.admin) .tl-day__title { font-size: 1.5rem; }
body:not(.admin) .review-score strong { color: var(--accent); }

/* forms */
body:not(.admin) .input, body:not(.admin) .select, body:not(.admin) .textarea, body:not(.admin) .stepper { border-radius: 6px; }
body:not(.admin) .input:focus, body:not(.admin) .select:focus, body:not(.admin) .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
body:not(.admin) .option__box { border-radius: 8px; }
body:not(.admin) .option input:checked + .option__box { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #f5fbfb; }
body:not(.admin) .option input:checked + .option__box .option__tick { background: var(--accent); border-color: var(--accent); }
body:not(.admin) .stepper__ctrl button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
body:not(.admin) .progress__bar::after, body:not(.admin) .progress li.is-current .progress__bar::after { background: var(--accent); }
body:not(.admin) .summary__total strong { color: var(--accent); }
body:not(.admin) .ref-pill { border-color: var(--accent); color: var(--accent); }

/* trip search: white floating bar */
body:not(.admin) .trip-search { border: 1px solid var(--line); border-radius: var(--r); }
body:not(.admin) .trip-search__field label { color: var(--accent); letter-spacing: .16em; font-size: .62rem; }
body:not(.admin) .trip-search__field > .icon { color: var(--accent); }
@media (min-width: 1024px) { body:not(.admin) .trip-search { border-radius: 8px; } body:not(.admin) .trip-search__field { border-radius: 6px; } }

/* inner page heroes: framed, like the home hero */
body:not(.admin) .page-hero:not(.page-hero--plain) { margin-inline: clamp(8px, 1.4vw, 20px); border-radius: 0 0 var(--r-xl) var(--r-xl); }
body:not(.admin) .page-hero h1 { font-size: clamp(2.8rem, 1.8rem + 4.4vw, 6rem); line-height: .98; }
body:not(.admin) .page-hero--plain { background: linear-gradient(180deg, #eef6f7, #fff); border-bottom: 1px solid var(--line); }
body:not(.admin) .page-hero--plain h1 { color: var(--ink); }

/* footer */

/* overlay header stays transparent with white text over photo banners */
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) { background: transparent; border-color: transparent; }

/* ==========================================================================
   Services: home tiles, services index cards, service page helpers
   ========================================================================== */

.svc-tiles { display: grid; gap: 14px; }
@media (min-width: 640px) { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-tiles { grid-template-columns: repeat(4, 1fr); } .svc-tiles > :first-child { grid-row: span 2; } }
.svc-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.svc-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(14, 124, 123, .35); }
.svc-tile__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; transition: background-color .3s, color .3s; }
.svc-tile:hover .svc-tile__icon { background: var(--accent); color: #fff; }
.svc-tile__icon .icon { width: 26px; height: 26px; }
.svc-tile__num { position: absolute; top: 22px; right: 24px; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--line-2); }
.svc-tile strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.15; }
.svc-tile__text { font-size: var(--fs-sm); color: var(--ink-2); }
.svc-tile__go { margin-top: auto; padding-top: 10px; color: var(--accent); }
.svc-tile__go .icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.svc-tile:hover .svc-tile__go .icon { transform: translate(3px, -3px); }
@media (min-width: 1024px) {
  .svc-tiles > :first-child { background: var(--forest); color: #fff; border-color: transparent; justify-content: flex-end; }
  .svc-tiles > :first-child .svc-tile__text { color: rgba(255, 255, 255, .78); }
  .svc-tiles > :first-child .svc-tile__icon { background: rgba(127, 211, 207, .16); color: #7fd3cf; }
  .svc-tiles > :first-child .svc-tile__go { color: #7fd3cf; margin-top: 0; }
  .svc-tiles > :first-child strong { font-size: 2rem; color: #fff; }
}

.svc-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__body { position: relative; padding: 34px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card__icon { position: absolute; top: -28px; left: 24px; width: 56px; height: 56px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(14, 124, 123, .7); }
.svc-card__icon .icon { width: 26px; height: 26px; }
.svc-card__num { position: absolute; top: 16px; right: 24px; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--line-2); }
.svc-card h2 { font-size: 1.75rem; }
.svc-card p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.svc-card__cta { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.svc-card__cta .icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.svc-card:hover .svc-card__cta .icon { transform: translateX(4px); }

.svc-mini { list-style: none; display: grid; gap: 2px; }
.svc-mini a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-inline: -10px; border-radius: 8px; font-weight: 600; font-size: var(--fs-sm); transition: background-color .15s, color .15s; }
.svc-mini a:hover { background: var(--sand); color: var(--accent); }
.svc-mini .icon { width: 18px; height: 18px; color: var(--accent); }
.page-hero__facts .btn { min-height: 48px; }
@media (min-width: 1024px) { .two-col > aside .booking-card { top: calc(var(--header-h) + 24px); } }
@media (min-width: 1100px) {
  .svc-grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; }
  .svc-grid > :last-child:nth-child(3n+1) .svc-card__media { flex: 0 0 50%; aspect-ratio: auto; min-height: 300px; }
  .svc-grid > :last-child:nth-child(3n+1) .svc-card__body { justify-content: center; padding: 40px 48px; }
  .svc-grid > :last-child:nth-child(3n+1) .svc-card__icon { position: static; margin-bottom: 8px; }
  .svc-grid > :last-child:nth-child(3n+1) h2 { font-size: 2.4rem; }
  .svc-grid > :last-child:nth-child(3n+1) .svc-card__cta { margin-top: 10px; }
}
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link.is-active { color: #9be3df; }
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link.is-active::after { background: #9be3df; }

/* ==========================================================================
   Home — "Horizon": bright photo hero, tabbed booking box, editorial sections
   ========================================================================== */
.btn--glass { --btn-bg: rgba(255, 255, 255, .22); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55);  }
body:not(.admin) .btn--glass:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.hx { --cw: 132px; --ch: 188px; --gap: 12px; position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--forest); }
@media (min-width: 900px) { .hx { --cw: 170px; --ch: 244px; --gap: 16px; min-height: clamp(720px, 100svh, 960px); } }
@media (min-width: 1400px) { .hx { --cw: 186px; --ch: 268px; --gap: 18px; } }
.hx__slides, .hx__slide { position: absolute; inset: 0; }
.hx__slides { z-index: -2; }
.hx__slide { opacity: 0; transition: opacity .9s var(--ease); }
.hx__slide.is-active { opacity: 1; }
.hx__slide img, .hx__open img { width: 100%; height: 100%; object-fit: cover; }
/* slow zoom + drift on the live backdrop; resets only after it has faded out */
.hx__slide img { transform: scale(1); transition: transform 0s linear .95s; will-change: transform; }
.hx.is-ready .hx__slide.is-active img { transform: scale(1.14) translate3d(-2%, -1%, 0); transition: transform 9s linear; }
.hx.is-ready .hx__slide:nth-child(even).is-active img { transform: scale(1.14) translate3d(2%, 1%, 0); }
.hx__open { position: absolute; overflow: hidden; border-radius: 18px; transition: left .9s cubic-bezier(.7, 0, .2, 1), top .9s cubic-bezier(.7, 0, .2, 1), width .9s cubic-bezier(.7, 0, .2, 1), height .9s cubic-bezier(.7, 0, .2, 1), border-radius .9s cubic-bezier(.7, 0, .2, 1); }
.hx::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(8, 24, 36, .5) 0%, rgba(8, 24, 36, 0) 24%),
  linear-gradient(90deg, rgba(8, 24, 36, .7) 0%, rgba(8, 24, 36, .32) 45%, rgba(8, 24, 36, .08) 70%),
  linear-gradient(0deg, rgba(8, 24, 36, .65) 0%, rgba(8, 24, 36, 0) 38%); }

/* left: location, big condensed title, line, actions */
.hx__inner { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 44px); padding-bottom: calc(var(--ch) + 244px); }
@media (min-width: 900px) { .hx__inner { min-height: inherit; display: flex; flex-direction: column; justify-content: center; padding-bottom: 170px; } }
.hx__copy { display: grid; }
@media (min-width: 900px) { .hx__copy { max-width: 46%; } }
.hx__text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.hx__text.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .25s; }
.hx__where { font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .92); }
.hx__where::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 14px; background: #fff; }
body:not(.admin) .hx__title { margin: 10px 0 0; color: #fff; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(3.4rem, 1.6rem + 6vw, 7.2rem); line-height: .92; letter-spacing: .005em; text-shadow: 0 6px 30px rgba(0, 0, 0, .25); }
.hx__line { max-width: 440px; margin: 20px 0 28px; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.65; color: rgba(255, 255, 255, .88); }
.hx__actions { display: flex; align-items: center; gap: 14px; }
.hx__round { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(14, 124, 123, .9); transition: background-color .25s, transform .25s; }
.hx__round:hover { background: var(--accent-2); transform: scale(1.06); }
.hx__round .icon { width: 22px; height: 22px; }
.hx__pill { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; transition: background-color .25s, color .25s, border-color .25s; }
.hx__pill:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hx__pill .icon { width: 16px; height: 16px; }

/* right: row of upcoming destination cards */
.hx__cards { position: absolute; z-index: 3; left: var(--gutter); right: 0; bottom: 196px; height: var(--ch); }
@media (min-width: 900px) { .hx__cards { left: 52%; bottom: 190px; } }
.hx__card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #0b1b28; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); transform: translateX(calc(var(--k, 0) * (var(--cw) + var(--gap)))); transition: transform .8s cubic-bezier(.7, 0, .2, 1), opacity .5s; }
.hx__card img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); animation: hxDrift 7s ease-in-out infinite alternate; }
.hx__card:nth-child(2n) img { animation-delay: -2.5s; animation-direction: alternate-reverse; }
.hx__card:nth-child(3n) img { animation-delay: -4.5s; }
.hx__card:hover img { scale: 1.07; }
@keyframes hxDrift { from { transform: scale(1.04) translate3d(-3%, 0, 0); } to { transform: scale(1.16) translate3d(3%, -2%, 0); } }
.hx__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 15, 24, .78) 0%, rgba(5, 15, 24, 0) 55%); }
.hx__card-text { position: absolute; z-index: 2; left: 16px; right: 14px; bottom: 16px; display: grid; gap: 4px; }
.hx__card-text small { font-size: .66rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.hx__card-text small::before { content: ""; display: block; width: 14px; height: 2px; margin-bottom: 8px; background: #fff; }
.hx__card-text strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.12rem; line-height: 1.05; text-transform: uppercase; }
@media (min-width: 900px) { .hx__card-text strong { font-size: 1.32rem; } }
.hx__card.is-current { opacity: 0; pointer-events: none; }
.hx__card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* bottom: arrows, progress line, slide number */
.hx__controls { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 116px; display: flex; align-items: center; gap: 14px; }
@media (min-width: 900px) { .hx__controls { left: 52%; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); } }
.hx__controls button { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, .65); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.hx__controls button:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hx__controls button .icon { width: 22px; height: 22px; }
.hx__line-track { flex: 1; height: 2px; margin-left: 10px; background: rgba(255, 255, 255, .3); }
.hx__line-track i { display: block; width: 0; height: 100%; background: #fff; }
.hx.is-playing .hx__line-track i { animation: hxProgress var(--interval, 7s) linear forwards; }
@keyframes hxProgress { to { width: 100%; } }
.hx__num { font-family: "Oswald", var(--font-poster); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .hx__card, .hx__text, .hx__open, .hx__slide img { transition: none !important; } .hx__slide img, .hx__card img { animation: none !important; transform: none !important; } }

/* booking box */
.book-wrap { position: relative; z-index: 5; margin-top: -86px; }
.book-box { background: #fff; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(15, 36, 51, .4), 0 2px 8px rgba(15, 36, 51, .06); padding: 6px clamp(14px, 2vw, 26px) clamp(16px, 2vw, 26px); }
.book-box__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.book-box__tabs::-webkit-scrollbar { display: none; }
.book-box__tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 16px 16px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-weight: 600; font-size: .92rem; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.book-box__tabs button .icon { width: 18px; height: 18px; }
.book-box__tabs button:hover { color: var(--ink); }
.book-box__tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.book-box__panel { display: grid; gap: 12px; padding-top: 18px; }
.book-box__panel[hidden] { display: none; }
@media (min-width: 640px) { .book-box__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .book-box__go { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .book-box__panel { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch; } .book-box__go { grid-column: auto; } }
.bf { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: text; transition: border-color .2s, box-shadow .2s; }
.bf:hover { border-color: var(--line-2); }
.bf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bf > span { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bf > span .icon { width: 14px; height: 14px; color: var(--accent); }
.bf select, .bf input { width: 100%; min-width: 0; border: 0; padding: 2px 0; background: transparent; font: inherit; font-size: .98rem; font-weight: 600; color: var(--ink); outline: none; }
.bf input::placeholder { color: #9aa7b3; font-weight: 500; }
body:not(.admin) .book-box__go { min-height: 62px; border-radius: 14px; padding: 0 28px; }

.trust { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding: 30px 4px 0; margin: 0; }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust li { display: flex; align-items: center; gap: 14px; font-size: .84rem; color: var(--muted); line-height: 1.4; }
.trust strong { display: block; color: var(--ink); font-size: .95rem; }
.trust__icon { flex: 0 0 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.trust__icon .icon { width: 20px; height: 20px; }

/* ---------- home sections: same language as the hero (dash kicker, condensed uppercase titles, round controls) ---------- */
.hm-sec { padding: clamp(72px, 9vw, 128px) 0; }
.hm-sand { background: var(--sand); }
.hm-dark { background: var(--forest); color: #fff; }
.hm-kicker { font-size: .95rem; font-weight: 600; color: var(--accent); }
.hm-kicker::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 14px; background: currentColor; }
.hm-dark .hm-kicker { color: #a7ece8; }
body:not(.admin) .hm h2 { margin-top: 10px; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem); line-height: .95; letter-spacing: .005em; color: var(--ink); }
body:not(.admin) .hm-dark h2 { color: #fff; }
.hm-lead { max-width: 520px; margin-top: 18px; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.hm-dark .hm-lead { color: rgba(255, 255, 255, .78); }
.hm-lead--side { max-width: 340px; margin: 0; font-size: .95rem; }
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 40px; }
.hm-head__side { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.hm-arrows { display: flex; gap: 10px; }
.hm-arrows button { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: all .25s; }
.hm-arrows button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-arrows .icon { width: 22px; height: 22px; }
.hm-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transition: all .25s; }
.hm-btn:hover { background: var(--ink); color: #fff; }
.hm-btn .icon { width: 16px; height: 16px; }
.hx__pill--solid { background: #fff; border-color: #fff; color: var(--ink); }
.hx__pill--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* destinations rail */
.region-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.region-tabs button { padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .2s; }
.region-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.region-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail { --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 6px var(--edge) 18px; scrollbar-width: none; }
@media (min-width: 1024px) { .rail { grid-auto-columns: 280px; gap: 22px; } }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.place { position: relative; display: block; height: 380px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; background: var(--forest); box-shadow: 0 24px 40px -26px rgba(15, 36, 51, .55); animation: placeIn .5s var(--ease) both; }
@media (min-width: 1024px) { .place { height: 420px; } }
.place[hidden] { display: none; }
@keyframes placeIn { from { opacity: 0; transform: translateY(14px); } }
.place__media { position: absolute; inset: 0; z-index: -2; }
.place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.place:hover .place__media img { transform: scale(1.07); }
.place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 15, 24, .82) 0%, rgba(5, 15, 24, .2) 45%, rgba(5, 15, 24, 0) 65%); }
.place__count { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(11, 34, 51, .55); border: 1px solid rgba(255, 255, 255, .35);  font-size: .72rem; font-weight: 700; }
.place__body { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 6px; }
.place__body small { font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.place__body small::before { content: ""; display: block; width: 16px; height: 2px; margin-bottom: 10px; background: #fff; }
.place__body strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.place__tag { font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.place--all { background: var(--accent); box-shadow: none; }
.place--all::after { display: none; }
.place--all .place__body { top: 26px; bottom: auto; }
.place--all .place__body strong { font-size: 2.4rem; }
.place__all-go { position: absolute; left: 20px; bottom: 22px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--accent); transition: transform .3s var(--ease); }
.place--all:hover .place__all-go { transform: translateX(6px); }

/* services: expanding photo panels on dark; one is open, the rest are slim strips with a vertical name */
.xp { display: flex; gap: 12px; height: clamp(460px, 62vh, 580px); }
.xp__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 22px; color: #fff; background: #0b1b28; transition: flex-grow .75s cubic-bezier(.7, 0, .2, 1), box-shadow .4s; }
.xp__item.is-open { flex-grow: 5.5; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
.xp__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.75); transform: scale(1.12); transition: transform 1.4s var(--ease), filter .7s; }
.xp__item.is-open img { filter: none; transform: scale(1.02); }
.xp__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 15, 24, .92) 0%, rgba(5, 15, 24, .35) 50%, rgba(5, 15, 24, .45) 100%); transition: opacity .7s; }
.xp__item.is-open::after { opacity: .85; }
.xp__num { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-family: "Oswald", var(--font-poster); font-size: 1rem; font-weight: 500; letter-spacing: .1em; color: rgba(255, 255, 255, .7); transition: left .6s var(--ease), transform .6s var(--ease), color .4s; }
.xp__item.is-open .xp__num { left: 26px; transform: none; color: #E0A458; }
.xp__name { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; transition: opacity .3s; }
.xp__item.is-open .xp__name { opacity: 0; }
.xp__body { position: absolute; left: 28px; bottom: 28px; width: min(440px, calc(100% - 56px)); display: grid; gap: 10px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.xp__item.is-open .xp__body { opacity: 1; transform: none; transition: opacity .5s .3s, transform .6s .3s var(--ease); }
.xp__body strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: .95; text-transform: uppercase; }
.xp__body > span:not(.xp__go) { font-size: .98rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.xp__go { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 13px 22px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background-color .25s, color .25s; }
.xp__go .icon { width: 16px; height: 16px; }
.xp__item:hover .xp__go { background: var(--accent); color: #fff; }
.xp__item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.xp__dots { display: none; }
@media (max-width: 767px) {
  /* phones: a photo tile grid; the first service is a wide featured tile, the rest are square tiles two per row */
  .xp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto; }
  .xp__item, .xp__item.is-open { height: auto; aspect-ratio: 1; box-shadow: none; }
  .xp__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
  .xp__item img, .xp__item.is-open img { filter: none; transform: none; }
  .xp__item::after, .xp__item.is-open::after { opacity: 1; background: linear-gradient(0deg, rgba(5, 15, 24, .9) 0%, rgba(5, 15, 24, .25) 60%, rgba(5, 15, 24, .15) 100%); }
  .xp__num, .xp__item.is-open .xp__num { top: 14px; left: 14px; transform: none; font-size: .85rem; color: #E0A458; }
  .xp__name { display: none; }
  .xp__body, .xp__item.is-open .xp__body { left: 14px; right: 14px; bottom: 14px; width: auto; gap: 6px; opacity: 1; transform: none; pointer-events: none; transition: none; }
  .xp__body strong { font-size: 1.15rem; line-height: 1.02; }
  .xp__body > span:not(.xp__go), .xp__go { display: none; }
  .xp__item::before { content: ""; position: absolute; top: 12px; right: 12px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2233' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / 14px no-repeat; }
  .xp__item:first-child .xp__num { font-size: 1rem; left: 20px; top: 18px; }
  .xp__item:first-child .xp__body { left: 20px; right: 20px; bottom: 20px; }
  .xp__item:first-child .xp__body strong { font-size: 1.9rem; }
  .xp__item:first-child .xp__body > span:not(.xp__go) { display: block; font-size: .9rem; }
  .xp__item:first-child .xp__go { display: inline-flex; padding: 11px 18px; }
  .xp__item:first-child::before { display: none; }
  .xp__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .xp__item, .xp__item img, .xp__body, .xp__num { transition: none; } }

/* featured trips: three tall photo cards */
.trips { display: grid; gap: 20px; }
@media (min-width: 768px) { .trips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.trip { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; background: var(--forest); }
@media (min-width: 1024px) { .trip { min-height: 540px; } }
.trip__media { position: absolute; inset: 0; z-index: -2; }
.trip__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.trip:hover .trip__media img { transform: scale(1.06); }
.trip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 15, 24, .88) 0%, rgba(5, 15, 24, .25) 50%, rgba(5, 15, 24, .1) 100%); }
.trip__top { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; }
.trip__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(11, 34, 51, .55); border: 1px solid rgba(255, 255, 255, .35);  font-size: .72rem; font-weight: 700; }
.trip__chip .icon { width: 14px; height: 14px; }
.trip__chip--save { background: var(--accent); border-color: var(--accent); }
.trip__body { display: grid; gap: 8px; padding: 24px; }
.trip__body small { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .88); }
.trip__body small .icon { width: 14px; height: 14px; color: #f5c35b; fill: #f5c35b; }
.trip__body > strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); line-height: 1; text-transform: uppercase; }
.trip__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); }
.trip__price { font-size: .82rem; color: rgba(255, 255, 255, .82); }
.trip__price b { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.5rem; color: #fff; margin: 0 2px; }
.trip__go { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--accent); transition: transform .3s var(--ease), background-color .25s, color .25s; }
.trip__go .icon { width: 18px; height: 18px; }
.trip:hover .trip__go { transform: rotate(45deg); background: var(--accent); color: #fff; }

/* why us + how it works */
.why-x { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .why-x { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; } }
.why-x__media { position: relative; }
.why-x__media img { width: 100%; aspect-ratio: 4 / 5; max-height: 660px; object-fit: cover; border-radius: 26px; }
.why-x__card { position: absolute; left: 18px; bottom: 18px; display: grid; gap: 4px; padding: 18px 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); }
@media (min-width: 1200px) { .why-x__card { left: -28px; bottom: 40px; } }
.why-x__card strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2.8rem; line-height: 1; color: var(--ink); }
.why-x__card small { font-size: 1.1rem; color: var(--muted); }
.why-x__card > span:last-child { font-size: .8rem; color: var(--muted); }
.how { list-style: none; display: grid; gap: 24px; margin: 34px 0 0; padding: 0; }
.how li { display: flex; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
.how li:last-child { border-bottom: 0; padding-bottom: 0; }
.how__num { flex: 0 0 58px; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--accent); }
body:not(.admin) .how h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; margin: 4px 0 6px; }
.how p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.perks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; }
.perks li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; }
.perks .icon { width: 16px; height: 16px; color: var(--accent); }

/* testimonials */
.hm .quote-card { border-radius: 20px; gap: 16px; }
body:not(.admin) .hm .quote-card blockquote { font-family: var(--font-body); font-style: normal; font-size: 1rem; line-height: 1.75; color: var(--ink-2); }
.hm .quote-card__who a { color: var(--accent); font-weight: 600; }

/* closing CTA: a boarding pass the visitor fills in, over a photo */
.pass-sec { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(90px, 10vw, 150px) 0; }
.pass-sec > picture, .pass-sec > img { position: absolute; inset: 0; z-index: -2; }
.pass-sec img { width: 100%; height: 100%; object-fit: cover; }
.pass-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 24, 36, .82) 0%, rgba(8, 24, 36, .55) 50%, rgba(8, 24, 36, .3) 100%); }
.pass-sec__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1100px) { .pass-sec__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.pass-sec .hm-kicker { color: #a7ece8; }
body:not(.admin) .hm .pass-sec h2 { color: #fff; font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5rem); max-width: 10ch; }
.pass-sec .hm-lead { color: rgba(255, 255, 255, .86); }

.pass { display: grid; color: var(--ink); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); transform: rotate(-1.5deg); transition: transform .5s var(--ease); }
.pass:hover, .pass:focus-within { transform: rotate(0); }
@media (min-width: 700px) { .pass { grid-template-columns: minmax(0, 1fr) 220px; } }
.pass__main { padding: 26px clamp(20px, 3vw, 34px) 28px; border-radius: 22px 22px 0 0; background: #fff; }
@media (min-width: 700px) { .pass__main { border-radius: 22px 0 0 22px; } }
.pass__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pass__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; color: #0B2233; }
.pass__brand svg { width: 30px; height: 30px; }
.pass__brand path { fill: #0B2233; }
.pass__brand .pass__tail { fill: var(--accent); }
.pass__class { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pass__route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 14px; padding: 22px 0; }
.pass__route small, .pass__field small, .pass__stub-top small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pass__route strong { display: block; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(2.8rem, 1.8rem + 3vw, 4.4rem); line-height: 1; color: #0B2233; }
.pass__route span { font-size: .8rem; color: var(--ink-2); }
.pass__to { text-align: right; }
.pass__to strong { color: var(--accent); transition: opacity .25s, transform .25s; }
.pass__to strong.is-flip { opacity: 0; transform: translateY(-10px); }
.pass__plane { display: flex; align-items: center; gap: 8px; color: #E0A458; }
.pass__plane i { flex: 1; border-top: 2px dashed var(--line-2); }
.pass__plane .icon { width: 26px; height: 26px; transform: rotate(45deg); animation: passFly 2.4s ease-in-out infinite alternate; }
@keyframes passFly { from { translate: -6px 0; } to { translate: 6px 0; } }
.pass__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pass__field { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--sand); cursor: pointer; transition: box-shadow .2s; }
.pass__field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.pass__field select, .pass__field input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink); outline: none; cursor: pointer; }
.pass__field--static { cursor: default; }
.pass__field--static strong { font-size: .95rem; }
.pass__stub { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px 22px; border-radius: 0 0 22px 22px; background: #0B2233; color: #fff; }
@media (min-width: 700px) { .pass__stub { border-radius: 0 22px 22px 0; border-left: 2px dashed rgba(255, 255, 255, .35); } }
.pass__hole { display: none; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: rgba(8, 24, 36, .9); }
@media (min-width: 700px) { .pass__hole { display: block; } }
.pass__hole--top { top: -12px; }
.pass__hole--bottom { bottom: -12px; }
.pass__stub-top small { color: rgba(255, 255, 255, .6); }
.pass__stub-top strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2.6rem; line-height: 1; color: #E0A458; }
.pass__go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s; }
.pass__go:hover { background: var(--accent); color: #fff; }
.pass__go .icon { width: 16px; height: 16px; }
.pass__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .8rem; color: rgba(255, 255, 255, .8); }
.pass__wa:hover { color: #fff; }
.pass__wa .icon { width: 16px; height: 16px; color: #5FC2BE; }
.pass__bars { height: 34px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 7px, transparent 7px 9px, #fff 9px 10px, transparent 10px 13px); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .pass, .pass__to strong { transition: none; } .pass__plane .icon { animation: none; } }

/* ---------- the journey: a pinned full-screen story; five scenes cross-fade while the swallow flies out to the sun and home ---------- */
.jr { position: relative; height: calc(var(--n, 5) * 40vh + 100vh); background: #06121b; color: #fff; }
.jr__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.jr__bgs, .jr__bg { position: absolute; inset: 0; }
.jr__bgs { z-index: -3; }
.jr__bg { opacity: 0; transition: opacity 1.1s var(--ease); }
.jr__bg.is-on { opacity: 1; }
.jr__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 7s cubic-bezier(.2, .6, .2, 1); }
.jr__bg.is-on img { transform: scale(1.02); }
.jr__bg--home { background: radial-gradient(90% 80% at 86% 18%, rgba(224, 164, 88, .32), rgba(224, 164, 88, 0) 55%), radial-gradient(70% 60% at 12% 90%, rgba(14, 124, 123, .35), rgba(14, 124, 123, 0) 60%), linear-gradient(180deg, #0b2233 0%, #06121b 100%); }
.jr__stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(90deg, rgba(6, 18, 27, .86) 0%, rgba(6, 18, 27, .5) 45%, rgba(6, 18, 27, .12) 100%),
  linear-gradient(0deg, rgba(6, 18, 27, .75) 0%, rgba(6, 18, 27, 0) 35%),
  linear-gradient(180deg, rgba(6, 18, 27, .55) 0%, rgba(6, 18, 27, 0) 22%); }

.jr__route { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.jr__glow { transform-origin: 1380px 250px; animation: jrGlow 3.4s ease-in-out infinite alternate; }
@keyframes jrGlow { from { transform: scale(.82); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
.jr__sun { fill: #E0A458; filter: drop-shadow(0 0 24px rgba(224, 164, 88, .8)); }
.jr__path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 16; }
.jr__trail { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .55)); }
.jr__trail--home { stroke: #E0A458; filter: drop-shadow(0 0 12px rgba(224, 164, 88, .7)); }
.jr__trail { transition: opacity .6s var(--ease); }
.jr[data-scene="4"] .jr__trail:not(.jr__trail--home) { opacity: .28; }
.jr__home circle:first-child { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.jr__home circle:last-child { fill: #fff; }
.jr__label { font: 700 26px var(--font-body); letter-spacing: .14em; text-transform: uppercase; fill: #fff; }
.jr__bird path { fill: #fff; }
.jr__bird .jr__tail { fill: #5FC2BE; }
.jr__bird { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }

.jr__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); padding-bottom: 110px; }
.jr__kicker { margin: 0 0 22px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #a7ece8; }
.jr__kicker::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 14px; background: currentColor; }
.jr__steps { display: grid; }
.jr__step { grid-area: 1 / 1; max-width: 600px; opacity: 0; visibility: hidden; transform: translateY(46px); transition: opacity .7s var(--ease), transform .8s var(--ease), visibility .8s; }
.jr__step.is-on { opacity: 1; visibility: visible; transform: none; }
.jr__num { font-family: "Oswald", var(--font-poster); font-size: 1rem; font-weight: 500; letter-spacing: .24em; color: #E0A458; }
.jr__word { margin: 6px 0 16px; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(4.4rem, 1.6rem + 10vw, 11.5rem); line-height: .84; letter-spacing: -.005em; background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jr__step--home .jr__word { background-image: linear-gradient(180deg, #f6d29b 20%, #E0A458 80%); }
body:not(.admin) .jr h3 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); letter-spacing: 0; color: #fff; }
.jr__text { max-width: 470px; margin: 12px 0 0; font-size: clamp(.95rem, .9rem + .2vw, 1.08rem); line-height: 1.7; color: rgba(255, 255, 255, .84); }
.jr__cta { flex-wrap: wrap; margin-top: 30px; }
.jr__score { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(255, 255, 255, .78); }
.jr__score .icon { width: 16px; height: 16px; color: #f5c35b; fill: #f5c35b; }

.jr__rail { position: absolute; left: 0; right: 0; bottom: 34px; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); list-style: none; margin: 0 auto; padding-top: 16px; }
.jr__rail::before, .jr__rail::after { content: ""; position: absolute; top: 0; left: var(--gutter); height: 2px; }
.jr__rail::before { right: var(--gutter); background: rgba(255, 255, 255, .2); }
.jr__rail::after { width: calc((100% - 2 * var(--gutter)) * var(--t, 0)); background: linear-gradient(90deg, #fff, #E0A458); }
.jr__rail li { position: relative; padding-top: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); transition: color .4s; }
@media (min-width: 640px) { .jr__rail li { font-size: .72rem; } }
.jr__rail li::before { content: ""; position: absolute; top: -21px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #06121b; border: 2px solid rgba(255, 255, 255, .4); transition: background-color .4s, border-color .4s; }
.jr__rail li.is-done { color: #fff; }
.jr__rail li.is-done::before { background: #fff; border-color: #fff; }
.jr__rail li:last-child.is-done::before { background: #E0A458; border-color: #E0A458; }

@media (max-width: 767px) {
  .jr__route { top: calc(var(--header-h) + 18px); bottom: auto; height: auto; }
  .jr__stage::before { background: linear-gradient(180deg, rgba(6, 18, 27, .55) 0%, rgba(6, 18, 27, .35) 40%, rgba(6, 18, 27, .9) 100%); }
  .jr__inner { justify-content: flex-end; padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr__glow { animation: none; }
  .jr__bg, .jr__bg img, .jr__step { transition: none; }
}

/* ---------- about: the name and the logo ---------- */
.brand-story__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .brand-story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }
.brand-story__mark { display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 70% 25%, rgba(224, 164, 88, .22), rgba(255, 255, 255, .03) 60%); }
.brand-story__mark svg { width: 62%; }
body:not(.admin) .brand-story h2 { color: #fff; font-size: var(--fs-2xl); }
.brand-story .eyebrow { color: #a7ece8; }
.brand-story__lead { margin-top: 16px; font-size: 1.05rem; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.brand-story__parts { list-style: none; display: grid; gap: 18px; margin: 28px 0 0; padding: 0; }
.brand-story__parts li { display: flex; gap: 16px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.brand-story__dot { flex: 0 0 12px; height: 12px; margin-top: 6px; border-radius: 50%; }
.brand-story__parts strong { color: #fff; }
.brand-story__parts p { margin: 4px 0 0; font-size: .92rem; line-height: 1.65; color: rgba(255, 255, 255, .72); }

/* ---------- phone polish ---------- */
@media (max-width: 639px) {
  .book-box__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .book-box__go { grid-column: 1 / -1; }
  .bf { padding: 9px 11px; border-radius: 12px; }
  .bf > span { font-size: .6rem; letter-spacing: .08em; }
  .bf select, .bf input { font-size: .9rem; }
  .book-box__tabs button { padding: 14px 12px 12px; font-size: .86rem; }
  .trust { gap: 12px; padding-top: 22px; }
  .trust li { gap: 10px; font-size: 0; }
  .trust li strong { font-size: .86rem; line-height: 1.25; }
  .trust__icon { flex-basis: 36px; height: 36px; }
  .trust__icon .icon { width: 17px; height: 17px; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .ft-brand, .ft-grid > .ft-col:last-child { grid-column: 1 / -1; }
  .ft-col ul { gap: 9px; font-size: .86rem; }
}

/* ---------- mobile menu: navy, headline type, items slide in ---------- */
.drawer__panel { background: radial-gradient(80% 50% at 100% 0%, rgba(14, 124, 123, .28), rgba(14, 124, 123, 0) 70%), radial-gradient(70% 40% at 0% 100%, rgba(224, 164, 88, .14), rgba(224, 164, 88, 0) 70%), #0b1c29; color: #fff; }
.drawer__head { border-bottom-color: rgba(255, 255, 255, .1); }
.drawer__head .brand { color: #fff; }
.drawer__head .brand__logo { --brand-teal: #5FC2BE; }
.drawer__head .icon-btn { color: #fff; border-color: rgba(255, 255, 255, .25); }
.drawer__nav > li { border-bottom-color: rgba(255, 255, 255, .1); }
body:not(.admin) .drawer__nav a, body:not(.admin) .drawer__nav summary { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.85rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: #fff; padding: 20px 0; }
.drawer__nav > li > a .icon, .drawer__nav summary .icon { width: 22px; height: 22px; color: #a7ece8; }
.drawer__nav details[open] summary { color: #a7ece8; }
.drawer__sub { gap: 2px 14px; padding-bottom: 20px; }
body:not(.admin) .drawer__sub a { font-family: var(--font-body); font-size: .95rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 8px 0; color: rgba(255, 255, 255, .78); }
body:not(.admin) .drawer__sub a:hover, body:not(.admin) .drawer__sub .link { color: #a7ece8; }
.drawer__foot { border-top-color: rgba(255, 255, 255, .1); }
.drawer__foot .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .35); color: #fff; border-color: rgba(255, 255, 255, .35); }
.drawer__nav > li { opacity: 0; transform: translateX(24px); transition: opacity .35s, transform .45s var(--ease); }
.drawer.is-open .drawer__nav > li { opacity: 1; transform: none; }
.drawer.is-open .drawer__nav > li:nth-child(2) { transition-delay: .05s; }
.drawer.is-open .drawer__nav > li:nth-child(3) { transition-delay: .1s; }
.drawer.is-open .drawer__nav > li:nth-child(4) { transition-delay: .15s; }
.drawer.is-open .drawer__nav > li:nth-child(5) { transition-delay: .2s; }
.drawer.is-open .drawer__nav > li:nth-child(6) { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .drawer__nav > li { opacity: 1; transform: none; transition: none; } }

/* journey on phones: the route takes only the space left above the text, so the two never overlap on short screens */
@media (max-width: 767px) {
  .jr__stage { display: flex; flex-direction: column; padding: calc(var(--header-h) + 6px) 0 92px; }
  .jr__route { position: relative; inset: auto; top: auto; flex: 1 1 0; min-height: 0; width: 100%; height: auto; }
  .jr__inner { flex: none; height: auto; display: block; padding-top: 6px; padding-bottom: 0; }
  .jr__kicker { margin-bottom: 10px; font-size: .64rem; }
  .jr__kicker::before { margin-bottom: 10px; }
  .jr__word { margin: 2px 0 10px; font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .jr__text { margin-top: 8px; font-size: .9rem; line-height: 1.6; }
  .jr__cta { margin-top: 18px; gap: 10px; }
  .jr__rail { bottom: 22px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .jr__kicker { display: none; }
  .jr__score { display: none; }
}

/* hero legibility: on narrow screens the text spans the whole photo, so darken the photo behind it and lift the text with a soft shadow */
.hx__where, .hx__line { text-shadow: 0 2px 14px rgba(5, 15, 24, .55); }
.hx__line { font-weight: 500; }
@media (max-width: 899px) {
  .hx::before { background:
    linear-gradient(180deg, rgba(8, 24, 36, .62) 0%, rgba(8, 24, 36, .55) 22%, rgba(8, 24, 36, .5) 50%, rgba(8, 24, 36, .28) 68%, rgba(8, 24, 36, .7) 100%); }
  .hx__line { color: #fff; }
  .hx .hx__pill:not(.hx__pill--solid) { background: rgba(8, 24, 36, .55);  }
}
@media (max-width: 899px) {
  /* gentler drift on phones: the photo is already enlarged to fill the tall screen */
  .hx.is-ready .hx__slide.is-active img { transform: scale(1.06) translate3d(-1%, -.5%, 0); }
  .hx.is-ready .hx__slide:nth-child(even).is-active img { transform: scale(1.06) translate3d(1%, .5%, 0); }
}

/* booking box on phones: all five services visible as icon tiles (no hidden, sideways-scrolling tabs) */
@media (max-width: 639px) {
  .book-box { padding-top: 10px; }
  .book-box__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; border-bottom: 0; padding-bottom: 4px; }
  .book-box__tabs button { flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 10px 2px 9px; margin: 0; border: 0; border-radius: 14px; font-size: .7rem; font-weight: 600; letter-spacing: .01em; }
  .book-box__tabs button .icon { width: 21px; height: 21px; }
  .book-box__tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
  .book-box__panel { padding-top: 12px; }
  .bf > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* footer link groups: plain columns on larger screens, tap-to-open rows on phones */
.ft-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ft-acc summary::-webkit-details-marker { display: none; }
.ft-acc__icon { display: none; }
@media (min-width: 640px) { .ft-acc summary { pointer-events: none; } }
@media (max-width: 639px) {
  .ft-grid { grid-template-columns: 1fr; gap: 0; }
  .ft-brand { padding-bottom: 28px; }
  .ft-grid > .ft-col { grid-column: auto; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ft-grid > .ft-col:last-child { padding-top: 26px; }
  .ft-acc summary { padding: 18px 0; cursor: pointer; }
  body:not(.admin) .ft-acc summary h4 { margin: 0; font-size: .74rem; }
  .ft-acc__icon { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); transition: transform .3s var(--ease), background-color .3s; }
  .ft-acc__icon::before, .ft-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: #fff; border-radius: 2px; }
  .ft-acc__icon::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
  .ft-acc[open] .ft-acc__icon { background: rgba(95, 194, 190, .18); border-color: rgba(95, 194, 190, .5); }
  .ft-acc[open] .ft-acc__icon::after { transform: rotate(0); }
  .ft-acc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-bottom: 22px; }
}

/* destinations on phones: a 3x2 filter grid and a two-column photo grid (no sideways swiping); six shown, then "all" */
@media (max-width: 639px) {
  .hm-head__side:has(.region-tabs) { width: 100%; }
  .region-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .region-tabs button { padding: 9px 4px; font-size: .8rem; text-align: center; }
  [data-scroller-nav="places"] { display: none; }
  .rail[data-places] { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 10px; overflow: visible; padding: 0 var(--gutter); scroll-snap-type: none; }
  .rail[data-places] .place { height: auto; aspect-ratio: 3 / 4; border-radius: 16px; }
  .rail[data-places] .place.is-more { display: none; }
  .rail[data-places] .place__count { top: 10px; left: 10px; padding: 4px 9px; font-size: .64rem; }
  .rail[data-places] .place__body { left: 12px; right: 12px; bottom: 12px; gap: 3px; }
  .rail[data-places] .place__body small::before { margin-bottom: 6px; }
  .rail[data-places] .place__body strong { font-size: 1.3rem; }
  .rail[data-places] .place__tag { display: none; }
  .rail[data-places] .place--all { grid-column: 1 / -1; aspect-ratio: auto; min-height: 92px; }
  .rail[data-places] .place--all .place__body { top: 50%; bottom: auto; transform: translateY(-50%); }
  .rail[data-places] .place--all .place__body strong { font-size: 1.5rem; }
  .rail[data-places] .place__all-go { left: auto; right: 16px; top: 50%; bottom: auto; width: 46px; height: 46px; transform: translateY(-50%); }
  .rail[data-places] .place--all:hover .place__all-go { transform: translateY(-50%) translateX(4px); }
}

/* ---------- elekea Kibubu: the money pot, the plan picker on the payment step and the progress card ---------- */
.kibubu-jar { display: block; width: 100%; height: auto; overflow: visible; }
.kibubu-jar__pot { fill: #f3e6d6; }
.kibubu-jar__line { fill: none; stroke: #0B2233; stroke-width: 3; }
.kibubu-jar__neck { fill: #0B2233; }
.kibubu-jar__slot { fill: #E0A458; }
.kibubu-jar__wave { animation: kjWave 3s linear infinite; }
@keyframes kjWave { to { transform: translateX(-60px); } }
.kibubu-jar__coin { fill: #E0A458; stroke: #b07a35; stroke-width: 1.2; animation: kjCoin 2.6s cubic-bezier(.5, 0, .9, .5) infinite; }
@keyframes kjCoin { 0% { transform: translateY(-14px); opacity: 0; } 25% { opacity: 1; } 55% { transform: translateY(12px); opacity: 1; } 60%, 100% { transform: translateY(14px); opacity: 0; } }
.kibubu-jar__pct { font: 700 17px "Oswald", var(--font-poster); fill: #0B2233; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; }
@media (prefers-reduced-motion: reduce) { .kibubu-jar__wave, .kibubu-jar__coin { animation: none; } }

.option--kibubu .option__title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; border-radius: 50% 50% 46% 46%; background: #E0A458; box-shadow: inset 0 -5px 0 #0E7C7B; }
.option--kibubu .price__value small { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--muted); }
.kibubu-pick { display: none; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 14px; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, #f7efe3, #eef7f6); border: 1px solid #e8dcc8; }
form:has(input[name="amount_choice"][value="kibubu"]:checked) .kibubu-pick { display: grid; }
@media (max-width: 559px) { .kibubu-pick { grid-template-columns: 1fr; } .kibubu-pick__jar { width: 84px; } }
.kibubu-pick__title { margin: 0; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; color: #0B2233; }
.kibubu-pick__lead { margin: 6px 0 14px; font-size: .9rem; color: var(--ink-2); }
.kibubu-pick__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kibubu-plan { position: relative; cursor: pointer; }
.kibubu-plan input { position: absolute; opacity: 0; }
.kibubu-plan > span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.kibubu-plan strong { font-family: "Oswald", var(--font-poster); font-size: 1.3rem; font-weight: 600; color: #0B2233; }
.kibubu-plan strong small, .kibubu-plan > span > small { font-family: var(--font-body); font-size: .76rem; font-weight: 600; color: var(--muted); }
.kibubu-plan input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kibubu-plan input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.kibubu-pick__amount { display: grid; gap: 6px; margin-top: 14px; font-size: .8rem; font-weight: 700; }
.kibubu-pick__note { margin: 12px 0 0; font-size: .8rem; color: var(--ink-2); }
.kibubu-pick__note .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--accent); }

.kibubu-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; align-items: center; margin: 22px 0; padding: 22px 24px; border-radius: 22px; background: radial-gradient(70% 90% at 0% 0%, rgba(224, 164, 88, .18), rgba(224, 164, 88, 0) 70%), #0b1c29; color: #fff; text-align: left; }
@media (max-width: 559px) { .kibubu-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 18px; } }
.kibubu-card .kibubu-jar__pot { fill: #f3e6d6; }
.kibubu-card .kibubu-jar__line { stroke: #f3e6d6; }
.kibubu-card .kibubu-jar__neck { fill: #f3e6d6; }
.kibubu-card .kibubu-jar__slot { fill: #0b1c29; }
.kibubu-card__kicker { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a7ece8; }
body:not(.admin) .kibubu-card h3 { margin: 6px 0 10px; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.05; text-transform: uppercase; color: #fff; }
.kibubu-card p { margin: 0 0 14px; font-size: .88rem; color: rgba(255, 255, 255, .8); }
.kibubu-card p strong { color: #fff; }
.kibubu-card__bar { height: 8px; margin-bottom: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.kibubu-card__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5FC2BE, #E0A458); }
.kibubu-card.is-full { background: radial-gradient(70% 90% at 0% 0%, rgba(224, 164, 88, .32), rgba(224, 164, 88, 0) 70%), #0b1c29; }
.badge--kibubu { background: #f6ead8; color: #8a5a1c; }
.checkout > *, .step__section, .option-grid, .kibubu-pick, .kibubu-pick__body { min-width: 0; }
.kibubu-pick .input { width: 100%; }

/* ---------- home: elekea Kibubu section + savings calculator ---------- */
.kb { background: radial-gradient(60% 70% at 100% 0%, rgba(224, 164, 88, .16), rgba(224, 164, 88, 0) 70%), #f7f1e8; }
.kb__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .kb__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; } }
.kb .hm-kicker { color: #b07a35; }
.kb__steps { list-style: none; display: grid; gap: 18px; margin: 30px 0 0; padding: 0; }
.kb__steps li { display: flex; gap: 16px; }
.kb__steps li > span { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #0B2233; color: #E0A458; font: 600 1rem "Oswald", var(--font-poster); }
.kb__steps strong { display: block; color: var(--ink); }
.kb__steps p { margin: 2px 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.kb__calc { position: relative; padding: 30px clamp(20px, 3vw, 34px) 28px; border-radius: 26px; background: #0b1c29; color: #fff; box-shadow: 0 40px 70px -40px rgba(11, 28, 41, .7); }
.kb__jar { position: absolute; top: -44px; right: 26px; width: 92px; }
.kb__jar .kibubu-jar__pct { display: none; }
.kb__calc-title { margin: 0 0 18px; font: 600 1.6rem/1 "Oswald", var(--font-poster); text-transform: uppercase; }
.kb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb__field { display: grid; gap: 4px; margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.kb__field span { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a7ece8; }
.kb__field select { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: .95rem; font-weight: 600; outline: none; cursor: pointer; }
.kb__field select option { color: var(--ink); }
.kb__result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 6px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(14, 124, 123, .45), rgba(224, 164, 88, .25)); }
.kb__result > div { display: grid; }
.kb__result strong { font: 600 clamp(2rem, 1.5rem + 1.6vw, 2.8rem)/1 "Oswald", var(--font-poster); color: #fff; }
.kb__result small { font-size: .78rem; color: rgba(255, 255, 255, .75); }
.kb__result > span { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.kb__total { margin: 10px 0 18px; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.kb__total b { color: #fff; }
.kb__go { width: 100%; justify-content: center; }
@media (max-width: 639px) { .kb__jar { width: 64px; top: -38px; right: 16px; } .kb__calc-title { padding-right: 64px; } }

/* trip page: "or save weekly with Kibubu" */
.kibubu-hint { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f7f1e8; font-size: .82rem; color: var(--ink-2); transition: background-color .2s; }
.kibubu-hint:hover { background: #f1e5d3; }
.kibubu-hint strong { color: var(--ink); }
.kibubu-hint__pot { flex: 0 0 22px; height: 22px; border-radius: 50% 50% 46% 46%; background: #E0A458; box-shadow: inset 0 -7px 0 #0E7C7B; }

/* ---------- elekea Kibubu sub-brand on the site ---------- */
.kibubu-logo { display: block; height: auto; overflow: visible; }
.kb__new { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #E0A458; color: #0B2233; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; vertical-align: middle; }
.kb { position: relative; overflow: hidden; }
.kb__bgmark { position: absolute; z-index: 0; left: -60px; bottom: -70px; width: 420px; opacity: .06; pointer-events: none; }
.kb__grid { position: relative; z-index: 1; }
.kb__brand { display: flex; align-items: flex-start; gap: 14px; }
.kb__logo { width: min(330px, 78%); }
.kb__brand .kb__new { margin-top: 6px; }
.kb__sw { margin: 18px 0 0; font-size: 1.05rem; font-style: italic; color: #b07a35; }
body:not(.admin) .hm .kb h2 { margin-top: 8px; }

/* announcement strip under the booking box */
.kb-strip { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 12px 14px 12px 12px; border-radius: 18px; background: #0b1c29; color: #fff; box-shadow: 0 20px 40px -26px rgba(11, 28, 41, .8); transition: transform .3s var(--ease); }
.kb-strip:hover { transform: translateY(-2px); }
.kb-strip__icon { flex: 0 0 52px; width: 52px; padding: 6px; border-radius: 14px; background: #f7f1e8; }
.kb-strip__text { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.kb-strip__text strong { margin: 0 6px 0 4px; color: #fff; font-size: 1rem; }
.kb-strip__go { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #E0A458; color: #0B2233; transition: transform .3s var(--ease); }
.kb-strip:hover .kb-strip__go { transform: translateX(4px); }
.kb-strip__go .icon { width: 18px; height: 18px; }
@media (max-width: 639px) {
  .kb-strip { align-items: flex-start; gap: 12px; }
  .kb-strip__icon { flex-basis: 44px; width: 44px; }
  .kb-strip__text { font-size: .82rem; }
  .kb-strip__text > span:last-child { display: block; margin-top: 4px; }
  .kb-strip__go { flex-basis: 36px; height: 36px; align-self: center; }
  .kb__bgmark { width: 300px; left: auto; right: -80px; bottom: auto; top: 30px; }
  .kb__logo { width: min(280px, 76%); }
}

/* phone menu: Kibubu link with a gold NEW tag */
body:not(.admin) .drawer__nav a.drawer__kibubu { color: #E9B470; }
.drawer__kibubu .kb__new { margin-left: 10px; margin-right: auto; font-family: var(--font-body); font-size: .56rem; }
.drawer.is-open .drawer__nav > li:nth-child(7) { transition-delay: .3s; }
.kibubu-pick__logo { width: 190px; margin-bottom: 8px; }
.kibubu-card__logo { width: 170px; margin-bottom: 10px; }

/* ==========================================================================
   Destinations page: photo-wall hero, region + month filter, bento grid
   ========================================================================== */
.dx-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--forest); }
.dx-hero__wall { position: absolute; inset: -4% -2%; z-index: -2; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; transform: rotate(-4deg) scale(1.08); }
.dx-hero__wall span { overflow: hidden; border-radius: 10px; background: var(--forest-2); }
.dx-hero__wall img { width: 100%; height: 100%; object-fit: cover; animation: dx-drift 18s var(--ease) infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
@keyframes dx-drift { from { transform: scale(1); } to { transform: scale(1.14); } }
.dx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, .55) 0%, rgba(11, 34, 51, .78) 45%, rgba(11, 34, 51, .97) 100%); }
.dx-hero__content { padding-block: calc(var(--header-h) + 28px) 40px; }
.dx-hero .breadcrumbs { color: rgba(255, 255, 255, .8); }
.dx-hero__sw { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: #9FDCD8; margin-bottom: 6px; }
body:not(.admin) .dx-hero h1 { color: #fff; font-size: clamp(2.8rem, 1.8rem + 4.4vw, 5.6rem); font-weight: 500; line-height: 1.02; max-width: 12ch; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.dx-hero__lead { margin-top: 16px; max-width: 520px; color: rgba(255, 255, 255, .86); font-size: var(--fs-md); line-height: 1.6; }
.dx-hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); max-width: 560px; }
.dx-hero__stats div { display: flex; flex-direction: column-reverse; }
.dx-hero__stats dt { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: #E9B470; }
.dx-hero__stats dd { margin: 4px 0 0; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
@media (min-width: 768px) {
  .dx-hero__wall { grid-template-columns: repeat(4, 1fr); inset: -10% -4% -10% 38%; }
  .dx-hero::after { background: linear-gradient(90deg, rgba(11, 34, 51, 1) 0%, rgba(11, 34, 51, .96) 34%, rgba(11, 34, 51, .55) 62%, rgba(11, 34, 51, .25) 100%), linear-gradient(0deg, rgba(11, 34, 51, .6), transparent 40%); }
  .dx-hero__content { padding-block: calc(var(--header-h) + 56px) 72px; min-height: clamp(520px, 72vh, 680px); display: flex; flex-direction: column; justify-content: flex-end; }
}

.dx { padding-bottom: clamp(32px, 5vw, 64px); }
.dx-bar { background: rgba(255, 255, 255, .99); border-bottom: 1px solid var(--line); z-index: 20; }
.dx-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 14px; }
.dx-bar__regions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.dx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dx-chip span { font-size: .72rem; color: var(--muted); font-weight: 700; }
.dx-chip:hover { border-color: var(--accent); }
.dx-chip.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
.dx-chip.is-active span { color: #E9B470; }
.dx-month { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.dx-month .icon { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--accent); pointer-events: none; }
.dx-month select { appearance: none; padding: 10px 36px 10px 38px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff 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='%23142433' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font: 600 var(--fs-sm)/1 var(--font-body); color: var(--ink); cursor: pointer; }
.dx-month select:focus-visible, .dx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-month.is-set select { border-color: var(--accent); background-color: var(--accent-soft); }
@media (max-width: 639px) {
  .dx-bar__regions { gap: 6px; }
  .dx-chip { padding: 8px 11px; font-size: .8rem; }
  .dx-month, .dx-month select { width: 100%; }
}
@media (min-width: 768px) { .dx-bar { position: sticky; top: var(--header-h); } }

.dx-status { margin: 26px 0 18px; color: var(--ink-2); font-size: var(--fs-sm); max-width: 70ch; }
.dx-status strong { color: var(--ink); }

/* grid: 2 columns on phones, 4 on desktop; JS gives each card a size so rows always fill */
.dx-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 10px; }
.dx-card[data-sm="wide"] { grid-column: span 2; }
.dx-card[data-sm="big"] { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px) { .dx-grid { grid-auto-rows: 220px; gap: 14px; } }
@media (min-width: 1024px) {
  .dx-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
  .dx-card[data-sm] { grid-column: auto; grid-row: auto; }
  .dx-card[data-lg="big"] { grid-column: span 2; grid-row: span 2; }
  .dx-card[data-lg="wide"] { grid-column: span 2; }
  .dx-card[data-lg="tall"] { grid-row: span 2; }
  .dx-card[data-lg="full"] { grid-column: 1 / -1; grid-row: span 2; }
  .dx-card[data-lg="strip"] { grid-column: 1 / -1; }
}

.dx-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-radius: 14px; color: #fff; background: var(--forest-2); box-shadow: var(--shadow-sm); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.dx-card.is-hidden { display: none; }
.dx-card__img, .dx-card picture { position: absolute; inset: 0; z-index: -2; }
.dx-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.dx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, .35) 0%, rgba(11, 34, 51, 0) 30%, rgba(11, 34, 51, .1) 50%, rgba(11, 34, 51, .88) 100%); }
.dx-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.dx-card:hover img { transform: scale(1.07); }
.dx-card__top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.dx-card__region, .dx-card__trips { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(11, 34, 51, .72); border: 1px solid rgba(255, 255, 255, .18); }
.dx-card__trips { background: rgba(255, 255, 255, .92); color: var(--ink); border-color: transparent; transition: opacity .3s; }
.dx-card__body { display: flex; flex-direction: column; gap: 4px; }
.dx-card__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.05; font-weight: 500; }
.dx-card__tag { display: none; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); line-height: 1.45; max-width: 40ch; }
.dx-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.dx-card__price { font-weight: 700; font-size: .85rem; color: #fff; }
.dx-card__price small { font-weight: 500; font-size: .7rem; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.dx-card__season { display: none; gap: 3px; align-items: flex-end; }
.dx-card__season i { width: 5px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.dx-card__season i.is-best { height: 14px; background: #5FC2BE; }
.dx-card__season i.is-pick { background: #E9B470; }
.dx-card__go { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s var(--ease); }
.dx-card__go .icon { width: 18px; height: 18px; }
.dx-card:hover .dx-card__go { opacity: 1; transform: none; }
.dx-card:hover .dx-card__trips { opacity: 0; }
.dx-card[data-sm="big"] .dx-card__name, .dx-card[data-sm="wide"] .dx-card__name { font-size: 1.9rem; }
.dx-card[data-sm="big"] .dx-card__tag, .dx-card[data-sm="wide"] .dx-card__tag { display: block; }
.dx-card[data-sm="big"] .dx-card__season, .dx-card[data-sm="wide"] .dx-card__season { display: inline-flex; }
@media (min-width: 640px) {
  .dx-card { padding: 16px; border-radius: 18px; }
  .dx-card__name { font-size: 1.75rem; }
  .dx-card__season { display: inline-flex; }
}
@media (min-width: 1024px) {
  .dx-card { padding: 20px; }
  .dx-card__name, .dx-card[data-sm] .dx-card__name { font-size: 1.85rem; }
  .dx-card .dx-card__tag, .dx-card[data-sm] .dx-card__tag { display: none; }
  .dx-card[data-lg="big"] .dx-card__name, .dx-card[data-lg="full"] .dx-card__name { font-size: clamp(2.4rem, 1.6rem + 1.6vw, 3.2rem); }
  .dx-card[data-lg="wide"] .dx-card__name, .dx-card[data-lg="tall"] .dx-card__name, .dx-card[data-lg="strip"] .dx-card__name { font-size: 2.2rem; }
  .dx-card[data-lg="big"] .dx-card__tag, .dx-card[data-lg="full"] .dx-card__tag, .dx-card[data-lg="wide"] .dx-card__tag, .dx-card[data-lg="tall"] .dx-card__tag, .dx-card[data-lg="strip"] .dx-card__tag { display: block; }
}
.dx-grid.is-filtering .dx-card { animation: dx-in .5s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes dx-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.dx-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--ink-2); }
.dx-empty p { margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .dx-hero__wall img, .dx-grid.is-filtering .dx-card { animation: none !important; } .dx-card, .dx-card img { transition: none !important; } }
.dx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin: 26px 0 18px; }
.dx-head .dx-status { margin: 0; }
.dx-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.dx-legend .dx-card__season { display: inline-flex; padding: 4px 6px; border-radius: 6px; background: var(--forest); }

/* ==========================================================================
   Destination page (destinations/{slug})
   ========================================================================== */
.ds-hero { position: relative; isolation: isolate; color: #fff; background: var(--forest); min-height: clamp(560px, 88svh, 860px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 24px; }
.ds-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ds-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: ds-zoom 8s var(--ease) both; }
@keyframes ds-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
.ds-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, .55) 0%, rgba(11, 34, 51, .05) 28%, rgba(11, 34, 51, .15) 50%, rgba(11, 34, 51, .92) 100%); }
.ds-hero__content { padding-top: calc(var(--header-h) + 40px); }
.ds-hero .breadcrumbs { color: rgba(255, 255, 255, .85); }
.ds-hero__sw { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: #9FDCD8; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
body:not(.admin) .ds-hero h1 { color: #fff; font-size: clamp(3.4rem, 1.8rem + 7vw, 8rem); font-weight: 500; line-height: .95; letter-spacing: -.02em; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.ds-hero__tag { margin-top: 10px; max-width: 36ch; font-size: var(--fs-md); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.ds-facts { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .2); }
.ds-facts > div { padding: 14px 16px; background: rgba(11, 34, 51, .74); display: flex; flex-direction: column; gap: 4px; }
.ds-facts small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); font-weight: 600; }
.ds-facts strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: #fff; }
.ds-facts strong span { font-family: var(--font-body); font-size: .75rem; opacity: .7; }
.ds-facts__wide { grid-column: 1 / -1; }
.ds-facts__wide strong { font-size: 1.2rem; }
.ds-facts__go { grid-column: 1 / -1; border-radius: 0; justify-content: center; min-height: 54px; }
@media (min-width: 900px) {
  .ds-hero { padding-bottom: 40px; }
  .ds-facts { grid-template-columns: auto auto 1fr auto; max-width: 980px; }
  .ds-facts > div { padding: 18px 26px; }
  .ds-facts__wide { grid-column: auto; }
  .ds-facts__go { grid-column: auto; padding-inline: 30px; }
}

.ds-sec { padding-block: clamp(48px, 7vw, 104px); }
.ds-sec--tight { padding-block: 0 clamp(48px, 7vw, 104px); }
.ds-sec--sand { background: var(--sand); }
.ds-sec h2 { font-size: var(--fs-2xl); }
.ds-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(24px, 3vw, 40px); }
.ds-head__note { max-width: 46ch; color: var(--ink-2); font-size: var(--fs-sm); }
.ds-head__note a { color: var(--accent); font-weight: 700; }
.ds-label { display: flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 26px 0 12px; }
.ds-label .icon { width: 16px; height: 16px; }

/* overview */
.ds-intro { display: grid; gap: 40px; align-items: center; }
.ds-intro__lead { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.4; color: var(--ink); }
.ds-more { margin-top: 14px; }
.ds-more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--accent); }
.ds-more summary::-webkit-details-marker { display: none; }
.ds-more summary .icon { width: 16px; height: 16px; transition: transform .25s; }
.ds-more[open] summary .icon { transform: rotate(180deg); }
.ds-more[open] summary span { font-size: 0; }
.ds-more[open] summary span::after { content: "Show less"; font-size: var(--fs-sm); }
.ds-more .prose { margin-top: 12px; }
.ds-more:not([open]) summary { position: relative; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-tags a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font-size: .82rem; font-weight: 600; transition: background .2s, color .2s; }
.ds-tags a:hover { background: var(--accent); color: #fff; }
.ds-tags .icon { width: 15px; height: 15px; }
.ds-stack { position: relative; height: clamp(340px, 80vw, 520px); }
.ds-stack__p { position: absolute; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow-lg); border: 5px solid #fff; background: var(--sand); }
.ds-stack__p img { width: 100%; height: 100%; object-fit: cover; }
.ds-stack__p--1 { inset: 0 22% 18% 0; }
.ds-stack__p--2 { width: 48%; height: 52%; right: 0; bottom: 0; transform: rotate(3deg); }
.ds-stack__p--3 { width: 34%; height: 34%; right: 4%; top: 2%; transform: rotate(-4deg); }
.ds-stack__stamp { position: absolute; left: 6%; bottom: 6%; width: 92px; height: 92px; border-radius: 50%; background: var(--forest); color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: var(--shadow); border: 2px dashed rgba(255, 255, 255, .35); outline: 5px solid var(--forest); transform: rotate(-10deg); }
.ds-stack__stamp svg { width: 34px; height: 34px; fill: #fff; transform: rotate(35deg); }
.ds-stack__stamp .ds-stack__tail { fill: #5FC2BE; }
.ds-stack__stamp small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; max-width: 74px; text-align: center; line-height: 1.2; }
@media (min-width: 1024px) { .ds-intro { grid-template-columns: 1.05fr .95fr; gap: 72px; } }

/* trips */
.ds-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
@media (min-width: 1024px) { .ds-trips { grid-template-columns: repeat(3, 1fr); } }
.ds-custom { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 30px; border-radius: var(--r-lg); background: var(--forest); color: rgba(255, 255, 255, .82); min-height: 240px; position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease); }
.ds-custom::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -90px; background: radial-gradient(circle, rgba(95, 194, 190, .35), transparent 70%); z-index: -1; }
.ds-custom:hover { transform: translateY(-3px); }
.ds-custom strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; color: #fff; }
.ds-custom__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #E9B470; }
.ds-custom__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: var(--fs-sm); color: #9FDCD8; }

/* see & do */
.ds-seedo { display: grid; gap: 20px; align-items: start; }
.ds-seedo ol { list-style: none; margin: 0; padding: 0; }
.ds-seedo strong { display: block; font-size: 1rem; }
.ds-seedo li span { display: block; font-size: var(--fs-sm); line-height: 1.55; margin-top: 3px; }
.ds-sights { background: var(--forest); color: #fff; border-radius: 22px; padding: 26px 24px; position: relative; overflow: hidden; }
.ds-sights .ds-label { margin-top: 0; color: #E9B470; }
.ds-sights ol { counter-reset: s; }
.ds-sights li { counter-increment: s; position: relative; padding: 16px 0 16px 44px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ds-sights li::before { content: counter(s); position: absolute; left: 0; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(95, 194, 190, .18); color: #9FDCD8; font-weight: 700; font-size: .8rem; }
.ds-sights li span { color: rgba(255, 255, 255, .72); }
.ds-todo .ds-label { margin-top: 0; }
.ds-todo { padding: 4px 0; }
.ds-todo li { display: grid; grid-template-columns: 46px 1fr; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.ds-todo li:first-child { border-top: 0; padding-top: 4px; }
.ds-todo__n { font-weight: 800; font-size: .8rem; letter-spacing: .06em; line-height: 1.6; color: var(--accent); }
.ds-todo li span:not(.ds-todo__n) { color: var(--ink-2); }
@media (min-width: 1024px) { .ds-seedo { grid-template-columns: 5fr 7fr; gap: 56px; } .ds-sights { padding: 34px 34px 20px; position: sticky; top: calc(var(--header-h) + 80px); } .ds-todo ol { columns: 2; column-gap: 40px; } .ds-todo li { break-inside: avoid; } .ds-todo li:nth-child(2) { border-top: 0; } }

/* photos bento */
.ds-photos { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 8px; }
.ds-photos__item { position: relative; overflow: hidden; border: 0; padding: 0; border-radius: 14px; cursor: zoom-in; background: var(--sand-2); }
.ds-photos__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ds-photos__item:hover img { transform: scale(1.06); }
.ds-photos__item:first-child { grid-column: span 2; grid-row: span 2; }
.ds-photos__more { position: absolute; inset: 0; display: grid; place-items: center; grid-auto-flow: column; gap: 8px; align-content: center; background: rgba(11, 34, 51, .55); color: #fff; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em; }
.ds-photos__more .icon { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .ds-photos { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
}

/* when to go + travel info */
.ds-plan { display: grid; gap: 28px; }
.ds-when, .ds-info { background: #fff; border-radius: 22px; padding: 26px 22px; box-shadow: var(--shadow-sm); }
.ds-when h2, .ds-info h2 { font-size: var(--fs-xl); margin-bottom: 18px; }
.ds-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ds-cal__m { position: relative; display: grid; place-items: center; height: 52px; border-radius: 12px; font-weight: 700; font-size: .78rem; color: var(--muted); background: var(--sand); }
.ds-cal__m.is-best { background: var(--accent); color: #fff; }
.ds-cal__m.is-now { outline: 2px solid #E9B470; outline-offset: 2px; }
.ds-cal__m small { position: absolute; bottom: -9px; padding: 1px 6px; border-radius: 999px; background: #E9B470; color: var(--forest); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.ds-cal__key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; font-size: var(--fs-xs); color: var(--muted); }
.ds-cal__key i { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.ds-cal__key i.is-off { background: var(--sand-2); margin-left: 8px; }
.ds-when__text { margin-top: 18px; color: var(--ink-2); line-height: 1.65; }
.ds-when__climate { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--warning-soft); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.ds-when__climate .icon { flex: none; width: 20px; height: 20px; color: var(--gold); margin-top: 2px; }
.ds-flight { border-radius: 16px; background: var(--forest); color: rgba(255, 255, 255, .8); padding: 18px 20px; font-size: var(--fs-sm); line-height: 1.6; }
.ds-flight__route { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: #fff; }
.ds-flight__route i { flex: 1; position: relative; height: 1px; border-top: 2px dashed rgba(255, 255, 255, .3); display: grid; place-items: center; }
.ds-flight__route .icon { position: absolute; top: -11px; width: 20px; height: 20px; color: #E9B470; background: var(--forest); padding: 0 2px; box-sizing: content-box; transform: rotate(45deg); }
.ds-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.ds-facts-grid > div { padding: 14px; border-radius: 14px; background: var(--sand); }
.ds-facts-grid .is-wide { grid-column: 1 / -1; }
.ds-facts-grid dt { display: flex; align-items: center; gap: 6px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.ds-facts-grid dt .icon { width: 15px; height: 15px; }
.ds-facts-grid dd { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
@media (min-width: 1024px) { .ds-plan { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .ds-when, .ds-info { padding: 36px; } }

/* faqs */
.ds-faq { display: grid; gap: 28px; }
.ds-faq h2 { margin-bottom: 20px; }
.ds-expert { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: var(--accent-soft); }
.ds-expert__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ds-expert p { font-size: var(--fs-sm); color: var(--ink-2); margin: 4px 0 12px; }
.ds-expert__btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) { .ds-faq { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .ds-faq__side { position: sticky; top: calc(var(--header-h) + 80px); } }

/* related: three tiles */
@media (min-width: 1024px) { .ds-related { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 340px; } .ds-related .dx-card__tag { display: block !important; } .ds-related .dx-card__name { font-size: 2.2rem !important; } }
@media (prefers-reduced-motion: reduce) { .ds-hero__media img { animation: none; } }
@media (min-width: 1024px) {
  .ds-custom--span2 { grid-column: span 2; }
  .ds-custom--span3 { grid-column: 1 / -1; min-height: 0; }
  .ds-todo ol { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ds-todo li:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
}
.ds-photos__more { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ds-custom__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .28; filter: saturate(.8); transition: transform 1s var(--ease), opacity .4s; }
.ds-custom:hover .ds-custom__bg { transform: scale(1.05); opacity: .36; }
.ds-custom > span, .ds-custom > strong { max-width: 46ch; }
.ds-hero__sw { color: #CFF0EE; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .55); }
.ds-hero .breadcrumbs { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* ==========================================================================
   About page
   ========================================================================== */
.ab-hero { position: relative; isolation: isolate; color: #fff; background: var(--forest); min-height: clamp(520px, 82svh, 800px); display: flex; align-items: flex-end; }
.ab-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ab-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: ds-zoom 8s var(--ease) both; }
.ab-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, .5) 0%, rgba(11, 34, 51, .1) 30%, rgba(11, 34, 51, .35) 55%, rgba(11, 34, 51, .95) 100%); }
.ab-hero__content { padding-block: calc(var(--header-h) + 40px) clamp(40px, 6vw, 80px); }
.ab-hero .breadcrumbs { color: rgba(255, 255, 255, .85); }
.ab-hero__sw { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #9FDCD8; margin-bottom: 14px; }
body:not(.admin) .ab-hero h1 { color: #fff; font-size: clamp(2.6rem, 1.6rem + 4.6vw, 6rem); font-weight: 500; line-height: 1; max-width: 13ch; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); }
body:not(.admin) .ab-hero h1 em { color: #E9B470; font-weight: 400; }
.ab-hero__lead { margin-top: 18px; max-width: 54ch; font-size: var(--fs-md); line-height: 1.6; color: rgba(255, 255, 255, .9); }

.ab-sec { padding-block: clamp(56px, 8vw, 112px); }
.ab-sec--tight { padding-block: clamp(24px, 4vw, 48px) 0; }
.ab-sec--sand { background: var(--sand); }
.ab-sec h2 { font-size: var(--fs-2xl); }
.ab-head { margin-bottom: clamp(28px, 4vw, 48px); }

.ab-intro { display: grid; gap: 24px 64px; }
.ab-intro__big { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); line-height: 1.2; color: var(--ink); font-weight: 500; }
.ab-intro__big em { color: var(--accent); }
.ab-intro__text p { color: var(--ink-2); line-height: 1.75; }
.ab-intro__text p + p { margin-top: 14px; }
@media (min-width: 1024px) { .ab-intro { grid-template-columns: 1.15fr 1fr; align-items: end; } }
.ab-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: clamp(36px, 5vw, 64px) 0 0; border-radius: 20px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.ab-stats div { background: #fff; padding: 22px 20px; display: flex; flex-direction: column-reverse; gap: 6px; }
.ab-stats dt { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; color: var(--forest); font-weight: 500; }
.ab-stats dt span { color: #E0A458; font-size: .7em; margin-left: 2px; }
.ab-stats dd { margin: 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
@media (min-width: 768px) { .ab-stats { grid-template-columns: repeat(4, 1fr); } .ab-stats div { padding: 28px; } }

.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.ab-step { position: relative; background: #fff; border-radius: 20px; padding: 22px 22px 22px 84px; box-shadow: var(--shadow-sm); }
.ab-step__icon { position: absolute; left: 20px; top: 22px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--forest); color: #fff; }
.ab-step__icon .icon { width: 21px; height: 21px; }
.ab-step__icon b { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E0A458; color: var(--forest); font-size: .7rem; border: 2px solid #fff; }
.ab-step h3 { font-size: 1.3rem; margin-bottom: 4px; }
.ab-step p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.ab-step:last-child .ab-step__icon { background: var(--accent); }
@media (min-width: 1024px) {
  .ab-steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ab-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; border-top: 2px dashed var(--line-2); }
  .ab-step { padding: 26px 24px 28px; text-align: left; }
  .ab-step__icon { position: relative; left: auto; top: auto; width: 56px; height: 56px; margin-bottom: 20px; box-shadow: 0 0 0 8px var(--sand); }
  .ab-step__icon .icon { width: 24px; height: 24px; }
  .ab-step { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .ab-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}

.ab-values__grid { display: grid; gap: 40px; align-items: center; }
.ab-values__media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.ab-values__media img { width: 100%; height: 100%; object-fit: cover; }
.ab-values__quote { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px 20px; border-radius: 16px; background: rgba(11, 34, 51, .86); color: #fff; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.ab-promises { display: grid; gap: 4px; }
.ab-promise { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.ab-promise:first-child { border-top: 0; padding-top: 0; }
.ab-promise__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ab-promise__icon .icon { width: 22px; height: 22px; }
.ab-promise h3 { font-size: 1.25rem; margin-bottom: 3px; }
.ab-promise p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
@media (min-width: 1024px) { .ab-values__grid { grid-template-columns: 1fr 1fr; gap: 80px; } .ab-values__media { aspect-ratio: 4 / 5; } .ab-values__quote { left: 24px; right: auto; bottom: 24px; max-width: 320px; font-size: 1.6rem; } }

.ab-office { display: grid; border-radius: 28px; overflow: hidden; background: var(--forest); color: rgba(255, 255, 255, .8); }
.ab-office__text { padding: clamp(28px, 4vw, 56px); }
.ab-office .eyebrow { color: #9FDCD8; }
body:not(.admin) .ab-office h2 { color: #fff; }
.ab-office__lead { margin-top: 10px; max-width: 46ch; line-height: 1.6; }
.ab-office__list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.ab-office__list li { display: flex; gap: 14px; align-items: flex-start; }
.ab-office__list .icon { flex: none; width: 20px; height: 20px; color: #E9B470; margin-top: 2px; }
.ab-office__list small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; margin-bottom: 2px; }
.ab-office__list span { color: #fff; font-weight: 500; }
.ab-office__list a { color: #fff; }
.ab-office__list a:hover { color: #9FDCD8; }
.ab-office__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-office__media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 260px; }
.ab-office__media span { overflow: hidden; }
.ab-office__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ab-office__media span:hover img { transform: scale(1.06); }
@media (max-width: 1023px) { .ab-office__media { grid-template-columns: repeat(4, 1fr); min-height: 0; height: 110px; } }
@media (min-width: 1024px) { .ab-office { grid-template-columns: 1.1fr 1fr; } }
.ab-values__media img { object-position: 40% 70%; }

/* ==========================================================================
   Trips & packages listing
   ========================================================================== */
.pk-hero { position: relative; isolation: isolate; color: #fff; background: var(--forest); }
.pk-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pk-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 34, 51, .7) 0%, rgba(11, 34, 51, .45) 40%, rgba(11, 34, 51, .92) 100%); }
.pk-hero__content { padding-block: calc(var(--header-h) + 28px) 28px; }
.pk-hero .breadcrumbs { color: rgba(255, 255, 255, .85); }
.pk-hero__sw { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: #9FDCD8; }
body:not(.admin) .pk-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); font-weight: 500; line-height: 1; }
.pk-hero__lead { margin-top: 12px; max-width: 52ch; color: rgba(255, 255, 255, .88); line-height: 1.6; }
.pk-search { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.pk-search__field { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: #fff; color: var(--ink); cursor: pointer; }
.pk-search__field:first-of-type { grid-column: 1 / -1; }
.pk-search__field span { display: flex; align-items: center; gap: 6px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.pk-search__field .icon { width: 14px; height: 14px; }
.pk-search__field select { appearance: none; border: 0; padding: 2px 0; background: transparent; font: 600 1rem/1.3 var(--font-body); color: var(--ink); cursor: pointer; width: 100%; }
.pk-search__field select:focus { outline: none; }
.pk-search__field:focus-within { background: var(--accent-soft); }
.pk-search__go { grid-column: 1 / -1; border-radius: 0; min-height: 54px; justify-content: center; gap: 8px; }
@media (min-width: 900px) {
  .pk-hero__content { padding-block: calc(var(--header-h) + 56px) 48px; }
  .pk-search { grid-template-columns: 1.3fr 1fr 1fr auto; max-width: 1000px; border-radius: 999px; padding: 6px; gap: 0; background: #fff; }
  .pk-search__field { padding: 8px 22px; border-radius: 999px; }
  .pk-search__field + .pk-search__field { border-left: 1px solid var(--line); }
  .pk-search__field:first-of-type { grid-column: auto; }
  .pk-search__go { grid-column: auto; border-radius: 999px; padding-inline: 28px; }
}

.pk-styles { background: #fff; border-bottom: 1px solid var(--line); }
.pk-styles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-block: 14px; }
.pk-style { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; text-align: center; font-size: .7rem; font-weight: 700; line-height: 1.25; color: var(--ink-2); transition: background .2s, color .2s; }
.pk-style span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sand); color: var(--accent); transition: background .2s, color .2s, transform .2s var(--ease); }
.pk-style span .icon { width: 19px; height: 19px; }
.pk-style:hover span { transform: translateY(-2px); background: var(--accent-soft); }
.pk-style.is-active { color: var(--ink); }
.pk-style.is-active span { background: var(--forest); color: #E9B470; }
@media (min-width: 640px) { .pk-styles__grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .pk-styles__grid { grid-template-columns: repeat(11, 1fr); gap: 4px; } .pk-style { font-size: .72rem; } }

.pk-body { padding-block: clamp(24px, 3vw, 40px) 96px; }
@media (min-width: 1100px) {
  .pk-filters { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px 22px 22px; box-shadow: var(--shadow-sm); }
  .pk-filters .pill-options { gap: 6px; }
  .pk-filters .pill-option span { padding: 6px 10px; font-size: .78rem; }
}
.pk-filters__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); margin-bottom: 18px; }
.pk-filters__head .icon { width: 18px; height: 18px; color: var(--accent); }

.pk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .pk-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.pk-grid .pkg-card__media { aspect-ratio: 16 / 10; }
.pk-grid .pkg-card__tags .tag:nth-child(n+3) { display: none; }
@media (max-width: 639px) {
  .pk-grid .pkg-card__body { padding: 16px 16px 18px; gap: 8px; }
  .pk-grid .pkg-card__tags { display: none; }
  .pk-grid .pkg-card__foot { padding-top: 12px; }
}

.pk-kibubu { grid-column: 1 / -1; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border-radius: var(--r-lg); background: linear-gradient(120deg, #0B2233 0%, #0f3a4a 60%, #0E7C7B 140%); color: rgba(255, 255, 255, .82); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pk-kibubu:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pk-kibubu__logo { width: 170px; height: auto; margin-bottom: 6px; }
.pk-kibubu strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; color: #fff; line-height: 1.1; }
.pk-kibubu > span { max-width: 52ch; font-size: var(--fs-sm); line-height: 1.6; }
.pk-kibubu__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; color: #E9B470; }
.pk-kibubu__mark { position: absolute; right: -24px; bottom: -30px; width: 190px; height: auto; opacity: .14; z-index: -1; transform: rotate(-8deg); }
@media (min-width: 900px) { .pk-kibubu { padding: 32px 40px; } .pk-kibubu__mark { width: 260px; right: 20px; bottom: -40px; opacity: .2; } }
.pk-style--more { border: 0; background: none; font-family: var(--font-body); cursor: pointer; }
@media (max-width: 639px) { .pk-style:nth-child(n+8):not(.pk-style--more) { display: none; } }
@media (min-width: 640px) { .pk-style--more { display: none; } }
.pk-filters legend.filters__title { margin-bottom: 12px; padding: 0; }

/* ---------------------------------------------------------------- auth pages (refresh) */
.auth-page { background: var(--sand); }
.auth { min-height: 100svh; }
.auth__media { display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; padding: 18px var(--gutter) 56px; }
.auth__media::after { background: linear-gradient(180deg, rgba(11, 34, 51, .55) 0%, rgba(11, 34, 51, .25) 40%, rgba(11, 34, 51, .9) 100%); }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth__back { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.auth__back .icon { width: 16px; height: 16px; transition: transform .2s; }
.auth__back:hover .icon { transform: translateX(-3px); }
.auth__back--light { color: #fff; padding: 8px 12px; border-radius: 999px; background: rgba(11, 34, 51, .45); }
.auth__sw { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: #9FDCD8; }
.auth__quote { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; color: #fff; max-width: 17ch; margin-top: 4px; }
.auth__perks { display: none; }
.auth__path { display: none; }
.auth__panel { position: relative; z-index: 1; margin-top: -28px; border-radius: 26px 26px 0 0; background: var(--sand); padding: 8px var(--gutter) 24px; }
.auth__bar { display: none; }
.auth__form { max-width: 440px; padding-block: 28px 20px; }
.auth__form > h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); }
.auth__kicker { font-size: .7rem !important; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent) !important; margin-bottom: 6px !important; }
.auth__form .field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.auth__form .input { background: #fff; min-height: 52px; border-radius: 12px; }
.auth__form .btn--lg { min-height: 54px; border-radius: 12px; }
.auth__alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.auth__alt .btn { border-radius: 12px; min-height: 50px; background: #fff; }
.auth__foot { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pw-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.pw-toggle .icon { position: static; transform: none; width: 19px; height: 19px; pointer-events: none; }
.pw-toggle.is-on { color: var(--accent); }
.input-icon .input[data-pw] { padding-right: 52px; }

@media (min-width: 1024px) {
  .auth__media { min-height: 100svh; position: sticky; top: 0; padding: 40px 48px 48px; }
  .auth__media::after { background: linear-gradient(180deg, rgba(11, 34, 51, .55) 0%, rgba(11, 34, 51, .1) 35%, rgba(11, 34, 51, .92) 100%); }
  .auth__top .auth__back { display: none; }
  .auth__pitch { position: relative; z-index: 1; }
  .auth__perks { display: grid; gap: 10px; list-style: none; margin: 28px 0 0; padding: 20px 22px; border-radius: 20px; background: rgba(11, 34, 51, .8); border: 1px solid rgba(255, 255, 255, .14); max-width: 420px; }
  .auth__perks li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .9); font-size: var(--fs-sm); font-weight: 500; }
  .auth__perks .icon, .auth__perks .auth__kb { flex: none; width: 20px; height: 20px; color: #E9B470; }
  .auth__path { display: block; position: absolute; right: 0; top: 18%; width: 60%; color: rgba(255, 255, 255, .45); z-index: 0; pointer-events: none; }
  .auth__panel { margin: 0; border-radius: 0; display: flex; flex-direction: column; padding: 32px 48px; background: var(--sand); }
  .auth__bar { display: flex; justify-content: flex-end; }
  .auth__form { margin: auto; padding: 40px 40px 36px; background: #fff; border-radius: 26px; box-shadow: var(--shadow); }
}
.input-icon--bare .input[data-pw] { padding-left: 16px; }
@media (max-width: 1023px) { .auth__pitch { margin-top: 26px; } }

/* ---------------------------------------------------------------- home hero: rising scenes */
.sx { position: relative; isolation: isolate; overflow: hidden; height: clamp(800px, 100svh, 960px); background: var(--forest); color: #fff; touch-action: pan-y; }
.sx__scene { position: absolute; inset: 0; z-index: 1; visibility: hidden; background: var(--forest); }
.sx__scene.is-on { visibility: visible; }
.sx__scene.is-front { z-index: 2; }
.sx__wave { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: clamp(50px, 9vw, 120px); margin-bottom: -1px; display: block; }
.sx__scene[data-dir="-1"] .sx__wave { display: none; }
.sx__media { position: absolute; inset: 0; overflow: hidden; }
.sx__media img { width: 100%; height: 100%; object-fit: cover; }
.sx__scene.is-on .sx__media img { animation: sxDrift 14s linear forwards; }
@keyframes sxDrift { from { transform: scale(1); } to { transform: scale(1.08); } }
.sx__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 36, .62) 0%, rgba(8, 24, 36, .18) 45%, rgba(8, 24, 36, .55) 100%); }
.sx__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 34px); padding-bottom: 172px; }

/* text waits, then rises in step */
.sx__r { opacity: 0; }
html:not(.js) .sx__r { opacity: 1; }
.sx__scene.is-active .sx__r { animation: sxUp .85s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes sxUp { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }

.sx__eyebrow { margin: 0 0 12px; font-size: .95rem; font-weight: 600; color: #fff; text-shadow: 0 2px 14px rgba(5, 15, 24, .55); }
body:not(.admin) .sx__title { margin: 0; color: #fff; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(3rem, 1.6rem + 5.4vw, 6.6rem); line-height: .98; letter-spacing: .005em; text-shadow: 0 6px 30px rgba(5, 15, 24, .3); }
.sx__text { margin: 0; max-width: 400px; font-size: clamp(.98rem, .92rem + .2vw, 1.08rem); line-height: 1.6; font-weight: 500; color: #fff; text-shadow: 0 2px 14px rgba(5, 15, 24, .6); }
.sx__pill, .sx__link { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.sx__pill { flex: none; height: 52px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--ink); transition: background-color .25s, color .25s; }
.sx__pill:hover { background: var(--accent); color: #fff; }
.sx__pill .icon, .sx__link .icon { width: 16px; height: 16px; transition: transform .25s; }
.sx__pill:hover .icon, .sx__link:hover .icon { transform: translateX(4px); }
.sx__link { margin-top: 22px; min-height: 44px; }

/* 1: welcome */
.sx__scene--open .sx__inner { align-items: center; text-align: center; }
.sx__row { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 20px; }

/* heading on the left, a short note on the right */
.sx__head { display: grid; gap: 16px; }

/* 3: cards */
.sx__scene--dark { background: var(--forest); }
.sx__scene--dark .sx__inner { padding-top: calc(var(--header-h) + 20px); }
body:not(.admin) .sx__scene--dark .sx__title { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.4rem); }
.sx__scene--dark .sx__head { gap: 10px; }
.sx__panel { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; }
.sx__card { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; padding: 15px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); outline: 0; cursor: pointer; transition: background-color .45s var(--ease), transform .55s var(--ease), box-shadow .45s; }
.sx__card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sx__card.is-open { background: #0c6072; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .85); }
.sx__card-num { font-family: "Oswald", var(--font-poster); font-weight: 500; font-size: 1.1rem; color: #E0A458; }
.sx__card-title { font-size: 1.05rem; font-weight: 700; color: #fff; padding-right: 58px; }
.sx__card-img { position: absolute; right: -4px; top: -12px; width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .55s var(--ease); pointer-events: none; }
.sx__card.is-open .sx__card-img { opacity: 1; transform: none; }
.sx__card-more { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s, visibility .35s; }
.sx__card-more > div { overflow: hidden; min-height: 0; }
.sx__card.is-open .sx__card-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.sx__card-more p { margin: 10px 0 8px; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.sx__card-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .86rem; font-weight: 700; color: #fff; }
.sx__card-more .icon { width: 16px; height: 16px; }

/* 4: story */
.sx__scene--story .sx__inner { gap: 34px; }
body:not(.admin) .sx__scene--story .sx__title { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem); }
.sx__story { position: relative; margin: auto 0 0; padding: 26px 22px 22px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 40px 70px -35px rgba(5, 15, 24, .85); }
.sx__story-face { position: absolute; right: 18px; top: -26px; width: 60px; height: 60px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--accent); color: #fff; font-family: "Oswald", var(--font-poster); font-size: 1.5rem; }
.sx__stars { color: #C9842F; letter-spacing: .12em; font-size: .95rem; }
.sx__story blockquote { margin: 8px 0 14px; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.sx__story blockquote strong { display: block; margin-bottom: 6px; font-size: 1.08rem; color: var(--ink); }
.sx__story figcaption { font-size: .82rem; font-weight: 700; color: var(--ink); }

/* last: search */
.sx__form { display: grid; gap: 11px; width: 100%; max-width: 440px; margin-block: auto; padding: 22px 20px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 40px 70px -35px rgba(5, 15, 24, .85); }
body:not(.admin) .sx__form h2 { margin: 0 0 3px; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.04; color: var(--ink); }
.sx__field { display: grid; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--ink-2); }
.sx__field select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 11px; background-color: #fff; color: var(--ink); font: 500 .95rem var(--font-body); }
.sx__field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* controls */
.sx__controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: 100px; display: flex; align-items: center; gap: 10px; }
.sx__controls > button { width: 46px; height: 46px; flex: none; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(8, 24, 36, .3); color: #fff; cursor: pointer; transition: background-color .25s, color .25s; }
.sx__controls > button:hover { background: #fff; color: var(--ink); }
.sx__controls > button .icon { width: 20px; height: 20px; }
.sx__num { margin-left: 6px; font-family: "Oswald", var(--font-poster); font-weight: 500; font-size: 1.3rem; text-shadow: 0 2px 10px rgba(5, 15, 24, .5); }
.sx__ticks { flex: 1; display: flex; gap: 5px; max-width: 340px; margin-left: 4px; }
.sx__ticks button { flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.sx__ticks button::before { content: none; }
.sx__ticks i { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .38); }
.sx__ticks i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.sx__ticks .is-done i::after, .sx__ticks .is-on i::after { transform: none; }
.sx.is-playing .sx__ticks .is-on i::after { animation: sxTick var(--d, 7s) linear both; }
@keyframes sxTick { from { transform: scaleX(0); } to { transform: none; } }

@media (min-width: 900px) {
  .sx__scene--open .sx__sun { left: 6%; top: 46%; }
  .sx { height: clamp(760px, 100svh, 1000px); }
  .sx__inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: 180px; }
  .sx__controls { bottom: 104px; }
  .sx__scene--open .sx__inner { padding-top: calc(var(--header-h) + 56px); }
  .sx__row { flex-direction: row; justify-content: space-between; gap: 40px; width: min(100%, 860px); margin-top: 26px; text-align: left; }
  .sx__head { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 56px; align-items: start; }
  .sx__head > .sx__text { margin-top: 34px; }
  .sx__scene--split .sx__title { max-width: 11ch; }
  .sx__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border-radius: 18px; background: rgba(255, 255, 255, .06); }
  .sx__card { display: block; min-height: 234px; padding: 24px 26px; border-radius: 16px; background: transparent; }
  .sx__card.is-open { transform: translate3d(0, -18px, 0); }
  .sx__card-num { display: block; font-size: 1.5rem; margin-bottom: 14px; }
  .sx__card-title { display: block; font-size: 1.22rem; padding-right: 0; max-width: 62%; }
  .sx__card-img { right: -8px; top: -18px; width: 88px; height: 88px; }
  .sx__card-more { grid-template-rows: 1fr; }
  .sx__card-more p { max-width: 34ch; margin-top: 12px; }
  .sx__scene--story .sx__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 56px; align-items: start; }
  .sx__story { margin: 24px 0 0; padding: 32px 30px 28px; }
  .sx__story-face { right: auto; left: -30px; top: -30px; width: 72px; height: 72px; }
  .sx__form { padding: 26px 26px 28px; gap: 12px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  body:not(.admin) .sx__scene--dark .sx__title { font-size: 3.4rem; }
  .sx__card { min-height: 200px; padding-block: 18px; }
  .sx__form { gap: 8px; padding-block: 20px; }
  .sx__field select { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx__r { opacity: 1; }
  .sx__scene.is-active .sx__r, .sx__scene.is-on .sx__media img { animation: none; }
  .sx__card, .sx__card-img, .sx__card-more { transition: none; }
}


/* hero moods: each scene has its own light, with a sun or moon and nearby silhouettes */
.sx__sun { position: absolute; left: 80%; top: 33%; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 233, 196, .96) 0 58%, rgba(255, 216, 160, .32) 60%, rgba(255, 216, 160, 0) 72%); pointer-events: none; }
.sx__fg { position: absolute; inset: 0; color: var(--fg, #0a1a2c); pointer-events: none; overflow: hidden; }
.sx__grass { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.sx__palm { position: absolute; right: -6%; top: -3%; width: clamp(190px, 30vw, 460px); height: clamp(150px, 26vw, 370px); transform: scaleX(-1); opacity: .92; }
.sx__ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }

.sx__scene--open { --fg: #0b2f40; }
.sx__scene--open .sx__media::after { background: linear-gradient(180deg, rgba(11, 52, 78, .68) 0%, rgba(20, 96, 122, .3) 40%, rgba(20, 96, 122, .06) 66%, rgba(8, 40, 56, .5) 100%); }
.sx__scene--open .sx__sun { background: radial-gradient(circle at 50% 50%, rgba(255, 244, 222, .72) 0 42%, rgba(255, 238, 208, .26) 56%, rgba(255, 238, 208, 0) 72%); }
.sx__scene--split { --fg: #0b0a2e; }
.sx__scene--split .sx__media::after { background: linear-gradient(180deg, rgba(62, 22, 140, .72) 0%, rgba(40, 20, 120, .28) 55%, rgba(11, 10, 46, .72) 100%); }
.sx__sun--moon { left: 53%; top: 14%; width: clamp(60px, 7vw, 100px); background: none; box-shadow: inset -16px 8px 0 0 #f4f1ff; filter: none; }
.sx__scene--dark { --fg: #06332f; background: linear-gradient(180deg, #0a3b3f 0%, #11705e 52%, #57b98a 100%); }
.sx__scene--dark .sx__sun { left: 66%; top: 31%; }
.sx__scene--dark .sx__card { background: rgba(4, 34, 36, .9); }
.sx__scene--dark .sx__card.is-open { background: #06343a; }
.sx__scene--dark .sx__panel { background: transparent; }
.sx__scene--story { --fg: #3d0f17; }
.sx__scene--story .sx__media::after { background: linear-gradient(180deg, rgba(120, 22, 40, .88) 0%, rgba(226, 84, 58, .62) 36%, rgba(255, 150, 90, .22) 62%, rgba(61, 15, 23, .72) 100%); }
.sx__scene--story .sx__sun { left: 82%; top: 47%; width: clamp(90px, 9vw, 130px); }
.sx__scene--search { --fg: #04303f; }
.sx__scene--search .sx__media::after { background: linear-gradient(180deg, rgba(4, 70, 96, .78) 0%, rgba(14, 124, 123, .42) 45%, rgba(4, 48, 63, .62) 100%); }
.sx__scene--search .sx__sun { left: 74%; top: 16%; }
@media (max-width: 899px) {
  .sx__sun { left: 58%; top: 42%; }
  .sx__sun--moon { left: 72%; top: 24%; width: 52px; }
  .sx__scene--dark .sx__sun { left: 14%; top: 33%; width: 66px; }
  .sx__scene--story .sx__sun { left: 62%; top: 24%; width: 84px; }
  .sx__scene--search .sx__sun { left: 66%; top: 66%; width: 84px; }
  .sx__palm { top: 6%; opacity: .75; width: 170px; height: 130px; }
  .sx__grass { height: 28%; }
}

/* drifting specks, like seeds in the air */
.sx__motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.sx__motes i { position: absolute; width: 5px; height: 5px; border-radius: 50% 0 50% 50%; background: rgba(255, 255, 255, .55); animation: sxMote var(--t, 12s) linear infinite; animation-delay: var(--w, 0s); }
.sx__motes i:nth-child(3n) { width: 4px; height: 4px; background: rgba(255, 228, 180, .85); }
@keyframes sxMote { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(-90px, -130px, 0) rotate(300deg); opacity: 0; } }

/* the swallow */
.swl { --size: clamp(66px, 7.4vw, 118px); position: absolute; left: 0; top: 0; z-index: 3; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); pointer-events: none; will-change: transform; }
html:not(.js) .swl { display: none; }
.swl { --swl-a: #fff; --swl-b: #7fe3db; }
.swl[data-tone="morning"] { --swl-a: #fff; --swl-b: #f2b26b; }
.swl[data-tone="night"] { --swl-a: #f2f0ff; --swl-b: #9cc2ff; }
.swl[data-tone="green"] { --swl-a: #fff3c4; --swl-b: #f0a94e; }
.swl[data-tone="sunset"] { --swl-a: #2b0a14; --swl-b: #ffc15e; }
.swl[data-tone="ocean"] { --swl-a: #fff; --swl-b: #ffb27a; }
@media (max-width: 899px) { .swl[data-tone="sunset"] { --swl-a: #ffe9d2; } }
.swl svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.swl path { fill: var(--swl-a); transition: fill .9s ease; }
.swl .swl__tail { fill: var(--swl-b); }
.swl__wing { transform-origin: 50% 42%; will-change: transform; }
@media (max-width: 379px) { .sx { height: max(860px, 100svh); } } /* text wraps more here: leave the swallow room */
@media (prefers-reduced-motion: reduce) { .sx__motes { display: none; } }


/* ---------------------------------------------------------------- hotels (Hotelbeds) */
.st-hero { position: relative; isolation: isolate; color: #fff; background: var(--forest); }
.st-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.st-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.st-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 36, .72) 0%, rgba(8, 24, 36, .42) 50%, rgba(8, 24, 36, .72) 100%); }
.st-hero__inner { padding-top: calc(var(--header-h) + 36px); padding-bottom: 36px; }
.st-hero__sw { margin: 0 0 6px; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #fff; }
body:not(.admin) .st-hero__title { margin: 0; color: #fff; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(2.8rem, 1.8rem + 4vw, 5.2rem); line-height: 1; }
.st-hero__lead { max-width: 560px; margin: 12px 0 22px; color: #fff; font-weight: 500; }

.st-search { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(5, 15, 24, .7); }
.st-field { display: grid; gap: 4px; min-width: 0; font-size: .76rem; font-weight: 700; color: var(--ink-2); }
.st-field--wide { grid-column: 1 / -1; }
.st-field select, .st-field input { width: 100%; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 11px; background-color: #fff; color: var(--ink); font: 500 .95rem var(--font-body); }
.st-field.has-error select, .st-field.has-error input { border-color: var(--danger); }
.st-ages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.js .st-ages:not(.is-on) { display: none; }
.js [data-st-age].is-off { display: none; }
.st-search__go { grid-column: 1 / -1; min-height: 50px; }

.st-results { padding-block: 26px 70px; }
.st-test { margin-bottom: 16px; }
.st-results__head h2 { margin: 0 0 2px; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.4rem); }
.st-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 16px 0 20px; }
.st-stars { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; }
.st-chip input { position: absolute; opacity: 0; }
.st-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; }
.st-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-field--inline { min-width: 130px; flex: 1 1 130px; max-width: 220px; }
.st-filters .btn { min-height: 46px; }
.js .st-filters .btn { display: none; }
.st-grid { display: grid; gap: 14px; }
.st-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: inherit; transition: box-shadow .25s, border-color .25s; }
.st-card:hover { border-color: var(--accent); box-shadow: 0 18px 36px -24px rgba(11, 34, 51, .55); }
.st-card__img { position: relative; display: block; background: var(--sand); }
.st-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 13px; }
.st-card__cat { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.st-card__name { font-size: 1rem; line-height: 1.25; color: var(--ink); }
.st-card__zone { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--ink-2); }
.st-card__zone .icon { width: 13px; height: 13px; flex: none; }
.st-card__terms { font-size: .76rem; color: var(--ink-2); }
.st-card__terms.is-free, .st-terms.is-free { color: var(--success); }
.st-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.st-card__price { font-size: 1.14rem; font-weight: 800; color: var(--ink); }
.st-card__price small { font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.st-pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.st-empty { padding: 36px 18px; border: 1px dashed var(--line-2); border-radius: 18px; text-align: center; }
.st-empty h3 { margin: 0 0 6px; }

.st-page { padding-top: calc(var(--header-h) + 20px); padding-bottom: 80px; }
.st-crumbs { margin-bottom: 12px; color: var(--ink-2); }
.st-head h1 { margin: 2px 0 4px; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.1; }
.st-head p { margin: 0; }
.st-head .icon { width: 15px; height: 15px; vertical-align: -2px; }
.st-stay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--sand); }
.st-stay small { display: block; font-size: .7rem; color: var(--ink-2); }
.st-stay strong { font-size: .9rem; }
.st-h2 { margin: 30px 0 12px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.st-rooms { display: grid; gap: 14px; }
.st-room { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.st-room h3 { margin: 0; padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; background: var(--sand); }
.st-rate { display: grid; gap: 10px; padding: 13px 14px; border-top: 1px solid var(--line); }
.st-rate:first-of-type { border-top: 0; }
.st-rate__info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.st-terms { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.st-terms .icon { width: 14px; height: 14px; flex: none; }
.st-low { color: var(--danger); font-weight: 700; }
.st-rate__buy { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
.st-rate__price { font-size: 1.2rem; font-weight: 800; }
.st-rate__buy small { grid-column: 1; grid-row: 2; }
.st-rate__buy .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; }
.st-about { max-width: 780px; line-height: 1.7; color: var(--ink-2); }
.st-facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.st-facilities li { display: flex; align-items: baseline; gap: 6px; }
.st-facilities .icon { width: 14px; height: 14px; flex: none; align-self: center; color: var(--accent); }

/* hotel detail page */
.st-stars { display: flex; align-items: center; gap: 2px; min-height: 18px; margin: 0; color: #d99a1e; }
.st-stars .icon { width: 16px; height: 16px; fill: currentColor; }
.st-stars span { font-size: .8rem; font-weight: 700; color: var(--accent); }
.st-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink-2); }
.st-addr .icon { width: 15px; height: 15px; flex: none; }
.st-addr .link { font-weight: 700; font-size: .88rem; }
.st-photos { margin: 16px 0 14px; }
.st-hotel__grid { display: grid; gap: 24px; }
.st-hotel__main { min-width: 0; }
.st-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.st-highlights li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 600; }
.st-highlights .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.st-hotel .st-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-stay__change { grid-column: 1 / -1; justify-self: start; font-weight: 700; }
.st-rooms__note { margin: -4px 0 14px; font-size: .88rem; }
.st-room { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.st-room__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 13px 16px; background: var(--sand); }
.st-room .st-room__head h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; font-size: 1.02rem; }
.st-room__head .icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.st-room__from { font-size: .82rem; color: var(--ink-2); }
.st-hotel .st-rate { padding: 14px 16px; }
.st-rate.is-best { background: var(--accent-soft); }
.st-rate__best { padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.st-rate__info > * { max-width: 100%; overflow-wrap: anywhere; }
.st-rate__board { display: inline-flex; align-items: center; gap: 7px; }
.st-rate__board .icon { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
.st-rate__offer { display: inline-flex; align-items: flex-start; gap: 5px; font-size: .8rem; font-weight: 600; color: #9a5b00; }
.st-rate__offer .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.st-about p { margin: 0 0 10px; }
.st-about__more summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--accent); cursor: pointer; list-style: none; }
.st-about__more summary::-webkit-details-marker { display: none; }
.st-about__more[open] summary { display: none; }
.st-summary { display: none; }
.st-bar .price__value small { font-size: .75rem; font-weight: 500; color: var(--ink-2); }
@media (min-width: 640px) {
  .st-hotel .st-stay { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .st-photos--few { grid-template-columns: 1fr; grid-template-rows: 400px; }
  .st-photos--few .gallery-hero__item:not(:first-child) { display: none; }
}
@media (min-width: 1024px) {
  .st-hotel__grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 32px; }
  .st-summary { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -24px rgba(16, 24, 40, .28); }
  .st-summary__price { font-size: 2rem; font-weight: 800; line-height: 1.1; }
  .st-summary__facts { display: grid; gap: 9px; margin: 14px 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .88rem; }
  .st-summary__facts li { display: flex; align-items: center; gap: 8px; }
  .st-summary__facts .icon { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
  .st-summary__facts .is-free, .st-summary__facts .is-free .icon { color: var(--success); }
}

.st-book { display: grid; gap: 20px; padding-block: 24px 60px; }
.st-book__title { margin: 0 0 14px; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.st-guest + .st-guest { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.st-guest__room { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.st-rules { display: grid; gap: 12px; margin: 0; }
.st-rules dt { font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-2); }
.st-rules dd { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 0; }
.summary__row--total { font-size: 1.1rem; }
.summary__row--total strong { font-size: 1.3rem; }
@media (max-width: 767px) { .st-book > aside { order: -1; } }
@media (min-width: 640px) {
  .st-card { grid-template-columns: 200px minmax(0, 1fr); min-height: 170px; }
  .st-card__body { padding: 16px 18px; }
  .st-card__name { font-size: 1.14rem; }
  .st-rate { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; }
}
@media (min-width: 900px) {
  .st-hero__inner { padding-top: calc(var(--header-h) + 56px); padding-bottom: 52px; }
  .st-search { grid-template-columns: 1.6fr 1fr 1fr .6fr .8fr .8fr auto; align-items: end; padding: 16px; }
  .st-field--wide { grid-column: auto; }
  .st-ages { grid-template-columns: repeat(4, minmax(0, 150px)); grid-row: 2; }
  .st-search__go { grid-column: auto; min-height: 46px; }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-stay { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .st-book { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 30px; }
  .st-book > aside { position: sticky; top: 20px; }
}

.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
.ds-when, .ds-info { scroll-margin-top: 32px; }

/* Phone layout: nothing on a page may be wider than the screen. */
.two-col > *, .account > *, .step, .block { min-width: 0; }
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose, .feature-list li, .facts dd { overflow-wrap: anywhere; }
.feature-list li > * { min-width: 0; }
@media (max-width: 1023px) {
    .account-nav { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 480px) {
    .btn { white-space: normal; max-width: 100%; text-align: center; }
    .step__nav { flex-wrap: wrap; }
    .step__nav .btn { flex: 1 1 100%; justify-content: center; }
}
.ds-hero { overflow: hidden; }

/* booking review step */
.summary__unit { display: block; margin-top: 1px; font-size: .74rem; color: var(--muted); }
.rv { display: grid; gap: 14px; }
.rv-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 18px; }
.rv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rv-card__head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 800; }
.rv-card__head h3 .icon { width: 18px; height: 18px; color: var(--accent); }
.rv-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 700; cursor: pointer; }
.rv-edit .icon { width: 14px; height: 14px; }
.rv-edit:hover { border-color: var(--accent); color: var(--accent); }
.rv-trip { display: flex; align-items: center; gap: 14px; }
.rv-trip img { width: 104px; height: 78px; flex: none; border-radius: 12px; object-fit: cover; background: var(--sand); }
.rv-trip strong { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.rv-trip span { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .85rem; color: var(--ink-2); }
.rv-trip span .icon { width: 14px; height: 14px; }
.rv-facts { display: grid; gap: 8px; margin: 16px 0 0; }
.rv-facts > div { padding: 10px 12px; border-radius: 12px; background: var(--sand); }
.rv-facts dt { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.rv-facts dt .icon { width: 14px; height: 14px; }
.rv-facts dd { margin: 3px 0 0; font-size: .92rem; font-weight: 700; }
.rv-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rv-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.rv-list li:first-child { border-top: 0; padding-top: 0; }
.rv-list li:last-child { padding-bottom: 0; }
.rv-list__tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.rv-list__tick .icon { width: 13px; height: 13px; stroke-width: 3; }
.rv-list__name { flex: 1; min-width: 0; padding-top: 1px; }
.rv-list__name small { display: block; margin-top: 1px; font-size: .76rem; color: var(--muted); }
.rv-list strong { padding-top: 1px; white-space: nowrap; }
.rv-list strong.is-free { font-size: .8rem; font-weight: 700; color: var(--success); }
.rv-list__empty { color: var(--muted); }
.rv-people__label { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.rv-people__label:not(:first-child) { margin-top: 16px; }
.rv-kv { display: grid; gap: 12px 20px; margin: 0; }
.rv-kv dt { font-size: .78rem; color: var(--muted); }
.rv-kv dd { margin: 2px 0 0; font-size: .92rem; font-weight: 700; overflow-wrap: anywhere; }
.rv-people__others { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rv-people__others li { padding: 6px 12px; border-radius: 999px; background: var(--sand); font-size: .85rem; font-weight: 600; }
.rv-pay { border-radius: var(--r-lg); background: var(--forest); color: #fff; padding: 20px; }
.rv-pay__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.rv-pay__total span { display: block; font-weight: 700; }
.rv-pay__total small { display: block; margin-top: 2px; font-size: .78rem; color: rgba(255, 255, 255, .7); }
.rv-pay__total strong { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.rv-pay__plan { display: grid; gap: 10px; padding: 16px 0; }
.rv-pay__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .92rem; }
.rv-pay__row small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .7); }
.rv-pay__row strong { white-space: nowrap; }
.rv-pay__row.is-today { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.rv-pay__row.is-today strong { font-size: 1.15rem; color: #f4c27a; }
.rv-pay__fine { display: flex; gap: 8px; margin: 0; font-size: .78rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.rv-pay__fine .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (min-width: 640px) {
  .rv-facts { grid-template-columns: 1.6fr 1fr 1fr; }
  .rv-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-kv .is-wide { grid-column: 1 / -1; }
}
.step h1[tabindex="-1"]:focus, .step h2[tabindex="-1"]:focus { outline: none; }
.kibubu-promise { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 1px solid #e8dcc8; }
.kibubu-promise__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; font-size: .92rem; }
.kibubu-promise__title .icon { width: 17px; height: 17px; color: var(--accent); }
.kibubu-promise ul { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 18px; font-size: .84rem; color: var(--ink-2); }
.kibubu-promise .check { font-size: .86rem; font-weight: 600; }

/* ===== main menu (2026-11-10): Destinations · Flights · Accommodation · Activities · Holiday Packages · Kibubu · Travel Services · About · Contact */
@media (min-width: 1024px) { .nav { display: none; } .menu-toggle { display: inline-grid; } }
@media (min-width: 1200px) {
  .nav { display: block; margin-left: 8px; }
  .menu-toggle { display: none; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  body:not(.admin) .nav__link { padding: 10px 6px; letter-spacing: .06em; font-size: .66rem; }
  .site-header__inner { gap: 10px; }
  .nav__list { gap: 0; }
}
@media (min-width: 1400px) { body:not(.admin) .nav__link { padding: 10px 9px; letter-spacing: .1em; } .nav__list { gap: 2px; } }
body:not(.admin) .nav__link.nav__link--kibubu { margin-inline: 4px; padding-inline: 14px; border-radius: 999px; background: #E9B470; color: #1d1a14; }
body:not(.admin) .nav__link.nav__link--kibubu:hover { background: #f0c385; color: #1d1a14; }
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link.nav__link--kibubu { color: #1d1a14; }
body:not(.admin) .site-header--overlay:not(.is-scrolled):not(.is-open) .nav__link.nav__link--kibubu:hover { background: #f0c385; color: #1d1a14; }
.nav__item:nth-last-child(-n+4) > .mega--rich { left: auto; right: -24px; }

/* phone menu: icon rows with a short line under each name */
.drawer__body { padding-top: 10px; }
.drawer__nav--rows > li { border-bottom: 0; }
body:not(.admin) .drawer__nav--rows > .drawer__row > a,
body:not(.admin) .drawer__nav--rows > .drawer__row > details > summary {
  display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  padding: 11px 12px; margin-inline: -12px; border-radius: 14px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.2; color: #fff;
  transition: background-color .2s;
}
body:not(.admin) .drawer__nav--rows > .drawer__row > a:hover,
body:not(.admin) .drawer__nav--rows > .drawer__row > details > summary:hover { background: rgba(255, 255, 255, .06); }
.drawer__nav--rows > .drawer__row + .drawer__row { border-top: 1px solid rgba(255, 255, 255, .08); }
.drawer__ico { flex: 0 0 22px; display: grid; place-items: center; color: #a7ece8; }
.drawer__ico .icon { width: 20px; height: 20px; }
.drawer__txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.drawer__txt strong { font-weight: 600; }
.drawer__txt small { font-size: .76rem; font-weight: 400; color: rgba(255, 255, 255, .6); }
.drawer__nav--rows > .drawer__row > a > .icon,
.drawer__nav--rows > .drawer__row > details > summary > .icon { flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, .55); }
.drawer__nav--rows details[open] > summary .drawer__txt strong { color: #a7ece8; }
.drawer__nav--rows .drawer__sub { padding: 2px 0 14px 36px; }
body:not(.admin) .drawer__nav--rows > .drawer__row--kibubu > a { background: #E9B470; color: #1d1a14; margin-block: 6px; }
body:not(.admin) .drawer__nav--rows > .drawer__row--kibubu > a:hover { background: #f0c385; }
.drawer__row--kibubu .drawer__ico, .drawer__row--kibubu .drawer__txt small, .drawer__nav--rows > .drawer__row--kibubu > a > .icon { color: rgba(29, 26, 20, .75); }
.drawer__nav--rows > .drawer__row--kibubu, .drawer__nav--rows > .drawer__row--kibubu + .drawer__row { border-top-color: transparent; }
.drawer.is-open .drawer__nav > li:nth-child(8) { transition-delay: .35s; }
.drawer.is-open .drawer__nav > li:nth-child(9) { transition-delay: .4s; }
.nav__item:nth-last-child(5) > .mega--rich, .nav__item:nth-last-child(6) > .mega--rich { left: 50%; translate: -50% 0; }

/* ===== home search box (2026-11-10): five service cards + "Plan your trip" row */
.book-box { padding: clamp(10px, 1.4vw, 16px) clamp(10px, 1.6vw, 20px) clamp(14px, 1.8vw, 22px); }
.book-box__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.book-box__tabs button,
body:not(.admin) .book-box__tabs button { flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 14px 8px 12px; border: 1.5px solid transparent; border-radius: 16px; background: none; color: var(--ink); text-align: center; font-size: .92rem; letter-spacing: 0; transition: background-color .2s, border-color .2s; }
.book-box__tabs button .icon { width: 24px; height: 24px; color: var(--ink); margin-bottom: 2px; }
.book-box__tabs button strong { font-weight: 700; line-height: 1.2; }
.book-box__tabs button small { font-size: .74rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
.book-box__tabs button:hover { background: var(--sand); }
.book-box__tabs button[aria-selected="true"] { background: #fff; border-color: var(--accent); color: var(--ink); }
.book-box__tabs button[aria-selected="true"] .icon { color: var(--accent); }
.book-box__tabs button.is-kibubu { background: #fbf1e4; color: #9a6a2c; }
.book-box__tabs button.is-kibubu .icon, .book-box__tabs button.is-kibubu small { color: #b9853f; }
.book-box__tabs button.is-kibubu[aria-selected="true"] { border-color: #E9B470; }
.book-box__tabs button + button { position: relative; }
.bt-short { display: none; }
.book-box__plan { margin: 0; font-weight: 700; font-size: .95rem; white-space: nowrap; align-self: center; grid-column: 1 / -1; }
.book-box__note { grid-column: 1 / -1; margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.book-box__note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #b9853f; }
.book-box__note a { color: var(--accent); font-weight: 600; }
.book-box__panel { padding-top: 14px; }
@media (min-width: 1100px) {
  .book-box__panel:not([hidden]) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
  .book-box__panel > .bf { flex: 1 1 0; }
  .book-box__plan { flex: none; padding-inline: 6px 8px; }
  .book-box__go { flex: none; }
  .book-box__note { flex: 1 0 100%; }
}
@media (max-width: 999px) { .book-box__tabs button small { display: none; } }
@media (max-width: 899px) { .bt-long { display: none; } .bt-short { display: inline; } }
@media (max-width: 639px) {
  .book-box__tabs { gap: 4px; padding-bottom: 8px; }
  .book-box__tabs button, body:not(.admin) .book-box__tabs button { padding: 10px 2px 9px; font-size: .72rem; border-radius: 14px; }
  .book-box__tabs button .icon { width: 21px; height: 21px; margin: 0; }
  .book-box__plan { font-size: .85rem; }
}
body:not(.admin) .book-box__tabs button:hover { background: var(--sand); }
body:not(.admin) .book-box__tabs button[aria-selected="true"] { background: #fff; border-color: var(--accent); box-shadow: 0 6px 18px -10px rgba(14, 124, 123, .45); }
body:not(.admin) .book-box__tabs button.is-kibubu { background: #fbf1e4; }
body:not(.admin) .book-box__tabs button.is-kibubu[aria-selected="true"] { border-color: #E9B470; box-shadow: 0 6px 18px -10px rgba(185, 133, 63, .5); }
@media (max-width: 1099px) { .book-box__panel > .bf:nth-child(4):not(:has(+ .bf)) { grid-column: 1 / -1; } }

/* home hero: shorter on desktop so the search box sits higher (2026-11-10) */
@media (min-width: 900px) {
  .sx { height: clamp(620px, 78svh, 780px); }
  .sx__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 150px; }
  .sx__scene--open .sx__inner { padding-top: calc(var(--header-h) + 36px); }
  .sx__controls { bottom: 96px; }
}
@media (min-width: 900px) {
  .sx__scene--search .sx__inner { padding-bottom: 170px; }
  .sx__form { gap: 9px; padding: 20px 24px 22px; max-width: 400px; }
  body:not(.admin) .sx__form h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
  .sx__form .sx__field:nth-of-type(3) { display: none; } /* duration lives in the full search */
}
/* phones: shorter hero so the search box follows sooner (2026-11-10) */
@media (max-width: 899px) { .sx { height: 640px; } }
@media (max-width: 899px) {
  .sx { height: 680px; }
  .sx__inner { padding-bottom: 150px; }
  .sx__controls { bottom: 96px; }
  .sx__scene--dark .sx__head > .sx__text { display: none; }
  .sx__scene--dark .sx__panel { margin-top: 14px; }
  .sx__form .sx__field:nth-of-type(3) { display: none; }
  .sx__form { gap: 8px; padding: 18px 18px 20px; }
}
@media (max-width: 379px) { .sx { height: 700px; } }

/* phone menu v2 (2026-11-10): icon tiles, larger names, gold Kibubu row */
body:not(.admin) .drawer__nav--rows > .drawer__row > a,
body:not(.admin) .drawer__nav--rows > .drawer__row > details > summary { gap: 16px; padding: 9px 12px; font-size: 1.12rem; }
.drawer__ico { flex: 0 0 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.drawer__ico .icon { width: 22px; height: 22px; }
.drawer__txt { gap: 2px; }
.drawer__txt small { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.drawer__nav--rows > .drawer__row + .drawer__row { border-top: 0; }
.drawer__nav--rows > .drawer__row { position: relative; }
.drawer__nav--rows > .drawer__row + .drawer__row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: rgba(255, 255, 255, .1); }
.drawer__nav--rows > .drawer__row--kibubu::before, .drawer__nav--rows > .drawer__row--kibubu + .drawer__row::before { display: none; }
.drawer__nav--rows > .drawer__row > a > .icon,
.drawer__nav--rows > .drawer__row > details > summary > .icon { width: 20px; height: 20px; color: rgba(255, 255, 255, .85); }
.drawer__nav--rows .drawer__sub { padding-left: 62px; }
body:not(.admin) .drawer__nav--rows > .drawer__row--kibubu > a { margin: 6px -16px; padding-inline: 16px; background: linear-gradient(100deg, #b9853f, #e2b373 60%, #c99350); color: #fff; box-shadow: 0 10px 24px -14px rgba(185, 133, 63, .9); }
body:not(.admin) .drawer__nav--rows > .drawer__row--kibubu > a:hover { background: linear-gradient(100deg, #c18d47, #e8bb7d 60%, #d09b58); }
.drawer__row--kibubu .drawer__ico { background: transparent; border-color: transparent; color: #fff; }
.drawer__row--kibubu .drawer__txt small, .drawer__nav--rows > .drawer__row--kibubu > a > .icon { color: rgba(255, 255, 255, .92); }
.drawer.is-open .drawer__nav > li:nth-child(10) { transition-delay: .45s; }
/* ten menu items: give the header a little more width on big screens and keep labels compact */
@media (min-width: 1400px) {
  .site-header .site-header__inner { max-width: 1440px; gap: 14px; }
  body:not(.admin) .nav__link { padding: 10px 7px; letter-spacing: .07em; font-size: .68rem; }
  .nav__list { gap: 0; }
}

/* ===== elekea Points (2026-11-11) ===== */
.pts-plus { color: #127a52; font-weight: 700; }
.pts-minus { color: #a4402e; font-weight: 700; }

/* payment page box */
.pts-box { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #fbf1e4, #fff 70%); border: 1px solid #f0dcc0; }
.pts-box__head { display: flex; align-items: center; gap: 12px; }
.pts-box__coin, .pts-strip__coin { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #f3c98c, #c98f45); color: #fff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3); }
.pts-box__coin .icon, .pts-strip__coin .icon { width: 20px; height: 20px; }
.pts-box__head strong { display: block; font-size: 1rem; }
.pts-box__head small { color: var(--muted); font-size: .84rem; }
.pts-box__used { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #e8f6ef; color: #145c40; font-size: .88rem; }
.pts-box__used .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pts-box__undo { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.pts-box__form { margin-top: 12px; display: grid; gap: 6px; }
.pts-box__form label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a6a2c; }
.pts-box__row { display: flex; gap: 8px; }
.pts-box__row .input { flex: 1; min-width: 0; }
.pts-box__row .btn { flex: none; white-space: nowrap; }
.pts-box__form small, .pts-box__note { color: var(--muted); font-size: .8rem; margin: 0; }
.pts-box__note { margin-top: 10px; }
.pts-box__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--accent); }
.pts-box__more .icon { width: 14px; height: 14px; }

/* account overview strip */
.pts-strip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: linear-gradient(110deg, #0b1c29, #12384a); color: #fff; }
.pts-strip__text { flex: 1; min-width: 0; }
.pts-strip__text strong { display: block; font-size: 1.02rem; }
.pts-strip__text span { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.pts-strip__go { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E9B470; white-space: nowrap; }
.pts-strip__go .icon { width: 15px; height: 15px; }
@media (max-width: 520px) { .pts-strip__go { display: none; } }

/* account points page */
.pts-hero { display: grid; gap: 14px; }
@media (min-width: 760px) { .pts-hero { grid-template-columns: 1.1fr 1fr; } }
.pts-hero__main, .pts-hero__level { border-radius: 20px; padding: 20px 22px; }
.pts-hero__main { color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(95, 194, 190, .35), rgba(95, 194, 190, 0) 60%), radial-gradient(60% 90% at 0% 100%, rgba(224, 164, 88, .3), rgba(224, 164, 88, 0) 60%), #0b1c29; }
.pts-hero__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a7ece8; }
.pts-hero__num { display: block; margin: 6px 0 2px; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); line-height: 1; }
.pts-hero__num small { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.pts-hero__worth { color: #E9B470; font-weight: 600; }
.pts-hero__level { border: 1px solid var(--line); background: #fff; display: grid; gap: 6px; align-content: start; }
.pts-hero__level .pts-hero__label { color: var(--muted); }
.pts-hero__level > strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--lv); text-transform: uppercase; }
.pts-hero__bonus { font-size: .86rem; font-weight: 600; }
.pts-hero__level small { color: var(--muted); font-size: .84rem; }
.pts-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; }
.pts-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5FC2BE, #0E7C7B); }

.pts-levels { display: grid; gap: 12px; }
@media (min-width: 760px) { .pts-levels { grid-template-columns: repeat(3, 1fr); } }
.pts-level { position: relative; border: 1px solid var(--line); border-top: 4px solid var(--lv); border-radius: 16px; padding: 14px 16px; background: #fff; }
.pts-level.is-current { box-shadow: 0 12px 30px -18px rgba(11, 34, 51, .5); border-color: var(--lv); }
.pts-level__head { display: flex; align-items: center; gap: 8px; }
.pts-level__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lv); }
.pts-level__head strong { font-size: 1.02rem; }
.pts-level__head em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--lv); padding: 3px 8px; border-radius: 99px; }
.pts-level__rule { margin: 4px 0 8px; font-size: .84rem; color: var(--muted); }
.pts-level ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.pts-level li::marker { color: var(--lv); }

.pts-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .pts-grid { grid-template-columns: 1fr 1fr; } }
.pts-card { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; background: #fff; }
.pts-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 6px; }
.pts-card h2 .icon { width: 20px; height: 20px; color: var(--accent); }
.pts-card p { font-size: .9rem; color: var(--ink-2); }
.pts-copy { display: flex; gap: 8px; }
.pts-copy .input { flex: 1; min-width: 0; font-size: .86rem; }
.pts-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pts-ways li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.pts-ways b { color: #9a6a2c; }
.pts-bday { margin-top: 12px; display: grid; gap: 6px; }
.pts-bday label { font-size: .84rem; font-weight: 600; }
.pts-table td:nth-child(2) { white-space: normal; }

/* public page */
.pp-steps { display: grid; gap: 14px; }
@media (min-width: 760px) { .pp-steps { grid-template-columns: repeat(3, 1fr); } }
.pp-step { border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; background: #fff; }
.pp-step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: 10px; }
.pp-step--gold .pp-step__n { background: #E0A458; }
.pp-step h3 { font-size: 1.15rem; margin: 0 0 4px; }
.pp-step p { margin: 0; color: var(--ink-2); }
.pp-value { margin-top: 18px; display: grid; gap: 16px; align-items: center; padding: 22px 24px; border-radius: 22px; background: #e7f4f3; }
@media (min-width: 900px) { .pp-value { grid-template-columns: 1fr 1.2fr; } }
.pp-value h2 { margin: 2px 0 4px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: var(--accent); }
.pp-value p { margin: 0; }
.pp-example { display: flex; align-items: center; gap: 8px; }
.pp-example span { flex: 1; text-align: center; padding: 12px 6px; border-radius: 14px; background: #fff; font-size: .8rem; color: var(--muted); }
.pp-example span b { display: block; font-size: 1.15rem; color: var(--ink); }
.pp-example span.is-end { background: #fbf1e4; }
.pp-example i { flex: none; color: var(--muted); }
.pp-example i .icon { width: 16px; height: 16px; }
.pp-bonus { margin-top: 26px; }
.pp-bonus ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .pp-bonus ul { grid-template-columns: repeat(4, 1fr); } }
.pp-bonus li { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: #fbf1e4; }
.pp-bonus li .icon { width: 22px; height: 22px; color: #b9853f; }
.pp-bonus li b { font-family: "Oswald", var(--font-poster); font-size: 1.6rem; font-weight: 600; color: #9a6a2c; line-height: 1; }
.pp-bonus li span { font-size: .9rem; }
.pp-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; border-radius: 22px; color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(95, 194, 190, .3), rgba(95, 194, 190, 0) 60%), #0b1c29; }
.pp-cta h2 { margin: 0 0 4px; color: #fff; font-size: 1.5rem; }
.pp-cta p { margin: 0; color: rgba(255, 255, 255, .75); }
body:not(.admin) .pp-cta h2 { color: #fff; }
body:not(.admin) .pp-step h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; }

/* ===== customer account: premium redesign (2026-11-11) ===== */
.ac-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding-top: clamp(26px, 4vw, 44px);
  background: radial-gradient(60% 120% at 100% 0%, rgba(95, 194, 190, .28), rgba(95, 194, 190, 0) 60%), radial-gradient(50% 90% at 0% 100%, rgba(233, 180, 112, .22), rgba(233, 180, 112, 0) 60%), linear-gradient(180deg, #0b1c29, #0f2836); }
.ac-hero__arcs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ac-hero__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.ac-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ac-id__avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.7rem; letter-spacing: .04em; color: #0b1c29;
  background: linear-gradient(140deg, #f6d9a8, #d79b52); box-shadow: 0 0 0 4px rgba(233, 180, 112, .25), 0 16px 34px -14px rgba(0, 0, 0, .7); }
.ac-id__greet { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a7ece8; }
.ac-id__name { margin: 2px 0 6px; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1.05; color: #fff; }
.ac-id__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.ac-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: .78rem; }
.ac-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 10px var(--lv); }
.ac-hero__actions { display: flex; align-items: center; gap: 14px; }
.ac-signout { display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; border: 0; background: none; color: rgba(255, 255, 255, .72); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ac-signout:hover { color: #fff; }
.ac-signout .icon { width: 16px; height: 16px; }

.ac-tabs { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: flex; gap: 4px; }
.ac-tabs a { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 14px 18px 16px; font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .7); border-radius: 14px 14px 0 0; transition: color .2s, background-color .2s; }
.ac-tabs a .icon { width: 18px; height: 18px; }
.ac-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.ac-tabs a.is-active { color: var(--ink); background: var(--bg, #faf8f4); }
.ac-tabs a.is-active .icon { color: var(--accent); }
@media (max-width: 760px) {
  .ac-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .ac-tabs a { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 2px 12px; font-size: .68rem; text-align: center; }
  .ac-tabs a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ac-id__avatar { width: 58px; height: 58px; font-size: 1.35rem; }
  .ac-hero__actions { width: 100%; justify-content: space-between; }
}
.ac-body { padding-block: clamp(22px, 3vw, 36px) 90px; }

/* next trip */
.ac-next { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; color: #fff; min-height: 420px; display: flex; box-shadow: 0 40px 80px -40px rgba(11, 34, 51, .65); }
.ac-next__media, .ac-next__media picture { position: absolute; inset: 0; z-index: -2; }
.ac-next__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease); }
.ac-next:hover .ac-next__media img { transform: scale(1.07); }
.ac-next::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 28, .35) 0%, rgba(6, 18, 28, .15) 35%, rgba(6, 18, 28, .88) 100%); }
.ac-next__inner { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 34px); }
.ac-next__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-next__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ac-next__main { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
body:not(.admin) .ac-next__title { margin: 0 0 12px; color: #fff; font-family: "Oswald", var(--font-poster); font-weight: 600; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: .98; max-width: 16ch; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.ac-next__lead { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .86); }
.ac-next__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.ac-next__facts li { display: inline-flex; align-items: center; gap: 7px; }
.ac-next__facts .icon { width: 16px; height: 16px; color: #E9B470; }
.ac-count { flex: none; display: grid; justify-items: center; min-width: 128px; padding: 14px 18px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ac-count strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); line-height: 1; color: #fff; }
.ac-count span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E9B470; }
.ac-next__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.ac-paid { flex: 1 1 280px; max-width: 460px; display: grid; gap: 7px; }
.ac-paid__row { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: rgba(255, 255, 255, .86); }
.ac-paid__row b { color: #fff; }
.ac-paid__bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.ac-paid__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5FC2BE, #E9B470); }
.ac-paid small { font-size: .8rem; color: rgba(255, 255, 255, .7); }
.ac-next__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-btn-glass { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ac-btn-glass:hover { background: #fff; color: var(--ink); }
.ac-next--empty .ac-next__inner { justify-content: flex-end; }
@media (max-width: 640px) {
  .ac-next { min-height: 520px; border-radius: 22px; }
  .ac-count { min-width: 0; padding: 10px 16px; flex-direction: row; }
  .ac-next__btns, .ac-next__btns .btn { width: 100%; }
}

/* three cards */
.ac-cards { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .ac-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
a.ac-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(11, 34, 51, .45); }
.ac-card__label { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ac-card__label .icon { width: 17px; height: 17px; }
.ac-card__big { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2.6rem; line-height: 1.05; }
.ac-card__mid { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1.15; }
.ac-card__sub { font-size: .88rem; color: var(--ink-2); }
.ac-card__bar { height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .12); overflow: hidden; margin-top: auto; }
.ac-card__bar i { display: block; height: 100%; background: currentColor; border-radius: inherit; }
.ac-card__foot { font-size: .8rem; font-weight: 600; }
.ac-card__cta { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ac-card__cta .icon { width: 15px; height: 15px; transition: transform .25s; }
a.ac-card:hover .ac-card__cta .icon { transform: translateX(4px); }
.ac-card__btns { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

.ac-card--points { border: 0; color: #2a1d0b; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #f6d9a8, #e2ad66 55%, #c98f45); }
.ac-card--points .ac-card__label, .ac-card--points .ac-card__sub { color: rgba(42, 29, 11, .75); }
.ac-card--points .ac-card__bar { background: rgba(42, 29, 11, .15); }
.ac-card--points .ac-card__bar i { background: #2a1d0b; }
.ac-card--points::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .18); }
.ac-card--due { border: 0; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(95, 194, 190, .35), rgba(95, 194, 190, 0) 60%), #0E7C7B; }
.ac-card--due .ac-card__label, .ac-card--due .ac-card__sub { color: rgba(255, 255, 255, .78); }
.ac-card--due .ac-card__cta { color: #fff; }
.ac-card--kibubu { background: #fbf1e4; border-color: #f0dcc0; }
.ac-card--kibubu .ac-card__label, .ac-card--kibubu .ac-card__cta { color: #9a6a2c; }
.ac-card--team .ac-card__label { color: var(--accent); }

/* stats line */
.ac-stats { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
@media (min-width: 760px) { .ac-stats { grid-template-columns: repeat(4, 1fr); } }
.ac-stats > div { padding: 18px 22px; }
.ac-stats > div + div { border-left: 1px solid var(--line); }
@media (max-width: 759px) { .ac-stats > div:nth-child(3) { border-left: 0; } .ac-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.ac-stats dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ac-stats dd { margin: 4px 0 0; font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--ink); }

/* trips */
.ac-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: clamp(30px, 4vw, 46px) 0 14px; }
.ac-sec-head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ac-trips { display: grid; gap: 16px; }
@media (min-width: 700px) { .ac-trips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-trip { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.ac-trip:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(11, 34, 51, .5); }
.ac-trip.is-cancelled { opacity: .7; }
.ac-trip__img { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.ac-trip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ac-trip:hover .ac-trip__img img { transform: scale(1.06); }
.ac-trip__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.ac-trip__body { display: grid; gap: 4px; padding: 16px 18px 18px; }
.ac-trip__body small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ac-trip__body strong { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
.ac-trip__meta { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.ac-trip__meta .icon { width: 15px; height: 15px; color: var(--muted); }
.ac-trip__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ac-trip__foot b { font-size: 1.05rem; }
.ac-trip__foot em { font-style: normal; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #fbf1e4; color: #9a6a2c; display: inline-flex; align-items: center; gap: 4px; }
.ac-trip__foot em.is-ok { background: #e8f6ef; color: #145c40; }
.ac-trip__foot em .icon { width: 13px; height: 13px; }

/* ideas */
.ac-ideas { display: grid; gap: 14px; }
@media (min-width: 700px) { .ac-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-idea { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 230px; padding: 18px; border-radius: 22px; color: #fff; }
.ac-idea picture, .ac-idea > img { position: absolute; inset: 0; z-index: -2; }
.ac-idea img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ac-idea:hover img { transform: scale(1.07); }
.ac-idea::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 28, 0) 35%, rgba(6, 18, 28, .85)); }
.ac-idea span { display: grid; gap: 2px; }
.ac-idea small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E9B470; }
.ac-idea strong { font-family: "Oswald", var(--font-poster); font-weight: 600; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.ac-idea em { font-style: normal; font-size: .84rem; color: rgba(255, 255, 255, .82); }
@media (max-width: 699px) { .ac-idea { min-height: 150px; } }

/* other account pages: the old sidebar layout is gone, keep their headings tidy */
.ac-body .account-head { margin-bottom: 22px; }
.ac-tabs__s { display: none; }
@media (max-width: 760px) { .ac-tabs__l { display: none; } .ac-tabs__s { display: inline; } }

/* ===== trip page: hotel standard instead of hotel names, "Want it your way?" (2026-11-11) ===== */
.stay-std { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, #e7f4f3, #fff 75%); border: 1px solid #cfe7e5; }
.stay-std__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.stay-std__icon .icon { width: 24px; height: 24px; }
.stay-std h3 { margin: 2px 0 6px; font-size: 1.2rem; }
.stay-std p { margin: 0; color: var(--ink-2); }
.stay-std__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stay-std__list li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: .84rem; font-weight: 600; }
.stay-std__list .icon { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 560px) { .stay-std { flex-direction: column; } }
.stay-levels { display: grid; gap: 10px; }
@media (min-width: 640px) { .stay-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stay-level { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.stay-level strong { font-size: 1rem; }
.stay-level span { font-size: .86rem; color: var(--ink-2); }
.stay-level em { font-style: normal; font-size: .84rem; font-weight: 700; color: var(--accent); }

.wiyw { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px; margin-top: 14px; padding: 20px 22px; border-radius: 20px; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, rgba(95, 194, 190, .35), rgba(95, 194, 190, 0) 60%), radial-gradient(70% 100% at 0% 100%, rgba(233, 180, 112, .3), rgba(233, 180, 112, 0) 60%), #0b1c29; transition: transform .3s var(--ease), box-shadow .3s; }
.wiyw:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(11, 34, 51, .7); }
.wiyw__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(233, 180, 112, .2); color: #E9B470; }
.wiyw__icon .icon { width: 20px; height: 20px; }
.wiyw strong { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.wiyw > span:not([class]) { font-size: .88rem; color: rgba(255, 255, 255, .8); }
.wiyw__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E9B470; }
.wiyw__go .icon { width: 15px; height: 15px; transition: transform .25s; }
.wiyw:hover .wiyw__go .icon { transform: translateX(4px); }

/* desktop menu, 7 items (2026-11-11): more breathing room + Contact button on the right */
.hdr-contact { display: none; }
@media (min-width: 1200px) {
  body:not(.admin) .nav__link { padding: 10px 12px; letter-spacing: .12em; font-size: .72rem; }
  .nav__list { gap: 2px; }
  .site-header__inner { gap: 18px; }
  .hdr-contact { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid currentColor; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
  .hdr-contact .icon { width: 15px; height: 15px; }
  .hdr-contact:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (min-width: 1400px) { body:not(.admin) .nav__link { padding: 10px 15px; } }
@media (min-width: 1200px) and (max-width: 1399px) {
  body:not(.admin) .nav__link { padding: 10px 9px; letter-spacing: .09em; }
  .site-header__inner { gap: 12px; }
  .hdr-contact { width: 40px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
  .hdr-contact .icon { width: 17px; height: 17px; }
}

/* ===== sign in always visible (2026-11-11): header button on every screen size + top of the phone menu */
.account-link { display: inline-flex; align-items: center; justify-content: center; }
.account-link__txt { display: none; }
@media (min-width: 350px) {
  .account-link--signin { width: auto; gap: 6px; padding: 0 14px 0 11px; height: 40px; border: 1.5px solid currentColor; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .account-link--signin .icon { width: 17px; height: 17px; }
  .account-link--signin .account-link__txt { display: inline; }
}
@media (min-width: 1200px) {
  .account-link--signin { width: 40px; padding: 0; }
  .account-link--signin .account-link__txt { display: none; }
}
.drawer__acct { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.drawer__acct > .icon { margin-left: auto; width: 18px; height: 18px; opacity: .7; }
.drawer__acct strong { display: block; font-size: .95rem; }
.drawer__acct small { display: block; font-size: .8rem; opacity: .7; }
.drawer__acct-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); flex: none; }
.drawer__acct-ico .icon { width: 20px; height: 20px; }
.drawer__acct--out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; border: 0; }
.drawer__acct--out .btn { justify-content: center; }
.drawer__acct--out .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .35); color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; }
@media (max-width: 380px) { .account-link--signin { padding: 0 11px 0 9px; letter-spacing: .06em; } }

/* ===== Destinations menu search (2026-11-11) */
.mega--dest { grid-template-rows: auto 1fr; row-gap: 14px; }
.mega--dest .mega__feature { grid-column: 3; grid-row: 1 / span 2; }
.mega__search { grid-column: 1 / 3; position: relative; display: flex; align-items: center; }
.mega__search > .icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.mega__search input { width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--sand, #f6f3ee); font: inherit; font-size: .9rem; color: var(--ink); transition: border-color .2s, background-color .2s; }
.mega__search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.mega__results { grid-column: 1 / 3; align-self: start; }
.mega__results[hidden], .mega__col[hidden], [data-dest-item][hidden] { display: none !important; }
.mega__list--results { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.mega__empty { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.mega__empty a { color: var(--accent); font-weight: 600; text-decoration: underline; }