/* ==== tokens.css ==== */
/* =====================================================================
   tokens.css — the ONE place to retune the whole site.
   Palette, typography, spacing, grid. Swap the client's logo + font here.
   ===================================================================== */
:root {
  /* ---- Palette: off-whites (no pure white, no pure black) ---- */
  --cream:  #FBF9F3;   /* lightest ground (hero copy panels, cards) */
  --ivory:  #F5F2EB;   /* page ground */
  --bone:   #EEEBE5;   /* alt band */
  --sand:   #E6DBC1;   /* warm band / image placeholder */
  --stone:  #C3AA84;   /* borders on dark, muted accents */
  --taupe:  #B6A28F;   /* muted text on cream */
  --ink:    #221F20;   /* primary text */
  --ink-2:  #5C5550;   /* secondary text */
  --umber:  #2E2828;   /* dark band ground */
  --forest: #1E392B;   /* deep contrast band (footer / one chapter) */
  --clay:   #B8764F;   /* THE accent: burnt sienna / clay (links, hairlines on hover, countdown) */
  --clay-2: #CB9275;   /* accent hover / on dark */
  --gold:   #AE841F;   /* tiny use: stars, welcome sun */

  --bg:        var(--ivory);
  --bg-alt:    var(--bone);
  --fg:        var(--ink);
  --fg-soft:   var(--ink-2);
  --accent:    var(--clay);
  --hairline:  rgb(34 31 32 / .14);
  --hairline-on-dark: rgb(245 242 235 / .18);
  --scrim: linear-gradient(to top, rgb(30 24 18 / .58) 0%, rgb(30 24 18 / .18) 42%, transparent 68%);

  /* ---- Typography (client font drops in via the two *-override vars) ---- */
  --font-display: var(--font-display-override, 'Cormorant Garamond', 'Times New Roman', Georgia, serif);
  --font-body:    var(--font-body-override, 'Jost', 'Helvetica Neue', Arial, system-ui, sans-serif);
  --logo-h: 28px;                 /* wordmark/logo height in the nav */

  /* Fluid type scale (375 → 1440) */
  --fs--2: clamp(0.72rem, 0.70rem + 0.12vw, 0.80rem);   /* eyebrows, captions (tracked uppercase) */
  --fs--1: clamp(0.875rem, 0.84rem + 0.17vw, 1rem);     /* meta, small body */
  --fs-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* body */
  --fs-1:  clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* lead */
  --fs-2:  clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);  /* h4 */
  --fs-3:  clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);     /* h3 */
  --fs-4:  clamp(2.25rem, 1.6rem + 2.8vw, 4.125rem);    /* h2 */
  --fs-5:  clamp(3rem, 1.6rem + 6vw, 7rem);             /* h1 hero */
  --fs-6:  clamp(3.5rem, 1rem + 10.5vw, 10.5rem);       /* oversized numerals / marquee */
  --lh-tight: 0.96; --lh-heading: 1.08; --lh-body: 1.6;
  --track-caps: 0.18em;

  /* ---- Spacing ---- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.3vw, 0.9375rem);
  --space-s:   clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);
  --space-l:   clamp(2rem, 1.7rem + 1.3vw, 3rem);
  --space-xl:  clamp(3rem, 2.3rem + 3vw, 5rem);
  --space-2xl: clamp(4rem, 2.6rem + 6vw, 8rem);
  --space-3xl: clamp(6rem, 3.5rem + 10vw, 12rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);

  /* ---- Layout ---- */
  --measure: 72rem;   /* readable column */
  --wide:    96rem;   /* wide column */
  --nav-h:   4.5rem;
  --radius:  0px;     /* luxury = square corners; cards use 2px */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.44, 0, .56, 1);
  --dur: .8s;

  color-scheme: light;
}

@media (min-width: 120rem) { :root { --fs-5: clamp(7rem, 3rem + 4vw, 8.5rem); } }


/* ==== base.css ==== */
/* =====================================================================
   base.css — reset, typography, layout grid, media primitive, buttons,
   nav, welcome screen, sticky CTA, utilities. Section styles live in
   their own files (src/css/NN-name.css) and only use tokens + these
   primitives.
   CONTRACT: CSS renders a complete, readable page with NO JS. Nothing
   here hides content (no opacity:0 / clip on content). JS applies
   hidden states itself, only when motion is allowed.
   ===================================================================== */

/* ---------- Lenis (inlined from lenis.css 1.3.26) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--nav-h); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-weight: 300; font-size: var(--fs-0); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg, picture { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--sand); color: var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--fs-5); line-height: var(--lh-tight); max-width: 14ch; }
h2 { font-size: var(--fs-4); line-height: var(--lh-heading); max-width: 20ch; }
h3 { font-size: var(--fs-3); line-height: 1.12; }
h4 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-1); line-height: 1.3; }
p { max-width: 65ch; text-wrap: pretty; }
.lead { font-size: var(--fs-1); font-weight: 300; color: var(--fg-soft); }
.serif { font-family: var(--font-display); }
em, .it { font-style: italic; font-weight: inherit; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs--2); line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft);
}
.eyebrow::before { content: ''; width: 2rem; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--bare::before { display: none; }
.meta { font-size: var(--fs--1); color: var(--fg-soft); letter-spacing: .02em; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.stat { font-variant-numeric: tabular-nums; }

/* ---------- Section grid: full / wide / content ---------- */
.section {
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [content-start] min(100% - 2 * var(--gutter), var(--measure)) [content-end]
    minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
  padding-block: var(--space-2xl);
}
.section > * { grid-column: content; }
.section > .wide { grid-column: wide; }
.section > .full { grid-column: full; }
.section--tight { padding-block: var(--space-xl); }
.section--flush { padding-block: 0; }
.band { background: var(--bg-alt); }
.band--sand { background: var(--sand); }
.band--dark { background: var(--umber); color: var(--cream); --fg: var(--cream); --fg-soft: var(--stone); --hairline: var(--hairline-on-dark); --accent: var(--clay-2); }
.band--forest { background: var(--forest); color: var(--cream); --fg: var(--cream); --fg-soft: var(--stone); --hairline: var(--hairline-on-dark); --accent: var(--clay-2); }
.section__head { display: grid; gap: var(--space-s); margin-bottom: var(--space-xl); }
.section__head .lead { max-width: 52ch; }
@media (min-width: 60rem) {
  .section__head--split { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* ---------- Media primitive (NO weird cropping) ----------
   <figure class="media" style="--ar:4/5; --ar-d:3/2; --fp:50% 30%; --lqip:url(...)">
     <img src width height loading="lazy" decoding="async" alt>
   </figure>
   The BOX owns the aspect ratio (per breakpoint). The image covers it and
   the focal point (--fp) decides what survives cropping. */
.media {
  position: relative; overflow: clip; margin: 0;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--lqip, none) center / cover no-repeat, var(--sand);
  border-radius: var(--radius);
}
@media (min-width: 56.25rem) { .media { aspect-ratio: var(--ar-d, var(--ar, 4 / 5)); } }
.media > img, .media > picture, .media > picture > img, .media > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fp, 50% 50%);
}
.media > picture { position: absolute; inset: 0; }
.media > img, .media > picture > img { opacity: 0; transition: opacity .9s var(--ease-out); } /* opacity only: GSAP owns transform (reveal scale, parallax) — a CSS transform transition would re-ease every frame */
.media > img.is-loaded, .media > picture > img.is-loaded { opacity: 1; }
/* safety nets: an image must never stay hidden */
.media > img:not([loading="lazy"]), .media > picture > img:not([loading="lazy"]) { opacity: 1; }
.no-js .media img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .media img { opacity: 1 !important; transform: none !important; transition: none; } }
.media--plx > img, .media--plx > picture > img { transform: scale(1.15); will-change: transform; }
.media--plx > img.is-loaded, .media--plx > picture > img.is-loaded { transform: scale(1.15); }
.media__caption {
  position: absolute; left: var(--space-s); bottom: var(--space-s); z-index: 2;
  font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 12px rgb(0 0 0 / .35);
}
/* video slot: VideoManager fills this over the picture when a clip exists */
.media > .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); opacity: 0; transition: opacity 1.2s var(--ease-out); pointer-events: none; }
.media > .vid.is-playing { opacity: 1; }
.media--scrim::after { content: ''; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; z-index: 1; }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; isolation: isolate; overflow: clip;
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 3rem; padding: .95em 1.9em; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs--1); letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out), transform .6s var(--ease-out);
  will-change: transform;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: translateY(101%); transition: transform .55s var(--ease-inout); border-radius: inherit; }
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid::before { background: var(--accent); }
.btn--solid:hover { border-color: var(--accent); color: var(--cream); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover { border-color: var(--ink); color: var(--cream); }
.btn__label { display: inline-block; }
.btn__arrow { display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(.35em); }
.link {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs--1); letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
  padding-bottom: .25em; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size .5s var(--ease-out), color .3s;
}
.link:hover { background-size: 0 1px; color: var(--accent); }
.link .btn__arrow { font-family: var(--font-display); font-size: 1.2em; line-height: 1; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  height: var(--nav-h); padding-inline: calc(var(--gutter) + env(safe-area-inset-left)) calc(var(--gutter) + env(safe-area-inset-right));
  color: var(--cream);
  transition: transform .55s var(--ease-out), background-color .45s, color .45s, box-shadow .45s;
}
.nav--hidden { transform: translateY(-100%); }
.nav--scrolled { background: rgb(245 242 235 / .88); color: var(--ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hairline); }
.nav--light { color: var(--ink); }
.nav__logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; height: var(--logo-h); font-family: var(--font-display); font-size: clamp(1rem, 0.8rem + 0.9vw, 1.35rem); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nav__logo img { height: var(--logo-h); width: auto; }
.nav__links { display: none; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav__links a { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 400; padding: .5rem 0; position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: var(--space-s); }
.nav__count { display: none; font-size: var(--fs--2); letter-spacing: .12em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.nav__count b { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0; margin-right: .3em; }
.nav .btn { min-height: 2.5rem; padding: .7em 1.35em; font-size: .7rem; }
/* touch: ≥44px targets for the nav pill and every uppercase text link (one rule for all sections) */
@media (pointer: coarse) {
  .nav .btn { min-height: 2.75rem; }
  .link { min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); }
}
/* 320px phones: logo + pill + burger no longer fit; the sticky CTA and drawer carry Reserve */
@media (max-width: 22.5rem) { .nav .btn { display: none; } .nav__logo { font-size: .95rem; } }
.nav__burger { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem; border: 0; background: none; cursor: pointer; color: inherit; }
.nav__burger span { display: block; width: 1.4rem; height: 1px; background: currentColor; margin: 3px 0; transition: transform .4s var(--ease-out), opacity .3s; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__count { display: inline-flex; align-items: baseline; }
}
/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--ivory); color: var(--ink);
  display: grid; align-content: center; align-content: safe center; gap: var(--space-m); padding: var(--space-2xl) var(--gutter) var(--space-xl);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateY(-100%); transition: transform .7s var(--ease-inout); visibility: hidden;
}
@media (max-height: 500px) { .drawer { padding-block: var(--space-xl); } }
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a.drawer__link { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.1; border-bottom: 1px solid var(--hairline); padding-block: .45em; display: flex; justify-content: space-between; align-items: baseline; }
.drawer a.drawer__link small { font-family: var(--font-body); font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); }
.drawer__foot { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; margin-top: var(--space-s); }
@media (min-width: 64rem) { .drawer { display: none; } }
.progress { position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- Welcome screen ----------
   Visible by default (no FOUC). JS animates it and removes it. If JS
   fails, a 6 s CSS failsafe fades it away. <noscript> hides it outright. */
.welcome {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: transparent; color: var(--ink); overflow: clip; /* the two panels carry the cream so the hero shows through as they part */
  padding: var(--space-l) var(--gutter);
  animation: welcome-failsafe .8s ease 6s forwards;
}
@keyframes welcome-failsafe { to { opacity: 0; visibility: hidden; } }
.welcome.is-armed { animation: none; }
.welcome { --seam: 72; } /* horizon seam, in % of viewport height */
.welcome__panel { position: absolute; inset: 0; background: var(--cream); }
.welcome__panel--top { bottom: calc((100 - var(--seam)) * 1%); }
.welcome__panel--bottom { top: calc(var(--seam) * 1%); }
.welcome__horizon { position: absolute; left: 0; right: 0; top: calc(var(--seam) * 1%); height: 1px; background: var(--ink); opacity: .35; transform: scaleX(0); transform-origin: 50% 50%; }
.welcome__sun { position: absolute; left: 50%; top: calc(var(--seam) * 1%); width: clamp(2.25rem, 5vw, 4rem); aspect-ratio: 1; border-radius: 50%; background: var(--clay); transform: translate(-50%, 40%); opacity: 0; }
.welcome__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: var(--space-s); max-width: min(92vw, 62rem); margin-bottom: calc((100 - var(--seam)) * 1svh); }
@media (max-height: 44rem) { .welcome { --seam: 78; } .welcome__inner { gap: var(--space-xs); } .welcome__enter { margin-top: var(--space-s); } }
.welcome__coords { font-family: var(--font-body); font-weight: 400; font-size: var(--fs--2); letter-spacing: .28em; text-transform: uppercase; color: var(--fg-soft); font-variant-numeric: tabular-nums; margin-bottom: var(--space-xs); white-space: nowrap; }
.welcome__place { display: inline-block; min-width: 9ch; text-align: left; margin-left: .6em; }
.welcome__wm { position: relative; display: inline-block; }
.welcome__title { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: .98; max-width: 14ch; }
.welcome__stamp { position: absolute; right: -7%; top: -22%; width: clamp(5.25rem, 13vw, 10rem); aspect-ratio: 1; color: var(--clay); opacity: 0; transform: rotate(-14deg) scale(1.6); transform-origin: 50% 50%; pointer-events: none; mix-blend-mode: multiply; }
.welcome__stamp svg { width: 100%; height: 100%; overflow: visible; }
.welcome__stamp-arc { font-family: var(--font-body); font-size: 9.6px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; fill: currentColor; }
.welcome__stamp-big { font-family: var(--font-display); font-style: italic; font-size: 30px; letter-spacing: .04em; fill: currentColor; }
.welcome__dates { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); letter-spacing: .02em; color: var(--fg-soft); }
.welcome__dates-sep { color: var(--clay); font-style: normal; margin-inline: .35em; }
.welcome__enter { margin-top: var(--space-m); }
.welcome__skip { position: absolute; right: var(--gutter); top: calc(var(--space-m) + env(safe-area-inset-top)); z-index: 3; font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); background: none; border: 0; cursor: pointer; padding: .6rem; min-height: 44px; }
.welcome__skip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 30rem) { .welcome__stamp { right: -4%; top: -30%; } .welcome__coords { letter-spacing: .18em; } }
@media (prefers-reduced-motion: reduce) { .welcome { animation-delay: 0s; } /* global .01ms duration → gone at first paint; JS removes it too */ .welcome__horizon { transform: none; } .welcome__sun { opacity: 1; transform: translate(-50%, -50%); } .welcome__stamp { opacity: .9; transform: rotate(-12deg) scale(1); } }

