/* ============================================================
   ATLAS&CO. TRAVEL CONCIERGE
   Luxury editorial design system
   ------------------------------------------------------------
   Colour, type and motion are defined once here so the whole
   site shares a single source of truth. Edit tokens below.
   ============================================================ */

:root {
  /* Colour palette ------------------------------------------------ */
  /* Crisp & elevated: cool oyster whites, near-black ink, deep sea  */
  /* navy as the single colour. No warm beige, no metallic.          */
  --ivory:        #FBFAF7;  /* cool oyster white, primary page bg   */
  --soft-white:   #FFFFFF;  /* crispest surface                     */
  --linen:        #F1EFE9;  /* cards, panels, elevated surfaces     */
  --sand:         #AEB9BB;  /* cool sea-stone, accents on dark      */
  --taupe:        #8FA0A2;  /* muted sea-stone, secondary on dark   */
  --stone:        #6C675F;  /* cool neutral secondary text (AA on cream) */
  --navy:         #0B2A33;  /* deep sea navy, dark sections         */
  --ocean:        #0F3B49;  /* sea accent                           */
  --ink:          #0E0E0C;  /* near-black editorial text            */
  --border:       #E5E3DC;  /* cool hairline dividers               */

  /* Type ---------------------------------------------------------- */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script:'La Belle Aurore', 'Brush Script MT', cursive;

  /* Hero / heading type scale (single source of truth) ----------- */
  --hero-display: clamp(2.7rem, 6.6vw, 5.6rem);
  --hero-sub:     clamp(1rem, 1.6vw, 1.35rem);
  --h2:           clamp(2rem, 4.4vw, 3.6rem);
  --h3:           clamp(1.4rem, 2.4vw, 2rem);
  --label:        0.72rem;

  /* Spacing / motion --------------------------------------------- */
  --section-y: clamp(5rem, 11vw, 11rem);
  --gutter:    clamp(1.4rem, 5vw, 6rem);
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow:    900ms;
  --t-med:     560ms;
  --t-fast:    260ms;
  --maxw:      1440px;
}

/* Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.75;
  font-size: 1.02rem;
  overflow-x: hidden;
}

/* Soft paper grain overlaid on the whole page ------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.08; letter-spacing: 0.01em; }

.display {
  font-size: var(--hero-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.005em;
}

h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

.label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone);
}

.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ocean);
  line-height: 1;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }
p + p { margin-top: 1.15rem; }

.muted { color: var(--stone); }

/* Prevent lonely words on headings and short intros ------------- */
/* balance = even line lengths (display); pretty = no orphan last word */
h1, .display, .lede, .hero__sub { text-wrap: balance; }
h2, h3, .step__title, .hotel-card__name, .dest__name, .post__title { text-wrap: pretty; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }

.dark { background: var(--navy); color: var(--soft-white); }
.dark .label { color: var(--sand); }
.dark .muted { color: var(--taupe); }
.dark .lede { color: var(--soft-white); }
.dark .script { color: var(--sand); }
.dark .rule { background: rgba(255,255,255,0.16); }

.surface { background: var(--linen); }

.rule { width: 100%; height: 1px; background: var(--border); border: 0; }

.center { text-align: center; }
.measure { max-width: 38ch; }
.measure-wide { max-width: 56ch; }

.eyebrow { display: inline-block; margin-bottom: 1.4rem; }

/* Two column editorial split ------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.6rem; }
  .split--reverse .split__media { order: 0; }
}

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn--solid { background: var(--navy); border-color: var(--navy); color: var(--soft-white); }
.btn--solid:hover { background: var(--ocean); border-color: var(--ocean); color: var(--soft-white); }
.btn--ghost-light { border-color: rgba(255,255,255,0.55); color: var(--soft-white); }
.btn--ghost-light:hover { background: var(--soft-white); border-color: var(--soft-white); color: var(--navy); }

/* Understated text link with animated underline ----------------- */
.link {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.dark .link { color: var(--soft-white); }

/* ============================================================
   HEADER / NAV
   transparent over the hero, solid cream on scroll
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), padding var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--soft-white);
  transition: color var(--t-med) var(--ease);
  white-space: nowrap;
}
.brand .amp { font-style: italic; }

.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav a {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  transition: color var(--t-fast) var(--ease);
  position: relative;
  padding-bottom: 3px;
}
.nav a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: #fff; }

.nav__cta {
  border: 1px solid rgba(255,255,255,0.55);
  padding: 0.7rem 1.3rem !important;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--soft-white); color: var(--navy) !important; }

/* Scrolled state -------------------------------------------------*/
.site-header.is-solid { background: var(--ivory); border-bottom-color: var(--border); }
.site-header.is-solid .brand { color: var(--ink); }
.site-header.is-solid .nav a { color: var(--ink); }
.site-header.is-solid .nav__cta { border-color: var(--ink); }
.site-header.is-solid .nav__cta:hover { background: var(--ink); color: var(--ivory) !important; }
.site-header.is-solid .nav-toggle span { background: var(--ink); }

/* Pages with no hero (light header from the start) -------------- */
.site-header.header--light .brand { color: var(--ink); }
.site-header.header--light .nav a { color: var(--ink); }
.site-header.header--light .nav__cta { border-color: var(--ink); }
.site-header.header--light .nav-toggle span { background: var(--ink); }

/* Mobile nav ----------------------------------------------------- */
.nav-toggle { display: none; width: 30px; height: 22px; position: relative; z-index: 1100; }
.nav-toggle span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: #fff;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-med) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 18px; }
body.nav-open .nav-toggle span { background: var(--ink); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.7rem;
    background: var(--ivory);
    transform: translateY(-100%);
    transition: transform var(--t-slow) var(--ease);
    padding: clamp(5.5rem, 15vh, 8rem) 2rem 2.5rem;
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateY(0); }
  .nav a { color: var(--ink) !important; font-size: 0.9rem; }
  .nav__cta { margin-top: 1rem; }
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__brand {
  font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.04em; color: var(--ink);
  opacity: 0; transform: translateY(12px);
  animation: loaderIn 1100ms var(--ease) forwards;
}
.loader__brand .amp { font-style: italic; }
.loader__wave { width: min(200px, 42vw); height: 6px; position: relative; }
.loader__wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* a thin line that strokes itself across and away */
.loader__line { fill: none; stroke: var(--ocean); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: loaderDraw 2200ms var(--ease) infinite; }
@keyframes loaderDraw { 0% { stroke-dashoffset: 100; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .loader__line { animation: none; stroke-dashoffset: 0; } }
.loader__tag {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--stone); opacity: 0; animation: loaderIn 900ms var(--ease) 500ms forwards;
}
@keyframes loaderIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }

/* Image reveal (mask wipes away) -------------------------------- */
.img-mask { position: relative; overflow: hidden; }
.img-mask img { transition: transform 1400ms var(--ease); transform: scale(1.06); }
.img-mask::after {
  content: ""; position: absolute; inset: 0; background: var(--ivory);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1100ms var(--ease);
}
.img-mask.is-in::after { transform: scaleY(0); }
.img-mask.is-in img { transform: scale(1); }

.media-cap { position: absolute; left: 0; bottom: 0; z-index: 3; padding: clamp(0.85rem,2vw,1.2rem) clamp(1.1rem,2.6vw,1.6rem); background: rgba(11,42,51,0.46); color: var(--soft-white); max-width: 86%; }
.media-cap__loc { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 0.4rem; }
.media-cap__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.05rem,1.7vw,1.35rem); line-height: 1.15; }
.hcar--cap .hcar__track > figure { flex: 0 0 100%; height: 100%; margin: 0; position: relative; overflow: hidden; }
#intro .hcar__btn { display: none; }
.intro-nav { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.intro-nav__btn { width: 42px; height: 42px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-family: var(--serif); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.intro-nav__btn:hover { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--soft-white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 16s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(11,42,51,0.42) 0%, rgba(11,42,51,0.18) 38%, rgba(11,42,51,0.55) 100%);
}
.hero__inner { padding-top: 6rem; max-width: 920px; }
.hero__eyebrow { color: rgba(255,255,255,0.82); margin-bottom: 1.6rem; opacity: 0; animation: heroFade 1200ms var(--ease) 400ms forwards; }
.hero__title { color: var(--soft-white); opacity: 0; animation: heroFade 1300ms var(--ease) 600ms forwards; }
.hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--hero-sub); letter-spacing: 0.02em;
  margin-top: 1.6rem; color: rgba(255,255,255,0.92);
  opacity: 0; animation: heroFade 1300ms var(--ease) 850ms forwards;
}
.hero__cta { margin-top: 2.6rem; opacity: 0; animation: heroFade 1300ms var(--ease) 1100ms forwards; }
@keyframes heroFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: 0; animation: heroFade 1200ms var(--ease) 1500ms forwards;
}
.hero__scroll::after { content:""; width:1px; height:42px; background: rgba(255,255,255,0.5); animation: scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Page hero (interior pages) ------------------------------------ */
.page-hero {
  position: relative; min-height: 70svh; display: flex; align-items: flex-end;
  color: var(--soft-white); overflow: hidden; padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 18s var(--ease) forwards; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,42,51,0.30), rgba(11,42,51,0.62)); }
.page-hero__title { color: var(--soft-white); max-width: 18ch; }
.page-hero__sub { color: rgba(255,255,255,0.9); margin-top: 1.2rem; max-width: 52ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem,2vw,1.5rem); }

/* ============================================================
   DESTINATION CATEGORY GRID
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.7rem, 1.2vw, 1rem); }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end; color: var(--soft-white);
}
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.cat::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,42,51,0) 35%, rgba(11,42,51,0.72)); transition: opacity var(--t-med) var(--ease); }
.cat:hover img { transform: scale(1.07); }
.cat__body { position: relative; padding: 1.5rem; width: 100%; }
.cat__name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.cat__meta { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-top: 0.5rem; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.cat:hover .cat__meta { opacity: 1; transform: none; }

/* ============================================================
   HORIZONTAL SCROLL RAIL (hotels, process)
   ============================================================ */
