/* --------------------------------------------------------------- 1. fonts
   Bundled and subset to Latin + Latin Extended-A, which covers English,
   French, German, Spanish, Italian and Norwegian including ae, o-slash and
   a-ring. Self-hosted because fonts.googleapis.com is blocked in mainland
   China, a priority market. */

@font-face {
  font-family: "Clerisa Display";
  src: url("/assets/fonts/clerisa-display.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clerisa Display";
  src: url("/assets/fonts/clerisa-display-italic.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Clerisa Sans";
  src: url("/assets/fonts/clerisa-body-400.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clerisa Sans";
  src: url("/assets/fonts/clerisa-body-500.woff") format("woff");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clerisa Sans";
  src: url("/assets/fonts/clerisa-body-700.woff") format("woff");
  font-weight: 700 900; font-style: normal; font-display: swap;
}
/* Simplified Chinese for the /zh/ pages, subset to the characters this site
   actually uses. The unicode-range means a French or German visitor never
   downloads a single byte of it: the browser only fetches the file when a
   character in that range needs rendering. */
@font-face {
  font-family: "Clerisa CJK";
  src: url("/assets/fonts/clerisa-cjk-400.woff") format("woff");
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+FE30-FE4F;
}
@font-face {
  font-family: "Clerisa CJK";
  src: url("/assets/fonts/clerisa-cjk-700.woff") format("woff");
  font-weight: 600 900; font-style: normal; font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+FE30-FE4F;
}

/* --------------------------------------------------------------- 2. tokens */
:root {
  /* Brand - extracted from the supplied logo */
  --gold: #EABA3D;
  --gold-deep: #7E5A15;      /* AA-safe gold for text: 5.8:1 on ivory, 5.1:1 on sand */
  --gold-tint: #F7E6BC;
  --charcoal: #1C1A17;
  --bark: #4A3D28;
  --bark-deep: #322818;
  --savannah: #8A7A5C;
  --ivory: #FCF6E9;
  --sand: #F2E7D2;
  --white: #FFFFFF;

  /* Content-coded accents - never decorative */
  --acacia: #3E5641;         /* conservation, guiding, nature */
  --ocean: #2E6E7E;          /* Zanzibar, diving, marine */
  --sunset: #C25B2E;         /* migration, seasonality */

  /* Semantic */
  --ink: var(--charcoal);
  --ink-2: #554C3B;
  --ink-3: #736548;          /* 5.7:1 on white, 5.29:1 on ivory */
  --ink-invert: var(--ivory);
  --surface: var(--ivory);
  --surface-2: var(--sand);
  --surface-card: var(--white);
  --surface-dark: var(--bark);
  --line: #E0D2B6;
  --line-strong: #C9B48D;
  --error: #A32B1E;
  --success: #2F6B3F;
  --focus: #1B5E8A;

  /* Map palette consumed by the generated SVGs */
  --map-sea: #DCE9EA;
  --map-land: #F3E7CE;
  --map-water: #BFD8DC;
  --map-line: #8A7A5C;
  --map-park: #BCCC9E;
  --map-parkon: #93AC72;
  --map-parkline: #7E8C63;
  --map-ink: #4A3D28;
  --map-ink2: #7A6B50;

  /* Type */
  --font-serif: "Clerisa Display", "Clerisa CJK", Georgia,
    "Times New Roman", serif;
  --font-ui: "Clerisa Sans", "Clerisa CJK", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: clamp(.75rem, .72rem + .12vw, .8125rem);
  --fs-sm: clamp(.875rem, .85rem + .14vw, .9375rem);
  --fs-base: clamp(1rem, .97rem + .16vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.07rem + .28vw, 1.3125rem);
  --fs-xl: clamp(1.4375rem, 1.3rem + .68vw, 1.875rem);
  --fs-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
  --fs-3xl: clamp(1.9375rem, 1.55rem + 1.85vw, 3.25rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);

  /* Space - 8px base */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --header-h: 92px;
  --wrap: 76rem;
  --wrap-narrow: 44rem;
  --radius: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(28, 26, 23, .06), 0 2px 8px rgba(28, 26, 23, .05);
  --shadow-2: 0 2px 6px rgba(28, 26, 23, .08), 0 12px 32px rgba(28, 26, 23, .10);

  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 240ms;
}

/* --------------------------------------------------------------- 3. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.7;
  letter-spacing: 0;
  word-spacing: .055em;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.008em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); max-width: 68ch; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--charcoal); color: var(--ivory);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- 4. layout */
.wrap { width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--s-5), var(--wrap-narrow)); }
.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--dark { background: var(--surface-dark); color: var(--ink-invert); }
.section--sand { background: var(--surface-2); }
.section--dark h2, .section--dark h3 { color: var(--ivory); }
.section--dark p { color: #E8DDC6; }

/* Eyebrow - labels the section's role, always paired with a heading */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px;
  background: var(--gold); flex: none;
}
.section--dark .eyebrow { color: var(--gold); }
.section--dark .eyebrow::before { background: var(--gold); }

.lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 58ch; }
.section--dark .lede { color: #E8DDC6; }

.section-head { margin-bottom: var(--s-7); max-width: 46rem; }
.section-head--split {
  display: grid; gap: var(--s-5); max-width: none;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end; gap: var(--s-8);
  }
}

/* --------------------------------------------------------------- 5. buttons */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--charcoal);
  --btn-bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  /* Padding scales with the viewport so long labels in German, Norwegian and
     French never crowd the edge on a narrow phone. */
  padding: .8em clamp(1rem, .55rem + 2.2vw, 1.6em);
  min-height: 48px;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Gold is never a background for white text - 1.8:1 fails AA.
   Charcoal on gold measures 11.6:1. */
