/* ==========================================================================
   AMJAS GLOBAL TRAVEL — generated stylesheet
   --------------------------------------------------------------------------
   DO NOT EDIT. Built from static/site/css/parts/ by:

       python manage.py build_css

   Edit the partial, then re-run the command. The `@layer components` wrappers
   in the partials are removed here — see unwrap_layer() for why that is not
   optional.
   ========================================================================== */

/* ===== base/tokens.css ===== */
/* Design tokens sampled directly from the Amjas logo.
   Deliberately unlayered: rules inside @layer lose to unlayered CSS, so a
   :root declaration placed in a layer would never apply. */
/* ------------------------------------------------------------------ tokens */
:root {
  /* Royal blue — primary (logo wordmark + globe) */
  --royal-50:  #EAF3FC;
  --royal-100: #D2E5F8;
  --royal-200: #A5CAF0;
  --royal-300: #6FA9E4;
  --royal-400: #3B85D3;
  --royal-500: #1466BC;
  --royal-600: #0051A6;
  --royal-700: #013E85;
  --royal-800: #002B64;
  --royal-900: #001B42;

  /* Deep navy + ink */
  --navy:  #002575;
  --ink:   #0B1B33;
  --ink-2: #3D4C63;
  --ink-3: #6B7A91;

  /* Sky blue — accent (logo waves) */
  --sky-100: #DCF0FA;
  --sky-200: #B6DFF4;
  --sky-300: #7CC6EA;
  --sky-400: #36A7DC;
  --sky-500: #0081D3;

  /* Orange — secondary (logo swoosh + plane) */
  --sunset-50:  #FEF3E8;
  --sunset-100: #FDE3C9;
  --sunset-200: #FAC694;
  --sunset-300: #F5A75F;
  --sunset-400: #EF8A32;
  --sunset-500: #E76A0C;
  --sunset-600: #C85405;
  --sunset-700: #9E4104;

  /* Gold (logo "GLOBAL TRAVEL" gradient + sun) */
  --gold-400: #F8B625;
  --gold-500: #EFA00C;

  /* Surfaces */
  --white: #FFFFFF;
  --mist:  #F4F9FE;   /* very light blue — card + section wash */
  --mist-2:#E9F2FB;
  --line:  #DCE8F5;

  /* Gradients */
  --grad-btn:    linear-gradient(135deg, var(--royal-600) 0%, var(--sky-500) 100%);
  --grad-hover:  linear-gradient(135deg, var(--sunset-500) 0%, var(--gold-400) 100%);
  --grad-deep:   linear-gradient(150deg, var(--royal-900) 0%, var(--navy) 45%, var(--royal-600) 100%);
  --grad-text:   linear-gradient(100deg, var(--sunset-500) 0%, var(--gold-400) 100%);

  /* Elevation */
  --sh-soft: 0 4px 24px -10px rgba(0, 37, 117, .18);
  --sh-card: 0 18px 44px -22px rgba(0, 37, 117, .30);
  --sh-lift: 0 34px 70px -28px rgba(0, 37, 117, .42);
  --sh-glow: 0 18px 40px -16px rgba(231, 106, 12, .55);
  --sh-blue: 0 18px 40px -16px rgba(0, 81, 166, .48);

  /* Geometry */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Rhythm */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 8.5vw, 8rem);

  /* Type */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nav-h: 84px;
}

/* ===== base/reset.css ===== */
/* Element reset and accessibility primitives. Unlayered by design: these are
   low-specificity element rules that every utility should still beat. */
/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* belt-and-braces with body; kills sideways drag on phones */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--sunset-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; 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; top: -100px; left: 1rem; z-index: 200;
  background: var(--white); color: var(--royal-700);
  padding: .75rem 1.25rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ===== base/tokens-responsive.css ===== */
/* Token values that change at a breakpoint. Kept unlayered and imported
   after the reset, exactly where they sat in the original stylesheet. */
/* ---- responsive token overrides (unlayered: must beat the base :root) ---- */
@media (max-width: 1024px) { :root { --nav-h: 74px; } }
@media (max-width: 680px) { :root { --section: clamp(3.75rem, 12vw, 5rem); } }
@media (min-width: 1600px) { :root { --shell: 1340px; } }

/* ===== base/typography.css ===== */
/* -------------------------------------------------------------- typography */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.h-display {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.035em;
}
.h-section {
  font-size: clamp(1.95rem, 3.9vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}
.h-card {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -.02em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sunset-500);
}
.eyebrow::before {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: var(--grad-text);
}
.eyebrow--center::after {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: var(--grad-text);
}
.eyebrow--light { color: var(--gold-400); }

.lede {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-3);
  max-width: 56ch;
}
.grad-word {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ===== layout.css ===== */
/* ------------------------------------------------------------------ layout */
.shell {
  position: relative;   /* keeps content above decorative absolutes */
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--mist { background: var(--mist); }

.sec-head { max-width: 640px; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .h-section { margin-top: 1rem; }
.sec-head .lede { margin-top: 1.1rem; }
.sec-head--center .lede { margin-inline: auto; }

.sec-head--split {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.sec-head--split > div:first-child { max-width: 620px; }

/* ===== components/buttons.css ===== */
/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--grad-btn);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-body);
  font-size: .96rem; font-weight: 600; letter-spacing: .005em;
  color: var(--white);
  background: var(--btn-bg);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-blue);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, color .3s;
  white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--grad-hover);
  opacity: 0; transition: opacity .35s;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-glow); }
.btn:hover::after { opacity: 1; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--ghost {
  color: var(--white);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}
.btn--ghost:hover { box-shadow: var(--sh-glow); border-color: transparent; }

.btn--outline {
  color: var(--royal-700);
  background: transparent;
  border: 1.5px solid var(--royal-200);
  box-shadow: none;
}
.btn--outline:hover { color: var(--white); border-color: transparent; }

.btn--sm { padding: .72rem 1.35rem; font-size: .875rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; color: var(--royal-600);
  transition: gap .3s, color .3s;
}
.link-arrow svg { width: 17px; height: 17px; transition: transform .3s; }
.link-arrow:hover { color: var(--sunset-500); gap: .8rem; }

/* ===== components/decorative.css ===== */
/* -------------------------------------------------------------- decorative */
.wave-divider { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; }
.wave-divider svg { width: 100%; height: clamp(48px, 6vw, 92px); }
.wave-divider--top { top: -1px; }
.wave-divider--bottom { bottom: -1px; }

/* Flight arc — echoes the orbit swoosh in the logo */
.arc-motif {
  position: absolute; pointer-events: none; opacity: .5;
  color: var(--royal-200); max-width: 40%;
}
.arc-motif path { stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 7 9; fill: none; }
@media (max-width: 1024px) { .arc-motif { display: none; } }

.blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; z-index: 0;
}

/* --------------------------------------------------------------- reveal fx */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   AMJAS — Components
   ========================================================================== */

/* ===== components/navbar.css ===== */
/* --------------------------------------------------------------- 0. navbar */
/* The bar is solid white at every scroll position — no transparency, no colour
   transition, no height change. Only a soft elevation shadow fades in once the
   page has scrolled, to lift it off the content beneath. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .45s ease;
}
.nav__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}
/* The logo is the supplied artwork, untouched: no filter, no mix-blend-mode,
   no opacity change, no recolouring, and nothing layered over it. The white bar
   gives it the light surface it needs on its own. */
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 44px; width: auto; }

.nav__menu { display: flex; align-items: center; gap: 2.1rem; margin-left: auto; }
.nav__link {
  position: relative; font-size: .93rem; font-weight: 500;
  color: var(--ink); transition: color .3s; padding-block: .4rem;
}
.nav__link:hover { color: var(--royal-600); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  border-radius: 2px; background: var(--grad-text); transition: width .35s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: .9rem; flex: none; }

/* scrolled state — elevation only; background, height and colours never change */
.nav.is-stuck { box-shadow: 0 14px 36px -26px rgba(0, 37, 117, .5); }

.nav__burger { display: none; width: 44px; height: 44px; position: relative; flex: none; }
.nav__burger span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .35s, opacity .25s;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav__drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 1.25rem var(--gutter) 2rem;
  display: none; flex-direction: column; gap: .25rem;
  box-shadow: var(--sh-card);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a {
  padding: .95rem .25rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--mist-2);
}
.nav__drawer .btn { margin-top: 1.1rem; }

/* ------------------------------------------------ destinations dropdown
   "Destinations" in the bar is a menu, not a page (the separate listing
   page was retired at the client's request): hover or keyboard focus opens
   a panel listing every active country with its flag, each going straight
   to that country's page. The 12px ::before bridge covers the gap between
   the trigger and the panel so the menu doesn't close while the pointer
   crosses it. In the drawer the same list renders inline — no toggle. */
.nav__dd { position: relative; }
.nav__dd-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__dd-btn svg { width: 14px; height: 14px; transition: transform .3s; }
.nav__dd:hover .nav__dd-btn svg,
.nav__dd:focus-within .nav__dd-btn svg { transform: rotate(180deg); }

.nav__dd-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px; padding: .6rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(0, 37, 117, .45);
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
.nav__dd::before {
  content: ""; position: absolute; left: -1rem; right: -1rem;
  top: 100%; height: 14px;
}
.nav__dd:hover .nav__dd-panel,
.nav__dd:focus-within .nav__dd-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__dd-panel a {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem; border-radius: 12px;
  font-size: .92rem; font-weight: 500; color: var(--ink);
  transition: background .25s, color .25s;
}
.nav__dd-panel a:hover { background: var(--royal-50); color: var(--royal-700); }
.nav__dd-panel img {
  width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex: none;
  box-shadow: 0 2px 8px rgba(0, 27, 66, .25);
}

/* the same list inside the mobile drawer, indented under its heading */
.nav__drawer-group { border-bottom: 1px solid var(--mist-2); padding-bottom: .35rem; }
.nav__drawer-group > span {
  display: block; padding: .95rem .25rem .35rem;
  font-weight: 600; color: var(--ink);
}
.nav__drawer-group a {
  display: flex; align-items: center; gap: .7rem;
  border-bottom: 0; padding: .55rem .25rem .55rem 1rem;
  font-weight: 500; color: var(--ink-2);
}
.nav__drawer-group img {
  width: 24px; height: 24px; border-radius: 7px; object-fit: cover; flex: none;
}

/* ===== components/hero.css ===== */
/* ----------------------------------------------------------------- 1. hero */
/* The bar is opaque now, so the hero starts below it rather than sliding under
   it — otherwise the top of the photograph is permanently hidden. */
