/* ============================================================
   Ideal Travel Creations — tour operator
   Three colors:
     · White       #FFFFFF   (background)
     · Ink         #1A1A1A   (text, dark sections)
     · Brand green #537C36   (CTAs, accents)
   Type: Lato
   ============================================================ */

:root {
  --c-white:        #FAF7F2;       /* warm ivory — site background */
  --c-ink:          #2B2520;        /* warm near-black */
  --c-brand:        #537C36;
  --c-brand-dark:   #3F5E29;
  --c-brand-soft:   rgba(83,124,54,.08);

  /* Functional warm neutrals */
  --c-text:         #2B2520;
  --c-text-soft:    #5C5247;
  --c-text-mute:    #8A8175;
  --c-bg-alt:       #F2EBDE;        /* sandy cream for alt sections */
  --c-border:       #E8E0D5;
  --c-border-soft:  #EFE9DD;

  --ff: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --t-fast: 180ms;
  --t-med:  300ms;
  --t-slow: 600ms;

  --header-h: 8.4rem;          /* fixed-header height (logo 76px + 1.8rem padding × 2) */
  --header-h-scrolled: 6.2rem; /* header height once shrunk on scroll (logo 60px + 1.2rem × 2) */
  --ease:   cubic-bezier(.22,.61,.18,1);

  --container-max: 1280px;   /* site-wide cap for shared furniture */
  --container: var(--container-max);
  --gutter:    clamp(1.2rem, 4vw, 2.5rem);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px rgba(0,0,0,.07);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);

  --r-sm: 4px;
  --r-md: 8px;
}

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior: smooth — it breaks ScrollTrigger pins. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
img, svg, video, iframe { display: block; max-width: 100%; }
/* NOTE: every image is wrapped in <picture> at render time (WebP +
   fallback). A picture stays at its default inline display: inline boxes
   are not block containers, so an img's percentage height resolves
   straight through to the real container — the wrapper is invisible to
   sizing. The exception is a picture that lands as a grid/flex ITEM
   (blockified to an auto-height box): those need the wrapper explicitly
   sized in their component's CSS, like .team-tile__media picture and
   .dest-gallery__item picture. Do NOT "fix" this with
   `picture { display: contents }` — Chrome then resolves the img's
   percentage height against the boxless wrapper and it collapses to
   intrinsic size. */
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

::selection { background: var(--c-brand); color: #fff; }

/* ----- typography ----- */
h1, h2, h3, h4 {
  font-family: var(--ff);
  margin: 0 0 .4em;
  color: var(--c-text);
  letter-spacing: -.015em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.018em; line-height: 1.1; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }

.eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-brand);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--c-text-soft); line-height: 1.6;
  max-width: 64ch; font-weight: 400;
}

.skip-link { position: absolute; left: -9999px; top: 0; padding: 10px 18px; background: var(--c-ink); color: #fff; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }

/* ----- layout ----- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Homepage goes full-bleed — sections + grids span the viewport width
   with only the gutter as edge breathing room. Internal text elements
   (lede, manifesto, etc.) keep their own readable max-widths. */
body[data-current="/"] { --container: 100%; }
/* …but not the shared furniture. --container is set on <body>, so the override
   above is inherited by everything inside it — which pulled the header and the
   mega-menu panels full-bleed on / while every other page capped them at
   --container-max. The header is the same component everywhere, so pin it back
   or the logo and nav visibly jump as you navigate to and from the home page.
   The mega panels are body-level siblings of <header> (see layouts/main.php),
   hence the second selector. */
.site-header,
.primary-nav__flyout--mega { --container: var(--container-max); }
body[data-current="/"] .section-head h2 { max-width: 28ch; }
body[data-current="/"] .section-head--center h2,
body[data-current="/"] .section-head--center .lede { margin-left: auto; margin-right: auto; }
.section { padding: clamp(4rem, 9vh, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vh, 4rem) 0; }
.section--white { background: var(--c-white); }
.section--alt   { background: var(--c-bg-alt); }
.section--ink   { background: var(--c-ink); color: #DDDDDA; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lede { color: rgba(255,255,255,.7); }

.section-head { margin: 0 0 clamp(2.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: .8rem; }
.section-head--row {
  flex-direction: row; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1.5rem;
}
.section-head h2 { margin: 0; }
.section-head .lede { max-width: 56ch; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 1.8rem 0;
  color: var(--c-ink);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-med) var(--ease), padding var(--t-med), color var(--t-med),
              border-color var(--t-med), transform .45s var(--ease);
  transform: translateY(0);
}
.site-header.is-light { color: var(--c-ink); }
.site-header.is-scrolled {
  padding: 1.2rem 0;
  box-shadow: var(--shadow-sm);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { display: inline-flex; align-items: center; color: currentColor; }
.brand__logo {
  height: 76px;
  width: auto;
  display: block;
  transition: height var(--t-med) var(--ease);
}
.site-header.is-scrolled .brand__logo { height: 60px; }
.brand__logo--footer {
  height: 56px;
  background: #fff;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  box-sizing: content-box;
}
@media (max-width: 600px) {
  :root { --header-h: 7rem; --header-h-scrolled: 5.2rem; }   /* smaller logo → shorter header */
  .brand__logo { height: 54px; }
  .site-header.is-scrolled .brand__logo { height: 44px; }
}

/* Gap tightens as the bar narrows: with eight top-level items a flat 2.4rem
   squeezed the labels enough that "Travel Info" broke onto a second line. */
.primary-nav__list { display: flex; gap: clamp(1.35rem, 1.9vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0;
  position: relative; padding: 8px 0;
  /* A two-word label must never wrap — it would double the header's height. */
  white-space: nowrap;
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--c-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.primary-nav a:hover, .primary-nav a.is-active { color: var(--c-brand); }
.primary-nav a:hover::after, .primary-nav a.is-active::after { transform: scaleX(1); }

.site-header__cta { display: flex; align-items: center; gap: .8rem; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid currentColor;
  align-items: center; justify-content: center; flex-direction: column; gap: 3px;
}
.nav-toggle span { width: 16px; height: 1.6px; background: currentColor; transition: transform var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; background: var(--c-white); color: var(--c-ink);
  /* Top padding must clear the fixed header (the panel sits beneath it,
     z 55 < 60) — derived from --header-h so both breakpoints stay clear. */
  padding: calc(var(--header-h) + 1.2rem) var(--gutter) 2rem; z-index: 55;
  transform: translateY(-100%); transition: transform var(--t-med) var(--ease);
  visibility: hidden; overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.mobile-nav a { font-size: 1.5rem; font-weight: 700; }
.mobile-nav__cta { margin-top: 1.5rem; }

/* ============================================================
   BUTTONS — brand green for primary, conventional patterns
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em;
  font-weight: 700; font-size: .92rem;
  letter-spacing: .02em;
  border: 1.5px solid var(--c-brand); border-radius: var(--r-sm);
  background: var(--c-brand); color: #fff;
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .7em 1.2em; font-size: .82rem; }

/* Header CTA — radial ink-fill from cursor on hover */
.btn--header {
  padding: 1em 1.7em;
  font-size: 1rem;
  letter-spacing: .04em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), letter-spacing var(--t-med);
}
.btn--header::before {
  content: '';
  position: absolute;
  top: var(--mx-y, 50%);
  left: var(--mx-x, 50%);
  width: 0;
  height: 0;
  background: var(--c-brand);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .6s cubic-bezier(.4, 0, .2, 1), height .6s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
  pointer-events: none;
}
.btn--header:hover::before {
  width: 280%;
  height: 280%;
}
.btn--outline.btn--header:hover {
  background: transparent;            /* override the default outline hover; pseudo handles fill */
  color: #fff;
  border-color: var(--c-brand);
}
.btn--outline {
  background: transparent; color: var(--c-brand); border-color: var(--c-brand);
}
.btn--outline:hover { background: var(--c-brand); color: #fff; }
.btn--outline-light {
  background: transparent; color: #fff; border-color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--c-ink); }
.btn--outline-ink {
  background: transparent; color: var(--c-ink); border-color: var(--c-ink);
}
.btn--outline-ink:hover { background: var(--c-ink); color: #fff; }
.btn--link {
  background: transparent; border: 0; padding: 0; color: var(--c-brand);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: .4em;
}
.btn--link::after { content: '→'; transition: transform var(--t-fast); }
.btn--link:hover::after { transform: translateX(4px); }
.btn--block { display: flex; width: 100%; }

/* ============================================================
   HERO — video plays in the background; visible only through
   the BHUTAN letters, via an SVG text mask.
   ============================================================ */
/* Wrapper reserves the scroll distance the sticky hero pins over.
   Total height = hero (100vh) + scroll range (140vh). */
.hero-sticky-range {
  position: relative;
  height: 240vh;
}
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--c-white);
  overflow: hidden;
  isolation: isolate;
}

/* The video layer — sits at the very back. */
.hero__video-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #000;
}
.hero__video-bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;        /* 16:9 by width */
  min-height: 100%; min-width: 177.78vh;/* and by height */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* Shield blocks accidental clicks/hovers on the iframe. */
.hero__video-shield {
  position: absolute; inset: 0; z-index: 1;
  cursor: default;
}

/* The mask overlay — solid white everywhere EXCEPT inside BHUTAN. */
.hero__mask {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.hero__mask-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* SVG must allow text to scale beyond the viewBox without being clipped. */
  overflow: visible;
}
.hero__mask-svg text { will-change: transform; }
.hero__mask-svg--tall { display: none; }
@media (max-aspect-ratio: 1/1) {
  .hero__mask-svg--wide { display: none; }
  .hero__mask-svg--tall { display: block; }
}

/* Lead line, centred above the BHUTAN cutout */
.hero__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  /* Sits just above the cutout, whose letter tops land 32–37% down the hero
     across landscape aspects (wide mask: cap top ~330/900, shifted by slice
     cropping). 26vh keeps a small gap below the line at every desktop aspect;
     the max() clears the fixed header on short viewports, where 26vh alone
     would put the line behind it. */
  padding: max(calc(var(--header-h) + 1.5rem), 26vh) var(--gutter) 0;
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* Sized to read as a lead-in to the word below — clearly above the eyebrow in
   the hierarchy, nowhere near competing with the cutout. */
.hero__lead {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-text);
}

/* Bottom row: tagline + CTA */
.hero__bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 2rem var(--gutter) 2.5rem;
  max-width: var(--container); margin: 0 auto;
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .hero__bottom { grid-template-columns: 1fr auto; gap: 3rem; padding-bottom: 3rem; }
}
.hero__tagline {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700; color: var(--c-text);
  margin: 0 0 .5rem; line-height: 1.2;
  letter-spacing: -.015em;
  max-width: 24ch;
}
.hero__sub {
  color: var(--c-text-soft);
  font-size: 1rem;
  max-width: 48ch;
  margin: 0;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.1em 1.7em;
  background: var(--c-ink); color: #fff;
  border-radius: 999px;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero__cta:hover { background: var(--c-brand); transform: translateY(-2px); }
.hero__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--c-brand); color: #fff;
  font-size: .85rem; line-height: 1;
  transition: transform var(--t-med);
}
.hero__cta:hover .hero__cta-arrow { transform: translateY(2px); background: #fff; color: var(--c-ink); }

@media (max-width: 600px) {
  .hero-sticky-range { height: 228vh; }   /* 88vh hero + 140vh scroll */
  .hero { height: 88vh; }
  /* Left-aligned on phones. .hero__top is a column flex now, so the cross
     axis is what aligns these — justify-content no longer does it. The tall
     mask's letter tops sit lower (~46% of the 88vh hero ≈ 40vh), so the line
     drops further than on desktop; 32vh leaves room for it to wrap to two
     lines and still clear the cutout. */
  .hero__top { padding-top: max(calc(var(--header-h) + 1.25rem), 32vh); align-items: flex-start; text-align: left; }
  .hero__tagline { font-size: 1.15rem; }
  .hero__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   TRUST STRIP — small band under hero
   ============================================================ */
.trust {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding: 1.4rem 0;
}
.trust__inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  color: var(--c-text-soft); text-transform: uppercase;
  text-align: center;
}
.trust__item {
  display: inline-flex; align-items: center; gap: .6rem;
}
.trust__item::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-brand);
}
.trust__item.no-dot::before { display: none; }
.trust__rating {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c-text);
}
.trust__rating .stars { color: var(--c-brand); letter-spacing: 0; }

/* ============================================================
   WHY BHUTAN — pinned slider. A tall scroll range holds a sticky
   100vh stage; scroll progress drives which reason is active.
   Active item slides in from the right (scrolling down) or left
   (scrolling up); leaving items slide out the opposite direction.
   ============================================================ */
.why-pin-section {
  --why-pin-items: 5;
  --why-pin-scroll-per: 100vh;
  background: var(--c-bg-alt);
  position: relative;
}
.why-pin__range {
  position: relative;
  height: calc(100vh + (var(--why-pin-items) - 1) * var(--why-pin-scroll-per));
}
.why-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
  padding: clamp(1rem, 2.5vh, 1.8rem) 0 clamp(.3rem, .8vh, .6rem);
}
.why-pin__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.why-pin__head {
  margin: 0 0 clamp(.3rem, .6vh, .5rem);
}
.why-pin__head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin: 0;
}
/* ---- Desktop layout: shared stage on the left, stacked copies on
       the right. A single sliding door panel sits over the stage and
       its horizontal position is driven by --door-progress, set on
       .why-pin__stage by JS as the user scrolls. ---- */
.why-pin__items {
  flex: 1;
  min-height: 0;
}
.why-pin__items--desktop {
  flex: 0 0 auto;                  /* content-sized */
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.why-pin__items--mobile { display: none; }

.why-pin__stage-col {
  position: relative;              /* anchor for absolutely-placed tabs */
  width: 100%;
}
.why-pin__stage {
  --reveal-progress: 0;        /* 0 = outgoing visible, 1 = incoming visible */
  /* L-shape: short cutout at the bottom-right (~33% wide ×  ~10% tall —
     Zoox original). It's a subtle notch; tabs sit at its left edge. */
  --stage-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 962 876' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M882 20H56C30.08 20 20 30.08 20 56V860C20 885.92 30.08 896 56 896H628.5C654.42 896 664.5 885.92 664.5 860V841C664.5 815.08 674.58 805 700.5 805H946C971.92 805 982 794.92 982 769V56C982 30.08 971.92 20 946 20Z'/%3E%3C/svg%3E");
  position: relative;
  width: 100%;
  height: clamp(580px, 86vh, 775px);  /* tall — nearly fills the sticky viewport */
  overflow: hidden;
  background: var(--c-border-soft);
  -webkit-mask-image: var(--stage-mask);
          mask-image: var(--stage-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* All slides stacked. The incoming slide acts as the door: it slides
   in from the right, covering the outgoing one as scroll progresses.
   The wipe boundary is at progress × 100% of the stage width; later
   DOM order on the incoming slide puts it on top automatically. */
.why-pin__slide {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 100%);   /* default: invisible */
}
.why-pin__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Outgoing: visible to the right of the wipe edge. */
.why-pin__slide.is-outgoing {
  clip-path: inset(0 0 0 calc(var(--reveal-progress) * 100%));
}
/* Incoming: visible to the left of the wipe edge — the "door" itself. */
.why-pin__slide.is-incoming {
  clip-path: inset(0 calc((1 - var(--reveal-progress)) * 100%) 0 0);
}

/* Copies: stacked in the right column, only the active one visible. */
.why-pin__copies {
  position: relative;
  align-self: stretch;
}
.why-pin__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.why-pin__copy.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.why-pin__num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 1.1rem;
  position: relative;
  padding-left: 2.2rem;
}
.why-pin__num::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 1.6rem; height: 1px;
  background: var(--c-brand);
  transform: translateY(-50%);
}
.why-pin__title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 1.2rem;
  color: var(--c-text);
}
.why-pin__copy p {
  color: var(--c-text-soft);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0;
}

/* Pill nav inside the L-shape's bottom-right cutout. A single
   absolutely-positioned pill slides between tabs; JS measures each
   active tab's rect and writes left/width onto the pill, which
   transitions with a long easeOut for a buttery glide. */