.btn--primary:hover { --btn-bg: var(--gold-deep); --btn-bd: var(--gold-deep); --btn-fg: var(--white); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--charcoal); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--charcoal); --btn-bg: rgba(28,26,23,.04); }
.btn--on-dark { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgba(252,246,233,.5); }
.btn--on-dark:hover { --btn-bg: var(--ivory); --btn-fg: var(--charcoal); --btn-bd: var(--ivory); }
.btn--wa { --btn-bg: #1FA855; --btn-fg: #fff; --btn-bd: #1FA855; }
.btn--wa:hover { --btn-bg: #17833f; --btn-bd: #17833f; }
.btn--lg { padding: .95em clamp(1.1rem, .6rem + 2.6vw, 2em); font-size: var(--fs-base); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--gold); }

/* --------------------------------------------------------------- 6. header */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(252, 246, 233, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header--over {
  background: transparent; border-bottom-color: transparent; color: var(--ivory);
}
.header--over .header__logo { color: var(--ivory); }
.header--over .nav__link { color: var(--ivory); }
.header--over .btn--ghost { --btn-fg: var(--ivory); --btn-bd: rgba(252,246,233,.55); }
.header--over .lang__btn { color: var(--ivory); border-color: rgba(252,246,233,.4); }
.header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--header-h);
}
/* Pages without a hero need the header's height back. */
main { padding-top: var(--header-h); }
body.has-hero main { padding-top: 0; }
.header__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.header__logo img, .header__logo svg { height: 58px; width: auto; }
.header__logo .logo--dark { display: none; }
.header--over .logo--light { display: none; }
.header--over .logo--dark { display: block; }
.header__spacer { flex: 1 1 auto; }

.nav { display: none; }
@media (min-width: 78rem) { .nav { display: flex; align-items: center; gap: var(--s-4); } }
@media (min-width: 88rem) { .nav { gap: var(--s-5); } }
.nav__link {
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  color: var(--ink); padding: var(--s-2) 0; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--gold); transition: right var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: none; border: 0; cursor: pointer;
}
@media (min-width: 78rem) { .burger { display: none; } }
.burger span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  position: relative; transition: background var(--dur) var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px;
  background: currentColor; transition: transform var(--dur) var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* language selector - flag + name, never flag alone */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500;
}
.lang__list {
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  min-width: 13rem; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: var(--s-2);
  list-style: none; margin: 0; display: none; z-index: 120;
}
.lang__list[data-open="true"] { display: block; }
.lang__list a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); text-decoration: none;
  border-radius: var(--radius); font-size: var(--fs-sm); min-height: 44px;
}
.lang__list a:hover { background: var(--sand); }
.lang__flag { font-size: 1.15em; line-height: 1; }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; background: var(--ivory);
  padding: var(--s-5); overflow-y: auto; z-index: 99;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a {
  display: block; padding: var(--s-4) 0; font-family: var(--font-serif);
  font-size: var(--fs-xl); text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------- 7. hero */
.hero { position: relative; min-height: 88svh; display: grid; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
/* Two layers: a vertical lift for the whole frame, and a horizontal wash behind
   the text column only - so the subject on the right stays bright. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(28,26,23,.74) 0%, rgba(28,26,23,.52) 34%,
      rgba(28,26,23,.12) 58%, rgba(28,26,23,0) 72%),
    linear-gradient(to top, rgba(28,26,23,.88) 0%, rgba(28,26,23,.74) 26%,
      rgba(28,26,23,.52) 50%, rgba(28,26,23,.28) 74%, rgba(28,26,23,.42) 100%);
}
@media (max-width: 47.99rem) {
  /* Text runs the full width on phones, so the wash has to as well. */
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(28,26,23,.72) 0%, rgba(28,26,23,.60) 60%,
        rgba(28,26,23,.48) 100%),
      linear-gradient(to top, rgba(28,26,23,.88) 0%, rgba(28,26,23,.70) 40%,
        rgba(28,26,23,.40) 78%, rgba(28,26,23,.50) 100%);
  }
}
.hero__inner {
  align-self: end;
  padding-block: calc(var(--header-h) + var(--s-6)) clamp(3rem, 8vw, 6rem);
  color: var(--ivory);
}
.hero h1 {
  color: var(--ivory); max-width: 15ch; margin-bottom: var(--s-5);
  text-shadow: 0 2px 24px rgba(28, 26, 23, .55);
}
.hero__lede { color: #EFE6D2; font-size: var(--fs-lg); max-width: 44ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);
}
.hero__advisor {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5); color: var(--gold);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid rgba(234,186,61,.45); padding-bottom: 3px;
}
.hero__advisor:hover { border-bottom-color: var(--gold); }

/* the coordinate strip - real geography, not decoration */
.coord {
  font-family: var(--font-ui); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero .coord {
  color: var(--ivory); margin-bottom: var(--s-4);
  text-shadow: 0 1px 10px rgba(28, 26, 23, .85);
}

/* --------------------------------------------------------------- 8. trust strip */
.trust { background: var(--charcoal); color: var(--ivory); }
.trust__list {
  list-style: none; margin: 0; padding: var(--s-5) 0;
  display: grid; gap: var(--s-3) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.trust__list li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); color: #E8DDC6;
}
.trust__list svg { flex: none; color: var(--gold); }

/* --------------------------------------------------------------- 9. mosaic */
.mosaic { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 30rem) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 12rem;
  }
  /* 4-column grid, six tiles: 1 is the hero tile, 4/5/6 pair up so the last
     row fills rather than leaving a hole. */
  .mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:nth-child(4) { grid-column: span 2; }
  .mosaic__item:nth-child(5) { grid-column: span 2; }
  .mosaic__item:nth-child(6) { grid-column: span 2; }
}
.mosaic__item {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 13.5rem; text-decoration: none; color: var(--ivory);
  display: flex; align-items: flex-end; isolation: isolate;
}
@media (min-width: 52rem) { .mosaic__item { min-height: 0; } }
.mosaic__item img, .mosaic__item video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 600ms var(--ease);
}
.mosaic__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(28,26,23,.90) 0%,
    rgba(28,26,23,.62) 34%, rgba(28,26,23,.18) 68%, rgba(28,26,23,.06) 100%);
}
.mosaic__item:hover img, .mosaic__item:hover video { transform: scale(1.04); }
.mosaic__body {
  display: block; width: 100%; min-width: 0; flex: 1 1 auto;
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.mosaic__title {
  display: block; font-family: var(--font-serif); font-size: var(--fs-lg);
  font-weight: 600; line-height: 1.2; margin: 0 0 .3em;
  text-shadow: 0 1px 12px rgba(28, 26, 23, .6);
}
.mosaic__note {
  display: block; font-size: var(--fs-xs); line-height: 1.5;
  color: #E2DAC8; margin: 0; overflow-wrap: break-word;
  text-shadow: 0 1px 10px rgba(28, 26, 23, .7);
}
.mosaic__play {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(28, 26, 23, .55); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: var(--ivory);
}

/* --------------------------------------------------------------- 10. map block */
.mapblock { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .mapblock {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-8); align-items: start;
  }
}
.mapblock__figure { margin: 0; }
.mapblock__figure svg { width: 100%; height: auto; border-radius: var(--radius-lg); }
.clerisa-map .cm-hotspot { cursor: pointer; }
.clerisa-map .cm-hotspot:hover .cm-hit,
.clerisa-map .cm-hotspot:focus-visible .cm-hit { fill: rgba(234,186,61,.28); }

