/* =====================================================================
   TRIWAYS — HOMEPAGE EDITORIAL LAYER  (Blueprint v1.0)
   Scoped entirely to body.tw-home so every other page is untouched.
   Loaded after triways.css. Warm ivory dominant · dark only for CTA/footer.
   Prefix: hb- (homepage blueprint)
   ===================================================================== */

body.tw-home {
  --hb-ivory:      #F4F0E8;
  --hb-white:      #FBFAF7;
  --hb-ink:        #151515;
  --hb-ink-soft:   #292725;
  --hb-champagne:  #C8B79C;
  --hb-gold:       #A68A5B;
  --hb-text:       #2c2925;
  --hb-text-dim:   #5c564c;
  --hb-line:       rgba(41, 39, 37, 0.14);
  --hb-line-on-dark: rgba(244, 240, 232, 0.18);
  --hb-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --hb-sans:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hb-ease: cubic-bezier(0.22, 0.9, 0.28, 1);

  --hb-h1:  clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
  --hb-h2:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --hb-h3:  clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --hb-eyebrow-fs: 0.72rem;

  --hb-section-y: clamp(4.5rem, 4rem + 5vw, 9.5rem);
  --hb-section-y-tight: clamp(3rem, 2.6rem + 3vw, 5.5rem);
}

@media (prefers-reduced-motion: reduce) {
  body.tw-home * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   Shared primitives
   ------------------------------------------------------------------- */
body.tw-home main { background: var(--hb-ivory); overflow-x: clip; }

/* style.css ships malformed selector lists ending in a bare `a`
   (`.card span, a .card h5, a { padding:15px }` etc.) which pad every link.
   `:where()` keeps this reset at zero specificity so any component class wins. */
:where(body.tw-home main, body.tw-home .tw-footer, body.tw-home .hb-mcta) a { padding: 0; text-align: inherit; }

.hb-section { padding: var(--hb-section-y) 0; }
.hb-section--tight { padding: var(--hb-section-y-tight) 0; }
.hb-section--white { background: var(--hb-white); }
.hb-section--ivory { background: var(--hb-ivory); }
.hb-section--dark  { background: var(--hb-ink); color: var(--hb-champagne); }
.hb-section--dark .hb-heading,
.hb-section--dark h2 { color: var(--hb-white); }

.hb-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.hb-wrap--narrow { max-width: 900px; }
.hb-wrap--copy { max-width: 620px; }

.hb-eyebrow {
  display: inline-block;
  font-family: var(--hb-sans);
  font-size: var(--hb-eyebrow-fs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-gold);
  margin-bottom: 1.1rem;
}
.hb-section--dark .hb-eyebrow { color: var(--hb-champagne); }

.hb-heading {
  font-family: var(--hb-serif);
  font-weight: 500;
  color: var(--hb-ink);
  line-height: 1.12;
  letter-spacing: 0.002em;
  margin: 0 0 1.25rem;
}
.hb-heading--h2 { font-size: var(--hb-h2); }
.hb-heading--h3 { font-size: var(--hb-h3); }

/* Win against the site-wide `h1/h2 { … !important }` rules in triways.css */
body.tw-home .hb-hero-title { font-size: clamp(2.9rem, 2rem + 4.6vw, 6.2rem) !important; line-height: 1.04 !important; color: #fff !important; margin: 0 0 1.4rem !important; }
body.tw-home .hb-hero-title { text-wrap: balance; }
/* Legacy `h1 span` rules (style.css / triways.css) shrink and restyle spans inside an H1; reset them so
   "DMC" keeps the title's exact type and differs only in colour. */
body.tw-home .hb-hero-title .hb-hero-title__accent {
  color: #E6C782 !important; font-size: inherit !important; font-family: inherit !important;
  font-weight: inherit !important; font-style: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}
body.tw-home .hb-heading { font-family: var(--hb-serif) !important; line-height: 1.12 !important; }
body.tw-home .hb-heading--h2 { font-size: var(--hb-h2) !important; }
body.tw-home .hb-section--dark .hb-heading,
body.tw-home .hb-final h2 { color: var(--hb-white) !important; }
body.tw-home .hb-final h2 { font-size: var(--hb-h2) !important; line-height: 1.14 !important; }

.hb-copy { font-family: var(--hb-sans); font-size: 1.0625rem; line-height: 1.8; color: var(--hb-text-dim); }
.hb-section--dark .hb-copy { color: rgba(244,240,232,0.72); }

.hb-rule { width: 48px; height: 1px; background: var(--hb-gold); border: 0; opacity: 0.6; margin: 1.5rem 0; }
.hb-rule--center { margin-left: auto; margin-right: auto; }

.hb-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--hb-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 2rem;
  border: 1px solid var(--hb-ink);
  color: var(--hb-ink);
  background: transparent;
  border-radius: 2px;
  transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease);
  text-decoration: none;
}
.hb-cta:hover, .hb-cta:focus-visible { background: var(--hb-ink); color: var(--hb-ivory); }
.hb-cta--solid { background: var(--hb-ink); color: var(--hb-ivory); }
.hb-cta--solid:hover, .hb-cta--solid:focus-visible { background: transparent; color: var(--hb-ink); }
.hb-section--dark .hb-cta { border-color: var(--hb-champagne); color: var(--hb-champagne); }
.hb-section--dark .hb-cta:hover, .hb-section--dark .hb-cta:focus-visible { background: var(--hb-champagne); color: var(--hb-ink); }
.hb-section--dark .hb-cta--solid { background: var(--hb-champagne); color: var(--hb-ink); }
.hb-section--dark .hb-cta--solid:hover, .hb-section--dark .hb-cta--solid:focus-visible { background: transparent; color: var(--hb-champagne); }

.hb-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--hb-sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hb-ink); border-bottom: 1px solid var(--hb-line); padding-bottom: 0.3rem;
  text-decoration: none; transition: border-color 0.25s var(--hb-ease), color 0.25s var(--hb-ease);
}
.hb-link:hover, .hb-link:focus-visible { color: var(--hb-gold); border-color: var(--hb-gold); }
.hb-link .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hb-link:hover .hb-arrow { transform: translateX(4px); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Header — transparent over hero, warm ivory once scrolled
   ------------------------------------------------------------------- */
body.tw-home .triways-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.tw-home .triways-navbar.transparent {
  background: linear-gradient(180deg, rgba(21,21,21,0.5), rgba(21,21,21,0));
  border-bottom-color: transparent;
}
body.tw-home .triways-navbar.transparent .nav-link,
body.tw-home .triways-navbar.transparent .navbar-brand,
body.tw-home .triways-navbar.transparent .navbar-toggler { color: var(--hb-white) !important; }
body.tw-home .triways-navbar.transparent .nav-link { color: rgba(251,250,247,0.92) !important; }
body.tw-home .triways-navbar.transparent .navbar-toggler { border-color: rgba(251,250,247,0.5); color: var(--hb-white); }

/* Scrolled state: the bar turns black (ink) instead of ivory, so nav text, the toggler and the
   "Partner With Us" button switch to their light variants; the logo stays gold. */
body.tw-home .triways-navbar.scrolled {
  background: rgba(21, 21, 21, 0.98) !important;
  border-bottom-color: rgba(251, 250, 247, 0.12) !important;
}
body.tw-home .triways-navbar.scrolled .nav-link { color: rgba(251,250,247,0.92) !important; }
body.tw-home .triways-navbar.scrolled .nav-link:hover,
body.tw-home .triways-navbar.scrolled .nav-link:focus-visible,
body.tw-home .triways-navbar.scrolled .nav-link.active { color: var(--hb-champagne) !important; }
body.tw-home .triways-navbar.scrolled .navbar-toggler { border-color: rgba(251,250,247,0.5); color: var(--hb-white); }
body.tw-home .triways-navbar.scrolled .navbar-brand img { filter: none; }
body.tw-home .triways-navbar.scrolled .nav-cta { background: var(--hb-champagne); border-color: var(--hb-champagne); color: var(--hb-ink); }
body.tw-home .triways-navbar.scrolled .nav-cta:hover,
body.tw-home .triways-navbar.scrolled .nav-cta:focus-visible { background: transparent; color: var(--hb-champagne); }

/* The header logo keeps its native gold (same asset colour as the footer logo) in both header states. */
body.tw-home .triways-navbar.transparent .navbar-brand img { filter: none; }

/* Split parent items: a hub link plus a separate caret button that toggles the menu.
   Trims the sitewide .nav-link padding so the pair reads as one label. */
body.tw-home .triways-navbar .nav-item.dropdown > a.nav-link { padding-right: 0.15rem !important; }
body.tw-home .triways-navbar .nav-item.dropdown > .dropdown-toggle { padding-left: 0.15rem !important; padding-right: 0.5rem !important; }

/* The header comes from the shared nav partial (_src/partials/nav.html). It carries more top-level items
   than the homepage's old bar, so it collapses below 1200px (navbar-expand-xl), as on every inner page. */
@media (max-width: 1199.98px) {
  /* Larger touch target for the caret in the stacked mobile panel. */
  body.tw-home .triways-navbar .nav-item.dropdown > .dropdown-toggle { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
  body.tw-home .triways-navbar .navbar-collapse { background: var(--hb-white); border-color: var(--hb-line); }
  /* Scoped to .navbar-collapse (not just .triways-navbar) so this ties the specificity of
     `.triways-navbar.transparent .nav-link` above and wins on source order — otherwise the
     hero's light nav-link color survives inside the open (white-background) mobile panel. */
  body.tw-home .triways-navbar .navbar-collapse .nav-link { color: var(--hb-text) !important; }
  /* Dropdown items inside the white panel: the sitewide light item colour is unreadable on white. */
  body.tw-home .triways-navbar .navbar-collapse .dropdown-item { color: var(--hb-text-dim) !important; background: transparent !important; }
  body.tw-home .triways-navbar .navbar-collapse .dropdown-item:hover,
  body.tw-home .triways-navbar .navbar-collapse .dropdown-item:focus,
  body.tw-home .triways-navbar .navbar-collapse .dropdown-item.active { color: var(--hb-ink) !important; background: transparent !important; }
  /* Scrolled (black bar): the open mobile panel goes black too, with light links. */
  body.tw-home .triways-navbar.scrolled .navbar-collapse .dropdown-item { color: rgba(251,250,247,0.75) !important; }
  body.tw-home .triways-navbar.scrolled .navbar-collapse .dropdown-item:hover,
  body.tw-home .triways-navbar.scrolled .navbar-collapse .dropdown-item:focus,
  body.tw-home .triways-navbar.scrolled .navbar-collapse .dropdown-item.active { color: var(--hb-champagne) !important; }
  body.tw-home .triways-navbar.scrolled .navbar-collapse { background: var(--hb-ink); border-color: rgba(251,250,247,0.14); }
  body.tw-home .triways-navbar.scrolled .navbar-collapse .nav-link { color: rgba(251,250,247,0.92) !important; }
  body.tw-home .triways-navbar.scrolled .navbar-collapse .nav-link:hover,
  body.tw-home .triways-navbar.scrolled .navbar-collapse .nav-link.active { color: var(--hb-champagne) !important; }
  /* Panel layout, matching triways-core.css (colours stay with the state rules above) */
  body.tw-home .triways-navbar .navbar-collapse { border-width: 1px; border-style: solid; border-radius: var(--tw-radius); margin-top: 0.6rem; padding: 0.75rem 1rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
  body.tw-home .triways-navbar .navbar-nav { align-items: stretch; }
  /* !important: triways.css sets nav-link and dropdown-item padding with !important */
  body.tw-home .triways-navbar .nav-link { padding: 0.7rem 0.25rem !important; }
  body.tw-home .triways-navbar .dropdown-menu { border: 0; box-shadow: none; padding-left: 0.75rem; margin-top: 0.15rem; background: transparent; }
  body.tw-home .triways-navbar .dropdown-item { padding-left: 0.5rem !important; white-space: normal; }
  body.tw-home .triways-navbar .nav-cta { margin: 0.75rem 0 0.25rem; justify-content: center; width: 100%; }
  body.tw-home .triways-navbar .nav-item--cta { margin-top: 0.25rem; }
}
/* Expanded bar: the same link and CTA metrics as the inner pages, so the two headers read identically */
@media (min-width: 1200px) {
  body.tw-home .triways-navbar .nav-link { padding-left: 0.5rem !important; padding-right: 0.5rem !important; line-height: 1.35; }
  body.tw-home .triways-navbar .nav-cta { padding: 0.7rem 1.25rem; white-space: nowrap; }
}
/* Fit the full bar on one row between 1200 and 1759px, as triways-core.css does */
/* The bar spans wider than the page grid so ten items keep one-line labels on large screens */
@media (min-width: 1200px) {
  body.tw-home .triways-navbar .hb-wrap { max-width: 1800px; }
}
@media (min-width: 1200px) and (max-width: 1759.98px) {
  body.tw-home .triways-navbar .nav-link { padding-left: 0.5rem !important; padding-right: 0.5rem !important; letter-spacing: 0.06em; font-size: 0.75rem !important; }
  body.tw-home .triways-navbar .nav-item.dropdown > a.nav-link { padding-right: 0.1rem !important; }
  body.tw-home .triways-navbar .nav-item.dropdown > .dropdown-toggle { padding-left: 0.1rem !important; padding-right: 0.3rem !important; }
  body.tw-home .triways-navbar .nav-cta { padding: 0.65rem 1rem; letter-spacing: 0.12em; margin-left: 0.25rem; }
}
/* Nine top-level items (VIP & Exclusive added): tighten once more below 1440px (ten items since Tour Packages), as triways-core.css does */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  body.tw-home .triways-navbar .hb-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
  body.tw-home .triways-navbar .navbar-brand img { height: 36px; }
  body.tw-home .triways-navbar .nav-link { padding-left: 0.4rem !important; padding-right: 0.4rem !important; letter-spacing: 0.04em; font-size: 0.72rem !important; }
  body.tw-home .triways-navbar .nav-cta { padding: 0.6rem 0.85rem; letter-spacing: 0.1em; }
}
/* Ten top-level items (Tour Packages added): the narrowest desktop widths need one more step */
@media (min-width: 1200px) and (max-width: 1299.98px) {
  body.tw-home .triways-navbar .hb-wrap { padding-left: 1rem; padding-right: 1rem; }
  body.tw-home .triways-navbar .nav-link { padding-left: 0.3rem !important; padding-right: 0.3rem !important; letter-spacing: 0.03em; font-size: 0.7rem !important; }
  body.tw-home .triways-navbar .nav-cta { padding: 0.55rem 0.75rem; letter-spacing: 0.08em; }
}
body.tw-home .triways-navbar .dropdown-divider { border-top-color: var(--tw-line); margin: 0.35rem 0; }

/* The shared footer mirrors the primary nav: brand block + eight link columns in two rows of four
   (overrides the five-column triways.css grid; keep in sync with triways-core.css) */
body.tw-home .tw-footer__grid { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.6vw, 2.5rem); }
body.tw-home .tw-footer__brand { grid-row: span 2; }
@media (max-width: 1199.98px) {
  body.tw-home .tw-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.tw-home .tw-footer__brand { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 767.98px) { body.tw-home .tw-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; } }

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
/* Neutralise the legacy `.hero { height:100vh }` / mobile `50vh !important` from style.css */
body.tw-home .hero { position: relative; display: block; height: auto !important; min-height: 0 !important; background: none !important; }
body.tw-home .hb-hero-inner {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(3rem, 9vh, 6rem);
  background: var(--hb-ink);
}
body.tw-home .hb-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Hero rotation: stacked slides crossfade slowly; the extra left-hand scrim fades in on the brighter slides. */
body.tw-home .hb-hero-slide { opacity: 0; transition: opacity 1.8s ease-in-out; }
body.tw-home .hb-hero-slide.is-active { opacity: 1; }
body.tw-home .hb-hero-slide--right { object-position: 70% 50%; }
body.tw-home .hb-hero-scrim::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.66) 0%, rgba(10,10,10,0.4) 44%, rgba(10,10,10,0) 76%),
    linear-gradient(0deg, rgba(10,10,10,0.38) 0%, rgba(10,10,10,0) 46%);
}
body.tw-home .hb-hero-inner[data-slide="1"] .hb-hero-scrim::after,
body.tw-home .hb-hero-inner[data-slide="2"] .hb-hero-scrim::after,
body.tw-home .hb-hero-inner[data-slide="3"] .hb-hero-scrim::after { opacity: 1; }
@media (max-width: 767.98px) {
  body.tw-home .hb-hero-scrim::after { background: linear-gradient(0deg, rgba(10,10,10,0.74) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.15) 100%); }
}body.tw-home .hb-hero-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.34) 0%, rgba(10,10,10,0.14) 34%, rgba(10,10,10,0.16) 55%, rgba(10,10,10,0.62) 100%);
}
body.tw-home .hb-hero-inner .hb-wrap { position: relative; z-index: 2; width: 100%; }
body.tw-home .hero .tw-hero-copy { max-width: 44rem; }

