/* ===========================================================================
   Oloitiko — "Open Plain"
   Layout and type modelled on the owner's reference, timbuktutravel.com:
   white pages, a light high-contrast serif for statements, small wide-tracked
   capitals for section titles, full-bleed photographs carrying one centred
   sentence, tall photo cards in rails. Oloitiko keeps its own identity: the
   zebra mark, forest green as the one full-colour field, burnt clay for every
   action. Loaded after the older stylesheets and overrides them.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  --ink:        #171614;
  --ink-70:     #4B4843;
  --ivory:      #FFFFFF;          /* light text on photos, and the page */
  --ivory-deep: #F7F5F1;
  --sand:       #F4F1EB;          /* the warm stone ground */
  --sand-deep:  #E9E4DA;
  --stone-soft: #F4F1EB;
  --stone:      #DAD4C9;
  --brown-700:  #5E574D;

  --bg:         #FFFFFF;
  --bg-alt:     var(--sand);
  --text-muted: #5E574D;
  --rule:       #E2DDD3;

  --font-display: "Libre Caslon Display", "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tracking-display: 0;
  --tracking-tight:   0;
  --tracking-caps:    .16em;
  --lh-display:       1.2;
  --lh-tight:         1.14;

  /* Reading and interface text one step larger than tokens.css (x1.125);
     headings (--step-2 and up) keep their size. The admin does not load this file. */
  --step--2:  clamp(.781rem, .765rem + .079vw, .844rem);
  --step--1:  clamp(.937rem, .9rem + .18vw, 1.055rem);
  --step-0:   clamp(1.125rem, 1.08rem + .236vw, 1.266rem);
  --step-1:   clamp(1.35rem, 1.271rem + .394vw, 1.582rem);

  --header-h: 4.5rem;
  --radius-card: 6px;
  --shade: linear-gradient(180deg, rgba(10, 14, 11, 0) 38%, rgba(10, 14, 11, .38) 62%, rgba(10, 14, 11, .86) 100%);
}
@media (max-width: 900px) { :root { --header-h: 4rem; } }

body { font-size: 1.195rem; line-height: 1.7; }

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4, .display { font-weight: 400; letter-spacing: 0; }
.display-xl, .display-l, .display-m, .display-s { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.display-xl { font-size: clamp(2.5rem, 1.4rem + 4.3vw, 4.75rem); line-height: 1.16; }
.display-l  { font-size: clamp(2.2rem, 1.35rem + 3.3vw, 4rem);   line-height: 1.18; }
.display-m  { font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.2; }
.display-s  { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem);  line-height: 1.22; }
.heading    { font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); }
.lede { font-size: clamp(1.181rem, 1.125rem + .338vw, 1.35rem); line-height: 1.7; }

/* The section title: small, bold, wide-tracked capitals. It IS the heading —
   never a label stacked over another one. */
.caps-title {
  font-family: var(--font-sans);
  font-size: clamp(1.069rem, .99rem + .281vw, 1.266rem);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.caps-sub {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-70);
  text-wrap: balance;
}
.on-dark .caps-title { color: var(--ivory); }
.on-dark .caps-sub   { color: rgba(255, 255, 255, .82); }

.center-head { text-align: center; max-width: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }

.hero .mark, .photoband .mark, .on-dark .mark { --mark-ink: rgba(180, 86, 43, .8); }

/* --------------------------------------------------------------- buttons */

.btn {
  min-height: 3rem;
  padding: 0 1.5rem;
  border-width: 1.5px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: .878rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.btn--lg { min-height: 3.35rem; padding: 0 1.9rem; }
.btn--sm { min-height: 2.5rem; padding: 0 1.1rem; font-size: .81rem; }
.btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--clay); --btn-fg: #fff; --btn-bd: var(--clay); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .75); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.round-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.round-btn:hover { background: var(--clay); }
.round-btn:disabled { opacity: .28; cursor: default; background: var(--ink); }

/* ---------------------------------------------------------------- header */