/* the crawlable equivalent of the map - required, not optional */
.mapblock__index { list-style: none; margin: 0; padding: 0; }
.mapblock__index li { border-top: 1px solid var(--line); }
.mapblock__index li:last-child { border-bottom: 1px solid var(--line); }
.mapblock__index a {
  display: grid; gap: var(--s-1) var(--s-4); padding: var(--s-4) 0;
  grid-template-columns: 1fr auto; align-items: baseline; text-decoration: none;
}
.mapblock__index a:hover .mapblock__name { color: var(--gold-deep); }
.mapblock__name { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.mapblock__meta { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------- 11. journey cards */
.rail {
  display: grid; gap: var(--s-5);
  grid-auto-flow: column; grid-auto-columns: min(82vw, 22rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4); margin-inline: calc(var(--s-5) * -1);
  padding-inline: var(--s-5);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 62rem) {
  .rail {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
}
.journey {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.journey:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.journey__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.journey__media img { width: 100%; height: 100%; object-fit: cover; }
.journey__map {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  width: 7.25rem; background: rgba(252, 246, 233, .95);
  border: 1px solid rgba(28, 26, 23, .1);
  border-radius: var(--radius); padding: 5px; box-shadow: var(--shadow-1);
}
.journey__map svg { display: block; width: 100%; height: auto; }
.journey__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.journey__title { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.journey__title a { text-decoration: none; }
.journey__title a:hover { color: var(--gold-deep); }
.journey__route {
  font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-4);
}
.journey__facts {
  list-style: none; margin: 0 0 var(--s-5); padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line); display: grid; gap: var(--s-2);
  font-size: var(--fs-sm);
}
.journey__facts li { display: flex; justify-content: space-between; gap: var(--s-4); }
.journey__facts dt, .journey__facts .k { color: var(--ink-3); }
.journey__facts .v { font-weight: 600; text-align: right; }
.journey__foot { margin-top: auto; }

.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35em .8em; border-radius: var(--radius-pill);
  background: var(--gold-tint); color: #6E5210;
}
.tag--pending { background: #EDE6D8; color: var(--ink-2); }

/* --------------------------------------------------------------- 12. process */
.process { counter-reset: step; display: grid; gap: var(--s-6); }
@media (min-width: 52rem) { .process { grid-template-columns: repeat(4, 1fr); } }
.process__step { counter-increment: step; position: relative; padding-top: var(--s-5); }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--gold-deep);
}
.process__step::after {
  content: ""; position: absolute; top: .55rem; left: 2.4rem; right: 0; height: 1px;
  background: var(--line-strong);
}
.process__step:last-child::after { display: none; }
@media (max-width: 51.99rem) { .process__step::after { display: none; } }
.process__step h3 { font-size: var(--fs-base); font-family: var(--font-ui);
  font-weight: 700; margin-bottom: var(--s-2); }
.process__step p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.section--dark .process__step p { color: #D6CAB2; }

/* --------------------------------------------------------------- 13. advisor band */
.advisor { background: var(--charcoal); color: var(--ivory); position: relative; }
.advisor__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 58rem) {
  .advisor__grid { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: var(--s-9); }
}
.advisor h2 { color: var(--ivory); }
.advisor p { color: #D6CAB2; }
.chat {
  background: #26231E; border: 1px solid #3A352C;
  border-radius: var(--radius-lg); padding: var(--s-5);
  box-shadow: var(--shadow-2);
}
.chat__row { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); }
.chat__avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gold);
  flex: none; display: grid; place-items: center;
}
.chat__avatar svg { width: 22px; height: 22px; }
.chat__bubble {
  background: #322D26; border-radius: 4px 14px 14px 14px;
  padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: #EDE4D2;
}
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chat__chip {
  background: transparent; color: var(--ivory);
  border: 1px solid #4C453A; border-radius: var(--radius-pill);
  padding: .55em 1.05em; font-size: var(--fs-sm); cursor: pointer; min-height: 44px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chat__chip:hover { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.chat__note {
  margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: #9A9081;
  display: flex; align-items: center; gap: var(--s-2);
}

/* --------------------------------------------------------------- 14. facts */
.facts { display: grid; gap: var(--s-5) var(--s-8); }
@media (min-width: 52rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4);
  padding-block: var(--s-4); border-top: 1px solid var(--line); align-items: start; }
.fact img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.fact h3 { font-size: var(--fs-base); margin-bottom: var(--s-1); font-family: var(--font-ui);
  font-weight: 700; }
.fact p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.fact a { color: var(--gold-deep); font-weight: 600; text-decoration: none;
  font-size: var(--fs-sm); }
.fact a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- 15. feature band */
.band { position: relative; isolation: isolate; overflow: hidden;
  min-height: 32rem; display: grid; align-items: center; color: var(--ivory); }
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(28,26,23,.93) 0%, rgba(28,26,23,.84) 38%,
    rgba(28,26,23,.55) 68%, rgba(28,26,23,.15) 100%);
}
.band--right::after {
  background: linear-gradient(270deg, rgba(28,26,23,.93) 0%, rgba(28,26,23,.84) 38%,
    rgba(28,26,23,.55) 68%, rgba(28,26,23,.15) 100%);
}
.band__body { max-width: 34rem; padding-block: var(--s-8); }
.band--right .band__body { margin-left: auto; }
.band h2 { color: var(--ivory); }
.band p { color: #E0D6C2; }
.band__list { list-style: none; padding: 0; margin: 0 0 var(--s-6);
  display: grid; gap: var(--s-2); }
.band__list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: #F0E9DA; }
.band__list svg { flex: none; color: var(--gold); margin-top: .35em; }

/* --------------------------------------------------------------- 16. split */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .split--reverse .split__media { order: 2; }
}
.split__media img { width: 100%; border-radius: var(--radius-lg); }
.split__media figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* --------------------------------------------------------------- 17. forms */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(234,186,61,.3); outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field .err {
  font-size: var(--fs-xs); color: var(--error); font-weight: 600;
  display: flex; align-items: flex-start; gap: .4em; margin: 0;
}
.field .err::before { content: "!"; flex: none; display: inline-grid; place-items: center;
  width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--error);
  color: #fff; font-size: .8em; line-height: 1; margin-top: .12em; }