.hb-hero-eyebrow {
  font-family: var(--hb-sans); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--hb-champagne);
  margin-bottom: 1.4rem; opacity: 0; transform: translateY(14px);
  animation: hbRise 0.7s var(--hb-ease) 0.15s forwards;
}
.hb-hero-title {
  font-family: var(--hb-serif); font-weight: 500; color: #fff;
  font-size: clamp(2.9rem, 2rem + 4.6vw, 6.2rem); line-height: 1.04; letter-spacing: 0.002em;
  margin: 0 0 1.4rem; opacity: 0; transform: translateY(18px);
  animation: hbRise 0.75s var(--hb-ease) 0.32s forwards;
}
.hb-hero-sub {
  font-family: var(--hb-sans); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.7; color: rgba(255,255,255,0.88); max-width: 34rem; margin: 0 0 2.1rem;
  opacity: 0; transform: translateY(16px);
  animation: hbRise 0.75s var(--hb-ease) 0.5s forwards;
}
.hb-hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  animation: hbRise 0.7s var(--hb-ease) 0.68s forwards;
}
.hb-hero-actions .hb-cta { border-color: rgba(255,255,255,0.85); color: #fff; }
.hb-hero-actions .hb-cta--solid { background: var(--hb-champagne); border-color: var(--hb-champagne); color: var(--hb-ink); }
.hb-hero-actions .hb-cta--solid:hover, .hb-hero-actions .hb-cta--solid:focus-visible { background: transparent; color: #fff; border-color: #fff; }
.hb-hero-actions .hb-cta:not(.hb-cta--solid):hover,
.hb-hero-actions .hb-cta:not(.hb-cta--solid):focus-visible { background: rgba(255,255,255,0.14); color: #fff; }

.hb-scroll-cue {
  position: absolute; left: clamp(1.25rem, 4vw, 2.5rem); bottom: 1.6rem; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.75);
  opacity: 0; animation: hbFade 0.8s var(--hb-ease) 1s forwards;
}
.hb-scroll-cue::before { content: ""; width: 1px; height: 26px; background: rgba(255,255,255,0.6); display: block; }

@keyframes hbRise { to { opacity: 1; transform: translateY(0); } }
@keyframes hbFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hb-hero-eyebrow, .hb-hero-title, .hb-hero-sub, .hb-hero-actions, .hb-scroll-cue { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 767.98px) {
  body.tw-home .hb-hero-inner { min-height: 88vh; min-height: 88svh; padding-bottom: 3rem; }
  .hb-hero-actions .hb-cta { width: 100%; justify-content: center; }
  .hb-scroll-cue { display: none; }
}

/* ---------------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------------- */
.hb-trust { background: var(--hb-ivory); border-bottom: 1px solid var(--hb-line); }
.hb-trust__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: var(--hb-section-y-tight) 0; }
.hb-trust__item { padding: 0 1rem; border-left: 1px solid var(--hb-line); }
.hb-trust__item:first-child { border-left: 0; padding-left: 0; }
.hb-trust__label { font-family: var(--hb-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-ink); margin-bottom: 0.5rem; }
.hb-trust__desc { font-family: var(--hb-sans); font-size: 0.92rem; color: var(--hb-text-dim); line-height: 1.5; }
@media (max-width: 991.98px) { .hb-trust__row { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; } .hb-trust__item:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 575.98px) { .hb-trust__row { grid-template-columns: 1fr; row-gap: 1.75rem; } .hb-trust__item { border-left: 0; padding-left: 0; } }

/* ---------------------------------------------------------------------
   Editorial (Partner on the Ground) — image + narrow copy
   ------------------------------------------------------------------- */
.hb-editorial { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; }
.hb-editorial__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.hb-editorial__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) { .hb-editorial { grid-template-columns: 1fr; } .hb-editorial__media { order: -1; aspect-ratio: 16/10; } }


/* ---------------------------------------------------------------------
   Section 05 — Services — bento of six photographic cards
   Scoped under .tw-svc (prefix tw-svc-); nothing here is reused elsewhere.
   >=1200px: Destination Management spans both rows on the left (~37%);
             on the right, two cards above three. Seven tracks: one wide
             track for the feature card, six equal ones the others share.
   768–1199: two columns; the feature card and the last card span both.
   <768px:   one column, every card 4:3.

   Each card is one link. The row height is a minimum, not a fixed size:
   the description is never clamped, so a card grows before text is cut.

   Contrast: the scrim belongs to the text block, not to the card, so it
   is as tall as the copy at any card size. Worst case (a pure white
   photo behind it): the title starts on 50% near-black, ~3.6:1 for large
   text; the description and "Explore" sit on 76–88%, >= 7:1 and >= 5:1.
   ------------------------------------------------------------------- */
.tw-svc .tw-svc-head { max-width: none; margin-bottom: 0; }
body.tw-home .tw-svc-heading { margin-bottom: 0.9rem; }
.tw-svc .tw-svc-intro { font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 40rem; }
.tw-svc-wrap { margin-top: 2.5rem; }

.tw-svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.tw-svc-card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; background: var(--hb-ink); text-decoration: none;
}
.tw-svc-card .tw-svc-img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transition: transform 0.6s var(--hb-ease);
}
.tw-svc-card--tailor .tw-svc-img    { object-position: 50% 58%; }
.tw-svc-card--group .tw-svc-img     { object-position: 50% 62%; }
.tw-svc-card--concierge .tw-svc-img { object-position: 60% 50%; }

.tw-svc-body {
  position: relative; padding: 3.5rem 1.5rem 1.5rem;
  background: linear-gradient(to top,
    rgba(14, 13, 12, 0.88) 0%, rgba(14, 13, 12, 0.76) calc(100% - 6rem),
    rgba(14, 13, 12, 0.5) calc(100% - 3.5rem), rgba(14, 13, 12, 0) 100%);
}
.tw-svc-card .tw-svc-title {
  font-family: var(--hb-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15;
  letter-spacing: 0.002em; color: var(--hb-white); margin: 0 0 0.45rem;
}
.tw-svc-card .tw-svc-desc {
  font-family: var(--hb-sans); font-weight: 300; font-size: 0.8rem; line-height: 1.55;
  color: rgba(251, 250, 247, 0.86); margin: 0; max-width: 30rem;
}
.tw-svc-go {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem;
  font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--hb-champagne);
}
.tw-svc-arrow { transition: transform 0.25s var(--hb-ease); }

/* Gold line along the bottom edge — grows on hover and keyboard focus */
.tw-svc-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px;
  background: var(--hb-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--hb-ease);
}
.tw-svc-card:hover .tw-svc-img, .tw-svc-card:focus-visible .tw-svc-img { transform: scale(1.04); }
.tw-svc-card:hover::after, .tw-svc-card:focus-visible::after { transform: scaleX(1); }
.tw-svc-card:hover .tw-svc-arrow, .tw-svc-card:focus-visible .tw-svc-arrow { transform: translateX(4px); }
/* !important only to win against `a { outline: none !important }` in style.css */
.tw-svc-card:focus-visible { outline: 2px solid var(--hb-gold) !important; outline-offset: 3px; }

.tw-svc-card--feature .tw-svc-title { font-size: 1.875rem; }
.tw-svc-card--feature .tw-svc-desc { font-size: 0.9rem; line-height: 1.6; }

/* Entrance stagger — the shared .hb-reveal observer; each card only gets a
   shorter duration and its own delay, as before the redesign. */
.tw-svc-card.hb-reveal { transition-duration: 0.45s; }
.tw-svc-card--feature.hb-reveal   { transition-delay: 0s; }
.tw-svc-card--tailor.hb-reveal    { transition-delay: 0.08s; }
.tw-svc-card--group.hb-reveal     { transition-delay: 0.16s; }
.tw-svc-card--mice.hb-reveal      { transition-delay: 0.24s; }
.tw-svc-card--corporate.hb-reveal { transition-delay: 0.32s; }
.tw-svc-card--concierge.hb-reveal { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .tw-svc-card { transition-delay: 0s !important; }
  .tw-svc-card:hover .tw-svc-img, .tw-svc-card:focus-visible .tw-svc-img,
  .tw-svc-card:hover .tw-svc-arrow, .tw-svc-card:focus-visible .tw-svc-arrow { transform: none; }
}

@media (max-width: 767.98px) {
  .tw-svc .hb-wrap { padding-left: 16px; padding-right: 16px; }
  .tw-svc-wrap { margin-top: 2rem; }
  /* taller than 4:3 on phones, so the photograph still reads above the copy */
  .tw-svc-card { aspect-ratio: 1 / 1; }
}

@media (min-width: 768px) {
  .tw-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-svc-card--feature { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .tw-svc-card--concierge { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .tw-svc-card--feature .tw-svc-body { padding: 4.5rem 2rem 2rem; }
}

@media (min-width: 1200px) {
  body.tw-home .tw-svc-heading { white-space: nowrap; }
  .tw-svc-grid {
    grid-template-columns: minmax(0, 3.6fr) repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(clamp(290px, 23vw, 340px), auto));
  }
  .tw-svc-card { aspect-ratio: auto; }
  .tw-svc-card--feature   { grid-column: 1;     grid-row: 1 / 3; aspect-ratio: auto; }
  .tw-svc-card--tailor    { grid-column: 2 / 5; grid-row: 1; }
  .tw-svc-card--group     { grid-column: 5 / 8; grid-row: 1; }
  .tw-svc-card--mice      { grid-column: 2 / 4; grid-row: 2; }
  .tw-svc-card--corporate { grid-column: 4 / 6; grid-row: 2; }
  .tw-svc-card--concierge { grid-column: 6 / 8; grid-row: 2; aspect-ratio: auto; }
  .tw-svc-card--feature .tw-svc-body { padding: 4.5rem 1.75rem 1.75rem; }
  .tw-svc-card--feature .tw-svc-img { object-position: 28% 50%; } /* tall crop: keep the sun and the guide in frame */
  .tw-svc-card--mice .tw-svc-desc, .tw-svc-card--corporate .tw-svc-desc, .tw-svc-card--concierge .tw-svc-desc { font-size: 0.78rem; line-height: 1.5; }
}

/* ---------------------------------------------------------------------
   Section 03 — The Triways Difference
   Three zones in one row on ink: intro · timeline · photograph, with the
   fifth principle resolving them, centred, underneath.
   Scoped entirely under .tw-diff (prefix tw-diff-); not reused elsewhere.
   The section still sits on the shared .hb-section / .hb-section--dark
   for its background and vertical padding; nothing shared is redefined.

   The row is its own full-width grid rather than a .hb-wrap, so the
   photograph can run to the viewport edge. --tw-diff-edge reproduces the
   .hb-wrap left edge (1280px max, same gutter), so the intro still lines
   up with the sections above and below.

   The photograph's fade is a pseudo-element, not baked into the file. Its
   solid-ink stop is set where the timeline column ends, so text only ever
   sits on flat ink.

   Contrast on --hb-ink: ivory ~16:1, ivory at 80% ~10.5:1, ivory at 75%
   ~9.5:1, champagne ~9.3:1 — all clear AA at every size used.

   Reveal: the shared .hb-reveal observer, with an 80ms stagger on the
   timeline. The stylesheet's reduced-motion rules already switch
   .hb-reveal transitions off, so the stagger goes with them.
   ------------------------------------------------------------------- */
.tw-diff {
  --tw-diff-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --tw-diff-edge: max(var(--tw-diff-gutter), calc((100% - 1280px) / 2 + var(--tw-diff-gutter)));
  position: relative;
}

.tw-diff-row {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 32fr) minmax(0, 30fr);
  padding-left: var(--tw-diff-edge);
}

/* Zone 1 — intro */
.tw-diff-intro { grid-column: 1; grid-row: 1; align-self: start; padding-right: clamp(2.5rem, 5vw, 5rem); }

.tw-diff .tw-diff-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--hb-sans); font-size: var(--hb-eyebrow-fs); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-champagne);
  margin: 0 0 1.6rem;
}
.tw-diff-eyebrow::after { content: ""; flex: 0 0 46px; height: 1px; background: var(--hb-champagne); opacity: 0.5; }

/* !important only to win against the site-wide `h2 { … !important }` rules in triways.css */
body.tw-home .tw-diff-title {
  font-family: var(--hb-serif) !important; font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem) !important; line-height: 1.08 !important;
  letter-spacing: 0.002em; color: var(--hb-ivory); margin: 0; text-wrap: balance;
}

.tw-diff .tw-diff-lede {
  font-family: var(--hb-sans); font-weight: 300; font-size: 1.02rem; line-height: 1.8;
  color: rgba(244, 240, 232, 0.8); max-width: 27rem; margin: 1.75rem 0 0;
}