/* ---------- Sticky mobile CTA (ad traffic lands on phones) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgb(245 242 235 / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline); color: var(--ink);
  transform: translateY(110%); transition: transform .6s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__text { display: grid; line-height: 1.2; min-width: 0; }
.sticky-cta__text b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta__text span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.sticky-cta .btn { flex: 0 0 auto; min-height: 2.75rem; padding: .7em 1.2em; font-size: .7rem; }
@media (min-width: 64rem) { .sticky-cta { display: none; } }
body.has-sticky-cta { padding-bottom: 0; }

.sticky-cta.is-keyboard { transform: translateY(110%); }

/* ---------- Consent sheet (EU visitors only, built by core when a pixel id is set) ---------- */
.consent { position: fixed; left: 50%; bottom: calc(var(--space-s) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; max-width: min(92vw, 40rem); padding: .75rem 1rem; background: rgb(245 242 235 / .96); border: 1px solid var(--hairline); color: var(--ink); font-size: var(--fs--1); }
.consent p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.consent__btn { min-height: 2.25rem; padding: .4em 1em; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); font-size: var(--fs--2); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.consent__btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.center { text-align: center; justify-items: center; }
.w { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.w__i { display: inline-block; will-change: transform; }
.line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.stack-space > * + * { margin-top: var(--space-s); }
.placeholder-badge { display: none; }
html.show-placeholders [data-placeholder]::after { content: 'REPLACE'; display: inline-block; margin-left: .5em; padding: .1em .4em; font: 600 .6rem/1 var(--font-body); letter-spacing: .1em; color: #fff; background: #c0392b; border-radius: 2px; vertical-align: middle; }

/* ---------- Marquee (CSS-only, seamless) ---------- */
.marquee { --gap: clamp(2rem, 6vw, 5rem); --speed: 50s; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); white-space: nowrap; animation: marquee var(--speed) linear infinite; will-change: transform; }
.marquee:hover .marquee__group { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__group { animation: none; }
  .marquee__group[aria-hidden] { display: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .progress { display: none; }
}


/* ==== 01-hero.css ==== */
/* ===== 01 · Hero ===== */
.hero {
  position: relative; overflow: clip; color: var(--cream);
  height: 100vh; height: 100svh; min-height: 36rem; max-height: 72rem;
  display: grid;
}
.hero__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; --lqip: url('https://images.unsplash.com/photo-1516426122078-c23e76319801?w=24&q=30&auto=format&blur=20'); }
@media (min-width: 56.25rem) { .hero__media { aspect-ratio: auto; } }
.hero__media > picture > img { transform: none; }
html.js:not(.motion-failed) .hero__media > picture > img { transform: scale(1.06); } /* over-scaled only when the JS parallax pans it */
.hero__copy {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  padding-inline: calc(var(--gutter) + env(safe-area-inset-left)) calc(var(--gutter) + env(safe-area-inset-right));
  display: grid; gap: var(--space-m); max-width: min(100%, 60rem);
}
.hero__eyebrow { color: var(--cream); opacity: .9; }
.hero__title { color: var(--cream); text-shadow: 0 2px 30px rgb(30 24 18 / .25); max-width: 12ch; }
.hero__title em { color: var(--sand); }
.hero__sub { color: var(--cream); opacity: .92; max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-2xs); }
.hero .btn--solid { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero .btn--solid::before { background: var(--clay); }
.hero .btn--solid:hover { color: var(--cream); border-color: var(--clay); }
.hero__link { color: var(--cream); }
.hero__count {
  position: absolute; z-index: 2; right: calc(var(--gutter) + env(safe-area-inset-right));
  bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  display: none; gap: var(--space-xs); text-align: right; justify-items: end;
}
.hero__count-label { color: var(--cream); opacity: .8; }
.hero__count-grid { display: flex; gap: var(--space-m); }
.hero__count-grid > div { display: grid; justify-items: center; gap: .2rem; min-width: 3.2ch; }
.hero__count-grid b { font-size: var(--fs-4); font-weight: 300; line-height: 1; }
.hero__count-grid span { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; opacity: .75; }
@media (min-width: 64rem) { .hero__count { display: grid; } .hero__copy { max-width: 62%; } }
.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--space-s) + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 1px; height: 3.5rem; overflow: hidden; opacity: .7; display: none; }
.hero__scroll span { display: block; width: 100%; height: 100%; background: var(--cream); animation: hero-scroll 2.2s var(--ease-inout) infinite; }
@keyframes hero-scroll { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@media (min-width: 64rem) { .hero__scroll { display: block; } }
/* portrait: the copy block is tall, so the scrim reaches higher (eyebrow legible over the bright sky) */
@media (max-aspect-ratio: 4/3) {
  .hero__media.media--scrim::after { background: linear-gradient(to top, rgb(30 24 18 / .62) 0%, rgb(30 24 18 / .28) 50%, rgb(30 24 18 / .08) 75%, transparent 100%); }
}
/* landscape phones: photo above, copy below (never text over a 393px-tall crop) */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { height: auto; max-height: none; min-height: 100svh; grid-template-rows: 62svh auto; }
  .hero__media { position: relative; grid-row: 1; }
  .hero__copy { position: static; grid-row: 2; padding-block: var(--space-m); color: var(--ink); background: var(--ivory); }
  .hero__copy .hero__eyebrow, .hero__copy .hero__title, .hero__copy .hero__sub, .hero__link { color: var(--ink); text-shadow: none; }
  .hero__title em { color: var(--clay); }
  .hero .btn--solid { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .hero__count, .hero__scroll { display: none; }
}


/* ==== 02-welcome.css ==== */
/* ===== 02 · Welcome: host letter + facts strip + route marquee band ===== */
.welcome-note { padding-bottom: 0; }

/* ---- Letter block: headline left, narrow letter column right (offset down) ---- */
.welcome-note__grid { display: grid; gap: var(--space-xl) var(--space-l); align-items: start; }
.welcome-note__head { display: grid; gap: var(--space-m); }
.welcome-note__title { font-size: var(--fs-5); line-height: var(--lh-tight); max-width: none; }
.welcome-note__title em { font-style: italic; color: var(--accent); }
.welcome-note__line { font-size: var(--fs-3); line-height: 1.18; max-width: 22ch; color: var(--fg); text-wrap: balance; }

.welcome-note__letter { position: relative; display: grid; gap: var(--space-s); max-width: 38ch; padding-top: var(--space-m); }
.welcome-note__letter-rule { display: block; height: 1px; background: var(--hairline); width: 100%; margin-bottom: var(--space-2xs); }
.welcome-note__letter p { font-size: var(--fs-0); line-height: 1.7; color: var(--fg-soft); }

.welcome-note__sign { display: grid; gap: .35rem; justify-items: start; margin-top: var(--space-s); }
.welcome-note__flourish { color: var(--accent); width: 10rem; height: auto; margin-bottom: -.2rem; }
.welcome-note__sig { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); line-height: 1.1; color: var(--fg); letter-spacing: .01em; }
.welcome-note__role { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; }

@media (min-width: 60rem) {
  .welcome-note__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l) var(--space-2xl); }
  .welcome-note__head { padding-right: var(--space-m); }
  .welcome-note__letter { margin-top: clamp(2rem, 8vw, 7rem); padding-top: 0; }
}

/* ---- Facts strip: five stats, hairline above & below, vertical dividers on wide screens ---- */
.facts { margin-top: var(--space-2xl); }
.facts__list { display: grid; grid-template-columns: 1fr; }
.facts__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m);
  padding: var(--space-s) 0; border-top: 1px solid var(--hairline);
}
.facts__item:first-child { border-top: 0; }
.facts__num { font-size: var(--fs-4); font-weight: 300; line-height: 1; color: var(--fg); letter-spacing: -.02em; min-width: 2ch; }
.facts__label { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); text-align: right; }

@media (min-width: 40rem) {
  .facts__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .facts__item {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-xs);
    padding: var(--space-l) var(--space-m); border-top: 0; border-left: 1px solid var(--hairline);
  }
  .facts__item:first-child { border-left: 0; padding-left: 0; }
  .facts__item:last-child { padding-right: 0; }
  .facts__label { text-align: left; max-width: 17ch; line-height: 1.5; }
  .facts__num { font-size: var(--fs-5); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .facts__num { font-size: var(--fs-4); }
  .facts__item { padding-inline: var(--space-s); }
}
/* ≥64rem: stats use the oversized numeral scale (BRIEF §4), matching the journey / day numerals */
@media (min-width: 64rem) {
  .facts__num { font-size: var(--fs-6); letter-spacing: -.03em; }
}

/* ---- Route band: two counter-rotating marquees in the dark band ---- */
.route {
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl);
  display: grid; gap: var(--space-m);
  overflow: clip;
}
.route__row { --gap: clamp(1.5rem, 4vw, 3.5rem); }
.route__row--route .marquee__group { gap: var(--gap); }
.route__stop {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-5); line-height: 1.05;
  letter-spacing: -.015em; color: var(--cream); padding-block: .04em;
}
.route__stop--it { font-style: italic; color: var(--stone); }
.route__dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: var(--accent); font-size: var(--fs-3); flex: 0 0 auto; transform: translateY(-.1em); }
.route__rule { margin-inline: var(--gutter); opacity: .9; }
.route__row--acts { --gap: clamp(1rem, 2.5vw, 1.75rem); }
.route__row--acts .marquee__group > span {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs--1);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--stone); line-height: 1.4;
}
.route__sep { color: var(--accent); }

/* reversed direction: the second row drifts the other way */
.marquee--reverse .marquee__group { animation-direction: reverse; }

/* Edge fades: plain gradient overlays in the band colour instead of base's mask-image on the
   animating track (a mask on a translating layer is re-composited every frame; overlays are static). */
.route .marquee { position: relative; -webkit-mask-image: none; mask-image: none; }
.route .marquee::before,
.route .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2.5rem, 8vw, 7rem);
  pointer-events: none; z-index: 1;
}
.route .marquee::before { left: 0; background: linear-gradient(90deg, var(--umber), rgb(46 40 40 / 0)); }
.route .marquee::after { right: 0; background: linear-gradient(270deg, var(--umber), rgb(46 40 40 / 0)); }

/* motion: JS eases the playbackRate with scroll velocity; nothing here hides content */
@media (prefers-reduced-motion: reduce) {
  .route .marquee { overflow-x: auto; padding-bottom: .25rem; }
  .route .marquee::before, .route .marquee::after { display: none; }
  .route .marquee__track { padding-inline: var(--gutter); } /* static rows start at the page gutter, not x=0 */
}