.field .ok-mark {
  font-size: var(--fs-xs); color: var(--success); font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: .4em;
}
.field .opt { font-weight: 400; color: var(--ink-3); }
.err-fix {
  background: none; border: 0; padding: 0 0 1px; margin-left: .5em;
  color: var(--error); font: inherit; font-weight: 700; cursor: pointer;
  border-bottom: 1.5px solid currentColor;
}
.err-fix:hover { color: var(--charcoal); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.field input[data-state="valid"] { border-color: var(--success); }
.field input[aria-invalid="true"] { border-color: var(--error); background: #FEF6F5; }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(163, 43, 30, .22); }
.field--row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .field--row { grid-template-columns: 1fr 1fr; } }
.consent {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-sm); cursor: pointer;
  padding: var(--s-3); margin: calc(var(--s-3) * -1);
  border-radius: var(--radius); min-height: 44px;
}
.consent:hover { background: rgba(234, 186, 61, .07); }
.consent input {
  width: 22px; height: 22px; min-height: 0; margin-top: .1em; flex: none;
  accent-color: var(--gold-deep); cursor: pointer;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formcard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-2);
}

/* --------------------------------------------------------------- 18. trade */
.trade {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.trade__inner {
  display: grid; gap: var(--s-4); padding-block: var(--s-6); align-items: center;
}
@media (min-width: 52rem) {
  .trade__inner { grid-template-columns: 1fr auto; gap: var(--s-7); }
}
.trade h2 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.trade p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------- 19. footer */
.footer { background: var(--bark-deep); color: #D9CDB4; padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-7); }
}
.footer h3 {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer a { color: #D9CDB4; text-decoration: none; font-size: var(--fs-sm); }
.footer a:hover { color: var(--ivory); text-decoration: underline; }
.footer__logo { height: 72px; width: auto; margin-bottom: var(--s-4); color: var(--ivory); }
.footer address { font-style: normal; font-size: var(--fs-sm); line-height: 1.9; }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(217,205,180,.18);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; font-size: var(--fs-xs); color: #A99B80;
}
.footer__bottom a { font-size: var(--fs-xs); }

/* --------------------------------------------------------------- 20. whatsapp */
.wa-float {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1FA855; color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-2); text-decoration: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float[data-hidden="true"] { opacity: 0; pointer-events: none; transform: scale(.8); }
/* WhatsApp is not used in mainland China - de-emphasised on /zh/ */
html[lang="zh-Hans"] .wa-float { display: none; }

/* --------------------------------------------------------------- 21. notes */
/* Editorial flag for content awaiting client verification. Removed at launch. */
.note-pending {
  border-left: 3px solid var(--gold); background: var(--gold-tint);
  padding: var(--s-4) var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm); color: #6E5210;
}
.note-pending strong { color: #4A3708; }

/* --------------------------------------------------------------- 22. motion */
[data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 23. print */
@media print {
  .header, .wa-float, .mobile-nav, .hero__media, .band__media { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}


/* --------------------------------------------------------------- 24. logo scale */
@media (max-width: 30rem) {
  :root { --header-h: 78px; }
  .header__logo img, .header__logo svg { height: 46px; }
}
@media (min-width: 90rem) {
  .header__logo img, .header__logo svg { height: 64px; }
}

/* --------------------------------------------------------------- 25. floating actions */
.floaters {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}
.floaters[data-hidden="true"] { opacity: 0; pointer-events: none; transform: translateY(8px); }
.floaters { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

.float-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 56px; padding: 0 var(--s-3); border-radius: var(--radius-pill);
  text-decoration: none; box-shadow: var(--shadow-2); border: 0; cursor: pointer;
  transition: transform var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.float-btn:hover { transform: translateY(-2px); }
.float-btn__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
}
.float-btn__label {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  white-space: nowrap; padding-right: var(--s-3);
}
.float-btn--advisor { background: var(--gold); color: var(--charcoal); }
.float-btn--advisor:hover { background: var(--gold-tint); }
.float-btn--wa { background: #1FA855; color: #fff; }
.float-btn--wa:hover { background: #17833f; }

/* The WhatsApp glyph is universally recognised, so it carries no label and
   stays out of the way. The advisor is new to visitors and needs naming. */
.float-btn--wa { width: 56px; padding: 0; justify-content: center; }
.float-btn--wa .float-btn__label { display: none; }

@media (max-width: 40rem) {
  .float-btn { width: 56px; padding: 0; justify-content: center; }
  .float-btn__label { display: none; }
  .floaters { right: var(--s-3); bottom: var(--s-3); }
}

/* WhatsApp is not used in mainland China. */
html[lang="zh-Hans"] .float-btn--wa { display: none; }

/* --------------------------------------------------------------- 26. consent */
.consent__text { display: block; }
.consent__text strong { display: block; margin-bottom: .35em; font-weight: 600; }
.consent__detail {
  display: block; font-size: var(--fs-xs); line-height: 1.6;
  color: var(--ink-2); font-weight: 400;   /* .field label sets 600 */
}
.consent__detail a { color: var(--gold-deep); font-weight: 600; }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* --------------------------------------------------------------- 27. breadcrumbs */
.crumbs { border-bottom: 1px solid var(--line); background: var(--surface); }
.crumbs ol {
  list-style: none; margin: 0; padding: var(--s-3) 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--ink-3);
}
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- 28. legal pages */
.legal-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.legal-hero h1 { font-size: var(--fs-3xl); }
.legal-hero .coord { margin-top: var(--s-5); }

.legal-summary {
  background: var(--charcoal); color: var(--ivory);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.legal-summary h2 {
  color: var(--gold); font-family: var(--font-ui); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.legal-summary ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
.legal-summary li {
  position: relative; padding-left: 1.4rem; font-size: var(--fs-lg);
  line-height: 1.45; color: var(--ivory);
}
.legal-summary li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}
.legal-summary p { color: #C9BDA5; font-size: var(--fs-sm); margin: 0; }

.legal-body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.legal-toc {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); margin-bottom: var(--s-8); background: var(--surface-2);
}
.legal-toc h2 {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.legal-toc ol {
  margin: 0; padding: 0; list-style: none; counter-reset: toc;
  display: grid; gap: var(--s-2);
}
@media (min-width: 40rem) { .legal-toc ol { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-5); } }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: var(--s-3); font-size: var(--fs-sm); text-decoration: none;
  color: var(--ink-2); padding: var(--s-1) 0;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 700;
  flex: none;
}
.legal-toc a:hover { color: var(--gold-deep); text-decoration: underline; }

.legal-section { margin-bottom: var(--s-8); scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-section h2 {
  font-size: var(--fs-xl); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--line); margin-bottom: var(--s-5);
}
.legal-section p { font-size: var(--fs-base); }
.legal-section a { color: var(--gold-deep); font-weight: 600; }

.legal-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.legal-list li { position: relative; padding-left: 1.15rem; }
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

.legal-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--s-5);
  font-size: var(--fs-sm);
}
.legal-table th {
  text-align: left; font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
  padding: 0 var(--s-4) var(--s-2) 0; border-bottom: 2px solid var(--line-strong);
}
.legal-table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table td:first-child { font-weight: 600; color: var(--ink); width: 46%; }
.legal-section code, .legal-table code {
  background: var(--sand); padding: .1em .4em; border-radius: 2px;
  font-size: .92em; overflow-wrap: anywhere; word-break: break-word;
}
@media (max-width: 34rem) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .legal-table td { border: 0; padding: 0 0 var(--s-1); }
  .legal-table td:first-child { width: auto; }
  .legal-table td:last-child { color: var(--ink-2); }
}

.legal-contact {
  border-left: 3px solid var(--gold); background: var(--surface-2);
  padding: var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--s-5);
}
.legal-contact p:last-child { margin-bottom: 0; }
.legal-note { font-size: var(--fs-sm); color: var(--ink-2); }
[data-placeholder] { border-left: 2px solid var(--gold-deep); padding-left: var(--s-3); }

/* --------------------------------------------------------------- 29. page hero */
.phero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.phero h1 { font-size: var(--fs-3xl); }
.phero .lede { max-width: 52ch; }
.phero--image {
  position: relative; isolation: isolate; color: var(--ivory);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  min-height: 48svh; display: grid; align-items: end;
}
.phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(28,26,23,.80) 0%, rgba(28,26,23,.55) 44%,
      rgba(28,26,23,.10) 76%),
    linear-gradient(to top, rgba(28,26,23,.86) 0%, rgba(28,26,23,.46) 46%,
      rgba(28,26,23,.22) 100%);
}
.phero--image h1 { color: var(--ivory); text-shadow: 0 2px 20px rgba(28,26,23,.5); }
.phero--image .lede { color: #EFE6D2; }
.phero--image .eyebrow { color: var(--gold); }
.phero--image .eyebrow::before { background: var(--gold); }
.phero__body { max-width: 46rem; }

/* --------------------------------------------------------------- 30. card grids */
.grid-cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.grid-cards--3 { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .grid-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.plain-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; display: flex;
  flex-direction: column;
}
.plain-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.plain-card__body { padding: var(--s-5); }
.plain-card__body h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.plain-card__body h3 a { text-decoration: none; }
.plain-card__body h3 a:hover { color: var(--gold-deep); }
.plain-card__body p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.plain-card--text { background: var(--surface-card); }

.route-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-5);
  display: flex; flex-direction: column;
}
.route-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.route-card__head h3 { font-size: var(--fs-lg); margin: 0; }
.route-card__head h3 a { text-decoration: none; }
.route-card__head h3 a:hover { color: var(--gold-deep); }
.route-card__camps {
  font-size: var(--fs-sm); color: var(--ink-2); margin: var(--s-4) 0;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.route-card .link-arrow { margin-top: auto; align-self: flex-start; }

.pill-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pill-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .55em 1.25em; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600;
}
.pill-links a:hover { border-color: var(--gold); background: rgba(234,186,61,.1); }
.section--dark .pill-links a { border-color: rgba(252,246,233,.35); color: var(--ivory); }
.section--dark .pill-links a:hover { border-color: var(--gold); }