.hero {
  position: relative;
  margin-top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 8rem;
  overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  transition: opacity 1.5s ease;
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; animation: kenburns 12s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,27,66,.62) 0%, rgba(0,27,66,.22) 35%, rgba(0,27,66,.55) 100%),
    linear-gradient(95deg, rgba(0,43,100,.72) 0%, rgba(0,43,100,.20) 62%);
}

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem; align-items: center; width: 100%;
}
.hero__copy { max-width: 660px; color: var(--white); }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .6rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.95);
}
.hero__badge b {
  display: inline-flex; align-items: center; padding: .18rem .6rem;
  border-radius: var(--r-pill); background: var(--grad-text);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hero h1 { color: var(--white); margin-top: 1.5rem; }
.hero__sub {
  margin-top: 1.4rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: rgba(255,255,255,.86); max-width: 50ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.3rem; }
.hero__trust {
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 2.6rem; color: rgba(255,255,255,.78); font-size: .875rem;
}
.hero__trust div { display: flex; align-items: center; gap: .5rem; }
.hero__trust svg { width: 18px; height: 18px; color: var(--gold-400); flex: none; }

/* floating glass destination chips */
.hero__chips { display: flex; flex-direction: column; gap: .9rem; }
.chip-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1.15rem .8rem .8rem; min-width: 232px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 44px -26px rgba(0,10,40,.7);
  color: var(--white);
  animation: floaty 6s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s;
}
.chip-card:nth-child(2) { animation-delay: -2s; margin-left: 2.4rem; }
.chip-card:nth-child(3) { animation-delay: -4s; }
.chip-card:hover { transform: translateY(-6px) scale(1.02); background: rgba(255,255,255,.2); }
.chip-card img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex: none; }
.chip-card__t { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.2; }
.chip-card__s { font-size: .78rem; color: rgba(255,255,255,.75); }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 2rem; translate: -50% 0;
  display: grid; place-items: center; gap: .5rem;
  color: rgba(255,255,255,.7); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), transparent);
  animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse { 0%,100% { opacity: .3; scale: 1 .5; } 50% { opacity: 1; scale: 1 1; } }

/* ===== components/search.css ===== */
/* ----------------------------------------------------- 1b. floating search */
.searchwrap { position: relative; z-index: 20; margin-top: -5.5rem; }
.search {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lift);
  padding: .7rem;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)) auto; gap: .35rem;
}
.search__field {
  position: relative; display: flex; flex-direction: column; gap: .1rem;
  padding: .75rem 1rem; border-radius: var(--r-md);
  transition: background .3s;
}
.search__field + .search__field::before {
  content: ""; position: absolute; left: -.2rem; top: 22%; height: 56%; width: 1px;
  background: var(--line);
}
.search__field:hover { background: var(--mist); }
.search__field label {
  font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--royal-600); display: flex; align-items: center; gap: .35rem;
}
.search__field label svg { width: 13px; height: 13px; }
.search__field input, .search__field select {
  border: 0; background: transparent; padding: 0; width: 100%;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  appearance: none; -webkit-appearance: none;
}
.search__field input::placeholder { color: var(--ink-3); font-weight: 400; }
.search__field select { cursor: pointer; }
.search__go {
  align-self: stretch; display: grid; place-items: center;
  padding-inline: 1.6rem; border-radius: var(--r-md);
  background: var(--grad-btn); color: var(--white);
  font-weight: 600; box-shadow: var(--sh-blue);
  transition: background .4s, transform .35s, box-shadow .35s;
}
.search__go:hover { background: var(--grad-hover); transform: translateY(-2px); box-shadow: var(--sh-glow); }
.search__go span { display: inline-flex; align-items: center; gap: .5rem; }
.search__go svg { width: 18px; height: 18px; }

/* ===== components/destinations.css ===== */
/* --------------------------------------------------------- 2. destinations */
.dest-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
/* the "slight overlap" — alternating vertical offset */
.dest-grid > *:nth-child(even) { transform: translateY(2.6rem); }
.dest-grid > *:nth-child(5) { grid-column: span 1; }

.dcard {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-card);
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s;
  isolation: isolate;
}
.dcard:hover { transform: translateY(-10px); box-shadow: var(--sh-lift); }
.dcard > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1); z-index: -2;
}
.dcard:hover > img { transform: scale(1.09); }
.dcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,20,54,0) 32%, rgba(0,20,54,.5) 62%, rgba(0,20,54,.9) 100%);
  transition: background .5s;
}
.dcard:hover::after {
  background: linear-gradient(180deg, rgba(0,27,66,.1) 20%, rgba(0,43,100,.62) 58%, rgba(2,15,45,.94) 100%);
}
.dcard__top {
  position: absolute; top: 1rem; left: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.dcard__flag {
  width: 42px; height: 42px; border-radius: 13px; object-fit: cover;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
}
.dcard__count {
  padding: .34rem .75rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--white); font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.dcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.35rem; color: var(--white); }
.dcard__name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.dcard__meta { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; font-size: .84rem; color: rgba(255,255,255,.78); }
.dcard__meta b { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--gold-400); }
.dcard__cta {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .4s, margin-top .5s;
  margin-top: 0;
}
.dcard__cta > span { overflow: hidden; }
.dcard:hover .dcard__cta, .dcard:focus-visible .dcard__cta {
  grid-template-rows: 1fr; opacity: 1; margin-top: .95rem;
}
.dcard__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: var(--r-pill);
  background: var(--grad-hover); color: var(--white);
  font-size: .85rem; font-weight: 600; box-shadow: var(--sh-glow);
}
.dcard__btn svg { width: 15px; height: 15px; }

/* ===== components/features.css ===== */
/* --------------------------------------------------------------- 3. why us */
/* Three columns since the section grew to six cards — two even rows of
   three, instead of a 4 + 2 orphan row. Tablet/mobile overrides in
   responsive.css (2-up, then 1-up) are unchanged. */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,1.6vw,1.5rem); }
.wcard {
  position: relative; padding: 2.2rem 1.7rem 2rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-soft);
  overflow: hidden; isolation: isolate;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .5s;
}
.wcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-deep); opacity: 0; transition: opacity .5s;
}
.wcard:hover { transform: translateY(-9px); box-shadow: var(--sh-lift); border-color: transparent; }
.wcard:hover::before { opacity: 1; }
.wcard__ico {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  background: var(--mist-2); color: var(--royal-600);
  transition: background .5s, color .5s, transform .6s cubic-bezier(.22,1,.36,1);
}
.wcard__ico svg { width: 28px; height: 28px; }
.wcard:hover .wcard__ico { background: var(--grad-hover); color: var(--white); transform: rotate(-8deg) scale(1.06); }
.wcard h3 { margin-top: 1.5rem; font-size: 1.2rem; transition: color .5s; }
.wcard p { margin-top: .7rem; font-size: .93rem; color: var(--ink-3); transition: color .5s; }
.wcard:hover h3 { color: var(--white); }
.wcard:hover p { color: rgba(255,255,255,.8); }
.wcard__num {
  position: absolute; right: 1.2rem; top: .9rem;
  font-family: var(--font-display); font-weight: 800; font-size: 3.2rem;
  color: var(--mist-2); line-height: 1; transition: color .5s; z-index: -1;
}
.wcard:hover .wcard__num { color: rgba(255,255,255,.09); }

/* ===== components/packages.css ===== */
/* ------------------------------------------------------------- 4. packages */
.pkg-rail {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: .5rem 2rem; padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.pkg-rail::-webkit-scrollbar { display: none; }
.pkg-rail > * { scroll-snap-align: start; flex: 0 0 clamp(280px, 30%, 372px); }

/* position:relative anchors the stretched .pcard__go overlay that makes
   the whole card open the package page; Book Now stacks above it. */
.pcard {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-soft);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.pcard:hover { transform: translateY(-9px); box-shadow: var(--sh-lift); }
.pcard__go { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard__book { position: relative; z-index: 2; }
.pcard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.pcard:hover .pcard__media img { transform: scale(1.08); }
.pcard__tag {
  position: absolute; top: .95rem; left: .95rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--grad-hover); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--sh-glow);
}
.pcard__rate {
  position: absolute; top: .95rem; right: .95rem;
  display: flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  font-size: .78rem; font-weight: 700; color: var(--ink);
}
.pcard__rate svg { width: 13px; height: 13px; color: var(--gold-400); }
.pcard__country {
  position: absolute; left: .95rem; bottom: .9rem;
  display: flex; align-items: center; gap: .45rem;
  color: var(--white); font-size: .84rem; font-weight: 600;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.pcard__country svg { width: 15px; height: 15px; }
.pcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: 1.14rem; line-height: 1.35; }
.pcard__hl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pcard__hl span {
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--mist); color: var(--royal-700);
  font-size: .74rem; font-weight: 500;
}
.pcard__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-top: 1.25rem;
}
.pcard__price small { display: block; font-size: .72rem; color: var(--ink-3); }
.pcard__price b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  color: var(--royal-700); letter-spacing: -.02em;
}
.pcard__price b i { font-style: normal; font-size: .82rem; font-weight: 500; color: var(--ink-3); }
.pcard__dur {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--ink-3); margin-top: .5rem;
}
.pcard__dur svg { width: 14px; height: 14px; color: var(--sky-500); }

.rail-nav { display: flex; gap: .6rem; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--royal-200); color: var(--royal-600);
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { background: var(--grad-btn); color: var(--white); border-color: transparent; transform: scale(1.06); }
.rail-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; background: none; color: var(--royal-600); border-color: var(--royal-200); }

/* ==========================================================================
   AMJAS — Components (continued)
   ========================================================================== */

/* ===== components/experiences.css ===== */
/* ---------------------------------------------------------- 5. experiences */
.exp-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
  gap: clamp(.9rem, 1.8vw, 1.9rem);
}
.exp {
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.exp__ring {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  padding: 5px; background: linear-gradient(150deg, var(--royal-200), var(--sky-200) 45%, var(--sunset-200));
  transition: transform .55s cubic-bezier(.22,1,.36,1), padding .4s, background .5s;
}
.exp:hover .exp__ring { transform: translateY(-8px) scale(1.045); background: var(--grad-hover); padding: 6px; }
.exp__ring::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(0,27,66,0) 42%, rgba(0,27,66,.62) 100%);
  z-index: 2; transition: inset .4s;
}
.exp__ring img {
  position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.exp:hover .exp__ring img { transform: scale(1.09); }
.exp__ico {
  position: absolute; z-index: 3; right: 4%; bottom: 4%;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--royal-600);
  box-shadow: var(--sh-card); transition: background .45s, color .45s, transform .5s;
}
.exp__ico svg { width: 46%; height: 46%; }
.exp:hover .exp__ico { background: var(--grad-btn); color: var(--white); transform: scale(1.1); }
.exp__label { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); letter-spacing: -.01em; }
.exp__label small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-3); letter-spacing: 0; }