/* ==== 03-journey.css ==== */
/* ===== 03 · The journey =====
   Default (phones, tablets, no-JS, reduced motion, motion failure): stacked
   chapter cards, one image per chapter; ≥56.25rem the cards become alternating
   image/text rows. Sticky mode (≥56.25rem AND html.js AND motion OK): a sticky
   4:5 frame on the left crossfades per chapter, the per-chapter images are
   display:none (lazy images in a display:none figure are never fetched).
   CONTRACT: nothing here hides unique content — the two figure sets carry the
   same four photos; exactly one set is visible in every mode. */

.journey { --j-gap: clamp(2.5rem, 5vw, 6rem); }

/* ---------- Layout (card mode) ---------- */
.journey__layout { display: grid; gap: var(--space-xl); }
.journey__sticky { display: none; }
.journey__chapters { display: grid; gap: var(--space-2xl); }
.journey__chapter { display: grid; gap: var(--space-m); min-width: 0; }
.journey__body { display: grid; gap: var(--space-s); min-width: 0; max-width: 36rem; }

/* Card image ratio follows the (landscape) masters: 4:5 on portrait phones,
   1:1 from 40rem, 3:2 on landscape phones. The <picture> sources fetch the same ratios. */
.journey__media { --ar: 4 / 5; --ar-d: 1 / 1; }
@media (min-width: 40rem) { .journey__media { --ar: 1 / 1; } }
@media (max-height: 500px) and (orientation: landscape) { .journey__media { --ar: 3 / 2; --ar-d: 3 / 2; } }

/* index numeral + coordinates row */
.journey__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.journey__index {
  font-size: var(--fs-6); font-weight: 300; line-height: .78; letter-spacing: -.04em;
  color: var(--fg); margin-left: -.04em;
}
.journey__coords { position: relative; top: -.15em; }

/* name / meta / mood / description */
.journey__name { max-width: 100%; margin-top: var(--space-2xs); }
.journey__meta { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); font-weight: 400; }
.journey__mood {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--fs-2); line-height: 1.25; letter-spacing: -.01em; color: var(--fg);
  max-width: 30ch; margin-top: var(--space-xs);
}
.journey__desc { color: var(--fg-soft); max-width: 52ch; }
.journey__aside { font-style: italic; color: var(--taupe); }

/* activities — Sanctum-style numbered hairline rows */
.journey__acts { margin-top: var(--space-xs); border-top: 1px solid var(--hairline); max-width: 34rem; }
.journey__acts li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; gap: var(--space-s);
  padding: .75em 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs--1); color: var(--fg);
  transition: color .45s var(--ease-out), padding-left .55s var(--ease-out);
}
.journey__acts li .num { font-size: var(--fs--1); color: var(--accent); letter-spacing: .04em; }
@media (hover: hover) {
  .journey__acts:hover li { color: var(--taupe); }
  .journey__acts li:hover { color: var(--fg); padding-left: .35rem; }
}

/* stay line */
.journey__stay { margin-top: var(--space-2xs); max-width: 46ch; }
.journey__label { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 400; color: var(--taupe); margin-right: .35em; }

/* ---------- Desktop, card mode: alternating image / text rows ---------- */
@media (min-width: 56.25rem) {
  .journey__chapters { gap: 0; }
  .journey__chapter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--j-gap); align-items: start;
    padding-block: var(--space-xl); border-top: 1px solid var(--hairline);
  }
  .journey__chapter:first-child { border-top: 0; padding-top: 0; }
  .journey__chapter:last-child { padding-bottom: var(--space-l); }
  .journey__chapter:nth-child(even) .journey__media { order: 2; }
  .journey__body { max-width: 34rem; }
  .journey__top { gap: var(--space-2xs) var(--space-l); }
  .journey__coords { top: -.35em; }
}

/* ---------- Sticky crossfade mode: desktop + JS + motion only ---------- */
@media (min-width: 56.25rem) and (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-failed) .journey__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--j-gap); align-items: start; }
  html.js:not(.motion-failed) .journey__sticky { display: block; position: sticky; top: calc(var(--nav-h) + 2rem); min-width: 0; }
  html.js:not(.motion-failed) .journey__chapter { grid-template-columns: minmax(0, 1fr); }
  html.js:not(.motion-failed) .journey__media { display: none; }
  html.js:not(.motion-failed) .journey .journey__frame {
    aspect-ratio: 4 / 5; overflow: clip;
    width: min(100%, calc((100vh - var(--nav-h) - 4rem) * .8));
    width: min(100%, calc((100svh - var(--nav-h) - 4rem) * .8));
    background: var(--lqip, none) center / cover no-repeat, var(--sand);
  }
  html.js:not(.motion-failed) .journey .journey__frame > img {
    transition: none; z-index: 1; transform-origin: 50% 50%; /* will-change is set by JS only while the section is on screen */
  }
  html.js:not(.motion-failed) .journey .journey__frame > img.is-active { z-index: 2; }
  .journey__cap {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s);
    margin-top: var(--space-xs); font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft);
  }
  .journey__cap b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-0); letter-spacing: .02em; text-transform: none; color: var(--fg); }
  .journey__cap .num { color: var(--accent); }
}

/* ---------- Ngorongoro extension card ---------- */
.journey__ext {
  margin-top: var(--space-2xl); background: var(--cream); border: 1px solid var(--hairline); border-radius: 2px;
  display: grid; gap: var(--space-m); overflow: clip;
}
.journey__ext-media { --ar: 3 / 2; --ar-d: 3 / 2; }
.journey__ext-body { display: grid; gap: var(--space-s); padding: 0 var(--space-l) var(--space-l); align-content: center; }
.journey__ext-title { max-width: 14ch; }
.journey__ext-copy { color: var(--fg-soft); max-width: 44ch; }
.journey__ext-link { justify-self: start; margin-top: var(--space-2xs); }
/* meta units never break mid-unit; below 40rem the "+ 2 nights" unit drops to its
   own line WITHOUT the separator, so a line never starts with "·" */
.journey__meta-unit { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .journey__meta-unit--last { display: block; }
  .journey__meta-sep { display: none; }
}
@media (min-width: 56.25rem) {
  .journey__ext { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
  .journey__ext-body { padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; }
}
@media (min-width: 75rem) {
  .journey__ext { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* shared touch-target rule (same as FAQ / base proposal) */
@media (pointer: coarse) {
  .journey .link { min-height: 2.75rem; align-items: center; padding-bottom: 0; background-position: 0 calc(50% + .8em); }
}


/* ==== 04-itinerary.css ==== */
/* ===== 04 · Itinerary =====
   Default (every device): vertical numbered list — sticky day numeral in a
   left column, hairline rail, 4:5 photo (3:4 from 900px), hairline between days.
   Horizontal pinned track: ONLY under the guarded media query at the bottom
   (≥56.25rem + motion OK + html.js, not in-app) AND only once JS has actually
   created the pin (.is-pinned) — so a JS failure can never strand the track off-screen. */
.itin { --itin-num: var(--fs-6); --itin-rail-x: 0px; }   /* same oversized-numeral scale as the journey chapter index */
.itin__head-main { display: grid; gap: var(--space-s); align-content: end; }
.itin__head-side { display: grid; gap: var(--space-s); align-content: end; }
.itin__key { color: var(--fg-soft); }
.itin__hint { display: none; color: var(--fg-soft); }               /* desktop-only micro-copy, enabled in the horizontal block */
.itin__hint-arrow { display: inline-block; font-family: var(--font-display); font-size: 1.35em; line-height: 1; animation: itin-bob 2.4s var(--ease-inout) infinite; }
@keyframes itin-bob { 0%, 100% { transform: translateY(-15%); } 50% { transform: translateY(20%); } }

/* ---- vertical list (default) ---- */
.itin__viewport { position: relative; grid-column: content; }
.itin__rail { position: absolute; left: var(--itin-rail-x); top: 0; bottom: 0; width: 1px; background: var(--hairline); pointer-events: none; }
.itin__rail-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; }   /* JS scrubs scaleY; without JS it is simply a clay rail */
.itin__list { border-bottom: 1px solid var(--hairline); }
.itin__day {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-s); align-items: start;
  padding: var(--space-l) 0 var(--space-l) var(--space-2xs);   /* phones: the numeral column stays as narrow as the glyphs */
  border-top: 1px solid var(--hairline);
}
.itin__num {
  position: sticky; top: calc(var(--nav-h) + 1rem);
  font-family: var(--font-display); font-weight: 300; font-size: var(--itin-num); line-height: .82; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--fg);
  transition: color .6s var(--ease-out);
}
.itin__day.is-active .itin__num { color: var(--accent); }
.itin__body { display: grid; gap: var(--space-m); min-width: 0; }
.itin__media { --ar: 4 / 5; --ar-d: 3 / 4; width: 100%; }
.itin__media::after { display: none; }                   /* scrim only under the cream numeral in the horizontal mode */
.itin__media > picture > img { transition: opacity .9s var(--ease-out); }   /* GSAP owns transform (no CSS transition fighting the scrub) */
.itin__text { display: grid; gap: var(--space-xs); min-width: 0; align-content: start; }
.itin__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em .8em; line-height: 1.4; color: var(--fg-soft); }   /* date + place wrap as two whole pieces, never a stranded "·" or "→" */
.itin__when time { color: var(--fg); }
.itin__where { min-width: 0; }   /* "Mara&nbsp;→&nbsp;Serengeti" keeps the arrow glued to its neighbours */
.itin__title { max-width: 14ch; margin-top: var(--space-3xs); }
.itin__copy { color: var(--fg-soft); max-width: 48ch; }
.itin__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-2xs); }
.itin__tags li {
  display: inline-flex; align-items: center; min-height: 1.9rem; padding: .45em .85em;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: .68rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1;   /* site chip spec */
  color: var(--fg-soft); white-space: nowrap;
  transition: border-color .5s var(--ease-out), color .5s var(--ease-out);
}
.itin__day:hover .itin__tags li { border-color: var(--stone); color: var(--fg); }
.itin__meta { display: block; margin-top: var(--space-2xs); }
.itin__meals { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; letter-spacing: .14em; color: var(--fg); }
.itin__meals abbr { text-decoration: none; }
.itin__progress { display: none; }                       /* desktop-only scrub hairline, enabled in the horizontal block */

/* Larger vertical screens (tablet, desktop with reduced motion / in-app / no JS): photo beside the text */
@media (min-width: 40rem) {
  .itin__day { column-gap: var(--space-m); padding-inline-start: var(--space-s); }
  .itin__body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--space-m); align-items: start; }
}
@media (min-width: 56.25rem) {
  .itin__day { padding-block: var(--space-xl); }
  .itin__body { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--space-xl); }
  .itin__text { padding-top: var(--space-xs); }
  .itin__num { position: sticky; }
}
/* landscape phones: keep the list compact */
@media (max-height: 500px) and (orientation: landscape) {
  .itin__num { top: calc(var(--nav-h) + .5rem); }
  .itin__day { padding-block: var(--space-m); }
  .itin__media { --ar: 1 / 1; }                          /* landscape phones: square box (landscape masters never forced tall) */
}