/* Zone 2 — timeline: one hairline, one hollow ring per principle */
.tw-diff-timeline {
  grid-column: 2; grid-row: 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  list-style: none; margin: 0; padding: 0 1.5rem 0 2.5rem; font-size: inherit;
}
.tw-diff-timeline::before {
  content: ""; position: absolute; left: 4px; top: 0.5rem; bottom: 0; width: 1px;
  background: var(--hb-champagne); opacity: 0.4;
}

.tw-diff-item { position: relative; }
.tw-diff-item::before {
  content: ""; position: absolute; left: -2.5rem; top: calc((var(--hb-eyebrow-fs) * 1.4 - 9px) / 2);
  width: 9px; height: 9px; box-sizing: border-box;
  border: 1px solid var(--hb-champagne); border-radius: 50%; background: var(--hb-ink);
}
.tw-diff-item.hb-reveal:nth-child(2) { transition-delay: 0.08s; }
.tw-diff-item.hb-reveal:nth-child(3) { transition-delay: 0.16s; }
.tw-diff-item.hb-reveal:nth-child(4) { transition-delay: 0.24s; }

.tw-diff .tw-diff-label {
  font-family: var(--hb-sans); font-size: var(--hb-eyebrow-fs); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne);
  margin: 0 0 0.75rem;
}
.tw-diff .tw-diff-thesis {
  font-family: var(--hb-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); line-height: 1.24; color: var(--hb-ivory);
  margin: 0 0 0.75rem; text-wrap: balance;
}
.tw-diff .tw-diff-support {
  font-family: var(--hb-sans); font-weight: 300; font-size: 0.92rem; line-height: 1.75;
  color: rgba(244, 240, 232, 0.75); margin: 0;
}

/* Zone 3 — photograph: bleeds to the top of the section and the right
   edge of the viewport, and reaches back under the timeline, where the
   overlay has already taken it to flat ink. */
.tw-diff-media {
  grid-column: 3; grid-row: 1; position: relative; overflow: hidden;
  margin: calc(-1 * var(--hb-section-y)) 0 0 -55%;
}
.tw-diff-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 74% 50%;
}
.tw-diff-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--hb-ink) 0%, var(--hb-ink) 36%, rgba(21, 21, 21, 0.6) 56%, rgba(21, 21, 21, 0) 88%),
    linear-gradient(to top, var(--hb-ink) 0%, rgba(21, 21, 21, 0) 24%);
}

/* V — the closing statement, centred under the row */
.tw-diff-closing {
  max-width: calc(36rem + 2 * var(--tw-diff-gutter)); margin: clamp(4rem, 3rem + 5vw, 7.5rem) auto 0;
  padding: 0 var(--tw-diff-gutter); text-align: center;
}
.tw-diff-closing::before {
  content: ""; display: block; width: 48px; height: 1px; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  background: var(--hb-champagne); opacity: 0.6;
}
.tw-diff .tw-diff-closing .tw-diff-label { color: var(--hb-white); }
.tw-diff .tw-diff-closing .tw-diff-thesis { font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.5rem); margin-bottom: 1rem; }
.tw-diff .tw-diff-closing .tw-diff-support { max-width: 32rem; margin: 0 auto; }

/* Tablet — intro and timeline side by side, photograph as a full-width band below */
@media (max-width: 1199.98px) {
  .tw-diff-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem); row-gap: clamp(3rem, 6vw, 4.5rem);
    padding-right: var(--tw-diff-edge);
  }
  .tw-diff-intro { padding-right: 0; }
  .tw-diff-timeline { padding-right: 0; }
  .tw-diff-media { grid-column: 1 / -1; grid-row: 2; height: 420px; margin: 0 calc(-1 * var(--tw-diff-edge)); }
  .tw-diff-media img { object-position: 50% 78%; }
  .tw-diff-media::after { background: linear-gradient(to bottom, var(--hb-ink) 0%, rgba(21, 21, 21, 0.45) 26%, rgba(21, 21, 21, 0) 58%); }
}

/* Mobile — intro, photograph (4:3, full bleed), timeline, closing statement */
@media (max-width: 767.98px) {
  .tw-diff { --tw-diff-gutter: 16px; }
  .tw-diff-row { grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; }
  .tw-diff-intro, .tw-diff-timeline { grid-column: 1; grid-row: auto; }
  .tw-diff-media { grid-column: 1; grid-row: auto; height: auto; aspect-ratio: 4 / 3; }
  .tw-diff-media img { object-position: 72% 50%; }
  .tw-diff-timeline { padding-left: 2rem; }
  .tw-diff-item::before { left: -2rem; }
}

/* ---------------------------------------------------------------------
   Section 08 — Capabilities — index + detail (left half), media stage (right half)
   Desktop (>=1200px): eyebrow and H2 over a two-column index (tablist) and detail
   panel on the left half; the active capability's slider fills the right half and
   bleeds to the viewport edge. Tablet: H2, full-width 16:9 stage, then index and
   detail side by side. Phones: H2, full-bleed 4:3 stage, index as an accordion.
   Inactive panels and stage groups carry [hidden]; from 768px up they stay in one
   grid cell (visibility, not display) so nothing jumps and the switch can fade.
   tw-cap-* classes style the layout; tw-capabilities__* / tw-capgal* / tw-cruises*
   remain as script hooks. --tw-cap-muted is a section-local grey (4.7:1 on white).
   ------------------------------------------------------------------- */
.tw-cap {
  --tw-cap-muted: #766f64;
  --tw-cap-inset: 1rem;
  --tw-cap-btn: 2.75rem;
  overflow-x: clip;
}
.tw-cap-layout { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); }
.tw-cap .tw-cap-intro { max-width: none; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.tw-cap-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Media stage ---- */
.tw-cap-stage {
  position: relative; overflow: hidden; background: var(--hb-ink);
  aspect-ratio: 4 / 3; margin: 0 calc(50% - 50vw) clamp(1.5rem, 5vw, 2.5rem);
}
/* Incoming group fades in on top; the outgoing one holds until the fade is done. */
.tw-cap-media { position: absolute; inset: 0; z-index: 2; opacity: 1; transition: opacity 0.5s var(--hb-ease); }
.tw-cap-media[hidden] {
  display: block !important; /* outranks Bootstrap's [hidden] { display: none !important } */
  z-index: 1; opacity: 0; visibility: hidden;
  transition: opacity 0s linear 0.5s, visibility 0s linear 0.5s;
}
.tw-cap-media .tw-capgal,
.tw-cap-media .tw-cruises { position: absolute; inset: 0; margin: 0; }

/* Vehicles / hotels / single images — native scroll-snap strip filling the stage */
.tw-capgal__strip {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; background: var(--hb-ink);
}
.tw-capgal__strip::-webkit-scrollbar { display: none; }
.tw-capgal__strip:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: -4px; }
.tw-capgal__slide { position: relative; flex: 0 0 100%; margin: 0; overflow: hidden; scroll-snap-align: start; }
.tw-capgal__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-capgal:not(.tw-capgal--single)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 11, 10, 0.7) 0%, rgba(12, 11, 10, 0.3) 45%, rgba(12, 11, 10, 0) 100%);
}
.tw-capgal__cap {
  position: absolute; z-index: 2; left: var(--tw-cap-inset); right: var(--tw-cap-inset);
  bottom: calc(var(--tw-cap-inset) + var(--tw-cap-btn) + 0.2rem);
  font-family: var(--hb-serif); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.15;
  color: var(--hb-white); text-shadow: 0 1px 10px rgba(10, 10, 10, 0.35);
}

/* Counter + progress line (bottom left), arrows (bottom right) */
.tw-cap-bar {
  position: absolute; z-index: 3; left: var(--tw-cap-inset); bottom: var(--tw-cap-inset);
  right: calc(var(--tw-cap-inset) + 2 * var(--tw-cap-btn) + 0.6rem + 1.5rem);
  height: var(--tw-cap-btn); display: flex; align-items: center; gap: 1.1rem; pointer-events: none;
}
.tw-cap-count {
  margin: 0; flex-shrink: 0; font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--hb-white); font-variant-numeric: tabular-nums;
}
.tw-cap-progress { position: relative; flex: 1 1 auto; height: 1px; overflow: hidden; background: rgba(251, 250, 247, 0.32); }
.tw-cap-progress__fill {
  position: absolute; inset: 0; background: var(--hb-gold); transform-origin: left center;
  transform: scaleX(0.2); transition: transform 0.5s var(--hb-ease);
}
.tw-cap-stage .tw-cap-arrow {
  display: flex; top: auto; bottom: var(--tw-cap-inset); transform: none; z-index: 4;
  width: var(--tw-cap-btn); height: var(--tw-cap-btn);
  background: transparent; border: 1px solid rgba(251, 250, 247, 0.78); color: var(--hb-white);
  transition: background-color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease), opacity 0.25s var(--hb-ease);
}
.tw-cap-stage .tw-cap-arrow svg { width: 1rem; height: 1rem; }
.tw-cap-stage .tw-arrow--prev { left: auto; right: calc(var(--tw-cap-inset) + var(--tw-cap-btn) + 0.6rem); }
.tw-cap-stage .tw-arrow--next { right: var(--tw-cap-inset); }
.tw-cap-stage .tw-cap-arrow:hover { background: rgba(251, 250, 247, 0.14); border-color: #fff; }
.tw-cap-stage .tw-cap-arrow:disabled { opacity: 0.35; pointer-events: none; }
.tw-cap-stage .tw-cap-arrow:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }

/* Aviation / On-Ground Operations — no photography yet: the quiet wing on charcoal */
.tw-cap-plain { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--hb-ink-soft); }
.tw-cap-plain img { width: min(46%, 20rem); height: auto; opacity: 0.4; mix-blend-mode: screen; }

/* Our Cruises — category tabs over the top of the frame, crossfading vessels,
   overlay with category, vessel, vessel switch and the shared counter bar. */
.tw-cruises__nav {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; gap: clamp(1.1rem, 2.4vw, 1.9rem);
  padding: var(--tw-cap-inset) var(--tw-cap-inset) 0;
}
.tw-cruises__nav::before {
  content: ""; position: absolute; left: var(--tw-cap-inset); right: var(--tw-cap-inset); bottom: 0; height: 1px;
  background: rgba(251, 250, 247, 0.28);
}
.tw-cruises__tab {
  background: none; border: 0; padding: 0 0 0.8rem; margin: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251, 250, 247, 0.72); transition: color 0.3s var(--hb-ease);
}
.tw-cruises__tab:hover, .tw-cruises__tab.is-active { color: #fff; }
.tw-cruises__tab:focus-visible { color: #fff; outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
.tw-cruises__navline { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--hb-gold); transition: left 0.4s var(--hb-ease), width 0.4s var(--hb-ease); }

.tw-cruises__frame { position: absolute; inset: 0; overflow: hidden; background: var(--hb-ink); }
.tw-cruises__frame::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8rem; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.6) 0%, rgba(12, 11, 10, 0) 100%);
}
.tw-cruises__slides { position: absolute; inset: 0; }
.tw-cruises__slide {
  position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transform: scale(1.03);
  transition: opacity 0.9s var(--hb-ease), transform 1.1s var(--hb-ease);
}
.tw-cruises__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.tw-cruises__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Alyssa is a 3.4:1 panorama: show it whole over a blurred fill of itself rather than crop the ship. */
.tw-cruises__slide.is-contain::before {
  content: ""; position: absolute; inset: -10%; background: var(--tw-cruises-bg) center / cover;
  filter: blur(22px) brightness(0.62); transform: scale(1.1);
}
.tw-cruises__slide.is-contain img { object-fit: contain; }
.tw-cruises__label {
  position: absolute; z-index: 3; top: calc(var(--tw-cap-inset) + 3.25rem); right: var(--tw-cap-inset);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--hb-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); pointer-events: none;
}
.tw-cruises__overlay {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start;
  padding: 4.5rem calc(var(--tw-cap-inset) + 2 * var(--tw-cap-btn) + 0.6rem + 1.5rem) var(--tw-cap-inset) var(--tw-cap-inset);
  background: linear-gradient(0deg, rgba(12, 11, 10, 0.72) 0%, rgba(12, 11, 10, 0.34) 55%, rgba(12, 11, 10, 0) 100%);
  color: #fff;
}
.tw-cruises__cat { margin: 0 0 0.3rem; font-family: var(--hb-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
.tw-cruises__name { margin: 0; font-family: var(--hb-serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.15; }
.tw-cruises__ships { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; pointer-events: auto; }
.tw-cruises__ships[hidden] { display: none; }
.tw-cruises__ship {
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 0 0.3rem; margin: 0; cursor: pointer;
  font-family: var(--hb-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-cruises__ship:hover, .tw-cruises__ship.is-active { color: #fff; border-color: var(--hb-gold); }
.tw-cruises__ship:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 3px; }
.tw-cruises .tw-cap-bar { position: relative; left: auto; right: auto; bottom: auto; align-self: stretch; margin-top: 0.35rem; }

/* ---- Index (tablist) ---- */
.tw-cap-index { border-top: 1px solid var(--hb-line); }
.tw-cap-row {
  position: relative; display: flex; align-items: center; gap: 0.9rem; width: 100%; margin: 0;
  padding: 0.78rem 0.25rem 0.78rem 1.1rem; background: none; border: 0; border-bottom: 1px solid var(--hb-line);
  text-align: left; cursor: pointer; color: inherit;
}
.tw-cap-row::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--hb-gold);
  transform: scaleY(0); transition: transform 0.35s var(--hb-ease);
}
.tw-cap-row.is-active::before { transform: scaleY(1); }
.tw-cap-row:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: -2px; }
.tw-cap-row__num {
  flex-shrink: 0; min-width: 1.25rem; font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--tw-cap-muted); transition: color 0.2s var(--hb-ease);
}
.tw-cap-row__name {
  flex: 1 1 auto; font-family: var(--hb-serif); font-size: 1.1875rem; font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: var(--tw-cap-muted); transition: color 0.2s var(--hb-ease);
}
.tw-cap-row__go {
  flex-shrink: 0; font-family: var(--hb-sans); font-size: 0.85rem; font-weight: 300; line-height: 1;
  color: var(--tw-cap-muted); transition: transform 0.25s var(--hb-ease), color 0.2s var(--hb-ease);
}
.tw-cap-row:hover .tw-cap-row__name { color: var(--hb-ink); }
.tw-cap-row:hover .tw-cap-row__go { transform: translateX(4px); }
.tw-cap-row.is-active .tw-cap-row__num,
.tw-cap-row.is-active .tw-cap-row__go { color: var(--hb-gold); }
.tw-cap-row.is-active .tw-cap-row__name { color: var(--hb-ink); }

/* ---- Detail panel (tabpanel) ---- */
.tw-cap-panel:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.tw-cap .tw-cap-panel__label { margin: 0 0 0.9rem; font-size: 0.66rem; letter-spacing: 0.22em; color: var(--hb-gold); }
.tw-cap .tw-cap-panel__caption {
  margin: 0; max-width: none; font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.22; color: var(--hb-ink);
}
.tw-cap-cta { margin-top: 1.75rem; }
.tw-cap-cta .hb-link {
  position: relative; border-bottom: 0; padding-bottom: 0.7rem; font-size: 0.7rem; letter-spacing: 0.2em;
}
.tw-cap-cta .hb-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2.25rem; height: 1px; background: var(--hb-gold);
  transition: width 0.35s var(--hb-ease);
}
.tw-cap-cta .hb-link:hover::after, .tw-cap-cta .hb-link:focus-visible::after { width: 100%; }