/* --------------------------------------------------------------- 31. steps */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid;
  gap: var(--s-6); }
.steps__item { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-4);
  align-items: start; }
.steps__num {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
  color: var(--gold-deep); padding-top: .2em;
}
.steps__item h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.steps__item p { font-size: var(--fs-base); color: var(--ink-2); margin: 0; }
.steps--compact { gap: var(--s-5); }
.steps--compact h3 { font-size: var(--fs-base); font-family: var(--font-ui);
  font-weight: 700; }
.steps--compact p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------- 32. contact */
.contact-list { margin: 0; display: grid; gap: var(--s-5); }
.contact-list div { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.contact-list dt {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: var(--s-2);
}
.contact-list dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.contact-list dd a { color: var(--gold-deep); text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; }
.contact-note {
  display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2);
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------- 33. faq */
.faq details {
  border-bottom: 1px solid var(--line); padding: var(--s-4) 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-lg);
  font-family: var(--font-serif); list-style: none;
  display: flex; justify-content: space-between; gap: var(--s-4);
  min-height: 32px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-size: 1.4em;
  font-family: var(--font-ui); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: var(--s-3) 0 0; color: var(--ink-2); }

/* --------------------------------------------------------------- 34. interim */
.interim {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--gold);
  background: var(--surface-2); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--s-6);
}
.interim h2 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.interim p { color: var(--ink-2); }
.interim__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0;
}