.rail { display: flex; gap: clamp(1rem, 2vw, 1.8rem); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1.4rem; scrollbar-width: thin; scrollbar-color: var(--taupe) transparent; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--taupe); }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.rail__hint { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }

/* ============================================================
   HOTEL CARD (magazine clipping)
   ============================================================ */
.hotel-card { width: min(86vw, 380px); background: var(--soft-white); border: 1px solid var(--border); display: flex; flex-direction: column; }
.hotel-card__img { aspect-ratio: 4 / 5; overflow: hidden; }
.hotel-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.hotel-card:hover .hotel-card__img img { transform: scale(1.05); }
.hotel-card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.hotel-card__loc { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone); }
.hotel-card__name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.05; }
.hotel-card__desc { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--ocean); }
.hotel-card__detail { font-size: 0.86rem; line-height: 1.6; }
.hotel-card__detail strong { font-weight: 400; color: var(--ink); letter-spacing: 0.02em; }
.hotel-card__cta { margin-top: auto; padding-top: 0.8rem; }

/* Full-width hotel feature row (editorial alternating) ---------- */
.hotel-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hotel-row + .hotel-row { margin-top: clamp(4rem, 8vw, 8rem); }
.hotel-row:nth-child(even) .hotel-row__media { order: 2; }
.hotel-row__media { aspect-ratio: 5 / 4; }
.hotel-row__media img { width:100%; height:100%; object-fit: cover; }
@media (max-width: 860px) {
  .hotel-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .hotel-row:nth-child(even) .hotel-row__media { order: 0; }
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.4rem, 2.6vw, 2.6rem); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step__num { font-family: var(--serif); font-size: 2.6rem; color: var(--taupe); line-height: 1; }
.step__rule { width: 100%; height: 1px; background: var(--border); margin: 1rem 0 1.1rem; }
.dark .step__rule { background: rgba(255,255,255,0.16); }
.step__title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; margin-bottom: 0.5rem; }
.step__body { font-size: 0.9rem; color: var(--stone); line-height: 1.65; }
.dark .step__body { color: var(--taupe); }

/* ============================================================
   EXPERIENCE / FEATURE BLOCKS
   ============================================================ */
.feature { position: relative; min-height: 78svh; display: flex; align-items: center; overflow: hidden; color: var(--soft-white); }
.feature__media { position: absolute; inset: 0; z-index: -2; }
.feature__media img { width:100%; height:100%; object-fit: cover; }
.feature::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(11,42,51,0.78) 0%, rgba(11,42,51,0.34) 55%, rgba(11,42,51,0.12) 100%); }
.feature__card { max-width: 540px; }
.feature--right::before { background: linear-gradient(270deg, rgba(11,42,51,0.78) 0%, rgba(11,42,51,0.34) 55%, rgba(11,42,51,0.12) 100%); }
.feature--right .feature__inner { display: flex; justify-content: flex-end; }
.feature--link { cursor: pointer; }
.feature__cover { position: absolute; inset: 0; z-index: 1; }
.feature--link .feature__inner { position: relative; z-index: 0; pointer-events: none; }
.feature--link .btn--ghost-light { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.feature--link:hover .btn--ghost-light { background: var(--soft-white); color: var(--navy); border-color: var(--soft-white); }

.statement { position: relative; min-height: 64svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: var(--soft-white); padding: clamp(3rem,8vw,6rem) 1.5rem; }
.statement__media { position: absolute; inset: 0; z-index: -2; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11,42,51,0.46); }
.statement__inner { max-width: 760px; }
.statement__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.55rem, 3.4vw, 2.5rem); line-height: 1.42; margin: 0; }
.statement__sign { display: block; margin-top: 1.6rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }

/* ============================================================
   DESTINATION CARDS (destinations page)
   ============================================================ */
.dest-group + .dest-group { margin-top: clamp(3.5rem, 7vw, 7rem); }
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2rem; }
@media (max-width: 960px) { .dest-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .dest-grid { grid-template-columns: 1fr; } }

.dest { position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; color: var(--soft-white); }
.dest img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.dest::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,42,51,0) 30%, rgba(11,42,51,0.8)); }
.dest:hover img { transform: scale(1.06); }
.dest__body { position: relative; padding: 1.5rem; }
.dest__name { font-family: var(--serif); font-size: 1.7rem; line-height: 1.05; }
.dest__reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--t-slow) var(--ease), opacity var(--t-med) var(--ease), margin var(--t-med) var(--ease); }
.dest:hover .dest__reveal { max-height: 200px; opacity: 1; margin-top: 0.7rem; }
.dest__line { font-size: 0.8rem; line-height: 1.55; color: rgba(255,255,255,0.85); }
.dest__line strong { font-weight: 400; color: #fff; }
.dest__cta { margin-top: 0.8rem; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; }

/* ============================================================
   FILTER TABS (hotels page)
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: center; margin-bottom: 3rem; }
.tab { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); grid-auto-flow: dense; }
@media (max-width: 980px) { .edit-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .edit-grid { grid-template-columns: 1fr; } }
.edit-card__feat { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ocean); margin-bottom: 0.2rem; }
.edit-grid .edit-card--feature { grid-column: span 2; }
@media (min-width: 781px) {
  .edit-grid .edit-card--feature { flex-direction: row; min-height: clamp(380px, 36vw, 480px); }
  .edit-grid .edit-card--feature .edit-card__img { aspect-ratio: auto; flex: 1 1 58%; }
  .edit-grid .edit-card--feature .edit-card__body { flex: 1 1 42%; justify-content: center; padding: clamp(2rem, 3.4vw, 3.4rem); }
  .edit-grid .edit-card--feature .hotel-card__name { font-size: clamp(1.9rem, 2.4vw, 2.5rem); }
  .edit-grid .edit-card--feature .hotel-card__desc { font-size: 1.06rem; }
}
@media (max-width: 620px) { .edit-grid .edit-card--feature { grid-column: span 1; } }
.edit-card { background: var(--soft-white); border: 1px solid var(--border); display: flex; flex-direction: column; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.edit-card[hidden] { display: none; }
.edit-card__img { aspect-ratio: 4 / 5; overflow: hidden; }
.edit-card__img img { width:100%; height:100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.edit-card:hover .edit-card__img img { transform: scale(1.05); }
.edit-card__body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }

/* ============================================================
   JOURNAL
   ============================================================ */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); }
@media (max-width: 980px) { .journal-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .journal-grid { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; gap: 0.9rem; }
.post__img { aspect-ratio: 3 / 2; overflow: hidden; }
.post__img img { width:100%; height:100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.post:hover .post__img img { transform: scale(1.05); }
.post__cat { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ocean); }
.post__title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.12; }
.post__excerpt { font-size: 0.92rem; color: var(--stone); line-height: 1.6; }
.post__meta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-top: 0.2rem; }

/* ============================================================
   ENQUIRY FORM
   ============================================================ */
.enquiry-layout { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 0; min-height: 100vh; }
@media (max-width: 960px) { .enquiry-layout { grid-template-columns: 1fr; } }

.enquiry-form { padding: clamp(6.5rem, 10vw, 9rem) clamp(1.6rem, 5vw, 5rem) 5rem; }
.field { margin-bottom: 1.8rem; }
.field > label { display: block; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.7rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-weight: 300; font-size: 1rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  padding: 0.7rem 0; transition: border-color var(--t-med) var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ocean); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23837F78' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip label {
  display: inline-block; font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.55rem 1rem;
  border: 1px solid var(--border); color: var(--stone); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip input:checked + label { background: var(--navy); border-color: var(--navy); color: var(--soft-white); }
.chip label:hover { border-color: var(--taupe); color: var(--ink); }

.enquiry-aside { position: relative; overflow: hidden; color: var(--soft-white); display: flex; flex-direction: column; justify-content: space-between; }
.enquiry-aside__media { position: absolute; inset: 0; z-index: -2; }
.enquiry-aside__media img { width:100%; height:100%; object-fit: cover; }
.enquiry-aside::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(11,42,51,0.55), rgba(11,42,51,0.75)); }
.enquiry-aside__inner { padding: clamp(6.5rem,10vw,9rem) clamp(2rem,4vw,3.5rem) 3rem; }
@media (max-width: 960px) { .enquiry-aside { min-height: 60vh; } }
.trust-list li { display: flex; gap: 1rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); font-size: 0.92rem; }
.trust-list li::before { content: ""; flex: 0 0 auto; width: 18px; height: 1px; background: var(--sand); }
.postcard-note { font-family: var(--script); font-size: 2rem; color: var(--sand); line-height: 1.1; transform: rotate(-3deg); }

.form-confirm { text-align: center; max-width: 560px; margin: 0 auto; padding: clamp(7rem,14vw,11rem) 0; }
.form-confirm.is-hidden, .enquiry-form .is-hidden { display: none; }

/* ============================================================
   POSTCARD / ANNOTATION
   ============================================================ */