/* ===== components/stats.css ===== */
/* ---------------------------------------------------------------- 6. stats */
.stats {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-deep); color: var(--white);
  padding-block: clamp(5.5rem, 9vw, 8rem);
}
.stats::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
/* Path rebased for Django's static/ tree — this is the only edit made
   to any stylesheet during the conversion. */
  background-image: url("../images/hero/hero-2.jpg");
  background-size: cover; background-position: center;
}
/* auto-fit, not a fixed four: the band now shows only the figures staff
   have filled in (one to four), and this keeps any count spread evenly. */
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; text-align: center; }
.stat__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, #FFFFFF 30%, var(--sky-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__n sup { font-size: .42em; vertical-align: super; -webkit-text-fill-color: var(--gold-400); }
.stat__l { margin-top: .7rem; font-size: .95rem; color: rgba(255,255,255,.76); }
.stat__bar { width: 42px; height: 3px; border-radius: 3px; background: var(--grad-text); margin: 1.1rem auto 0; }

/* ===== components/testimonials.css ===== */
/* --------------------------------------------------------- 7. testimonials */
.tst { position: relative; }
.tst__rail {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: .5rem 1rem; padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); scrollbar-width: none;
}
.tst__rail::-webkit-scrollbar { display: none; }
.tst__rail > * { scroll-snap-align: center; flex: 0 0 clamp(290px, 34%, 420px); }

.tcard {
  position: relative; padding: 2.1rem 1.9rem 1.9rem;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--sh-card);
  height: 100%; display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.tcard:hover { transform: translateY(-7px); box-shadow: var(--sh-lift); }
.tcard__quote {
  position: absolute; top: 1.2rem; right: 1.5rem;
  font-family: var(--font-display); font-size: 4.6rem; font-weight: 800; line-height: 1;
  color: var(--royal-100); user-select: none;
}
.tcard__stars { display: flex; gap: .18rem; color: var(--gold-400); }
.tcard__stars svg { width: 16px; height: 16px; }
.tcard p { margin-top: 1.1rem; font-size: .96rem; color: var(--ink-2); flex: 1; }
.tcard__who { display: flex; align-items: center; gap: .85rem; margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.tcard__who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--white); box-shadow: var(--sh-soft); }
.tcard__who b { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); }
.tcard__who span { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--sunset-500); font-weight: 500; }
.tcard__who span svg { width: 13px; height: 13px; }

.dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.dots button {
  width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--royal-200);
  transition: width .4s cubic-bezier(.22,1,.36,1), background .4s;
}
.dots button[aria-selected="true"] { width: 30px; background: var(--grad-text); }

/* ===== components/process.css ===== */
/* -------------------------------------------------------------- 8. process */
.proc { position: relative; }
.proc__line {
  position: absolute; left: 0; right: 0; top: 47px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--royal-200) 0 9px, transparent 9px 18px);
}
.proc__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.5rem; position: relative; }
.step { text-align: center; }
.step__dot {
  position: relative; width: 94px; height: 94px; margin-inline: auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 2px solid var(--royal-100);
  color: var(--royal-600); box-shadow: var(--sh-soft);
  transition: background .5s, color .5s, border-color .5s, transform .55s cubic-bezier(.22,1,.36,1);
}
.step__dot svg { width: 32px; height: 32px; }
.step:hover .step__dot { background: var(--grad-btn); color: var(--white); border-color: transparent; transform: translateY(-7px) scale(1.05); }
.step__n {
  position: absolute; top: -6px; right: -6px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-hover); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  box-shadow: var(--sh-glow);
}
.step h3 { margin-top: 1.3rem; font-size: 1.08rem; }
.step p { margin-top: .5rem; font-size: .88rem; color: var(--ink-3); }

/* ===== components/gallery.css ===== */
/* -------------------------------------------------------------- 9. gallery */
.masonry { columns: 4; column-gap: clamp(.75rem, 1.2vw, 1.15rem); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(.75rem, 1.2vw, 1.15rem); }
.gitem {
  position: relative; display: block; width: 100%;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-soft);
  cursor: zoom-in;
}
.gitem img { width: 100%; height: auto; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.gitem::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,43,100,0) 45%, rgba(0,27,66,.78));
  opacity: 0; transition: opacity .45s;
}
.gitem:hover img { transform: scale(1.09); }
.gitem:hover::after { opacity: 1; }
.gitem__cap {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2;
  color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s, transform .45s cubic-bezier(.22,1,.36,1);
  display: flex; align-items: center; gap: .45rem;
}
.gitem__cap svg { width: 15px; height: 15px; }
.gitem:hover .gitem__cap { opacity: 1; transform: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(1,12,32,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox.is-open { display: grid; animation: lbin .35s ease; }
@keyframes lbin { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: min(1100px, 92vw); max-height: 82vh; border-radius: var(--r-lg); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.lightbox__x, .lightbox__p, .lightbox__n {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(12px); transition: background .3s, transform .3s;
}
.lightbox__x:hover, .lightbox__p:hover, .lightbox__n:hover { background: var(--grad-hover); transform: scale(1.07); }
.lightbox__x { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox__p { left: clamp(.75rem,3vw,2.5rem); top: 50%; translate: 0 -50%; }
.lightbox__n { right: clamp(.75rem,3vw,2.5rem); top: 50%; translate: 0 -50%; }
.lightbox svg { width: 22px; height: 22px; }

/* ===== components/blog.css ===== */
/* ---------------------------------------------------------------- 10. blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.2rem,2vw,1.9rem); }
.bcard {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--sh-soft);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.bcard:hover { transform: translateY(-9px); box-shadow: var(--sh-lift); }
.bcard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.bcard:hover .bcard__media img { transform: scale(1.07); }
.bcard__cat {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .35rem .85rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--royal-700);
}
.bcard__body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.bcard__date { font-size: .78rem; color: var(--ink-3); display: flex; align-items: center; gap: .45rem; }
.bcard__date svg { width: 14px; height: 14px; color: var(--sky-500); }
.bcard h3 { margin-top: .8rem; font-size: 1.18rem; line-height: 1.38; transition: color .35s; }
.bcard:hover h3 { color: var(--royal-600); }
.bcard p { margin-top: .7rem; font-size: .91rem; color: var(--ink-3); }
.bcard .link-arrow { margin-top: auto; padding-top: 1.4rem; align-self: flex-start; }

/* ===== components/faq.css ===== */
/* ----------------------------------------------------------------- 11. faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: .8rem; }
.faq {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); overflow: hidden;
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.faq.is-open { border-color: var(--royal-200); box-shadow: var(--sh-soft); }
.faq__q {
  display: flex; width: 100%; align-items: center; gap: 1rem; justify-content: space-between;
  width: 100%; padding: 1.25rem 1.4rem; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
  letter-spacing: -.01em; transition: color .35s;
}
.faq__q:hover { color: var(--royal-600); }
.faq__ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mist-2); color: var(--royal-600);
  transition: background .4s, color .4s, transform .45s cubic-bezier(.22,1,.36,1);
}
.faq__ico svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.faq.is-open .faq__ico { background: var(--grad-hover); color: var(--white); }
.faq.is-open .faq__ico svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.faq.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.4rem 1.4rem; font-size: .94rem; color: var(--ink-3); }

.faq-aside {
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
  padding: 2.2rem 2rem; border-radius: var(--r-xl);
  background: var(--grad-deep); color: var(--white);
  box-shadow: var(--sh-card); overflow: hidden; isolation: isolate;
}
.faq-aside::after {
  content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; border-radius: 50%;
  right: -70px; bottom: -80px; background: var(--grad-hover); opacity: .28; filter: blur(28px);
}
.faq-aside h3 { color: var(--white); font-size: 1.45rem; margin-top: 1rem; }
.faq-aside p { margin-top: .8rem; font-size: .93rem; color: rgba(255,255,255,.76); }
.faq-aside .btn { margin-top: 1.6rem; }
.faq-aside__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.faq-aside__ico svg { width: 26px; height: 26px; color: var(--gold-400); }

/* ===== components/newsletter.css ===== */
/* ---------------------------------------------------------- 12. newsletter */
.news {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(4.5rem, 8vw, 7rem);
  color: var(--white); text-align: center;
}
.news::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
/* Path rebased for Django's static/ tree — this is the only edit made
   to any stylesheet during the conversion. */
  background-image: url("../images/newsletter.jpg");
  background-size: cover; background-position: center;
  transform: scale(1.05);
}
.news::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(0,27,66,.9) 0%, rgba(0,43,100,.72) 55%, rgba(0,81,166,.6) 100%);
}
.news h2 { color: var(--white); }
.news p { margin-top: 1rem; color: rgba(255,255,255,.82); max-width: 52ch; margin-inline: auto; }
.news__form {
  display: flex; gap: .5rem; max-width: 540px; margin: 2.2rem auto 0;
  padding: .5rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.news__form input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: .85rem 1.25rem; color: var(--white); font-size: .95rem;
}
.news__form input::placeholder { color: rgba(255,255,255,.62); }
.news__note { margin-top: 1.1rem; font-size: .8rem; color: rgba(255,255,255,.6); }

/* ===== components/footer.css ===== */
/* -------------------------------------------------------------- 13. footer */
.footer { background: var(--royal-900); color: rgba(255,255,255,.72); position: relative; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem);
}
/* full-colour mark on a white plate — the navy wordmark would disappear
   against the navy footer otherwise */
.footer__logo {
  display: inline-block; background: var(--white);
  padding: .8rem 1.05rem; border-radius: var(--r-md);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .6);
}
.footer__logo img { height: 48px; width: auto; }
.footer p { font-size: .92rem; margin-top: 1.3rem; max-width: 38ch; }
.footer h4 {
  color: var(--white); font-size: 1rem; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .55rem;
}
.footer h4::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--grad-text); }
.footer li + li { margin-top: .72rem; }
.footer li a { font-size: .92rem; transition: color .3s, padding-left .3s; display: inline-block; }
.footer li a:hover { color: var(--gold-400); padding-left: 6px; }

.foot-contact li { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; }
.foot-contact svg { width: 17px; height: 17px; color: var(--sky-400); flex: none; margin-top: .28rem; }

.socials { display: flex; gap: .6rem; margin-top: 1.6rem; }
.socials a {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: var(--white); transition: background .35s, transform .35s, border-color .35s;
}
.socials svg { width: 18px; height: 18px; }
.socials a:hover { background: var(--grad-hover); transform: translateY(-4px); border-color: transparent; }

.footer__map {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 16/8; background: var(--royal-800); position: relative;
}
.footer__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.footer__map-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; gap: .5rem;
  color: rgba(255,255,255,.5); font-size: .85rem; text-align: center; padding: 1rem;
}
.footer__map-fallback svg { width: 26px; height: 26px; color: var(--sky-400); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .86rem;
}
.footer__bottom a:hover { color: var(--gold-400); }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ===== components/floating.css ===== */
/* ------------------------------------------------------------ 14. floaters */
.whatsapp {
  position: fixed; right: 1.35rem; bottom: 1.35rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #25D366, #128C7E); color: #fff;
  box-shadow: 0 16px 34px -12px rgba(18,140,126,.7);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.whatsapp:hover { transform: scale(1.09) translateY(-3px); }
.whatsapp svg { width: 27px; height: 27px; }
.whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.55); animation: ripple 2.4s ease-out infinite;
}
@keyframes ripple { 0% { scale: 1; opacity: .8; } 100% { scale: 1.55; opacity: 0; } }