/* --------------------------------------------------------------- 35. 404 */
.notfound { padding-block: clamp(4rem, 10vw, 8rem); }
.notfound__grid {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-7);
}
.notfound__grid a {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .5em 1.25em; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill); text-decoration: none; font-size: var(--fs-sm);
  font-weight: 600;
}
.notfound__grid a:hover { border-color: var(--gold); background: rgba(234,186,61,.1); }

/* --------------------------------------------------------------- 36. fieldset */
.fs { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.fs legend {
  padding: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); width: 100%; margin-bottom: var(--s-4);
}
.mapblock__index--plain { list-style: decimal; padding-left: 1.3em; }
.mapblock__index--plain li { border: 0; padding: var(--s-2) 0; }

/* --------------------------------------------------------------- 37. advisor */
.advisor-page { padding-block: clamp(2.5rem, 5vw, 4rem); }
.advisor-shell {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-1); margin-top: var(--s-6);
}
.advisor-progress {
  height: 4px; background: var(--sand); border-radius: 2px; overflow: hidden;
  margin-bottom: var(--s-6);
}
.advisor-progress__bar {
  display: block; height: 100%; width: 0; background: var(--gold);
  transition: width 400ms var(--ease);
}
.adv-q__count {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: var(--s-2);
}
.adv-q__title { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.adv-q__help { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-5); }
.adv-options { display: grid; gap: var(--s-3); }
@media (min-width: 34rem) { .adv-options { grid-template-columns: 1fr 1fr; } }
.adv-opt {
  text-align: left; min-height: 56px; padding: var(--s-3) var(--s-5);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg); cursor: pointer; font-size: var(--fs-base);
  font-weight: 500; transition: border-color var(--dur) var(--ease),
    background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.adv-opt:hover { border-color: var(--charcoal); transform: translateY(-1px); }
.adv-opt.is-on { border-color: var(--charcoal); background: var(--gold-tint); }
.adv-options--multi .adv-opt::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  border: 1.5px solid var(--line-strong); border-radius: 3px;
  margin-right: .7em; vertical-align: -2px;
}
.adv-options--multi .adv-opt.is-on::before {
  background: var(--gold-deep); border-color: var(--gold-deep);
}
.adv-party { display: grid; gap: var(--s-4); }
@media (min-width: 34rem) { .adv-party { grid-template-columns: 1fr 1fr; }
  #adv-ages-wrap { grid-column: 1 / -1; } }
.advisor-foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  justify-content: space-between; margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.advisor-note {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0;
  font-size: var(--fs-xs); color: var(--ink-3); max-width: 44ch;
}
.advisor-note svg { flex: none; margin-top: .15em; }
.adv-loading { text-align: center; padding-block: var(--s-8); }
.adv-spinner {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--sand); border-top-color: var(--gold);
  animation: advSpin 900ms linear infinite; margin-bottom: var(--s-4);
}
@keyframes advSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .adv-spinner { animation: none; } }
.adv-result__head { margin-bottom: var(--s-5); }
.adv-result__title { font-size: var(--fs-2xl); }
.adv-result {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); background: var(--surface);
}
.adv-result__meta {
  font-size: var(--fs-sm); color: var(--ink-3); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
}
.adv-result__sub { font-size: var(--fs-base); font-family: var(--font-ui);
  font-weight: 700; margin: var(--s-5) 0 var(--s-3); }
.adv-result__alt { font-size: var(--fs-sm); color: var(--ink-2); }
.adv-result__alt a { color: var(--gold-deep); font-weight: 600; }
.adv-result__note {
  font-size: var(--fs-sm); color: var(--ink-2); background: var(--sand);
  padding: var(--s-4); border-radius: var(--radius); margin: var(--s-5) 0 0;
}
.adv-result__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5);
}
.adv-lead { margin-top: var(--s-6); }

/* --------------------------------------------------------------- 38. video media
   Every video sits behind its own poster image. The poster paints first, the
   film fades in once it can actually play, so there is never a blank frame. */
.vposter { display: block; }
.vposter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vfilm {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease);
}
.vfilm.is-playing { opacity: 1; }

/* NOTE: .hero__media and .band__media are already absolutely positioned by
   their own sections. Do not reset them here, it collapses the hero. */
.mosaic__item, .reel__media, .split__media--video { position: relative; overflow: hidden; }
.hero__media .vposter, .band__media .vposter { position: absolute; inset: 0; }
.mosaic__item .vposter { position: absolute; inset: 0; z-index: -2; }
.mosaic__item .vfilm { z-index: -2; }
.split__media--video { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }
.split__media--video .vposter { position: absolute; inset: 0; }

/* --------------------------------------------------------------- 39. reel */
.reel { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .reel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .reel { grid-template-columns: repeat(3, 1fr); } }
.reel__item { margin: 0; }
.reel__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; background: var(--bark);
}
.reel__media .vposter { position: absolute; inset: 0; }
.reel__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(28, 26, 23, .55); backdrop-filter: blur(4px);
  border: 1.5px solid rgba(252, 246, 233, .5);
  display: grid; place-items: center; color: var(--ivory);
  transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease);
}
.reel__media.is-playing .reel__play { opacity: 0; scale: .8; }
.reel__item figcaption { padding-top: var(--s-4); }
.reel__item h3 {
  font-size: var(--fs-lg); margin-bottom: var(--s-2); color: var(--ivory);
}
.reel__item p { font-size: var(--fs-sm); color: #D6CAB2; margin: 0; }

/* --------------------------------------------------------------- 40. fact icons */
.fact { grid-template-columns: 4.5rem 1fr; align-items: start; }
.fact__icon {
  display: grid; place-items: center; width: 4rem; height: 4rem;
  border-radius: var(--radius-lg); background: var(--sand);
  color: var(--gold-deep); border: 1px solid var(--line);
}
.fact__icon svg { width: 2.4rem; height: 2.4rem; }
.fact h3 { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.fact a { display: inline-flex; align-items: center; gap: .45em; }

/* --------------------------------------------------------------- 41. illustration */
.illus { display: block; width: 100%; height: auto; }
.illus--spot { width: auto; }
.figure-illus {
  margin: var(--s-6) 0; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--sand);
}
.figure-illus figcaption {
  padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--ink-2);
  border-top: 1px solid var(--line); background: var(--surface-card);
}