.annot { font-family: var(--script); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--ocean); line-height: 1; display: inline-block; }
.annot--rotate { transform: rotate(-4deg); }
.tag-stamp { font-family: var(--script); font-size: clamp(2.4rem,5vw,4rem); color: var(--sand); transform: rotate(-6deg); display: inline-block; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-detail { font-family: var(--serif); font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.3; }
.contact-detail a:hover { color: var(--ocean); }

.newsletter { display: flex; gap: 0; border-bottom: 1px solid var(--ink); max-width: 420px; }
.newsletter input { flex: 1; border: none; background: transparent; font-family: var(--sans); font-weight: 300; padding: 0.7rem 0; font-size: 1rem; }
.newsletter input:focus { outline: none; }
.newsletter button { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; padding-left: 1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy); color: var(--soft-white); padding-block: clamp(4rem,7vw,6rem) 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(2rem,4vw,3rem); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.site-footer .brand { color: var(--soft-white); font-size: 1.9rem; }
.footer-tag { font-family: var(--serif); font-style: italic; color: var(--taupe); margin-top: 1rem; font-size: 1.15rem; }
.footer-col h4 { font-family: var(--sans); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.2rem; }
.footer-col li { padding: 0.35rem 0; }
.footer-col a { color: rgba(255,255,255,0.82); font-size: 0.92rem; transition: color var(--t-fast) var(--ease); }
.footer-col a:hover { color: #fff; }
.site-footer .link { color: var(--soft-white); }
.site-footer .link:hover { color: var(--sand); }
.footer-news input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 0.6rem 0; font-family: var(--sans); font-weight: 300; margin-bottom: 1rem; }
.footer-news input::placeholder { color: var(--taupe); }
.footer-news input:focus { outline: none; border-bottom-color: var(--sand); }
.footer-social { display: flex; gap: 1.2rem; margin-top: 1.4rem; }
.footer-social a { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.footer-social a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--taupe); }
.footer-bottom a { color: var(--taupe); }
.footer-bottom a:hover { color: #fff; }

/* ============================================================
   STICKY ENQUIRY TAB
   ============================================================ */
.sticky-enquire {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%) translateX(0);
  z-index: 900; background: var(--navy); color: var(--soft-white);
  writing-mode: vertical-rl; padding: 1.1rem 0.65rem;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background var(--t-med) var(--ease);
}
.sticky-enquire:hover { background: var(--ocean); }
@media (max-width: 920px) { .sticky-enquire { display: none; } }

/* ============================================================
   MISC
   ============================================================ */
.intro-num { font-family: var(--serif); font-size: clamp(3rem,7vw,5rem); color: var(--taupe); line-height: 1; }
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(2rem,5vw,4rem); }
.stat__n { font-family: var(--serif); font-size: clamp(2.4rem,4vw,3.4rem); line-height: 1; }
.stat__l { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-top: 0.5rem; }
.dark .stat__l { color: var(--taupe); }

.breadcrumb { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--ink); }

/* ============================================================
   EDITORIAL CATEGORY CARDS  (homepage "A world, carefully edited")
   Larger, magazine-style cards with descriptive copy and
   slow hover motion. Replaces the old small-tile grid.
   ============================================================ */
.ecat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.4vw, 3.4rem) clamp(1.5rem, 2.4vw, 2.4rem); }
@media (max-width: 900px) { .ecat-grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; } }
@media (max-width: 540px) { .ecat-grid { grid-template-columns: 1fr; } }

.ecat { display: flex; flex-direction: column; }
.ecat__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.ecat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.ecat:hover .ecat__media img { transform: scale(1.07); }
.ecat__media::after { content: ""; position: absolute; inset: 0; background: rgba(11,42,51,0); transition: background var(--t-med) var(--ease); }
.ecat:hover .ecat__media::after { background: rgba(11,42,51,0.12); }
.ecat__num { position: absolute; top: 1.1rem; left: 1.2rem; z-index: 2; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--soft-white); opacity: 0.9; }
.ecat__body { padding-top: 1.3rem; display: flex; flex-direction: column; align-items: flex-start; }
.ecat__name { font-family: var(--serif); font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.04; }
.ecat__meta { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); margin-top: 0.45rem; }
.ecat__desc { color: var(--stone); font-size: 0.93rem; line-height: 1.62; margin-top: 0.7rem; max-width: 36ch; }
.ecat__cta { margin-top: 1rem; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); position: relative; padding-bottom: 3px; }
.ecat__cta::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.ecat:hover .ecat__cta::after { transform: scaleX(1); }

/* Full-width closing feature card (e.g. Once-in-a-Lifetime) ----- */
.ecat-feature { position: relative; overflow: hidden; min-height: 62vh; display: flex; align-items: flex-end; color: var(--soft-white); margin-top: clamp(2rem, 3.4vw, 3.4rem); }
.ecat-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1800ms var(--ease); }
.ecat-feature:hover img { transform: scale(1.05); }
.ecat-feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,51,0) 30%, rgba(11,42,51,0.78)); }
.ecat-feature__body { position: relative; padding: clamp(2rem, 5vw, 4rem); max-width: 640px; }
.ecat-feature__body h3 { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--soft-white); }
.ecat-feature__body p { color: rgba(255,255,255,0.9); margin-top: 1rem; max-width: 50ch; }

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.has-dd { position: relative; display: flex; align-items: center; }
.nav__sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ivory); border: 1px solid var(--border);
  min-width: 248px; padding: 0.7rem 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.has-dd:hover > .nav__sub, .has-dd:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__sub::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 18px; }
.nav__sub a { padding: 0.6rem 1.5rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink) !important; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav__sub a::after { display: none !important; }
.nav__sub a:hover { background: var(--linen); }

/* Mega menu (Destinations by continent) */
.has-dd--mega { position: static; }
.nav__mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ivory); border: 1px solid var(--border);
  padding: clamp(1.8rem, 2.4vw, 2.6rem);
  width: min(940px, calc(100vw - 3rem));
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.has-dd--mega:hover > .nav__mega, .has-dd--mega:focus-within > .nav__mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__mega::before { content: ""; position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 100vw; height: 50px; }
.nav__mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2.4rem; }
.nav__mega-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.nav__mega-head { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--taupe); padding-bottom: 0.5rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); width: 100%; }
.nav__mega a { padding: 0 !important; font-size: 0.66rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-family: var(--sans) !important; color: var(--ink) !important; white-space: nowrap; }
.nav__mega a::after { display: none !important; }
.nav__mega a:hover { color: var(--ocean) !important; }
.nav__mega-foot { grid-column: 1 / -1; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.nav__mega-foot a { font-style: italic; }

@media (max-width: 920px) {
  .nav { align-items: center; }
  /* Mobile dropdowns become tap-to-expand accordions - clean, one open at a time */
  .has-dd, .has-dd--mega { flex-direction: column; gap: 0; align-items: center; width: 100%; }
  .has-dd > a { display: inline-flex; align-items: center; }
  .has-dd > a::after {
    content: "\002B"; position: static; transform: none; width: auto; height: auto; background: none;
    margin-left: 0.55rem; font-size: 0.78em; line-height: 1; color: var(--stone); display: inline-block;
  }
  .has-dd.is-open > a::after { content: "\2212"; }
  .nav__sub {
    position: static; visibility: visible; display: flex; flex-direction: column; gap: 0.95rem; align-items: center;
    max-height: 0; opacity: 0; overflow: hidden; width: 100%; margin: 0; padding: 0; transform: none;
    border: none; background: transparent; min-width: 0;
    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.3s var(--ease);
  }
  .nav__sub a { font-size: 0.7rem; color: var(--stone) !important; }
  .nav__mega {
    position: static; visibility: visible; display: block; transform: none;
    max-height: 0; opacity: 0; overflow: hidden; width: 100%; margin: 0; padding: 0;
    border: none; background: transparent;
    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.3s var(--ease);
  }
  .nav__mega::before, .nav__sub::before { display: none; }
  /* the accordion (.is-open), not hover/focus, controls the dropdowns on mobile */
  .nav__sub, .nav__mega { transform: none !important; }
  .has-dd:hover > .nav__sub, .has-dd:focus-within > .nav__sub,
  .has-dd--mega:hover > .nav__mega, .has-dd--mega:focus-within > .nav__mega { opacity: 0; visibility: visible; max-height: 0; margin-top: 0; }
  .has-dd.is-open > .nav__sub { opacity: 1 !important; max-height: 60vh !important; margin-top: 1rem !important; overflow-y: auto; }
  .has-dd.is-open > .nav__mega { opacity: 1 !important; max-height: 64vh !important; margin-top: 1.1rem !important; overflow-y: auto; overflow-x: hidden; }
  .nav__mega-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; width: 100%; }
  .nav__mega-col { align-items: center; gap: 0.75rem; width: 100%; }
  .nav__mega-head { text-align: center; border-bottom: none; width: auto; padding-bottom: 0; margin-bottom: 0; }
  .nav__mega a { font-size: 0.74rem !important; white-space: normal !important; padding: 0 !important; }
  .nav__mega-foot { display: block; text-align: center; border-top: none; margin-top: 0.4rem; padding-top: 0.4rem; }
}

/* ============================================================
   LIGHTBOX (click-through galleries)
   ============================================================ */
[data-lb] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 9500; background: rgba(11,42,51,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease); }
.lb.is-open { opacity: 1; visibility: visible; }
.lb__img { max-width: 88vw; max-height: 84vh; object-fit: contain; opacity: 0; transform: scale(0.98); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.lb.is-open .lb__img { opacity: 1; transform: scale(1); }
.lb__btn { position: absolute; color: rgba(255,255,255,0.85); background: none; border: none; font-family: var(--serif); transition: color var(--t-fast) var(--ease); }
.lb__btn:hover { color: #fff; }
.lb__close { top: 1.6rem; right: 1.8rem; font-size: 1.8rem; line-height: 1; }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); font-size: 2.4rem; padding: 1rem; }
.lb__prev { left: 1rem; } .lb__next { right: 1rem; }
.lb__cap { position: absolute; bottom: 1.6rem; left: 0; width: 100%; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 1rem; }
@media (max-width: 600px) { .lb__prev, .lb__next { font-size: 1.8rem; padding: 0.5rem; } }

/* ============================================================
   STAR RATING
   ============================================================ */
.stars { display: inline-flex; gap: 0.18em; color: var(--ocean); font-size: 0.74rem; letter-spacing: 0.06em; }
.stars span { line-height: 1; }

/* ============================================================
   GALLERY (safari)
   ============================================================ */