/* ---- horizontal pinned track (desktop ≥900px, motion OK, JS present, not in-app) ---- */
@media (min-width: 56.25rem) and (prefers-reduced-motion: no-preference) {
  html.js:not(.in-app) .itin.is-pinned {
    --itin-gap: clamp(1.5rem, 3vw, 3rem);
    height: 100vh; height: 100svh; min-height: 40rem;   /* definite height (vh fallback for old webviews) → the 1fr track row is constrained and photos shrink to fit */
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-block: calc(var(--nav-h) + var(--space-m)) var(--space-m);
  }
  html.js:not(.in-app) .itin.is-pinned .itin__head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-xl);
    margin-bottom: var(--space-m);
  }
  html.js:not(.in-app) .itin.is-pinned .itin__head h2 { max-width: none; font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem); }   /* one line: every pixel of height goes to the photos */
  html.js:not(.in-app) .itin.is-pinned .itin__head .lead { grid-column: 1 / -1; font-size: var(--fs--1); line-height: 1.55; max-width: 48ch; }
  html.js:not(.in-app) .itin.is-pinned .itin__head-side { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-m); align-items: end; row-gap: var(--space-xs); }
  html.js:not(.in-app) .itin.is-pinned .itin__key { grid-column: 1; grid-row: 2; white-space: nowrap; }
  html.js:not(.in-app) .itin.is-pinned .itin__hint { display: inline-flex; grid-column: 2; grid-row: 2; align-self: end; white-space: nowrap; }
  html.js:not(.in-app) .itin.is-pinned .itin__viewport {
    grid-column: full; display: block; min-height: 0;   /* block, so the track's % padding resolves against the viewport width */
    overflow-x: clip; overflow-y: visible;
  }
  html.js:not(.in-app) .itin.is-pinned .itin__rail { display: none; }
  html.js:not(.in-app) .itin.is-pinned .itin__list {
    display: flex; align-items: stretch; gap: var(--itin-gap); width: max-content; height: 100%;
    padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
    border: 0; will-change: transform;
  }
  html.js:not(.in-app) .itin.is-pinned .itin__day {
    flex: 0 0 clamp(26rem, 30vw, 36rem); width: clamp(26rem, 30vw, 36rem);
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    height: 100%; min-height: 0; padding: 0; border: 0;
  }
  html.js:not(.in-app) .itin.is-pinned .itin__body { display: contents; }
  html.js:not(.in-app) .itin.is-pinned .itin__media { order: 1; flex: 0 1 auto; min-height: 0; width: 100%; }
  html.js:not(.in-app) .itin.is-pinned .itin__media::after { display: block; }
  html.js:not(.in-app) .itin.is-pinned .itin__num {
    order: 2; position: relative; top: auto; z-index: 2; align-self: flex-start; flex: 0 0 auto;
    font-size: clamp(4rem, 2.6rem + 3.6vw, 7rem); line-height: .8; color: var(--cream);
    margin-top: calc(-.8em - .1em); padding: 0 0 .1em .08em; pointer-events: none;
    text-shadow: 0 1px 18px rgb(30 24 18 / .18);
  }
  html.js:not(.in-app) .itin.is-pinned .itin__day.is-active .itin__num { color: var(--cream); }
  html.js:not(.in-app) .itin.is-pinned .itin__text { order: 3; flex: 0 0 auto; padding-top: var(--space-s); gap: var(--space-2xs); }
  html.js:not(.in-app) .itin.is-pinned .itin__where::before { content: '·'; margin-right: .8em; }   /* cards are ≥26rem wide: date · place always fits one line */
  html.js:not(.in-app) .itin.is-pinned .itin__title { font-size: var(--fs-2); max-width: none; }
  html.js:not(.in-app) .itin.is-pinned .itin__copy { font-size: var(--fs--1); line-height: 1.5; max-width: none; }
  html.js:not(.in-app) .itin.is-pinned .itin__tags { margin-top: var(--space-3xs); }
  html.js:not(.in-app) .itin.is-pinned .itin__meta { margin-top: var(--space-3xs); }
  html.js:not(.in-app) .itin.is-pinned .itin__progress {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-m);
    margin-top: var(--space-m);
  }
  html.js:not(.in-app) .itin.is-pinned .itin__progress-track { position: relative; display: block; height: 1px; background: var(--hairline); }
  html.js:not(.in-app) .itin.is-pinned .itin__progress-bar { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; }
  html.js:not(.in-app) .itin.is-pinned .itin__progress-label { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); white-space: nowrap; }
  html.js:not(.in-app) .itin.is-pinned .itin__progress-label b { font-weight: 400; font-size: 1.5em; letter-spacing: 0; color: var(--fg); margin: 0 .15em; }
}

/* Short desktop viewports (13" laptop browser ≈ 1440×780): a stacked card would crush the photo,
   so the card widens and the 3:4 photo sits beside the text — same markup, same pin. */
@media (min-width: 56.25rem) and (max-height: 52.5rem) and (prefers-reduced-motion: no-preference) {
  html.js:not(.in-app) .itin.is-pinned .itin__day {
    flex-basis: clamp(40rem, 46vw, 56rem); width: clamp(40rem, 46vw, 56rem);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr);
    column-gap: var(--space-l); align-items: center;
  }
  html.js:not(.in-app) .itin.is-pinned .itin__media { grid-area: 1 / 1 / 2 / 2; align-self: center; width: 100%; max-height: 100%; min-height: 0; }
  html.js:not(.in-app) .itin.is-pinned .itin__num { grid-area: 1 / 1 / 2 / 2; align-self: end; justify-self: start; margin: 0; padding: 0 0 .1em .12em; }
  html.js:not(.in-app) .itin.is-pinned .itin__text { grid-area: 1 / 2 / 2 / 3; align-self: center; padding-top: 0; }
  html.js:not(.in-app) .itin.is-pinned .itin__where::before { content: none; }   /* narrower text column here: no separator that could strand at a wrap */
}


/* ==== 05-experiences.css ==== */
/* ===== 05 · Experiences — mixed-ratio editorial grid + filter pills + stars =====
   Breakpoint for the 3-column grid AND the desktop aspect ratio is 52rem
   (832px) so landscape phones / small tablets get the magazine layout too.
   The .media aspect switch is overridden locally to match. */
.xp { --xp-bp: 52rem; }
.xp__head { align-items: end; }
.xp__head-copy { display: grid; gap: var(--space-s); }
/* a plain caption until something is starred — then it earns the chip outline */
.xp__starred {
  display: inline-flex; align-items: center; gap: .6em; justify-self: start;
  min-height: 2.75rem; padding: 0; border: 0; border-radius: 999px;
  font-size: var(--fs--2); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), padding .4s var(--ease-out);
}
.xp__starred-icon path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill .4s, stroke .4s; }
.xp__starred.has-stars { color: var(--fg); padding: .55em 1.1em; border: 1px solid var(--fg); }
.xp__starred.has-stars .xp__starred-icon path { fill: var(--accent); stroke: var(--accent); }
@media (min-width: 60rem) { .xp__starred { justify-self: end; } }

/* ---- filter bar ---- */
.xp__filters { margin-bottom: var(--space-xl); }
.xp__filter-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-m);
  padding-block: var(--space-s);
}
.xp__pills { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.xp__pill {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 2.75rem; padding: .6em 1.1em; border-radius: 999px;
  border: 1px solid var(--hairline); background: transparent; color: var(--fg-soft); cursor: pointer;
  font-size: var(--fs--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; line-height: 1; white-space: nowrap;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out), transform .5s var(--ease-out);
}
.xp__pill-n { font-size: .95em; letter-spacing: 0; color: var(--accent); font-weight: 400; }
.xp__pill:hover { color: var(--fg); border-color: var(--fg); }
.xp__pill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.xp__pill[aria-pressed="true"] .xp__pill-n { color: var(--sand); }
.xp__status { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- grid ---- */
.xp__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-s); align-items: start;
}
.xp__tile { display: grid; gap: var(--space-s); min-width: 0; }
.xp__tile[hidden] { display: none; }
/* the box owns the ratio: mobile --ar, desktop --ar-d, switched at the SAME breakpoint as the grid */
.xp__tile .media { aspect-ratio: var(--ar, 4 / 5); }
.xp__tile.is-lead { grid-column: 1 / -1; }
/* Below the grid breakpoint:
   · the first VISIBLE tile is the lead (JS re-assigns it after a filter) and goes full-width;
   · when the remaining count is odd, the last visible tile also goes full-width instead of
     sitting orphaned beside an empty cell (visible index even + last visible);
   · wide tiles use --ar-wide (default 1:1 so a 4:5 source is not double-cropped; tile 01
     carries 3:2 sources and sets --ar-wide:3/2). Direct aspect-ratio beats the inline --ar;
   · tiles subgrid their four rows (photo / meta / name / copy) so a three-line category
     line in one tile no longer pushes its h3 below its neighbour's. */
@media (max-width: 51.9375rem) {
  .xp__tile { grid-row: span 4; grid-template-rows: subgrid; }
  .xp__body { grid-row: span 3; grid-template-rows: subgrid; }
  .xp__tile.is-lead,
  .xp__grid > .xp__tile:nth-child(even of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
  .xp__tile.is-lead .media,
  .xp__grid > .xp__tile:nth-child(even of :not([hidden])):nth-last-child(1 of :not([hidden])) .media { aspect-ratio: var(--ar-wide, 1 / 1); }
}
.xp__body { display: grid; gap: var(--space-2xs); min-width: 0; }
.xp__meta { display: flex; align-items: center; gap: .6rem .85rem; min-height: 2.75rem; }
.xp__index { font-size: var(--fs-1); line-height: 1; color: var(--accent); }
.xp__cat {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); line-height: 1.3;
}
.xp__place { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs--1); letter-spacing: 0; text-transform: none; color: var(--fg-soft); opacity: .85; }
.xp__star {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  border: 0; background: none; color: var(--fg-soft); cursor: pointer; border-radius: 50%;
  transition: color .35s var(--ease-out);
}
.xp__star svg path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill .35s var(--ease-out), stroke .35s var(--ease-out); }
.xp__star:hover { color: var(--accent); }
.xp__tile.is-starred .xp__star { color: var(--accent); }
.xp__tile.is-starred .xp__star svg path { fill: var(--accent); stroke: var(--accent); }
.xp__name { font-size: var(--fs-2); line-height: 1.08; max-width: 14ch; }
.xp__tile.is-lead .xp__name { font-size: var(--fs-3); max-width: 16ch; }
.xp__copy { font-size: var(--fs--1); color: var(--fg-soft); max-width: 38ch; }
.xp__foot { margin-top: var(--space-l); text-align: center; justify-self: center; }
.xp__foot i { font-family: var(--font-display); font-size: 1.15em; color: var(--accent); }

/* hover zoom (pointer devices only). Base clears GSAP's inline transform after the reveal,
   so the transition below owns the image from then on. */
@media (hover: hover) {
  .xp__tile .media > img.is-loaded, .xp__tile .media > picture > img.is-loaded { transition: opacity .9s var(--ease-out), transform .8s var(--ease-out); }
  .xp__tile:hover .media > img.is-loaded, .xp__tile:hover .media > picture > img.is-loaded { transform: scale(1.05); }
  .xp__tile:hover .xp__index { color: var(--fg); }
}

/* ---- magazine layout from 52rem ---- */
@media (min-width: 52rem) {
  .xp__tile .media { aspect-ratio: var(--ar-d, var(--ar, 4 / 5)); }
  .xp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-l); }
  .xp__tile.is-lead { grid-column: auto; }
  .xp__tile.is-lead .xp__name { font-size: var(--fs-2); max-width: 14ch; }
  /* middle column drops a little: the magazine stagger (counts visible tiles only) */
  .xp__grid > .xp__tile:nth-child(3n + 2 of :not([hidden])) { padding-top: var(--space-xl); }
  .xp__body { padding-right: var(--space-s); }
}
@media (min-width: 80rem) {
  .xp__grid { gap: var(--space-xl) var(--space-xl); }
}

/* short landscape phones: keep the grid but tighten vertical rhythm */
@media (max-height: 500px) and (orientation: landscape) {
  .xp__grid { gap: var(--space-l) var(--space-m); }
  .xp__grid > .xp__tile:nth-child(3n + 2 of :not([hidden])) { padding-top: var(--space-l); }
}


/* ==== 05z-quote.css ==== */
/* ===== 05z · Quote — the one dark cinematic beat =====
   Layer order (all inside the section): photo (0) → veil (1) → grain (2) →
   frame (3) → copy (4). The photo sits at full opacity; the veil owns the
   ~32% read (no filter, no opacity on the image). CSS renders the frame
   fully drawn; JS only ever animates FROM undrawn when motion is allowed. */
.nq {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; place-items: center;
  min-height: 80svh;
  color: var(--ivory);
}
@media (min-width: 56.25rem) { .nq { min-height: 100svh; } }

/* photo: fills the band; the box keeps --ar/--ar-d for the media contract but the
   section owns the height here (same pattern as the hero) */
.nq > .nq__media {
  position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; height: 100%;
  background: var(--lqip, none) center / cover no-repeat, var(--umber);
  transform-origin: 50% 55%;
}
.nq > .nq__media > picture > img { transform: none; transition: opacity 1.2s var(--ease-out); }
.nq > .nq__media > picture > img.is-loaded { transform: none; }

/* veil: umber at ~68% → photo reads at ~32%, a touch heavier top and bottom so the copy always sits on dark */
.nq__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(46 40 40 / .76) 0%, rgb(46 40 40 / .62) 45%, rgb(46 40 40 / .66) 70%, rgb(46 40 40 / .8) 100%);
}

/* grain: a 200px feTurbulence tile, soft-light at 5% — static, so it costs nothing per frame */
.nq__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
html.in-app .nq__grain { display: none; }

/* 35mm hairline frame: one rect, inset 5%, drawn by default (dasharray 1 with pathLength=1; the
   stroke-dashoffset ATTRIBUTE defaults to 0 = fully drawn — JS animates that attribute FROM 1 only
   when motion is allowed; keep dashoffset out of CSS so the attribute wins) */
.nq__frame {
  position: absolute; z-index: 3; left: 5%; top: 5%; width: 90%; height: 90%;
  overflow: visible; pointer-events: none; color: var(--ivory); opacity: .5;
}
.nq__frame-rect { stroke-dasharray: 1; }