/* Advisor chips are links now, not buttons. */
a.chat__chip { text-decoration: none; display: inline-flex; align-items: center; }

/* --------------------------------------------------------------- 42. articles */
.article__updated { margin-bottom: var(--s-6); }
.article .legal-section h2 { font-size: var(--fs-xl); }
.article p, .article li { font-size: var(--fs-base); }
.callout {
  border-left: 4px solid var(--gold); background: var(--gold-tint);
  padding: var(--s-4) var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
  color: #5C4310;
}
.callout a { color: #5C4310; font-weight: 700; }
.source-list a { font-size: var(--fs-sm); }

/* --------------------------------------------------------------- 43. guide cards */
.guide-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); background: var(--surface-card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.guide-card:hover {
  border-color: var(--line-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.guide-card__icon {
  flex: none; width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--sand); color: var(--gold-deep);
}
.guide-card__icon svg { width: 1.9rem; height: 1.9rem; }
.guide-card__body { display: block; min-width: 0; }
.guide-card__title {
  display: block; font-family: var(--font-serif); font-size: var(--fs-lg);
  font-weight: 600; line-height: 1.25; margin-bottom: .35em;
}
.guide-card__note {
  display: block; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2);
}

/* --------------------------------------------------------------- 44. flags
   Replaces emoji flags, which Windows does not ship a colour font for and so
   rendered as nothing at all on desktop. */
.flag {
  width: 22px; height: 15px; flex: none; display: block;
  border-radius: 2px; overflow: hidden;
}
.lang__btn { gap: var(--s-2); }
.lang__btn .flag, .lang__list .flag { flex: none; }
.lang__list a { gap: var(--s-3); }
.footer__langs a { display: flex; align-items: center; gap: var(--s-3); }
.footer__langs .flag { width: 20px; height: 14px; }


/* --------------------------------------------------------------- 45. buttons on small screens
   Below 30rem the primary calls to action go full width. A centred label on a
   full-width control cannot crowd its own edge, whatever the language or
   whatever the device does to font metrics. */
@media (max-width: 30rem) {
  .btn { font-size: var(--fs-sm); padding-inline: 1rem; }
  .btn--lg { font-size: var(--fs-base); }
  .hero__actions .btn,
  .band__body > .btn,
  .trade__inner > .btn,
  .interim__actions .btn,
  .section--sand .btn--lg {
    width: 100%;
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .interim__actions { flex-direction: column; align-items: stretch; }
  .notfound__grid a { flex: 1 1 45%; justify-content: center; }
  .pill-links a { flex: 1 1 100%; justify-content: center; }
}

/* Two-line labels must not squash the control. */
.btn > span { display: inline-block; min-width: 0; }
.btn svg { flex: none; }

/* --------------------------------------------------------------- 46. advisor result */
.adv-caveats li::before { background: var(--sunset); }
.adv-result__close {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--gold-tint); border-radius: var(--radius);
  font-size: var(--fs-sm); color: #5C4310;
}

/* --------------------------------------------------------------- 47. very narrow header
   At 320px a long language name such as "Deutsch" plus the flag, the CTA and
   the burger no longer fit. The flag alone still identifies the language, and
   the full list is one tap away. */
@media (max-width: 23.5rem) {
  .lang__btn > span:not(.flag) { display: none; }
  .lang__btn { padding-inline: .6rem; }
  .header__actions { gap: var(--s-2); }
}

/* --------------------------------------------------------------- 48. long words
   German and Norwegian compounds (Datenschutzerklärung, personvernerklæring)
   are longer than a 320px column. Without this they push the page sideways. */
h1, h2, h3, h4, p, li, td, th, dd, dt, summary, figcaption, label, .lede {
  overflow-wrap: break-word;
}
.legal-body, .article, .legal-table { hyphens: auto; }
.legal-table td, .legal-table th { min-width: 0; }


/* --------------------------------------------------------------- 49. Chinese
   CJK glyphs are full-width and dense, so they need more line height and no
   negative tracking. Headings use the sans face, which is normal practice for
   Chinese display type on screen. */
html[lang="zh-Hans"] { --font-serif: "Clerisa CJK", "Clerisa Sans", sans-serif; }
html[lang="zh-Hans"] body { line-height: 1.85; word-spacing: 0; }
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] h4 { letter-spacing: .01em; line-height: 1.4; font-weight: 700; }
html[lang="zh-Hans"] .lede,
html[lang="zh-Hans"] .hero__lede { line-height: 1.8; }
html[lang="zh-Hans"] .eyebrow { letter-spacing: .12em; }

/* --------------------------------------------------------------- 50. font leak
   The language switcher shows 中文 on every page in every language. Without
   this rule those two glyphs alone pull down the 314 KB Chinese font on the
   French, German and Norwegian pages. Rendering that one label in the
   system CJK face costs nothing and keeps the download on /zh/ where it
   belongs. */
.lang__list [lang="zh-Hans"],
.footer__langs [lang="zh-Hans"],
.lang__btn [lang="zh-Hans"] {
  font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
}
html[lang="zh-Hans"] .lang__list [lang="zh-Hans"],
html[lang="zh-Hans"] .footer__langs [lang="zh-Hans"] {
  font-family: inherit;
}

/* --------------------------------------------------------------- 51. header fit
   Seven navigation items translate to very different widths: "Travel Guide"
   becomes "Guide de voyage" and "Reiseratgeber". The full horizontal nav now
   only appears once there is genuinely room for it, the language button and
   the call to action together. Below that the burger menu carries the nav,
   which is where it belongs anyway. */
.header__inner { flex-wrap: nowrap; min-width: 0; }
.nav { min-width: 0; flex-wrap: nowrap; }
.nav__link { white-space: nowrap; }
.header__cta { white-space: nowrap; }
@media (min-width: 78rem) and (max-width: 87.99rem) {
  .nav__link { font-size: var(--fs-sm); }
}