/* True masonry via CSS columns. Images keep their natural        */
/* aspect ratio (never cropped); only the width flexes.            */
.gallery { column-count: 3; column-gap: 0.5rem; }
@media (max-width: 820px) { .gallery { column-count: 2; } }
@media (max-width: 460px) { .gallery { column-count: 2; column-gap: 0.4rem; } }
.gallery a { position: relative; display: block; overflow: hidden; margin-bottom: 0.5rem; break-inside: avoid; }
.gallery img { width: 100%; height: auto; display: block; }
.gallery a::after { content: ""; position: absolute; inset: 0; background: rgba(11,42,51,0); transition: background var(--t-med) var(--ease); }
.gallery a:hover::after { background: rgba(11,42,51,0.22); }

/* ============================================================
   BIG FIVE
   ============================================================ */
.big5-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); background: var(--border); gap: 1px; margin-top: 2.4rem; }
@media (max-width: 820px) { .big5-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .big5-grid { grid-template-columns: 1fr; } }
.big5 { background: var(--ivory); padding: 1.7rem 1.5rem 1.8rem; min-height: 210px; display: flex; flex-direction: column; }
.big5__num { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--taupe); }
.big5__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.05; margin-top: auto; }
.big5__line { font-size: 0.85rem; color: var(--stone); line-height: 1.55; margin-top: 0.5rem; }

/* ============================================================
   LODGE CARDS (recommended safari hotels)
   ============================================================ */
.lodge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); }
@media (max-width: 980px) { .lodge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lodge-grid { grid-template-columns: 1fr; } }
.lodge { background: var(--soft-white); border: 1px solid var(--border); display: flex; flex-direction: column; }
.lodge__img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.lodge__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.lodge__img:hover img { transform: scale(1.05); }
.lodge__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.lodge__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.lodge__loc { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }
.lodge__name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.08; }
.lodge__desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.lodge__detail { font-size: 0.84rem; color: var(--stone); line-height: 1.55; }
.lodge__detail strong { font-weight: 400; color: var(--ink); }
.lodge__cta { margin-top: auto; padding-top: 0.7rem; }

/* ============================================================
   SAFARI PAGE REFINEMENTS  (elevation pass)
   Builds on the existing tokens and type scale. No new colours,
   no larger type. Layout, rhythm and hover polish only.
   ============================================================ */

/* Intro image stack (portrait wildlife + overlapping detail) --- */
.img-stack { position: relative; }
.img-stack__main { aspect-ratio: 4 / 5; overflow: hidden; }
.img-stack__main img { width: 100%; height: 100%; object-fit: cover; }
.img-stack__detail { position: absolute; right: -1.4rem; bottom: -1.6rem; width: 44%; aspect-ratio: 1 / 1; overflow: hidden; border: 7px solid var(--ivory); }
.img-stack__detail img { width: 100%; height: 100%; object-fit: cover; }
.img-stack__note { position: absolute; left: -0.5rem; top: -2.4rem; }
@media (max-width: 860px) { .img-stack__detail { right: 0; bottom: -1rem; width: 40%; } .img-stack { margin-bottom: 1.5rem; } }

/* Gallery hover captions ---------------------------------------- */
.gallery a .g-cap {
  position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2;
  padding: 2.4rem 1.1rem 1rem; color: var(--soft-white);
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(11,42,51,0) 0%, rgba(11,42,51,0.72) 100%);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery a:hover .g-cap { opacity: 1; transform: none; }

/* Big Five: enriched editorial cells (overrides earlier rules) - */
.big5 { min-height: 0; justify-content: flex-start; gap: 0.55rem; padding: 1.7rem 1.5rem 1.8rem; }
.big5__name { margin-top: 0.1rem; }
.big5__desc { font-size: 0.85rem; color: var(--ink); line-height: 1.55; }
.big5__where { font-size: 0.8rem; color: var(--stone); line-height: 1.5; margin-top: 0.3rem; }
.big5__where strong, .big5__note strong { font-weight: 400; color: var(--ink); letter-spacing: 0.02em; }
.big5__note { font-size: 0.8rem; color: var(--stone); line-height: 1.5; padding-top: 0.55rem; margin-top: 0.2rem; border-top: 1px solid var(--border); }
@media (max-width: 1100px) { .big5-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .big5-grid { grid-template-columns: 1fr; } }

/* Country comparison cards -------------------------------------- */
.country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (max-width: 980px) { .country-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .country-grid { grid-template-columns: 1fr; } }
.scard { background: var(--soft-white); border: 1px solid var(--border); display: flex; flex-direction: column; }
.scard__img { aspect-ratio: 4 / 5; overflow: hidden; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.scard:hover .scard__img img { transform: scale(1.05); }
.scard__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.scard__name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.05; }
.scard__row { font-size: 0.84rem; line-height: 1.5; color: var(--stone); }
.scard__row strong { font-weight: 400; color: var(--ink); letter-spacing: 0.02em; }
.scard__cta { margin-top: auto; padding-top: 0.7rem; }

/* Safari styles: hairline grid of refined text cards ----------- */
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 680px) { .style-grid { grid-template-columns: 1fr; } }
.style-card { background: var(--ivory); padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; transition: background var(--t-med) var(--ease); }
.style-card:hover { background: var(--soft-white); }
.style-card h3 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.style-card p { font-size: 0.88rem; color: var(--stone); line-height: 1.6; }
.style-card .link { align-self: flex-start; margin-top: 0.3rem; }

/* Best time to travel: scannable editorial list ---------------- */
.season-list { border-top: 1px solid var(--border); }
.season { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.season__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.05; }
.season__months { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocean); margin-top: 0.5rem; }
.season__note { color: var(--stone); font-size: 0.92rem; line-height: 1.65; }
@media (max-width: 680px) { .season { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Safari & beach pairings --------------------------------------- */
.pair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 820px) { .pair-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pair-grid { grid-template-columns: 1fr; } }
.pair { background: var(--ivory); padding: 1.6rem; transition: background var(--t-med) var(--ease); }
.pair:hover { background: var(--soft-white); }
.pair__title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; }
.pair__note { color: var(--stone); font-size: 0.88rem; line-height: 1.55; margin-top: 0.45rem; }

/* Trust / reassurance strip ------------------------------------- */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 2.4rem; }
@media (max-width: 760px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item { background: var(--ivory); padding: 1.3rem 1.4rem; font-size: 0.86rem; color: var(--ink); line-height: 1.5; display: flex; gap: 0.75rem; align-items: baseline; }
.trust-item::before { content: ""; flex: 0 0 auto; width: 16px; height: 1px; background: var(--taupe); position: relative; top: 0.55em; }

/* FAQ accordion ------------------------------------------------- */
/* Journal article body */
.prose { max-width: 70ch; margin: 0 auto; }
.prose > p { font-size: 1.06rem; line-height: 1.8; color: var(--ink); margin: 0 0 1.5rem; }
.prose .lede { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.6; color: var(--ink); margin-bottom: 2.2rem; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 3rem 0 1.1rem; }
.prose h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 2.2rem 0 0.8rem; }
.prose ul, .prose ol { margin: 0 0 1.5rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; color: var(--ink); line-height: 1.7; }
.prose a { color: var(--ocean); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose figure { margin: 2.4rem 0; }
.prose figure img { width: 100%; display: block; }
.prose figcaption { font-size: 0.82rem; color: var(--stone); margin-top: 0.7rem; font-style: italic; }
.prose blockquote { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--ocean); border-left: 1px solid var(--border); padding-left: 1.4rem; margin: 2.2rem 0; }
.article-meta { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 1.6rem; }

/* Singita brand mark */
.lodge-logo { height: clamp(58px, 7vw, 84px); width: auto; display: block; margin-bottom: 1.3rem; }
.lodge-logo--light { filter: brightness(0) invert(1); opacity: 0.92; }

.faq { max-width: 840px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.2rem; color: var(--stone); transition: transform var(--t-med) var(--ease); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--ocean); }
.faq__a { color: var(--stone); font-size: 0.92rem; line-height: 1.7; margin-top: 0.9rem; max-width: 72ch; }

/* Lodge cards: vertical 3:4 portrait imagery (override) -------- */
.lodge__img { aspect-ratio: 3 / 4; }
.lodge__sig { font-size: 0.84rem; color: var(--stone); line-height: 1.55; }
.lodge__sig strong { font-weight: 400; color: var(--ink); }

/* Soft enquiry CTA band ----------------------------------------- */
.cta-band { text-align: center; }
.cta-band .lede { margin: 0 auto; }
.cta-band p.muted { margin: 1rem auto 0; }
.cta-band .btn { margin-top: 2rem; }

/* ============================================================
   BIG FIVE: scroll rail of large vertical cards
   3 visible on desktop, arrow controls, slide-up hover panel.
   ============================================================ */
.b5-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.b5-arrows { display: flex; gap: 0.6rem; }
.b5-arrow { width: 48px; height: 48px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--ink); background: var(--ivory); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.b5-arrow:hover { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }

/* Full-bleed: the rail breaks out of the wrap and runs edge to edge */
.b5-rail { display: flex; gap: 0.5rem; overflow-x: hidden; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 0.5rem; scrollbar-width: none; width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.b5-rail::-webkit-scrollbar { display: none; }
.b5 { position: relative; flex: 0 0 calc((100vw - 1rem) / 3); scroll-snap-align: start; aspect-ratio: 3 / 4; overflow: hidden; color: var(--soft-white); }
@media (max-width: 980px) { .b5 { flex-basis: calc((100vw - 0.5rem) / 2); } }
@media (max-width: 620px) { .b5 { flex-basis: 82vw; } }
.b5 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.b5:hover img { transform: scale(1.06); }
.b5__base { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; padding: 1.5rem; background: linear-gradient(180deg, rgba(11,42,51,0) 0%, rgba(11,42,51,0.66) 100%); transition: opacity var(--t-med) var(--ease); }
.b5__num { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--sand); }
.b5__name { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--soft-white); margin-top: 0.15rem; }
.b5__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.6rem 1.5rem 1.7rem; background: linear-gradient(180deg, rgba(11,42,51,0) 0%, rgba(11,42,51,0.86) 26%); }
.b5__panel .b5__name { margin-bottom: 0.5rem; }
.b5__desc { font-size: 0.85rem; color: rgba(255,255,255,0.92); line-height: 1.55; }
.b5__meta { font-size: 0.76rem; color: var(--sand); line-height: 1.5; margin-top: 0.6rem; }
.b5__meta strong { color: #fff; font-weight: 400; letter-spacing: 0.02em; }
.b5__cta { margin-top: 0.9rem; display: inline-block; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.5); }
/* Touch / no-hover: details always visible. Mouse: slide-up reveal */
@media (hover: hover) {
  .b5__panel { transform: translateY(101%); transition: transform var(--t-slow) var(--ease); }
  .b5:hover .b5__panel { transform: translateY(0); }
  .b5:hover .b5__base { opacity: 0; }
}