.why-pin__tabs {
  position: absolute;
  left: 68%;
  right: 1%;
  bottom: 1%;
  height: 9%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 4px;
  margin: 0;
  flex-wrap: nowrap;
  border-radius: 999px;
  box-sizing: border-box;
}
.why-pin__tabs-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: var(--c-brand);
  border-radius: 999px;
  pointer-events: none;
  /* No CSS transition — JS interpolates left/width from scroll
     progress every frame, so the pill physically tracks the scroll
     at the same pace as the image clip-path wipe. */
  z-index: 0;
}
.why-pin__tab {
  background: none;
  border: 0;
  padding: 0 clamp(.6rem, 1.2vw, 1rem);
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(.7rem, .9vw, .85rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: color .4s var(--ease);
  border-radius: 999px;       /* match pill for focus ring */
}
/* Remove the old dot / underline indicators — pill replaces them. */
.why-pin__tab::before,
.why-pin__tab::after {
  display: none;
}
.why-pin__tab:hover { color: var(--c-text); }
.why-pin__tab.is-active { color: #fff; }     /* white text over the green pill */
.why-pin__tab:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 4px;
}

/* Mobile or reduced-motion — drop the pin, hide the desktop stage,
   and render the per-reason mobile tree. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .why-pin__range { height: auto; }
  .why-pin__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-bottom: clamp(2rem, 5vh, 3rem);
  }
  .why-pin__items--desktop { display: none; }
  .why-pin__items--mobile {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  .why-pin__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .why-pin__media {
    aspect-ratio: 4/3;
    border-radius: clamp(20px, 2vw, 28px);
    overflow: hidden;
    background: var(--c-border-soft);
  }
  .why-pin__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Mobile copies render in normal flow (override desktop absolute). */
  .why-pin__copy {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .why-pin__tabs { display: none; }
}

/* Rise-line ornament shared with section headings. */
.rise-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.rise-word {
  display: inline-block;
  will-change: transform;
}

/* ============================================================
   TOUR CATEGORIES — clean image-and-label tiles
   ============================================================ */
.cat-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat {
  position: relative; display: block; aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  color: #fff;
}
.cat img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1s var(--ease);
}
.cat:hover img { transform: scale(1.08); }
.cat::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%);
}
.cat__label {
  position: absolute; left: 1.2rem; bottom: 1.1rem; right: 1.2rem; z-index: 2;
  font-size: 1.1rem; font-weight: 700; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
}
.cat__label::after { content: '→'; transition: transform var(--t-fast); opacity: .8; }
.cat:hover .cat__label::after { transform: translateX(4px); opacity: 1; }

/* ============================================================
   JOURNEY MARQUEE — continuously scrolling rail of activity
   cards. Two copies of the content sit end-to-end and the
   track animates -50% so the loop is seamless. Pauses on hover.
   ============================================================ */
.journey-marquee {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.journey-marquee::-webkit-scrollbar { display: none; }
.journey-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding: .2rem 0;
}

/* wrap holds the marquee + the chevron pills floating over its edges */
.journey-marquee-wrap {
  position: relative;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.journey-marquee-wrap .journey-marquee { margin-top: 0; }

/* Full-height white "paper" panel at each edge — cards scroll
   behind it. A side-facing soft shadow gives the depth. */
.journey-marquee__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: clamp(56px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  color: #6B7280;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.journey-marquee__nav svg { width: 10px; height: 16px; }
.journey-marquee__nav:hover { color: var(--c-ink); }
/* --prev: matching circular pill floating over the left edge. */
.journey-marquee__nav--prev {
  top: 50%;
  bottom: auto;
  left: clamp(8px, 1.5vw, 16px);
  transform: translateY(-50%);
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .28);
  transition: color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.journey-marquee__nav--prev:hover {
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .34);
}
/* --next: a compact circular pill floating over the right edge of the
   cards, instead of the full-height paper panel. */
.journey-marquee__nav--next {
  top: 50%;
  bottom: auto;
  right: clamp(8px, 1.5vw, 16px);
  transform: translateY(-50%);
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .28);
  transition: color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.journey-marquee__nav--next:hover {
  transform: translateY(-50%) translateX(2px);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .34);
}

.journey-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 320px);
  height: clamp(340px, 30vw, 440px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-bg-alt);
  color: #fff;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 480ms cubic-bezier(.19, 1, .22, 1);
}
.journey-card:hover { box-shadow: var(--shadow-lg); }

.journey-card__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.journey-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.journey-card__media::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,17,16,0) 45%, rgba(15,17,16,.7) 100%);
  pointer-events: none;
}

.journey-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(.9rem, 1.4vw, 1.4rem);
  color: #fff;
}
.journey-card__title {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 1.2; font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  transition: font-size 720ms cubic-bezier(.19, 1, .22, 1);
}
/* Top row's tall tiles get a bigger title by default */
.journey-bento__row--r1 .journey-card__title {
  font-size: clamp(1.3rem, 1.7vw, 1.8rem);
}
@media (hover: hover) and (min-width: 900px) {
  .journey-card:hover .journey-card__title {
    font-size: clamp(1.3rem, 1.7vw, 1.8rem);
  }
}

.journey-card__plus {
  position: absolute; right: .7rem; top: .7rem; z-index: 3;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 1rem; line-height: 1; font-weight: 400;
  color: var(--c-ink);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.journey-card:hover .journey-card__plus {
  background: var(--c-white);
  transform: rotate(90deg);
}

@media (max-width: 700px) {
  .journey-card {
    width: 64vw;
    height: 74vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-card,
  .journey-card__title { transition: none; }
}

/* ============================================================
   TOUR PACKAGE RAIL — dark portrait cards with text on top
   and the image filling the bottom half. Horizontal scroller
   with chevron controls. Matches the journey.png aesthetic.
   ============================================================ */
.pkg-rail-wrap {
  position: relative;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.pkg-rail {
  list-style: none;
  margin: 0; padding: .4rem .2rem 1.4rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pkg-rail::-webkit-scrollbar { display: none; }
.pkg-rail__item {
  flex: 0 0 auto;
  width: clamp(260px, 22vw, 320px);
  scroll-snap-align: start;
}

.pkg-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #0F1110;
  color: #fff;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 480ms cubic-bezier(.19, 1, .22, 1);
}
.pkg-card:hover { box-shadow: var(--shadow-lg); }

.pkg-card__head {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 1.4rem 1.4rem 0;
  display: flex; flex-direction: column;
  gap: .5rem;
}
.pkg-card__eyebrow {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.pkg-card__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* image fills the entire card; a top gradient keeps the title legible */
.pkg-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pkg-card__media::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,17,16,.7) 0%, rgba(15,17,16,.15) 45%, rgba(15,17,16,0) 70%);
  pointer-events: none;
}
.pkg-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
}
.pkg-card:hover .pkg-card__media img { transform: scale(1.06); }

/* chevron controls sit between the "View all tours" link row and the
   rail, right-aligned. */
.pkg-rail__controls {
  display: flex; justify-content: flex-end; gap: .55rem;
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
.pkg-rail__btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.pkg-rail__btn svg { width: 10px; height: 18px; }
.pkg-rail__btn:not(:disabled):hover {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.pkg-rail__btn:disabled { opacity: .35; cursor: not-allowed; }

/* "View all tours" link sits where the controls used to be — below
   the rail, bottom-right. */
.pkg-rail__all {
  display: block;
  margin-top: .4rem;
  text-align: right;
}

@media (max-width: 700px) {
  .pkg-rail__item { width: 70vw; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-card,
  .pkg-card__media img { transition: none; }
}

/* ============================================================
   TOUR CARD GRID — product-style cards with price/duration
   ============================================================ */
.tour-grid {
  display: grid; gap: 1.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tour-grid { grid-template-columns: repeat(3, 1fr); } }
.tour {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  color: var(--c-text);
}
.tour:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tour__media-link { display: block; color: inherit; }
.tour__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-alt); }
.tour__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1s var(--ease);
}
.tour:hover .tour__media img { transform: scale(1.07); }
.tour__body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  flex: 1;
}
.tour__meta {
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute);
}
.tour__meta-item--cat { color: var(--c-brand); }
.tour__meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.tour__title {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0; line-height: 1.25;
  /* Lock to 2 lines so card content baselines align across the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.tour__title a { color: inherit; }
.tour:hover .tour__title a { color: var(--c-brand); }

/* Pill action buttons */
.tour__actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: auto;
}
.tour__pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .65em 1.3em;
  border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.tour__pill--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
}
.tour__pill--ghost:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.tour__pill--solid {
  background: var(--c-ink);
  color: #fff;
  border: 1.5px solid var(--c-ink);
}
.tour__pill--solid:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
}

/* ============================================================
   DESTINATIONS — clean image-card grid
   ============================================================ */
.dest-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
.dest-intro { margin: 0; }
/* On desktop the intro sits beside the aside, so let it span the full main column. */
@media (min-width: 900px) { .prose.dest-intro { max-width: none; } }
@media (min-width: 780px) { .dest-grid--regions { grid-template-columns: repeat(3, 1fr); } }

/* Destinations index: intro + sticky aside, region cards full-width below */
.dest-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
@media (min-width: 900px) { .dest-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
/* On the detail page nothing follows the layout, so drop the trailing gap. */
.page-destination-detail .dest-layout { margin-bottom: 0; }
/* Once the aside is beside it the column is already narrow, so let the copy
   run the full width of it — the grid gap keeps it off the aside. */
@media (min-width: 900px) {
  .page-destination-detail .dest-layout__main .prose { max-width: none; }
}
.dest-aside { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .dest-aside { position: sticky; top: 100px; } }
.dest-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
}
.dest-card--cta { background: var(--c-bg-alt); }
.dest-card__title { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); margin: 0 0 1rem; font-weight: 800; }
.dest-card p { margin: 0 0 1.1rem; color: var(--c-text-soft); font-size: .95rem; line-height: 1.55; }
.dest-region-links { list-style: none; margin: 0; padding: 0; }
.dest-region-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--c-border);
  text-decoration: none; color: var(--c-ink); font-weight: 700;
  transition: color var(--t-fast) var(--ease);
}
.dest-region-links li:first-child a { border-top: 0; padding-top: 0; }
.dest-region-links a:hover { color: var(--c-brand); }
.dest-region-links .n {
  font-size: .72rem; font-weight: 700; color: var(--c-text-mute);
  background: var(--c-bg-alt); border-radius: 999px; padding: .1rem .55rem;
}
.dest-facts { display: grid; gap: .75rem; margin: 0; }
.dest-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dest-facts dt { margin: 0; color: var(--c-text-mute); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.dest-facts dd { margin: 0; font-weight: 700; color: var(--c-ink); font-size: .92rem; text-align: right; }
.dest-facts dd a { color: var(--c-brand); text-decoration: none; }
.dest-facts dd a:hover { text-decoration: underline; }
/* "See all of <region> →" foot link under the nearby-destinations list */
.dest-card__more { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--c-border); font-size: .88rem; }
.dest-card__more a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.dest-card__more a:hover { text-decoration: underline; }

/* Travel-info category link list (two columns, arrow markers) */
.prose ul.ti-links { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .prose ul.ti-links { grid-template-columns: 1fr 1fr; } }
.prose ul.ti-links li { margin: 0; padding: 0; }
.prose ul.ti-links li::before { content: none; }
.prose ul.ti-links a {
  display: flex; align-items: center; gap: .6rem;
  padding: .72rem .1rem; border-bottom: 1px solid var(--c-border);
  text-decoration: none; color: var(--c-ink); font-weight: 600; line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.prose ul.ti-links a::before { content: '→'; color: var(--c-brand); font-weight: 700; transition: transform var(--t-fast) var(--ease); }
/* The generic prose-link hover below (.prose a:not(.btn):hover) paints a solid
   brand block and swaps in `padding: 0 .15em` — on an inline word that reads as
   a highlight, but these rows are flex blocks with padding of their own, and it
   out-specifies the rule above (0,3,1 beats 0,2,2). The row collapsed from 47px
   to 24px on hover, the list reflowed under the pointer, the pointer fell on a
   different row, and the two states chased each other. Restate the box here so
   only the colour changes. */
.prose ul.ti-links a:hover {
  color: var(--c-brand);
  background: none;
  padding: .72rem .1rem;
  border-bottom-color: var(--c-border);
}
.prose ul.ti-links a:hover::before { transform: translateX(3px); }
/* Optional trailing note on a link row — nights and regions on the birding
   tour list. Pushed to the right of the row on a wide enough column, and
   allowed to wrap under the title when the column is narrow. */
.prose ul.ti-links .ti-links__meta {
  margin-left: auto; padding-left: .9rem;
  color: var(--c-text-soft); font-weight: 400; font-size: .82rem;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .prose ul.ti-links a { flex-wrap: wrap; }
  .prose ul.ti-links .ti-links__meta { margin-left: 0; padding-left: 1.35rem; flex-basis: 100%; white-space: normal; }
}
.dest-tile {
  display: block;
  color: var(--c-text);
  background: transparent;
}
.dest-tile__media {
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--c-bg-alt);
  margin-bottom: 1.1rem;
}
/* Gallery strip on the destination detail page (below the hero). Uncapped:
   three images keep the familiar single row; four or more wrap into a uniform
   grid. Tiles stay equal — a feature-sized lead tile leaves an empty cell at
   several counts, and a part-filled last row is the same convention the card
   grids elsewhere on the site already use. */
.dest-gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) {
  .dest-gallery--few  { grid-template-columns: repeat(3, 1fr); }
  .dest-gallery--many { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* The frame (<picture>) carries the aspect ratio and the clipping; the figure
   is a column so an optional caption adds height below the photo rather than
   covering it. */
.dest-gallery__item { margin: 0; display: flex; flex-direction: column; }
.dest-gallery__item picture {
  display: block; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; border-radius: var(--r-md); background: var(--c-bg-alt);
}
.dest-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .5s var(--ease); }
.dest-gallery__item:hover img { transform: scale(1.04); }
.dest-gallery__caption {
  margin-top: .55rem; font-size: .8rem; line-height: 1.45; color: var(--c-text-soft);
}
/* Credit for the Department of Tourism photography. It belongs to the grid, so
   the grid gives up its bottom margin to it where the line is printed. */
.dest-gallery:has(+ .dest-gallery__credit) { margin-bottom: .8rem; }
.dest-gallery__credit {
  margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: .78rem; color: var(--c-text-soft);
}
.dest-gallery__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dest-gallery__credit a:hover { color: var(--c-brand); }

/* Lightbox: descriptive caption + position counter (see site.js). Namespaced
   away from .lightbox__caption, which is the polaroid lightbox's script style. */
.lightbox__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .5rem 1.2rem; max-width: 68ch; text-align: center;
}
.lightbox__desc { color: rgba(255,255,255,.92); font-size: .98rem; line-height: 1.5; }
.lightbox__count {
  color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; white-space: nowrap;
}

/* Small qualifier beside a fact value (e.g. the altitude band next to metres) */
.dest-facts__tag {
  display: inline-block; margin-left: .35rem; padding: .1rem .45rem;
  border-radius: 999px; background: var(--c-brand-soft); color: var(--c-brand-dark);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
/* Explanatory line under a facts list — altitude context, plain best-time text */
.dest-card__note {
  margin: .9rem 0 0; padding-top: .85rem; border-top: 1px solid var(--c-border);
  font-size: .86rem; line-height: 1.5; color: var(--c-text-soft);
}
.dest-card__note a { color: var(--c-brand); font-weight: 700; text-decoration: none; white-space: nowrap; }
.dest-card__note a:hover { text-decoration: underline; }

/* ----- "When to go" block in the destination main column ----- */
.dest-when {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--c-border);
}
.dest-when__title {
  margin: 0 0 1.1rem; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute);
}
.dest-when__plain { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-ink); }