.totop {
  position: fixed; right: 1.35rem; bottom: 6.4rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--royal-600); box-shadow: var(--sh-card);
  opacity: 0; pointer-events: none; translate: 0 12px;
  transition: opacity .4s, translate .4s, background .35s, color .35s;
}
.totop.is-on { opacity: 1; pointer-events: auto; translate: 0 0; }
.totop:hover { background: var(--grad-btn); color: var(--white); }
.totop svg { width: 19px; height: 19px; }

/* ===== responsive.css ===== */
/* ==========================================================================
   AMJAS — Responsive (mobile-first overrides, largest breakpoint down)
   ========================================================================== */

@media (max-width: 1180px) {
  .exp-grid { grid-template-columns: repeat(4, minmax(0,1fr)); row-gap: 2rem; }
  .masonry { columns: 3; }
  .footer__top { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer__map-wrap { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {

  .nav__menu { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .nav__actions .btn { display: none; }

  .hero { padding-bottom: 7rem; padding-top: clamp(1.5rem, 4vw, 3rem); }
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__chips { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
  .hero__chips .chip-card { min-width: 0; flex: 1 1 200px; animation: none; margin-left: 0; }
  .hero__scroll { display: none; }

  .search { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .search__go { grid-column: 1 / -1; padding-block: .95rem; margin-top: .35rem; }
  .search__field + .search__field::before { display: none; }

  .dest-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dest-grid > *:nth-child(even) { transform: none; }
  .dest-grid > *:nth-child(3n+2) { transform: translateY(2rem); }

  .why-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proc__grid { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 2.75rem; }
  .proc__line { display: none; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

@media (max-width: 860px) {
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 3rem; }
  .masonry { columns: 2; }
  .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {

  .h-display { font-size: clamp(2.15rem, 9vw, 2.9rem); }

  .hero { min-height: auto; padding-top: 3rem; padding-bottom: 6rem; }
  .hero__trust { gap: 1rem 1.25rem; font-size: .82rem; }

  .searchwrap { margin-top: -4rem; }
  .search { grid-template-columns: repeat(2, minmax(0,1fr)); border-radius: var(--r-lg); }
  .search__field { padding: .65rem .8rem; }

  .dest-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
  .dest-grid > * { transform: none !important; }
  /* narrow cards need more height and less inside them, or the label collides
     with the package pill */
  .dcard { aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
  .dcard__top { top: .7rem; left: .7rem; right: .7rem; }
  .dcard__flag { width: 32px; height: 32px; border-radius: 10px; border-width: 1.5px; }
  .dcard__count { font-size: .66rem; padding: .26rem .55rem; }
  .dcard__body { padding: .9rem; }
  .dcard__name { font-size: 1.05rem; }
  .dcard__meta { font-size: .73rem; gap: .3rem; margin-top: .15rem; flex-wrap: wrap; }
  .dcard__meta b { font-size: .92rem; white-space: nowrap; }
  /* no hover on touch — keep the CTA visible, but compact */
  .dcard__cta { grid-template-rows: 1fr; opacity: 1; margin-top: .6rem; }
  .dcard__btn { padding: .42rem .8rem; font-size: .74rem; }
  .dcard__btn svg { width: 13px; height: 13px; }

  .why-grid { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .exp__label { font-size: .88rem; }
  .proc__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .blog-grid { grid-template-columns: 1fr; }

  .pkg-rail > * { flex-basis: min(84vw, 330px); }
  .tst__rail > * { flex-basis: min(86vw, 360px); }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; }

  .whatsapp { width: 50px; height: 50px; right: 1rem; bottom: 1rem; }
  .whatsapp svg { width: 24px; height: 24px; }
  .totop { right: 1rem; bottom: 5.4rem; width: 42px; height: 42px; }
}

@media (max-width: 460px) {
  .search { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats__grid { gap: 2.25rem 1rem; }
  .masonry { columns: 1; }
  .hero__cta .btn { width: 100%; }
}

/* Large screens — let the shell breathe a little more */
@media (min-width: 1600px) {
}

/* ===== pages.css ===== */
/* ==========================================================================
   PAGE-LEVEL STYLES
   --------------------------------------------------------------------------
   Astro let a component carry its own <style> block, scoped automatically.
   Django templates have no equivalent, so those blocks are collected here —
   copied verbatim, in the order the pages appear in the site, with only
   Astro's `:global(...)` wrapper removed (it was a no-op once the styles are
   no longer scoped).

   Nothing else is changed. If a rule looks odd, it looked that way before.
   ========================================================================== */


/* ---------------------------------------------------------------------
   PageHeader.astro — the inner hero on every sub-page
   --------------------------------------------------------------------- */
  /* starts below the opaque bar rather than under it */
  .page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    margin-top: var(--nav-h);
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
  }
  .page-head__bg {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
    transform: scale(1.04);
  }
  .page-head__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(115deg, rgba(0, 27, 66, .92) 0%, rgba(0, 43, 100, .74) 55%, rgba(0, 81, 166, .55) 100%);
  }
  .page-head .h-section { color: #fff; margin-top: 1rem; }
  .page-head .lede { color: rgba(255, 255, 255, .82); margin-top: 1rem; }

  .crumbs {
    display: flex; gap: .55rem; flex-wrap: wrap;
    font-size: .85rem; color: rgba(255, 255, 255, .68);
    margin-bottom: 1.5rem;
  }
  .crumbs a { transition: color .3s; }
  .crumbs a:hover { color: var(--gold-400); }
  .crumbs [aria-current] { color: #fff; }


/* ---------------------------------------------------------------------
   TestimonialsSection.astro — Swiper pagination bullets
   --------------------------------------------------------------------- */
  /* Swiper renders the pagination bullets, so mirror the .dots button styling */
  .tst-dots .tst-dot {
    width: 9px; height: 9px; border-radius: var(--r-pill);
    background: var(--royal-200); cursor: pointer; display: inline-block;
    transition: width .4s cubic-bezier(.22, 1, .36, 1), background .4s;
  }
  .tst-dots .tst-dot--on { width: 30px; background: var(--grad-text); }


/* ---------------------------------------------------------------------
   destinations/[slug].astro — country overview and quick facts
   --------------------------------------------------------------------- */
  .country-intro {
    max-width: 70ch;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  }
  .country-intro p {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    color: var(--ink-2);
    white-space: pre-line;
  }

  .quickfacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  .quickfacts > div {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1.6rem 1.4rem;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .quickfacts svg { width: 24px; height: 24px; color: var(--royal-600); margin-bottom: .5rem; }
  .quickfacts b {
    font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
    color: var(--ink); letter-spacing: -.02em;
  }
  .quickfacts span { font-size: .86rem; color: var(--ink-3); }
  @media (max-width: 860px) { .quickfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------------------------------------------------------------------
   packages/index.astro — filter chips and the grid
   --------------------------------------------------------------------- */
  .filterbar {
    display: flex; flex-wrap: wrap; gap: .55rem;
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  .chip {
    padding: .6rem 1.1rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line); background: #fff;
    font-size: .88rem; font-weight: 500; color: var(--ink-2);
    transition: background .35s, color .35s, border-color .35s, transform .35s;
  }
  .chip:hover { transform: translateY(-2px); border-color: var(--royal-200); color: var(--royal-600); }
  .chip.is-on { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: var(--sh-blue); }

  .pkg-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 1.9rem);
  }
  @media (max-width: 1024px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 680px)  { .pkg-grid { grid-template-columns: 1fr; } }

  .empty { text-align: center; color: var(--ink-3); padding-top: 2rem; }
  .empty a { color: var(--royal-600); font-weight: 600; }


/* ---------------------------------------------------------------------
   about.astro — prose column
   --------------------------------------------------------------------- */
  .prose { max-width: 70ch; }
  .prose p { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--ink-2); }
  .prose p + p { margin-top: 1.4rem; }


/* ---------------------------------------------------------------------
   contact.astro — the two-column layout and the quote form
   --------------------------------------------------------------------- */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

  .contact-side {
    padding: 2.2rem 2rem; border-radius: var(--r-xl);
    background: var(--grad-deep); color: #fff;
    box-shadow: var(--sh-card);
    position: sticky; top: calc(var(--nav-h) + 1.5rem);
  }
  @media (max-width: 900px) { .contact-side { position: static; } }
  .contact-side h3 { color: #fff; font-size: 1.3rem; margin-bottom: 1.35rem; }
  .contact-list { margin-bottom: 1.5rem; }
  .contact-list li { color: rgba(255, 255, 255, .82); }
  .contact-list li + li { margin-top: .85rem; }
  .contact-list a:hover { color: var(--gold-400); }

  .hours { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
  .hours b { display: block; font-family: var(--font-display); font-size: .98rem; }
  .hours span { display: block; font-size: .9rem; color: rgba(255, 255, 255, .74); margin-top: .35rem; }
  .hours__note { color: rgba(255, 255, 255, .5) !important; font-size: .82rem !important; }
  .qform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  @media (max-width: 560px) { .qform__row { grid-template-columns: 1fr; } }

  .qform__field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
  .qform__field label {
    font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--royal-600);
  }
  .qform__field input,
  .qform__field select,
  .qform__field textarea {
    width: 100%; padding: .85rem 1rem;
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    background: #fff; font-size: .95rem; color: var(--ink);
    transition: border-color .3s, box-shadow .3s;
  }
  .qform__field input:focus,
  .qform__field select:focus,
  .qform__field textarea:focus {
    outline: none; border-color: var(--royal-400);
    box-shadow: 0 0 0 4px rgba(0, 81, 166, .12);
  }
  .qform__field textarea { resize: vertical; min-height: 110px; }

  .qform__note {
    display: flex; align-items: center; gap: .5rem;
    margin-top: 1rem; font-size: .92rem; font-weight: 500;
  }
  .qform__note svg { width: 18px; height: 18px; }
  .qform__note.is-ok { color: #157A4B; }
  .qform__note.is-err { color: #B3261E; }


/* ---------------------------------------------------------------------
   visa.astro — the country table and CTA band
   --------------------------------------------------------------------- */
  .visa-table {
    border: 1px solid var(--line); border-radius: var(--r-xl);
    overflow: hidden; box-shadow: var(--sh-soft); background: #fff;
  }
  .visa-table table { width: 100%; border-collapse: collapse; }
  .visa-table thead { background: var(--mist); }
  .visa-table th, .visa-table td {
    text-align: left; padding: 1.05rem 1.3rem; font-size: .95rem;
    border-bottom: 1px solid var(--line);
  }
  .visa-table thead th {
    font-family: var(--font-body); font-weight: 700; font-size: .78rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--royal-700);
  }
  .visa-table tbody th {
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--font-display); font-weight: 700; color: var(--ink);
  }
  .visa-table tbody th img { border-radius: 6px; }
  .visa-table tbody tr:last-child th, .visa-table tbody tr:last-child td { border-bottom: 0; }
  .visa-table td { color: var(--ink-2); }

  .visa-cta {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    margin-top: clamp(2rem, 3vw, 3rem);
    padding: 1.8rem 2rem; border-radius: var(--r-xl);
    background: var(--grad-deep); color: #fff;
  }
  .visa-cta svg { width: 34px; height: 34px; color: var(--gold-400); flex: none; }
  .visa-cta div { flex: 1; min-width: 260px; }
  .visa-cta b { display: block; font-family: var(--font-display); font-size: 1.15rem; }
  .visa-cta span { font-size: .93rem; color: rgba(255, 255, 255, .78); }

  @media (max-width: 680px) {
    .visa-table { overflow-x: auto; }
    .visa-table table { min-width: 520px; }
  }


/* ---------------------------------------------------------------------
   404.astro — the not-found hero
   --------------------------------------------------------------------- */
  .lost {
    position: relative; isolation: isolate; overflow: hidden;
    margin-top: var(--nav-h);
    min-height: calc(78svh - var(--nav-h)); display: flex; align-items: center;
    padding-top: 3rem; padding-bottom: 5rem;
    color: #fff;
  }
  .lost__bg {
    position: absolute; inset: 0; z-index: -2;
  /* Path rebased for Django's static/ tree — this is the only edit made
     to any stylesheet during the conversion. */
    background: url('../images/hero/hero-1.jpg') center / cover;
    transform: scale(1.05);
  }
  .lost__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, rgba(0, 27, 66, .92), rgba(0, 43, 100, .7) 60%, rgba(0, 81, 166, .5));
  }
  .lost .h-display { color: #fff; margin-top: 1.2rem; }
  .lost p { margin-top: 1.3rem; max-width: 48ch; color: rgba(255, 255, 255, .82); }
  .lost__cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------------------------------------------------------------------
   Conversion appendix
   ---------------------------------------------------------------------
   Two rules that have no counterpart in the React build, because React had
   no counterpart to the thing they style. Nothing above this line changed.

   `.qform__err` — Django validates on the server, so a field can now come
   back with its own message. React only ever showed one summary line.

   `.swiper-wrapper` without `.swiper-initialized` — if the carousel library
   fails to load, the slides fall back to a scroll-snap row instead of
   stacking into a single tall column.
   --------------------------------------------------------------------- */
.qform__err {
  display: block;
  margin-top: .1rem;
  font-size: .8rem;
  font-weight: 500;
  color: #B3261E;
}

.swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper::-webkit-scrollbar { display: none; }
.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
  flex: 0 0 min(88%, 340px);
  scroll-snap-align: start;
}

/* ===== components/richtext.css ===== */
/* --------------------------------------------------- 15. editor content

   Everything in this file is scoped inside `.rte` and cannot reach any
   existing element on the site.

   It exists because base/reset.css is deliberately aggressive — `* { margin:
   0 }` and `ul, ol { list-style: none; padding: 0 }` — which is right for a
   page built out of components, where every gap is set by the component that
   owns it. It is wrong for a block of HTML written in an editor, where the
   paragraphs and lists are the layout. Without this, five sections of
   CKEditor output would render as one unbroken wall of text with unmarked
   bullets.

   So this is not a new design: it is the site's own type scale, colours and
   radii (all read from the same custom properties as everything else)
   applied to the tags an editor can produce.
   ------------------------------------------------------------------- */
.rte { color: var(--ink-2); max-width: 78ch; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }

.rte p { margin: 0 0 1.15em; font-size: clamp(1rem, 1.2vw, 1.08rem); }

.rte h2, .rte h3, .rte h4 { margin: 2em 0 .6em; color: var(--ink); }
.rte h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.rte h3 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); }
.rte h4 { font-size: clamp(1.02rem, 1.3vw, 1.15rem); }

.rte ul, .rte ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li { margin-bottom: .45em; }
.rte li::marker { color: var(--royal-600); }
.rte ul ul, .rte ol ol, .rte ul ol, .rte ol ul { margin-bottom: 0; margin-top: .45em; }

.rte a {
  color: var(--royal-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .3s;
}
.rte a:hover { color: var(--sunset-500); }

.rte strong, .rte b { font-weight: 700; color: var(--ink); }

.rte blockquote {
  margin: 1.6em 0;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--royal-600);
  background: var(--mist);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  color: var(--ink-2);
  font-style: italic;
}

.rte hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--line); }

.rte code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .1em .38em;
}
.rte pre {
  margin: 0 0 1.15em;
  padding: 1.1rem 1.3rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.rte pre code { background: none; border: 0; padding: 0; }

/* CKEditor wraps images and tables in <figure>. */
.rte figure { margin: 1.8em 0; }
.rte img { border-radius: var(--r-lg); box-shadow: var(--sh-soft); }
.rte figcaption {
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--ink-3);
}
.rte figure.image { display: table; }
.rte figure.image.image-style-side { float: right; max-width: 50%; margin-left: 1.6em; }

.rte figure.table { overflow-x: auto; }
.rte table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.rte th, .rte td {
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.rte th {
  background: var(--mist);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 680px) {
  .rte figure.image.image-style-side { float: none; max-width: 100%; margin-left: 0; }
}

/* =====================================================================
   16. The country sidebar

   Replaces the row of nine loose `.quickfacts` tiles that used to sit
   full-width under the overview. Those tiles are still in the stylesheet and
   still used on other pages — nothing here touches `.quickfacts`.

   The nine figures are now two widgets in a sticky right-hand column beside
   the overview. Grouping them is the point: four of the nine are sales
   figures about the trip and five are reference facts about the country, and
   a single undifferentiated grid said neither.
   ===================================================================== */

/* --- what makes `position: sticky` possible at all --------------------- */
/* base/reset.css sets `overflow-x: hidden` on both <html> and <body> to kill
   sideways drag on phones. That is correct and stays — but `overflow: hidden`
   on an ancestor turns that ancestor into a scroll container, and a sticky
   element sticks within its nearest scrolling ancestor. With <body> as the
   scroll container the sidebar has a scrollport exactly as tall as itself, so
   it has nothing to stick inside and scrolls away like any ordinary block.
   This is the single most common reason `position: sticky` silently does
   nothing, and it is not visible from the sticky element's own rules.

   `overflow-x: clip` clips exactly the same overflow without establishing a
   scroll container, which is what this needs. It is declared after the
   `hidden` in reset.css rather than replacing it, so a browser too old to
   know `clip` ignores this line and keeps the original behaviour — it just
   does not get a sticky sidebar. Nothing else changes at any width; the
   horizontal clamp is verified unchanged from 320px up. */
html, body { overflow-x: clip; }

/* For pages that open without a hero: the navbar is position: fixed, so the
   first in-flow element must clear it itself — a job .page-head used to do
   with this same margin. Generic on purpose; any heroless page can use it. */
.page-top { margin-top: var(--nav-h); }

/* The quote form's honeypot. Off-screen rather than display:none — some
   form-fillers skip display:none fields, and the whole point is that bots
   DO fill this one. Screen readers are excused via aria-hidden and the
   tab order via tabindex="-1" in the markup. */
.qform__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The human-check answer box does not need to be form-width. */
.qform__captcha input { max-width: 220px; }

/* =====================================================================
   21. Contact page scenery

   Background decoration behind the quote form, assembled from the site's
   existing vocabulary — the `.blob` and `.arc-motif` primitives from
   decorative.css, a dot grid, and one large ghosted plane glyph from the
   sprite. Everything sits at z-index 0 with the shell lifted above it, is
   clipped by the section, and ignores the pointer entirely.
   ===================================================================== */
.contact-scene { overflow: hidden; isolation: isolate; }
.contact-scene > .shell { position: relative; z-index: 1; }

.contact-blob--sky {
  width: 460px; height: 460px;
  top: -140px; left: -160px;
  background: var(--sky-200);
  opacity: .5;
}
.contact-blob--sun {
  width: 380px; height: 380px;
  bottom: -120px; right: -110px;
  background: var(--sunset-100);
  opacity: .65;
}

/* A quiet grid of dots behind the form column — the classic "engineering
   paper" cue, in the palette's line colour so it reads as texture, not
   pattern. Fades out with a mask so it has no hard edge anywhere. */
.contact-dots {
  position: absolute; z-index: 0; pointer-events: none;
  top: 10%; left: 0; width: 44%; height: 70%;
  background-image: radial-gradient(var(--royal-200) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 40% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 40% 40%, #000 30%, transparent 75%);
}

/* The plane from the sprite, huge and barely-there, banking up behind the
   contact card — the logo's own gesture. Outline-only via currentColor. */
.contact-plane {
  position: absolute; z-index: 0; pointer-events: none;
  right: -70px; bottom: 6%;
  width: 420px; height: 420px;
  color: var(--royal-100);
  opacity: .55;
  transform: rotate(-12deg);
}
.contact-plane svg { width: 100%; height: 100%; }

@media (max-width: 1024px) {
  .contact-plane { width: 300px; height: 300px; right: -90px; bottom: 2%; }
  .contact-dots { width: 70%; }
}
@media (max-width: 680px) {
  /* On phones the section is one narrow column of form fields — scenery
     behind inputs reads as smudge, so only the corner blobs stay. */
  .contact-plane, .contact-dots { display: none; }
  .contact-blob--sky { width: 300px; height: 300px; top: -120px; left: -140px; }
  .contact-blob--sun { width: 260px; height: 260px; }
}

/* =====================================================================
   22. Shared page scenery — Visa and About

   The same idea as the contact scenery, generalised: a `.scene` section
   clips its own decoration and lifts the shell above it, and the pieces
   below are travel motifs built from the sprite and the palette — passport
   stamps, a ghosted globe, a plane on a dashed arc, and the destination
   flags as small tilted chips. All aria-hidden, all pointer-transparent.
   ===================================================================== */
.scene { overflow: hidden; isolation: isolate; }

/* The drawn travel backdrop (static/site/images/travel-backdrop.svg) as a
   full-section background. It replaces the individual blob/stamp/plane
   elements on the pages that use it — the illustration already carries the
   globe, routes, pins, flags and skyline, composed around the edges with
   the centre kept clean for content. `cover` crops the sides on very tall
   sections rather than stretching the drawing.
   Path is relative to the built css/ directory, like every url() here. */
.page-backdrop {
  background-image: url("../images/travel-backdrop.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The 16:9 composition dies on a phone: `cover` on a tall narrow section
   scales the drawing until only its (deliberately empty) middle band is on
   screen, so mobile users saw a faint wash and stray crops. Below the
   navbar breakpoint the page instead wears two strips COMPOSED for narrow
   screens — one hugging the section's top edge, one its bottom — each
   sized to the section's width, so however tall the form grows, the
   scenery stays pinned to the edges and the middle stays clean. */
@media (max-width: 1024px) {
  .page-backdrop {
    background-image:
      url("../images/travel-backdrop-m-top.svg"),
      url("../images/travel-backdrop-m-bottom.svg");
    background-position: top center, bottom center;
    background-size: 100% auto, 100% auto;
    background-repeat: no-repeat, no-repeat;
  }
}
.scene > .shell { position: relative; z-index: 1; }

/* Passport stamp: a dashed ring with a glyph, slightly rotated — the mark
   every visa page in the world leaves in your passport. */
.scene-stamp {
  position: absolute; z-index: 0; pointer-events: none;
  width: 118px; height: 118px;
  border: 2px dashed var(--royal-200);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--royal-200);
  opacity: .55;
  transform: rotate(-14deg);
}
.scene-stamp svg { width: 46px; height: 46px; }
.scene-stamp--sun {
  border-color: var(--sunset-200); color: var(--sunset-200);
  transform: rotate(9deg);
}
.scene-stamp--sm { width: 86px; height: 86px; }
.scene-stamp--sm svg { width: 34px; height: 34px; }

/* A huge, barely-there globe behind the content. */
.scene-globe {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--royal-100);
  opacity: .6;
}
.scene-globe svg { width: 100%; height: 100%; }

/* A small plane at the end of the dashed arc, as if drawing it. */
.scene-plane {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--sky-300);
  opacity: .7;
}
.scene-plane svg { width: 100%; height: 100%; }

/* Destination flags as tilted chips — the same circular crop the
   destination cards use, faded into scenery. */
.scene-flags {
  position: absolute; z-index: 0; pointer-events: none;
  display: flex; gap: .7rem;
  opacity: .45;
}
.scene-flags img {
  width: 36px; height: 36px;
  border-radius: 50%; object-fit: cover;
  box-shadow: var(--sh-soft);
  transform: rotate(-8deg);
}
.scene-flags img:nth-child(2) { transform: rotate(5deg) translateY(8px); }
.scene-flags img:nth-child(3) { transform: rotate(-3deg) translateY(-4px); }
.scene-flags img:nth-child(4) { transform: rotate(10deg) translateY(6px); }

/* Phones: one narrow column — keep only the soft blobs. */
@media (max-width: 680px) {
  .scene-stamp, .scene-globe, .scene-plane, .scene-flags, .scene .arc-motif {
    display: none;
  }
}

/* =====================================================================
   23. The About page ("Keyline" design)

   Elegance by restraint: the opener's only decoration is two hairline
   circles cropped by the section and one dashed contrail. The right-hand
   visual is the route map — static/site/images/route-map.svg, a halftone
   world with the India hub and the seven routes — matted in a white
   keyline card. Stats render as a ledger: hairline rule, navy numerals,
   spaced small-caps labels. One dark moment (the values band) and no
   other drama anywhere.
   ===================================================================== */
/* No background objects here by request — the route map card is the only
   visual. Just the faint white-to-mist wash remains. */
.ab-open {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 70%, #F7FBFD 100%);
}
.ab-open > .shell { position: relative; z-index: 1; }

.ab-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.ab-lead {
  margin-top: 1.2rem;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Ledger stats: rule above, navy numerals, small-caps labels. */
.ab-stats {
  display: flex; gap: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem; margin-top: 2.4rem;
}
.ab-stats b {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.02em;
  color: var(--navy);
}
.ab-stats span {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* The matted map card. */
.ab-frame {
  position: relative; margin: 0;
  padding: 1.6rem 1.2rem 0;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-soft);
}
.ab-frame::before {
  content: ""; position: absolute; inset: -14px;
  border-radius: calc(var(--r-xl) + 10px);
  border: 1px solid var(--line);
  pointer-events: none;
}
.ab-frame img { width: 100%; height: auto; display: block; }
.ab-frame figcaption {
  padding-bottom: 1.3rem; margin-top: 1rem;
  text-align: center;
  font-size: .82rem; letter-spacing: .06em; color: var(--ink-3);
}
.ab-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; vertical-align: -1px; margin-right: .3rem;
}
.ab-dot--hub { background: var(--royal-600); }
.ab-dot--dest { background: var(--sunset-500); }

/* --- the journey line -------------------------------------------------- */
.ab-line { position: relative; margin-top: 2.4rem; }
.ab-line::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--royal-200), var(--sunset-200));
}
.ab-mile { position: relative; padding-left: 3rem; }
.ab-mile + .ab-mile { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ab-mile::before {
  content: ""; position: absolute; left: 4px; top: .4rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--royal-500);
  box-shadow: var(--sh-soft);
}
.ab-mile__tag {
  font-family: var(--font-display); font-weight: 800;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sunset-500);
}
.ab-mile h3 { margin-top: .15rem; font-size: 1.12rem; }
.ab-mile p { margin-top: .3rem; color: var(--ink-3); font-size: .92rem; max-width: 52ch; }