/* copy */
.nq__inner {
  position: relative; z-index: 4; width: 100%; max-width: 64rem; text-align: center;
  padding: calc(5svh + var(--space-xl)) calc(5% + var(--space-m) + env(safe-area-inset-left)) calc(5svh + var(--space-xl)) calc(5% + var(--space-m) + env(safe-area-inset-right));
}
.nq__quote { margin: 0; }
.nq__text {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-4); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ivory); max-width: 24ch; margin-inline: auto; text-wrap: balance;
}
.nq__text em { font-style: italic; color: var(--clay-2); }
.nq__attr {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .9em; row-gap: .5em;
  margin: var(--space-l) auto 0; max-width: none;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs--2); line-height: 1; letter-spacing: .28em; text-transform: uppercase;
  color: var(--stone); font-variant-numeric: tabular-nums;
}
.nq__attr .num { font-family: var(--font-body); }
.nq__attr-grp { display: inline-flex; align-items: baseline; column-gap: .9em; white-space: nowrap; }
.nq__sep { color: var(--clay-2); }
/* narrow phones: the two pairs stack (DAY 03 · BUSH DINNER / MAASAI MARA · 20:00), no orphaned time */
@media (max-width: 30rem) {
  .nq__attr { letter-spacing: .22em; column-gap: .7em; row-gap: .7em; }
  .nq__attr-grp { column-gap: .7em; }
  .nq__sep--mid { display: none; }
}

/* short landscape phones: keep the beat inside one screen */
@media (max-height: 500px) and (orientation: landscape) {
  .nq__text { font-size: var(--fs-3); max-width: 30ch; }
  .nq__inner { padding-block: calc(5svh + var(--space-l)); }
  .nq__attr { margin-top: var(--space-m); }
}

/* nav over the dark band (class toggled by 05z-quote.js via ScrollTrigger onToggle) */
.nav.nav--on-dark:not(.is-open) { color: var(--cream); }
.nav.nav--on-dark.nav--scrolled:not(.is-open) { background: rgb(46 40 40 / .85); color: var(--cream); box-shadow: 0 1px 0 var(--hairline-on-dark); }


/* ==== 06-included.css ==== */
/* ===== 06 · Included / Investment ===== */
.included { --bg: var(--bone); }
.included__head .lead { max-width: 36ch; }
@media (min-width: 60rem) {
  .included__lead { justify-self: end; margin-bottom: .35em; }
}

/* ---- Two hairline checklists ---- */
.included__cols { display: grid; gap: var(--space-xl) var(--space-2xl); align-items: start; }
@media (min-width: 52rem) {
  .included__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); }
  .included__col--no { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 4vw, 4rem); }
}
.included__title {
  display: flex; align-items: baseline; gap: .5em; margin-bottom: var(--space-2xs);
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs--2); line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft);
}
.included__aside { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.35em; letter-spacing: 0; text-transform: none; color: var(--accent); }
.included__list { display: block; }
.included__item {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: .6rem; align-items: start;
  padding-block: var(--space-xs); border-top: 1px solid var(--hairline);
  font-size: var(--fs-0); line-height: 1.45;
  transition: color .5s var(--ease-out);
}
.included__list > .included__item:last-child { border-bottom: 1px solid var(--hairline); }
.included__text { display: block; min-width: 0; }
.included__note { display: inline; font-size: var(--fs--1); color: var(--fg-soft); letter-spacing: .02em; white-space: normal; }
.included__note--keep, .included__seg { white-space: nowrap; }
@media (max-width: 52rem) {
  /* long route notes drop to their own line under the item on narrow columns */
  .included__note--long { display: block; margin-top: .2em; }
}
.included__code { font-size: var(--fs--1); letter-spacing: .08em; color: var(--fg-soft); }
/* Sanctum-style: hover dims the other rows (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  .included__list:hover .included__item { color: var(--fg-soft); }
  .included__list:hover .included__item:hover { color: var(--fg); }
}
.tick { width: 1.15rem; height: 1.15rem; margin-top: .22em; color: var(--accent); overflow: visible; }
.tick path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dash { display: block; width: 1.4rem; margin-top: -.02em; font-family: var(--font-display); font-size: 1.1em; line-height: 1.45; color: var(--taupe); }
.included__col--no .included__item { color: var(--fg-soft); }
.included__foot { margin-top: var(--space-m); max-width: 40ch; }
.included__foot-link { color: var(--fg); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: .1em; transition: color .3s; }
.included__foot-link:hover { color: var(--accent); }
@media (pointer: coarse) {
  .included .link { min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); }
  /* inline prose links: pad the hit box, pull it back with negative margins so the line box
     and text position do not move; the underline stays on the content box */
  .included__foot-link { display: inline-block; padding: .85em .65em; margin: -.85em -.65em; background-origin: content-box; }
}

/* ---- Investment panel ---- */
.investment { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.investment__rule { border-top-color: rgb(34 31 32 / .28); }
.investment__grid {
  display: grid; gap: var(--space-l);
  padding-block: var(--space-xl);
}
@media (min-width: 52rem) {
  .investment__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: 'anchor terms' 'cta terms';
    column-gap: clamp(2.5rem, 6vw, 7rem); row-gap: var(--space-l);
    align-items: start;
  }
  .investment__anchor { grid-area: anchor; }
  .investment__terms { grid-area: terms; align-self: center; }
  .investment__cta { grid-area: cta; }
}
.investment__anchor { display: grid; gap: var(--space-xs); }
.investment__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .5em; margin-top: var(--space-2xs); }
.investment__from { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-2); color: var(--fg-soft); }
.investment__price {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-5);
  line-height: .95; letter-spacing: -0.02em; white-space: nowrap;
}
.investment__per { letter-spacing: var(--track-caps); text-transform: uppercase; font-size: var(--fs--2); }
.investment__guarantee { display: inline-flex; align-items: center; gap: .6em; margin-top: var(--space-2xs); font-size: var(--fs--1); color: var(--fg-soft); }
.investment__guarantee .num { font-size: 1.35em; line-height: 1; color: var(--fg); font-weight: 400; margin-inline: .12em; }
.investment__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); flex: none; }

.investment__terms { margin: 0; }
.investment__row {
  display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: var(--space-s);
  padding-block: var(--space-s); border-top: 1px solid var(--hairline);
}
.investment__row:last-child { border-bottom: 1px solid var(--hairline); }
.investment__row dt { font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); font-weight: 400; padding-top: .35em; }
.investment__row dd { margin: 0; font-size: var(--fs-0); line-height: 1.5; }
.investment__row dd .num { font-weight: 400; font-size: 1.2em; line-height: 1; }
.investment__confirm { font-size: var(--fs--2); letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); margin-left: .3em; }
@media (max-width: 30rem) {
  .investment__row { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

.investment__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); }
.investment__label-wait { display: none; }
html.is-waitlist .investment__label-wait { display: inline; }
html.is-waitlist .investment__label-main { display: none; }

/* ---- Trust strip: hairline grid that survives any wrap ---- */
.trust {
  display: grid; gap: 1px; margin-top: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  background: var(--hairline); border: 1px solid var(--hairline);
}
.trust__tile { background: var(--bone); min-width: 0; }
.trust__inner { display: grid; gap: .4rem; padding: var(--space-m) var(--space-m) var(--space-m); height: 100%; align-content: start; }
.trust__icon { width: 1.75rem; height: 1.75rem; margin-bottom: .5rem; color: var(--accent); overflow: visible; }
.trust__icon * { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.trust__label { font-weight: 400; font-size: var(--fs--1); line-height: 1.35; letter-spacing: .01em; text-wrap: balance; }
.trust__label b { font-family: var(--font-display); font-weight: 400; font-size: 1.25em; line-height: 1; }
.trust__sub { font-size: var(--fs--2); letter-spacing: .06em; color: var(--fg-soft); line-height: 1.4; }

/* ---- Landscape phones: tighten vertical rhythm ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .included__cols { gap: var(--space-l) var(--space-xl); }
  .investment { margin-top: var(--space-xl); }
  .investment__grid { padding-block: var(--space-l); }
}


/* ==== 07-hosts.css ==== */
/* ===== 07 · Hosts + past guests + Meet the group ===== */
.hosts [hidden] { display: none !important; }   /* .btn/.link set display, which beats the UA [hidden] rule (core hides WhatsApp links with `hidden`) */
.hosts { padding-bottom: 0; }                     /* the sand band closes the section flush */

/* ---- Host cards: side by side (staggered) from 40rem, stacked below ---- */
.hosts__cards { display: grid; gap: var(--space-2xl) var(--space-l); margin-bottom: var(--space-2xl); }
@media (min-width: 40rem) {
  .hosts__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-l); align-items: start; }
  .host:nth-child(2) { margin-top: var(--space-2xl); }            /* Lucera-style vertical offset */
}
@media (min-width: 56.25rem) {
  .hosts__cards { column-gap: var(--space-2xl); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.host { display: grid; gap: var(--space-m); min-width: 0; }

/* portrait placeholder: pale sand texture behind an ivory veil, hairline frame, small italic label */
.host__portrait::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(245 242 235 / .62);
}
.host__label {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-1);
  letter-spacing: .02em; color: var(--fg-soft); pointer-events: none;
}
.host__label::before { content: ''; position: absolute; inset: var(--space-s); border: 1px solid var(--hairline); }
.host__label span { position: relative; padding: .35em 1.1em; background: rgb(245 242 235 / .55); }
.host__body { display: grid; gap: var(--space-2xs); }
.host__name { font-size: var(--fs-3); }
.host__role { margin-top: .15em; }
.host__bio { margin-top: var(--space-xs); color: var(--fg-soft); max-width: 42ch; }
@media (hover: hover) and (pointer: fine) {
  .host__portrait > img { transition: opacity .9s var(--ease-out), transform .8s var(--ease-out); }
  .host:hover .host__portrait > img.is-loaded { transform: scale(1.05); }
}

/* ---- Testimonials: editorial two-column, first quote spans both ---- */
.hosts__quotes { margin-bottom: var(--space-2xl); }
.hosts__quotes-head { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-xl); }
.hosts__quotes-head .rule { flex: 1 1 auto; }
.quotes { display: grid; gap: var(--space-2xl) var(--space-2xl); }
@media (min-width: 40rem) {
  .quotes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quote--lead { grid-column: 1 / -1; }
}
@media (min-width: 56.25rem) { .quotes { column-gap: var(--space-3xl); } }
.quote { position: relative; margin: 0; display: grid; gap: var(--space-m); min-width: 0; }
.quote__mark {
  position: absolute; left: 0; font-family: var(--font-display); font-weight: 400; font-style: normal;
  color: var(--accent); line-height: 1; pointer-events: none; user-select: none;
}
.quote__text { font-family: var(--font-display); font-style: italic; font-weight: 300; letter-spacing: -.01em; text-wrap: pretty; }
.quote__by { font-style: normal; }
/* lead */
.quote--lead { padding-left: clamp(2.6rem, 7vw, 6.5rem); padding-top: .5rem; }
.quote--lead .quote__mark { top: -.02em; font-size: var(--fs-6); }
.quote--lead .quote__text { font-size: var(--fs-3); line-height: 1.22; max-width: 28ch; }
/* small */
.quote--small { padding-left: clamp(1.7rem, 4.5vw, 2.6rem); }
.quote--small .quote__rule { grid-column: 1 / -1; margin-left: calc(-1 * clamp(1.7rem, 4.5vw, 2.6rem)); margin-bottom: var(--space-xs); }
.quote--small .quote__mark { top: calc(var(--space-m) + var(--space-xs) + .06em); font-size: var(--fs-4); line-height: .9; }
.quote--small .quote__text { font-size: var(--fs-2); line-height: 1.28; max-width: 32ch; }

/* ---- Meet the group: sand band, full bleed, own inner column ---- */
.hosts__group { padding: var(--space-2xl) calc(var(--gutter) + env(safe-area-inset-left)) var(--space-2xl) calc(var(--gutter) + env(safe-area-inset-right)); }
.hosts__group-inner { max-width: var(--measure); margin-inline: auto; display: grid; gap: var(--space-l); }
@media (min-width: 56.25rem) {
  .hosts__group-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-2xl); }
}
.hosts__group-copy { display: grid; gap: var(--space-s); }
.hosts__group-copy h3 { max-width: 14ch; margin-bottom: var(--space-2xs); }
.hosts__group-copy p:not(.eyebrow) { max-width: 52ch; }
.hosts__group-copy .meta { margin-top: var(--space-2xs); }
.hosts__group-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); }
@media (pointer: coarse) { .hosts .link { min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); } }  /* shared ≥44px text-link rule (same as FAQ) */


/* ==== 08-follow.css ==== */
/* ===== 08 · Follow the journey (Instagram wall + share) ===== */
.follow { --bg: var(--bone); overflow-x: clip; } /* --bg follows the band so .btn hover / solid text is bone, not ivory */
.follow__head { align-items: end; }
.follow__head > div { display: grid; gap: var(--space-s); justify-items: start; }
.follow__handle { display: inline-flex; align-items: center; color: inherit; padding-block: .5rem; margin-block: -.5rem; transition: color .35s; }
.follow__handle:hover, .follow__handle:focus-visible { color: var(--accent); }
@media (min-width: 60rem) { .follow__head .lead { justify-self: end; max-width: 36ch; } }