/* ---- Phones (<768px): accordion ---- */
@media (max-width: 767.98px) {
  .tw-cap-row { padding: 0.95rem 0.25rem 0.95rem 1rem; }
  .tw-cap-row__go { transition: transform 0.3s var(--hb-ease), color 0.2s var(--hb-ease); }
  .tw-cap-row.is-active .tw-cap-row__go { transform: rotate(90deg); }
  .tw-cap-panel { padding: 0 0.25rem 1.25rem 3.15rem; border-bottom: 1px solid var(--hb-line); }
  .tw-cap .tw-cap-panel__label { display: none; }
  .tw-cap .tw-cap-panel__caption { font-size: 1.3rem; }
  .tw-cap-cta { margin-top: 2rem; }
  .tw-cruises__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1.1rem; }
  .tw-cruises__nav::-webkit-scrollbar { display: none; }
  .tw-cruises__label { display: none; }
  .tw-cruises__overlay { padding-top: 3rem; }
}

/* ---- Tablet and up: tabs beside the detail panel, stacked panels ---- */
@media (min-width: 768px) {
  .tw-cap { --tw-cap-inset: 1.5rem; }
  .tw-cap-stage { aspect-ratio: 16 / 9; margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
  .tw-cap-field {
    display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: clamp(1.5rem, 2.6vw, 2.25rem); align-items: start;
  }
  .tw-cap-detail { border-left: 1px solid rgba(166, 138, 91, 0.5); padding-left: clamp(1.5rem, 2.6vw, 2.25rem); }
  .tw-cap-panels { display: grid; }
  .tw-cap-panel {
    grid-area: 1 / 1; opacity: 1; transform: none;
    transition: opacity 0.35s var(--hb-ease) 0.1s, transform 0.35s var(--hb-ease) 0.1s, visibility 0s linear 0s;
  }
  .tw-cap-panel[hidden] {
    display: block !important; /* outranks Bootstrap's [hidden] { display: none !important } */
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity 0.15s var(--hb-ease), transform 0.15s var(--hb-ease), visibility 0s linear 0.15s;
  }
}

/* ---- Desktop (>=1200px): two halves, stage bleeding to the right edge ---- */
@media (min-width: 1200px) {
  .tw-cap { --tw-cap-inset: 2rem; }
  .tw-cap-layout {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-rows: auto 1fr;
    grid-template-areas: "intro stage" "field stage"; column-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .tw-cap-intro { grid-area: intro; }
  .tw-cap-field { grid-area: field; }
  .tw-cap-stage {
    grid-area: stage; aspect-ratio: auto; min-height: 27.5rem; margin: 0;
    margin-right: calc((100cqw - 100vw) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-cap-media, .tw-cap-media[hidden], .tw-cap-panel, .tw-cap-panel[hidden] { transition-delay: 0s !important; }
  .tw-cruises__slide { transition: opacity 0.2s linear !important; transform: none !important; }
  .tw-cruises__navline { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Section — Beyond the Itinerary — tiered grid, click-to-expand
   Two tile sizes only: three featured (4:3) over four supporting (4:5).
   Every tile shows just image, eyebrow and headline at rest; the full
   description and the Enquire CTA live in a lightbox.
   ------------------------------------------------------------------- */
.tw-beyond__row { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tw-beyond__row--featured { grid-template-columns: repeat(3, 1fr); }
.tw-beyond__row--supporting { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }
.tw-beyond__row > li { margin: 0; min-width: 0; }

.tw-beyond__tile {
  position: relative; display: block; width: 100%; overflow: hidden; border: 0; padding: 0;
  border-radius: 2px; background: var(--hb-ink); cursor: pointer; text-align: left; color: var(--hb-white);
}
.tw-beyond__tile--featured { aspect-ratio: 4 / 3; }
.tw-beyond__tile--supporting { aspect-ratio: 4 / 5; }
.tw-beyond__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--hb-ease);
}
.tw-beyond__tile:hover img, .tw-beyond__tile:focus-visible img { transform: scale(1.03); }
.tw-beyond__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right, rgba(10,10,10,0.84) 0%, rgba(10,10,10,0.55) 30%, rgba(10,10,10,0.12) 58%, rgba(10,10,10,0) 72%),
    linear-gradient(0deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.42) 30%, rgba(10,10,10,0) 62%);
}
.tw-beyond__cap {
  position: absolute; z-index: 2; left: 0; bottom: 0; display: block; max-width: 100%;
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem);
}
.tw-beyond__eyebrow {
  display: block; font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--hb-champagne); margin-bottom: 0.55rem;
  text-shadow: 0 1px 10px rgba(10,10,10,0.45);
}
.tw-beyond__headline {
  display: block; font-family: var(--hb-serif); font-style: italic; font-weight: 500;
  color: var(--hb-white); line-height: 1.15; text-shadow: 0 1px 12px rgba(10,10,10,0.35);
}
.tw-beyond__tile--featured .tw-beyond__headline { font-size: clamp(1.4rem, 1rem + 1.1vw, 1.9rem); }
.tw-beyond__tile--supporting .tw-beyond__headline { font-size: clamp(1.1rem, 0.9rem + 0.55vw, 1.35rem); }
.tw-beyond__tile:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

/* Lightbox */
.tw-beyond__lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(16,15,14,0.78);
  opacity: 0; transition: opacity 0.45s var(--hb-ease);
}
.tw-beyond__lightbox[hidden] { display: none; }
.tw-beyond__lightbox.is-open { opacity: 1; }
.tw-beyond__panel {
  position: relative; width: 100%; max-width: 64rem; max-height: 100%; overflow: auto;
  display: grid; grid-template-columns: 1.25fr 1fr; background: var(--hb-white); border-radius: 2px;
  transform: scale(0.96); transition: transform 0.45s var(--hb-ease);
}
.tw-beyond__lightbox.is-open .tw-beyond__panel { transform: none; }
.tw-beyond__panel-media { position: relative; min-height: 26rem; background: var(--hb-ink); }
.tw-beyond__panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-beyond__panel-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.25rem);
}
.tw-beyond__panel-eyebrow {
  font-family: var(--hb-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--hb-gold); margin: 0 0 0.9rem;
}
.tw-beyond__panel-headline {
  font-family: var(--hb-serif); font-style: italic; font-weight: 500; color: var(--hb-ink);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); line-height: 1.12; margin: 0 0 1.1rem;
}
.tw-beyond__panel-body {
  font-family: var(--hb-sans); font-size: 0.95rem; line-height: 1.7; color: var(--hb-text-dim); margin: 0 0 1.75rem;
}
.tw-beyond__close {
  position: absolute; z-index: 3; top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--hb-white); color: var(--hb-ink); border: 1px solid var(--hb-line); border-radius: 2px;
  font-size: 0.9rem; line-height: 1; transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-beyond__close:hover { color: var(--hb-gold); border-color: var(--hb-gold); }
.tw-beyond__close:focus-visible, .tw-beyond__panel-cta:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }
html.tw-beyond-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tw-beyond__tile:hover img, .tw-beyond__tile:focus-visible img { transform: none; }
  .tw-beyond__panel { transform: none; }
}

@media (max-width: 991.98px) {
  .tw-beyond__row--supporting { grid-template-columns: repeat(2, 1fr); }
  .tw-beyond__panel { grid-template-columns: 1fr; }
  .tw-beyond__panel-media { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 767.98px) {
  .tw-beyond__row--featured { grid-template-columns: 1fr; }
  .tw-beyond__tile--featured .tw-beyond__headline { font-size: 1.5rem; }
  .tw-beyond__tile--supporting .tw-beyond__headline { font-size: 1.05rem; }
  .tw-beyond__eyebrow { font-size: 0.62rem; letter-spacing: 0.16em; }
}

/* ---------------------------------------------------------------------
   Section 07 — Destination Intelligence — "A deeper Egypt."
   Scoped under .tw-dest (prefix tw-dest-). The section script lives in
   index.html ("Section 07") and only adds behaviour: it sets .tw-dest--js,
   and every "collapsed" rule below hangs off that class. With no JS the
   three Nile Valley panels sit at equal widths with their copy showing and
   both rows still scroll natively.

   Header   intro | locator map | button. The map is decorative; its dots
            are plotted from real coordinates (formula beside the SVG).
   Nile     three image panels. >=768px one row, the open panel at
            flex-grow 2 against 1 : 1 (about 50 / 25 / 25); below 768px a
            stacked accordion. Each photo is sized to the open width and
            centred, so a panel opens like a window on a still image
            rather than rescaling it.
   Rows     The Coast and Further Out share one scroll-snap carousel:
            4 / 3 cards in view >=1200px, ~2.3 on tablet, ~1.2 on phones.
            Arrows rest (aria-disabled) while every card fits.
   ------------------------------------------------------------------- */
.tw-dest {
  --tw-dest-gap: 8px;
  --tw-dest-pad: 1.25rem;
  --tw-dest-inout: cubic-bezier(0.45, 0, 0.55, 1);
}

.tw-dest .tw-dest-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- Header row ---- */
.tw-dest-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tw-dest-intro .hb-kicker { margin-bottom: 1rem; }
body.tw-home .tw-dest-title { margin: 0 0 0.9rem; }
.tw-dest .tw-dest-lede { margin: 0; max-width: 36rem; font-size: 1rem; text-wrap: balance; }

.tw-dest .tw-dest-all {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem;
  min-height: 48px; padding: 0 1.6rem; border: 1px solid var(--hb-gold); background: transparent;
  font-family: var(--hb-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--hb-ink);
  transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease);
}
.tw-dest .tw-dest-all:hover, .tw-dest .tw-dest-all:focus-visible {
  background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-white);
}
.tw-dest-go { display: inline-block; transition: transform 0.3s var(--hb-ease); }
.tw-dest-all:hover .tw-dest-go, .tw-dest-explore:hover .tw-dest-go { transform: translateX(4px); }
/* !important only to win against `a { outline: none !important }` in style.css */
.tw-dest .tw-dest-all:focus-visible { outline: 2px solid var(--hb-gold) !important; outline-offset: 3px; }

/* ---- Locator map ---- */
.tw-dest-map { display: none; }
.tw-dest-map-svg { display: block; overflow: visible; }
.tw-dest-map-land { fill: none; stroke: var(--hb-gold); stroke-width: 1; stroke-linejoin: round; }
.tw-dest-map-nile { fill: none; stroke: var(--hb-gold); stroke-width: 0.75; stroke-linejoin: round; opacity: 0.35; }

.tw-dest-dot-core, .tw-dest-dot-ring { fill: var(--hb-gold); transform-box: fill-box; transform-origin: center; }
.tw-dest-dot-core { opacity: 0.45; transform: scale(0.6); transition: transform 0.4s var(--hb-ease), opacity 0.4s var(--hb-ease); }
.tw-dest-dot-ring { opacity: 0; }
.tw-dest-dot text {
  font-family: var(--hb-sans); font-size: 11px; fill: var(--hb-text-dim); opacity: 0;
  paint-order: stroke; stroke: var(--hb-ivory); stroke-width: 3px; stroke-linejoin: round;
  transition: opacity 0.4s var(--hb-ease), fill 0.4s var(--hb-ease);
}
.tw-dest-dot--left text { text-anchor: end; }
.tw-dest-dot--nile .tw-dest-dot-core { opacity: 1; transform: scale(1); }
.tw-dest-dot--nile text { opacity: 1; }
.tw-dest-dot.is-hot .tw-dest-dot-core { opacity: 1; transform: scale(1.7); }
.tw-dest-dot.is-hot text { opacity: 1; fill: var(--hb-ink); }
.tw-dest-dot.is-hot .tw-dest-dot-ring { animation: tw-dest-pulse 2.4s ease-out infinite; }
@keyframes tw-dest-pulse {
  0% { opacity: 0.45; transform: scale(0.5); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ---- Shared image-card parts ---- */
.tw-dest .tw-dest-img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.tw-dest .tw-dest-text {
  margin: 0 0 0.85rem; font-family: var(--hb-sans); font-size: 0.8125rem; line-height: 1.6;
  color: rgba(251, 250, 247, 0.92);
}
.tw-dest .tw-dest-explore {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0;
  font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; text-decoration: none; color: var(--hb-champagne);
  transition: color 0.3s var(--hb-ease);
}
.tw-dest .tw-dest-explore:hover { color: var(--hb-white); }

/* ---- Nile Valley panels ---- */
.tw-dest-nile { display: flex; flex-direction: column; gap: var(--tw-dest-gap); }
.tw-dest-panel {
  position: relative; isolation: isolate; overflow: hidden; background: var(--hb-ink);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-height: 56vw; padding: var(--tw-dest-pad);
}
/* bottom-up scrim for the copy, plus a short one at the top for the number */
.tw-dest-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 40%, rgba(0, 0, 0, 0) 82%);
}
.tw-dest-num {
  position: absolute; top: var(--tw-dest-pad); left: var(--tw-dest-pad);
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; line-height: 1;
  color: var(--hb-champagne); text-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}
.tw-dest-num::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }

.tw-dest-panel-body { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.tw-dest .tw-dest-panel-name {
  margin: 0; font-family: var(--hb-serif); font-size: 2rem; font-weight: 500; line-height: 1.1;
  letter-spacing: 0; color: var(--hb-white); white-space: nowrap;
}
.tw-dest-panel-name::after {
  content: ""; display: block; width: 28px; height: 1px; margin-top: 0.6rem;
  background: var(--hb-champagne); opacity: 0;
}
.tw-dest .tw-dest-panel-btn {
  appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
}
/* the button's hit area and focus ring are the whole panel */
.tw-dest-panel-btn::after { content: ""; position: absolute; inset: 0; }
.tw-dest .tw-dest-panel-btn:focus { outline: none; }
.tw-dest-panel-btn:focus-visible::after { outline: 2px solid var(--hb-champagne); outline-offset: -4px; }

.tw-dest-panel-detail { position: relative; z-index: 1; width: 100%; max-width: 27rem; }
.tw-dest-panel-inner { min-height: 0; overflow: hidden; padding: 0.25rem 4px 2px; margin: 0 -4px; }
.tw-dest-panel .tw-dest-text { font-size: 0.875rem; }
.tw-dest-panel .tw-dest-explore:focus-visible { outline: 2px solid var(--hb-champagne) !important; outline-offset: 2px; }

/* Script present: one panel open, the others collapsed. The collapsed copy
   stays in the DOM (hidden, not display:none) and leaves with no transition,
   so text never squeezes while a panel narrows. */
.tw-dest--js .tw-dest-panel { min-height: 0; aspect-ratio: 16 / 9; cursor: pointer; transition: aspect-ratio 0.6s var(--tw-dest-inout); }
.tw-dest--js .tw-dest-panel.is-active { aspect-ratio: 4 / 3; cursor: default; }
.tw-dest--js .tw-dest-panel-name { font-size: 1.6rem; transition: font-size 0.6s var(--tw-dest-inout); }
.tw-dest--js .tw-dest-panel.is-active .tw-dest-panel-name { font-size: 2rem; }
.tw-dest--js .tw-dest-panel-name::after { opacity: 1; }
.tw-dest--js .tw-dest-panel.is-active .tw-dest-panel-name::after { height: 0; margin-top: 0; opacity: 0; }
.tw-dest--js .tw-dest-panel-detail { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.tw-dest--js .tw-dest-panel.is-active .tw-dest-panel-detail {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 0.6s var(--tw-dest-inout), opacity 0.4s ease 0.2s;
}

/* ---- The Coast / Further Out ---- */
.tw-dest-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tw-dest-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; margin-bottom: 1rem;
}
.tw-dest .tw-dest-label {
  display: flex; align-items: center; gap: 1rem; margin: 0;
  font-family: var(--hb-sans); font-size: var(--hb-eyebrow-fs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-gold);
}
.tw-dest-label::after { content: ""; flex: 0 0 46px; height: 1px; background: var(--hb-gold); opacity: 0.55; }

.tw-dest-arrows { display: flex; gap: 0.6rem; }
.tw-dest .tw-dest-arrow {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hb-gold); border-radius: 50%; background: transparent; color: var(--hb-ink); cursor: pointer;
  transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease), opacity 0.3s var(--hb-ease);
}
.tw-dest .tw-dest-arrow:not([aria-disabled="true"]):hover { background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-white); }
.tw-dest .tw-dest-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.tw-dest .tw-dest-arrow:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

.tw-dest-track {
  --tw-dest-per: 1.2; --tw-dest-gaps: 1;
  position: relative; display: flex; gap: var(--tw-dest-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tw-dest-track::-webkit-scrollbar { display: none; }
.tw-dest--js .tw-dest-group:not(.is-fit) .tw-dest-track { cursor: grab; }
.tw-dest--js .tw-dest-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.tw-dest-card {
  position: relative; isolation: isolate; overflow: hidden; background: var(--hb-ink);
  flex: 0 0 calc((100% - var(--tw-dest-gaps) * var(--tw-dest-gap)) / var(--tw-dest-per));
  aspect-ratio: 3 / 4; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tw-dest-group--further .tw-dest-card { aspect-ratio: 5 / 4; }
/* landscape cards are short, so their copy sits higher up the photo */
.tw-dest-group--further .tw-dest-card::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0) 82%);
}
.tw-dest-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 62%);
}
.tw-dest-card .tw-dest-img { transition: transform 0.6s var(--hb-ease); }
.tw-dest-card:hover .tw-dest-img, .tw-dest-card:focus-within .tw-dest-img { transform: scale(1.05); }
/* Landscape sources cropped to the 3:4 card — anchor each crop on its subject. */
.tw-dest .tw-dest-img--dahab { object-position: 42% 50%; }
.tw-dest .tw-dest-img--alexandria { object-position: 58% 50%; }
.tw-dest .tw-dest-img--marsa-matrouh { object-position: 60% 50%; }

.tw-dest-card-body { padding: 1.25rem 1.25rem 1.1rem; }
.tw-dest .tw-dest-card-name {
  margin: 0 0 0.45rem; font-family: var(--hb-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15;
  letter-spacing: 0; color: var(--hb-white);
}
/* gold line along the bottom edge */
.tw-dest-card-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hb-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--hb-ease);
}
.tw-dest-card:hover .tw-dest-card-body::after, .tw-dest-card:focus-within .tw-dest-card-body::after { transform: scaleX(1); }
/* the whole card follows its Explore link */
.tw-dest-card .tw-dest-explore::after { content: ""; position: absolute; inset: 0; }
.tw-dest-card .tw-dest-explore:focus-visible::after { outline: 2px solid var(--hb-champagne); outline-offset: -4px; }

.tw-dest-progress {
  height: 2px; margin-top: 1.25rem; overflow: hidden;
  background: linear-gradient(var(--hb-line), var(--hb-line)) center / 100% 1px no-repeat;
}
.tw-dest-progress-fill {
  display: block; height: 100%; background: var(--hb-gold);
  transform: scaleX(1); transform-origin: left; transition: transform 0.3s var(--hb-ease);
}
.tw-dest-group--further.is-fit .tw-dest-progress { display: none; }

@media (max-width: 359.98px) {
  .tw-dest--js .tw-dest-panel.is-active { aspect-ratio: 1 / 1; }
}

@media (min-width: 768px) {
  .tw-dest { --tw-dest-pad: 1.5rem; }

  .tw-dest-head {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro all" "map map";
    column-gap: 2rem; row-gap: 1.5rem; align-items: center;
  }
  .tw-dest-intro { grid-area: intro; }
  .tw-dest-map { grid-area: map; display: block; }
  .tw-dest .tw-dest-all { grid-area: all; justify-self: end; }

  .tw-dest-nile { flex-direction: row; height: 420px; container-type: inline-size; }
  .tw-dest-panel::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 26%),
      linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0) 56%);
  }
  .tw-dest-panel, .tw-dest--js .tw-dest-panel, .tw-dest--js .tw-dest-panel.is-active {
    flex: 1 1 0; min-width: 0; min-height: 0; aspect-ratio: auto;
  }
  .tw-dest--js .tw-dest-panel { transition: flex-grow 0.6s var(--tw-dest-inout); }
  .tw-dest--js .tw-dest-panel.is-active { flex-grow: 2; }
  /* photo held at the open panel's width, centred */
  .tw-dest-panel .tw-dest-img { left: 50%; right: auto; width: 100%; min-width: 50cqw; transform: translateX(-50%); }

  .tw-dest--js .tw-dest-panel-name { font-size: 1.75rem; }
  .tw-dest--js .tw-dest-panel.is-active .tw-dest-panel-name { font-size: 2.25rem; }
  /* fixed measure, so the copy never rewraps while the panel is still opening */
  .tw-dest--js .tw-dest-panel-detail { width: 19rem; width: min(27rem, calc(50cqw - var(--tw-dest-gap) - 2 * var(--tw-dest-pad))); max-width: none; }

  .tw-dest-track { --tw-dest-per: 2.3; --tw-dest-gaps: 2; }
}

@media (min-width: 1200px) {
  .tw-dest { --tw-dest-pad: 1.75rem; }

  .tw-dest-head {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "intro map all";
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
  }
  .tw-dest-nile { height: 520px; }
  .tw-dest--js .tw-dest-panel.is-active .tw-dest-panel-name { font-size: 2.75rem; }

  .tw-dest-track { --tw-dest-per: 4; --tw-dest-gaps: 3; }
  .tw-dest-group--further .tw-dest-track { --tw-dest-per: 3; --tw-dest-gaps: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-dest .tw-dest-panel, .tw-dest .tw-dest-panel-name, .tw-dest .tw-dest-panel-detail,
  .tw-dest .tw-dest-img, .tw-dest .tw-dest-go, .tw-dest .tw-dest-card-body::after,
  .tw-dest .tw-dest-progress-fill, .tw-dest .tw-dest-dot-core, .tw-dest .tw-dest-dot text { transition: none !important; }
  .tw-dest-card:hover .tw-dest-img, .tw-dest-card:focus-within .tw-dest-img { transform: none; }
  .tw-dest-dot.is-hot .tw-dest-dot-ring { animation: none; opacity: 0.25; }
  .tw-dest-track { scroll-behavior: auto; }
}

/* Filmstrip arrows — shared by The Coast and Sample Journeys. A small, quiet
   dark-scrim circle with a light thin-line chevron, sitting over the imagery so it
   reads on light and dark photos alike. Desktop only; hidden at either end. */
.tw-arrow {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.5rem; height: 2.5rem; padding: 0; align-items: center; justify-content: center;
  border: 1px solid rgba(251,250,247,0.45); border-radius: 50%;
  background: rgba(21,21,21,0.55); color: #fff; cursor: pointer;
  transition: background 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease), opacity 0.25s var(--hb-ease);
}
.tw-arrow svg { width: 0.6rem; height: 1.05rem; }
.tw-arrow--prev { left: 0.75rem; }
.tw-arrow--next { right: 0.75rem; }
.tw-arrow:hover { background: rgba(21,21,21,0.78); border-color: rgba(251,250,247,0.8); }
.tw-arrow:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 2px; }
.tw-arrow:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .tw-arrow { display: flex; } }

/* ---------------------------------------------------------------------
   Section 06 — From Brief to Journey — numbered timeline over a Nile band
   Scoped under .tw-proc (prefix tw-proc-). The old tw-process__ class names
   stay in the markup beside the new ones, because the section's script
   (index.html, "Section 06") still finds `.tw-process__field` and sets
   `.tw-process--js` / `.is-active` on it. That script is unchanged.

   The one true chronological sequence on the page, so the route still
   draws itself once, on first scroll into view:
     >=1200px  one horizontal line (.tw-process__track-fill, 2.2s), five
               equal columns, a numbered marker at the start of each.
     768–1199  3 + 2 columns; each step carries its own piece of the line,
               so the line runs once per row.
     <768px    vertical line on the left, markers on it, copy to the right.
   Steps follow at the original delays (0.05 / 0.5 / 1.05 / 1.5 / 2.05s):
   a waiting step is muted with a pale marker; a reached step has a gold
   marker with a white number and full-strength copy.

   Progressive enhancement, as before: the script only ADDS the "waiting"
   state. With no JS, no IntersectionObserver, or reduced motion, the class
   is never set and the finished timeline is there from first paint.

   Markup order is heading, steps, button; the grid moves the button beside
   the heading (desktop) or under it (tablet). On phones it follows the steps.
   ------------------------------------------------------------------- */
.tw-proc {
  --tw-proc-dot: 26px;
  --tw-proc-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  --tw-proc-line: rgba(166, 138, 91, 0.38);
  --tw-proc-idle: #E7DDCC;
}
.tw-proc.hb-section { padding-top: clamp(4rem, 7vw, 6.25rem); padding-bottom: 0; }

.tw-proc-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.tw-proc .tw-proc-intro { max-width: none; margin-bottom: 0; }
body.tw-home .tw-proc-heading { margin-bottom: 0; }

/* ---- Button ---- */
.tw-proc-cta { margin-top: 2.5rem; }
.tw-proc .tw-proc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 48px; padding: 0 1.75rem; border: 1px solid var(--hb-gold); background: transparent;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--hb-ink); white-space: nowrap;
  transition: background-color 0.3s var(--hb-ease), color 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease);
}
.tw-proc .tw-proc-btn:hover, .tw-proc .tw-proc-btn:focus-visible {
  background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-white);
}
/* !important only to win against `a { outline: none !important }` in style.css */
.tw-proc .tw-proc-btn:focus-visible { outline: 2px solid var(--hb-gold) !important; outline-offset: 3px; }

/* ---- Timeline ---- */
.tw-proc-field { position: relative; margin-top: clamp(2.5rem, 5vw, 3.75rem); }

/* The single horizontal line is a desktop device; below 1200px each step draws its own piece. */
.tw-proc-track { display: none; position: absolute; left: 0; right: 0; top: calc(var(--tw-proc-dot) / 2); height: 1px; }
.tw-proc-track-base { position: absolute; inset: 0; background: var(--tw-proc-line); }
.tw-proc-track-fill { position: absolute; inset: 0; background: var(--hb-gold); transform: scaleX(1); transform-origin: left; }

.tw-proc-steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem;
}
.tw-proc-step { position: relative; min-width: 0; padding-left: calc(var(--tw-proc-dot) + 1.25rem); }

.tw-proc-marker {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: var(--tw-proc-dot); height: var(--tw-proc-dot); border-radius: 50%;
  font-family: var(--hb-sans); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1;
  background: var(--hb-gold); color: #fff;
}
/* "One … Five" stays for screen readers; the number in the marker is the visible ordinal. */
.tw-proc-ordinal {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tw-proc-step .tw-proc-name {
  font-family: var(--hb-serif); font-style: normal; font-weight: 500; font-size: 1.625rem; line-height: 1.15;
  letter-spacing: 0.002em; color: var(--hb-ink); margin: 0 0 0.5rem;
}
.tw-proc-step .tw-proc-text {
  font-family: var(--hb-sans); font-weight: 300; font-size: 0.84rem; line-height: 1.65;
  color: var(--hb-text-dim); margin: 0; max-width: 15rem;
}

/* Per-step line: ::before is the pale base, ::after the gold that draws over it.
   Phones: vertical, from this marker's centre to the next one's. */
.tw-proc-step::before, .tw-proc-step::after {
  content: ""; position: absolute; width: 1px;
  left: calc(var(--tw-proc-dot) / 2 - 0.5px); top: calc(var(--tw-proc-dot) / 2);
  bottom: calc(-2.25rem - var(--tw-proc-dot) / 2);
}
.tw-proc-step::before { background: var(--tw-proc-line); }
.tw-proc-step::after { background: var(--hb-gold); transform-origin: top left; }
.tw-proc-step:last-child::before, .tw-proc-step:last-child::after { display: none; }

/* ---- Entrance — opt-in only; see the progressive-enhancement note above ---- */
.tw-process--js .tw-proc-track-fill { transform: scaleX(0); transition: transform 2.2s var(--hb-ease); }
.tw-process--js.is-active .tw-proc-track-fill { transform: scaleX(1); }

.tw-process--js .tw-proc-step::after { transform: scale(0); transition: transform 0.5s linear; transition-delay: var(--tw-proc-delay, 0s); }
.tw-process--js.is-active .tw-proc-step::after { transform: none; }

.tw-process--js .tw-proc-marker {
  background: var(--tw-proc-idle); color: var(--hb-gold);
  transition: background-color 0.5s var(--hb-ease), color 0.5s var(--hb-ease); transition-delay: var(--tw-proc-delay, 0s);
}
.tw-process--js.is-active .tw-proc-marker { background: var(--hb-gold); color: #fff; }

.tw-process--js .tw-proc-name, .tw-process--js .tw-proc-text {
  opacity: 0.4; transform: translateY(10px);
  transition: opacity 0.5s var(--hb-ease), transform 0.5s var(--hb-ease); transition-delay: var(--tw-proc-delay, 0s);
}
.tw-process--js.is-active .tw-proc-name, .tw-process--js.is-active .tw-proc-text { opacity: 1; transform: none; }

.tw-process--js.is-active .tw-process__stage--1 { --tw-proc-delay: 0.05s; }
.tw-process--js.is-active .tw-process__stage--2 { --tw-proc-delay: 0.5s; }
.tw-process--js.is-active .tw-process__stage--3 { --tw-proc-delay: 1.05s; }
.tw-process--js.is-active .tw-process__stage--4 { --tw-proc-delay: 1.5s; }
.tw-process--js.is-active .tw-process__stage--5 { --tw-proc-delay: 2.05s; }

@media (prefers-reduced-motion: reduce) {
  .tw-process--js .tw-proc-step { --tw-proc-delay: 0s !important; }
}

/* ---- Nile band — decorative; the fade into the section colour is CSS, not part of the image ---- */
.tw-proc-band { position: relative; overflow: hidden; height: clamp(160px, 18vw, 260px); margin-top: clamp(2.75rem, 5vw, 4rem); }
.tw-proc-band .tw-proc-band-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 74%;
}
.tw-proc-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 45%; pointer-events: none;
  background: linear-gradient(to bottom, var(--hb-white) 0%, rgba(251, 250, 247, 0) 100%);
}