/* ----- season strip: 12 months, recommended ones filled ----- */
.season-strip { max-width: 520px; }
.season-strip__months {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.season-strip__month {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: var(--r-sm);
  background: var(--c-bg-alt); color: var(--c-text-mute);
  font-size: .78rem; font-weight: 800; line-height: 1;
}
.season-strip__month.is-on { background: var(--c-brand); color: #fff; }
.season-strip__label { margin: .9rem 0 0; font-size: .95rem; font-weight: 700; color: var(--c-ink); line-height: 1.45; }

/* Full-screen image lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  gap: .5rem; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 17, 14, .9);
  opacity: 0; transition: opacity .25s var(--ease);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__img {
  max-width: min(92vw, 1200px); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 6px; box-shadow: 0 20px 60px -12px rgba(0,0,0,.6);
  animation: lb-in .3s var(--ease) both;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox__close {
  position: absolute; top: 1.1rem; right: 1.3rem;
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.7rem; line-height: 1;
  cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.lightbox__nav {
  flex: 0 0 auto; width: 3rem; height: 3rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.28); }
@media (max-width: 560px) { .lightbox__nav { position: absolute; bottom: 1.2rem; } .lightbox__nav--prev { left: 1.2rem; } .lightbox__nav--next { right: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img { transition: none; animation: none; } }
.dest-tile__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.dest-tile__body {
  display: flex; flex-direction: column; gap: .4rem;
}
.dest-tile__region {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brand);
}
.dest-tile__name {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 800; letter-spacing: -.02em;
  margin: 0; line-height: 1.1;
  color: var(--c-text);
}
.dest-tile__foot {
  margin-top: .4rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem;
  color: var(--c-text-mute);
}
.dest-tile__cta { font-weight: 700; color: var(--c-text); display: inline-flex; align-items: center; gap: .3em; }
.dest-tile__cta::after { content: '→'; transition: transform var(--t-fast); }
.dest-tile:hover .dest-tile__cta { color: var(--c-brand); }
.dest-tile:hover .dest-tile__cta::after { transform: translateX(4px); }

/* ============================================================
   WHERE TO GO — accordion carousel on the home page
   The active destination's image fills the whole card. The
   stacked pill list floats over the image on the left.
   ============================================================ */
.dest-carousel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 4;
}
@media (min-width: 700px) {
  .dest-carousel { aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .dest-carousel { aspect-ratio: 21 / 10; }
}

/* ---- left: pill list, overlaid on the image ---- */
.dest-carousel__list {
  position: absolute;
  top: 1rem; left: 1rem; bottom: 1rem;
  z-index: 2;
  width: min(86%, 340px);
  list-style: none;
  margin: 0;
  padding: .9rem;
  display: flex; flex-direction: column; gap: .5rem;
  background: rgba(245, 240, 230, .82);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-radius: 18px;
  overflow-y: auto;
}
@media (min-width: 700px) {
  .dest-carousel__list {
    top: 1.4rem; left: 1.4rem; bottom: 1.4rem;
    padding: 1rem;
  }
}
.dest-pill {
  background: var(--c-white);
  border-radius: 999px;
  transition: border-radius var(--t-med) var(--ease);
  box-shadow: var(--shadow-sm);
}
.dest-pill.is-active {
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.dest-pill__head {
  width: 100%;
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.2rem;
  font-weight: 700;
  font-size: .98rem;
  color: var(--c-text);
  text-align: left;
  border-radius: inherit;
  transition: color var(--t-fast) var(--ease);
}
.dest-pill__head:hover { color: var(--c-brand); }
.dest-pill__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-text-mute);
  flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dest-pill.is-active .dest-pill__dot {
  background: var(--c-brand);
  transform: scale(1.4);
}
.dest-pill__name { flex: 1 1 auto; }
.dest-pill__region {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-mute);
}

/* body — only visible when the pill is active */
.dest-pill__body {
  padding: .2rem 1.2rem 1.1rem;
  animation: destPillIn var(--t-med) var(--ease) both;
}
.dest-pill__body[hidden] { display: none; }
@keyframes destPillIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dest-pill__desc {
  margin: 0 0 .6rem;
  font-size: .9rem; line-height: 1.55;
  color: var(--c-text-soft);
}
.dest-pill__cta {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .02em;
  color: var(--c-brand);
}
.dest-pill__cta span { transition: transform var(--t-fast) var(--ease); }
.dest-pill__cta:hover span { transform: translateX(4px); }

/* ---- image stage: fills the whole carousel ---- */
.dest-carousel__stage {
  position: absolute; inset: 0;
  z-index: 0;
}
.dest-stage {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.dest-stage.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear 0s;
}
.dest-stage img {
  width: 100%; height: 100%; object-fit: cover;
}
.dest-stage__cap {
  position: absolute; right: 0; bottom: 0;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  display: flex; flex-direction: column; gap: .2rem;
  text-align: right;
  color: var(--c-white);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  max-width: 60%;
}
.dest-stage__region {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .95;
}
.dest-stage__name {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900; letter-spacing: -.02em;
  line-height: 1.05;
}
.dest-stage__meta {
  font-size: .85rem; opacity: .92;
  margin-top: .15rem;
}

/* ---- mobile-only prev/next side arrows ---- */
.dest-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(245, 240, 230, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: background var(--t-fast) var(--ease);
}
.dest-carousel__nav svg { width: 11px; height: 14px; }
.dest-carousel__nav--prev { left: .7rem; }
.dest-carousel__nav--next { right: .7rem; }
.dest-carousel__nav:hover { background: var(--c-white); }

/* ---- mobile: collapse list to a single bottom card ---- */
@media (max-width: 699px) {
  .dest-carousel__nav { display: inline-flex; }
  .dest-carousel__list {
    top: auto;
    left: 1rem; right: 1rem; bottom: 1rem;
    width: auto;
    padding: .95rem 1.1rem 1.05rem;
    gap: 0;
    overflow: visible;
  }
  .dest-pill {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .dest-pill:not(.is-active) { display: none; }
  .dest-pill__head {
    padding: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 800;
    pointer-events: none;
  }
  .dest-pill__dot { display: none; }
  .dest-pill__region { display: none; }
  .dest-pill__body {
    padding: 0;
    animation: none;
  }
  .dest-pill__desc { margin: 0 0 .55rem; }
  /* free up the image — the bottom card already shows the name */
  .dest-stage__cap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dest-stage,
  .dest-stage img,
  .dest-pill__body { transition: none; animation: none; }
}

/* ============================================================
   WHY US — manifesto opening + numbered accordion of pledges
   ============================================================ */
.why-us .manifesto {
  max-width: 820px;
  margin: 0 auto clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
  position: relative;
}
.why-us .manifesto__body {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.7;
  color: var(--c-text-soft);
  max-width: 60ch;
  margin: 1.6rem auto 2.4rem;
}
.why-us .manifesto__signature {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-top: 1.6rem;
  position: relative;
}
.why-us .manifesto__sign-stroke {
  display: block;
  width: 48px; height: 1.5px;
  background: var(--c-brand);
  margin-bottom: .8rem;
}
.why-us .manifesto__sign-name {
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.005em;
}
.why-us .manifesto__sign-where {
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 700;
}

/* ============================================================
   WHY US split — image on one side, numbered reasons on the other.
   On desktop the image is sticky so it stays in view while the
   reader scrolls through the list. On mobile the layout stacks.
   ============================================================ */
.why-us { position: relative; }

.why-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .why-split {
    grid-template-columns: minmax(360px, 7fr) 6fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.why-split__media { position: relative; }
@media (min-width: 900px) {
  .why-split__media {
    position: sticky;
    top: clamp(96px, 14vh, 140px);
  }
}
.why-split__frame {
  position: relative;
  aspect-ratio: 5 / 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.why-split__frame img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.why-reasons {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.why-reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.4rem, 2.4vw, 1.8rem) 0;
  border-bottom: 1px solid var(--c-border);
}
.why-reason:first-child { padding-top: 0; }
.why-reason:last-child  { border-bottom: 0; padding-bottom: 0; }
.why-reason__num {
  display: inline-block;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.why-reason__copy { min-width: 0; }
.why-reason__title {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 800; letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0 0 .55rem;
  color: var(--c-text);
}
.why-reason__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-soft);
  margin: 0;
}

/* ============================================================
   (OLD) Pledges accordion — replaced by mandala
   ============================================================ */
.pledges-old { display: none; }

/* Pledges accordion (legacy — kept for any subpage that still uses it) */
.pledges {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--c-border);
}
.pledge {
  border-bottom: 1px solid var(--c-border);
}
.pledge__header {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  gap: 1.4rem;
  align-items: center;
  padding: 1.7rem 0;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--c-text);
  transition: color var(--t-fast) var(--ease);
  font: inherit;
}
.pledge__header:hover { color: var(--c-brand); }
.pledge__num {
  font-size: .78rem; font-weight: 700; letter-spacing: .26em;
  color: var(--c-text-mute);
  transition: color var(--t-fast);
}
.pledge.is-open .pledge__num { color: var(--c-brand); }
.pledge__title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.3;
  margin: 0;
}
.pledge__toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  position: relative;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast);
  justify-self: end;
}
.pledge__toggle::before,
.pledge__toggle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: var(--c-text);
  transition: transform var(--t-med) var(--ease), background var(--t-fast);
}
.pledge__toggle::before {              /* horizontal bar */
  width: 12px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.pledge__toggle::after {               /* vertical bar — collapses when open */
  width: 1.5px; height: 12px;
  transform: translate(-50%, -50%);
}
.pledge.is-open .pledge__toggle {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.pledge.is-open .pledge__toggle::before,
.pledge.is-open .pledge__toggle::after { background: #fff; }
.pledge.is-open .pledge__toggle::after { transform: translate(-50%, -50%) scaleY(0); }

.pledge__body {
  overflow: hidden;
  height: 0;
}
.pledge__body p {
  padding: 0 calc(36px + 1.4rem) 1.8rem calc(80px + 1.4rem);
  color: var(--c-text-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 70ch;
  margin: 0;
}

@media (max-width: 700px) {
  .pledge__header { grid-template-columns: 50px 1fr 30px; gap: 1rem; padding: 1.4rem 0; }
  .pledge__toggle { width: 30px; height: 30px; }
  .pledge__body p { padding: 0 0 1.4rem 0; font-size: .96rem; }
}

/* ============================================================
   (OLD) WHY US grid — kept for reference; no longer used
   ============================================================ */
.why-grid {
  display: grid; gap: clamp(1.8rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .why-grid { grid-template-columns: repeat(6, 1fr); }
  .why-grid > :nth-child(-n+3) { grid-column: span 2; }   /* top row of three */
  .why-grid > :nth-child(n+4)  { grid-column: span 3; }   /* bottom row of two wider columns */
}
.why {
  display: flex; flex-direction: column; gap: .9rem;
}
.why__icon {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--c-brand-soft); color: var(--c-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.why__icon svg { width: 24px; height: 24px; }
.why__title {
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.008em; line-height: 1.3;
  margin: 0;
}
.why__body {
  color: var(--c-text-soft); font-size: .95rem;
  line-height: 1.65; margin: 0;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews {
  display: grid; gap: clamp(1.4rem, 2vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: clamp(2rem, 2.6vw, 2.6rem) clamp(1.6rem, 2vw, 2rem) clamp(1.6rem, 2vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 1px 2px rgba(28, 38, 20, .03);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.review::before {
  content: '\201C';                          /* oversized decorative opening quote */
  position: absolute;
  top: -0.25em; left: .6rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(7.5rem, 12vw, 11rem);
  line-height: 1;
  color: var(--c-brand);
  opacity: .28;
  pointer-events: none;
}
.review > * { position: relative; z-index: 1; }   /* sit content above the quote */
.review:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(28, 38, 20, .10);
  border-color: rgba(83, 124, 54, .35);
}
.review__stars { color: var(--c-brand); letter-spacing: 2px; font-size: 1.1rem; }
.review__text {
  color: var(--c-text);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  font-weight: 500;
  letter-spacing: -.005em;
}
.review__author {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}
.review__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-alt);
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 3px rgba(83, 124, 54, .25);
}
.review__avatar--initials {
  background: var(--c-brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.review__author-text {
  font-size: .76rem;
  color: var(--c-text-mute);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.review__author-text strong {
  display: block;
  color: var(--c-text);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: .15rem;
}

/* ============================================================
   STORIES (blog)
   ============================================================ */
.story-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
.story {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--c-text);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.story:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.story__media { aspect-ratio: 3/2; overflow: hidden; }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); transform: scale(1.02); }
.story:hover .story__media img { transform: scale(1.07); }
.story__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.story__meta { font-size: .76rem; color: var(--c-text-mute); font-weight: 700; }
.story__title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0; }
.story:hover .story__title { color: var(--c-brand); }
.story__excerpt { color: var(--c-text-soft); font-size: .92rem; margin: 0; }
.story__cta {
  margin-top: auto; padding-top: 1rem;
  font-size: .82rem; font-weight: 700; color: var(--c-brand);
  display: inline-flex; gap: .3em; align-items: center;
}
.story__cta::after { content: '→'; transition: transform var(--t-fast); }
.story:hover .story__cta::after { transform: translateX(4px); }

/* ============================================================
   CTA banner
   ============================================================ */
.cta-banner {
  background: var(--c-ink); color: #fff;
  padding: clamp(3rem, 6vw, 5rem);
  border-radius: var(--r-md);
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cta-banner { grid-template-columns: 1.4fr auto; } }
.cta-banner h2 { color: #fff; margin: 0 0 .6rem; }
.cta-banner p { color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; }

/* ============================================================
   ABOUT US — media (left) + copy (right)
   ============================================================ */
.about-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .about-grid { grid-template-columns: 5fr 6fr; }
}

.about-grid__copy { display: flex; flex-direction: column; gap: 1rem; }
.about-grid__copy h2 { margin: .5rem 0 .2rem; }
.about-grid__copy .lede { margin: 0; }
.about-grid__copy p { color: var(--c-text-soft); line-height: 1.7; margin: 0; }
.about-grid__copy .btn--link { margin-top: .8rem; align-self: flex-start; }

.about-grid__media {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
.about-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   GLIMPSE — simple square-tile grid. Click a tile to open the
   existing lightbox.
   ============================================================ */
.glimpse-section {
  background: var(--c-white);
  padding: clamp(4rem, 8vh, 6rem) 0;
}

.glimpse-grid {
  list-style: none;
  padding: 0 clamp(.5rem, 1vw, 1rem);
  /* Break out of .container's max-width — span the full viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1vw, 1rem);
}

.glimpse-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(8px, .8vw, 12px);
  background: var(--c-border-soft);
}
.glimpse-tile figure {
  margin: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  outline: none;
}
.glimpse-tile picture {
  display: block;
  width: 100%; height: 100%;
}
.glimpse-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .glimpse-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   LIGHTBOX — click a polaroid to view its photo enlarged.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(14, 16, 12, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  cursor: zoom-out;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease), visibility 0s;
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  max-width: min(1200px, 92vw);
  max-height: 92vh;
  cursor: default;
  transform: scale(.96);
  transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.lightbox__caption {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #fff;
  text-align: center;
  letter-spacing: -.005em;
  line-height: 1;
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox__close:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.06);
}

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero {
  position: relative;
  margin-top: var(--header-h);          /* start below the fixed header, not under it */
  min-height: clamp(340px, 50vh, 500px);
  display: flex; align-items: flex-end;
  background: var(--c-ink); color: #fff; overflow: hidden;
  isolation: isolate;
}
/* Give the photograph more room. Heroes without one (a page whose
   hero_image is unset) keep the shorter height — the extra depth is there for
   the image, and an empty ink block only reads as dead space. Kept modest:
   most heroes are 16:9 photographs, and the shorter the band, the less of
   the frame object-fit has to crop away. */
.page-hero:has(.page-hero__bg) { min-height: clamp(420px, 54vh, 560px); }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
/* The Buddha Dordenma photograph is a full-height subject — the statue runs
   from the top edge of the frame to well past the middle — so on wide screens,
   where the hero band is far shorter than 16:9 and cover crops ~a third of the
   frame, the default centring takes the head off. Bias the window towards the
   top instead; what falls away is the plinth, not the statue. */
.page-hero__bg img[src*="buddha-dordenma-thimphu-bhutan"] { object-position: center 10%; }
/* All of the darkening lives in this one scrim, weighted to the foot of the
   hero where the crumbs, title and lede sit. No brightness filter on the
   photograph itself: dimming the whole frame on top of the gradient left the
   image reading as a dark backdrop instead of a photograph. The top stays
   just dark enough for the header/crumbs, the middle is untouched. */
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.62) 100%);
}
.page-hero .container { position: relative; z-index: 2; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 3.5rem; }
.page-hero__crumbs {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-bottom: 1rem;
}
.page-hero__crumbs a { color: rgba(255,255,255,.75); }
.page-hero__crumbs a:hover { color: #fff; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero__lede { color: rgba(255,255,255,.85); max-width: 60ch; margin-top: 1rem; font-size: 1.1rem; }
/* Local contrast for the text instead of a heavier scrim: a couple of the
   photographs (whitewater, the airport apron) are bright right where the
   title sits, and darkening every hero for those two frames hides the rest. */
.page-hero h1,
.page-hero__lede,
.page-hero__crumbs { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.35); }

/* "What you'll see here" chips — highlights lifted into the hero so they land
   above the fold instead of below three paragraphs of prose. */
.page-hero__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 72ch;
}
.page-hero__chip {
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.3;
}

/* Hero motion on load — staggered text fade-up.
   Gated behind prefers-reduced-motion so it never affects users who opt out. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__crumbs { animation: hero-rise .8s var(--ease) both .10s; }
  .page-hero h1      { animation: hero-rise .8s var(--ease) both .25s; }
  .page-hero__lede   { animation: hero-rise .8s var(--ease) both .40s; }
  .page-hero__chips  { animation: hero-rise .8s var(--ease) both .55s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ============================================================
   REGION OVERVIEW (Western / Central / Eastern Bhutan)
   ============================================================ */
.region-intro { max-width: 72ch; }
.region-intro__kicker {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brand); margin: 0 0 1rem;
}
.region-intro__body { max-width: none; }
.region-intro__body p:last-child { margin-bottom: 0; }

/* Two-column layout: main content + sticky aside rail */
.region-cols { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .region-cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.region-main__head { margin-top: clamp(2rem, 4vw, 2.8rem); text-align: left; }
/* Once the aside is beside it the main column is already narrow, so let the
   copy run its full width — the grid gap keeps it off the aside. */
@media (min-width: 980px) {
  .region-intro,
  .region-main .prose { max-width: none; }
}

.region-aside { display: flex; flex-direction: column; gap: 1.1rem; }
@media (min-width: 980px) {
  .region-aside { position: sticky; top: calc(var(--header-h) + 1.2rem); }
}
.region-aside__card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 1.3rem 1.4rem;
}
.region-aside__title {
  margin: 0 0 .9rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-soft, #6B7280);
}
.region-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.region-facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--c-border-soft);
}
.region-facts li:first-child { padding-top: 0; }
.region-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.region-facts span { color: var(--c-text-soft, #6B7280); font-size: .92rem; }
.region-facts strong { color: var(--c-ink); font-weight: 700; font-size: .98rem; }

.region-jump { list-style: none; margin: 0; padding: 0; }
.region-jump a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-text); text-decoration: none; font-size: .95rem;
  transition: color var(--t-fast) var(--ease);
}
.region-jump li:last-child a { border-bottom: 0; }
.region-jump a span { color: var(--c-border); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.region-jump a:hover { color: var(--c-brand); }
.region-jump a:hover span { color: var(--c-brand); transform: translateX(3px); }

.region-aside__cta { background: var(--c-ink); border-color: var(--c-ink); }
.region-aside__cta .region-aside__title { color: rgba(255, 255, 255, .65); }
.region-aside__cta p { margin: 0 0 1.1rem; color: rgba(255, 255, 255, .82); font-size: .92rem; line-height: 1.55; }

/* District cards — self-contained styling (the shared .tour__* sub-classes
   ship no CSS, so we don't rely on them here). */
.region-grid {
  display: grid; gap: clamp(1.2rem, 2vw, 1.8rem);
  grid-template-columns: 1fr;
  margin-top: 1.4rem;
}
/* Beside the aside the main column is narrow, so cap district cards at two
   across (three would crowd them). */
@media (min-width: 560px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }

.region-card {
  display: flex; flex-direction: column;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.region-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); }
.region-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-bg-alt); }
.region-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform .9s var(--ease);
}
.region-card:hover .region-card__media img { transform: scale(1.07); }
.region-card__body {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.2rem 1.3rem 1.4rem; flex: 1;
}
.region-card__name {
  margin: 0; font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--c-ink); transition: color var(--t-fast) var(--ease);
}
.region-card:hover .region-card__name { color: var(--c-brand); }
.region-card__blurb {
  margin: 0; font-size: .93rem; line-height: 1.6; flex: 1;
  color: var(--c-text-soft, #6B7280);
}
.region-card__cta {
  margin-top: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-brand); display: inline-flex; align-items: center; gap: .45rem;
}
.region-card__arrow { transition: transform var(--t-fast) var(--ease); }
.region-card:hover .region-card__arrow { transform: translateX(4px); }