/* --- the values band: the page's one dark moment ----------------------- */
.ab-values {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-deep); color: var(--white);
}
.ab-values::after {
  content: ""; position: absolute; z-index: -1;
  width: 340px; height: 340px; border-radius: 50%;
  right: -90px; top: -120px;
  background: var(--grad-hover); opacity: .25; filter: blur(34px);
}
.ab-values .sec-head h2 { color: var(--white); }
.ab-vgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem); margin-top: 2.5rem;
}
.ab-value {
  padding: 1.6rem 1.5rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ab-value__ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--gold-400);
}
.ab-value__ico svg { width: 22px; height: 22px; }
.ab-value h3 { color: var(--white); margin-top: 1rem; font-size: 1.08rem; }
.ab-value p { margin-top: .5rem; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.65; }

/* --- the flag row ------------------------------------------------------- */
.ab-flags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 2vw, 1.8rem); margin-top: 2.2rem;
}
.ab-flag {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
}
.ab-flag img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--sh-soft);
  border: 3px solid var(--white); outline: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.ab-flag:hover img { transform: translateY(-4px) scale(1.06); }

@media (max-width: 1024px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-vgrid { grid-template-columns: 1fr; }
  .ab-frame { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 680px) {
  .ab-stats { flex-wrap: wrap; gap: 1.2rem 2rem; }
}

/* --- the two-column region ------------------------------------------- */
/* 348px is the width at which "Vietnamese Dong (VND)" sits on one line next
   to its 38px icon badge without the value wrapping — which is what keeps
   the rows the same height and the widget from looking ragged. */
.country-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: clamp(2rem, 3.5vw, 3.75rem);
  align-items: start;
}