@media (max-width: 767.98px) {
  .tw-proc .hb-wrap { padding-left: 16px; padding-right: 16px; }
  .tw-proc .tw-proc-btn { width: 100%; }
  .tw-proc-step .tw-proc-text { max-width: 24rem; }
}

@media (min-width: 768px) {
  .tw-proc-intro { grid-row: 1; }
  .tw-proc-cta   { grid-row: 2; margin-top: 1.75rem; }
  .tw-proc-field { grid-row: 3; }

  .tw-proc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--tw-proc-gap); row-gap: 3rem; }
  .tw-proc-step { padding-left: 0; padding-top: calc(var(--tw-proc-dot) + 1.1rem); }

  /* horizontal piece: from this marker to the next column, the row's last one out to the edge */
  .tw-proc-step::before, .tw-proc-step::after,
  .tw-proc-step:last-child::before, .tw-proc-step:last-child::after {
    display: block; left: 0; right: calc(-1 * var(--tw-proc-gap)); top: calc(var(--tw-proc-dot) / 2);
    bottom: auto; width: auto; height: 1px;
  }
  .tw-proc-step:nth-child(3)::before, .tw-proc-step:nth-child(3)::after { right: 0; }
  .tw-proc-step:nth-child(5)::before, .tw-proc-step:nth-child(5)::after { right: calc(-100% - var(--tw-proc-gap)); }
}

@media (min-width: 1200px) {
  .tw-proc-wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; }
  .tw-proc-intro { grid-column: 1; grid-row: 1; }
  .tw-proc-cta   { grid-column: 2; grid-row: 1; margin-top: 0; }
  .tw-proc-field { grid-column: 1 / -1; grid-row: 2; }

  .tw-proc-track { display: block; }
  .tw-proc-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tw-proc-step::before, .tw-proc-step::after,
  .tw-proc-step:last-child::before, .tw-proc-step:last-child::after { display: none; }
}
@supports (align-items: last baseline) {
  @media (min-width: 1200px) { .tw-proc-wrap { align-items: last baseline; } }
}

/* ---------------------------------------------------------------------
   Section 11 — Sample Journeys — editorial filmstrip (Option B)
   Five tall portrait cards in a single drag/swipe row — a magazine
   spread paged through, not a slider widget. ~2.2 cards visible on
   desktop so the partial next card invites scrolling; a thin progress
   rule (no dots/arrows) tracks scroll position, matching the restrained
   gold-line language already used for Section 02's chapter nav. Overlay
   gradient recipe reused from Section 05/07's photographic-tile system.
   ------------------------------------------------------------------- */
.tw-sample-journeys__wrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tw-sample-journeys__filmstrip-wrap { position: relative; }
.tw-sample-journeys__shell { position: relative; }

.tw-sample-journeys__filmstrip {
  display: flex; gap: clamp(0.9rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem;
}
.tw-sample-journeys__filmstrip::-webkit-scrollbar { display: none; }

.tw-sample-journeys__card {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  border-radius: 2px; background: var(--hb-ink);
  flex: 0 0 clamp(300px, 42%, 460px); aspect-ratio: 3 / 4; scroll-snap-align: start;
}
.tw-sample-journeys__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--hb-ease);
}
.tw-sample-journeys__card:hover img, .tw-sample-journeys__card:focus-visible img { transform: scale(1.04); }
.tw-sample-journeys__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(21,21,21,0.85) 0%, rgba(21,21,21,0.35) 45%, rgba(21,21,21,0) 70%);
}
.tw-sample-journeys__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.25rem, 3vw, 1.75rem);
}
.tw-sample-journeys__days {
  font-family: var(--hb-sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hb-champagne); margin-bottom: 0.5rem;
}
.tw-sample-journeys__title {
  font-family: var(--hb-serif); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.2;
  color: var(--hb-white); margin-bottom: 0.55rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid transparent; display: inline-block; width: fit-content;
  transition: border-color 0.3s var(--hb-ease);
}
.tw-sample-journeys__card:hover .tw-sample-journeys__title,
.tw-sample-journeys__card:focus-visible .tw-sample-journeys__title { border-color: var(--hb-gold); }
.tw-sample-journeys__desc {
  font-family: var(--hb-sans); font-size: 0.85rem; line-height: 1.55; color: rgba(251,250,247,0.82);
  margin-bottom: 0.8rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tw-sample-journeys__cta {
  font-family: var(--hb-sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hb-champagne); display: inline-flex; align-items: center; gap: 0.4rem;
}
.tw-sample-journeys__cta .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.tw-sample-journeys__card:hover .tw-sample-journeys__cta .hb-arrow,
.tw-sample-journeys__card:focus-visible .tw-sample-journeys__cta .hb-arrow { transform: translateX(4px); }
.tw-sample-journeys__card:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: -2px; }

/* Progress rule — thin line, tracks scroll fraction via JS (no dots/arrows). */
.tw-sample-journeys__progress {
  position: relative; height: 1px; margin-top: clamp(1.25rem, 3vw, 2rem);
  background: var(--hb-line);
}
.tw-sample-journeys__progress-fill {
  position: absolute; top: 0; left: 0; height: 1px; background: var(--hb-gold);
  transition: left 0.15s linear, width 0.15s linear;
}

@media (max-width: 767.98px) {
  .tw-sample-journeys__card { flex-basis: 84%; }
  .tw-sample-journeys__title { font-size: 1.25rem; }
  .tw-sample-journeys__desc { font-size: 0.82rem; -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-sample-journeys__progress-fill { transition: none; }
}

/* ---------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------- */
.hb-final { text-align: center; }
.hb-final .hb-wrap--copy { margin: 0 auto; max-width: 720px; }
.hb-final h2 { font-family: var(--hb-serif); color: var(--hb-white); font-size: var(--hb-h2); line-height: 1.14; margin-bottom: 1rem; }
.hb-final .hb-copy { color: rgba(244,240,232,0.78); margin-bottom: 2.25rem; }
.hb-final__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hb-final__wa { font-family: var(--hb-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,240,232,0.6); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.hb-final__wa:hover, .hb-final__wa:focus-visible { color: var(--hb-champagne); }
@media (max-width: 575.98px) { .hb-final__actions { flex-direction: column; align-items: stretch; } }

/* ---------------------------------------------------------------------
   Kicker — the signature: eyebrow sitting on a short gold hairline
   ------------------------------------------------------------------- */
.hb-kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.hb-kicker::after { content: ""; flex: 0 0 46px; height: 1px; background: var(--hb-gold); opacity: 0.55; }
.hb-kicker .hb-eyebrow { margin: 0; }
.hb-kicker--center { justify-content: center; }
.hb-kicker--center::before { content: ""; flex: 0 0 46px; height: 1px; background: var(--hb-gold); opacity: 0.55; }
.hb-section--dark .hb-kicker::after,
.hb-section--dark .hb-kicker--center::before { background: var(--hb-champagne); opacity: 0.5; }

/* Section intro block spacing */
.hb-intro { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hb-intro--center { margin-left: auto; margin-right: auto; text-align: center; }
.hb-intro--center .hb-kicker { justify-content: center; }
.hb-intro--wide { max-width: 780px; }

/* ---------------------------------------------------------------------
   Editorial split — add a caption under the media
   ------------------------------------------------------------------- */
.hb-editorial__caption { font-family: var(--hb-sans); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-text-dim); margin-top: 0.85rem; }
.hb-editorial__body .hb-link { margin-top: 1.6rem; }

/* ---------------------------------------------------------------------
   Signature Access — two-up privileged-access pairing
   ------------------------------------------------------------------- */
.hb-access { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.hb-access__item { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; display: block; }
.hb-access__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--hb-ease); }
.hb-access__item:hover img, .hb-access__item:focus-visible img { transform: scale(1.045); }
@media (max-width: 575.98px) { .hb-access { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   FAQ — native details/summary, no JS required
   ------------------------------------------------------------------- */
.hb-faq { border-top: 1px solid var(--hb-line); max-width: 780px; }
.hb-faq__item { border-bottom: 1px solid var(--hb-line); padding: 1.35rem 0; }
.hb-faq__item > summary {
  font-family: var(--hb-serif); font-size: 1.15rem; color: var(--hb-ink); font-weight: 500;
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.hb-faq__item > summary::-webkit-details-marker { display: none; }
.hb-faq__item > summary::after {
  content: "+"; font-family: var(--hb-sans); font-size: 1.3rem; line-height: 1; color: var(--hb-gold);
  flex-shrink: 0; transition: transform 0.25s var(--hb-ease);
}
.hb-faq__item[open] > summary::after { transform: rotate(45deg); }
.hb-faq__item p { font-family: var(--hb-sans); font-size: 0.95rem; color: var(--hb-text-dim); line-height: 1.7; margin: 0.9rem 0 0; max-width: 62ch; }

/* ---------------------------------------------------------------------
   Trust strip — small kicker + statement above the four pillars
   ------------------------------------------------------------------- */
.hb-trust { padding-top: var(--hb-section-y-tight); }
.hb-trust .hb-kicker { margin-bottom: 1rem; }
.hb-trust h2 { margin-bottom: 0; }
.hb-trust__row { border-top: 1px solid var(--hb-line); margin-top: 1.75rem; padding-bottom: var(--hb-section-y-tight); padding-top: 1.75rem; }

/* ---------------------------------------------------------------------
   Subordinate content cluster — same components, quieter weight
   ------------------------------------------------------------------- */
.hb-subordinate .hb-heading--h2 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); }

/* ---------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------- */
.hb-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--hb-ease), transform 0.7s var(--hb-ease); }
.hb-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   Mobile persistent CTA bar
   ------------------------------------------------------------------- */
.hb-mcta { display: none; }
@media (max-width: 767.98px) {
  .hb-mcta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    display: grid; grid-template-columns: 1fr auto auto;
    background: rgba(21, 21, 21, 0.97); border-top: 1px solid var(--hb-line-on-dark);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hb-mcta a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1rem; font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--hb-ivory); }
  .hb-mcta__primary { background: var(--hb-champagne); color: var(--hb-ink); }
  .hb-mcta__icon { border-left: 1px solid var(--hb-line-on-dark); font-size: 1rem; padding-inline: 1.15rem; }
  body.tw-home { padding-bottom: 0; }
  body.tw-home main { padding-bottom: 3.5rem; }
}

/* ---------------------------------------------------------------------
   Section — Trusted by the Travel Trade — art-directed partner wall
   Sixteen names, solid white on the site's soft black. Hand-placed, not
   a grid and not randomized: each item's centre is set by --x/--y
   (desktop) and --mx/--my (a separate mobile composition), in units of
   the field's width. Two size classes only (featured / supporting); the
   wide modifier is optical sizing for very long, thin wordmarks, not a
   third tier. No borders, cards or shadows — spacing and scale alone.
   ------------------------------------------------------------------- */
.tw-trusted__head { max-width: 40rem; }
.tw-trusted__head .hb-copy { max-width: 32rem; }

.tw-trusted__field {
  list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0;
  position: relative; aspect-ratio: 100 / 64; container-type: inline-size;
}
.tw-trusted__item {
  --bw: 12cqw; --bh: 6.4cqw;
  position: absolute; margin: 0;
  left: calc(var(--x) * 1%); top: calc(var(--y) / 64 * 100%);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.tw-trusted__item--featured { --bw: 18cqw; --bh: 8cqw; }
.tw-trusted__item--supporting.tw-trusted__item--wide { --bw: 15cqw; --bh: 3.4cqw; }
.tw-trusted__item img { display: block; width: var(--bw); height: var(--bh); object-fit: contain; }

.tw-trusted__item--text { width: max-content; max-width: 17cqw; }
.tw-trusted__name {
  display: block; font-family: var(--hb-serif); font-style: italic; font-weight: 500;
  font-size: max(1.05rem, 2.5cqw); line-height: 1.15; color: #fff;
}
.tw-trusted__place {
  display: block; margin-top: 0.7cqw; font-family: var(--hb-sans); font-size: max(0.62rem, 0.9cqw);
  font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: #fff;
}


@media (max-width: 767.98px) {
  .tw-trusted__field { aspect-ratio: 100 / 205; }
  .tw-trusted__item {
    --bw: 30cqw; --bh: 15cqw;
    left: calc(var(--mx) * 1%); top: calc(var(--my) / 205 * 100%);
  }
  .tw-trusted__item--featured { --bw: 46cqw; --bh: 20cqw; }
  .tw-trusted__item--supporting.tw-trusted__item--wide { --bw: 38cqw; --bh: 8cqw; }
  .tw-trusted__item--text { max-width: 44cqw; }
  .tw-trusted__name { font-size: 6.2cqw; }
  .tw-trusted__place { font-size: max(0.62rem, 2.6cqw); margin-top: 1.5cqw; }
    }

/* ---------------------------------------------------------------------
   Sub-module — Trusted within Egypt's hospitality network — marquee
   A separate component from the scattered wall above: the one
   deliberately centred, orderly, moving element in the section. Same
   white-on-black system. Speed matches the reference marquee
   (~35px/s): each logo slot is 150px + 2rem gap = 182px, so the loop
   takes (logo count x 5.2s). The set is duplicated so the loop has no
   visible reset point; the duplicate is aria-hidden.
   ------------------------------------------------------------------- */
.tw-hospitality-marquee { margin-top: clamp(4rem, 8vw, 6.5rem); text-align: center; }
.tw-hospitality-marquee__label {
  font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff; margin: 0 0 1.75rem;
}
.tw-hospitality-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tw-hospitality-marquee__viewport:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: -2px; }
.tw-hospitality-marquee__track {
  display: flex; width: max-content;
  animation: tw-hospitality-scroll calc(var(--tw-marquee-count) * var(--tw-marquee-per, 5.2s)) linear infinite;
}
.tw-hospitality-marquee__group {
  list-style: none; margin: 0; padding: 0 2rem 0 0; flex: 0 0 auto;
  display: flex; align-items: center; gap: 2rem;
}
.tw-hospitality-marquee__group li { flex: 0 0 150px; margin: 0; }
.tw-hospitality-marquee__group img { display: block; width: 150px; height: auto; }
@keyframes tw-hospitality-scroll { to { transform: translateX(-50%); } }