/* Must-visit page (pages/must-visit.php): the reasons list as a check grid,
   and tighter rhythm for the section heads that follow the intro. */
.mv-head { margin: clamp(2.4rem, 4vw, 3.2rem) 0 1.2rem; }
.mv-why {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mv-why { grid-template-columns: repeat(2, 1fr); } }
.mv-why li {
  position: relative;
  padding: .95rem 1.1rem .95rem 2.7rem;
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  font-size: .93rem; line-height: 1.6; color: var(--c-text-soft);
}
.mv-why li::before {
  content: '✓';
  position: absolute; left: 1.05rem; top: .95rem;
  color: var(--c-brand); font-weight: 800;
}

/* ============================================================
   PROSE
   ============================================================ */
.prose { max-width: 70ch; font-size: 1.05rem; color: var(--c-text); line-height: 1.75; }
/* The Travel Info index is a directory rather than an article: with no rail
   beside it, the whole column is its own — headings, standfirsts and the
   two-column link lists all run the full width. */
.page-travel-info .prose { max-width: none; }
.prose h2 { margin: 2.2rem 0 .9rem; font-size: clamp(1.6rem, 2.6vw, 2rem); }
.prose h3 { margin: 1.8rem 0 .6rem; font-size: 1.2rem; }
/* Editor content leans on h4 for the sub-headings inside a section ("Riding
   Gear", "Visa Requirements") — 65 published pages use it. Unstyled it
   inherited the body size and read as a stray bold line; this keeps it a
   heading without letting it compete with the h3 above it. */
.prose h4 { margin: 1.7rem 0 .45rem; font-size: 1.02rem; font-weight: 800; color: var(--c-ink); }
.prose p, .prose li { color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose strong { color: var(--c-text); font-weight: 700; }
.prose blockquote {
  margin: 2rem 0; padding: 1rem 0 1rem 1.6rem;
  border-left: 3px solid var(--c-brand);
  color: var(--c-text); font-size: 1.15rem;
}
.prose a:not(.btn) { color: var(--c-brand); border-bottom: 1px solid var(--c-brand); }
.prose a:not(.btn):hover { background: var(--c-brand); color: #fff; border-bottom-color: var(--c-brand); padding: 0 .15em; }
/* Tables inside editor content — the festival-date calendars, mainly.
   .table-wrap scrolls sideways on narrow screens so the page body never does. */
.prose .table-wrap { margin: 1.4rem 0 2.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}
.prose thead th {
  text-align: left;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  background: var(--c-bg-alt);
  padding: .85rem 1rem;
  border-bottom: 2px solid var(--c-brand);
  white-space: nowrap;
}
.prose tbody th, .prose tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: top;
}
.prose tbody th { text-align: left; font-weight: 700; color: var(--c-text); }
.prose tbody td { color: var(--c-text-soft); }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover th, .prose tbody tr:hover td { background: var(--c-brand-soft); }
.fest-table__when { white-space: nowrap; color: var(--c-text) !important; }
.fest-dates h3 { scroll-margin-top: calc(var(--header-h-scrolled) + 1rem); }
.fest-dates__note { font-size: .95rem; color: var(--c-text-soft); }

.prose__hero {
  margin: 0 0 2.2rem;
  max-width: none;
}
.prose__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  box-shadow: 0 24px 60px rgba(28, 38, 20, .15);
}
.prose__hero figcaption {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-top: .8rem;
}
.prose address {
  font-style: normal;
  background: var(--c-bg-alt);
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--c-brand);
  margin-top: 1rem;
  line-height: 1.7;
}

/* ============================================================
   PACKAGE DETAIL
   ============================================================ */
.package-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  /* No `align-items: start` — the aside must stretch to the main column
     so the sticky `.aside-stack` inside it has room to actually stick. */
  .package-layout { grid-template-columns: 1fr 340px; }
}
.summary-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.6rem; position: sticky; top: 100px;
}
.summary-card h4 { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: 1rem; font-weight: 700; }
.summary-card dl { display: grid; gap: 1rem; margin: 0 0 1.4rem; }
.summary-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.summary-card dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: .2rem; font-weight: 700; }
.summary-card dd { font-size: .98rem; font-weight: 700; margin: 0; color: var(--c-text); }
.summary-card .price { color: var(--c-brand); font-weight: 900; font-size: 1.1rem; }

.itinerary { list-style: none; padding: 0; margin: 2rem 0; }
.itinerary li {
  display: grid; grid-template-columns: 80px 1fr; gap: 1.4rem;
  padding: 1.6rem 0; border-top: 1px solid var(--c-border);
}
.itinerary li:last-child { border-bottom: 1px solid var(--c-border); }
.itinerary .day-num {
  background: var(--c-brand); color: #fff;
  width: 60px; height: 60px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; line-height: 1;
}
.itinerary .day-num small {
  font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-top: 2px; opacity: .85;
}
.itinerary h4 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .35em; }
.itinerary p { margin: 0; color: var(--c-text-soft); }
.itinerary .overnight {
  margin-top: .8rem;
  font-size: .76rem; color: var(--c-brand); font-weight: 700;
}

.inc-exc { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 700px) { .inc-exc { grid-template-columns: 1fr 1fr; } }
.inc-exc__col {
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  padding: 1.6rem 1.6rem 1.8rem;
}
.inc-exc h4,
.inc-tabs h4 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; }
.inc-exc h4::before,
.inc-tabs h4::before {
  content: ''; width: 22px; height: 22px; border-radius: 999px;
  background: var(--c-brand); display: inline-block;
}
.inc-exc .col-exc h4::before,
.inc-tabs .col-exc h4::before { background: var(--c-text-mute); }
.inc-exc ul { padding-left: 1.2rem; margin: 0; color: var(--c-text-soft); }
.inc-exc li { margin-bottom: .45rem; line-height: 1.55; }

/* ============================================================
   FORMS — conventional, clear, light
   ============================================================ */
.form { display: grid; gap: 1.3rem; max-width: 760px; }
.form-row { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .form-row.two   { grid-template-columns: 1fr 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label, .field > span.label {
  font-size: .82rem; font-weight: 700; color: var(--c-text);
}
.field input, .field select, .field textarea {
  font: inherit; padding: .8em .95em;
  background: var(--c-white); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-error { color: #B0413E; font-size: .82rem; }
.form-success {
  padding: 1rem 1.3rem; border-left: 3px solid var(--c-brand);
  background: var(--c-brand-soft); color: var(--c-brand-dark); font-weight: 700;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-brand);
  color: rgba(255,255,255,.88);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.6rem;
}
.site-footer h4 { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) and (max-width: 1099px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.05fr 1fr 1.05fr; }
}
.site-footer__brand .brand__name { color: #fff; font-size: 1.05rem; }
.site-footer__pitch { color: rgba(255,255,255,.9); max-width: 36ch; margin: 1.2rem 0 0; font-size: .95rem; }
.site-footer__certs { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer__certs li {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,.45); padding: .35rem .8rem; border-radius: 999px;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.site-footer__links a { color: rgba(255,255,255,.9); font-size: .92rem; }
.site-footer__links a:hover { color: #fff; }
.site-footer__socials { display: flex; gap: 1rem; margin-top: 1.2rem; }
.site-footer__socials a {
  font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px;
}
.site-footer__socials a:hover { color: #fff; border-color: #fff; }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75); font-size: .82rem;
}

/* ============================================================
   GSAP utilities — kept minimal
   ============================================================ */
.reveal-up { opacity: 0; transform: translateY(28px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__cta .btn { display: none; }
}
@media (max-width: 600px) {
  .summary-card { position: static; }
  .itinerary li { grid-template-columns: 1fr; gap: .4rem; }
  .itinerary .day-num { width: 50px; height: 50px; font-size: 1.1rem; }
}

/* ============================================================
   HOMEPAGE TESTIMONIALS — clamp quote, equal-height cards
   ============================================================ */
.reviews--home { align-items: stretch; }
.review--home {
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.review--home .review__text--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

/* ============================================================
   PACKAGES INDEX — filterable, category-grouped
   ============================================================ */
.pkg-index { padding-top: clamp(2.4rem, 4vw, 3.5rem); }

.pkg-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem 2rem;
  padding: clamp(1.2rem, 2vw, 1.6rem) 0 clamp(1.6rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  position: sticky;
  top: 78px;
  background: var(--c-white);
  z-index: 10;
  transition: top .45s var(--ease); /* track the header slide in/out */
}
/* Header auto-hides on scroll-down — when it's gone, pin the filter bar to the very top. */
body:has(.site-header.is-hidden) .pkg-filter { top: 0; }
@media (max-width: 800px) { .pkg-filter { position: static; } }
@media (max-width: 460px) { .pkg-filter { flex-direction: column; align-items: stretch; } }
.pkg-filter__group { display: flex; flex-direction: column; gap: .55rem; }
.pkg-filter__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.pkg-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Custom filter dropdown — replaces native <select> so the open panel can
   carry the site's warm palette, hover tints and active check. */
.pkg-dd { position: relative; display: inline-block; align-self: flex-start; }

.pkg-dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-width: 13rem;
  max-width: 100%;
  padding: .62rem 1.05rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pkg-dd__value { flex: 1 1 auto; }
.pkg-dd__caret {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--c-brand);
  border-bottom: 2px solid var(--c-brand);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.pkg-dd__trigger:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pkg-dd__trigger:focus-visible {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(83, 124, 54, .18);
}
.pkg-dd.is-open .pkg-dd__trigger { border-color: var(--c-brand); }
.pkg-dd.is-open .pkg-dd__caret { transform: translateY(2px) rotate(225deg); }

.pkg-dd__panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 40;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, 88vw);
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(43, 37, 32, .35), 0 2px 8px -4px rgba(43, 37, 32, .18);
  opacity: 0;
  transform: translateY(-.4rem);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.pkg-dd.is-open .pkg-dd__panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.pkg-dd__opt {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .6rem .85rem;
  border-radius: 9px;
  color: var(--c-ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pkg-dd__opt-label { flex: 1 1 auto; }
.pkg-dd__opt-count {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-text-mute);
  background: var(--c-bg-alt);
  border-radius: 999px;
  padding: .1rem .5rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pkg-dd__opt:hover,
.pkg-dd__opt:focus-visible {
  outline: none;
  background: var(--c-bg-alt);
  color: var(--c-brand);
}
.pkg-dd__opt.is-selected {
  color: var(--c-brand);
  font-weight: 800;
}
.pkg-dd__opt.is-selected::after {
  content: "";
  flex: 0 0 auto;
  width: .85rem;
  height: .45rem;
  border-left: 2px solid var(--c-brand);
  border-bottom: 2px solid var(--c-brand);
  transform: translateY(-2px) rotate(-45deg);
}
.pkg-dd__opt.is-selected .pkg-dd__opt-count { background: transparent; color: var(--c-brand); }

@media (prefers-reduced-motion: reduce) {
  .pkg-dd__panel, .pkg-dd__caret, .pkg-dd__opt { transition: none; }
}
.pkg-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.pkg-chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pkg-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-text-mute);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
}
.pkg-chip.is-active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.pkg-chip.is-active span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.pkg-group { margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }
.pkg-section-head {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  position: relative;
}
.pkg-section-head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: -.018em;
  line-height: 1.2;
}
.pkg-section-head h2 small {
  font-size: .55em;
  font-weight: 500;
  color: var(--c-text-mute);
  letter-spacing: -.005em;
}
.pkg-section-head__lede {
  margin: 0;
  color: var(--c-text-mute);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 70ch;
}
.pkg-section-head__view-all {
  position: absolute;
  top: .4em;
  right: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-brand);
  letter-spacing: -.005em;
  text-decoration: none;
}
.pkg-section-head__view-all:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .pkg-section-head__view-all { position: static; margin-top: .4rem; }
}

.pkg-empty {
  background: var(--c-bg-alt);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  border-left: 3px solid var(--c-brand);
  color: var(--c-text);
  font-size: 1.02rem;
}
.pkg-empty a { color: var(--c-brand); border-bottom: 1px solid currentColor; }

/* ============================================================
   PACKAGE DETAIL — meta strip, sub-nav, collapsible itinerary
   ============================================================ */

/* Make anchor jumps clear the sticky header + sub-nav */
html { scroll-padding-top: 130px; }

/* Meta strip directly under the hero */
.pkg-meta-strip {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.pkg-meta-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  padding: clamp(1.2rem, 2vw, 1.6rem) var(--container-pad, 1rem);
}
@media (min-width: 600px) { .pkg-meta-strip__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pkg-meta-strip__inner { grid-template-columns: repeat(5, auto); align-items: center; justify-content: space-between; gap: 2.4rem; } }

.pkg-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pkg-meta__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.pkg-meta strong { font-size: 1rem; color: var(--c-text); font-weight: 700; letter-spacing: -.01em; }
.pkg-meta strong small { font-weight: 400; color: var(--c-text-mute); font-size: .92rem; }
.pkg-meta--wide strong {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}
.pkg-meta__price { color: var(--c-brand) !important; }

/* Sticky in-page nav */
.pkg-subnav {
  position: sticky;
  top: var(--header-h-scrolled);   /* sit just below the visible header */
  z-index: 20;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 0 rgba(28,38,20,.04);
  transition: top .45s var(--ease); /* track the header slide in/out */
}
/* Header auto-hides on scroll-down — when it's gone, pin the subnav to the very top. */
body:has(.site-header.is-hidden) .pkg-subnav { top: 0; }
.pkg-subnav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--container-pad, 1rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.pkg-subnav__inner::-webkit-scrollbar { display: none; }
.pkg-subnav__list {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: .2rem;
  flex: 1;
  white-space: nowrap;
}
.pkg-subnav__list a {
  display: inline-block;
  padding: .9rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--c-text-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pkg-subnav__list a:hover,
.pkg-subnav__list a.is-active {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}
.pkg-subnav__cta { margin: .55rem 0; padding: .55rem 1rem; font-size: .85rem; flex-shrink: 0; }

/* Main detail layout */
.pkg-detail__main > section + section,
.pkg-detail__main > section + div.pkg-foot-cta { margin-top: clamp(2.4rem, 4vw, 3.6rem); }

.pkg-section--lead .pkg-section__title { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.pkg-section__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.pkg-section__header .pkg-section__title { margin-bottom: 0; }
.pkg-section__toggle {
  background: none;
  border: 0;
  color: var(--c-brand);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  padding: .35rem .8rem;
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease);
}
.pkg-section__toggle:hover { background: rgba(83, 124, 54, .08); }

/* Sub-callout inside a section (highlights, complimentary) */
.pkg-highlights,
.pkg-complimentary {
  margin-top: 1.8rem;
  background: var(--c-bg-alt);
  padding: clamp(1.2rem, 2vw, 1.8rem);
  border-left: 3px solid var(--c-brand);
}
.pkg-highlights__title,
.pkg-complimentary__title {
  font-size: 1.05rem;
  margin: 0 0 .8rem;
  letter-spacing: -.005em;
}
.pkg-complimentary {
  background: linear-gradient(135deg, rgba(83,124,54,.08), rgba(83,124,54,.03));
}

/* Collapsible day-by-day */
.pkg-itinerary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  counter-reset: day-count;
}
.pkg-day {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pkg-day[open] { border-color: rgba(83, 124, 54, .35); box-shadow: 0 4px 12px rgba(28,38,20,.04); }
.pkg-day__summary {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.pkg-day__summary::-webkit-details-marker { display: none; }
.pkg-day__num {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(83, 124, 54, .12);
  padding: .4rem .55rem;
  border-radius: 999px;
}
.pkg-day__title {
  font-size: 1.02rem;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -.01em;
}
.pkg-day__chevron {
  color: var(--c-text-mute);
  font-size: 1.1rem;
  transition: transform var(--t-fast) var(--ease);
}
.pkg-day[open] .pkg-day__chevron { transform: rotate(180deg); color: var(--c-brand); }
.pkg-day__body {
  padding: 0 1.4rem 1.4rem 1.4rem;
  border-top: 1px dashed var(--c-border);
  margin-top: -1px;
}
.pkg-day__body p {
  margin: 1.1rem 0 0;
  line-height: 1.65;
  color: var(--c-text);
}
/* Leading "Driving Distance | … | Altitude …" facts line, bold on its own line */
.pkg-day__facts {
  display: inline-block;
  margin: 1.1rem 0 .1rem;
  padding: .5rem .85rem;
  background: var(--c-brand-soft);
  border-radius: 8px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--c-brand-dark);
}
.pkg-day__facts strong { font-weight: 800; letter-spacing: .01em; }
.pkg-day__body .overnight {
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand);
}
@media (max-width: 600px) {
  .pkg-day__summary { grid-template-columns: auto 1fr auto; padding: .85rem 1rem; }
  .pkg-day__num { padding: .3rem .5rem; font-size: .65rem; }
}

/* Sidebar polish */
.summary-card__regions { font-size: .9rem; font-weight: 400; line-height: 1.4; }
.summary-card__phone {
  display: block;
  text-align: center;
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--c-text-mute);
  text-decoration: none;
}
.summary-card__phone:hover { color: var(--c-brand); }

/* Same-style tours, listed under the glance card. Thumbnail + title + the
   two numbers that decide it — enough to compare without leaving the page. */
.aside-related {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.6rem;
}
.aside-related h4 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute); margin: 0 0 1rem; font-weight: 700;
}
.aside-related__list { list-style: none; margin: 0; padding: 0; }
.aside-related__list li + li { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--c-border-soft); }
.aside-related__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .45rem 0;
  text-decoration: none;
}
.aside-related__thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
.aside-related__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.aside-related__title {
  font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--c-text);
  transition: color var(--t-fast) var(--ease);
}
.aside-related__item:hover .aside-related__title { color: var(--c-brand); }
.aside-related__meta { font-size: .78rem; color: var(--c-text-mute); }
.aside-related__all {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-brand);
}