/* `align-items: start` above is what makes `position: sticky` work at all:
   a grid item stretches to the row's full height by default, and an element
   that is already as tall as its container has nothing to stick within. */
/* The height of the "On this page" bar. One place, because three rules
   below must agree on it: the bar itself never sets a height (its padding
   does), but the sidebar pins below it and every anchored section must land
   below it — if these drift apart, anchor jumps land under the bar. */
:root { --secnav-h: 52px; }

.country-aside {
  position: sticky;
  /* navbar + section bar + breathing room — both bars are pinned above. */
  top: calc(var(--nav-h) + var(--secnav-h) + 1.5rem);
  display: grid;
  gap: 1.15rem;
  /* Each widget keeps its own height. Without this the two sit in one grid
     row when they go side by side on tablets, and the four-row card is
     stretched to match the five-row one with dead space at the bottom. */
  align-items: start;
}

/* One breakpoint, matching the one where the navbar collapses. Below it the
   sidebar becomes an ordinary block under the overview — `position: static`
   is set explicitly rather than left to inherit, because a sticky element
   inside a single-column flow would otherwise pin itself over the content
   that follows. */
@media (max-width: 1024px) {
  .country-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .country-aside { position: static; top: auto; }
}

/* Used when the country has no overview: no left column to sit beside, so
   the widgets spread across the full width instead. */
.country-aside--flow {
  position: static;
  top: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* `.country-intro` caps itself at 70ch and `.rte` at 78ch, both written for
   a full-width column where a line of text would otherwise run the whole
   1160px of `.shell`. Inside the grid the column is already the measure —
   about 750px — so the caps only leave an empty strip beside the paragraph.
   The trailing margin goes for the same reason: there is nothing under the
   left column any more for it to separate. */
.country-body .country-intro,
.country-body .rte { max-width: none; }
.country-body .country-intro { margin-bottom: 0; }

/* --- the widget ------------------------------------------------------- */
.awidget {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-soft);
  padding: 1.5rem 1.5rem 1.4rem;
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    box-shadow .5s,
    border-color .5s;
}
.awidget:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-card);
  border-color: var(--royal-200);
}

.awidget__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--line);
}
.awidget__head svg { width: 18px; height: 18px; color: var(--royal-600); }
.awidget__head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- one metric ------------------------------------------------------- */
.arow {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--mist-2);
}
.arow:last-child { border-bottom: 0; padding-bottom: 0; }

/* The accent badge. One colour per widget rather than one per row: five
   different accents in a 348px column reads as decoration, two reads as
   grouping. */
.arow__ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--mist-2);
  color: var(--royal-600);
  transition: background .5s, color .5s;
}
.arow__ico svg { width: 18px; height: 18px; }

/* The facts card keeps the warm badges: gold glyphs in the navy card above,
   orange in the white card below — one warm family at two depths, so the
   pair reads as designed together rather than merely stacked. */
.awidget--facts .arow__ico { background: var(--sunset-50); color: var(--sunset-600); }
.awidget--facts:hover .arow__ico { background: var(--sunset-100); }

/* --- Trip Highlights: the dark treatment -------------------------------
   Every value below is copied from `.faq-aside` in components/faq.css — the
   "Still have a question?" card further down the same page. Same gradient,
   same shadow, same translucent icon tile, same warm blur in the corner.
   That sameness is the point: two dark objects on one page must be the SAME
   dark object, or the second reads as a mistake.

   `contain: paint` is load-bearing, not decoration: the ::after glow hangs
   220px past the card's right edge, and although `overflow: hidden` clips
   what you *see*, the box still inflates the document's scroll width by
   ~70px — a horizontal scrollbar with nothing visible to scroll to. Paint
   containment clips it out of layout as well. (.faq-aside gets away without
   it only because its glow points into the page, not off it.) */