/* ===================================================================
   52. MULTILINGUAL BUTTON SYSTEM
   -------------------------------------------------------------------
   The problem this solves: "Plan my safari" is 14 characters, but the
   same button reads "Planlegg safarien min" (21) in Norwegian and
   "定制我的行程" (6 full-width glyphs) in Chinese. Without help, a row
   of buttons ends up visibly mismatched and long labels crowd the edge
   of the pill.

   Three rules do the work:
     1. A minimum width in `ch` units, so short labels like "Kontakt"
        never shrink to a stub beside a long neighbour.
     2. Padding in `em`, so it grows with the text rather than staying
        fixed while the label gets longer.
     3. Buttons in a group stretch to equal height, so a label that
        wraps to two lines does not make its neighbour look broken.

   To change the overall button size, edit --btn-pad-y / --btn-pad-x
   below. Everything else follows from those.
   =================================================================== */
:root {
  --btn-pad-y: .8em;
  --btn-pad-x: 1.5em;
  --btn-min: 11ch;      /* floor for short labels, in characters */
  --btn-min-lg: 13ch;
}

.btn {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-width: min(100%, var(--btn-min));
  /* Never let a long word touch the edge of the pill. */
  padding-inline: max(var(--btn-pad-x), 1rem);
}
.btn--lg { min-width: min(100%, var(--btn-min-lg)); }

/* Chinese and Japanese glyphs are full width, so the ch-based floor
   over-reserves. Relax it for CJK. */
html[lang="zh-Hans"] .btn { --btn-min: 7ch; --btn-min-lg: 8ch; }

/* Any row of buttons: equal heights, sensible wrapping, and on narrow
   screens they stack to full width rather than squeezing. */
.btn-row,
.hero__actions,
.interim__actions,
.adv-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: stretch;
}
.btn-row > .btn,
.hero__actions > .btn,
.interim__actions > .btn,
.adv-result__actions > .btn {
  flex: 0 1 auto;
}
@media (max-width: 30rem) {
  .btn-row > .btn,
  .hero__actions > .btn,
  .interim__actions > .btn,
  .adv-result__actions > .btn { flex: 1 1 100%; }
}

/* A centred pair, as used at the foot of every section page. Below
   34rem they stack; above it they sit side by side with matched
   widths so neither looks like an afterthought. */
.btn-row--center { justify-content: center; }
@media (min-width: 34rem) {
  .btn-row--pair > .btn { flex: 0 1 auto; min-width: 14ch; }
  html[lang="zh-Hans"] .btn-row--pair > .btn { min-width: 9ch; }
}

/* ===================================================================
   53. TRIP CATEGORIES (Luxury / Mid-range / Budget)
   -------------------------------------------------------------------
   The accent colour of each category is set in content/site.json under
   "tiers" -> "accentColor", and arrives here as the --tier variable.
   =================================================================== */
.tier-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

.tier-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: var(--surface-card);
  border: 1px solid var(--line); border-left: 4px solid var(--tier, var(--gold));
  border-radius: var(--radius-lg); text-decoration: none; min-width: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tier-card__name {
  font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600;
  color: var(--tier, var(--gold-deep)); line-height: 1.25;
}
.tier-card__short { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }

.tier-badge {
  display: inline-block; margin-bottom: var(--s-2);
  padding: .22em .7em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tier, #4A3D28) 12%, transparent);
  color: var(--tier, var(--gold-deep));
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--tier, #4A3D28) 30%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .tier-badge { background: var(--sand); border-color: var(--line-strong); }
}

.tier-section { border-left: 4px solid var(--tier, var(--gold)); padding-left: var(--s-5); }
.tier-section h2 { color: var(--tier, var(--ink)); border-bottom-color: var(--line); }
.tier-section__sub {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: var(--s-5) 0 var(--s-2);
}

/* ===================================================================
   54. SOCIAL LINKS
   URLs are set in content/site.json under "social".
   =================================================================== */
.social { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.social__link {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(252, 246, 233, .28);
  color: #C9BDA5; transition: color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.social__link:hover {
  color: var(--charcoal); background: var(--gold); border-color: var(--gold);
}
.social__link svg { width: 20px; height: 20px; display: block; }

/* Social links on a light background, as used on the contact page. */
.social--light .social__link { border-color: var(--line-strong); color: var(--ink-2); }
.social--light .social__link:hover {
  color: var(--charcoal); background: var(--gold); border-color: var(--gold);
}

/* ===================================================================
   55. FORM RESULT STATES
   Shown after an enquiry is sent. Before these existed the browser
   posted the form natively and displayed the raw JSON response.
   =================================================================== */
.form-alert {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  border-radius: var(--radius);
  background: #FDF0EE;
  border-left: 4px solid var(--error, #A32B1E);
  color: #7A2417;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-success {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-left: 4px solid #2F6B3F;
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.form-success h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-3);
  color: #2F6B3F;
}
.form-success p { color: var(--ink-2); margin-bottom: var(--s-2); }
.form-success__ref {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s-4);
}
button[type=submit][disabled] { opacity: .6; cursor: progress; }

/* ===================================================================
   56. "TANZANIA IN SHORT" LAYOUT
   The Big Five photograph sits alongside the facts rather than the
   facts running alone down a wide column.
   =================================================================== */
.facts-layout { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .facts-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .facts-figure { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.facts-figure { margin: 0; }
.facts-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); aspect-ratio: 16 / 10; object-fit: cover;
}
.facts-figure figcaption {
  margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--ink-2);
}

/* Inside the two-column facts layout the cards get one column each, so the
   text has room to breathe instead of squeezing into narrow pairs. */
@media (min-width: 62rem) {
  .facts-layout .facts { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ===================================================================
   57. CATEGORY CARDS WITH PHOTOGRAPHY
   =================================================================== */
.tier-card--photo { padding: 0; overflow: hidden; gap: 0; }
.tier-card__media { display: block; }
.tier-card__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.tier-card--photo:hover .tier-card__media img { transform: scale(1.04); }
.tier-card__body {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
}

.tier-section__figure { margin: 0 0 var(--s-5); }
.tier-section__figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover;
}

/* ===================================================================
   58. TWO-UP MEDIA BAND
   A photograph beside a video clip, used to break up long text pages.
   =================================================================== */
.media-pair { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .media-pair { grid-template-columns: 1fr 1fr; } }
.media-pair__item {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; aspect-ratio: 4 / 3; background: var(--sand);
}
.media-pair__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-pair__item--video .vposter { position: absolute; inset: 0; }