/* ============================================================
   FULL-WIDTH IMAGE BANDS  (break up the page rhythm)
   ============================================================ */
.imgband { position: relative; min-height: 62vh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--soft-white); padding: 3rem var(--gutter); }
.imgband__media { position: absolute; inset: 0; z-index: -2; }
.imgband__media img { width: 100%; height: 100%; object-fit: cover; }
.imgband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11,42,51,0.42); }
.imgband__inner { max-width: 30ch; }
.imgband__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--soft-white); }
.imgband .annot { color: var(--sand); display: block; margin-bottom: 0.8rem; }
.imgband--texture::before { background: rgba(11,42,51,0.3); }

/* ============================================================
   LODGE DETAIL PAGE  (at-a-glance facts)
   ============================================================ */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--ivory); padding: 1.5rem 1.5rem 1.6rem; }
.fact__k { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }
.fact__v { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; margin-top: 0.4rem; }
.fact__v small { font-family: var(--sans); font-size: 0.8rem; color: var(--stone); display: block; margin-top: 0.2rem; letter-spacing: 0.02em; }

/* Lodge detail two-up image row -------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.4vw, 1.2rem); }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } }
.duo .img-mask { aspect-ratio: 4 / 5; }
.duo .img-mask img { width: 100%; height: 100%; object-fit: cover; }

/* Lodge card: secondary "explore" link under the enquiry CTA ---- */
.lodge__links { margin-top: auto; padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

/* ============================================================
   LODGE PROFILE  (Singita Sabora refinements)
   ============================================================ */
/* Concierge notes - hairline list beside an image */
.notes { margin: 0; }
.notes li { display: flex; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.notes li:first-child { border-top: 1px solid var(--border); }
.notes li b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1rem; color: var(--taupe); flex: 0 0 auto; line-height: 1.3; }

/* "What a stay feels like" - alternating editorial rows */
.feel { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feel + .feel { margin-top: clamp(3rem, 6vw, 6rem); }
.feel:nth-child(even) .feel__media { order: 2; }
.feel__media { aspect-ratio: 5 / 4; }
.feel__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .feel { grid-template-columns: 1fr; gap: 1.8rem; } .feel:nth-child(even) .feel__media { order: 0; } }

/* Suit cards: small image-led cards (reuses journal-grid) ------- */
.suit .post__img { aspect-ratio: 4 / 3; }
.suit .post__title { font-size: 1.35rem; }

/* FAQ inside a split: let it fill the column ------------------- */
.faq--inline { max-width: none; }

/* ============================================================
   ITINERARY BUILDER  (client-side, localStorage)
   Understated "add to itinerary" toggles, a floating pill and
   a slide-in drawer. Every path still leads to the enquiry.
   ============================================================ */
.itin-add { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; background: none; border: none; }
.itin-add::before { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 0.95rem; line-height: 1; }
.itin-add.is-in::before { content: "\2713"; } /* check */
.itin-add.is-in { color: var(--ocean); }
.itin-add--light.is-in, .b5__cta.itin-add.is-in { color: var(--sand); }

/* Floating pill */
.itin-pill { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 950; background: var(--navy); color: var(--soft-white); display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1.25rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background var(--t-med) var(--ease); }
.itin-pill:hover { background: var(--ocean); }
.itin-pill[hidden] { display: none; }
.itin-pill__dot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem; background: var(--sand); color: var(--navy); border-radius: 50%; font-size: 0.72rem; letter-spacing: 0; }
@media (max-width: 520px) { .itin-pill { right: 1rem; bottom: 1rem; } }

/* Drawer */
.itin-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
.itin-drawer.is-open { visibility: visible; }
.itin-drawer__bg { position: absolute; inset: 0; background: rgba(11,42,51,0.45); opacity: 0; transition: opacity var(--t-med) var(--ease); }
.itin-drawer.is-open .itin-drawer__bg { opacity: 1; }
.itin-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: var(--ivory); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); }
.itin-drawer.is-open .itin-drawer__panel { transform: none; }
.itin-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem; border-bottom: 1px solid var(--border); }
.itin-close { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--ink); cursor: pointer; }
.itin-drawer__body { flex: 1; overflow-y: auto; padding: 0.4rem 1.6rem; }
.itin-items { margin: 0; }
.itin-items li { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.itin-items__t { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }
.itin-items__m { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-top: 0.3rem; }
.itin-rm { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); cursor: pointer; white-space: nowrap; padding-top: 0.3rem; }
.itin-rm:hover { color: var(--ink); }
.itin-empty { color: var(--stone); font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.5; padding: 2rem 0; }
.itin-drawer__foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; }
.itin-drawer__foot .btn { width: 100%; justify-content: center; }
.itin-clear { align-self: center; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); cursor: pointer; }

/* Enquiry page chips */
.itin-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.itin-chip { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border); background: var(--soft-white); padding: 0.5rem 0.9rem; font-size: 0.82rem; }
.itin-chip button { cursor: pointer; color: var(--stone); font-size: 1rem; line-height: 1; background: none; border: none; }
.itin-chip button:hover { color: var(--ink); }

/* ============================================================
   ATLAS SAFARI EDIT - tight lodge stage
   Thin, consistent white gutters around the featured lodge and
   between the rail cards. Featured has a bottom-right hover reveal.
   ============================================================ */
.edit-stage { padding-inline: clamp(0.85rem, 2.2vw, 2.4rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }

.edit-feature { position: relative; overflow: hidden; height: clamp(420px, 58vh, 620px); color: var(--soft-white); margin-bottom: 0.5rem; }
.edit-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease); }
.edit-feature:hover > img { transform: scale(1.04); }
.edit-feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,42,51,0.58), rgba(11,42,51,0) 52%); transition: background var(--t-med) var(--ease); }
.edit-feature:hover::after { background: linear-gradient(to top, rgba(11,42,51,0.74), rgba(11,42,51,0.16) 72%); }
.edit-feature__inner { position: absolute; right: 0; bottom: 0; z-index: 2; padding: clamp(1.6rem, 3vw, 2.8rem); text-align: right; max-width: 600px; }
.edit-feature__name { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--soft-white); margin-top: 0.4rem; }
.edit-feature__reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--t-slow) var(--ease), opacity var(--t-med) var(--ease), margin var(--t-med) var(--ease); }
.edit-feature:hover .edit-feature__reveal { max-height: 320px; opacity: 1; margin-top: 0.9rem; }
.edit-feature__desc { color: rgba(255,255,255,0.92); max-width: 48ch; margin-left: auto; }
.edit-feature__ctas { display: flex; gap: 1.4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.3rem; }
@media (hover: none) { .edit-feature__reveal { max-height: 360px; opacity: 1; margin-top: 0.9rem; } }

/* Inset rail variant (thin gutters, not full-bleed) ------------- */
.b5-rail--inset { width: auto; left: auto; margin-left: 0; gap: 0.5rem; }
.b5-rail--inset .b5 { flex-basis: calc((100% - 1rem) / 3); }
@media (max-width: 980px) { .b5-rail--inset .b5 { flex-basis: calc((100% - 0.5rem) / 2); } }
@media (max-width: 620px) { .b5-rail--inset .b5 { flex-basis: 82%; } }

/* Scroll indicator removed from all heroes (per request) */
.hero__scroll { display: none !important; }

/* Destination regions as Big-Five-style rails (reuses .dest cards) */
.dest-rail { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 0.5rem; scrollbar-width: none; margin-top: 1.6rem; }
.dest-rail::-webkit-scrollbar { display: none; }
.dest-rail .dest { flex: 0 0 calc((100% - 1rem) / 3); scroll-snap-align: start; aspect-ratio: 3 / 4; }
@media (max-width: 980px) { .dest-rail .dest { flex-basis: calc((100% - 0.5rem) / 2); } }
@media (max-width: 620px) { .dest-rail .dest { flex-basis: 86%; } }


/* ============================================================
   ATLAS CURSOR  (compass-rose mark, site-wide)
   ============================================================ */


/* Loader compass mark */



/* Atlas cursor REPLACED: thin-line globe (overrides the earlier mark) */


/* ============================================================
   THINGS TO DO  (destination pages)
   ============================================================ */
.todo__h { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; margin-bottom: 0.5rem; }
.todo__list { margin: 0; }
.todo__list li { display: flex; gap: 0.85rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.todo__list li:first-child { border-top: 1px solid var(--border); }
.todo__list li::before { content: ""; flex: 0 0 auto; width: 15px; height: 1px; background: var(--taupe); position: relative; top: 0.74em; }
.todo-rare { background: var(--navy); color: var(--soft-white); padding: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.9rem; }
.todo-rare .label { color: var(--sand); }
.todo-rare .todo__h { color: var(--soft-white); }
.todo-rare .todo__list li { color: rgba(255,255,255,0.92); border-bottom-color: rgba(255,255,255,0.16); }
.todo-rare .todo__list li:first-child { border-top-color: rgba(255,255,255,0.16); }
.todo-rare .todo__list li::before { background: var(--sand); }

/* Things to do - refined: serif-numbered list + light list on the feature */
.todo__list--num { counter-reset: todo; }
.todo__list--num li::before { counter-increment: todo; content: counter(todo, decimal-leading-zero); width: auto; height: auto; min-width: 1.7rem; background: none; position: static; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--taupe); line-height: 1.55; }
.todo__list--light li { color: rgba(255,255,255,0.92); border-bottom-color: rgba(255,255,255,0.2); }
.todo__list--light li:first-child { border-top-color: rgba(255,255,255,0.2); }
.todo__list--light li::before { background: var(--sand); }