.tw-hospitality-marquee__viewport:hover .tw-hospitality-marquee__track,
.tw-hospitality-marquee__viewport:focus-within .tw-hospitality-marquee__track,
.tw-hospitality-marquee.is-paused .tw-hospitality-marquee__track { animation-play-state: paused; }

.tw-hospitality-marquee__toggle {
  margin-top: 1.5rem; background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
  font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.35);
  transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-hospitality-marquee__toggle:hover, .tw-hospitality-marquee__toggle:focus-visible { color: #fff; border-color: #fff; }
.tw-hospitality-marquee__toggle:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tw-hospitality-marquee__track { animation: none; width: auto; justify-content: center; }
  .tw-hospitality-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .tw-hospitality-marquee__group { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; padding-right: 0; row-gap: 1rem; }
  .tw-hospitality-marquee__group[aria-hidden="true"], .tw-hospitality-marquee__toggle { display: none; }
}
@media (max-width: 767.98px) {
  .tw-hospitality-marquee { --tw-marquee-per: 4.34s; }
  .tw-hospitality-marquee__group li { flex-basis: 120px; }
  .tw-hospitality-marquee__group img { width: 120px; }
}

/* ---------------------------------------------------------------------
   Section — Insights — Quote-Led Triptych (no imagery)
   The brand's authority chapter, not another proof-of-capability one —
   deliberately the quietest section on the page. Each column dramatizes
   a real question an advisor would ask, answered in Triways' own voice.
   Typography and hairline rules carry the whole section; the italic
   serif question is the section's one signature element.
   ------------------------------------------------------------------- */
.tw-insights__header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
}
.tw-insights__intro { max-width: 41.25rem; }
.tw-insights__intro .hb-copy { max-width: 32.5rem; }
.tw-insights__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--hb-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--hb-ink); text-decoration: none; border-bottom: 1px solid var(--hb-ink); padding-bottom: 0.25rem;
  transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-insights__cta:hover, .tw-insights__cta:focus-visible { color: var(--hb-gold); border-color: var(--hb-gold); }
.tw-insights__cta:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 4px; }
.tw-insights__cta span { transition: transform 0.25s var(--hb-ease); }
.tw-insights__cta:hover span, .tw-insights__cta:focus-visible span { transform: translateX(4px); }

.tw-insights__rule { height: 1px; background: var(--hb-line); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

.tw-insights__triptych {
  display: flex; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tw-insights__column {
  flex: 1 1 0; position: relative; padding: 0 clamp(1.5rem, 3vw, 3rem);
}
.tw-insights__column:first-child { padding-left: 0; }
.tw-insights__column:last-child { padding-right: 0; }
.tw-insights__column + .tw-insights__column { border-left: 1px solid var(--hb-line); }
.tw-insights__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
}
.tw-insights__tag {
  display: block; font-family: var(--hb-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hb-gold); margin-bottom: 1.375rem;
}
.tw-insights__question {
  font-family: var(--hb-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6875rem); line-height: 1.35; color: var(--hb-ink);
  margin: 0 0 auto; max-width: 22rem;
}
.tw-insights__answer { margin-top: 2.5rem; }
.tw-insights__headline {
  font-family: var(--hb-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--hb-ink); line-height: 1.4; margin: 0 0 0.75rem;
}
.tw-insights__dek {
  display: block; font-family: var(--hb-sans); font-size: 0.875rem; color: var(--hb-text-dim);
  line-height: 1.65; margin-bottom: 1.375rem;
}
.tw-insights__read {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
  font-family: var(--hb-sans); font-size: 0.8125rem; font-weight: 500; color: var(--hb-ink);
  border-bottom: 1px solid var(--hb-ink); padding-bottom: 0.1875rem;
  transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-insights__read span { transition: transform 0.25s var(--hb-ease); }
.tw-insights__link:hover .tw-insights__read,
.tw-insights__link:focus-visible .tw-insights__read { color: var(--hb-gold); border-color: var(--hb-gold); }
.tw-insights__link:hover .tw-insights__read span,
.tw-insights__link:focus-visible .tw-insights__read span { transform: translateX(4px); }
.tw-insights__link:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }

@media (max-width: 767.98px) {
  .tw-insights__header { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .tw-insights__triptych { flex-direction: column; }
  .tw-insights__column {
    padding: clamp(2rem, 6vw, 2.5rem) 0; border-left: 0 !important;
    border-top: 1px solid var(--hb-line);
  }
  .tw-insights__column:first-child { padding-top: 0; border-top: 0; }
  .tw-insights__column:last-child { padding-bottom: 0; }
  .tw-insights__question { max-width: none; }
  .tw-insights__link { height: auto; }
  .tw-insights__answer { margin-top: 1.75rem; }
}

/* ---------------------------------------------------------------------
   Section 02 — The Partner on the Ground — cinematic editorial carousel
   Scoped entirely under .tw-partner-ground; not reused elsewhere.
   Pass 2: back inside the site's standard .hb-wrap container (no bleed),
   ratio rebalanced further, micro-proof extracted to the Credibility
   Strip above this section. Hairline frame + vertical "Egypt" label
   (from Pass 1) are unchanged below.
   ------------------------------------------------------------------- */
.tw-partner-ground__wrap {
  /* fr, not %, in minmax() here — percentage tracks inside minmax() on this grid were
     observed to lock to the first-declared ratio and ignore later overrides at any
     specificity (a real, reproducible engine quirk in this preview browser); fr units
     don't have the problem and resolve to the same proportional split. */
  display: grid; grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
.tw-partner-ground__content { max-width: 36rem; }

/* Tighter composed rhythm: kicker -> heading -> body -> statement -> CTA */
.tw-partner-ground__content .hb-kicker { margin-bottom: 0.9rem; }
.tw-partner-ground__content .hb-heading { margin-bottom: 0.9rem; }
.tw-partner-ground__content .hb-copy { margin: 0 0 0.7rem; }
.tw-partner-ground__content .hb-copy:last-of-type { margin-bottom: 0; }
.tw-partner-ground__content .tw-partner-ground__cta { margin-top: 0.3rem; }

/* One step up from the standard --hb-h2 scale (this section only). */
.tw-partner-ground #partner-heading { font-size: clamp(2.4rem, 1.9rem + 2.8vw, 4.1rem); }
@media (max-width: 1279.98px) and (min-width: 1024px) {
  /* Avoids an awkward wrap in the cramped ~50/50 tablet-desktop band. */
  .tw-partner-ground #partner-heading { font-size: var(--hb-h2); }
}

.tw-partner-ground__statement {
  font-family: var(--hb-serif); font-style: italic; font-size: 1.05rem; color: var(--hb-text-dim);
  border-left: 1px solid var(--hb-gold); padding-left: 1.1rem; margin: 1.2rem 0 1.3rem; line-height: 1.6;
}

.tw-partner-ground__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--hb-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hb-ink); text-decoration: none; padding-bottom: 0.35rem; border-bottom: 1px solid var(--hb-line);
  transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tw-partner-ground__cta .hb-arrow { display: inline-block; transition: transform 0.25s var(--hb-ease); }
.tw-partner-ground__cta:hover, .tw-partner-ground__cta:focus-visible { color: var(--hb-gold); border-color: var(--hb-gold); }
.tw-partner-ground__cta:hover .hb-arrow, .tw-partner-ground__cta:focus-visible .hb-arrow { transform: translateX(4px); }

.tw-partner-ground__visual { position: relative; }
.tw-partner-ground__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--hb-ink);
}
@media (min-width: 1024px) { .tw-partner-ground__frame { max-height: 80vh; } }
.tw-partner-ground__slides { position: absolute; inset: 0; }
.tw-partner-ground__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.9s var(--hb-ease), transform 1.1s var(--hb-ease); }
.tw-partner-ground__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.tw-partner-ground__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The two daylight photographs (Arrival, Presence) carry their own deeper base scrim so the chapter
   text stays legible over bright clothing and sky; the shared overlay gradient sits on top of it. */
.tw-partner-ground__slide:first-child::after,
.tw-partner-ground__slide:last-child::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.3) 38%, rgba(10,10,10,0) 68%);
}

/* Hairline frame — a deliberately composed "window," not just a large photo. */
.tw-partner-ground__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Small vertical "Egypt" label along the frame's right edge. */
.tw-partner-ground__eglabel {
  position: absolute; top: clamp(1.25rem, 3vw, 2rem); right: clamp(1rem, 2.5vw, 1.5rem); z-index: 3;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--hb-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); pointer-events: none;
}

.tw-partner-ground__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* Taller, evenly-graded fade (vs. a single steep stop) keeps the eyebrow number/title legible
     on brighter chapters (e.g. the daylight Arrival photo) without darkening the top of the image. */
  background: linear-gradient(0deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.4) 42%, rgba(10,10,10,0) 88%);
  color: #fff;
}
.tw-partner-ground__chapter-num { font-family: var(--hb-sans); font-size: 0.7rem; letter-spacing: 0.16em; color: rgba(255,255,255,0.7); margin: 0 0 0.5rem; }
.tw-partner-ground__chapter-title { font-family: var(--hb-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--hb-champagne); }
.tw-partner-ground__chapter-copy { font-family: var(--hb-serif); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); line-height: 1.4; max-width: 26rem; margin: 0; }

.tw-partner-ground__nav { position: relative; display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 1.5rem; padding-top: 0.25rem; }
.tw-partner-ground__nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hb-line); }
.tw-partner-ground__navbtn {
  background: none; border: 0; padding: 0 0 0.9rem; margin: 0; cursor: pointer;
  font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hb-text-dim); transition: color 0.3s var(--hb-ease);
}
.tw-partner-ground__navbtn:hover, .tw-partner-ground__navbtn:focus-visible { color: var(--hb-ink); }
.tw-partner-ground__navbtn.is-active { color: var(--hb-ink); }
.tw-partner-ground__navbtn:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }
/* Restrained active-chapter progress cue, positioned in JS to match the active button's exact offset —
   this already reflects aria-current (set in JS) for assistive tech; the line itself is decorative. */
.tw-partner-ground__navline { position: absolute; bottom: 0; height: 1px; background: var(--hb-gold); transition: left 0.4s var(--hb-ease), width 0.4s var(--hb-ease); }

@media (prefers-reduced-motion: reduce) {
  .tw-partner-ground__slide { transition: opacity 0.2s linear !important; transform: none !important; }
  .tw-partner-ground__navline { transition: none !important; }
}

/* 1024–1279px: image ~46%, text ~54% (the more compressed of the two contained ratios). */
@media (max-width: 1279.98px) {
  .tw-partner-ground__wrap { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
}

@media (max-width: 1023.98px) {
  .tw-partner-ground__wrap { grid-template-columns: 1fr; }
  .tw-partner-ground__content { max-width: none; }
  .tw-partner-ground__frame { max-height: none; }
}
@media (max-width: 575.98px) {
  .tw-partner-ground__nav { gap: 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tw-partner-ground__nav::-webkit-scrollbar { display: none; }
  .tw-partner-ground__navbtn { white-space: nowrap; }
  .tw-partner-ground__eglabel { display: none; }
}

/* ---------------------------------------------------------------------
   The Triways — standalone brand-meaning module, between the Hero and
   Section 02. The title is the only heading element (no eyebrow, and no
   copy explaining the name). Numerals follow the site's existing numeral
   family (sans, small, letter-spaced, gold) but use a darker gold so
   they clear 4.5:1 on ivory; the brand gold is kept for the short rule.
   ------------------------------------------------------------------- */
.tw-triways-module {
  --tw-triways-numeral: #7f6636;
  background: var(--hb-ivory);
  padding: clamp(2.5rem, 2rem + 2.2vw, 3.5rem) 0;
}
.tw-triways-module__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tw-triways-module__title {
  font-family: var(--hb-serif); font-weight: 400; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 2.75rem);
  line-height: 1.1; color: var(--hb-ink); margin: 0 0 0.6rem;
}
/* triways.css sets h2 font-size / line-height with !important; match the home sheet's override pattern */
body.tw-home .tw-triways-module__title { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 2.75rem) !important; line-height: 1.1 !important; }
.tw-triways-module__rule { display: block; width: 48px; height: 1px; background: var(--hb-gold); margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }

.tw-triways-module__ways {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.tw-triways-module__way { margin: 0; padding: 0 clamp(2rem, 4.5vw, 3.5rem); border-left: 1px solid var(--hb-line); }
.tw-triways-module__way:first-child { padding-left: 0; border-left: 0; }
.tw-triways-module__way:last-child { padding-right: 0; }
.tw-triways-module__num {
  font-family: var(--hb-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--tw-triways-numeral); margin: 0 0 0.6rem;
}
.tw-triways-module__label {
  font-family: var(--hb-serif); font-weight: 500; font-size: 1.375rem; line-height: 1.2;
  color: var(--hb-ink); margin: 0 0 0.5rem;
}
.tw-triways-module__body {
  font-family: var(--hb-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--hb-text-dim); margin: 0;
}

@media (max-width: 767.98px) {
  .tw-triways-module__ways { grid-template-columns: 1fr; max-width: 32rem; }
  .tw-triways-module__way { padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--hb-line); }
  .tw-triways-module__way:first-child { padding-top: 0; border-top: 0; }
  .tw-triways-module__way:last-child { padding-bottom: 0; }
}

/* =====================================================================
   Shared panel-content components — .tw-panel-label / .tw-thesis-line
   Used literally by both Section 04's detail panel and Section 08's
   capability panel, so the two can't drift apart on a future edit — one
   definition, not two implementations that happen to match today. Values
   extracted from Section 04's original implementation (ground truth for
   the shared identity); each section keeps its own opacity/transform/
   transition reveal timing locally (.tw-trade__label, .tw-trade__thesis,
   .tw-capabilities__panel-label, .tw-capabilities__panel-sentence), since
   that's tied to each section's own JS-driven .is-active reveal, not to
   the shared visual identity.
   ===================================================================== */