.header,
.header--over,
.header--solid {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.header--over::before { display: none; }
.header__inner { gap: var(--sp-5); }
.brand__name { font-size: 1.3rem; }
.brand__sub { letter-spacing: .2em; font-weight: 500; }
.logo-mark { width: 2.1rem; }
.nav { gap: 0; }
.nav__link {
  padding-inline: .95rem;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__link::after { bottom: calc(50% - 1rem); height: 2px; background: var(--clay); }
.header--over .icon-btn:hover, .icon-btn:hover { color: var(--clay); }
.header__cta { min-height: 2.6rem; padding: 0 1.15rem; border-radius: 3px; }
.mega { background: #fff; }

/* ------------------------------------------------------------------ hero */

/* The header is always a solid white bar, so every hero starts beneath it. */
.hero { margin-top: var(--header-h); min-height: min(calc(100svh - var(--header-h)), 52rem); }
.hero__inner { padding-top: var(--sp-9); }
.hero--short { min-height: min(62svh, 36rem); }
.hero--page  { min-height: min(52svh, 32rem); }
.hero::after {
  background: linear-gradient(180deg, rgba(10, 14, 11, .1) 0%, rgba(10, 14, 11, .18) 45%, rgba(10, 14, 11, .72) 100%);
}
.pagehead { padding-top: calc(var(--header-h) + var(--sp-9)); }

/* Homepage hero: one centred statement over the photograph. */
.hero--statement {
  align-items: center;
  text-align: center;
  min-height: min(calc(100svh - var(--header-h)), 50rem);
}
.hero--statement::after {
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(10, 14, 11, .5), rgba(10, 14, 11, 0) 75%),
    linear-gradient(180deg, rgba(10, 14, 11, .2), rgba(10, 14, 11, .3));
}
.hero--statement .hero__inner { padding-block: var(--sp-9); }
.hero--statement .hero__body { max-width: 56rem; margin-inline: auto; }
.hero--statement .hero__title { text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hero--statement .hero__lede { margin-inline: auto; color: rgba(255, 255, 255, .94); max-width: 40rem; }
.hero--statement .hero__actions { justify-content: center; }
.hero__text-link {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3.35rem; padding-inline: .5rem;
  font-size: .878rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.hero__text-link svg { transition: transform var(--dur-base) var(--ease-out); }
.hero__text-link:hover svg { transform: translateX(4px); }

/* The vertical location caption with a pin, set along a photograph's left edge.
   Only ever used where the place in the picture is known. */
.locator {
  position: absolute;
  left: clamp(.9rem, 2vw, 1.6rem);
  bottom: clamp(1.4rem, 4vw, 2.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: .7rem;
  color: #fff;
  font-size: .743rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}
.locator span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.locator svg { flex: none; color: var(--clay-soft); }
@media (max-width: 640px) { .locator { display: none; } }

/* ------------------------------------------------ plan strip (under hero) */

.plan-strip { background: var(--sand); border-bottom: 1px solid var(--rule); }
.plan-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.68fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3.5vw, 2.6rem);
}
.plan-strip__intro { display: flex; align-items: center; gap: 1.1rem; }
.plan-strip__intro p { font-size: clamp(1.148rem, 1.103rem + .281vw, 1.294rem); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* The month select needs room for "I am not sure yet" at the larger text size. */
.plan-strip form { display: grid; grid-template-columns: 8.8rem 8.8rem minmax(15rem, 1fr) max-content; gap: .75rem; align-items: end; }
.plan-strip form .btn { white-space: nowrap; }
.plan-strip .field { margin: 0; }
.plan-strip .field__label { font-size: .765rem; font-weight: 600; letter-spacing: .14em; }
.plan-strip .select, .plan-strip .stepper { background: #fff; }
.plan-strip__note { grid-column: 1 / -1; font-size: .9rem; color: var(--text-muted); }
@media (max-width: 1180px) { .plan-strip__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .plan-strip form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-strip form > .field:nth-child(3), .plan-strip form > .field:nth-child(4) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ intro story */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.intro__media .o-media { border-radius: var(--radius-card); }
.intro__media--low { align-self: end; margin-bottom: -2rem; }
.intro__body { text-align: center; }
.intro__body .display-m { margin-bottom: var(--sp-6); }
.intro__body .prose { margin-inline: auto; text-align: left; }
.intro__points {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem;
  text-align: left;
}
.intro__points strong { display: block; font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.intro__points span { display: block; margin-top: .3rem; font-size: 1.069rem; line-height: 1.6; color: var(--text-muted); }
.intro__actions { margin-top: var(--sp-7); justify-content: center; }
@media (max-width: 1080px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .intro__body { grid-column: 1 / -1; grid-row: 1; }
  .intro__media--low { margin-bottom: 0; }
}
@media (max-width: 560px) { .intro__points { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------- trip card (tcard)
   A tall photograph with the words set in its shaded foot, as on the
   reference. On a pointer device the summary slides up on hover. */

.tcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--green-950);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.tcard .o-media { aspect-ratio: 3 / 4; }
.tcard .o-media img { transition: transform 1.1s var(--ease-out); }
.tcard:hover .o-media img { transform: scale(1.05); }
.tcard::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--shade);
  z-index: 1;
  pointer-events: none;
}
.tcard__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
}
.tcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem);
  line-height: 1.18;
  color: #fff;
  text-wrap: balance;
}
.tcard__route {
  margin-top: .55rem;
  font-size: .765rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.65;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard__meta { margin-top: .6rem; font-size: 1.013rem; color: rgba(255, 255, 255, .92); }
.tcard__meta strong { font-weight: 600; color: #fff; }
.tcard__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.tcard__more > div { overflow: hidden; }
.tcard__text { padding-top: .75rem; font-size: 1.013rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.tcard__cta {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .9rem;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--clay-soft);
  font-size: .81rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .tcard:hover .tcard__more, .tcard:focus-visible .tcard__more { grid-template-rows: 1fr; }
}
.tcard:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

/* ----------------------------------------------------------- trip rail */

.trips {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.trips__intro .display-s { margin-top: .25rem; }
.trips__intro p { margin-top: var(--sp-4); color: var(--text-muted); }
.trips__intro .btn { margin-top: var(--sp-6); }
.trips__nav { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.rail-x {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(16.5rem, 23vw, 21rem);
  gap: clamp(.9rem, 1.4vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .25rem;
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}
.rail-x::-webkit-scrollbar { display: none; }
.rail-x > * { scroll-snap-align: start; }
@media (max-width: 900px) {
  .trips { grid-template-columns: minmax(0, 1fr); }
  .trips__nav { display: none; }
  .rail-x { grid-auto-columns: min(78vw, 20rem); margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); scroll-padding-left: var(--gutter); }
}

/* ------------------------------------------------------------ photo band */

.photoband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 58vh, 38rem);
  padding: var(--section-y) var(--gutter);
  text-align: center;
  color: #fff;
  background: var(--green-950);
}
.photoband__media { position: absolute; inset: 0; z-index: -2; }
.photoband__media .o-media { width: 100%; height: 100%; aspect-ratio: auto; }
.photoband__media img { width: 100%; height: 100%; object-fit: cover; }
.photoband::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 62% 62% at 50% 50%, rgba(10, 14, 11, .64), rgba(10, 14, 11, .24) 82%),
    rgba(10, 14, 11, .14);
}
.photoband__text { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.photoband__body { max-width: 50rem; }
.photoband__title { color: #fff; }
.photoband__text { margin: var(--sp-5) auto 0; max-width: 38rem; color: rgba(255, 255, 255, .92); font-size: clamp(1.125rem, 1.08rem + .338vw, 1.294rem); line-height: 1.7; }
.photoband .cluster { justify-content: center; margin-top: var(--sp-7); }

/* The CTA band shares the photoband's centred statement form. */
.band { justify-items: center; text-align: center; }
.band::before {
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(10, 14, 11, .6), rgba(10, 14, 11, .2) 80%),
    rgba(10, 14, 11, .15);
}
.band > .wrap { display: grid; justify-items: center; }
.band__content { max-width: 50rem; margin-inline: auto; }
.band__lede { margin-inline: auto; max-width: 38rem; }
.band .cluster { justify-content: center; }
@media (max-width: 760px) {
  .band { align-items: center; min-height: clamp(30rem, 80vh, 40rem); }
  .band::before { background: rgba(10, 14, 11, .55); }
}

/* ------------------------------------------------------------- the steps */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.steps__list h3 {
  font-family: var(--font-sans);
  font-size: 1.013rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.steps__list p { margin-top: .45rem; color: var(--ink-70); max-width: 30rem; }
.steps__media .o-media { border-radius: var(--radius-card); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps__media { order: -1; } }

/* ------------------------------------------------------ why band (green) */

.why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
}
.why__icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 1.1rem; color: var(--clay-soft); }
.why h3 {
  font-family: var(--font-sans);
  font-size: .968rem;
  font-weight: 600;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
}
.why p { margin-top: .6rem; font-size: 1.08rem; line-height: 1.68; color: rgba(255, 255, 255, .8); }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .why { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- the team */

.people {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.people__intro p { margin-top: var(--sp-4); color: var(--ink-70); }
.people__intro .btn { margin-top: var(--sp-6); }
.people__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.people__photos .o-media { aspect-ratio: 3 / 4; border-radius: var(--radius-card); }
@media (max-width: 900px) { .people { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .people__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .people__photos > :nth-child(3) { display: none; } }

/* -------------------------------------------------------- be inspired */

.inspire__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.inspire__tab {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  font-size: .81rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.inspire__tab:hover { border-color: var(--clay); color: var(--clay); }
.inspire__tab[aria-selected="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
.inspire__panel[hidden] { display: none; }
.inspire__foot { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: var(--sp-6); }
.inspire .rail-x { margin-left: 0; padding-left: 0; }

/* A destination / experience / style tile: tall photo, serif name. */
.ptile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: #fff;
  text-decoration: none;
  background: var(--green-950);
}
.ptile .o-media { aspect-ratio: 3 / 4; }
.ptile .o-media img { transition: transform 1.1s var(--ease-out); }
.ptile:hover .o-media img { transform: scale(1.05); }
.ptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 11, 0) 55%, rgba(10, 14, 11, .72)); pointer-events: none; }
.ptile__name {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 1.1rem 1.2rem 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .45vw, 1.6rem);
  line-height: 1.2;
  text-align: center;
  color: #fff;
  text-wrap: balance;
}
.ptile:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

/* ----------------------------------------------------------- journal */

.card__title { font-size: clamp(1.3rem, 1.15rem + .45vw, 1.6rem); line-height: 1.24; }
.card .o-media { border-radius: var(--radius-card); }
.card__meta { font-weight: 600; letter-spacing: .14em; }
.card__meta--after { margin-block: .55rem .8rem; }

/* ============================================ safari page (package show) */

.trip-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--header-h);
  min-height: min(calc(100svh - var(--header-h)), 48rem);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--green-950);
}
.trip-hero__media { position: absolute; inset: 0; z-index: -2; }
.trip-hero__media .o-media { width: 100%; height: 100%; aspect-ratio: auto; }
.trip-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.trip-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 11, .15) 0%, rgba(10, 14, 11, .05) 40%, rgba(10, 14, 11, .78) 100%);
}
.trip-hero__inner {
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: var(--sp-9) var(--gutter) clamp(2rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.trip-hero .breadcrumbs, .trip-hero .breadcrumbs a, .trip-hero .breadcrumbs span { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.trip-hero__title { margin-top: var(--sp-4); color: #fff; max-width: 16ch; text-shadow: 0 2px 28px rgba(0, 0, 0, .25); }
.trip-hero__route {
  margin-top: var(--sp-4);
  font-size: .833rem; font-weight: 600; letter-spacing: .18em; line-height: 1.8; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.factcard {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.factcard__top { padding: 1.2rem 1.35rem 1.1rem; }
.factcard__length { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.factcard__length svg { color: var(--clay); flex: none; }
.factcard__price { margin-top: .7rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.factcard__price p { font-size: 1.069rem; color: var(--ink-70); }
.factcard__price strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--ink); margin-inline: .2rem; }
.factcard__price a { font-size: .923rem; color: var(--ink); }
.factcard__tags { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.factcard__tags span {
  padding: .25rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: .743rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-70);
}
.factcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }
.factcard__actions a {
  min-height: 3.2rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0 .75rem;
  font-size: .81rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; text-align: center;
  text-decoration: none;
  background: #fff; color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.factcard__actions a:first-child { background: var(--clay); color: #fff; }
.factcard__actions a:first-child:hover { background: var(--clay-dark); }
.factcard__actions a:last-child:hover { color: var(--clay); }
@media (max-width: 900px) {
  .trip-hero { min-height: auto; }
  .trip-hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: clamp(14rem, 55vw, 20rem); }
}

/* The dark section bar under the hero. */
.pagenav { background: var(--green-950); border-bottom: 0; }
.pagenav__scroll { justify-content: center; gap: 0; }
@media (max-width: 1000px) { .pagenav__scroll { justify-content: flex-start; } }
.pagenav__link {
  padding: 1.05rem 1.1rem .95rem;
  font-size: .81rem; font-weight: 600; letter-spacing: .16em;
  color: rgba(255, 255, 255, .78);
  border-bottom-width: 3px;
}
.pagenav__link:hover { color: #fff; }
.pagenav__link.is-active { color: #fff; border-bottom-color: var(--clay); }

/* Trip facts: a quiet stone row. */
.facts { background: var(--sand); border-block: 0; }
.facts__item { border-right-color: var(--sand-deep); text-align: center; }
.facts__label { font-weight: 600; }
.facts__value { font-size: clamp(1.181rem, 1.125rem + .338vw, 1.406rem); }

/* One reading column for the whole itinerary, with a wide overview row. */
.pkg-layout { display: block; }
.pkg-main { max-width: var(--wrap); margin-inline: auto; }
.pkg-main .section-head__text, .pkg-main .lede { max-width: 48rem; }

/* Highlights carry no order, so no numbers: a clay rule over each one. */
.highlights { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.4rem 2.5rem; }
.highlight { display: block; padding-top: .9rem; border-top: 1.5px solid var(--clay); }
.highlight__num { display: none; }
.highlight__text { font-size: 1.125rem; }
.pkg-main > [id], .pkg-main > div { scroll-margin-top: 9rem; }
.trip-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: var(--wrap);
  margin: 0 auto;
}
.trip-overview--solo { grid-template-columns: minmax(0, 1fr); max-width: 50rem; }
.trip-overview__title { margin-bottom: var(--sp-6); }
.trip-overview .map { position: sticky; top: calc(var(--header-h) + 4.5rem); }
.trip-overview .map__canvas { border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 900px) { .trip-overview { grid-template-columns: minmax(0, 1fr); } .trip-overview .map { position: static; } }

.trip-section { padding-top: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }
.trip-section__title { margin-bottom: var(--sp-6); }

/* Request block: the enquiry form at full width, near the end. */
.trip-request {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.trip-request__intro p { margin-top: var(--sp-4); color: var(--ink-70); }
.trip-request .quote-panel { border-radius: var(--radius-card); overflow: hidden; border: 0; box-shadow: 0 30px 70px -40px rgba(18, 33, 26, .45); }
.trip-request .quote-panel__head { background: var(--green-950); }
.trip-request .quote-panel__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.trip-request .quote-panel__body > .field:first-child,
.trip-request .quote-panel__body > .quote-panel__split,
.trip-request .quote-panel__body > .btn,
.trip-request .quote-panel__body > div[aria-hidden] { grid-column: 1 / -1; }
.trip-request .quote-panel__foot { background: var(--sand); }
@media (max-width: 900px) {
  .trip-request { grid-template-columns: minmax(0, 1fr); }
  .trip-request .quote-panel__body { grid-template-columns: minmax(0, 1fr); }
}

/* The planning bar: fixed to the foot of the screen once the hero is gone. */
.sticky-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  inset: auto 0 0 auto;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.25rem);
  left: auto;
  padding: .6rem;
  background: var(--clay);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5);
  transform: translateY(160%);
  visibility: hidden;
  transition: transform .4s var(--ease-out), visibility 0s linear .4s;
}
.sticky-cta.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.sticky-cta a {
  min-height: 2.9rem;
  padding: 0 1.1rem;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .85);
  font-weight: 600;
  letter-spacing: .14em;
  flex-direction: row;
  gap: .45rem;
}
.sticky-cta a strong { font-family: var(--font-sans); font-weight: 600; font-size: .833rem; letter-spacing: .14em; text-transform: uppercase; }
.sticky-cta a span { font-size: .81rem; opacity: .9; letter-spacing: .04em; text-transform: none; }
.sticky-cta a.is-primary { background: #fff; color: var(--ink); border-color: #fff; }
.sticky-cta a.is-wa { background: transparent; color: #fff; }
.sticky-cta a:hover { background: var(--clay-dark); color: #fff; border-color: #fff; }
.sticky-cta a.is-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 640px) {
  .sticky-cta { left: .5rem; right: .5rem; bottom: .5rem; }
  .sticky-cta a { padding: 0 .5rem; }
  .sticky-cta a span { display: none; }
}
body.has-sticky-cta .wa-float { bottom: 5.5rem; }

/* Listing grids of trip cards. */
.grid-results .grid--3 { gap: clamp(.9rem, 1.6vw, 1.4rem); }

/* Content is visible by default; it only waits for its entrance once the
   script has marked the page (html.js), so a failed script never hides it. */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tcard .o-media img, .ptile .o-media img { transition: none; }
  .tcard:hover .o-media img, .ptile:hover .o-media img { transform: none; }
  .tcard__more { transition: none; }
}

/* ==========================================================================
   ROUND TWO — the rest of the public site in the same grammar
   ========================================================================== */

/* Page header for pages without a photograph: a centred statement on stone. */
.pagehead {
  background: var(--sand);
  text-align: center;
  padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}
.pagehead .measure { margin-inline: auto; max-width: 48rem; }
.pagehead .breadcrumbs ol { justify-content: center; }
.pagehead__title { margin-top: var(--sp-5); }
.pagehead__lede { margin-inline: auto; max-width: 42rem; }
.pagehead + .section--flush-top { padding-top: var(--section-y-tight); }
/* Pages that put a form or two-column layout under the header keep their own
   alignment; only the header itself is centred. */
.pagehead--left { text-align: left; }
.pagehead--left .measure { margin-inline: 0; }
.pagehead--left .breadcrumbs ol { justify-content: flex-start; }

/* Photo hero for inner pages: title at the foot, no fact card. */
.trip-hero--solo .trip-hero__inner { grid-template-columns: minmax(0, 1fr); }
.trip-hero--solo { min-height: min(calc(78svh - var(--header-h)), 40rem); }
.trip-hero__lede { margin-top: var(--sp-4); max-width: 40rem; font-size: clamp(1.148rem, 1.103rem + .338vw, 1.35rem); line-height: 1.65; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.trip-hero .cluster { margin-top: var(--sp-6); }
.trip-hero .locator { bottom: auto; top: clamp(1.4rem, 4vw, 2.5rem); }

/* Destination and style tiles share the tall-photo tile. The small label
   sits under the name, never above it. */
.tile { border-radius: var(--radius-card); color: #fff; }
.tile .o-media { aspect-ratio: 3 / 4; }
.tile .o-media img { transition: transform 1.1s var(--ease-out); }
.tile:hover .o-media img { transform: scale(1.05); }
.tile::after { background: linear-gradient(180deg, rgba(10, 14, 11, 0) 45%, rgba(10, 14, 11, .78)); }
.tile__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 1.25rem 1.35rem; }
.tile__title { order: 1; font-size: clamp(1.3rem, 1.15rem + .45vw, 1.6rem); line-height: 1.2; color: #fff; text-wrap: balance; }
.tile__kicker { order: 2; margin: .45rem 0 0; font-size: .743rem; font-weight: 600; letter-spacing: .18em; color: rgba(255, 255, 255, .85); }
.tile__text { order: 3; margin-top: .6rem; font-size: 1.013rem; color: rgba(255, 255, 255, .88); }
.tile:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tile .o-media img { transition: none; } .tile:hover .o-media img { transform: none; } }

/* Cards: photo with rounded corners, serif title, meta under it. */
.card .o-media img { transition: transform 1.1s var(--ease-out); }
.card:hover .o-media img { transform: scale(1.04); }
.card__meta--after + .card__text { margin-top: 0; }
.card__foot { border-top-color: var(--rule); }
.card__cue { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .card .o-media img { transition: none; } .card:hover .o-media img { transform: none; } }

/* Month tabs in the button grammar. */
.months__tabs { border-bottom: 0; gap: .45rem; padding-bottom: .5rem; }
.months__tab {
  min-width: 3.6rem;
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  font-weight: 600;
  color: var(--ink-70);
}
.months__tab:hover { border-color: var(--clay); color: var(--clay); }
.months__tab[aria-selected="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
.months__panel { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--sand); border-radius: var(--radius-card); }
.fact__label { font-weight: 600; }

/* A quoted note from the guides: a serif statement under a caps title. */
.guide-note { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--sand); border-radius: var(--radius-card); }
.guide-note .caps-title { font-size: .9rem; }
.guide-note__text { margin-top: .75rem; font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem); line-height: 1.35; color: var(--ink); }

/* Side panel used on lodge and experience pages. */
.side-panel { padding: clamp(1.4rem, 2.5vw, 1.9rem); background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: 0 24px 50px -36px rgba(18, 33, 26, .4); }
.side-panel .caps-title { font-size: .9rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { padding-block: .7rem; border-bottom: 1px solid var(--rule); font-size: 1.103rem; }
.side-list li:last-child { border-bottom: 0; }

/* Head row: title on the left, link on the right, no label above. */
.row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.row-head .caps-sub { margin-top: .35rem; }

/* Great Migration year list. */
.year-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-deep); }
.year-list a {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--sand-deep);
  text-decoration: none;
  color: inherit;
}
.year-list__month { font-size: .855rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-dark); }
.year-list__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); line-height: 1.25; color: var(--ink); transition: color var(--dur-fast); }
.year-list__sub { display: block; margin-top: .3rem; font-size: 1.035rem; color: var(--text-muted); }
.year-list svg { color: var(--clay); transition: transform var(--dur-base) var(--ease-out); }
.year-list a:hover .year-list__title { color: var(--clay); }
.year-list a:hover svg { transform: translateX(4px); }
@media (max-width: 640px) { .year-list a { grid-template-columns: minmax(0, 1fr) auto; } .year-list__month { grid-column: 1 / -1; } }