/* Bottom CTA */
.pkg-foot-cta {
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-brand);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  text-align: center;
}
.pkg-foot-cta h3 { margin: 0 0 .6rem; letter-spacing: -.015em; }
.pkg-foot-cta p { margin: 0 auto 1.2rem; max-width: 56ch; color: var(--c-text-mute); }

/* ============================================================
   PACKAGE DETAIL — structured WP sections
   ============================================================ */
.pkg-section {
  margin-top: clamp(2.4rem, 4vw, 3.5rem);
}
.pkg-section__title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -.015em;
  margin: 0 0 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--c-brand);
  display: inline-block;
}
.pkg-section--callout {
  background: var(--c-bg-alt);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  border-left: 4px solid var(--c-brand);
}
.pkg-section--callout .pkg-section__title { border-bottom-color: transparent; padding-bottom: 0; }
.pkg-section--brand {
  background: linear-gradient(135deg, rgba(83,124,54,.08), rgba(83,124,54,.03));
  border-left-color: var(--c-brand);
}
.pkg-section--muted {
  background: rgba(28, 38, 20, .03);
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  font-size: .94rem;
}
.pkg-section--muted .pkg-section__title { font-size: 1.1rem; border-bottom-color: var(--c-border); }
.pkg-section--muted .prose { font-size: .94rem; line-height: 1.65; }

/* Trip facts list — render as label-value pairs */
.trip-facts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .trip-facts ul { grid-template-columns: 1fr 1fr; } }
.trip-facts li {
  background: var(--c-bg-alt);
  padding: .8rem 1rem;
  border-left: 3px solid var(--c-brand);
  font-size: .95rem;
}

/* Inclusions: structured h4 sub-buckets */
.inc-exc .prose h4,
.inc-tabs .prose h4 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 1.4rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--c-border);
}
.inc-exc .prose h4:first-child,
.inc-tabs .prose h4:first-child { margin-top: 0; }
.inc-exc .prose ul,
.inc-tabs .prose ul { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.inc-exc .prose li,
.inc-tabs .prose li { line-height: 1.55; }
.inc-exc .prose li i,
.inc-exc .prose li em,
.inc-tabs .prose li i,
.inc-tabs .prose li em {
  display: block;
  color: var(--c-text-mute);
  font-size: .88rem;
  margin-top: .15rem;
  font-style: italic;
}

/* ============================================================
   TREKS — grid of trek cards + detail layout
   ============================================================ */
.trek-grid {
  display: grid;
  gap: clamp(1.4rem, 2vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 700px)  { .trek-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trek-grid { grid-template-columns: repeat(3, 1fr); } }

.trek-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.trek-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(28, 38, 20, .10); border-color: rgba(83, 124, 54, .35); }

.trek-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-bg-alt); }
.trek-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.trek-card:hover .trek-card__media img { transform: scale(1.05); }
.trek-card__difficulty {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(20, 22, 15, .82); color: #fff;
  padding: .4rem .7rem;
}

.trek-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.trek-card__name {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: -.015em;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.trek-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--c-text-mute); }
.trek-card__facts strong { color: var(--c-text); font-weight: 700; }
.trek-card__cta { margin-top: auto; padding-top: .8rem; font-weight: 700; color: var(--c-brand); font-size: .92rem; letter-spacing: -.005em; }

/* Detail layout */
.trek-detail { display: grid; gap: clamp(2rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  /* No `align-items: start` — the aside must stretch to the main column so
     the sticky `.aside-stack` inside it has room to actually stick. */
  .trek-detail { grid-template-columns: 1fr 340px; }
}
.trek-facts {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 1.6rem;
  position: sticky;
  top: 100px;
}
.trek-facts h4 { margin: 0 0 1rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-mute); }
.trek-facts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.trek-facts li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .92rem; border-bottom: 1px dashed var(--c-border); padding-bottom: .55rem; }
.trek-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.trek-facts li span { color: var(--c-text-mute); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trek-facts li strong { color: var(--c-text); font-weight: 700; text-align: right; }

.trek-day__walking {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: .5rem;
}

/* ============================================================
   TOP 10 PAGE — numbered editorial zigzag
   ============================================================ */
.top10-stories { padding-top: clamp(3rem, 5vw, 5rem); }
.top10-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}
.top10-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.top10-row:nth-of-type(even) .top10-row__photo { order: 2; }
.top10-row__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: 0 24px 60px rgba(28, 38, 20, .15);
}
.top10-row__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.top10-row:hover .top10-row__photo img { transform: scale(1.05); }
.top10-row__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.top10-row__index {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .9;
  color: var(--c-brand);
  opacity: .28;
  letter-spacing: -.03em;
}
.top10-row__title {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--c-text);
}
.top10-row__text {
  margin: 0;
  font-size: clamp(1.02rem, 1.2vw, 1.12rem);
  line-height: 1.7;
  color: var(--c-text);
}
@media (max-width: 820px) {
  .top10-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .top10-row:nth-of-type(even) .top10-row__photo { order: 0; }
}

/* ============================================================
   TESTIMONIALS PAGE — editorial zigzag rows with big photos
   ============================================================ */
.testimonials-stories { padding-top: clamp(3rem, 5vw, 5rem); }
.testimonial-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}
.testimonial-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.testimonial-row:nth-of-type(even) .testimonial-row__photo { order: 2; }

.testimonial-row__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: 0 24px 60px rgba(28, 38, 20, .15);
}
.testimonial-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.testimonial-row:hover .testimonial-row__photo img { transform: scale(1.05); }
.testimonial-row__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.4rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 22, 15, .82), rgba(20, 22, 15, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
}
.testimonial-row:hover .testimonial-row__caption {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-row__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
}
.testimonial-row__index {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.5rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--c-brand);
  opacity: .35;
  letter-spacing: -.02em;
}
.testimonial-row__quote {
  margin: 0;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.6;
  color: var(--c-text);
  font-weight: 400;
  letter-spacing: -.005em;
  border-left: 3px solid var(--c-brand);
  padding-left: clamp(1rem, 1.4vw, 1.5rem);
}
.testimonial-row__author {
  font-size: .76rem;
  color: var(--c-text-mute);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-border);
}
.testimonial-row__author strong {
  display: block;
  color: var(--c-text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: .2rem;
}

@media (max-width: 820px) {
  .testimonial-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .testimonial-row:nth-of-type(even) .testimonial-row__photo { order: 0; }
  .testimonial-row__caption { opacity: 1; transform: none; }
}

/* ============================================================
   PRIMARY NAV DROPDOWNS
   ============================================================ */
.primary-nav__item { position: relative; }
.primary-nav__item > a {
  display: inline-flex; align-items: center; gap: .25rem;
}
/* The span holds a "▾" text glyph, but Lato renders it too small to see —
   hide the glyph (font-size: 0) and draw a crisp border chevron instead,
   in currentColor so it always matches the link. */
.primary-nav__caret {
  font-size: 0;
  width: 7px; height: 7px;
  margin-top: -4px;                 /* optically centre the point on the text */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);         /* points down */
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.primary-nav__item:hover > a .primary-nav__caret,
.primary-nav__item:focus-within > a .primary-nav__caret,
.primary-nav__item.is-open > a .primary-nav__caret {
  opacity: 1;
  transform: translateY(3px) rotate(225deg);   /* flips to point up */
}

.primary-nav__flyout {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 70;
  min-width: 260px;
  max-width: 360px;
  padding: .5rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--c-border-soft);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.18),
              0 6px 14px -4px rgba(0,0,0,.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear .28s;
}
.primary-nav__item.has-sub:hover > .primary-nav__flyout,
.primary-nav__item.has-sub:focus-within > .primary-nav__flyout,
.primary-nav__item.has-sub.is-open > .primary-nav__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px);
  pointer-events: auto;
  transition: opacity .22s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear 0s;
}
/* bridge the gap so the cursor can travel from parent to flyout */
.primary-nav__item.has-sub::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 16px;
}
.primary-nav__flyout ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}
/* Mega columns grow to their natural height; the page scrolls to reveal
   anything below the viewport (see body:has rules above). */
.primary-nav__flyout--mega ul {
  max-height: none;
  overflow: visible;
}
.primary-nav__flyout a {
  display: block;
  padding: .55rem .75rem;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--c-text);
  border-radius: 6px;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.primary-nav__flyout a:hover {
  background: var(--c-bg-alt);
  color: var(--c-brand);
}
@media (max-width: 1020px) {
  .primary-nav__caret,
  .primary-nav__flyout { display: none; }
}

/* ---- mobile nav nested ---- */
.mobile-nav__group { padding: 0; }
.mobile-nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.mobile-nav__row a {
  flex: 1 1 auto;
  display: block;
}
.mobile-nav__toggle {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font-size: 1.2rem; line-height: 1;
  transition: transform .25s var(--ease),
              background var(--t-fast) var(--ease);
}
.mobile-nav__toggle[aria-expanded="true"] {
  transform: rotate(45deg);
  background: var(--c-bg-alt);
}
.mobile-nav__sub {
  list-style: none; margin: .4rem 0 .4rem .5rem; padding: .2rem 0 .4rem;
  display: flex; flex-direction: column;
  gap: .15rem;
  border-left: 2px solid var(--c-border);
}
/* display:flex above would override the UA's [hidden] rule, leaving every
   sub-list permanently expanded — same guard as .inc-tabs__panel[hidden]. */
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub li a {
  display: block;
  padding: .45rem .9rem;
  font-size: 1rem;
  color: var(--c-text-soft);
}
.mobile-nav__sub li a:hover { color: var(--c-brand); }

/* ---- mega-menu (Journeys) ----
   The panel lives as a body-level sibling of <header> (see main.php) and is
   absolutely positioned against the body. This lets it contribute to the
   document height, so when an item list is long the page itself scrolls
   to reveal the rest — no inner scrollbar. The trigger <li> drives open/close
   via :has() on body. */
.primary-nav__flyout--mega {
  position: fixed;                   /* pin to the header, no scroll math to get stale */
  top: var(--header-h);              /* flush under the full-height header */
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 1.4rem 0;                 /* inner .container handles horizontal insets */
  border-radius: 0 0 16px 16px;
  border-left: 0;
  border-right: 0;
  transform: translateY(-6px);
  z-index: 50;
  transition: top var(--t-med) var(--ease),
              opacity .22s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear .28s;
}
/* When the header shrinks on scroll, the panel follows it flush. */
body:has(.site-header.is-scrolled) .primary-nav__flyout--mega { top: var(--header-h-scrolled); }
/* Open ONLY the panel being interacted with. A blanket
   body:has(.has-mega:hover) .primary-nav__flyout--mega selector opens EVERY
   mega panel at once, so two mega menus (Journeys + Destinations) stack on
   top of each other. Item-hover opening is handled in JS, which adds
   .is-open to the matching panel via data-mega-for; the panel's own
   hover/focus keeps it open across the trigger→panel gap. */
.primary-nav__flyout--mega:hover,
.primary-nav__flyout--mega:focus-within,
.primary-nav__flyout--mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .22s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear 0s;
}
/* Two-pane mega shows one category at a time, so no document-height growth
   is needed — the panel's height is bounded and its panes scroll internally. */
.primary-nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.4rem;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 1180px) {
  .primary-nav__mega-grid { grid-template-columns: repeat(2, 1fr); }
}
.primary-nav__mega-col { min-width: 0; }
.primary-nav__mega-heading {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
  padding: 0 .75rem .35rem;
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: .35rem;
  transition: color var(--t-fast) var(--ease);
}
a.primary-nav__mega-heading:hover { color: var(--c-brand-dark); }
.mobile-nav__sub-heading a { color: inherit; }
.mobile-nav__sub-heading a:hover { color: var(--c-brand-dark); }
.primary-nav__mega-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.primary-nav__mega-col a {
  display: block;
  padding: .45rem .75rem;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--c-text);
  border-radius: 6px;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.primary-nav__mega-col a:hover {
  background: var(--c-bg-alt);
  color: var(--c-brand);
}
.primary-nav__mega-foot {
  margin: .8rem auto 0;
  padding-top: .8rem;
  border-top: 1px solid var(--c-border-soft);
  text-align: right;
  max-width: var(--container);
}
.primary-nav__mega-foot a {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-brand);
}
.primary-nav__mega-foot a:hover { color: var(--c-brand-dark); }

/* mobile sub-headings within the slide-down */
.mobile-nav__sub-heading {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brand);
  padding: .8rem .9rem .3rem;
}
.mobile-nav__sub-foot a {
  display: block;
  padding: .55rem .9rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-brand);
}

/* pkg-group: super-group heading links + sub-section heading */
.pkg-section-head h2 a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.pkg-section-head h2 a:hover {
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.pkg-group__subhead {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 .8rem;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.pkg-group__subhead small {
  font-weight: 600;
  font-size: .82rem;
  color: var(--c-text-mute);
  letter-spacing: 0;
  margin-left: .3rem;
}

/* ============================================================
   TREK STAT STRIP — the six key trek facts under the hero.
   ============================================================ */
.trek-stats {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}
.trek-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: clamp(1.2rem, 2vw, 1.8rem) 0;
  gap: 0;
}
@media (min-width: 700px)  { .trek-stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .trek-stats__grid { grid-template-columns: repeat(6, 1fr); } }

.trek-stat {
  padding: .9rem clamp(.9rem, 1.6vw, 1.4rem);
  border-left: 1px solid var(--c-border);
  min-width: 0;
}
.trek-stat:first-child,
.trek-stats__grid > .trek-stat:nth-child(odd):not(:nth-child(1)) { /* re-evaluated by viewport via :nth-child(...n) below */ }
.trek-stats__grid > .trek-stat:nth-child(2n+1) { border-left: 0; }                                   /* 2-col phones */
@media (min-width: 700px)  {
  .trek-stats__grid > .trek-stat:nth-child(n) { border-left: 1px solid var(--c-border); }
  .trek-stats__grid > .trek-stat:nth-child(3n+1) { border-left: 0; }
}
@media (min-width: 1080px) {
  .trek-stats__grid > .trek-stat:nth-child(n) { border-left: 1px solid var(--c-border); }
  .trek-stats__grid > .trek-stat:nth-child(6n+1) { border-left: 0; }
}

.trek-stat__label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: .4rem;
}
.trek-stat__value {
  display: block;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.05;
  color: var(--c-text);
}
.trek-stat__value small {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-left: .35em;
  vertical-align: .35em;
}
.trek-stat__value--text {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  letter-spacing: -.01em;
  text-transform: capitalize;
}
.trek-stat__sub {
  display: block;
  font-size: .8rem;
  color: var(--c-text-mute);
  margin-top: .3rem;
}

/* ============================================================
   PROSE LEAD — highlight the first paragraph of a tour/trek
   description so the intro reads as a clear hook.
   ============================================================ */
.prose > p:first-of-type {
  font-size: clamp(1.12rem, 1.4vw, 1.32rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--c-text);
  border-left: 3px solid var(--c-brand);
  padding: .15rem 0 .15rem 1.1rem;
  margin-bottom: 1.6rem;
}