/* Journal article: tags, category, author */
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.4rem 0 0; }
.article-tag { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); border: 1px solid var(--border); padding: 0.45rem 0.85rem; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.article-tag:hover { color: var(--ocean); border-color: var(--taupe); }
.article-cat { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocean); }

.article-author { display: flex; gap: 1.3rem; align-items: flex-start; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2rem 0; margin: 3rem 0 0; }
.article-author__mark { flex: 0 0 auto; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--ivory); font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.04em; }
.article-author__name { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin: 0; }
.article-author__role { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--stone); margin: 0.25rem 0 0; }
.article-author__bio { font-size: 0.92rem; line-height: 1.7; color: var(--stone); margin: 0.7rem 0 0; max-width: 60ch; }

/* Process steps (How It Works) */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.6rem; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .steps { grid-template-columns: 1fr; } }
.step__num { font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--taupe); line-height: 1; }
.step__title { font-family: var(--serif); font-size: 1.4rem; margin: 0.8rem 0 0.5rem; color: var(--ink); }
.step__text { font-size: 0.95rem; line-height: 1.7; color: var(--stone); }
.step { border-top: 1px solid var(--border); padding-top: 1.2rem; }
/* On dark sections, keep step titles and rules legible */
.dark .step__title { color: var(--soft-white); }
.dark .step { border-top-color: rgba(255,255,255,0.18); }
.dark .step__text { color: var(--taupe); }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }
.quote { background: var(--soft-white); border: 1px solid var(--border); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; }
.quote__mark { font-family: var(--serif); font-size: 3rem; line-height: 0.6; color: var(--sand); height: 1.4rem; }
.quote__text { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-style: italic; line-height: 1.55; color: var(--ink); margin: 0.6rem 0 1.4rem; }
.quote__by { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: auto; }
.quote__trip { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--stone); margin-top: 0.3rem; }

/* Homepage reviews (no boxes, arrows either side, fade) */
.reviews__stage { position: relative; max-width: 960px; margin: 2.8rem auto 0; display: flex; align-items: center; gap: clamp(0.6rem, 3vw, 2.6rem); }
.reviews__viewport { position: relative; flex: 1; min-height: clamp(260px, 34vh, 340px); }
.review { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 800ms var(--ease); margin: 0; padding: 0 0.5rem; }
.review.is-active { opacity: 1; visibility: visible; }
.review__mark { font-family: var(--serif); font-size: 3.4rem; line-height: 0.5; color: var(--sand); margin-bottom: 1.1rem; }
.review__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.45rem, 2.7vw, 2.15rem); line-height: 1.4; color: var(--ink); margin: 0; max-width: 28ch; }
.review__stars { color: var(--sand); letter-spacing: 0.22em; font-size: 0.78rem; margin-top: 1.4rem; }
.review__by { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-top: 1rem; font-style: normal; }
.review__trip { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: none; color: var(--stone); margin-top: 0.45rem; }
.reviews__arrow { flex: 0 0 auto; width: 50px; height: 50px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-family: var(--serif); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.reviews__arrow:hover { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }
.reviews__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.2rem; }
.reviews__dots button { width: 7px; height: 7px; padding: 0; border: 0; background: var(--border); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.reviews__dots button.is-on { background: var(--navy); }
@media (max-width: 640px) { .reviews__arrow { width: 40px; height: 40px; font-size: 1.3rem; } .reviews__stage { gap: 0.4rem; } .review__text { max-width: 22ch; } }
@media (prefers-reduced-motion: reduce) { .review { transition: none; } }
.dark .review__text, .dark .review__by { color: var(--soft-white); }
.dark .review__trip { color: var(--taupe); }
.dark .reviews__arrow { color: var(--soft-white); border-color: rgba(255,255,255,0.22); }
.dark .reviews__arrow:hover { background: var(--soft-white); color: var(--navy); border-color: var(--soft-white); }
.dark .reviews__dots button { background: rgba(255,255,255,0.28); }
.dark .reviews__dots button.is-on { background: var(--soft-white); }

/* Form: validation + honeypot */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #9c4b3b; font-size: 0.84rem; line-height: 1.5; margin: 0 0 1rem; font-family: var(--sans); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #9c4b3b; }

/* ABTA / ATOL trust badges */
.trust-badges { display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem, 3.4vw, 2.8rem); flex-wrap: wrap; }
.trust-badges img { width: auto; display: block; }
.badge-atol { height: 58px; }
.badge-abta { height: 40px; }
.trust-badges__label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }

/* Top-fold protection strip (light) */
.protect-strip { background: var(--linen); border-bottom: 1px solid var(--border); padding: 1.1rem 0; }

/* Footer badges (on navy) */
.footer-badges { display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem, 3.4vw, 2.8rem); flex-wrap: wrap; padding: 2rem 0 0; margin-top: 2.4rem; border-top: 1px solid rgba(255,255,255,0.14); }
.footer-badges__note { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.footer-badges img { width: auto; display: block; opacity: 0.95; }
@media (max-width: 520px) { .badge-atol { height: 48px; } .badge-abta { height: 34px; } }

/* Enquiry form enhancements */
.enquiry-context { background: var(--linen); border: 1px solid var(--border); padding: 0.9rem 1.1rem; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink); margin: 0 0 2rem; }
.enquiry-context strong { font-weight: 500; }
.form-section { border: 0; padding: 0; margin: 0 0 2.6rem; }
.form-section__legend { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); padding: 0 0 1rem; width: 100%; border-bottom: 1px solid var(--border); margin-bottom: 1.6rem; }
.field-legend { display: block; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.7rem; padding: 0; }
.opt { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: none; color: var(--stone); margin-left: 0.4rem; font-weight: 400; }
.field-error { display: block; color: #9c4b3b; font-size: 0.74rem; line-height: 1.4; margin-top: 0.4rem; min-height: 0.2rem; }
.stepper__pair { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.stepper__label { font-family: var(--sans); font-size: 0.72rem; color: var(--stone); margin-right: 0.2rem; }
.stepper button { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--soft-white); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
.stepper button:hover { border-color: var(--taupe); }
.stepper input { width: 44px; text-align: center; }
.next-steps { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.next-steps h4 { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin: 0 0 0.5rem; }
.next-steps p { font-size: 0.85rem; color: var(--stone); line-height: 1.7; margin: 0; }
.aside-talk { margin-top: 2.4rem; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.8rem; }
.aside-talk__h { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 0.8rem; }
.aside-talk a { color: #fff; }

/* Footer designer credit */
.footer-credit { text-align: center; margin-top: 1.6rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--taupe); }
.footer-credit a { color: var(--taupe); transition: color var(--t-fast) var(--ease); }
.footer-credit a:hover { color: #fff; }

/* Soft placeholder so lazy-loaded photos never flash as blank cream */
.dest img, .b5 img, .edit-card__img, .scard img, .gallery img, .split__media img, .imgband img, .page-hero__media img, .hero__media img { background: var(--surface); }

/* Page-to-page transitions (subtle cross-fade) */
html { background: var(--ivory); }
main { animation: pageIn 460ms var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.is-leaving { opacity: 0; transition: opacity 260ms var(--ease); }
@media (prefers-reduced-motion: reduce) { main { animation: none; } body.is-leaving { transition: none; opacity: 1; } }

/* Accessibility: skip link + focus */
.skip-link { position: fixed; left: 50%; top: 0; transform: translateX(-50%) translateY(-130%); z-index: 10000; background: var(--navy); color: var(--ivory); padding: 0.75rem 1.3rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; transition: transform var(--t-fast) var(--ease); }
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }

/* Cookie consent */
.consent { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 9000; max-width: 740px; margin: 0 auto; background: var(--navy); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.14); padding: 1.2rem 1.4rem; display: flex; gap: 1.2rem 1.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; opacity: 0; transform: translateY(14px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.consent.is-in { opacity: 1; transform: none; }
.consent p { margin: 0; font-size: 0.82rem; line-height: 1.6; max-width: 44ch; }
.consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.consent button { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.65rem 1.1rem; border: 1px solid rgba(255,255,255,0.45); background: transparent; color: #fff; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.consent button.is-primary { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.consent button:hover { background: #fff; color: var(--navy); }

/* Journal: filtering, share, related */
.post[hidden] { display: none; }
.share-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.share-row__label { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); }
.share-row a, .share-row button { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--border); padding: 0.5rem 0.85rem; background: transparent; cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); text-decoration: none; }
.share-row a:hover, .share-row button:hover { border-color: var(--taupe); color: var(--ocean); }
.related { margin-top: 3.4rem; }
.related__h { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.6rem; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (max-width: 720px) { .related__grid { grid-template-columns: 1fr; } }
.related__card { display: block; text-decoration: none; }
.related__cat { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocean); }
.related__title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; color: var(--ink); margin-top: 0.4rem; }

/* Recommended hotels (destination pages): 1 feature + 3, info below image */
.hotelrec__img { overflow: hidden; background: var(--surface); }
.hotelrec__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease); background: var(--surface); }
.hotelrec-feature:hover .hotelrec__img img, .hotelrec:hover .hotelrec__img img { transform: scale(1.05); }
.hotelrec-feature { display: block; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.hotelrec-feature .hotelrec__img { aspect-ratio: 16 / 10; }
.hotelrec__body { padding-top: 1rem; }
.hotelrec-feature .hotelrec__body { max-width: 62ch; }
.hotelrec__loc { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.hotelrec__loc .stars { color: var(--sand); margin-left: 0.5rem; letter-spacing: 0.1em; }
.hotelrec__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--ink); margin: 0.45rem 0 0.5rem; }
.hotelrec-feature .hotelrec__name { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.hotelrec__desc { color: var(--stone); font-size: 0.95rem; line-height: 1.65; margin: 0 0 0.7rem; }
.hotelrec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
.hotelrec-grid .hotelrec__img { aspect-ratio: 3 / 4; }
@media (max-width: 820px) { .hotelrec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .hotelrec-grid { grid-template-columns: 1fr; } }

/* "shall we?" CTA band: subtle image under a navy overlay */
.section.dark.cta-feature { position: relative; overflow: hidden; }
.section.dark.cta-feature::before { content: ""; position: absolute; inset: 0; background: url("../assets/hero/home-hero.jpg") center / cover no-repeat; }
.section.dark.cta-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,42,51,0.85), rgba(11,42,51,0.93)); }
.section.dark.cta-feature > .wrap { position: relative; z-index: 1; }