/* Chips (filters, month links) in the button grammar. */
.chip { border: 1.5px solid var(--rule); border-radius: 3px; min-height: 2.5rem; padding: 0 .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .788rem; text-decoration: none; color: var(--ink); }
.chip:hover { border-color: var(--clay); color: var(--clay); }
.chip:has(input:checked) { background: var(--clay); border-color: var(--clay); color: #fff; }

/* Two-column splits read from the top, not centred against each other. */
.split { align-items: start; }

/* Footer in the new type. */
.footer { background: var(--green-950); }
.footer__heading { font-family: var(--font-sans); font-size: .81rem; font-weight: 600; letter-spacing: .18em; color: #fff; }
.footer__contact dt { font-weight: 600; letter-spacing: .16em; }
.footer__list a { font-size: 1.069rem; }
.newsletter__row .btn { white-space: nowrap; }
.footer__bottom { font-size: .9rem; }
.footer__credit { margin-left: .75rem; padding-left: .75rem; border-left: 1px solid currentColor; }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
.footer__credit a:hover { color: var(--clay-soft); }
@media (max-width: 600px) { .footer__credit { display: block; margin: .35rem 0 0; padding: 0; border: 0; } }

/* Search results and the article page. */
.search-group .caps-title { margin-bottom: .75rem; font-size: .9rem; }
.toc__title { font-weight: 600; letter-spacing: .16em; }

/* Fact card as a short definition list (destination pages). */
.factcard__list { display: grid; gap: .85rem; margin: 0; }
.factcard__list div { display: grid; gap: .15rem; }
.factcard__list dt { font-size: .743rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.factcard__list dd { margin: 0; font-family: var(--font-display); font-size: 1.294rem; line-height: 1.3; color: var(--ink); }

.side-panel.prose > :first-child, .side-panel > :first-child { margin-top: 0; }

/* ==========================================================================
   ROUND THREE — listings, forms and the quieter pages
   ========================================================================== */

/* Listings: the filters leave the left rail and become one bar above the
   grid, so the photographs get the width (as on the reference's trip list). */
@media (min-width: 901px) {
  .index-layout { display: block; }
  .index-rail { position: static; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
  .index-rail .filters__row { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
  .index-rail .filters__foot { flex-direction: row; align-items: center; }
  .index-results .grid { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
}
.filters {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: 0 22px 50px -40px rgba(18, 33, 26, .45);
}
.filters .field__label { font-size: .743rem; font-weight: 600; letter-spacing: .15em; }
.filters .select, .filters .input { min-height: 2.9rem; border-color: var(--rule); border-radius: 3px; font-size: 1.069rem; }
.filters__toggles { border-top-color: var(--rule); }
.filters__foot { border-top-color: var(--rule); }
.filters__count strong { font-size: 1.5rem; }
.filters.is-open { border-radius: 0; box-shadow: none; }

/* Lodge cards and itinerary stays: name first. */
.card--stay .card__foot { margin-top: 1rem; }
.card--stay .card__price strong { font-size: 1.181rem; }
.stay { border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.stay__name { font-size: clamp(1.2rem, 1.1rem + .35vw, 1.45rem); }
.stay__label--after { margin: .4rem 0 0; font-weight: 600; color: var(--text-muted); }
.stay__alt { font-size: .956rem; }

/* Itinerary days. */
.day__num { font-weight: 600; letter-spacing: .16em; color: var(--clay-dark); }
.day__title { font-family: var(--font-display); }
.itin__control { font-weight: 600; letter-spacing: .14em; }

/* Forms: one panel language for the planner, contact and quote panels. */
.field__label { font-weight: 600; letter-spacing: .14em; font-size: .765rem; }
.input, .select, .textarea { border-color: var(--rule); border-radius: 3px; }
.form-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px -50px rgba(18, 33, 26, .45);
}

/* Planner. */
.quote__bar { height: 3px; border-radius: 3px; background: var(--sand-deep); }
.quote__steps { font-weight: 600; letter-spacing: .14em; }
.quote__question .display-s { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); }
.choice {
  padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--clay-soft); box-shadow: 0 14px 30px -24px rgba(18, 33, 26, .45); }
.choice:has(input:checked) { border-color: var(--clay); background: var(--clay-wash); }
.choice__label strong { font-weight: 600; }
.quote__nav { border-top-color: var(--rule); }
.quote__back { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .833rem; }
.estimate { border-radius: var(--radius-card); background: var(--green-800); }
.estimate__eyebrow { font-weight: 600; }
.stepper { border-color: var(--rule); border-radius: 3px; }
.stepper input { border-inline-color: var(--rule); }

/* Thank-you, empty states, search. */
.quote-done__mark { border-width: 1.5px; }
.quote-done__ref { border-radius: 3px; font-family: var(--font-sans); font-weight: 600; font-size: 1.238rem; letter-spacing: .14em; }
.empty-state {
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--sand);
  border-radius: var(--radius-card);
  text-align: center;
}
.empty-state__title { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); }
.bg-sand .empty-state { background: #fff; }
.search-result { border-bottom: 1px solid var(--rule); padding-block: 1.1rem; }
.search-result__title { font-size: clamp(1.2rem, 1.1rem + .35vw, 1.45rem); }

/* Team page photographs and review cards. */
.review { border-top-color: var(--rule); }
.review__body { line-height: 1.5; }
.pagination a, .pagination span { border-radius: 3px; }
.pagination [aria-current] { background: var(--clay); border-color: var(--clay); color: #fff; }

/* Filter bar layout: two even rows of four, then chips and the count on one
   line. Desktop only; the phone drawer keeps its stacked form. */
@media (min-width: 901px) {
  .index-rail .filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; }
  .index-rail .filters__close, .index-rail .filters__row { grid-column: 1 / -1; }
  .index-rail .filters__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .index-rail .filters__toggles, .index-rail .filters__foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); align-self: stretch; }
  .index-rail .filters__foot { justify-content: flex-end; gap: 1.25rem; }
  .index-rail .filters__toggles:only-of-type { grid-column: 1; }
}
/* A form whose only toggles are missing still keeps the count on the right. */
.filters .btn:not(.btn--ghost):not(.btn--light) { --btn-bg: var(--clay); --btn-bd: var(--clay); }
.filters .btn:not(.btn--ghost):not(.btn--light):hover { --btn-bg: var(--clay-dark); --btn-bd: var(--clay-dark); }

/* WhatsApp: an outlined action with its own icon, not a third green. */
.btn--whatsapp { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--whatsapp:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.on-dark .btn--whatsapp, .band .btn--whatsapp { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .8); }
@media (min-width: 901px) {
  .index-rail .filters__row { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
  .index-rail .filters__toggles, .index-rail .filters__foot { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   ROUND FOUR — the reference's listing toolbar and filter sheet
   ========================================================================== */

/* A lighter page header for listings: white, and the grid starts sooner. */
.pagehead--plain { background: #fff; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pagehead--plain + .section--flush-top { padding-top: 0; }

/* Toolbar: one filters pill, the live count, and a way back. */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
}
.list-toolbar__filters {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.9rem;
  padding: 0 1.25rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .855rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.list-toolbar__filters:hover { background: var(--ink); color: #fff; }
.list-toolbar__badge {
  min-width: 1.4rem; height: 1.4rem;
  display: inline-grid; place-items: center;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: .788rem; letter-spacing: 0;
}
.list-toolbar__count { font-size: 1.069rem; color: var(--text-muted); }
.list-toolbar__count strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-right: .15rem; }
.list-toolbar__clear { font-size: .923rem; color: var(--ink); }
.list-toolbar:has(.list-toolbar__badge[hidden]) .list-toolbar__clear { display: none; }

/* With JavaScript the filter form is a sheet from the right at every width;
   without it, the form simply stays in the page. */
.index-layout:has([data-filter-panel]) { display: block; }
.index-rail:has([data-filter-panel]) { position: static; margin: 0; }
.js .filters[data-filter-panel] { display: none; }
.js .filters[data-filter-panel].is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: min(27rem, 100vw);
  margin: 0;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 0 0 100vmax rgba(10, 14, 11, .45), -24px 0 60px -30px rgba(0, 0, 0, .5);
  animation: sheet-in .35s var(--ease-out);
}
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .filters[data-filter-panel].is-open { animation: none; } }
.js .filters[data-filter-panel] .filters__close {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  margin: 0 -1.5rem 1.25rem; padding: 1.1rem 1.5rem;
  background: #fff; border-bottom: 1px solid var(--rule);
}
.js .filters[data-filter-panel] .filters__close strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.js .filters[data-filter-panel] .filters__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0; border: 0; }
.js .filters[data-filter-panel] .filters__toggles { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.js .filters[data-filter-panel] .filters__foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: auto -1.5rem 0; padding: 1rem 1.5rem;
  background: #fff; border-top: 1px solid var(--rule);
}
.filters__show { flex: 1; max-width: 16rem; }
.no-js-hide { display: none; }
.js .no-js-hide { display: revert; }
.list-toolbar__badge[hidden] { display: none; }
/* Sheet spacing without negative margins, so nothing is clipped by the
   scroll container or its scrollbar. */
.js .filters[data-filter-panel].is-open { padding: 0; }
.js .filters[data-filter-panel] .filters__close { margin: 0 0 1.25rem; }
.js .filters[data-filter-panel] .filters__row,
.js .filters[data-filter-panel] .filters__toggles { margin-inline: 1.5rem; }
.js .filters[data-filter-panel] .filters__foot { margin: auto 0 0; }
.js .filters[data-filter-panel] .filters__foot { flex-wrap: nowrap; }

/* Footer: a small line icon over each column heading, as on the reference. */
.footer__icon { display: block; margin-bottom: .7rem; color: var(--clay-soft); }
.footer__top { align-items: start; }

/* ==========================================================================
   ROUND FIVE — the journal index, after the reference's blog
   ========================================================================== */

.journal-bar {
  margin-top: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
}
.journal-bar__inner { display: flex; align-items: center; gap: 1.5rem 2rem; min-height: 4.25rem; }
.journal-bar__title { flex: none; font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); line-height: 1.1; }
.journal-bar__tabs { display: flex; gap: .25rem 1.5rem; overflow-x: auto; scrollbar-width: none; margin-inline: auto; }
.journal-bar__tabs::-webkit-scrollbar { display: none; }
.journal-bar__tabs a {
  flex: none;
  padding: 1.45rem 0 1.25rem;
  border-bottom: 3px solid transparent;
  font-size: .81rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-70); text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.journal-bar__tabs a:hover { color: var(--ink); }
.journal-bar__tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--clay); }
.journal-bar__search {
  flex: none;
  display: flex; align-items: center; gap: .5rem;
  height: 2.6rem; width: 13rem;
  padding: 0 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.journal-bar__search input { width: 100%; border: 0; background: transparent; font-size: 1.013rem; outline: none; }
.journal-bar__search:focus-within { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-wash); }
@media (max-width: 1000px) {
  .journal-bar { position: static; }
  .journal-bar__inner { flex-wrap: wrap; padding-block: .9rem 0; }
  .journal-bar__tabs { order: 3; flex-basis: 100%; margin: 0; }
  .journal-bar__search { margin-left: auto; width: 11rem; }
}
.journal-crumbs { padding-top: 1.25rem; }