/* ============================================================
   TEAM PAGE — founders block + team-member card grid
   ============================================================ */

/* Founders side-by-side */
/* Magazine-style: portrait floats inside the text, copy wraps around it */
.founders-grid {
  max-width: 1080px;
  margin: 0 auto;
}
.founders-grid::after { content: ''; display: block; clear: both; }
.founders-grid__media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 6;
  background: var(--c-bg-alt);
  margin: 0 0 1.4rem;
}
.founders-grid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) {
  .founders-grid__media {
    float: left;
    width: clamp(280px, 36%, 420px);
    margin: .35rem clamp(1.6rem, 3vw, 2.4rem) 1rem 0;
    shape-outside: margin-box;
  }
}
.founders-grid__body h2 {
  margin: .35rem 0 1rem;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 900; letter-spacing: -.02em;
}
.founders-grid__body .prose { max-width: none; }
.founders-grid__body .prose p:first-of-type { /* override the global .prose lead, lighter here */
  border-left: 0;
  padding: 0;
  font-weight: 400;
}
.founders-grid__body .prose ul {
  list-style: none; padding: 0;
}
.founders-grid__body .prose li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .8rem;
  line-height: 1.6;
}
.founders-grid__body .prose li::before {
  content: '';
  position: absolute; left: 0; top: .75em;
  width: .7rem; height: 2px;
  background: var(--c-brand);
}

/* Team card grid */
/* ============================================================
   TEAM MOSAIC  (/the-team-ideal-travel-creations)
   Four independently stacked columns of portrait tiles, alternate
   columns dropped lower than their neighbours, each tile carrying a
   white name/role pill over the foot of its photograph. The tiles
   fade and rise in one by one on scroll — see [data-team-tile] in
   site.js. Below 1000px the columns become `display: contents` so
   the tiles reflow into a plain two-up (then one-up) grid in source
   order, and the vertical offsets stop applying.
   ============================================================ */
/* The masthead's "meet all of us" link lands here, so clear the shrunk header. */
.team-block { scroll-margin-top: calc(var(--header-h-scrolled) + 1rem); }

.team-mosaic {
  --team-gap: clamp(.7rem, 1.5vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--team-gap);
  align-items: start;
}
@media (min-width: 560px)  { .team-mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team-mosaic { grid-template-columns: repeat(4, 1fr); } }

.team-mosaic__col { display: contents; }
@media (min-width: 1000px) {
  .team-mosaic__col {
    display: grid;
    gap: var(--team-gap);
    align-content: start;
  }
  /* The stagger: every other column rides lower, so no two tiles in
     neighbouring columns share a top edge. */
  .team-mosaic__col:nth-child(even) { margin-top: clamp(2.5rem, 6vw, 5.5rem); }
}

.team-tile {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.team-tile:focus { outline: none; }
.team-tile:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; border-radius: 20px; }

.team-tile__media {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  background: var(--c-bg-alt);
  display: grid;
  place-items: center;
}
/* The picture wrapper is a grid item here (blockified), so it must be
   sized explicitly for the img's percentage height to reach the 4:5 area
   — same pattern as .dest-gallery__item picture. */
.team-tile__media picture {
  width: 100%; height: 100%;
}
.team-tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sources are landscape stills, so the crop leans to the upper
     middle where the faces sit rather than dead centre. */
  object-position: center 28%;
  transition: transform 1.2s var(--ease);
}
.team-tile:hover .team-tile__media img,
.team-tile:focus-visible .team-tile__media img { transform: scale(1.05); }

/* Stand-in for a member we have no photograph of yet. */
.team-tile__initials {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-brand);
  opacity: .45;
}

.team-tile__pill {
  grid-area: 1 / 1;
  /* Positioning context for the capsule once site.js measures it. */
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  margin: clamp(.5rem, 1vw, .8rem);
  max-width: calc(100% - clamp(1rem, 2vw, 1.6rem));
  display: flex;
  align-items: center;
  gap: .1rem;
  padding: .28rem;
  background: var(--c-white);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(63, 94, 41, .22);
  transition: transform var(--t-med) var(--ease);
}
.team-tile:hover .team-tile__pill { transform: translateY(-2px); }
.team-tile__name {
  flex: none;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: .38rem .85rem;
  border-radius: 999px;
  background: var(--c-brand);
  color: var(--c-white);
  font-size: clamp(.8rem, .95vw, .92rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
.team-tile__role {
  padding: .3rem .6rem .3rem .5rem;
  font-size: clamp(.72rem, .85vw, .84rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
}

/* The two labels share one cell inside the capsule: the first name at rest,
   the full name once the capsule has slid open. The full name stays in the
   DOM and out of `display: none` throughout, so screen readers always
   announce it; the first name is decorative (aria-hidden in the template). */
.team-tile__first,
.team-tile__whole {
  grid-area: 1 / 1;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.team-tile__whole { opacity: 0; transform: translateX(-.35em); }

/* Measured mode (site.js sets the widths, so the slide itself is a plain CSS
   transition). The capsule leaves the flex flow and floats over the role,
   which lets it slide across and cover the title instead of pushing it
   sideways. Anywhere on the tile opens it — the photograph as much as the
   pill — so the full name arrives with the biography. --pill-w-open is never
   less than --pill-w: a pill that shrank under the cursor would lose the
   hover and flip back and forth. */
.team-tile__pill.is-measured {
  /* Stays a flex row (the capsule is out of flow, so the title is its only
     item): a single-line title then sits on the capsule's centre line instead
     of riding at the top of the pill. */
  align-items: center;
  /* Both dimensions pinned so the box can't change under the cursor. */
  width: var(--pill-w);
  height: var(--pill-h);
  transition: width var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.team-tile__pill.is-measured .team-tile__name {
  position: absolute;
  left: .28rem;
  top: 50%;
  z-index: 1;
  width: var(--cap-w);
  height: var(--cap-h);
  margin-top: calc(var(--cap-h) / -2);
  transition: width var(--t-med) var(--ease),
              height var(--t-med) var(--ease),
              margin-top var(--t-med) var(--ease);
}
/* The margin clears the capsule floating over the pill's left end. It has to
   be a block box for that to hold on every line — margin-left on an inline
   span only indents its first, which left a wrapped title's second line
   sitting under the capsule. Being a flex item blockifies it. */
.team-tile__pill.is-measured .team-tile__role {
  margin-left: calc(var(--cap-w) + .12rem);
}

.team-tile:hover .team-tile__pill.is-measured,
.team-tile:focus-visible .team-tile__pill.is-measured { width: var(--pill-w-open); }
.team-tile:hover .team-tile__pill.is-measured .team-tile__name,
.team-tile:focus-visible .team-tile__pill.is-measured .team-tile__name {
  /* min() so a name long enough for max-width to cap the pill can't push the
     capsule out past the white frame. */
  width: min(var(--cap-w-open), 100% - .56rem);
  height: var(--cap-h-open);
  margin-top: calc(var(--cap-h-open) / -2);
}
.team-tile:hover .team-tile__pill.is-measured .team-tile__first,
.team-tile:focus-visible .team-tile__pill.is-measured .team-tile__first {
  opacity: 0;
  transform: translateX(.35em);
}
.team-tile:hover .team-tile__pill.is-measured .team-tile__whole,
.team-tile:focus-visible .team-tile__pill.is-measured .team-tile__whole {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .team-tile__pill.is-measured,
  .team-tile__pill.is-measured .team-tile__name,
  .team-tile__first,
  .team-tile__whole { transition: none; }
}

/* The biography: an overlay that fades up on hover or keyboard focus
   where there is a pointer, plain copy under the photograph where
   there isn't (touch has no hover to reveal it with). */
.team-tile__bio {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--c-text-soft);
  padding: .7rem .2rem 0;
}
@media (hover: hover) and (min-width: 560px) {
  .team-tile__bio {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: stretch;
    margin: 0;
    padding: 1.1rem 1.1rem 3.4rem;
    border-radius: clamp(16px, 2vw, 26px);
    /* Brand green, deepening toward the foot so the white pill still reads
       against it. Kept as rgba of #537C36 / #3F5E29 because a gradient
       needs the alpha the tokens don't carry. */
    background: linear-gradient(to top, rgba(63, 94, 41, .97) 45%, rgba(83, 124, 54, .9));
    color: rgba(250, 247, 242, .95);
    font-size: clamp(.74rem, .82vw, .82rem);
    line-height: 1.5;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  .team-tile:hover .team-tile__bio,
  .team-tile:focus-visible .team-tile__bio,
  .team-tile:focus-within .team-tile__bio {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   TEAM MASTHEAD — the team page deliberately opens on type and
   faces rather than a photo hero: one big photograph said less
   about a seventeen-person family than the row of portraits does.
   Same header clearance and sandy ground as .tour-hero.
   ============================================================ */
.team-masthead {
  background: var(--c-bg-alt);
  margin-top: var(--header-h);          /* clear the fixed header */
  padding: clamp(2rem, 4.5vw, 3.4rem) 0 clamp(2.4rem, 5vw, 3.8rem);
  border-bottom: 1px solid var(--c-border);
}
.team-masthead__crumbs {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-mute); margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.team-masthead__crumbs a { color: var(--c-text-mute); text-decoration: none; }
.team-masthead__crumbs a:hover { color: var(--c-brand); }
.team-masthead__crumbs span { margin: 0 .35rem; }

.team-masthead__grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem); grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .team-masthead__grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
}
.team-masthead h1 {
  margin: .35rem 0 0; max-width: 20ch;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.14;
}
.team-masthead .prose { max-width: 58ch; margin-top: 1.1rem; }
.team-masthead .prose p { color: var(--c-text-soft); }

/* Anchor down to the mosaic — the one thing a visitor landing here wants. */
.team-masthead__jump {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.4rem;
  font-weight: 800; font-size: .92rem; color: var(--c-brand-dark); text-decoration: none;
  border-bottom: 2px solid rgba(83,124,54,.28); padding-bottom: .15rem;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.team-masthead__jump::after { content: '↓'; transition: transform var(--t-fast); }
.team-masthead__jump:hover { color: var(--c-brand); border-color: var(--c-brand); }
.team-masthead__jump:hover::after { transform: translateY(2px); }

/* Overlapping portrait row. Decorative — every face is named in the mosaic
   below, so the list is aria-hidden and the images carry empty alt. */
.team-masthead__faces {
  display: flex; flex-wrap: wrap; list-style: none;
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); padding: 0 0 0 .8rem;
}
.team-masthead__face {
  width: clamp(48px, 6.5vw, 68px); aspect-ratio: 1;
  margin-left: -.8rem; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--c-white); background: var(--c-border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
.team-masthead__face:hover { transform: translateY(-4px); z-index: 1; }
.team-masthead__face img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 28%;   /* the source crops are
      landscape stills, so bias the circle towards the face, not the chest */
}
.team-masthead__face--more {
  display: grid; place-items: center;
  background: var(--c-brand); color: #fff;
  font-weight: 800; font-size: .9rem;
}

.team-masthead__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
.team-masthead__stats > div { background: var(--c-white); padding: .95rem 1.1rem; }
.team-masthead__stats dt {
  margin: 0 0 .2rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-mute);
}
.team-masthead__stats dd {
  margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800; line-height: 1.2; color: var(--c-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .team-masthead__crumbs { animation: hero-rise .8s var(--ease) both .05s; }
  .team-masthead h1      { animation: hero-rise .8s var(--ease) both .18s; }
  .team-masthead .prose  { animation: hero-rise .8s var(--ease) both .30s; }
  .team-masthead__jump   { animation: hero-rise .8s var(--ease) both .42s; }
  .team-masthead__aside  { animation: hero-rise .8s var(--ease) both .34s; }
}

/* ============================================================
   INLINE BOOKING CARD — the trek sidebar, below the trip-facts
   panel, and the body of the package pages' enquiry modal. On trek
   pages the .aside-stack is a normal in-flow column that scrolls
   with the page; the package sidebar sticks (see below).
   ============================================================ */

/* Wrapper that holds the facts panel + whatever sits below it */
.aside-stack {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* The stack itself does the sticking, so its cards stay in flow. */
.aside-stack .summary-card,
.aside-stack .trek-facts { position: static; top: auto; }

/* Package sidebar rides along with the reader, parked just under the sticky
   sub-nav — so it clears the same two bars .pkg-subnav accounts for. The stack
   (glance card + related tours) runs taller than the viewport, so it carries
   its own scroll; without that, its lower half would sit below the fold for
   as long as it stays pinned. Cost of the inner scroll: a wheel gesture that
   starts over the sidebar stays latched to it, as in any nested scroller. */
@media (min-width: 1000px) {
  .pkg-detail__aside .aside-stack {
    /* --pkg-subnav-h: the jump-nav bar's own height; +1rem of air below it. */
    --pkg-subnav-h: 3.4rem;
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--pkg-subnav-h) + 1rem);
    max-height: calc(100vh - var(--header-h-scrolled) - var(--pkg-subnav-h) - 2.2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    /* Track the header sliding in and out, the way .pkg-subnav does. */
    transition: top .45s var(--ease), max-height .45s var(--ease);
  }
  /* Header auto-hides on scroll-down — then only the sub-nav is above us. */
  body:has(.site-header.is-hidden) .pkg-detail__aside .aside-stack {
    top: calc(var(--pkg-subnav-h) + 1rem);
    max-height: calc(100vh - var(--pkg-subnav-h) - 2.2rem);
  }
}

@media (max-width: 999px) {
  .aside-stack {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.book-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.4rem;
  position: relative;
}
.book-card__thanks {
  background: var(--c-brand-soft);
  border: 1px solid rgba(83,124,54,.25);
  border-radius: 8px;
  padding: .7rem .9rem;
  margin-bottom: .9rem;
  font-size: .9rem;
  color: var(--c-brand-dark);
  display: flex; flex-direction: column;
  gap: .15rem;
}
.book-card__thanks strong { color: var(--c-brand-dark); font-weight: 800; }
.book-card__thanks span   { color: var(--c-text-soft); font-size: .82rem; }

.book-card__head { margin-bottom: 1rem; }
.book-card__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.book-card__title {
  margin: .25rem 0 .35rem;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--c-text);
}
.book-card__lede {
  font-size: .85rem;
  color: var(--c-text-soft);
  margin: 0;
  line-height: 1.45;
}

.book-card__form { display: flex; flex-direction: column; gap: .7rem; }
.book-card__field { display: flex; flex-direction: column; gap: .25rem; }
.book-card__field span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-soft);
}
.book-card__field input,
.book-card__field textarea {
  font: inherit;
  width: 100%;
  padding: .55rem .7rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.book-card__field input:focus,
.book-card__field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(83,124,54,.16);
}
.book-card__field textarea { resize: vertical; min-height: 80px; }
.book-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.book-card__submit { margin-top: .35rem; }
.book-card__fine {
  font-size: .72rem;
  color: var(--c-text-mute);
  text-align: center;
  margin: .4rem 0 0;
}
.book-card__fine a { text-decoration: underline; }

/* ============================================================
   Enquiry modal — the sidebar booking card on demand, opened by the
   "Enquire" CTA in the sticky sub-nav (see partials/enquiry-modal.php).
   Native <dialog>: the panel is the surface, so the card inside drops its
   own border and padding.
   ============================================================ */
body.enquiry-open { overflow: hidden; }

.enquiry-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: transparent;
  overflow: hidden;               /* the panel body scrolls, not the dialog */
  display: none;
  /* Flex, not grid: the panel's max-height only resolves against a definite
     container height, which an auto-sized grid row doesn't give it. */
  align-items: center;
  justify-content: center;
}
.enquiry-modal[open] { display: flex; }
.enquiry-modal::backdrop {
  background: rgba(43, 37, 32, .55);
  backdrop-filter: blur(3px);
  animation: enquiryFade var(--t-med) var(--ease);
}

.enquiry-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(30rem, 100%);
  max-height: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: enquiryRise var(--t-med) var(--ease);
}
.enquiry-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem;
}

.enquiry-modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-text-soft);
  /* Matches the panel so scrolled content passes behind it cleanly. */
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.enquiry-modal__close:hover { color: var(--c-text); background: var(--c-bg-alt); }
.enquiry-modal__close:focus-visible {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(83,124,54,.16);
}

/* The panel already supplies the card surface. */
.book-card--modal { background: transparent; border: 0; padding: 0; }
.book-card--modal .book-card__head { padding-right: 2rem; }

@keyframes enquiryFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes enquiryRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Below 560px it reads as a bottom sheet — thumb-reachable, and the page
   stays visible above it. */