/* ---- Tile (an <a> to the profile) ---- */
.ig__tile { display: block; color: inherit; -webkit-tap-highlight-color: transparent; }
.ig__frame {
  display: block; background: var(--cream); padding: 12px 12px 0;
  border: 1px solid var(--hairline);
  transition: border-color .5s var(--ease-out);
}
.ig__tile:hover .ig__frame, .ig__tile:focus-visible .ig__frame { border-color: var(--accent); }
.ig__frame .media img { transition: opacity .9s var(--ease-out), transform .8s var(--ease-out); } /* hover zoom 1.05 over .8s, same as experiences/hosts */
.ig__tile:hover .ig__frame .media img.is-loaded { transform: scale(1.05); }
.ig__cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .7rem .1rem .8rem;
  font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.2;
  color: var(--fg-soft); white-space: nowrap; overflow: hidden;
}
.ig__cap > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ig__cap-idx { font-size: 1rem; letter-spacing: 0; color: var(--accent); }
.ig__badge {
  position: absolute; z-index: 3; top: .6rem; left: .6rem;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .32em .6em .3em; border-radius: 999px;
  background: rgb(34 31 32 / .7); color: var(--cream); /* no backdrop blur: re-rasterised every scroll frame in in-app webviews */
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; line-height: 1;
}
.ig__badge i { display: inline-block; width: 0; height: 0; border-style: solid; border-width: .28em 0 .28em .45em; border-color: transparent transparent transparent currentColor; }

/* ---- Mobile / tablet: horizontal scroll-snap strip ---- */
.follow__wall {
  display: flex; align-items: flex-start; gap: var(--space-s);
  overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: var(--space-2xs) var(--gutter) var(--space-xs);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.follow__wall::-webkit-scrollbar { display: none; }
.follow__wall > .ig__tile { flex: 0 0 min(72vw, 22rem); scroll-snap-align: start; }
.follow__swipe { display: inline-flex; align-items: center; gap: .4em; margin-top: var(--space-2xs); }
.follow__swipe .btn__arrow { font-family: var(--font-display); font-size: 1.15em; line-height: 1; animation: follow-nudge 2.4s var(--ease-inout) infinite; }
@keyframes follow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.35em); } }
@media (max-height: 500px) and (orientation: landscape) {
  .follow__wall > .ig__tile { flex-basis: min(40vw, 18rem); }
}

/* ---- Desktop: scattered polaroid canvas ---- */
@media (min-width: 56.25rem) {
  .follow > .follow__wall {
    grid-column: wide; display: block; position: relative;
    aspect-ratio: 16 / 9; overflow: visible; padding: 0; margin-top: var(--space-s);
    scroll-snap-type: none;
  }
  .follow__wall > .ig__tile {
    position: absolute; left: var(--l); top: var(--t); width: var(--w); z-index: var(--z, 1);
    transform: rotate(var(--rot, 0deg));
    transition: transform .9s var(--ease-out), z-index 0s linear .0s;
  }
  .follow__wall > .ig__tile:hover, .follow__wall > .ig__tile:focus-visible { transform: rotate(0deg) scale(1.04); z-index: 30; }
  .ig__frame { padding: 12px 12px 0; }
  .follow__swipe { display: none; }
}
@media (min-width: 56.25rem) and (max-width: 75rem) {
  .ig__cap { font-size: .62rem; letter-spacing: .12em; padding: .55rem .05rem .6rem; }
  .ig__cap-idx { font-size: .85rem; }
}

/* ---- Footer row: share + hashtag ---- */
.follow__foot { display: grid; gap: var(--space-m); margin-top: var(--space-xl); }
.follow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.follow__tag { letter-spacing: .06em; }
/* Two columns only once the button + link fit on one line (they wrap at 768, which left the
   hashtag floating mid-height beside a stacked pair); below that the hashtag sits underneath. */
@media (min-width: 64rem) {
  .follow__foot { grid-template-columns: 1fr auto; align-items: center; }
  .follow__rule { grid-column: 1 / -1; }
  .follow__tag { text-align: right; }
}
@media (pointer: coarse) {
  .follow__share { min-height: 3rem; }
  .follow .link { min-height: 2.75rem; align-items: center; padding-bottom: 0; background-position: 0 calc(50% + .8em); } /* shared 44px link rule (same as FAQ) */
  .follow__handle { padding-block: 1.05rem; margin-block: -1.05rem; } /* 44px tap target without pushing the heading down */
}

/* ---- Toast (element is created by 08-follow.js; hidden state is not content) ---- */
.toast {
  position: fixed; left: 50%; z-index: 200;
  bottom: calc(var(--space-l) + 3.6rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 10px); opacity: 0; visibility: hidden;
  padding: .75rem 1.2rem; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .45s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (min-width: 64rem) { .toast { bottom: calc(var(--space-l) + env(safe-area-inset-bottom)); } }


/* ==== 09-prepare.css ==== */
/* ===== 09 · Prepare ("Getting ready") ===== */
.prepare { --acc-pad: clamp(1rem, 0.8rem + 1vw, 1.5rem); --bg: var(--bone); --hairline-strong: rgb(34 31 32 / .28); }

/* tiny clay "verify" badge */
.prep-flag {
  display: inline-flex; align-items: center; gap: .35em; vertical-align: middle;
  margin-inline: .15em; padding: .28em .55em .22em;
  font-family: var(--font-body); font-weight: 400; font-size: .68rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
}
.lead .prep-flag { transform: translateY(-.1em); }

/* part scaffolding */
.prep-part { display: grid; gap: var(--space-l); }
.prep-part__head { display: grid; gap: var(--space-s); align-content: start; }
.prep-part__head h3 { max-width: 16ch; }
.prep-part__note { max-width: 34ch; }
.prep-rule { margin-block: var(--space-xl); grid-column: wide; }
@media (min-width: 60rem) {
  .prep-part--ess, .prep-part--pack { grid-template-columns: minmax(16rem, 2fr) 5fr; column-gap: var(--space-2xl); }
  .prep-part--pack > .prep-rules, .prep-part--pack > .prep-tabs { grid-column: 2; }
  .prep-part__head--sticky { position: sticky; top: calc(var(--nav-h) + var(--space-l)); }
}

/* ---------- A · Timeline ---------- */
.prep-tl { position: relative; display: grid; gap: var(--space-l); padding-left: 2rem; counter-reset: stop; }
.prep-tl__line { position: absolute; background: var(--hairline-strong); pointer-events: none; }
.prep-tl__line--h { display: none; }
.prep-tl__stop { position: relative; }
/* phones: one hairline segment per stop, from its dot to the next dot — the last stop draws none */
.prep-tl__seg { position: absolute; left: calc(-2rem + 4px); width: 1px; top: calc(.5em + 4.5px); bottom: calc(-1 * (var(--space-l) + .5em + 4.5px)); background: var(--hairline-strong); pointer-events: none; }
.prep-tl__dot {
  position: absolute; z-index: 1; left: calc(-2rem + 4px); top: .5em; width: 9px; height: 9px; margin-left: -4px;
  border-radius: 50%; background: var(--ivory); border: 1px solid var(--ink); box-shadow: 0 0 0 4px var(--bone);
}
.prep-tl__stop--now .prep-tl__dot { background: var(--clay); border-color: var(--clay); }
.prep-tl__body { display: grid; gap: var(--space-2xs); }
.prep-tl__when { color: var(--fg); font-weight: 400; }
.prep-tl__when span { color: var(--fg-soft); font-weight: 300; margin-left: .3em; }
.prep-tl__stop--now .prep-tl__when { color: var(--clay); }
.prep-tl__task { font-size: var(--fs--1); color: var(--fg-soft); max-width: 30ch; text-wrap: pretty; }
@media (min-width: 56.25rem) {
  .prep-tl { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-m); padding-left: 0; padding-top: var(--space-l); }
  .prep-tl__seg { display: none; }
  .prep-tl__line--h { display: block; left: 0; right: 0; top: 0; height: 1px; }
  .prep-tl__dot { left: 0; top: calc(var(--space-l) * -1); margin-left: 0; transform: translateY(-50%); }
  .prep-tl__stop { padding-right: var(--space-s); }
  .prep-tl__task { max-width: none; }
}

/* ---------- B · Essentials accordion ---------- */
.prep-acc { border-top: 1px solid var(--hairline); }
.prep-acc__item { border-bottom: 1px solid var(--hairline); }
.prep-acc__summary {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; column-gap: var(--space-s);
  padding: var(--acc-pad) 0; min-height: 3.5rem; cursor: pointer; list-style: none;
  transition: color .4s var(--ease-out);
}
.prep-acc__summary::-webkit-details-marker { display: none; }
.prep-acc__summary::marker { content: ''; }
.prep-acc__summary:hover { color: var(--clay); }
.prep-acc__n { font-size: var(--fs-1); color: var(--fg-soft); font-weight: 300; letter-spacing: .02em; }
.prep-acc__title { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.15; font-weight: 300; letter-spacing: -.01em; display: inline; }
.prep-acc__title .prep-flag { margin-left: .5em; transform: translateY(-.15em); }
.prep-acc__icon { position: relative; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; transition: transform .6s var(--ease-out); }
.prep-acc__icon::before, .prep-acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.prep-acc__icon::before { width: 1rem; height: 1px; }
.prep-acc__icon::after { width: 1px; height: 1rem; }
.prep-acc__item[open]:not(.is-closing) .prep-acc__icon { transform: rotate(45deg); }
.prep-acc__item[open] .prep-acc__summary { color: var(--fg); }
.prep-acc__body { overflow: clip; }
.prep-acc__inner { display: grid; gap: var(--space-s); justify-items: start; padding: 0 0 var(--space-m) 2.4rem; padding-left: calc(2.4rem + var(--space-s)); }
.prep-acc__inner p { max-width: 58ch; color: var(--fg-soft); }
@media (max-width: 40rem) {
  .prep-acc__summary { grid-template-columns: 1.8rem 1fr auto; }
  .prep-acc__inner { padding-left: 0; }
  .prep-acc__title .prep-flag { display: inline-flex; margin-left: .4em; }
}

/* ---------- C · Packing ---------- */
.prep-rules { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .prep-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .prep-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prep-rules__tile { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-m) var(--space-m) var(--space-l); background: var(--bone); }
.prep-rules__n { font-size: var(--fs-2); color: var(--clay); line-height: 1; margin-bottom: var(--space-xs); }
.prep-rules__tile h4 { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.1; letter-spacing: -.01em; font-weight: 300; }
.prep-rules__tile p { font-size: var(--fs--1); color: var(--fg-soft); }

.prep-tabs { display: grid; gap: var(--space-m); }
.prep-tabs__list {
  display: flex; gap: clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--hairline);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.prep-tabs__list::-webkit-scrollbar { display: none; }
@media (min-width: 40rem) and (max-width: 59.99rem) { .prep-tabs__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); padding-right: 3rem; } }
@media (min-width: 60rem) { .prep-tabs__list { margin-inline: 0; padding-inline: 0; } }
@media (pointer: coarse) { .prepare .link { min-height: 2.75rem; align-items: center; padding-bottom: 0; background-position: 0 calc(50% + .8em); } }
.prep-tab {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .5em;
  padding: .85rem 0 1rem; min-height: 3rem; border: 0; background: none; cursor: pointer; color: var(--fg-soft);
  font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 400; white-space: nowrap;
  transition: color .4s var(--ease-out);
}
.prep-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease-out); }
.prep-tab:hover { color: var(--fg); }
.prep-tab[aria-selected="true"] { color: var(--fg); }
.prep-tab[aria-selected="true"]::after { transform: scaleX(1); }
.prep-tab__n { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--clay); font-variant-numeric: tabular-nums; }
/* phones: all four tabs visible as a 2×2 hairline grid (no hidden scroller); tighter tracking so every label sits on one line at 375px */
@media (max-width: 39.99rem) {
  .prep-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-s); overflow: visible; margin-inline: 0; padding-inline: 0; border-bottom: 0; }
  .prep-tab { justify-content: space-between; font-size: .68rem; letter-spacing: .1em; padding: .8rem 0 .9rem; box-shadow: inset 0 -1px var(--hairline); }
  .prep-tab::after { bottom: 0; }
}
@media (max-width: 22.5rem) { .prep-tab { letter-spacing: .05em; } }
.prep-tabs__panels { position: relative; }
.prep-tabs__panel:focus-visible { outline-offset: 8px; }
.prep-tabs__panel + .prep-tabs__panel { margin-top: var(--space-l); }
.prep-tabs__panel[hidden] { display: none; }
.prep-tabs__panel[hidden] + .prep-tabs__panel { margin-top: 0; }
html.no-js .prep-tabs__panel::before { content: attr(data-label); display: block; font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-soft); margin-bottom: var(--space-s); }
html.no-js .prep-tabs__list { display: none; }
.prep-list { display: grid; grid-template-columns: 1fr; column-gap: var(--space-l); }
@media (min-width: 34rem) { .prep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prep-list li { border-bottom: 1px solid var(--hairline); }
.prep-check { position: relative; display: grid; grid-template-columns: 1.1rem 1fr; align-items: start; gap: var(--space-s); padding: .8rem 0; min-height: 2.9rem; cursor: pointer; }
.prep-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.prep-check__box { position: relative; width: 1.1rem; height: 1.1rem; margin-top: .3rem; border: 1px solid var(--ink); background: transparent; transition: background .35s var(--ease-out), border-color .35s; }
.prep-check__box::after { content: ''; position: absolute; left: .32rem; top: .08rem; width: .3rem; height: .58rem; border: solid var(--cream); border-width: 0 1px 1px 0; transform: rotate(45deg) scale(0); transform-origin: 50% 50%; transition: transform .35s var(--ease-out); }
.prep-check:hover .prep-check__box { border-color: var(--clay); }
.prep-check input:checked ~ .prep-check__box { background: var(--ink); }
.prep-check input:checked ~ .prep-check__box::after { transform: rotate(45deg) scale(1); }
.prep-check input:focus-visible ~ .prep-check__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.prep-check__label { font-size: var(--fs--1); line-height: 1.5; transition: color .4s var(--ease-out), opacity .4s; text-wrap: pretty; }
.prep-check input:checked ~ .prep-check__label { color: var(--fg-soft); text-decoration: line-through; text-decoration-color: var(--hairline); text-decoration-thickness: 1px; }
.prep-tabs__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.prep-tabs__reset { display: inline-flex; align-items: center; min-height: 2.75rem; border: 0; padding: 0; cursor: pointer; font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--clay); background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + .8em) / 100% 1px; }