.awidget--trip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  background: var(--grad-deep);
  border-color: transparent;
  box-shadow: var(--sh-card);
}
.awidget--trip::after {
  content: ""; position: absolute; z-index: -1;
  width: 220px; height: 220px; border-radius: 50%;
  right: -70px; bottom: -80px;
  background: var(--grad-hover); opacity: .28; filter: blur(28px);
}
.awidget--trip:hover { border-color: transparent; box-shadow: var(--sh-lift); }
.awidget--trip .awidget__head { border-bottom-color: rgba(255,255,255,.16); }
.awidget--trip .awidget__head h3 { color: var(--white); }
.awidget--trip .awidget__head svg { color: var(--gold-400); }
.awidget--trip .arow { border-bottom-color: rgba(255,255,255,.10); }
.awidget--trip .arow__label { color: rgba(255,255,255,.62); }
.awidget--trip .arow__val { color: var(--white); }
.awidget--trip .arow__ico {
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--gold-400);
}
.awidget--trip:hover .arow__ico { background: rgba(255,255,255,.18); }

.arow__text { min-width: 0; }
.arow__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.arow__val {
  display: block;
  margin-top: .1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -.01em;
}

/* Below the breakpoint the sidebar has the full page width to itself, so the
   widgets sit side by side rather than stacking into a very tall column. */
@media (max-width: 1024px) and (min-width: 681px) {
  .country-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   17. The "On this page" section navigator

   A slim bar pinned directly under the fixed navbar on country pages.
   Frosted like the scrolled navbar — 92% white over a backdrop blur — so
   content sliding beneath it reads as depth, not clutter. The links are
   rendered conditionally by the template: a section with no content gets
   no link, so the bar always describes the page it is actually on.
   ===================================================================== */
.secnav {
  position: sticky;
  top: var(--nav-h);      /* flush under the fixed navbar */
  z-index: 90;            /* above sticky sidebar + reveal content; below the navbar (100) */
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.secnav__shell { display: flex; align-items: center; gap: 1.25rem; }
.secnav__label {
  flex: none;
  padding-block: .9rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Horizontal scroll on narrow screens, with the scrollbar hidden — the
   active link is kept in view by the script instead. */
.secnav__links {
  display: flex; gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.secnav__links::-webkit-scrollbar { display: none; }
.secnav__links a {
  flex: none;
  position: relative;
  padding: .9rem .8rem;
  font-size: .86rem; font-weight: 600;
  color: var(--ink-3);
  transition: color .3s;
}
.secnav__links a:hover { color: var(--royal-600); }
.secnav__links a.is-active { color: var(--royal-700); }
/* The same gradient underline the navbar uses for the current page. */
.secnav__links a.is-active::after {
  content: ""; position: absolute;
  left: .8rem; right: .8rem; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: var(--grad-text);
}
@media (max-width: 680px) { .secnav__label { display: none; } }

/* Anchor jumps land below BOTH pinned bars, not underneath them. The
   sibling combinator scopes this to pages that actually have the bar: the
   nav and the sections are siblings inside <main>, so on the home page —
   which shares #faq and #packages via the same partials but has no bar —
   anchors keep their normal offset and nothing overshoots. */
.secnav ~ [id] { scroll-margin-top: calc(var(--nav-h) + var(--secnav-h) + 1rem); }

/* =====================================================================
   18. Attractions — the spotlight strip and its dialog

   A row of image panels sharing the strip's width; the hovered panel takes
   ~2.6 shares while the rest compress to 1, so attention follows the
   cursor. The name is the only text on a panel — the description lives in
   the dialog, which is what keeps the compressed panels readable.

   The dialog is rendered once per page and filled from the clicked
   panel's data- attributes by site.js, exactly like the gallery lightbox.
   ===================================================================== */
.aspot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.2vw, 1rem);
}
.aspot__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
  cursor: pointer;
  aspect-ratio: 4/3;
  box-shadow: var(--sh-soft);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s;
}
.aspot__panel:hover,
.aspot__panel:focus-visible { transform: translateY(-5px); box-shadow: var(--sh-card); }
/* The first attraction leads the collage: double width, matching the
   admin's display_order — whatever is ordered first is the section's
   opening photograph. `dense` lets later tiles backfill any gap. */
.aspot { grid-auto-flow: dense; }
.aspot__panel:first-child { grid-column: span 2; aspect-ratio: auto; }
.aspot__panel img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.aspot__panel:hover img { transform: scale(1.06); }
.aspot__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,27,66,.05) 40%, rgba(0,27,66,.78) 100%);
}
.aspot__num {
  position: absolute; top: .9rem; left: 1rem;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  color: var(--white);
  padding: .25rem .6rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.aspot__name {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem;
  text-align: left;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -.01em;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aspot__panel:first-child .aspot__name { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.aspot__hint {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-3);
}
.aspot__hint svg { width: 15px; height: 15px; color: var(--sunset-500); }

/* Phones: two square tiles per row — the lead tile goes full-width so the
   collage keeps its hierarchy at a glance. */
@media (max-width: 680px) {
  .aspot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .aspot__panel { aspect-ratio: 1/1; }
  .aspot__panel:first-child { grid-column: span 2; aspect-ratio: 16/9; }
  .aspot__name { font-size: .95rem; }
  .aspot__hint { display: none; }
}

/* --- the dialog -------------------------------------------------------- */
.amodal {
  position: fixed; inset: 0; z-index: 200;      /* same layer as the lightbox */
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(1, 12, 32, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.amodal.is-open { display: grid; animation: amin .3s ease; }
@keyframes amin { from { opacity: 0; } to { opacity: 1; } }
.amodal__card {
  position: relative;
  width: min(680px, 94vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lift);
}
.amodal__media img {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.amodal__body { padding: 1.5rem 1.75rem 1.9rem; }
.amodal__num {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  letter-spacing: .12em; color: var(--sunset-500);
}
.amodal__body h3 {
  margin-top: .3rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.02em;
}
.amodal__body p { margin-top: .7rem; color: var(--ink-2); line-height: 1.7; }
.amodal__desc { margin-top: .7rem; color: var(--ink-2); line-height: 1.7; }
.amodal__desc p { margin-top: .5rem; margin-bottom: .5rem; }
.amodal__desc p:first-child { margin-top: 0; }
.amodal__desc p:last-child { margin-bottom: 0; }
.amodal__desc ul, .amodal__desc ol { margin: .5rem 0 .5rem 1.4rem; padding-left: .5rem; }
.amodal__desc li { margin-bottom: .25rem; }
.amodal__desc strong, .amodal__desc b { font-weight: 700; color: var(--ink); }
.amodal__body .btn { margin-top: 1.3rem; }
.amodal__x {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.85); border: 1px solid var(--line);
  color: var(--ink); box-shadow: var(--sh-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .3s, transform .3s;
}
.amodal__x:hover { background: var(--white); transform: scale(1.08); }
.amodal__x svg { width: 18px; height: 18px; }

/* Prev/next — the dialog browses the whole set like the photo lightbox.
   Same 52px glass circles as .lightbox__p/.lightbox__n, pinned to the
   viewport edges so they never crowd the card. */
.amodal__p, .amodal__n {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .3s, transform .3s;
}
.amodal__p:hover, .amodal__n:hover { background: var(--grad-hover); transform: scale(1.07); }
.amodal__p { left: clamp(.75rem, 3vw, 2.5rem); }
.amodal__n { right: clamp(.75rem, 3vw, 2.5rem); }
.amodal__p svg, .amodal__n svg { width: 22px; height: 22px; }

/* On phones the card fills the width, so the arrows drop to the bottom
   corners instead of overlapping the text. */
@media (max-width: 680px) {
  .amodal__p, .amodal__n { top: auto; bottom: 1rem; translate: none; }
}

/* =====================================================================
   20. The destination cover (.chero)

   A magazine-cover hero for the country page only — the shared
   `.page-head` (dark scrim, centred copy) stays exactly as it is on every
   other sub-page.

   The photograph is the hero: full-bleed, anchored toward its right
   two-thirds so the landmark side survives the text side. Legibility comes
   from a white left-to-right fade rather than a dark overlay — navy type
   on white-glass, per the brand, with the image left untouched where the
   text is not.
   ===================================================================== */
.chero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--nav-h);        /* starts below the fixed navbar */
  /* Half the viewport rather than a fixed band: the hero introduces the
     page, it is not the page. vh (not vw) so a wide monitor does not
     inflate it; the clamp keeps short laptops and tall phones sane. */
  min-height: clamp(320px, 50vh, 470px);
  display: flex;
  align-items: center;
  background: var(--mist);
}
.chero__media { position: absolute; inset: 0; z-index: -2; }
.chero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias the crop rightward: the gradient eats the left third, so the part
     of the photo that must survive is the right two-thirds. */
  object-position: 62% center;
}
.chero__fade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .90) 30%,
    rgba(255, 255, 255, .55) 52%,
    rgba(255, 255, 255, 0) 74%);
}
.chero__shell { width: 100%; }
.chero__content {
  max-width: 560px;
  padding-block: clamp(1.8rem, 3.5vw, 2.75rem);
}

.chero__crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .85rem; font-weight: 500; color: var(--ink-3);
}
.chero__crumbs a { transition: color .3s; }
.chero__crumbs a:hover { color: var(--royal-600); }
.chero__crumbs [aria-current] { color: var(--royal-700); font-weight: 600; }

.chero__title {
  margin-top: .9rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--navy);
}
.chero__rule {
  display: block;
  width: 64px; height: 4px; border-radius: 4px;
  margin: .9rem 0 1rem;
  background: var(--grad-text);
}
.chero__lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 44ch;
}

.chero__marks {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.1rem, 2vw, 2rem);
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
}
.chero__marks li { display: flex; align-items: center; gap: .7rem; }
.chero__ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line);
  box-shadow: var(--sh-soft);
  color: var(--sunset-500);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.chero__ico svg { width: 20px; height: 20px; }
.chero__mark b {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--ink); letter-spacing: -.01em;
}
.chero__mark small { display: block; font-size: .76rem; color: var(--ink-3); }

.chero__cta { margin-top: clamp(1.1rem, 1.8vw, 1.5rem); }

/* Tablet: shorter, same composition. */
@media (max-width: 1024px) {
  .chero { min-height: 340px; }
}

/* Mobile: the overlay approach fails in portrait — a left gradient would
   bury most of a portrait crop, and text over the image covers the very
   landmarks the brief says to keep visible. So the hero STACKS: photograph
   on top at full bleed, content below on white, with a short upward fade
   stitching the seam. The image stays prominent; the words never sit on it. */
@media (max-width: 680px) {
  .chero { display: block; min-height: 0; }
  .chero__media {
    position: relative; inset: auto; z-index: auto;
    height: min(58vw, 20rem);
  }
  .chero__media img { object-position: center; }
  .chero__fade {
    inset: auto 0 0 0;                 /* becomes the seam under the photo */
    top: calc(min(58vw, 20rem) - 3.5rem);
    height: 3.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--white));
  }
  .chero__content { max-width: none; padding-block: 1.4rem 2rem; }
  .chero__title { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .chero__marks { gap: .9rem 1.4rem; }
  .chero__mark small { display: none; }  /* keep the row to one line each */
  .chero__ico { width: 38px; height: 38px; }
}