@media (max-width: 560px) {
  .enquiry-modal { padding: 0; align-items: flex-end; }
  .enquiry-modal__panel {
    width: 100%;
    max-height: 92%;
    border-radius: var(--r-md) var(--r-md) 0 0;
    border-bottom: 0;
  }
  .enquiry-modal__body {
    padding: 1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .enquiry-modal::backdrop,
  .enquiry-modal__panel { animation: none; }
}

/* ============================================================
   Related-content band (destinations / activities → supporting pages)
   ============================================================ */
.related-heading {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  margin: .5rem 0 0;
}
.related-intro {
  margin: .7rem 0 0;
  max-width: 46ch;
  color: var(--c-text-soft);
  font-size: .98rem;
  line-height: 1.6;
}
.link-cards {
  margin-top: 1.8rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-brand-soft);
}
.link-card__title {
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  color: var(--c-ink);
}
.link-card__desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--c-text-soft);
}
.link-card__cta {
  margin-top: auto;
  padding-top: .3rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.link-card__cta span { transition: transform var(--t-fast) var(--ease); }
.link-card:hover .link-card__cta span { transform: translateX(4px); }

/* ============================================================
   Journeys two-pane mega menu: category rail (sub-menu) + item pane
   ============================================================ */
.mega2 {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
.mega2__cats {
  list-style: none; margin: 0; padding: 0 1.2rem 0 0;
  border-right: 1px solid var(--c-border-soft);
}
.mega2__cat,
.mega2__all {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: var(--c-text); font-weight: 600; font-size: .95rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mega2__cat-label { flex: 1 1 auto; }
.mega2__cat-caret { opacity: .5; transition: transform var(--t-fast) var(--ease); }
.mega2__cat:hover,
.mega2__cat:focus-visible,
.mega2__cat.is-active {
  background: var(--c-bg-alt); color: var(--c-brand);
}
.mega2__cat.is-active .mega2__cat-caret { transform: translateX(3px); opacity: 1; }
.mega2__all {
  margin-top: .5rem; padding-top: .75rem;
  border-top: 1px solid var(--c-border-soft); border-radius: 0;
  font-weight: 800; color: var(--c-brand);
}

.mega2__panes { position: relative; min-height: 220px; }
.mega2__pane { display: none; }
.mega2__pane.is-active { display: block; animation: mega2In .22s var(--ease) both; }
@keyframes mega2In { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.mega2__pane > ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-auto-flow: column;                    /* fill top-to-bottom, then wrap to a new column */
  grid-template-rows: repeat(8, auto);       /* up to 8 items per column; more items => more columns */
  grid-auto-columns: minmax(190px, 240px);   /* bounded width so a short list doesn't stretch */
  justify-content: start;                    /* left-align columns when they don't fill the width */
  column-gap: 1.4rem;
  row-gap: .05rem;
}
.mega2__pane a {
  display: block; padding: .4rem .55rem; border-radius: 6px;
  font-size: .9rem; line-height: 1.35; color: var(--c-text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mega2__pane a:hover { background: var(--c-bg-alt); color: var(--c-brand); }

@media (max-width: 1024px) {
  /* narrower viewport: taller columns so the grid stays within the width */
  .mega2__pane > ul { grid-template-rows: repeat(12, auto); }
}
@media (max-width: 900px) {
  .mega2 { grid-template-columns: 1fr; }
  .mega2__cats { border-right: 0; border-bottom: 1px solid var(--c-border-soft); padding: 0 0 .5rem; }
}

/* The Experiences pane carries a one-line intro above its links. */
.mega2__intro {
  margin: 0 0 .8rem;
  max-width: 62ch;
  color: var(--c-text-soft);
  font-size: .88rem;
  line-height: 1.5;
}

/* ============================================================
   /contact — split layout: brand info panel + form card
   ============================================================ */
.contact2 { padding-top: calc(var(--header-h) + 2.5rem); }
.contact2__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .contact2__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---- left: branded info panel ---- */
.contact2__aside {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(155deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  box-shadow: var(--shadow-md);
}
/* soft triangle motif echoing the brand mark */
.contact2__aside::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 260px; height: 260px;
  background:
    conic-gradient(from 200deg at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 120deg);
  border-radius: 40px;
  transform: rotate(18deg);
  z-index: -1;
}
.contact2__eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.contact2__title {
  color: #fff;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.1;
  margin: .55rem 0 0;
  max-width: 15ch;
}
.contact2__lede {
  margin: 1rem 0 0;
  max-width: 42ch;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
.contact2__methods {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.15rem;
}
.contact2__methods li { display: flex; align-items: flex-start; gap: .9rem; }
.contact2__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.contact2__icon svg { width: 20px; height: 20px; stroke: #fff; }
.contact2__label {
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: .2rem;
}
.contact2__methods a, .contact2__val {
  color: #fff; font-weight: 700; line-height: 1.4;
}
.contact2__methods a:hover { text-decoration: underline; }
.contact2__wa {
  display: inline-block; margin-left: .5rem;
  font-size: .8rem; font-weight: 700;
  color: rgba(255,255,255,.8);
}
.contact2__promise {
  margin-top: auto; padding-top: 1.6rem;
  font-size: .92rem; line-height: 1.55;
  color: rgba(255,255,255,.8);
}
.contact2__promise strong { color: #fff; }

/* ---- right: form card ---- */
.contact2__panel {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 22px;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  box-shadow: var(--shadow-md);
}
.contact2__panel-title { margin: 0; font-size: 1.5rem; }
.contact2__panel-sub { margin: .3rem 0 1.6rem; color: var(--c-text-mute); font-size: .9rem; }
.contact2__panel .form-success { margin-bottom: 1.4rem; }
.contact2__form { max-width: none; gap: 1.1rem; }
.contact2__form .form-row { gap: 1.1rem; }

/* ============================================================
   EXPERIENCES — hub of four themes, then a page per theme
   ============================================================ */
/* ---- /activities: the hub. Four cards, each led by a photograph. ---- */
.exp-themes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 900px) { .exp-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.exp-theme-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.exp-theme-card:hover,
.exp-theme-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-border);
}
/* The photograph is the point of the card — give it the larger half. */
.exp-theme-card__media {
  display: block;
  overflow: hidden;
  background: var(--c-bg-alt);
  aspect-ratio: 16 / 10;
}
.exp-theme-card__media picture { display: block; height: 100%; }
.exp-theme-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.exp-theme-card:hover .exp-theme-card__media img,
.exp-theme-card:focus-visible .exp-theme-card__media img { transform: scale(1.05); }

.exp-theme-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
.exp-theme-card__count {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-brand);
}
.exp-theme-card__title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -.018em;
  color: var(--c-ink);
}
.exp-theme-card__intro {
  color: var(--c-text-soft);
  font-size: .95rem; line-height: 1.6;
}
/* The experience names, so the card says what is actually inside it. */
.exp-theme-card__items {
  margin-top: .1rem;
  color: var(--c-text-mute);
  font-size: .82rem; line-height: 1.5;
}
.exp-theme-card__cta {
  margin-top: auto; padding-top: .7rem;
  font-size: .88rem; font-weight: 800;
  color: var(--c-brand);
}
.exp-theme-card__cta span { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.exp-theme-card:hover .exp-theme-card__cta span { transform: translateX(4px); }

.exp-hub-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  text-align: center;
}
.exp-hub-cta h3 { margin: 0 0 .4rem; }
.exp-hub-cta p { margin: 0 auto 1.2rem; max-width: 56ch; color: var(--c-text-soft); }

@media (prefers-reduced-motion: reduce) {
  .exp-theme-card,
  .exp-theme-card__media img,
  .exp-theme-card__cta span { transition: none; }
  .exp-theme-card:hover { transform: none; }
  .exp-theme-card:hover .exp-theme-card__media img { transform: none; }
}

/* ---- /experiences/{theme}: the theme page ----
   Full-width alternating bands. No sidebar: the photograph gets a little over
   half the container (~660px at 1280) instead of the ~200px column it had
   beside a rail. Most of the source photographs are 1024px wide, so the band
   is deliberately contained rather than full-bleed — edge-to-edge would
   upscale them. */

/* Sticky jump rail, standing in for the old sidebar's "On this page". */
.exp-rail {
  position: sticky;
  top: var(--header-h-scrolled);
  z-index: 40;
  background: rgba(250, 247, 242, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-border-soft);
  transition: top .45s var(--ease); /* track the header slide in/out */
}
/* Header auto-hides on scroll-down — when it's gone, pin the rail to the very top
   (same pattern as .pkg-subnav / .pkg-filter). */
body:has(.site-header.is-hidden) .exp-rail { top: 0; }
.exp-rail__list {
  list-style: none; margin: 0; padding: .6rem 0;
  display: flex; gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.exp-rail__list::-webkit-scrollbar { display: none; }
.exp-rail__list li { flex: 0 0 auto; }
.exp-rail__list a {
  display: block;
  padding: .4rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  white-space: nowrap;
  font-size: .84rem; font-weight: 600; line-height: 1.3;
  color: var(--c-text-soft);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.exp-rail__list a:hover { color: var(--c-brand); border-color: var(--c-brand); }
/* Set by the scroll spy in site.js. */
.exp-rail__list a.is-current {
  background: var(--c-brand); border-color: var(--c-brand); color: #fff;
}

/* One experience: photograph beside copy, sides alternating. */
.exp-band {
  /* Clears the fixed header AND the sticky rail beneath it. */
  scroll-margin-top: calc(var(--header-h-scrolled) + 3.6rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.exp-band + .exp-band { margin-top: clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 1000px) {
  .exp-band { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  /* Flipped bands put the copy first in the grid but keep source order, so
     the heading still precedes its photograph for a screen reader. */
  .exp-band--flip .exp-band__media { grid-column: 2; grid-row: 1; }
  .exp-band--flip .exp-band__body  { grid-column: 1; grid-row: 1; }
}
/* No hero image (or the photograph is already the page hero) — the copy takes
   the whole row. Cap the *running text* rather than the container, so prose
   keeps a readable measure while a table or figure can still use the full band
   width. Capping the container instead squeezed the festival-dates table. */
.exp-band--nomedia { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .exp-band--nomedia { grid-template-columns: 1fr; } }
.exp-band--nomedia .exp-band__body,
.exp-band--nomedia .exp-band__content { max-width: none; }
.exp-band--nomedia .exp-band__sub,
.exp-band--nomedia .exp-band__content > p,
.exp-band--nomedia .exp-band__content > ul,
.exp-band--nomedia .exp-band__content > ol,
.exp-band--nomedia .exp-band__content > blockquote,
.exp-band--nomedia .exp-band__content > h1,
.exp-band--nomedia .exp-band__content > h2,
.exp-band--nomedia .exp-band__content > h3,
.exp-band--nomedia .exp-band__content > h4 { max-width: 75ch; }

.exp-band__media {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-md);
}
.exp-band__media picture { display: block; height: 100%; }
.exp-band__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.exp-band:hover .exp-band__media img { transform: scale(1.04); }

.exp-band__title { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15; }
.exp-band__sub { margin: .5rem 0 0; color: var(--c-text-mute); font-size: .95rem; }
.exp-band__content { max-width: 62ch; font-size: 1rem; margin-top: 1rem; }
.exp-band__content > :first-child { margin-top: 0; }
.exp-band__content > :last-child { margin-bottom: 0; }
/* Page bodies carry their own H1/H2 from the CMS; here the band already has a
   heading, so demote them to body-copy scale. */
.exp-band__content h1, .exp-band__content h2, .exp-band__content h3 {
  font-size: 1.05rem; margin: 1.5rem 0 .5rem;
}

/* Mid-page CTA, so a long theme can be acted on without reaching the foot. */
.exp-inline-cta {
  margin: clamp(3rem, 7vw, 5.5rem) 0;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem;
}
.exp-inline-cta p { margin: 0; max-width: 54ch; color: var(--c-text-soft); font-weight: 600; }

.exp-foot__heading { margin: 0 0 clamp(1.4rem, 3vw, 2rem); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
/* Three across at the foot, against the hub's two. */
@media (min-width: 900px) {
  .exp-themes--foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .exp-band__media img { transition: none; }
  .exp-band:hover .exp-band__media img { transform: none; }
}

/* ============================================================
   /blog/{slug} — article column
   ============================================================ */
/* Wider than the 820px inline cap this replaced. Sized so a photograph can
   render at its true 1024px — 28 of the 29 images across the posts are exactly
   that wide, so a wider column would only upscale them — with the page gutter
   sitting outside that. */
.blog-article { max-width: calc(1024px + 2 * var(--gutter)); }

/* Text and photographs share the full column width. That drops the global
   .prose 70ch measure deliberately: body copy runs ~105 characters per line
   here, past the usual readable band, in exchange for the wider column. */
.blog-article .prose { max-width: none; }

/* Photographs are direct children of the article and now match the column, so
   they simply fill it — no breakout needed. */
.blog-article .prose > img {
  width: 100%;
  height: auto;
  margin: 2.2rem 0;
  border-radius: var(--r-md);
}

/* ============================================================
   DOC LAYOUT — article + sticky section rail (Travel Info)
   ============================================================ */
.doc-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
/* Beside the rail the column is already narrow — let the copy fill it. */
@media (min-width: 900px) { .doc-layout__main .prose { max-width: none; } }

.doc-aside { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .doc-aside { position: sticky; top: calc(var(--header-h-scrolled) + 1rem); } }

.doc-nav { list-style: none; margin: 0; padding: 0; }
.doc-nav a {
  display: block; padding: .5rem 0 .5rem .85rem;
  border-left: 2px solid var(--c-border);
  color: var(--c-text-soft); text-decoration: none; font-size: .93rem; line-height: 1.4;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.doc-nav a:hover { color: var(--c-brand); border-left-color: var(--c-brand); }
/* The page you're on: heavier, brand-coloured, solid rule. */
.doc-nav a.is-current {
  color: var(--c-ink); font-weight: 700;
  border-left-color: var(--c-brand); border-left-width: 3px;
  padding-left: .8rem;
}

/* ============================================================
   ACCORDION — a long guide's topics, opened in place
   (the motorcycle guide; any page body may use it)
   ============================================================ */

/* Sits inside .prose, so it inherits the 70ch measure the copy above it has.
   Full width of that measure rather than the text's own indent: the panels are
   furniture, and stepping them in would read as a nested list. */
.acc { margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .55rem; }

.acc__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  /* Deep-linked from the menu or an old topic URL — clear the fixed header. */
  scroll-margin-top: calc(var(--header-h-scrolled) + 1rem);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.acc__item[open] { border-color: rgba(83, 124, 54, .35); box-shadow: 0 4px 12px rgba(28,38,20,.04); }

.acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  cursor: pointer;
  list-style: none;              /* the disclosure triangle, replaced below */
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover .acc__title { color: var(--c-brand); }
/* Keyboard focus has to be visible on a row with no other affordance. */
.acc__summary:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.acc__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-text);
  transition: color var(--t-fast) var(--ease);
}

/* Chevron drawn from two borders so it needs no glyph or asset. */
.acc__icon {
  flex: none;
  width: .55rem; height: .55rem;
  margin-right: .2rem;
  border-right: 2px solid var(--c-text-mute);
  border-bottom: 2px solid var(--c-text-mute);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.acc__item[open] .acc__icon { transform: rotate(-135deg); border-color: var(--c-brand); }

.acc__body {
  padding: 0 1.2rem 1.2rem;
  border-top: 1px dashed var(--c-border);
  margin-top: -1px;
}
/* First child sets its own top gap so the dashed rule doesn't crowd it. */
.acc__body > :first-child { margin-top: 1.1rem; }
.acc__body > :last-child { margin-bottom: 0; }
.acc__body h4 {
  margin: 1.6rem 0 .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.acc__body p { margin: 0 0 1rem; line-height: 1.7; }
.acc__body ul { margin: 0 0 1rem; }
.acc__body li { margin: .35rem 0; line-height: 1.65; }

/* Landing on #an-accordion from the menu or a redirect: hold the highlight
   long enough to say "this is the one", then let it go. */
.acc__item:target { border-color: var(--c-brand); }
@media (prefers-reduced-motion: no-preference) {
  .acc__item:target { animation: acc-flash 1.8s var(--ease) 1; }
}
@keyframes acc-flash {
  0%, 40% { box-shadow: 0 0 0 3px var(--c-brand-soft); }
  100%    { box-shadow: 0 4px 12px rgba(28,38,20,.04); }
}

/* ============================================================
   PACKAGE DETAIL — effort scale, day stats, getting-there,
   guest reviews
   ============================================================ */

/* "How demanding is it?" */
.pkg-effort {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding: 1.3rem 1.5rem;
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
}
.pkg-effort__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pkg-effort__title { margin: 0; font-size: 1.05rem; }
.pkg-effort__label { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brand); }
.pkg-scale { list-style: none; display: flex; gap: .4rem; margin: .9rem 0 0; padding: 0; }
.pkg-scale__step { height: 6px; flex: 1; border-radius: 999px; background: var(--c-border); }
.pkg-scale__step.is-on { background: var(--c-brand); }
.pkg-effort__note { margin: .85rem 0 0; color: var(--c-text-soft); font-size: .94rem; line-height: 1.6; }

/* Per-day logistics chips, between the day summary and its prose */
.pkg-daystats {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0; padding: .9rem 0 0 var(--pkg-day-indent, 0);
}
.pkg-daystats__item {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .3rem .7rem;
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: 999px; font-size: .82rem; line-height: 1.3;
}
.pkg-daystats__value { font-weight: 800; color: var(--c-ink); }
.pkg-daystats__note { color: var(--c-text-mute); }
/* Trek days read differently from driving days — brand tint marks them. */
.pkg-daystats__item--trek,
.pkg-daystats__item--ascent,
.pkg-daystats__item--descent { border-color: var(--c-brand); }
.pkg-daystats__item--ascent .pkg-daystats__value,
.pkg-daystats__item--descent .pkg-daystats__value,
.pkg-daystats__item--trek .pkg-daystats__value { color: var(--c-brand); }

/* Getting there & when */
.pkg-practical { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .pkg-practical { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pkg-practical__title { margin: 0 0 .9rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mute); }
.pkg-keyvals { margin: 0; display: grid; gap: .7rem; }
.pkg-keyvals div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--c-border); }
.pkg-keyvals div:last-child { border-bottom: 0; padding-bottom: 0; }
.pkg-keyvals dt { margin: 0; color: var(--c-text-mute); font-size: .9rem; white-space: nowrap; }
.pkg-keyvals dd { margin: 0; font-weight: 700; color: var(--c-ink); font-size: .93rem; text-align: right; }
.pkg-practical__note { margin: 1rem 0 0; color: var(--c-text-soft); font-size: .92rem; line-height: 1.6; }
.pkg-practical__note a { color: var(--c-brand); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pkg-practical__note a:hover { text-decoration: underline; }


/* ============================================================
   TOUR HERO — mirrors the reference product page's #overview:
   rounded image carousel left, intro column right, then the
   "What's included?" tiles inside the same section.
   ============================================================ */
.tour-hero {
  background: var(--c-bg-alt);
  margin-top: var(--header-h);        /* clear the fixed header */
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
}
/* Status strip above the breadcrumbs — the confirmation a visitor returns to
   after sending the enquiry modal's form. */
.tour-hero__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  padding: .8rem 1.1rem;
  background: var(--c-white);
  border: 1px solid rgba(83,124,54,.3);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-md);
}
.tour-hero__notice strong { color: var(--c-brand-dark); font-weight: 800; font-size: .95rem; }
.tour-hero__notice span   { color: var(--c-text-soft); font-size: .88rem; }

.tour-hero__crumbs {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-mute); margin-bottom: clamp(.9rem, 2vw, 1.3rem);
}
.tour-hero__crumbs a { color: var(--c-text-mute); text-decoration: none; }
.tour-hero__crumbs a:hover { color: var(--c-brand); }
.tour-hero__crumbs span { margin: 0 .35rem; }

/* Two columns from 1000px, the image a touch wider than the copy. */
.tour-hero__grid { display: grid; gap: clamp(1.4rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .tour-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); } }

/* ── Image carousel ── */
.tour-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-border);
}
.tour-hero__track { display: flex; height: 100%; transition: transform .5s var(--ease); }
.tour-hero__slide { flex: 0 0 100%; margin: 0; height: 100%; }
.tour-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tour-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .88); border: 0; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--c-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tour-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.tour-hero__arrow--prev { left: .8rem; }
.tour-hero__arrow--next { right: .8rem; }
.tour-hero__arrow span { margin-top: -2px; }

/* Dots sit in one dark pill, as on the reference. */
.tour-hero__dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: .8rem;
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .55rem; border-radius: 999px;
  background: rgba(20, 22, 15, .55);
}
.tour-hero__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .5);
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.tour-hero__dot.is-on { background: #fff; width: 18px; border-radius: 999px; }

/* ── Intro column ── */
.tour-hero__intro { display: flex; flex-direction: column; gap: clamp(.7rem, 1.6vw, 1rem); }

.tour-hero__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; }