/* Enriched hotel cards (Caribbean where to stay) */
.hotelx-stage { margin-top: 0.5rem; }
.hotelx { background: var(--soft-white); border: 1px solid var(--border); display: flex; flex-direction: column; }
.hotelx__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.hotelx__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease); }
.hotelx:hover .hotelx__img img { transform: scale(1.05); }
.hotelx__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.hotelx__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hotelx__loc { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.hotelx__stars { color: var(--sand); font-size: 0.78rem; letter-spacing: 0.08em; white-space: nowrap; }
.hotelx__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; color: var(--ink); margin: 0; }
.hotelx__desc { color: var(--stone); font-size: 0.92rem; line-height: 1.65; margin: 0; }
.hotelx__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.4rem; border-top: 1px solid var(--border); padding-top: 0.95rem; margin-top: 0.2rem; }
.hotelx__k { display: block; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.2rem; }
.hotelx__v { font-size: 0.85rem; color: var(--ink); line-height: 1.4; }
.hotelx__cost { letter-spacing: 0.08em; color: var(--border); }
.hotelx__cost b { color: var(--ocean); font-weight: 400; }
.hotelx__amen { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.2rem 0 0; }
.hotelx__amen li { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); border: 1px solid var(--border); padding: 0.32rem 0.6rem; }
.hotelx__cta { margin-top: auto; padding-top: 0.4rem; }
.hotelx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
@media (max-width: 760px) { .hotelx-grid { grid-template-columns: 1fr; } }
.hotelx-feature { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }
@media (min-width: 861px) {
  .hotelx-feature { flex-direction: row; }
  .hotelx-feature .hotelx__img { flex: 0 0 52%; aspect-ratio: auto; }
  .hotelx-feature .hotelx__body { flex: 1; justify-content: center; }
  .hotelx-feature .hotelx__name { font-size: clamp(1.9rem, 2.5vw, 2.4rem); }
  .hotelx-feature .hotelx__meta { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   THE ATLAS LETTER - newsletter invitation modal
   ============================================================ */
.al-backdrop { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(11,42,51,0.55); opacity: 0; visibility: hidden; transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease); }
.al-backdrop.is-open { opacity: 1; visibility: visible; }
.al-modal { position: relative; width: min(880px, 100%); max-height: calc(100svh - 3rem); overflow: hidden; background: var(--ivory); border: 0; box-shadow: 0 24px 70px rgba(11,42,51,0.22); display: grid; grid-template-columns: 0.82fr 1fr; align-items: stretch; transform: translateY(18px); opacity: 0; transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
.al-backdrop.is-open .al-modal { transform: translateY(0); opacity: 1; }
.al-media { position: relative; overflow: hidden; background: var(--surface); min-height: 0; }
.al-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease); }
.al-media img.is-shown { opacity: 1; }
.al-media__note { position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 2; font-family: var(--script); font-size: 1.5rem; color: var(--soft-white); text-shadow: 0 1px 14px rgba(11,42,51,0.5); }
.al-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.3rem); overflow-y: auto; min-height: 0; }
.al-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.al-brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.03em; color: var(--ink); margin: 0 0 1.4rem; }
.al-brand .amp { font-style: italic; }
.al-label { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--taupe); margin: 0 0 0.7rem; }
.al-title { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.2rem); line-height: 1.08; color: var(--ink); margin: 0 0 0.7rem; }
.al-desc { font-size: 0.92rem; line-height: 1.6; color: var(--stone); margin: 0 0 1rem; max-width: 42ch; }
.al-benefits { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.al-benefits li { position: relative; padding-left: 1.4rem; font-size: 0.86rem; color: var(--ink); line-height: 1.5; }
.al-benefits li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 1px; background: var(--taupe); }
.al-field { margin-bottom: 0.75rem; }
.al-field label { display: block; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.25rem; }
.al-field input { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 0.55rem 0; font-family: var(--sans); font-size: 0.98rem; color: var(--ink); transition: border-color var(--t-fast) var(--ease); }
.al-field input::placeholder { color: var(--sand); }
.al-field input:focus { outline: none; border-bottom-color: var(--ocean); }
.al-field input[aria-invalid="true"] { border-bottom-color: #9c4b3b; }
.al-error { display: block; color: #9c4b3b; font-size: 0.74rem; margin-top: 0.35rem; min-height: 0.2rem; }
.al-cta { width: 100%; justify-content: center; margin-top: 0.4rem; }
.al-privacy { font-size: 0.72rem; line-height: 1.55; color: var(--stone); margin: 0.8rem 0 0; }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.al-maybe { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--stone); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.al-maybe:hover { color: var(--ink); }
.al-hand { font-family: var(--script); font-size: 1.35rem; color: var(--ocean); opacity: 0; transition: opacity 700ms var(--ease) 400ms; }
.al-modal.is-ready .al-hand { opacity: 1; }
.al-close { position: absolute; top: 0.9rem; right: 1rem; z-index: 3; background: none; border: 0; font-family: var(--sans); font-size: 1.5rem; line-height: 1; color: var(--stone); cursor: pointer; width: 2rem; height: 2rem; transition: color var(--t-fast) var(--ease); }
.al-close:hover { color: var(--ink); }
.al-success[hidden], [data-al-form][hidden] { display: none !important; }
.al-success { padding: clamp(2.4rem, 4vw, 3.6rem); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-column: 1 / -1; }
.al-success .al-script { font-family: var(--script); font-size: 2rem; color: var(--ocean); margin: 0 0 0.4rem; }
.al-success h2 { margin: 0 0 1rem; }
.al-success p { color: var(--stone); max-width: 44ch; margin: 0 auto 1.8rem; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .al-backdrop, .al-modal, .al-media img, .al-hand { transition: none; } }

/* Mobile: bottom sheet */
@media (max-width: 720px) {
  .al-backdrop { align-items: flex-end; padding: 0; }
  .al-modal { grid-template-columns: 1fr; width: 100%; max-height: 92svh; transform: translateY(100%); border-bottom: 0; }
  .al-backdrop.is-open .al-modal { transform: translateY(0); }
  .al-media { min-height: 150px; aspect-ratio: auto; height: 150px; }
  .al-media img { position: absolute; }
  .al-panel { padding: 1.8rem 1.5rem 2rem; }
  .al-benefits { display: none; }
  .al-close { color: var(--ink); top: 0.6rem; right: 0.7rem; }
}

/* Minimized launcher tab (bottom-left) */
.al-launcher { position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 940; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.15rem; background: var(--navy); color: var(--soft-white); border: 1px solid var(--navy); font-family: var(--sans); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.al-launcher.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.al-launcher:hover { background: var(--ocean); }
.al-launcher__icon { font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0; line-height: 1; }
@media (max-width: 720px) { .al-launcher { left: 1rem; bottom: 1rem; padding: 0.75rem 1rem; font-size: 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .al-launcher { transition: none; } }

/* Footer newsletter copy + journal sign-up block */
.footer-news__copy { font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0 0 1rem; }
.al-signup { border: 1px solid var(--border); background: var(--surface); padding: clamp(2rem,4vw,3rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem,3vw,2.6rem); align-items: center; }
@media (max-width: 760px) { .al-signup { grid-template-columns: 1fr; } }
.al-signup__form { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; }
.al-signup__form .al-field { flex: 1 1 220px; margin: 0; }

/* Hotel card image carousel */
.hcar { position: absolute; inset: 0; overflow: hidden; }
.split__media:has(.hcar), .img-mask:has(.hcar) { aspect-ratio: 4 / 5; }
.hotelx__img { position: relative; }
.hcar__track { display: flex; height: 100%; width: 100%; transform: translate3d(0,0,0); transition: transform 600ms cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform; touch-action: pan-y; }
[data-rail] .hcar__track { touch-action: auto; }
.hcar__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; background: var(--surface); user-select: none; -webkit-user-drag: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hcar__track { transition: none; } }
.hcar__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: rgba(251,250,247,0.9); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease); z-index: 2; }
.hotelx:hover .hcar__btn, .hotelx-feature:hover .hcar__btn, .hcar:focus-within .hcar__btn { opacity: 1; }
.hcar__btn--prev { left: 0.6rem; } .hcar__btn--next { right: 0.6rem; }
.hcar__dots { position: absolute; bottom: 0.7rem; left: 0; right: 0; z-index: 2; display: flex; gap: 0.4rem; justify-content: center; pointer-events: none; }
.hcar__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: background var(--t-fast) var(--ease); }
.hcar__dots i.is-on { background: #fff; }
.hotelx__name a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.hotelx__name a:hover { color: var(--ocean); }

/* ============================================================
   UNIFIED HOTEL CARD (image on top, full detail underneath)
   Used as a feature + swipeable rail across every hotel section.
   ============================================================ */
.hcard { display: flex; flex-direction: column; background: var(--soft-white); border: 1px solid var(--border); }
.hcard__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface); }
.hcard__media > img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface); transition: transform 1200ms var(--ease); }
.hcard:hover .hcard__media > img { transform: scale(1.04); }
.hcard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.hcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.hcard__loc { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.hcard__stars { color: var(--sand); font-size: 0.74rem; letter-spacing: 0.06em; white-space: nowrap; }
.hcard__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; color: var(--ink); margin: 0; }
.hcard__name a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.hcard__name a:hover { color: var(--ocean); }
.hcard__desc { font-size: 0.9rem; line-height: 1.6; color: var(--stone); margin: 0; }
.hcard__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; border-top: 1px solid var(--border); padding-top: 0.8rem; margin-top: 0.2rem; }
.hcard__k { display: block; font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.15rem; }
.hcard__v { font-size: 0.82rem; color: var(--ink); line-height: 1.4; }
.hcard__cost { letter-spacing: 0.08em; color: var(--border); }
.hcard__cost b { color: var(--ocean); font-weight: 400; }
.hcard__amen { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.hcard__amen li { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone); border: 1px solid var(--border); padding: 0.28rem 0.55rem; }
.hcard__cta { margin-top: auto; padding-top: 0.3rem; }
/* Place / where-to-go variant (images match the hotel cards: 3/4) */
.hcard__block { display: flex; flex-direction: column; gap: 0.4rem; }
.hcard__note { font-size: 0.8rem; line-height: 1.5; color: var(--stone); margin: 0; }
.hcard__note + .hcard__note { margin-top: 0.6rem; }
.hcard__note .hcard__k { margin-bottom: 0.12rem; }
.hcard__note a { color: var(--ocean); text-decoration: none; }
.hcard__note a:hover { text-decoration: underline; }
.hcard__know { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin-top: 0.7rem; }
/* Accordions inside place cards */
.hcard__acc { border-top: 1px solid var(--border); }
.hcard__acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.7rem 0; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.hcard__acc summary::-webkit-details-marker { display: none; }
.hcard__acc summary::after { content: "\203A"; font-family: var(--serif); font-size: 1rem; color: var(--taupe); transition: transform var(--t-fast) var(--ease); }
.hcard__acc[open] summary::after { transform: rotate(90deg); }
.hcard__acc-body { padding: 0 0 0.85rem; }
.hcard__acc-body .hcard__meta, .hcard__acc-body .hcard__know { border-top: 0; padding-top: 0; margin-top: 0; }
.hcard__acc-body .hcard__meta + .hcard__know { margin-top: 0.7rem; }
/* feature variant: full width, landscape image, body beneath */
.hcard--feature { background: transparent; border: 0; margin-bottom: 0.6rem; }
.hcard--feature .hcard__media { aspect-ratio: 16 / 9; }
.hcard--feature .hcard__body { padding: 1.5rem 0 0.4rem; }
.hcard--feature .hcard__name { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.hcard--feature .hcard__desc { font-size: 0.98rem; max-width: 62ch; }
.hcard--feature .hcard__meta { max-width: 560px; }
/* rail cards keep a fixed width within the inset rail */
.b5-rail--inset .hcard { flex: 0 0 calc((100% - 1.5rem) / 4); scroll-snap-align: start; }
@media (max-width: 1100px) { .b5-rail--inset .hcard { flex-basis: calc((100% - 1rem) / 3); } }
@media (max-width: 820px) { .b5-rail--inset .hcard { flex-basis: calc((100% - 0.5rem) / 2); } }
@media (max-width: 560px) { .b5-rail--inset .hcard { flex-basis: 82%; } }

/* Atlas Edit: unified cards inside the filter grid */
.edit-grid .hcard { height: 100%; }
.edit-grid .hcard--feature { grid-column: span 2; background: var(--soft-white); border: 1px solid var(--border); }
.edit-grid .hcard--feature .hcard__body { padding: 1.4rem 1.5rem 1.6rem; }
@media (max-width: 620px) { .edit-grid .hcard--feature { grid-column: span 1; } }

/* Carousel arrows visible on unified hotel cards (not just .hotelx) */
.hcard .hcar__btn { opacity: 1; }
.hcard .hcar__btn:hover { background: #fff; }

/* Full-width split two-photo banner */
.dualband { display: grid; grid-template-columns: 1fr 1fr; width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-top: 0; margin-bottom: 0; }
.dualband__half { overflow: hidden; height: clamp(460px, 92vh, 1100px); background: var(--surface); }
.dualband__half img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1600ms var(--ease); }
.dualband__half:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .dualband__half { height: clamp(300px, 64vh, 640px); } }