/* ---------- D · Actions ---------- */
.prep-actions { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-m) var(--space-l); margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--hairline); }
.prep-actions__text { font-size: var(--fs-2); line-height: 1.2; }
.prep-actions__text .meta { display: block; font-family: var(--font-body); margin-top: .25em; }
.prep-actions__links { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); }

/* ---------- Print: only the packing list, all groups, ticks kept ---------- */
@media print {
  body > :not(main), main > :not(#prepare) { display: none !important; }
  #prepare, #prepare * { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
  #prepare { display: block; padding: 0; background: #fff; color: #000; }
  #prepare > :not(.prep-part--pack):not(.prepare__head) { display: none !important; }
  .prepare__head .lead { display: none; }
  .prep-part--pack { display: block; }
  .prep-part__head--sticky { position: static; }
  .prep-rules { grid-template-columns: repeat(2, 1fr); page-break-inside: avoid; margin-bottom: 1.5rem; }
  .prep-tabs__list, .prep-tabs__foot { display: none !important; }
  .prep-tabs__panel[hidden] { display: block !important; }
  .prep-tabs__panel { margin-top: 1.25rem !important; page-break-inside: avoid; }
  .prep-tabs__panel::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem; }
  .prep-list { grid-template-columns: repeat(2, 1fr); }
  .prep-check input { display: none !important; }
  .prep-check__box { border-color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prep-check input:checked ~ .prep-check__box { background: #000; }
  .prep-check input:checked ~ .prep-check__box::after { border-color: #fff; }
  .link .btn__arrow { display: none; }
}


/* ==== 10-faq.css ==== */
/* ===== 10 · FAQ ("Before you travel") =====
   One narrow column of native <details> rows with hairlines. Nothing here
   hides content: closed answers are hidden by <details> itself, the
   hairlines/fades are JS-only (data-line / data-fade) and once:true. */
.faq { --faq-pad: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); --faq-plus: 2.25rem; }
.faq__head { margin-bottom: var(--space-xl); }

/* the narrow column: 72% of the readable measure, pushed right on wide screens
   so the heading (left) and the questions (right) stagger like an editorial page */
.faq__col { position: relative; width: 100%; max-width: calc(var(--measure) * .72); }
@media (min-width: 64rem) { .faq__col { margin-inline-start: auto; } }

.faq__list { counter-reset: faq; }
.faq__item { position: relative; }

/* hairlines are real elements (not borders) so they can draw in on scroll */
.faq__hair { display: block; height: 1px; width: 100%; background: var(--hairline); }
.faq__col > .faq__hair { background: rgb(34 31 32 / .28); }

/* ---- question row ---- */
.faq__d { --q: var(--fg); }
.faq__q {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--faq-plus); align-items: center; column-gap: var(--space-m);
  padding: var(--faq-pad) 0; min-height: 3.75rem; cursor: pointer; list-style: none;
  color: var(--q); -webkit-tap-highlight-color: transparent;
  transition: color .5s var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q-text {
  font-family: var(--font-display); font-size: var(--fs-2); font-weight: 300; line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance;
}
.faq__q:hover, .faq__q:focus-visible { color: var(--clay); }
.faq__q:focus-visible { outline-offset: 0; }
.faq__d[open] .faq__q { color: var(--fg); }
/* while one row is open (JS adds .has-open) the others recede like Sanctum's dimmed rows */
.faq__list.has-open .faq__d:not([open]) .faq__q { color: var(--fg-soft); }
.faq__list.has-open .faq__d:not([open]) .faq__q:hover { color: var(--clay); }

/* + → × */
.faq__plus { position: relative; width: var(--faq-plus); height: var(--faq-plus); justify-self: end; transition: transform .8s var(--ease-out); }
.faq__plus::before, .faq__plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.faq__plus::before { width: 1.05rem; height: 1px; }
.faq__plus::after { width: 1px; height: 1.05rem; }
.faq__q:hover .faq__plus { transform: rotate(90deg); }
.faq__d[open]:not(.is-closing) .faq__plus, .faq__d[open]:not(.is-closing) .faq__q:hover .faq__plus { transform: rotate(135deg); }

/* ---- answer ---- */
.faq__body { overflow: clip; }
.faq__a { display: grid; gap: var(--space-s); justify-items: start; padding: 0 calc(var(--faq-plus) + var(--space-m)) var(--space-l) 0; }
.faq__a p { max-width: 56ch; color: var(--fg-soft); }
.faq__k { font-family: var(--font-display); font-size: 1.12em; line-height: 1; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.faq__a-link { margin-top: var(--space-2xs); }
.faq__note { max-width: 56ch; }

/* cancellation table (3 rows, hairlines only) */
.faq__table { width: 100%; max-width: 40rem; border-collapse: collapse; table-layout: fixed; font-size: var(--fs--1); text-align: left; margin-top: var(--space-2xs); }
.faq__table th, .faq__table td { padding: .8em 0; vertical-align: top; border-bottom: 1px solid var(--hairline); font-weight: 300; }
.faq__table thead th { padding-top: 0; font-size: var(--fs--2); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 400; color: var(--fg-soft); border-bottom-color: rgb(34 31 32 / .28); }
.faq__table tbody th { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.2; font-weight: 400; color: var(--fg); padding-right: var(--space-m); white-space: normal; font-variant-numeric: lining-nums; }
.faq__table tbody td { color: var(--fg-soft); }
.faq__table th:first-child { width: 40%; }
.faq__nb { white-space: nowrap; }
.faq__table tbody tr:last-child th, .faq__table tbody tr:last-child td { border-bottom: 0; }

/* ---- still wondering ---- */
.faq__more {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-l); row-gap: var(--space-xs);
  margin-top: var(--space-l); max-width: none;
}
.faq__more-text { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); line-height: 1.1; color: var(--fg); margin-right: var(--space-2xs); }
/* 44px tap target on touch (shared rule, same as every section); underline kept close to the text */
@media (pointer: coarse) { .faq .link { min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); } }
.faq__more .link[hidden] { display: none; }

/* answers should not be clipped when JS is off or mid-close */
html.no-js .faq__body { overflow: visible; }

@media (max-width: 40rem) {
  .faq { --faq-plus: 2rem; }
  .faq__q { column-gap: var(--space-s); }
  .faq__a { padding-right: 0; }
  .faq__table th:first-child { width: 46%; }
  .faq__table tbody th { font-size: var(--fs-0); }
}


/* ==== 11-reserve.css ==== */
/* ===== 11 · Reserve ===== */
.reserve [hidden] { display: none !important; }   /* .btn/.link/.check set display, which beats the UA [hidden] rule */
.reserve__title { max-width: 16ch; }

/* ---- Two columns from 60rem: form left, sticky aside right; stacked (form first) below ---- */
.reserve__body { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 60rem) {
  .reserve__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 7vw, 7rem); }
  .reserve__aside { position: sticky; top: calc(var(--nav-h) + var(--space-l)); }
}
@media (min-width: 80rem) { .reserve__body { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); } }
.reserve__main { min-width: 0; }
.reserve__aside { display: grid; gap: var(--space-l); min-width: 0; }

/* =====================================================================
   Fields — hairline underline, no boxes, label floats up to a small
   tracked caps line. The rule under each field draws in on scroll
   (data-line, core) and a clay line grows from the left on focus.
   ===================================================================== */
.rform { display: block; position: relative; }
.rform__fields { display: grid; gap: var(--space-m); }
.rform__row { display: grid; gap: var(--space-m) var(--space-l); }
@media (min-width: 40rem) { .rform__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.field { position: relative; display: grid; padding-top: 1.35rem; min-width: 0; }
.field__input {
  width: 100%; min-height: 3rem; margin: 0; padding: .45em 0 .55em;   /* ≥ 44px tap target on touch */
  background: transparent; border: 0; border-radius: 0; outline: 0;
  font-family: var(--font-body); font-weight: 300; font-size: var(--fs-0); line-height: 1.4; color: var(--fg);
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: transparent; }
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; -webkit-text-fill-color: var(--fg); transition: background-color 9999s; }
.field__input:focus-visible { outline: 0; }
.field__label {
  position: absolute; left: 0; top: calc(1.35rem + .45em); z-index: 1;
  font-size: var(--fs-0); font-weight: 300; line-height: 1.4; color: var(--fg-soft); white-space: nowrap; pointer-events: none;
  transform-origin: 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: transform .5s var(--ease-out), color .3s var(--ease-out), letter-spacing .5s var(--ease-out);
}
.field__opt { font-style: italic; color: var(--taupe); }
/* floated state */
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field--select .field__label,
.field.is-floated .field__label {
  transform: translateY(-1.55rem) scale(.78); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; color: var(--fg-soft);
}
.field__input:focus ~ .field__label { color: var(--fg); }
/* the hairline (drawn on scroll by data-line) + a clay focus line that grows over it */
.field__line { position: relative; display: block; height: 1px; background: rgb(34 31 32 / .28); }   /* strong hairline (site-wide .28) */
.field__line::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.field:focus-within .field__line::after { transform: scaleX(1); }
.field.is-invalid .field__line { background: var(--accent); opacity: .9; }
.field.is-invalid .field__label { color: var(--accent); }
.field__error { min-height: 0; margin: 0; font-size: var(--fs--2); letter-spacing: .04em; color: var(--accent); line-height: 1.4; transition: margin .3s; }
.field__error:not(:empty) { margin-top: .5rem; }

/* textarea: single hairline row that grows with the text */
.field--area .field__input { resize: none; overflow: hidden; min-height: 3rem; }
.field__label { max-width: calc(100% / .78); }
.field--area .field__label { white-space: normal; line-height: 1.35; }
/* once floated, the long textarea label drops its parenthesised hint and stays on one line */
.field--area .field__input:focus ~ .field__label, .field--area .field__input:not(:placeholder-shown) ~ .field__label, .field--area.is-floated .field__label { white-space: nowrap; }
.field--area .field__input:focus ~ .field__label .field__opt, .field--area .field__input:not(:placeholder-shown) ~ .field__label .field__opt, .field--area.is-floated .field__label .field__opt { display: none; }
@media (max-width: 40rem) { .field--area .field__label .field__opt { display: none; } }

/* select: native control, custom chevron, label always floated */
.field--select .field__input { padding-right: 2rem; cursor: pointer; }
.field--select select:invalid, .field--select select option[value=""] { color: var(--fg-soft); }
.field--select .field__input:has(option[value=""]:checked) { color: var(--fg-soft); }
.field__chev { position: absolute; right: .1rem; top: calc(1.35rem + 1rem); width: 1rem; height: 1rem; pointer-events: none; color: var(--fg-soft); transition: transform .5s var(--ease-out); }
.field__chev path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.field--select:focus-within .field__chev { transform: translateY(2px); color: var(--fg); }

/* checkbox: the input itself is the 44px hit-area; the square + tick are backgrounds (no opacity:0 tricks) */
.field--check { padding-top: .25rem; }
.check { display: flex; align-items: flex-start; gap: .35rem; cursor: pointer; font-size: var(--fs--1); line-height: 1.5; color: var(--fg-soft); }
.check__input {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; margin: -.7rem 0 -.7rem -.8rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' fill='none' stroke='%23221F20' stroke-opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 1.2rem 1.2rem;
  transition: background-image .2s;
}
.check__input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' fill='%23B8764F' stroke='%23B8764F'/%3E%3Cpath d='M5 10.5l3.4 3.4L15 7' fill='none' stroke='%23FBF9F3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check__input:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; }
.check__text { padding-top: .1em; }
.check__link { color: var(--fg); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: .05em; transition: color .3s; }
.check__link:hover { color: var(--accent); }
.field--check.is-invalid .check__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' fill='none' stroke='%23B8764F'/%3E%3C/svg%3E"); }