.journal-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.journal-feature__intro { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); font-size: 1.103rem; color: var(--text-muted); max-width: 30rem; }
.journal-feature__title { transition: color var(--dur-fast); }
.journal-feature:hover .journal-feature__title { color: var(--clay); }
.journal-feature__meta { margin-top: .75rem; font-size: .81rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--clay-dark); }
.journal-feature__excerpt { margin-top: 1rem; color: var(--ink-70); max-width: 32rem; }
.journal-feature__go { margin-top: 1.5rem; }
.journal-feature:hover .journal-feature__go { background: var(--clay); }
.journal-feature__media .o-media { border-radius: var(--radius-card); }
.journal-feature__media img { transition: transform 1.1s var(--ease-out); }
.journal-feature:hover .journal-feature__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .journal-feature:hover .journal-feature__media img { transform: none; } }
@media (max-width: 900px) { .journal-feature { grid-template-columns: minmax(0, 1fr); } .journal-feature__media { order: -1; } }

.journal-section { border-top: 1px solid var(--rule); }
.journal-section__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem clamp(1.75rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.journal-section__intro { color: var(--ink-70); max-width: 42rem; }
@media (max-width: 900px) { .journal-section__head { grid-template-columns: minmax(0, 1fr); } }
.journal-bar__tabs { gap: .25rem 1.15rem; }
.journal-bar__tabs a { font-size: .765rem; letter-spacing: .12em; }
.journal-bar__search { margin-left: auto; width: 12rem; }
.journal-bar__tabs + .journal-bar__search { margin-left: 0; }
@media (max-width: 1000px) {
  /* A soft fade at the right edge says the tabs scroll. */
  .journal-bar__tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (min-width: 1001px) { .journal-bar__search { width: 10rem; } .journal-bar__tabs { gap: .25rem 1rem; } .journal-bar__inner { gap: 1.25rem 1.5rem; } }

/* ==========================================================================
   Homepage story, re-edited: a centred statement, then a photograph pair
   beside the words. No empty third column, nothing under the WhatsApp pill.
   ========================================================================== */
.story2__title { max-width: 22ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.story2__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 72rem;
  margin-inline: auto;
}
.story2__collage { position: relative; padding: 0 clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem) 0; }
.story2__main .o-media { border-radius: var(--radius-card); }
.story2__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  border: clamp(6px, .8vw, 10px) solid #fff;
  border-radius: calc(var(--radius-card) + 4px);
  box-shadow: 0 24px 50px -24px rgba(18, 33, 26, .45);
}
.story2__inset .o-media { border-radius: var(--radius-card); }
.story2__prose p { font-size: clamp(1.181rem, 1.125rem + .281vw, 1.294rem); line-height: 1.75; color: var(--ink); }
.story2__points {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}
.story2__points li { padding-top: .9rem; border-top: 1.5px solid var(--clay); }
.story2__points strong { display: block; font-size: .855rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.story2__points span { display: block; margin-top: .4rem; font-size: 1.069rem; line-height: 1.6; color: var(--text-muted); }
.story2__link { color: var(--ink); min-height: 3rem; }
@media (max-width: 900px) {
  .story2__grid { grid-template-columns: minmax(0, 1fr); }
  .story2__collage { max-width: 30rem; margin-inline: auto; }
}
@media (max-width: 560px) { .story2__points { grid-template-columns: minmax(0, 1fr); } }

/* The highlight under words on light grounds: a thinner, lower stroke that
   reads cleanly when a phrase breaks across two lines. */
.mark { background-size: 100% .2em; background-position: 0 92%; }
.hero .mark, .photoband .mark, .on-dark .mark { background-size: 100% .3em; background-position: 0 88%; }

/* Header: keep every menu label on one line between tablet and wide desktop. */
.nav__link { white-space: nowrap; }
/* Narrow desktops keep the full wordmark ("Oloitiko / Tanzania Safaris"):
   below 1180px the menu button takes over, above it the links tighten. */
@media (max-width: 1400px) and (min-width: 1181px) {
  .nav__link { padding-inline: .5rem; font-size: .788rem; letter-spacing: .08em; }
  .header__inner { gap: .7rem; }
  .header__actions { gap: .4rem; }
  .header__cta { padding: 0 .95rem; }
}
/* The inset sits over the main photograph's lower-left corner, where the
   subject of a landscape shot rarely stands. */
.story2__collage { padding: 0 0 clamp(3rem, 7vw, 5rem) clamp(2.5rem, 7vw, 5.5rem); }
.story2__inset { right: auto; left: 0; }

/* ==========================================================================
   Polish pass (2026-09-17)
   ========================================================================== */

/* The wordmark line is part of the logo on phones too. */
@media (max-width: 420px) {
  .brand__sub { display: block; font-size: .6rem; letter-spacing: .16em; }
}

/* Trip factcard: the primary action gets the room it needs to stay on one line. */
.factcard__actions { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.factcard__actions a { letter-spacing: .1em; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Horizontal rails run to the edge of the screen, not the edge of the text
   column, so a wide monitor never shows a card sliced off mid-air. */
@media (min-width: 901px) {
  .rail-x {
    --rail-bleed: calc(var(--gutter) + max(0px, (100vw - var(--wrap)) / 2));
    margin-right: calc(-1 * var(--rail-bleed));
    padding-right: var(--rail-bleed);
  }
}

/* Lodge cards in a row share one baseline for rates and "View lodge". */
.card--stay { display: flex; flex-direction: column; height: 100%; }
.card--stay .card__text { margin-bottom: 1rem; }
.card--stay .card__foot { margin-top: auto; align-items: flex-end; }

/* Journal bar: the category tabs scroll at every width, so say so with the
   same soft edge the phone layout uses; the search field fits its placeholder. */
.journal-bar__tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  padding-right: 2rem;
}
@media (min-width: 1001px) { .journal-bar__search { width: 12.5rem; } }

/* On a photograph hero the current page is already the headline beneath the
   trail; on phones drop it so the trail stays on one line. */
@media (max-width: 640px) {
  .trip-hero .breadcrumbs li:last-child { display: none; }
}

/* Footer legal links reach the 24px minimum target on desktop too. */
.footer__legal a { display: inline-flex; align-items: center; min-height: 1.6rem; }

/* ==========================================================================
   Trip card labels and overnight route (2026-09-17)
   ========================================================================== */

/* Labels a trip earns from its own data ("Family-friendly", "Safari + Zanzibar"):
   quiet white tabs in the photograph's top corner, above the scrim. */
.tcard__labels {
  position: absolute; top: .85rem; left: .85rem; right: .85rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0; padding: 0; list-style: none;
  pointer-events: none;
}
.tcard__labels li {
  padding: .3rem .55rem .26rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase;
}
/* A route with nights needs a third line before it clamps. */
.tcard__route { -webkit-line-clamp: 3; }

/* Card routes are now sentences of stops and nights: set them in normal case
   so they read quickly and fit. */
.tcard__route { font-size: .95rem; font-weight: 500; letter-spacing: .01em; text-transform: none; line-height: 1.5; }
.tcard__route { -webkit-line-clamp: 4; }

/* ==========================================================================
   Founder's note (2026-09-18): portrait bleeding to the left edge, a signed
   letter beside it on white. Hidden until Settings → Founder's note is filled.
   ========================================================================== */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: #fff;
}
.founder__media { position: relative; min-height: 100%; background: var(--green-950); }
.founder__media .o-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* Noel stands on the right of his photograph beside the vehicle: keep him in frame. */
.founder__media .o-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 35%; }
.founder__letter {
  align-self: center;
  max-width: 40rem;
  padding: var(--section-y) var(--gutter) var(--section-y) clamp(2rem, 5vw, 5rem);
}
.founder__greeting {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.founder__body { margin-top: 1.5rem; }
.founder__body p { color: var(--ink-70); line-height: 1.75; }
.founder__body p + p { margin-top: 1.1rem; }
.founder__signoff {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem);
  line-height: 1.3;
  color: var(--ink);
}
.founder__sign { margin-top: 1.5rem; }
.founder__signature { display: block; width: auto; max-width: 13rem; max-height: 5.5rem; margin-bottom: .5rem; }
.founder__name { font-weight: 600; color: var(--ink); }
.founder__name span {
  display: block; margin-top: .15rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.founder .btn { margin-top: 2rem; }
@media (max-width: 900px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__media { min-height: 0; }
  .founder__media .o-media { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 34rem; }
  .founder__letter { max-width: none; padding: clamp(2.5rem, 8vw, 3.5rem) var(--gutter) var(--section-y-tight); }
}

/* Dark sections switch the --text token; apply it, or CMS paragraphs inside
   them keep the page's ink colour and vanish on the green. */
.on-dark { color: var(--text); }

/* ==========================================================================
   Homepage "Route" layout (2026-09-18), after the owner's :8130 reference.
   Left-set statements, a clickable northern-circuit map, sand and forest
   fields alternating with white. Founder's note untouched.
   ========================================================================== */

/* Section heads: heading left, link or action right. */
.home-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.home-head .display-m { max-width: 22ch; }
.home-head__sub { margin-top: .6rem; max-width: 40rem; color: var(--ink-70); }

/* ---------------------------------------------------------------- hero */
.home-hero {
  position: relative; isolation: isolate;
  margin-top: var(--header-h);
  min-height: min(calc(100svh - var(--header-h)), 52rem);
  display: flex; align-items: flex-end;
  background: var(--green-950); color: #fff; overflow: hidden;
}
.home-hero__bg { position: absolute; inset: 0; z-index: -1; }
.home-hero__bg .o-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 14, 11, .78) 0%, rgba(10, 14, 11, .42) 48%, rgba(10, 14, 11, 0) 78%),
    linear-gradient(0deg, rgba(10, 14, 11, .55) 0%, rgba(10, 14, 11, 0) 45%);
}
.home-hero__inner { padding-block: clamp(3rem, 8vh, 6rem) clamp(3rem, 9vh, 6.5rem); }
.home-hero__title {
  max-width: 13ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 1.5rem + 5.2vw, 6rem); line-height: 1.04;
  color: #fff; text-wrap: balance;
}
.home-hero__lede {
  margin-top: 1.4rem; max-width: 36rem;
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.home-hero__actions { margin-top: 2rem; gap: .75rem; }

/* --------------------------------------------------------------- intro */
.home-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.home-intro__prose { margin-top: 1.5rem; }
.home-intro__prose p { color: var(--ink-70); }
.home-intro__actions { margin-top: 2rem; gap: 1rem 1.75rem; align-items: center; }
.home-intro__media { margin: 0; }
.home-intro__media .o-media { border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 900px) { .home-intro__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- atlas */
.atlas {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--green-950); color: #fff;
  padding-block: var(--section-y);
}
.atlas__photos { position: absolute; inset: 0; z-index: -2; }
.atlas__photo { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-out); }
.atlas__photo.is-on { opacity: 1; }
.atlas__photo .o-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.atlas__photo img { width: 100%; height: 100%; object-fit: cover; }
.atlas::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 14, 11, .9) 0%, rgba(10, 14, 11, .72) 55%, rgba(10, 14, 11, .55) 100%);
}
.atlas__head { max-width: 40rem; }
.atlas__head p { margin-top: 1rem; color: rgba(255, 255, 255, .86); }
.atlas__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.atlas__map {
  position: relative; aspect-ratio: 340 / 220;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-card);
  background: rgba(10, 14, 11, .35);
  backdrop-filter: blur(2px);
}
.atlas__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas__grid line { stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas__route {
  fill: none; stroke: var(--clay-soft); stroke-width: 1.6; stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.atlas__tick {
  position: absolute; font-size: .68rem; font-weight: 500; letter-spacing: .08em;
  color: rgba(255, 255, 255, .5); pointer-events: none;
}
.atlas__tick--lng { bottom: .35rem; transform: translateX(-50%); }
.atlas__tick--lat { left: .5rem; transform: translateY(-50%); }
.atlas__pin {
  position: absolute; display: flex; align-items: center; gap: .45rem;
  transform: translate(-.4rem, -50%);
  padding: .3rem; margin: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font: inherit; white-space: nowrap;
}
.atlas__pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + .4rem), -50%); }
.atlas__dot {
  width: .8rem; height: .8rem; flex: none; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(10, 14, 11, .45);
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.atlas__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); opacity: .85;
}
.atlas__pin:hover .atlas__dot, .atlas__pin.is-on .atlas__dot { background: var(--clay-soft); transform: scale(1.35); }
.atlas__pin.is-on .atlas__label { opacity: 1; }
.atlas__type { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-soft); }
.atlas__name { margin-top: .4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.12; color: #fff; }
.atlas__text { margin-top: .9rem; color: rgba(255, 255, 255, .88); line-height: 1.65; }
.atlas__link { margin-top: 1.1rem; color: #fff; }
.atlas__chips { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; flex-wrap: wrap; gap: .45rem; }
.atlas__chip {
  min-height: 2.4rem; padding: 0 .9rem; border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff;
  font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.atlas__chip:hover { border-color: #fff; }
.atlas__chip[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); }
.atlas__more { margin-top: 1.25rem; color: rgba(255, 255, 255, .86); }
@media (max-width: 900px) {
  .atlas__body { grid-template-columns: minmax(0, 1fr); }
  .atlas__label { font-size: .66rem; }
}
@media (max-width: 520px) { .atlas__tick { display: none; } .atlas__label { display: none; } .atlas__pin.is-on .atlas__label { display: inline; } }
@media (prefers-reduced-motion: reduce) { .atlas__photo { transition: none; } }

/* ------------------------------------------------------- safari styles */
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); }
.style-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); background: var(--green-950); color: #fff; text-decoration: none;
}
.style-tile .o-media img { transition: transform 1.1s var(--ease-out); }
.style-tile:hover .o-media img { transform: scale(1.05); }
.style-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--shade); pointer-events: none; }
.style-tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: .35rem; padding: clamp(1rem, 1.6vw, 1.4rem); }
.style-tile__name { font-family: var(--font-display); font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem); line-height: 1.15; }
.style-tile__text { font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.style-tile__go { margin-top: .35rem; color: var(--clay-soft); transition: transform var(--dur-fast); }
.style-tile:hover .style-tile__go { transform: translateX(4px); }
.style-tile:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
@media (max-width: 1000px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .style-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- things to do */
.exp-bento {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto); gap: clamp(.9rem, 1.6vw, 1.25rem);
}
.exp-bento__item {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); background: var(--green-950); color: #fff; text-decoration: none;
}
.exp-bento__item--big { grid-row: 1 / span 2; }
.exp-bento__item--big .o-media { height: 100%; aspect-ratio: auto; min-height: 100%; }
.exp-bento__item .o-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.exp-bento__item:hover .o-media img { transform: scale(1.05); }
.exp-bento__item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--shade); pointer-events: none; }
.exp-bento__name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.2rem;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.55rem); line-height: 1.2;
}
.exp-bento__item--big .exp-bento__name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); padding: 1.4rem 1.6rem; }
.exp-bento__item:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
@media (max-width: 900px) {
  .exp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-bento__item--big { grid-column: 1 / -1; grid-row: auto; }
  .exp-bento__item--big .o-media { aspect-ratio: 4 / 3; height: auto; }
}