/* ===== Itinerary feature (map · day-by-day scroll-spy · planner) ===== */
.itin-map { background: var(--linen); border: 1px solid var(--border); padding: clamp(1.4rem,3vw,2.4rem); }
.itin-map svg { width: 100%; height: auto; display: block; }
.itin-map__legend { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.3rem; }
.itin-map__leg { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.itin-map__leg b { color: var(--ink); font-weight: 400; }

.itin-cols { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (max-width: 860px) { .itin-cols { grid-template-columns: 1fr; } .daynav { display: none; } }
.daynav { position: sticky; top: 108px; align-self: start; }
.daynav__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.daynav__item { display: block; padding: 0.7rem 0 0.7rem 1.2rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--stone); text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.daynav__item small { display: block; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.25rem; }
.daynav__item span { font-family: var(--serif); font-size: 1.02rem; line-height: 1.2; }
.daynav__item:hover { color: var(--ink); }
.daynav__item.is-active { color: var(--ink); border-left-color: var(--ink); }
.daynav__item.is-active small { color: var(--ocean); }

.dayblock { scroll-margin-top: 108px; padding: clamp(1.9rem,3.6vw,3rem) 0; border-top: 1px solid var(--border); }
.dayblock:first-child { border-top: 0; padding-top: 0; }
.dayblock__media { aspect-ratio: 16/10; overflow: hidden; margin-bottom: 1.5rem; background: var(--linen); }
.dayblock__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.dayblock:hover .dayblock__media img { transform: scale(1.03); }
.dayblock__day { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.dayblock__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.dayblock__stay { font-size: 0.82rem; color: var(--stone); }
.dayblock__stay a { color: var(--ink); }
.dayblock__pace { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); border: 1px solid var(--border); padding: 0.3rem 0.66rem; }

.planner { background: var(--linen); border: 1px solid var(--border); padding: clamp(1.8rem,4vw,3rem); }
.planner__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.8rem,4vw,3.2rem); align-items: start; }
@media (max-width: 860px) { .planner__grid { grid-template-columns: 1fr; } }
.leg-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.leg-row__k b { font-weight: 400; }
.leg-row__k small { display: block; font-size: 0.74rem; color: var(--stone); margin-top: 0.2rem; }
.stepper { display: inline-flex; align-items: center; gap: 1rem; }
.stepper button { width: 34px; height: 34px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.stepper button:hover { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }
.stepper__val { font-family: var(--serif); font-size: 1.5rem; min-width: 1.6ch; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.chip-t { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.02em; padding: 0.55rem 0.95rem; border: 1px solid var(--border); background: transparent; color: var(--stone); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.chip-t:hover { color: var(--ink); }
.chip-t[aria-pressed="true"] { background: var(--navy); color: var(--soft-white); border-color: var(--navy); }
.planner__summary { background: var(--ivory); border: 1px solid var(--border); padding: clamp(1.5rem,3vw,2.1rem); position: sticky; top: 108px; }
.psum__n { font-family: var(--serif); font-size: clamp(2.1rem,4vw,3rem); line-height: 1; }
.psum__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.66rem 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; color: var(--stone); }
.psum__row span:last-child { color: var(--ink); }
.psum__addlist { margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--stone); }
.psum__addlist li { padding: 0.3rem 0; border-bottom: 1px dotted var(--border); }
.psum__addlist li::before { content: "+ "; color: var(--ocean); }
.psum__empty { font-size: 0.82rem; color: var(--stone); font-style: italic; margin-top: 0.9rem; }

/* ===== Itinerary flights ===== */
.flights { border-top: 1px solid var(--border); }
.flight-leg { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: clamp(1rem,3vw,2.5rem); padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom: 1px solid var(--border); }
.flight-leg__end--to { text-align: right; }
.flight-leg__city { display: block; font-family: var(--serif); font-size: clamp(1.4rem,2.4vw,2rem); line-height: 1.1; color: var(--ink); }
.flight-leg__code { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-top: 0.4rem; }
.flight-leg__path { text-align: center; }
.flight-leg__dur { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; }
.flight-leg__line { display: block; position: relative; height: 1px; background: var(--border); margin: 0.55rem 0; }
.flight-leg__line::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 38px; height: 18px; background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F3B49'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.flight-leg__note { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--stone); margin-top: 0.5rem; }
@media (max-width: 680px) { .flight-leg { grid-template-columns: 1fr auto 1fr; gap: 0.8rem; } .flight-leg__city { font-size: 1.1rem; } .flight-leg__dur, .flight-leg__note { font-size: 0.6rem; } .flight-leg__code { font-size: 0.56rem; } }
.flight-leg--rail .flight-leg__line::after { width: 28px; height: 14px; background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F3B49'%3E%3Cpath d='M12 3l9 9-9 9-9-9z'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* Card rails: drag-scroll on mobile (arrows-only on desktop), clear next-card peek */
@media (max-width: 920px) {
  .b5-rail { overflow-x: auto; }
}
@media (max-width: 620px) {
  .dest-rail .dest { flex-basis: 82%; }
}

/* Itinerary hotels grid: responsive (overrides the inline 3-col on mobile) */
@media (max-width: 980px) { .itin-hotels { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .itin-hotels { grid-template-columns: 1fr !important; } }