/* honeypot: off-screen (never display:none), zero footprint */
.rform__hp { position: absolute; left: -9999px; top: 0; width: 0; height: 0; overflow: hidden; }
.rform__hp input { width: 0; height: 0; border: 0; padding: 0; margin: 0; }

/* actions + status + trust */
.rform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-xs); }
.rform__submit { position: relative; }
.btn__spinner { display: none; width: 1em; height: 1em; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rv-spin .85s linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rform[data-state="sending"] .btn__spinner { display: inline-block; }
.rform[data-state="sending"] .rform__submit .btn__arrow { display: none; }
.rform[data-state="sending"] .rform__submit { pointer-events: none; opacity: .72; }
.rform[data-state="sending"] .field__input { pointer-events: none; }
.rform__status { margin: 0; min-height: 0; font-size: var(--fs--1); color: var(--fg-soft); line-height: 1.5; max-width: 52ch; }
.rform__status:empty { display: none; }
.rform[data-state="error"] .rform__status { color: var(--accent); }
.rform__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.rform__fallback .meta { flex-basis: 100%; }
.rform__trust { --sep-w: 1.6rem; display: flex; align-items: flex-start; margin-top: var(--space-l); max-width: none; font-size: var(--fs--2); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.5; }
.rform__trust-icon { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .1em .6rem 0 0; color: var(--accent); }
.rform__trust-icon rect, .rform__trust-icon path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
/* clipped box + list shifted left by one separator width → a separator that lands at the
   start of a wrapped line is clipped, never orphaned */
.rform__trust-clip { display: block; flex: 1 1 auto; min-width: 0; overflow: clip; }
.rform__trust-list { display: flex; flex-wrap: wrap; gap: .3rem 0; margin-left: calc(-1 * var(--sep-w)); }
.rform__trust-list > span { white-space: nowrap; }
.rform__trust-list > span::before { content: '·'; display: inline-block; width: var(--sep-w); text-align: center; color: var(--taupe); }
html.js .rform--main[data-state="success"] ~ .rform__trust { display: none; }

/* success panels */
.rform__success { display: grid; gap: var(--space-s); padding-block: var(--space-m); outline: 0; }
.rform__success-mark { display: block; width: 3rem; height: 3rem; color: var(--accent); margin-bottom: var(--space-2xs); }
.rform__success-mark svg { width: 100%; height: 100%; overflow: visible; }
.rform__success-mark circle, .rform__success-mark path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.rform__success-title { max-width: 18ch; }
.rform__success-copy { color: var(--fg-soft); max-width: 44ch; }
.rform__success-sw { font-family: var(--font-display); font-size: var(--fs-2); color: var(--accent); }
.rform__success-links { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xs); }
.rform__success--mini { padding-block: var(--space-xs) 0; }
.rform__success-mini-title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-2); line-height: 1.15; }
.rform__success--mini .rform__success-copy { font-size: var(--fs--1); }
/* referral code: large serif, tracked */
.rcode { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: .1em; color: var(--fg); white-space: nowrap; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; max-width: 100%; }
.rcode .rcode__c { display: inline-block; }   /* will-change is set by GSAP for the tween only */
.rform__copy { border: 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding: 0 0 .25em; cursor: pointer; color: inherit; }
.rform__copy:hover { background-size: 0 1px; color: var(--accent); }

/* =====================================================================
   Side cards — cream panels, hairline top rule that draws in
   ===================================================================== */
.rcard { position: relative; display: grid; gap: var(--space-xs); padding: var(--space-l) var(--space-m); background: var(--cream); border: 1px solid var(--hairline); border-top: 0; border-radius: 2px; min-width: 0; }
@media (min-width: 40rem) { .rcard { padding: var(--space-l); } }
.rcard__rule { position: absolute; left: -1px; right: -1px; top: 0; height: 1px; background: var(--accent); }
.rcard__eyebrow { color: var(--taupe); }
.rcard__title { font-size: var(--fs-2); line-height: 1.12; max-width: 16ch; margin-top: .15em; }
.rcard__copy { font-size: var(--fs--1); color: var(--fg-soft); max-width: 40ch; margin-bottom: var(--space-2xs); }
.rcard .rform__fields { gap: var(--space-s); }
.rcard .field { padding-top: 1.2rem; }
.rcard .field__input { font-size: var(--fs--1); min-height: 2.75rem; }
.rcard .field__label { top: calc(1.2rem + .5em); font-size: var(--fs--1); }
.rcard .field__input:focus ~ .field__label, .rcard .field__input:not(:placeholder-shown) ~ .field__label, .rcard .field.is-floated .field__label { transform: translateY(-1.35rem) scale(.82); }
.rcard .rform__actions { margin-top: var(--space-2xs); }
.rcard .rform__submit { min-height: 2.75rem; padding: .8em 1.5em; }
.rcard .check { font-size: var(--fs--2); letter-spacing: .01em; }

/* touch: 44px tap targets — the shared uppercase-link rule (same as FAQ/base) + the inline Privacy link */
@media (pointer: coarse) {
  .reserve .link, .reserve .rform__copy { display: inline-flex; min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); }
  .check__link { padding-block: .85em; background-position: 0 calc(100% - .8em); }   /* inline padding = 44px hit-area with no line-box growth */
  .rcard .field__input { min-height: 3rem; }
}

/* landscape phones: keep everything stacked and compact */
@media (max-height: 500px) and (orientation: landscape) {
  .reserve { padding-block: var(--space-xl); }
  .reserve__body { gap: var(--space-xl); }
}


/* ==== 12-footer.css ==== */
/* ===== 12 · Contact band + Footer ===== */

/* ---------- A. Final CTA band (forest, full-bleed via .section background) ---------- */
.contact { overflow: clip; padding-block: var(--space-2xl) var(--space-3xl); }
.contact__horizon { position: relative; height: clamp(3rem, 8vw, 5.5rem); margin-bottom: var(--space-xl); }
.contact__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(245 242 235 / .28); } /* strong hairline (dark) */
.contact__sun {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(2rem, 4.5vw, 3.5rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--clay); transform: translate(-50%, 50%); /* half-set on the horizon; JS lifts it while the line draws */
}
.contact__grid { display: grid; gap: var(--space-xl); }
.contact__copy, .contact__side { display: grid; gap: var(--space-m); align-content: start; }
.contact__eyebrow { color: var(--stone); }
.contact__title { font-size: var(--fs-5); line-height: .98; max-width: 10ch; color: var(--cream); }
.contact__title em { color: var(--clay-2); }
.contact__coords { color: var(--stone); letter-spacing: .06em; }
.contact__coords .num { letter-spacing: .04em; font-size: 1.05em; }
.contact__coords .serif { font-size: 1.15em; color: var(--sand); }
/* separators travel with the item before them, so a wrapped line never starts with "·" */
.contact__coords-item { white-space: nowrap; }
.contact__sep { color: var(--stone); opacity: .7; }
.contact__date { color: var(--cream); opacity: .92; max-width: 34ch; }
.contact__date [data-spots-line] { display: block; color: var(--stone); font-family: var(--font-display); font-style: italic; font-size: 1.15em; margin-top: .15em; }
html.is-waitlist .contact__date [data-spots-line] { color: var(--clay-2); }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.contact .btn--accent { background: var(--clay); border-color: var(--clay); color: var(--cream); }
.contact .btn--accent::before { background: var(--cream); }
.contact .btn--accent:hover { color: var(--forest); border-color: var(--cream); }
.contact__wa { color: var(--cream); border-color: rgb(245 242 235 / .55); }
.contact__wa[hidden], .footer [hidden] { display: none; } /* .btn/.footer__list a set display; keep the hidden attribute authoritative */
.contact__wa::before { background: var(--cream); }
.contact__wa:hover { color: var(--forest); border-color: var(--cream); }
.contact__mail { color: var(--stone); justify-self: start; }
.contact__mail:hover { color: var(--clay-2); }
@media (min-width: 60rem) {
  .contact__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-2xl); }
  .contact__side { padding-bottom: .35em; }
  .contact__cta { margin-top: var(--space-2xs); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .contact { padding-block: var(--space-xl) var(--space-2xl); }
  .contact__horizon { margin-bottom: var(--space-l); }
}

/* ---------- B. Footer (ivory) ---------- */
.footer { background: var(--ivory); color: var(--ink); padding-block: var(--space-2xl) var(--space-xl); row-gap: 0; }
.footer > * { min-width: 0; }

/* Giant tracked wordmark — decorative. --wm-size is a CSS estimate that fits
   "BUMI Wellness" across the wide column; 12-footer.js measures and
   overrides it so any brand name fits exactly. Never overflows (clip). */
.footer__wordmark {
  --wm-size: clamp(1.5rem, 5.75vw, 10.5rem);
  overflow: clip; text-align: center; margin-bottom: var(--space-l);
  padding-block: .1em; line-height: 1;
}
.footer__wm {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 300; font-size: var(--wm-size); line-height: 1;
  letter-spacing: .2em; text-indent: .2em; /* balance the trailing tracking so the word sits centred */
  text-transform: uppercase; color: var(--stone); opacity: .55;
  -webkit-user-select: none; user-select: none;
}
.footer__wm .wm__c { display: inline-block; will-change: auto; } /* JS promotes only while the letters rise, then clears */
.footer__rule { border-top-color: rgb(34 31 32 / .28); } /* strong hairline (light) */

.footer__cols {
  display: grid; gap: var(--space-l) var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--space-xl);
}
@media (min-width: 48rem) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); } }
.footer__col { display: grid; gap: var(--space-s); align-content: start; }
.footer__col-title { color: var(--ink); }
.footer__list { display: grid; gap: .55em; }
.footer__list a, .footer__share {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs--1); font-weight: 300; color: var(--ink-2); line-height: 1.3;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .5s var(--ease-out), color .3s;
  border: 0; padding: 0; cursor: pointer; text-align: left;
}
.footer__list a:hover, .footer__share:hover { color: var(--ink); background-size: 100% 1px; }
.footer__list a[hidden] { display: none; }

.footer__fine { display: grid; gap: var(--space-s); padding-top: var(--space-l); border-top: 1px solid var(--hairline); }
.footer__credits, .footer__legal { max-width: 88ch; font-size: var(--fs--2); letter-spacing: .03em; line-height: 1.55; color: var(--taupe); }
.footer__legal { color: var(--ink-2); }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--hairline);
}
.footer__links { display: flex; flex-wrap: wrap; gap: .25em var(--space-m); }
.footer__links a {
  display: inline-flex; align-items: center;
  font-size: var(--fs--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .5s var(--ease-out), color .3s;
}
.footer__links a:hover { color: var(--ink); background-size: 100% 1px; }
.footer__colophon { font-size: var(--fs--2); letter-spacing: .06em; color: var(--taupe); display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.footer__colophon-sep { color: var(--stone); }
.footer__top { display: inline-flex; align-items: center; gap: .35em; color: var(--ink-2); }
.footer__top .btn__arrow { font-family: var(--font-display); font-size: 1.2em; line-height: 1; }
.footer__top:hover { color: var(--accent); }
.footer__top:hover .btn__arrow { transform: translateY(-.2em); }

/* Touch: every footer link is a ≥44px target */
@media (pointer: coarse) {
  .footer__list { gap: .1em; }
  .footer__list a, .footer__share, .footer__links a, .footer__top { min-height: 2.75rem; }
  .footer__links a { min-width: 2.75rem; }
  .footer__links { gap: 0 var(--space-m); }
}
/* Shared uppercase-link touch rule (same as every other section) */
@media (pointer: coarse) { .contact .link { min-height: 2.75rem; align-items: center; padding-block: 0; background-position: 0 calc(50% + .8em); } }
/* Clear the sticky mobile CTA (it shows again once #reserve scrolls out; it hides at ≥64rem, so stop exactly below that) */
@media (max-width: 63.99rem) { .footer { padding-bottom: calc(var(--space-xl) + 4.5rem + env(safe-area-inset-bottom)); } }

/* ---------- Toast (element created by 12-footer.js; hidden state is chrome, not content) ---------- */
.ft-toast {
  position: fixed; left: 50%; z-index: 200;
  bottom: calc(var(--space-l) + 3.6rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 10px); opacity: 0; visibility: hidden;
  max-width: min(92vw, 30rem); padding: .8rem 1.25rem; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: var(--fs--2); letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; text-align: center; text-wrap: balance;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .45s;
  pointer-events: none;
}
.ft-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (min-width: 64rem) { .ft-toast { bottom: calc(var(--space-l) + env(safe-area-inset-bottom)); } }