/* ------------------------------------------------------------ why band */
.why2__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.why2__head p { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); color: rgba(255, 255, 255, .82); }
.why2__head .btn { margin-top: 2rem; }
.why2__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 2.75rem); }
.why2__point { padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.why2__point h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.15rem + .4vw, 1.55rem); color: var(--clay-soft); }
.why2__point p { margin-top: .55rem; color: rgba(255, 255, 255, .84); line-height: 1.65; }
@media (max-width: 900px) { .why2__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .why2__points { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------- migration showcase */
.showcase {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(30rem, 72vh, 44rem); display: flex; align-items: center;
  background: var(--green-950); color: #fff;
}
.showcase__media { position: absolute; inset: 0; z-index: -2; }
.showcase__media .o-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.showcase::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 14, 11, .86) 0%, rgba(10, 14, 11, .55) 45%, rgba(10, 14, 11, .05) 80%);
}
.showcase__body { max-width: 34rem; padding-block: var(--section-y-tight); }
.showcase__body p { margin-top: 1.1rem; color: rgba(255, 255, 255, .9); line-height: 1.7; }
.showcase__body .btn { margin-top: 2rem; }
@media (max-width: 760px) { .showcase::after { background: rgba(10, 14, 11, .62); } }

/* ---------------------------------------------------------------- steps */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.process__step { padding-top: 1.25rem; border-top: 1.5px solid var(--ink); }
.process__num { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--clay-dark); }
.process__step h3 { margin-top: .6rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 1.25rem + .6vw, 1.9rem); }
.process__step p { margin-top: .6rem; color: var(--ink-70); line-height: 1.65; }
@media (max-width: 760px) { .process { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ faq */
.home-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.home-faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.home-faq__head p { margin-top: 1rem; color: var(--ink-70); }
.home-faq__head .link-arrow { margin-top: .4rem; }
@media (max-width: 900px) { .home-faq { grid-template-columns: minmax(0, 1fr); } .home-faq__head { position: static; } }

/* ---------------------------------------------------------------- close */
.closer { background: var(--green-950); color: #fff; padding-block: clamp(5rem, 11vw, 9rem); text-align: center; }
.closer__inner { max-width: 48rem; }
.closer__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.2rem); line-height: 1.1; color: #fff; text-wrap: balance; }
.closer__text { margin: 1.25rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, .86); }
.closer__actions { margin-top: 2.25rem; justify-content: center; gap: .75rem; }

/* Owner request (2026-09-18): no highlight bar under words. *Asterisk* words
   in headings now read as plain text everywhere. */
.mark, .hero .mark, .photoband .mark, .on-dark .mark { background: none !important; padding: 0; }

/* Owner request (2026-09-18): taller trip cards in sliding rows. The listing
   grid keeps 3:4. */
.rail-x .tcard .o-media { aspect-ratio: 3 / 5; }