.tw-panel-label {
  display: block; font-family: var(--hb-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hb-gold); margin: 0 0 1.1rem;
}
.tw-thesis-line {
  font-family: var(--hb-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.24; color: var(--hb-ink);
  margin: 0 0 1.3rem; max-width: 34rem;
}
/* ~60% of the default scale — Section 08's caption shares its panel with
   an image doing most of the visual work, so it can't run full-size. */
.tw-thesis-line--compact {
  font-size: clamp(1rem, 0.75rem + 1vw, 1.5rem); margin: 0 0 1.1rem;
}

/* =====================================================================
   Section 04 — For the Travel Trade — audience tabs with a photograph
   Three columns from 1200px: heading + tab list | pitch | photo.
   768–1199px: heading full width, then tab list | photo over pitch.
   Below 768px: an accordion (the script moves each panel under its row).
   Scoped entirely under .tw-trade (prefix tw-trade-); not reused elsewhere.

   Width: like Section 03 above, the left edge sits on the 1280px container
   and the row runs on to the right-hand gutter, so the photograph has room.
   --tw-trade-edge reproduces the container's left edge at any viewport.

   Panels: every panel shares one grid cell, so the tallest one sets the
   height and nothing moves when the reader switches tabs. Inactive panels
   keep `hidden` in the markup; once the script has run (.is-enhanced) they
   stay in layout but invisible. Without JS only the first panel shows.

   Contrast on --hb-white: inactive tab label (ink at 64%) ~4.6:1,
   body copy (--hb-text-dim) ~7:1. Numbers and arrows are decorative.
   ===================================================================== */
.tw-trade {
  --tw-trade-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --tw-trade-edge: max(var(--tw-trade-gutter), calc((100% - 1280px) / 2 + var(--tw-trade-gutter)));
  --tw-trade-drop: 5.75rem;   /* how far the pitch column starts below the photo's top edge */
  --tw-trade-quiet: rgba(41, 39, 37, 0.64);
}

.tw-trade-grid {
  display: grid;
  grid-template-columns: minmax(0, 33fr) minmax(0, 30fr) minmax(0, 37fr);
  grid-template-rows: auto 1fr;
  padding-left: var(--tw-trade-edge);
  padding-right: max(var(--tw-trade-gutter), calc(100% - var(--tw-trade-edge) - 1440px));
}

/* ---- Heading block ---- */
.tw-trade-head { grid-column: 1; grid-row: 1; padding-right: 1rem; }

.tw-trade .tw-trade-eyebrow {
  display: flex; align-items: center; gap: 1.25rem;
  font-family: var(--hb-sans); font-size: var(--hb-eyebrow-fs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-gold);
  margin: 0 0 1.5rem;
}
.tw-trade-eyebrow::after { content: ""; flex: 0 0 56px; height: 1px; background: var(--hb-gold); opacity: 0.7; }

/* !important only to win against the site-wide `h2 { … !important }` rules in triways.css */
body.tw-home .tw-trade-title {
  font-family: var(--hb-serif) !important; font-weight: 400;
  font-size: clamp(2.2rem, 3.15vw, 3.15rem) !important; line-height: 1.1 !important;
  letter-spacing: 0.002em; color: var(--hb-ink); margin: 0;
}

.tw-trade .tw-trade-intro {
  font-family: var(--hb-sans); font-weight: 400; font-size: 0.9rem; line-height: 1.75;
  color: var(--hb-text-dim); max-width: 34rem; margin: 1.5rem 0 0;
}

/* ---- Tab list ---- */
.tw-trade-tabs {
  grid-column: 1; grid-row: 2; align-self: start;
  margin: 1.75rem 2.75rem 0 0; border-top: 1px solid var(--hb-line);
}
.tw-trade .tw-trade-tab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 1.15rem;
  width: 100%; margin: 0; padding: 1.1rem 1rem 1.1rem 1.15rem;
  background: none; border: 0; border-bottom: 1px solid var(--hb-line); border-radius: 0;
  box-shadow: inset 0 0 0 var(--hb-gold);
  color: inherit; text-align: left; cursor: pointer;
  transition: box-shadow 0.25s var(--hb-ease);
}
.tw-trade .tw-trade-tab.is-active { box-shadow: inset 2px 0 0 var(--hb-gold); }
.tw-trade .tw-trade-tab:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 2px; }

.tw-trade-num {
  font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em;
  color: var(--hb-champagne); transition: color 0.25s var(--hb-ease);
}
.tw-trade-name {
  font-family: var(--hb-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2;
  color: var(--tw-trade-quiet); transition: color 0.25s var(--hb-ease);
}
.tw-trade-arrow {
  font-family: var(--hb-sans); font-size: 0.95rem; font-weight: 300; line-height: 1;
  color: rgba(41, 39, 37, 0.42);
  transition: color 0.25s var(--hb-ease), transform 0.25s var(--hb-ease);
}
.tw-trade-tab:hover .tw-trade-name { color: var(--hb-text); }
.tw-trade-tab:not(.is-active):hover .tw-trade-arrow { transform: translateX(4px); }
.tw-trade-tab.is-active .tw-trade-num { color: var(--hb-gold); font-weight: 600; }
.tw-trade-tab.is-active .tw-trade-name { color: var(--hb-ink); }
.tw-trade-tab.is-active .tw-trade-arrow { color: var(--hb-gold); }

/* ---- Stage: the six panels, stacked in one cell ---- */
.tw-trade-stage { grid-column: 2 / 4; grid-row: 1 / 3; position: relative; display: grid; }
/* the gold divider belongs to the stage, not to a panel, so it holds still while panels change */
.tw-trade-stage::before {
  content: ""; position: absolute; left: 0; top: var(--tw-trade-drop); bottom: 0;
  width: 1px; background: var(--hb-gold); opacity: 0.75;
}

.tw-trade-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 37fr);
  min-width: 0;
}
.tw-trade-panel[hidden] { display: none; }
.tw-trade .tw-trade-panel:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 4px; }

.tw-trade .tw-trade-photo {
  grid-column: 2; grid-row: 1; align-self: stretch; position: relative;
  min-height: 27rem; margin: 0.75rem 0 0; overflow: hidden; background: var(--hb-ivory);
}
.tw-trade-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}

.tw-trade-copy {
  grid-column: 1; grid-row: 1; align-self: start;
  padding: calc(var(--tw-trade-drop) + 1rem) clamp(0.9rem, 1.4vw, 1.75rem) 0.5rem clamp(1.6rem, 2.6vw, 2.9rem);
}
.tw-trade .tw-trade-label {
  font-family: var(--hb-sans); font-size: 0.7rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold);
  margin: 0 0 2rem;
}
.tw-trade .tw-trade-pitch {
  font-family: var(--hb-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 0.35rem + 1.9vw, 2.15rem); line-height: 1.22; letter-spacing: 0;
  color: var(--hb-ink); margin: 0 0 2rem;
}
.tw-trade .tw-trade-body {
  font-family: var(--hb-sans); font-weight: 400; font-size: 0.95rem; line-height: 1.8;
  color: var(--hb-text-dim); max-width: 27rem; margin: 0 0 1rem;
}
.tw-trade .tw-trade-cta {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 1.5rem; padding: 0 0 1.05rem;
  font-family: var(--hb-sans); font-size: 0.74rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--hb-ink);
}
.tw-trade-cta::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 80px; max-width: 100%; height: 1px;
  background: var(--hb-gold); transition: width 0.35s var(--hb-ease);
}
.tw-trade-cta:hover::after, .tw-trade-cta:focus-visible::after { width: 100%; }
.tw-trade-cta-arrow { font-weight: 400; letter-spacing: 0; transition: transform 0.25s var(--hb-ease); }
.tw-trade-cta:hover .tw-trade-cta-arrow { transform: translateX(4px); }

/* ---- Tabs behaviour (tablet and desktop, once the script has run) ----
   Incoming panel sits on top: its copy rises 8px over 350ms and its photo
   fades in over 500ms. The outgoing photo stays opaque underneath until
   then (a true crossfade, no dip to the background); its copy goes at once. */
@media (min-width: 768px) {
  /* !important only to outrank Bootstrap's `[hidden] { display: none !important }` */
  .tw-trade.is-enhanced .tw-trade-panel[hidden] { display: grid !important; }
  .tw-trade.is-enhanced .tw-trade-panel { visibility: hidden; transition: visibility 0s linear 0.5s; }
  .tw-trade.is-enhanced .tw-trade-panel.is-active { visibility: visible; z-index: 1; transition-delay: 0s; }

  .tw-trade.is-enhanced .tw-trade-photo { opacity: 0; transition: opacity 0s linear 0.5s; }
  .tw-trade.is-enhanced .tw-trade-panel.is-active .tw-trade-photo { opacity: 1; transition: opacity 0.5s ease; }

  .tw-trade.is-enhanced .tw-trade-copy { opacity: 0; transform: translateY(8px); transition: opacity 0.1s linear, transform 0s linear 0.1s; }
  .tw-trade.is-enhanced .tw-trade-panel.is-active .tw-trade-copy {
    opacity: 1; transform: none;
    transition: opacity 0.35s var(--hb-ease) 0.08s, transform 0.35s var(--hb-ease) 0.08s;
  }
}

/* ---- Desktop only: the photo column is taller than it is wide, so three frames are nudged
   off-centre to keep their subject in view. Tablet and phone use a centred 4:3 crop. ---- */
@media (min-width: 1200px) {
  #trade-panel-3 .tw-trade-photo img { object-position: 80% 50%; }
  #trade-panel-4 .tw-trade-photo img { object-position: 76% 50%; }
  #trade-panel-6 .tw-trade-photo img { object-position: 70% 50%; }
}

/* ---- Tablet: heading full width, then tab list | photo over pitch ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .tw-trade-grid {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); grid-template-rows: auto auto;
    padding-right: var(--tw-trade-edge);
  }
  .tw-trade-head { grid-column: 1 / -1; padding-right: 0; }
  body.tw-home .tw-trade-title { font-size: clamp(2.5rem, 1.3rem + 2.5vw, 3rem) !important; }
  .tw-trade-tabs { margin: 2.75rem 2.25rem 0 0; }
  .tw-trade .tw-trade-tab { padding: 1.05rem 0.6rem 1.05rem 1rem; column-gap: 0.9rem; }
  .tw-trade-name { font-size: 1.25rem; }

  .tw-trade-stage { grid-column: 2; grid-row: 2; margin-top: 2.75rem; padding-left: 2.25rem; }
  .tw-trade-stage::before { top: 0; }
  .tw-trade-panel { display: block; }
  .tw-trade.is-enhanced .tw-trade-panel[hidden] { display: block !important; }
  .tw-trade .tw-trade-photo { min-height: 0; aspect-ratio: 4 / 3; margin: 0; }
  .tw-trade-copy { padding: 2rem 0 0; }
  .tw-trade .tw-trade-label { margin-bottom: 1.25rem; }
  .tw-trade .tw-trade-pitch { font-size: clamp(1.6rem, 0.9rem + 1.5vw, 2rem); margin-bottom: 1.5rem; }
}

/* ---- Phone: accordion. The script has moved each panel under its own row. ---- */
@media (max-width: 767.98px) {
  .tw-trade { --tw-trade-gutter: 16px; }
  .tw-trade-grid { display: block; padding-right: var(--tw-trade-gutter); }
  .tw-trade-head { padding-right: 0; }
  body.tw-home .tw-trade-title { font-size: clamp(2.05rem, 1.2rem + 4.2vw, 2.6rem) !important; }
  .tw-trade-tabs { margin: 2.25rem 0 0; }
  .tw-trade .tw-trade-tab { padding: 1.1rem 0.5rem 1.1rem 1rem; column-gap: 0.95rem; }
  .tw-trade-name { font-size: 1.3rem; }
  .tw-trade-tab.is-active .tw-trade-arrow { transform: rotate(90deg); }

  .tw-trade-stage { display: block; }
  .tw-trade-stage::before { content: none; }
  .tw-trade-panel { display: block; padding: 0.25rem 0 2.25rem; border-bottom: 1px solid var(--hb-line); }
  .tw-trade-stage .tw-trade-panel { padding-top: 1.5rem; border-bottom: 0; }   /* no-JS fallback position */
  .tw-trade.is-enhanced .tw-trade-panel.is-active { animation: tw-trade-open 0.35s var(--hb-ease) both; }
  .tw-trade .tw-trade-photo { min-height: 0; aspect-ratio: 4 / 3; margin: 0; }
  .tw-trade-copy { padding: 1.6rem 0 0; }
  .tw-trade .tw-trade-label { margin-bottom: 1.1rem; }
  .tw-trade .tw-trade-pitch { font-size: 1.7rem; margin-bottom: 1.25rem; }
  .tw-trade .tw-trade-body { max-width: none; }
  .tw-trade .tw-trade-cta { margin-top: 0.75rem; }
}
@keyframes tw-trade-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tw-trade .tw-trade-tab, .tw-trade .tw-trade-tab *,
  .tw-trade .tw-trade-panel, .tw-trade .tw-trade-panel *,
  .tw-trade .tw-trade-cta::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   DESTINATIONS in the header and footer — fifteen places, grouped by region.
   Header: three region columns in one menu, right-aligned (it opens near the bar's right edge);
   stacked below 1200px. Footer: a full-width band under the link columns, regions side by side.
   Kept identical in triways-core.css (inside pages) and triways-home.css (homepage).
   ------------------------------------------------------------------- */
.triways-navbar .tw-dd-dest { padding: 0.6rem 0.35rem 0.4rem; }
.triways-navbar .tw-dd-dest ul { list-style: none; margin: 0; padding: 0; }
.triways-navbar .tw-dd-dest .dropdown-header { display: block; padding: 0.45rem 1.4rem 0.35rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tw-gold); white-space: nowrap; }
.triways-navbar .tw-dd-dest__all { border-top: 1px solid var(--tw-line); margin-top: 0.4rem; padding-top: 0.3rem; }
.triways-navbar .tw-dd-dest__all .dropdown-item { color: var(--tw-champagne); }
@media (min-width: 1200px) {
  .triways-navbar .tw-dd-dest.show { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 0.35rem; }
  .triways-navbar .tw-dd-dest__all { grid-column: 1 / -1; }
}
@media (max-width: 1199.98px) {
  .triways-navbar .tw-dd-dest .dropdown-header { padding-left: 0.5rem; }
}

.tw-footer__dest { grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 2rem; border-top: 1px solid var(--tw-line); }
.tw-footer__dest .tw-footer__h a { color: inherit; }
.tw-footer__dest .tw-footer__h a:hover { color: var(--tw-champagne); }
.tw-footer__dest-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 2.6vw, 2.5rem); }
.tw-footer__dest-region { margin: 0 0 0.6rem; font-family: var(--hb-serif, "Cormorant Garamond", serif); font-style: italic; font-size: 1.05rem; color: var(--tw-champagne); }
.tw-footer__dest ul { display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 767.98px) { .tw-footer__dest-groups { grid-template-columns: minmax(0, 1fr); } }