.tour-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.tour-hero__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .8rem; border-radius: 999px;
  background: var(--c-white); border: 1px solid var(--c-border);
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink);
}
/* Inline difficulty meter inside the last chip. */
.tour-hero__meter {
  display: inline-block; width: 46px; height: 5px; border-radius: 999px;
  background: var(--c-border); overflow: hidden;
}
.tour-hero__meter-fill { display: block; height: 100%; background: var(--c-brand); border-radius: 999px; }

.tour-hero__lede { margin: 0; color: var(--c-text-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; max-width: 60ch; }

/* ── Optional spec sheet under the lede, for heroes on pages with no sidebar
      card to hold one. Carries the price and the way to act on it. ── */
.tour-hero__glance {
  margin-top: .4rem;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--c-border);
  max-width: 60ch;
}
.tour-hero__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem 1.4rem;
  margin: 0;
}
.tour-hero__spec dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-mute);
  margin-bottom: .2rem;
}
.tour-hero__spec dd { margin: 0; font-size: .96rem; font-weight: 700; color: var(--c-text); line-height: 1.4; }

.tour-hero__book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  margin-top: clamp(1rem, 2vw, 1.4rem);
}
.tour-hero__price { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.tour-hero__price-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-mute);
}
.tour-hero__price-value { font-size: 1.25rem; font-weight: 900; color: var(--c-brand); line-height: 1.2; }
.tour-hero__actions { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.tour-hero__cta { padding: .7rem 1.6rem; }
.tour-hero__phone { font-size: .82rem; color: var(--c-text-mute); }
.tour-hero__phone:hover { color: var(--c-brand); }

/* ── "What's included?" tiles ── */
.tour-hero__included { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.tour-hero__included-title {
  margin: 0 0 1.1rem; font-size: .82rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mute);
}
.tour-hero__hl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem clamp(1.2rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .tour-hero__hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tour-hero__hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tour-hero__hl {
  position: relative; padding-left: 1.5rem;
  color: var(--c-text); font-size: .93rem; line-height: 1.5;
}
/* Brand tick rather than a bullet — these are selling points, not a list. */
.tour-hero__hl::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: .52rem; height: .28rem;
  border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand);
  transform: rotate(-45deg);
}


/* Price + CTA on the right of the sticky jump bar */
.pkg-subnav__book { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; margin-left: auto; }
.pkg-subnav__price { color: var(--c-ink); font-weight: 800; font-size: .85rem; white-space: nowrap; }
@media (max-width: 780px) { .pkg-subnav__price { display: none; } }

/* ============================================================
   INCLUDED / NOT INCLUDED — pill toggle
   ============================================================ */
.inc-tabs { margin-top: 2.5rem; }
.inc-tabs__nav {
  position: relative;                 /* containing block for the sliding thumb */
  display: inline-flex; gap: .3rem; margin-bottom: 1.4rem;
  padding: .3rem; border-radius: 999px;
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
}
/* The highlight that slides between pills. Width and offset are set by JS from
   the active pill's box, so it tracks the labels at any font size. */
.inc-tabs__thumb {
  position: absolute; left: 0; top: .3rem;
  height: calc(100% - .6rem); width: 0;
  border-radius: 999px; background: var(--c-brand);
  pointer-events: none; z-index: 0;
}
/* Transition only once JS has placed it, so it doesn't fly in from the left on
   first paint. */
.inc-tabs__nav.is-ready .inc-tabs__thumb {
  transition: transform .42s cubic-bezier(.32, .72, 0, 1),
              width     .42s cubic-bezier(.32, .72, 0, 1);
}
.inc-tabs__pill {
  position: relative; z-index: 1;     /* sit above the thumb */
  appearance: none; border: 0; cursor: pointer;
  padding: .5rem 1.15rem; border-radius: 999px;
  background: transparent; color: var(--c-text-soft);
  font-family: inherit; font-size: .82rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.inc-tabs__pill:hover { color: var(--c-ink); }
.inc-tabs__pill.is-on { color: #fff; }
.inc-tabs__pill.is-on:hover { color: #fff; }
.inc-tabs__pill:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* No JS: there is no thumb to fill in, so the active pill colours itself. */
.inc-tabs__nav:not(.is-ready) .inc-tabs__pill.is-on { background: var(--c-brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .inc-tabs__nav.is-ready .inc-tabs__thumb { transition: none; }
}

.inc-tabs__panel {
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  padding: 1.6rem 1.6rem 1.8rem;
  max-width: none;
}
/* Without JS both panels render; give the second one air. */
/* Only space the panels apart when the one before it is actually on screen —
   i.e. the no-JS case where both render. Without the :not([hidden]) guard the
   second panel keeps this margin once the first is hidden, so "Not included"
   sat 1.2rem lower than "Included" and the gap jumped on every toggle. */
.inc-tabs__panel:not([hidden]) + .inc-tabs__panel { margin-top: 1.2rem; }
.inc-tabs__panel[hidden] { display: none; }
/* The exclusions list has no h4 buckets of its own — keep it readable. */
.inc-tabs .col-exc ul { color: var(--c-text-soft); }

/* ============================================================
   ABOUT US  (/about-us — app/Views/pages/about.php)
   Two blocks the page needs that nothing else on the site had:
   the mission pull-quote band and the office/hours card.
   ============================================================ */
.about-mission__inner {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.about-mission .eyebrow { color: var(--c-brand-light, #9DBE7E); }
.about-mission__quote {
  margin: .9rem 0 0;
  padding: 0;
  border: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-style: italic;
  line-height: 1.5;
  color: #fff;
}
.about-mission__quote p { margin: 0; }

.about-contact {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
@media (min-width: 900px) {
  .about-contact { grid-template-columns: 1.5fr 1fr; }
}
.about-contact__details h2 { margin: .5rem 0 1.2rem; }
.about-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.about-contact__list li {
  display: grid;
  gap: .15rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--c-border);
}
.about-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.about-contact__label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.about-contact__value { color: var(--c-text-soft); line-height: 1.6; }
.about-contact__value a { font-weight: 700; }
.about-contact__address address {
  font-style: normal;
  line-height: 1.7;
  color: var(--c-text-soft);
  margin: 0 0 1.1rem;
}

/* ============================================================
   CREDENTIAL DOCUMENT (tour operator licence, DoT approval letter)
   A scanned certificate is a portrait document, not a photograph: cropping it
   into a landscape hero band showed the paper's margins and none of its text.
   So these pages have no page-hero at all — a compact title block, then the
   scan framed once at its own aspect ratio beside the copy that explains it.
   ============================================================ */
.doc-head {
  margin-top: var(--header-h);          /* clear the fixed header, as .page-hero does */
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 2.75rem);
}
.doc-head__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute); margin-bottom: 1.1rem;
}
.doc-head__crumbs a { color: var(--c-text-mute); }
.doc-head__crumbs a:hover { color: var(--c-brand); }
.doc-head .eyebrow { margin-bottom: .5rem; }
.doc-head h1 { max-width: 20ch; margin-bottom: 0; }
.doc-head__lede { margin-top: 1rem; }

/* Document beside its explanation. One column until there is room for two —
   the scan is tall, so a narrow side column would strand it. */
.doc-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 25rem); }
}

/* The mat. White paper on cream, so the scan's own white page reads as a sheet
   sitting on a surface rather than dissolving into the section background. */
.doc-frame { margin: 0; }
.doc-frame__link {
  position: relative; display: block;
  background: #fff;
  padding: clamp(.75rem, 1.6vw, 1.25rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.doc-frame__link:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.doc-frame__link:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.doc-frame img {
  width: 100%; height: auto;                 /* natural ratio — never cropped */
  max-height: 82vh; object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--c-border-soft);
}
/* Zoom affordance. Always legible on touch, where there is no hover to reveal it. */
.doc-frame__zoom {
  position: absolute; right: clamp(1.25rem, 2.4vw, 1.85rem); bottom: clamp(1.25rem, 2.4vw, 1.85rem);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 999px;
  background: rgba(43,37,32,.86); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.doc-frame__link:hover .doc-frame__zoom,
.doc-frame__link:focus-visible .doc-frame__zoom { opacity: 1; transform: none; }
@media (hover: none) {
  .doc-frame__zoom { opacity: 1; transform: none; }
}
.doc-frame__cap {
  margin-top: .9rem; text-align: center;
  font-size: .82rem; color: var(--c-text-mute); letter-spacing: .01em;
}

.doc-side { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 900px) {
  .doc-side { position: sticky; top: calc(var(--header-h-scrolled) + 1.5rem); }
}
.doc-side__prose { font-size: .97rem; }

.doc-note {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-md);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
}
.doc-note__title { font-size: 1.05rem; font-weight: 900; margin: 0 0 .6rem; letter-spacing: -.01em; }
.doc-note p { margin: 0 0 1.25rem; color: var(--c-text-soft); font-size: .95rem; line-height: 1.6; }

.doc-facts { margin: 0; display: grid; gap: .9rem; }
.doc-facts > div { display: grid; gap: .2rem; padding-top: .9rem; border-top: 1px solid var(--c-border); }
.doc-facts dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute);
}
.doc-facts dd { margin: 0; color: var(--c-text); font-size: .93rem; line-height: 1.55; }
.doc-facts dd a { color: var(--c-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.doc-facts dd a:hover { color: var(--c-brand-dark); }

@media (prefers-reduced-motion: reduce) {
  .doc-frame__link, .doc-frame__zoom { transition: none; }
  .doc-frame__link:hover { transform: none; }
}

/* ============================================================
   OUR SERVICES (pages/services.php)
   Six journey rows in an editorial register, then the practical
   strip — the layout itself says which services shape a trip and
   which ones we simply handle.
   ============================================================ */
.svc-rows { display: grid; gap: clamp(3rem, 8vh, 5.5rem); margin-top: clamp(2rem, 4vh, 3rem); }

.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
.svc-row--flip .svc-row__media { order: 2; }
.svc-row--flip .svc-row__body  { order: 1; }

.svc-row__media {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
}
.svc-row__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.svc-row:hover .svc-row__media img { transform: scale(1.045); }

/* The planner's margin note — the pencil aside above each heading, in the
   same hand as the lightbox captions. Decorative; hidden from readers. */
.svc-note {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1;
  color: var(--c-brand);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: .35rem;
}

.svc-row__body h2 { margin: 0 0 .8rem; }
.svc-row__body p  { color: var(--c-text-soft); margin: 0 0 1.2rem; }

.svc-link {
  font-weight: 700;
  color: var(--c-brand);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .45em;
}
.svc-link:hover { color: var(--c-brand-dark); }
.svc-link__arrow { transition: transform var(--t-fast) var(--ease); }
.svc-link:hover .svc-link__arrow,
.svc-card:hover .svc-link__arrow { transform: translateX(4px); }

/* The practical strip: car, hotels, flights as quiet cards. */
.svc-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.svc-card {
  display: block;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.svc-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.svc-card__body h3 { margin: 0 0 .5rem; }
.svc-card__body p  { color: var(--c-text-soft); font-size: .95rem; margin: 0 0 .9rem; }

@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .svc-row--flip .svc-row__media { order: 0; }   /* photo always leads on mobile */
  .svc-row--flip .svc-row__body  { order: 1; }
}
@media (max-width: 700px) {
  .svc-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row__media img, .svc-link__arrow, .svc-card { transition: none; }
}

/* Hotels-in-Bhutan index: the intro runs the full container width, matching
   the district card grid beneath it (elsewhere .region-intro keeps its 72ch
   reading measure). Both wrappers need uncapping: .region-intro carries 72ch,
   and the .prose body inside re-caps at 70ch with equal specificity later in
   this file — so it must be named here too. */
.page-hotels-in-bhutan .region-intro,
.page-hotels-in-bhutan .region-intro .prose { max-width: none; }

/* Our Services: the intro spans the full container width, matching the
   journey rows and the practical strip below (same double uncap as the
   hotels-in-bhutan index — .region-intro at 72ch, .prose at 70ch). */
.page-our-services .region-intro,
.page-our-services .region-intro .prose { max-width: none; }

/* ---------- click-to-notify toast + "coming soon" district cards ---------- */
.site-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 12px);
  max-width: min(92vw, 34rem);
  background: var(--c-ink); color: #fff;
  padding: .85rem 1.3rem; border-radius: var(--r-md);
  font-size: .92rem; line-height: 1.5; text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  z-index: 300;
}
.site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* A district card without a hotels page yet: same card, rendered as a
   <button> so the click can notify instead of navigating. */
button.region-card--soon {
  padding: 0; margin: 0; font: inherit; text-align: left;
  cursor: pointer; width: 100%;
}
.region-card__cta--soon { color: var(--c-text-mute); }
.region-card--soon .region-card__media img { filter: saturate(.75); }

@media (prefers-reduced-motion: reduce) {
  .site-toast { transition: none; }
}

/* Hero still frame behind (or instead of) the video iframe. */
.hero__video-bg .hero__video-fallback,
.hero__video-bg picture {
  position: absolute; inset: 0;
}
.hero__video-bg picture img,
.hero__video-bg img.hero__video-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The injected iframe layers over the still. */
.hero__video-bg iframe { z-index: 1; }
.hero__video-shield { z-index: 2; }

/* <small> in the footer bottom inherits the row size instead of shrinking
   below the legibility floor on phones. */
.site-footer__bottom small { font-size: inherit; }

/* Mobile drawer sub-links: comfortable thumb targets (≥40px). */
.mobile-nav__sub li a,
.mobile-nav__sub-foot a {
  min-height: 40px;
  display: flex; align-items: center;
}

/* Image::tag() wraps thumbs in <picture>; keep it invisible to the
   aside-related flex layout. */
.aside-related__item picture { display: contents; }

/* Journeys-group header links: comfortable tap targets on touch screens. */
.pkg-section-head__view-all,
.pkg-section-head__title a {
  display: inline-flex; align-items: center;
  min-height: 40px;
}