/* =====================================================================
   19. Country-page section rhythm

   The global `--section` rhythm — clamp(4.5rem, 8.5vw, 8rem) per side — is
   tuned for the home page, where half a dozen sections each carry a big
   centred heading and the air between them is part of the composition. The
   country page stacks NINE sections of continuous reading, and the same
   rhythm there puts ~244px of empty screen between one block of text and
   the next: a full scroll-wheel flick of nothing.

   So the country page gets a tighter rhythm — roughly half — and gets it
   via the same `.secnav ~` scoping the anchor offsets use: the bar exists
   only on country pages, so no other page moves, and the global token in
   tokens.css stays untouched for everything else.

   `--section` is overridden ON the section elements rather than the padding
   being restated, so anything else derived from the token inside a section
   keeps agreeing with it. */
.secnav ~ .section { --section: clamp(2.75rem, 4.75vw, 4.25rem); }
@media (max-width: 680px) {
  .secnav ~ .section { --section: clamp(2.5rem, 8vw, 3.25rem); }
}

/* Admin reviews without a photo: the traveller's initial in a brand circle,
   sized exactly like the avatar image it stands in for. */
.tcard__initial {
  flex: none;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-btn); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
}

/* ---------------------------------------------------------------------
   24. Destinations page — "Spotlight" editorial rows (client-approved
   Option A). One full row per country: photo panel with flag, package
   badge and a facts strip, beside the story column with highlights and
   CTAs. Rows alternate direction, so even a two-country catalog has
   rhythm — the design brief was "must not look empty at N=1".
   Ends with .dband, the wide "Somewhere else?" banner that replaced the
   small custom card. Markup: templates/site/destinations.html.
   --------------------------------------------------------------------- */
.dspot {
  display: grid; grid-template-columns: 1.06fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.dspot + .dspot { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.dspot--flip .dspot__media { order: 2; }

.dspot__media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-soft); aspect-ratio: 10 / 8.4;
}
.dspot__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dspot__flag {
  position: absolute; top: 1.1rem; left: 1.1rem; width: 52px; height: 52px;
  border-radius: 14px; overflow: hidden; border: 2px solid var(--white);
  box-shadow: 0 6px 18px rgba(0, 27, 66, .35);
}
.dspot__flag img { width: 100%; height: 100%; object-fit: cover; }
.dspot__badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .35); color: var(--white);
  font: 600 .8rem/1 var(--font-body); padding: .55rem .95rem;
  border-radius: 999px;
}
.dspot__strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
  padding: 1.05rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(0, 27, 66, .78));
  color: var(--white);
}
.dspot__strip b { font: 700 1.02rem var(--font-display); display: block; }
.dspot__strip span {
  font: 500 .72rem/1.3 var(--font-body); opacity: .75;
  text-transform: uppercase; letter-spacing: .08em;
}
.dspot__no {
  font: 800 .85rem var(--font-display); color: var(--sunset-500);
  letter-spacing: .22em; text-transform: uppercase;
}
.dspot__body h2 { margin: .55rem 0 .8rem; }
.dspot__body .lede { margin: 0 0 1.4rem; }

.dhl { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: .65rem; }
.dhl li {
  display: flex; gap: .65rem; align-items: flex-start;
  font: 500 .95rem/1.5 var(--font-body); color: var(--ink-2);
}
.dhl svg { width: 18px; height: 18px; color: var(--sky-500); flex: none; margin-top: .15rem; }

.dspot__cta { display: flex; gap: .9rem; flex-wrap: wrap; }
.dspot__cta .btn--ghost {
  border: 2px solid var(--royal-200); color: var(--royal-700); background: var(--white);
}

.dband {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(115deg, var(--royal-800), var(--royal-600) 55%, var(--sky-500));
  color: var(--white); padding: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
}
/* The route map from the About page, ghosted into the right edge. */
.dband::after {
  content: ""; position: absolute; inset: 0;
  background: url("../images/route-map.svg") right -8rem center / 60% auto no-repeat;
  opacity: .35; pointer-events: none;
}
.dband h3 {
  color: var(--white); font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--font-display);
  margin: 0 0 .6rem;
}
.dband p { color: var(--white); font: 400 1rem/1.65 var(--font-body); opacity: .85; margin: 0; }
.dband .btn { position: relative; z-index: 1; justify-self: end; background: var(--white); color: var(--royal-700); }

@media (max-width: 860px) {
  .dspot { grid-template-columns: 1fr; gap: 1.6rem; }
  .dspot--flip .dspot__media { order: 0; }
  .dband { grid-template-columns: 1fr; }
  .dband .btn { justify-self: start; }
  .dband::after { opacity: .18; }
}

/* ---------------------------------------------------------------------
   25. Package detail page — /packages/<slug>/. Content column beside a
   sticky booking card; same sticky mechanics as the country sidebar
   (§16 — html/body overflow-x:clip is what lets `position:sticky` work).
   Markup: templates/site/package_detail.html.
   --------------------------------------------------------------------- */
.pkd {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.pkd__hl { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.pkd__hl span {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--royal-50); color: var(--royal-700);
  border: 1px solid var(--royal-100);
  font: 600 .84rem/1 var(--font-body);
  padding: .55rem .85rem; border-radius: 999px;
}
.pkd__hl svg { width: 15px; height: 15px; color: var(--sky-500); }

.pkd__aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.pkd__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-soft);
  padding: 1.75rem;
}
.pkd__price { padding-bottom: 1.2rem; border-bottom: 1px solid var(--mist-2); }
.pkd__price small {
  display: block; font: 600 .74rem/1 var(--font-body); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .45rem;
}
.pkd__price b {
  font: 800 2.1rem/1 var(--font-display);
  background: var(--grad-text); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.pkd__price > span { font: 500 .82rem var(--font-body); color: var(--ink-3); margin-left: .5rem; }

.pkd__meta { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: grid; gap: .8rem; }
.pkd__meta li {
  display: flex; align-items: center; gap: .7rem;
  font: 500 .93rem var(--font-body); color: var(--ink-2);
}
.pkd__meta svg { width: 18px; height: 18px; color: var(--royal-500); flex: none; }
.pkd__meta a { color: var(--royal-600); font-weight: 600; }

.pkd__wa { margin-top: .7rem; border: 2px solid var(--royal-200); color: var(--royal-700); background: var(--white); }
.pkd__note {
  margin: 1.1rem 0 0; font: 400 .8rem/1.55 var(--font-body); color: var(--ink-3);
}

@media (max-width: 980px) {
  .pkd { grid-template-columns: 1fr; }
  /* Booking card above the description on small screens — the price and
     CTA are what a phone visitor came for. Static, not sticky: pinning it
     would cover the content it pushes down. */
  .pkd__aside { position: static; order: -1; }
}

/* ---------------------------------------------------------------------
   26. Day-wise itinerary on the package page — one native <details> per
   day, first one open. The day chip keeps its royal fill when collapsed
   and switches to the gradient when the day is open, so the expanded day
   is findable at a glance while scrolling.
   --------------------------------------------------------------------- */
.pkdit { margin-top: 2.2rem; }
.pkdit__head { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 1.1rem; }
.pkdit__day {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--sh-soft);
}
.pkdit__day + .pkdit__day { margin-top: .8rem; }
.pkdit__day summary {
  display: flex; align-items: center; gap: .95rem;
  padding: 1.05rem 1.2rem; cursor: pointer; list-style: none;
}
.pkdit__day summary::-webkit-details-marker { display: none; }
.pkdit__no {
  flex: none; font: 700 .74rem/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--royal-700); background: var(--royal-50);
  border: 1px solid var(--royal-100);
  padding: .5rem .7rem; border-radius: 999px;
}
.pkdit__day[open] .pkdit__no {
  background: var(--grad-btn); border-color: transparent; color: var(--white);
}
.pkdit__title { font: 600 .98rem/1.35 var(--font-body); color: var(--ink); }
.pkdit__chev { margin-left: auto; flex: none; color: var(--ink-3); }
.pkdit__chev svg { width: 18px; height: 18px; transition: transform .3s; }
.pkdit__day[open] .pkdit__chev svg { transform: rotate(180deg); }
.pkdit__body {
  padding: 0 1.2rem 1.2rem 1.2rem;
  font: 400 .95rem/1.7 var(--font-body); color: var(--ink-2);
}
.pkdit__body p { margin: 0 0 .8rem; }
.pkdit__body p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  /* align the text with the title, past the day chip */
  .pkdit__body { padding-left: calc(1.2rem + 4.6rem); }
}

/* ---------------------------------------------------------------------
   27. Packages page backdrop — the halftone WORLD MAP (the same
   route-map.svg the About page frames), ghosted across the whole section
   behind the cards. It goes on a ::before at low opacity because a
   background-image cannot be faded directly and the artwork itself is
   full-strength for its About-page frame. The shell stacks above it.
   Earlier options (boarding pass, dotted islands) were replaced at the
   client's request; their SVGs remain in static/site/images/ unused.
   --------------------------------------------------------------------- */
.pkg-backdrop { position: relative; }
.pkg-backdrop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Wider than the shell on purpose: the grid hides the map's middle, so
     the composition is tuned for what stays visible — continents peeking
     above the grid and in the side margins. */
  background: url("../images/route-map.svg") center -70px / 125% auto no-repeat;
  opacity: .22;
}
.pkg-backdrop > .shell { position: relative; z-index: 1; }
@media (max-width: 720px) {
  /* Scaled to fit a phone's width the map is unreadable noise — show it
     larger and let the sides crop instead. */
  .pkg-backdrop::before {
    background-size: 170% auto;
    background-position: center 30%;
  }
}

/* ---------------------------------------------------------------------
   28. Package inclusions / exclusions — two soft cards under the
   itinerary, green-tinted heading for what's covered, red for what's
   not. Each renders only when its field is filled.
   --------------------------------------------------------------------- */
.pkie {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem; margin-top: 2.2rem;
}
.pkie__col {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--sh-soft);
  padding: 1.3rem 1.4rem;
}
.pkie__col h3 {
  display: flex; align-items: center; gap: .5rem;
  font: 700 1rem/1.2 var(--font-display); color: var(--ink);
  margin: 0 0 .8rem;
}
.pkie__col h3 svg { width: 18px; height: 18px; flex: none; }
.pkie__col--inc h3 svg { color: #1a7f37; }
.pkie__col--exc h3 svg { color: #c62828; }
.pkie__col .rte { font-size: .93rem; color: var(--ink-2); }
.pkie__col .rte :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .pkie { grid-template-columns: 1fr; }
}