/* ==========================================================================
   Globeseekers — Elemental design system
   Colours in OKLCH. Tokens stored as "L C H" triples, wrapped at point of use:
   background: oklch(var(--ink));  scrim: oklch(var(--ink) / .6)
   ========================================================================== */

:root {
  /* base ink */
  --ink: 0.165 0.014 220;
  --ink-2: 0.205 0.016 218;
  --ink-3: 0.27 0.018 216;
  --on-ink: 0.95 0.008 90;
  --on-ink-muted: 0.74 0.012 95;
  --hairline-ink: 0.95 0.008 90;        /* used with low alpha */

  /* paper (warm light) */
  --paper: 0.955 0.012 86;
  --paper-2: 0.915 0.018 80;
  --sand: 0.86 0.03 74;
  --on-paper: 0.24 0.022 60;
  --on-paper-muted: 0.44 0.022 60;

  /* accent */
  --amber: 0.80 0.135 73;
  --amber-2: 0.72 0.155 64;

  /* worlds — three distinct colour-worlds. Per world:
     main wash · deep (scrims / dark surfaces) · -2 light accent (legible over
     photos & ink) · -tone deep accent (legible on paper) */
  --mtn: 0.55 0.15 250;   --mtn-deep: 0.26 0.085 256;  --mtn-2: 0.83 0.07 214;   --mtn-tone: 0.50 0.12 248;  /* glacial blue / soft ice */
  --ocn: 0.70 0.16 186;   --ocn-deep: 0.29 0.085 190;  --ocn-2: 0.81 0.125 64;   --ocn-tone: 0.58 0.165 52;  /* turquoise / soft gold */
  --med: 0.60 0.14 226;   --med-deep: 0.33 0.09 230;   --med-2: 0.63 0.14 38;    --med-tone: 0.56 0.15 38;   --med-lite: 0.82 0.085 46;  /* Adriatic azure / terracotta (lite = legible over photos) */

  /* the currently active world colour (driven by JS scroll) */
  --active: 0.55 0.15 250;
  --active-deep: 0.26 0.085 256;

  /* fluid type scale */
  --t-hero: clamp(2.6rem, 1rem + 5.2vw, 6rem);
  --t-h1:   clamp(2.3rem, 1.3rem + 4.4vw, 5rem);
  --t-h2:   clamp(1.8rem, 1.2rem + 2.7vw, 3.25rem);
  --t-h3:   clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  --t-lede: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  --t-body: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;

  /* spacing rhythm */
  --pad-x: clamp(1.25rem, 0.5rem + 4vw, 6rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);

  --maxw: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);      /* ease-out-quint-ish */
}

/* ------------------------------ reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  color: oklch(var(--on-ink));
  background: oklch(var(--ink));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
::selection { background: oklch(var(--amber) / .9); color: oklch(0.2 0.02 70); }

:focus-visible {
  outline: 2px solid oklch(var(--amber));
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------ layout ---------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-wide { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.measure { max-width: 60ch; }
.measure-wide { max-width: 72ch; }

.surface-ink   { background: oklch(var(--ink));   color: oklch(var(--on-ink)); }
.surface-ink2  { background: oklch(var(--ink-2)); color: oklch(var(--on-ink)); }
.surface-paper { background: oklch(var(--paper)); color: oklch(var(--on-paper)); }
.surface-paper .muted { color: oklch(var(--on-paper-muted)); }
.muted { color: oklch(var(--on-ink-muted)); }

/* ----------------------------- typography ------------------------------- */
.display {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 110;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); font-weight: 900; font-variation-settings: "wght" 900, "wdth" 112; line-height: 0.92; letter-spacing: -0.025em; }
.t-h1   { font-size: var(--t-h1); }
.t-h2   { font-size: var(--t-h2); }
.t-h3   { font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.015em; }
.lede   { font-size: var(--t-lede); line-height: 1.5; }

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: oklch(var(--amber));
}
.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 3vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
.eyebrow.no-rule::before { display: none; }
.surface-paper .eyebrow { color: oklch(var(--med-2)); }

.label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.serifless-num {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 500, "wdth" 110;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

p.flow + p.flow { margin-top: 1em; }

/* ----------------------------- buttons ---------------------------------- */
.btn {
  --btn-pad-y: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em;
  padding: var(--btn-pad-y) 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: transform .5s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Ember: a lit amber surface, not a flat sticker. Vertical heat gradient +
   layered glow so the primary action feels warm and dimensional. */
.btn-amber {
  color: oklch(0.20 0.035 70);
  background: linear-gradient(180deg,
    oklch(0.85 0.13 80) 0%, oklch(var(--amber)) 44%, oklch(var(--amber-2)) 100%);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .40) inset,
    0 -1px 0 oklch(0.42 0.10 58 / .45) inset,
    0 12px 30px -12px oklch(var(--amber) / .9),
    0 2px 7px -2px oklch(0.18 0.05 58 / .5);
}
.btn-amber:hover {
  color: oklch(0.18 0.03 72);
  background: linear-gradient(180deg,
    oklch(0.88 0.135 82) 0%, oklch(0.82 0.145 75) 46%, oklch(var(--amber-2)) 100%);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .50) inset,
    0 -1px 0 oklch(0.42 0.10 58 / .5) inset,
    0 20px 46px -14px oklch(var(--amber) / 1),
    0 3px 11px -2px oklch(0.18 0.05 58 / .55);
}

.btn-ghost {
  border: 1px solid oklch(var(--on-ink) / .35);
  color: oklch(var(--on-ink));
  backdrop-filter: blur(2px);
}
.btn-ghost:hover { border-color: oklch(var(--on-ink) / .8); background: oklch(var(--on-ink) / .06); }

.btn-dark {
  border: 1px solid oklch(var(--on-paper) / .25);
  color: oklch(var(--on-paper));
}
.btn-dark:hover { background: oklch(var(--on-paper)); color: oklch(var(--paper)); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; letter-spacing: 0.01em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .4s var(--ease), opacity .3s;
}
.link-arrow:hover { gap: 0.85em; }

/* ------------------------------ chips ----------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 0.5em 0.95em;
  border-radius: 999px;
  border: 1px solid oklch(var(--on-ink) / .2);
  font-size: var(--t-sm);
  color: oklch(var(--on-ink) / .9);
  background: oklch(var(--on-ink) / .04);
}
.surface-paper .chip { border-color: oklch(var(--on-paper) / .18); color: oklch(var(--on-paper) / .9); background: oklch(var(--on-paper) / .03); }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.hairline { height: 1px; background: oklch(var(--on-ink) / .14); border: 0; }
.surface-paper .hairline { background: oklch(var(--on-paper) / .14); }

/* ============================== header ================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 2vw, 1.4rem) var(--pad-x);
  color: oklch(var(--on-ink));
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid {
  background: oklch(var(--ink) / .82);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 oklch(var(--on-ink) / .08);
  padding-block: clamp(0.7rem, 1.4vw, 1rem);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; z-index: 2; }
.brand svg { width: clamp(2rem, 4vw, 2.4rem); height: auto; }
.brand .wordmark {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a.navlink {
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  position: relative; padding-block: 0.3rem;
  color: oklch(var(--on-ink) / .82);
  transition: color .3s;
}
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: oklch(var(--on-ink)); }
.nav a.navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: oklch(var(--amber)); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a.navlink:hover::after, .nav a.navlink[aria-current="page"]::after { transform: scaleX(1); }

.nav-desktop { display: none; }
.menu-toggle { display: inline-flex; }
@media (min-width: 920px) {
  .nav-desktop { display: flex; }
  .menu-toggle { display: none; }
}

.menu-toggle {
  width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid oklch(var(--on-ink) / .25);
  z-index: 70;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: ""; display: block; width: 18px; height: 1.6px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
body.menu-open .menu-toggle span { background: transparent; }
body.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 65;
  background: oklch(var(--ink) / .98);
  backdrop-filter: blur(8px);
  display: grid; align-content: center; gap: 0.4rem;
  padding: 6rem var(--pad-x) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-1.5%);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 110;
  font-size: clamp(2rem, 9vw, 3.5rem);
  letter-spacing: -0.02em; line-height: 1.1;
  color: oklch(var(--on-ink) / .9);
  padding-block: 0.35rem;
  transition: color .3s, padding-left .4s var(--ease);
}
.mobile-menu a:hover { color: oklch(var(--amber)); padding-left: 0.4rem; }
.mobile-menu .mm-meta { margin-top: 2rem; color: oklch(var(--on-ink-muted)); font-size: var(--t-sm); }
.mobile-menu .mm-meta a {
  font-family: "Hanken Grotesk", sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.4;
  color: oklch(var(--amber));
  padding: 0;
}
.mobile-menu .mm-meta a:hover { padding-left: 0; color: oklch(var(--amber-2)); }

/* ============================== hero ==================================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: clamp(7rem, 15vh, 10rem);
  padding-bottom: clamp(3rem, 7vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* still frame that cross-fades in once the hero video finishes */
.hero-media .hero-endframe { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); will-change: opacity; }
.hero-endframe.is-shown { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, oklch(var(--ink)) 2%, oklch(var(--ink) / .55) 26%, oklch(var(--ink) / .12) 55%, oklch(var(--ink) / .35) 100%),
    linear-gradient(to right, oklch(var(--ink) / .55), transparent 60%);
}
/* video heroes: keep the bottom dark enough for type, but let the footage show */
.hero--video .hero-scrim {
  background:
    linear-gradient(to top, oklch(var(--ink) / .95) 0%, oklch(var(--ink) / .72) 22%, oklch(var(--ink) / .42) 52%, oklch(var(--ink) / .45) 100%),
    linear-gradient(to right, oklch(var(--ink) / .66), oklch(var(--ink) / .22) 55%, oklch(var(--ink) / .06) 100%);
}
/* retreat sub-page hero: tint the scrim with the location's world colour */
.hero--retreat .hero-scrim {
  background:
    linear-gradient(to top, oklch(var(--ink)) 0%, oklch(var(--c-deep, var(--ink)) / .72) 30%, oklch(var(--c-deep, var(--ink)) / .2) 66%, oklch(var(--ink) / .45) 100%),
    linear-gradient(to right, oklch(var(--ink) / .68), oklch(var(--ink) / .12) 62%, transparent 90%);
}

/* schedule rows reuse .style-row but keep the time label legible */
.sched .n { color: oklch(var(--amber)); padding-top: .5rem; white-space: nowrap; }

/* insurance for the brightest video frames: a soft shadow keeps type legible */
.hero--video h1,
.hero--video .lede,
.hero--video .hero-kicker,
.hero--video .hero-meta { text-shadow: 0 1px 22px oklch(var(--ink) / .5); }
.hero-inner { width: 100%; }
.hero-kicker { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.hero h1 { margin-bottom: clamp(1.1rem, 2vw, 1.8rem); max-width: 16ch; }
.hero .lede { max-width: 46ch; color: oklch(var(--on-ink) / .9); }
.hero-cta { margin-top: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.hero-meta {
  margin-top: clamp(2.2rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid oklch(var(--on-ink) / .16);
}
.hero-meta .item .k { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 700, "wdth" 110; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; }
.hero-meta .item .k .star { color: oklch(var(--amber)); font-size: .82em; margin-left: .06em; }
.hero-meta .item .v { color: oklch(var(--on-ink-muted)); font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; margin-top: .45rem; }


/* ============================ world panels ============================== */
.worlds { position: relative; }
.world {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center;
  padding-block: clamp(4rem, 8vw, 8rem);
  overflow: hidden;
  isolation: isolate;
  color: oklch(var(--on-ink));
  /* scroll progress, set per frame by site.js: ~+1 entering from the bottom,
     0 centred, ~-1 leaving past the top. Inert (0) before JS / reduced motion. */
  --p: 0;
}
.world-media { position: absolute; inset: 0; z-index: -2; }
.world-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 50%;
  /* photo drifts gently and zooms with scroll; the scale keeps headroom so the
     vertical drift never exposes an edge (clipped by .world's overflow:hidden) */
  transform: translate3d(0, calc(var(--p) * 30px), 0) scale(calc(1.14 + var(--p) * 0.04));
  will-change: transform;
}
.world-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, oklch(var(--c-deep) / .92) 0%, oklch(var(--c-deep) / .58) 38%, oklch(var(--c-deep) / .12) 70%, transparent 100%),
    linear-gradient(to top, oklch(var(--ink) / .7), transparent 40%),
    /* coloured seams: the world's own hue bleeds in at the top & bottom edges so
       the boundary between two photos reads as a colour transition, not a cut */
    linear-gradient(to bottom, oklch(var(--c) / .22), transparent 20%),
    linear-gradient(to top, oklch(var(--c) / .16), transparent 22%);
}
.world--mtn { --c: var(--mtn); --c-deep: var(--mtn-deep); --c-accent: var(--mtn-2); --c-tone: var(--mtn-tone); }
.world--ocn { --c: var(--ocn); --c-deep: var(--ocn-deep); --c-accent: var(--ocn-2); --c-tone: var(--ocn-tone); }
.world--med { --c: var(--med); --c-deep: var(--med-deep); --c-accent: var(--med-lite); --c-tone: var(--med-tone); }

.world .eyebrow { color: oklch(var(--c-accent)); }
.world-index {
  font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800, "wdth" 120;
  font-size: clamp(3.5rem, 9vw, 7rem); line-height: 0.8;
  color: oklch(var(--on-ink) / .16);
  -webkit-text-stroke: 1px oklch(var(--on-ink) / .3);
  /* foreground layer: drifts opposite to the photo, and further, for depth */
  transform: translateY(calc(var(--p) * -52px));
  will-change: transform;
}
.world-body { max-width: 40ch; }
.world h2 { margin: 0.7rem 0 0.4rem; }
.world .place { color: oklch(var(--c-accent)); font-weight: 600; letter-spacing: .04em; }
.world .coords { color: oklch(var(--on-ink) / .6); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; }
.world .desc { margin-top: 1.1rem; color: oklch(var(--on-ink) / .92); }
.world .world-tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.world .world-cta { margin-top: 1.8rem; }

/* fixed ambient backdrop that crossfades to the active world colour */
.atmosphere {
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background:
    radial-gradient(120% 80% at 80% -10%, oklch(var(--active) / .22), transparent 60%),
    radial-gradient(90% 70% at 0% 110%, oklch(var(--active-deep) / .35), transparent 60%),
    oklch(var(--ink));
  transition: background 1.2s var(--ease);
}

/* ===== per-world themed pages ============================================
   A retreat sub-page carries .world--mtn|ocn|med on <body>, exposing
   --c / --c-deep / --c-accent (light) / --c-tone (deep), so the whole page
   reads as that world. Paper sections stay light; amber stays the CTA. */
.world--mtn .surface-ink,  .world--ocn .surface-ink,  .world--med .surface-ink  { background: color-mix(in oklab, oklch(var(--ink))   83%, oklch(var(--c-deep))); }
.world--mtn .surface-ink2, .world--ocn .surface-ink2, .world--med .surface-ink2 { background: color-mix(in oklab, oklch(var(--ink-2)) 80%, oklch(var(--c-deep))); }

/* eyebrows: light accent over dark, deeper tone on paper */
.hero--retreat .eyebrow,
.world--mtn .surface-ink .eyebrow,  .world--ocn .surface-ink .eyebrow,  .world--med .surface-ink .eyebrow,
.world--mtn .surface-ink2 .eyebrow, .world--ocn .surface-ink2 .eyebrow, .world--med .surface-ink2 .eyebrow { color: oklch(var(--c-accent)); }
.world--mtn .surface-paper .eyebrow, .world--ocn .surface-paper .eyebrow, .world--med .surface-paper .eyebrow { color: oklch(var(--c-tone)); }

/* oversized index numbers, tinted with the world accent */
.world--mtn .world-index, .world--ocn .world-index, .world--med .world-index {
  color: oklch(var(--c-accent) / .26); -webkit-text-stroke: 1px oklch(var(--c-accent) / .7);
}

/* text links carry the colour too */
.world--mtn .surface-ink .link-arrow,  .world--ocn .surface-ink .link-arrow,  .world--med .surface-ink .link-arrow,
.world--mtn .surface-ink2 .link-arrow, .world--ocn .surface-ink2 .link-arrow, .world--med .surface-ink2 .link-arrow { color: oklch(var(--c-accent)); }
.world--mtn .surface-paper .link-arrow, .world--ocn .surface-paper .link-arrow, .world--med .surface-paper .link-arrow { color: oklch(var(--c-tone)); }

/* the closing CTA band drenches into the world's deep tone */
.world--mtn .cta-band .cta-scrim, .world--ocn .cta-band .cta-scrim, .world--med .cta-band .cta-scrim {
  background: linear-gradient(to right, oklch(var(--c-deep) / .92), oklch(var(--c-deep) / .62) 60%, oklch(var(--c-deep) / .8));
}

/* ============================ generic blocks ============================ */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 880px) { .split.cols-2 { grid-template-columns: 1fr 1fr; align-items: center; } .split.cols-5-7 { grid-template-columns: 5fr 7fr; align-items: center; } .split.cols-7-5 { grid-template-columns: 7fr 5fr; align-items: center; } }

.mission-quote {
  font-family: "Archivo", sans-serif; font-variation-settings: "wght" 600, "wdth" 105;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
.mission-quote .hl { color: oklch(var(--med-2)); }

.framed-media { position: relative; border-radius: 6px; overflow: hidden; }
.framed-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px oklch(var(--on-ink) / .1); border-radius: 6px; pointer-events: none; }
.framed-media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* signature moments — two-up cards with an optional full-width feature (retreat pages) */
.moments { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .moments { grid-template-columns: 1fr; } }
.moment {
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  background: oklch(var(--on-ink) / .045); border: 1px solid oklch(var(--on-ink) / .1);
}
.moment-media { aspect-ratio: 4 / 3; overflow: hidden; }
.moment-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.moment:hover .moment-media img { transform: scale(1.04); }
.moment-body { padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.moment-index {
  display: block; font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 120; font-size: 1.7rem; line-height: 1;
  color: oklch(var(--c-accent) / .85);
}
.moment-body h3 { margin-top: .5rem; }
.moment-body p { margin-top: .5rem; }

/* feature card spans both columns; image beside text on wider screens */
.moment.feature { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .moment.feature { flex-direction: row; min-height: 360px; }
  .moment.feature .moment-media { flex: 1 1 56%; aspect-ratio: auto; }
  .moment.feature .moment-body { flex: 1 1 44%; align-self: center; padding: clamp(1.6rem, 3vw, 2.6rem); }
  .moment.feature .moment-index { font-size: 2.1rem; }
  .moment.feature h3 { font-size: var(--t-h2); }
  .moment.feature p { max-width: 46ch; }
}

/* video facade — poster + play button; the real player is injected on click,
   so no third-party scripts load until the visitor chooses to watch. */
.video-embed { display: block; background: oklch(var(--ink-3)); }
.video-embed .video-poster { transition: transform 1.2s var(--ease); }
.video-embed:hover .video-poster { transform: scale(1.03); }
.video-play {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  border: 0; cursor: pointer; color: oklch(var(--on-ink));
  background: linear-gradient(to top, oklch(var(--ink) / .55), oklch(var(--ink) / .12) 55%, oklch(var(--ink) / .26));
  transition: background .6s var(--ease);
}
.video-play:hover { background: linear-gradient(to top, oklch(var(--ink) / .45), oklch(var(--ink) / .04) 55%, oklch(var(--ink) / .16)); }
.video-play:focus-visible { outline: 2px solid oklch(var(--amber)); outline-offset: -6px; }
.video-play-icon {
  width: clamp(62px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: oklch(var(--amber)); color: oklch(0.18 0.03 72);
  box-shadow: 0 12px 40px oklch(var(--ink) / .55);
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.video-play-icon svg { width: 38%; height: 38%; transform: translateX(8%); }
.video-play:hover .video-play-icon { transform: scale(1.07); background: oklch(var(--amber-2)); }
.video-play-label { font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.video-frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.video-embed.is-playing .video-poster { opacity: 0; }

/* practice / styles list */
.style-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: baseline;
  padding-block: 1.15rem;
  border-top: 1px solid oklch(var(--on-ink) / .14);
}
.style-row:last-child { border-bottom: 1px solid oklch(var(--on-ink) / .14); }
.style-row .n { font-size: var(--t-xs); letter-spacing: .12em; color: oklch(var(--on-ink) / .5); padding-top: .4rem; }
.style-row .name { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 600, "wdth" 108; font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: -.01em; }
.style-row .note { color: oklch(var(--on-ink-muted)); font-size: var(--t-sm); text-align: right; max-width: 26ch; }
.style-row:hover .name { color: oklch(var(--amber)); }
.style-row .name, .style-row { transition: color .35s; }

/* included list */
.included { list-style: none; padding: 0; display: grid; gap: 0.2rem; }
.included li { display: flex; gap: 1rem; align-items: center; padding-block: 0.95rem; border-bottom: 1px solid oklch(var(--on-paper) / .12); }
.surface-ink .included li { border-bottom-color: oklch(var(--on-ink) / .12); }
.included.cols-2 li { break-inside: avoid; }
@media (min-width: 720px) { .included.cols-2 { columns: 2; column-gap: clamp(2rem, 5vw, 5rem); } }
.included .tick { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; background: oklch(var(--amber) / .16); color: oklch(var(--amber-2)); }
.surface-paper .included .tick { color: oklch(var(--amber-2)); }
.included .txt { font-weight: 500; }

/* stat band */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.stat .num { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800, "wdth" 112; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.9; letter-spacing: -.02em; }
.stat .lbl { margin-top: .6rem; color: oklch(var(--on-ink-muted)); font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; }
.surface-paper .stat .lbl { color: oklch(var(--on-paper-muted)); }

/* testimonials */
.quotes { display: grid; gap: clamp(1.2rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 8px;
  background: oklch(var(--on-ink) / .04);
  border: 1px solid oklch(var(--on-ink) / .1);
}
.quote .mark { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 900, "wdth" 120; font-size: 2.6rem; line-height: .5; color: oklch(var(--amber) / .8); height: 1.1rem; }
.quote p { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.5; }
.quote .by { margin-top: auto; display: flex; align-items: center; gap: .8rem; }
.quote .ava { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; font-family: "Archivo", sans-serif; font-variation-settings: "wght" 700; font-size: .9rem; background: oklch(var(--active) / .25); color: oklch(var(--on-ink)); border: 1px solid oklch(var(--on-ink) / .18); }
.quote .by .nm { font-weight: 600; }
.quote .by .role { font-size: var(--t-xs); color: oklch(var(--on-ink-muted)); letter-spacing: .04em; }
.quote.feature { grid-column: 1 / -1; background: linear-gradient(120deg, oklch(var(--ink-2)), oklch(var(--ink-3))); }
.quote.feature p { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 500, "wdth" 104; font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.25; letter-spacing: -.01em; }

/* --- testimonials: star rating, photo avatars, verified-Google line --- */
:root {
  --star-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 23'%3E%3Cpath fill='%23e8a33e' d='M12 2l2.6 6.4 6.9.5-5.3 4.5 1.7 6.7L12 16.9l-6 3.7 1.7-6.7L4.5 8.9l6.9-.5z'/%3E%3C/svg%3E");
  --google-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z'/%3E%3C/svg%3E");
}
.stars {
  display: inline-block; width: 5.9em; height: 1.04em; font-size: .92rem;
  background: var(--star-img) left center / 1.18em 1.04em repeat-x;
}
.quote .stars { margin-bottom: .15rem; }
.quote .ava { overflow: hidden; width: 2.7rem; height: 2.7rem; }
.quote .ava img { width: 100%; height: 100%; object-fit: cover; }
.quote.feature .ava { width: 3.1rem; height: 3.1rem; }
.quote .by .meta { display: flex; flex-direction: column; gap: .12rem; }
.quote .by .src { display: inline-flex; align-items: center; gap: .4em; font-size: var(--t-xs); color: oklch(var(--on-ink-muted)); letter-spacing: .01em; }
.quote .by .src::before { content: ""; width: .95em; height: .95em; flex: none; background: var(--google-g) center / contain no-repeat; }

/* aggregate rating badge */
.rating-summary { display: inline-flex; align-items: center; gap: .55rem 1rem; flex-wrap: wrap; padding: .7rem 1.1rem; border: 1px solid oklch(var(--on-ink) / .16); border-radius: 999px; }
.surface-paper .rating-summary { border-color: oklch(var(--on-paper) / .16); }
.rating-summary .score { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800, "wdth" 110; font-size: 1.25rem; line-height: 1; }
.rating-summary .stars { font-size: 1rem; }
.rating-summary .src { display: inline-flex; align-items: center; gap: .4em; font-size: var(--t-sm); color: oklch(var(--on-ink-muted)); }
.surface-paper .rating-summary .src { color: oklch(var(--on-paper-muted)); }
.rating-summary .src::before { content: ""; width: 1.05em; height: 1.05em; flex: none; background: var(--google-g) center / contain no-repeat; }

/* retreat feature rows */
.retreat {
  position: relative;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem);
  border-top: 1px solid oklch(var(--on-ink) / .14);
}
@media (min-width: 940px) { .retreat { grid-template-columns: 1.05fr 1fr; align-items: center; } .retreat.flip .retreat-media { order: 2; } }
.retreat-media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.retreat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.retreat:hover .retreat-media img { transform: scale(1.04); }
.retreat-media .badge { position: absolute; top: 1rem; left: 1rem; padding: .5em .9em; border-radius: 999px; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: oklch(var(--ink) / .55); backdrop-filter: blur(6px); color: oklch(var(--on-ink)); border: 1px solid oklch(var(--on-ink) / .2); }
.retreat .season { color: oklch(var(--c-accent, var(--amber))); }
.retreat .price { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 700, "wdth" 110; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.retreat .price small { font-family: "Hanken Grotesk", sans-serif; font-weight: 400; color: oklch(var(--on-ink-muted)); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.factlist { display: flex; flex-wrap: wrap; gap: .5rem; }
.retreat .factlist { margin-top: 1.2rem; }
.retreat h3 a { transition: color .3s var(--ease); }
.retreat h3 a:hover { color: oklch(var(--amber)); }

/* person cards (founders / team) */
.people { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.person { display: flex; flex-direction: column; gap: 1.1rem; }
.person .pic { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; background: oklch(var(--ink-2)); }
.person .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.person .pic .mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800, "wdth" 120; font-size: clamp(3rem, 8vw, 5rem); color: oklch(var(--on-ink) / .9); background: linear-gradient(140deg, oklch(var(--active) / .5), oklch(var(--active-deep) / .7)); }
.person h3 { font-size: var(--t-h3); }
.person .role { color: oklch(var(--amber)); font-weight: 600; font-size: var(--t-sm); letter-spacing: .03em; }
.surface-paper .person .role { color: oklch(var(--med-2)); }
.person .creds { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }

/* accordion (FAQ / details) */
.acc { border-top: 1px solid oklch(var(--on-ink) / .14); }
.surface-paper .acc { border-top-color: oklch(var(--on-paper) / .16); }
.acc-item { border-bottom: 1px solid oklch(var(--on-ink) / .14); }
.surface-paper .acc-item { border-bottom-color: oklch(var(--on-paper) / .16); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; text-align: left; }
.acc-head .q { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 600, "wdth" 106; font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: -.01em; }
.acc-head .pm { flex: none; width: 1.9rem; height: 1.9rem; position: relative; border-radius: 999px; border: 1px solid currentColor; opacity: .5; transition: opacity .3s; }
.acc-head:hover .pm { opacity: 1; }
.acc-head .pm::before, .acc-head .pm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.acc-head .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding-bottom: 1.5rem; max-width: 60ch; color: oklch(var(--on-ink-muted)); }
.surface-paper .acc-panel p { color: oklch(var(--on-paper-muted)); }
.acc-panel p:last-child, .acc-panel ul:last-child { padding-bottom: 1.75rem; }
.acc-panel a { color: oklch(var(--amber-2)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.acc-panel a:hover { color: oklch(var(--amber)); }
.acc-panel ul { list-style: none; margin: 0; padding: 0 0 1.5rem; display: grid; gap: .55rem; max-width: 60ch; color: oklch(var(--on-ink-muted)); }
.surface-paper .acc-panel ul { color: oklch(var(--on-paper-muted)); }
.acc-panel li { display: flex; gap: .8em; }
.acc-panel li::before { content: ""; flex: none; width: 1em; height: 1px; margin-top: .85em; background: oklch(var(--amber)); opacity: .8; }

/* big CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .cta-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .cta-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, oklch(var(--ink) / .9), oklch(var(--ink) / .55) 60%, oklch(var(--ink) / .75)); }

/* ============================== footer ================================= */
.site-footer { background: oklch(var(--ink)); color: oklch(var(--on-ink)); border-top: 1px solid oklch(var(--on-ink) / .1); }
.footer-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .wordmark { font-family: "Archivo", sans-serif; font-variation-settings: "wght" 800, "wdth" 100; font-size: 1.5rem; letter-spacing: -.02em; }
.footer h4 { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: oklch(var(--on-ink-muted)); margin-bottom: 1.1rem; }
.footer-links { display: grid; gap: .7rem; }
.footer-links a { color: oklch(var(--on-ink) / .82); transition: color .3s, padding-left .35s var(--ease); }
.footer-links a:hover { color: oklch(var(--amber)); padding-left: .2rem; }
.socials { display: flex; gap: .7rem; }
.socials a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid oklch(var(--on-ink) / .2); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.socials a:hover { background: oklch(var(--amber)); border-color: oklch(var(--amber)); color: oklch(0.2 0.02 70); transform: translateY(-2px); }
.newsletter { display: flex; gap: .5rem; border: 1px solid oklch(var(--on-ink) / .2); border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem; max-width: 22rem; }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; color: inherit; font: inherit; }
.newsletter input::placeholder { color: oklch(var(--on-ink) / .5); }
.newsletter button { flex: none; }
.footer-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid oklch(var(--on-ink) / .1); color: oklch(var(--on-ink-muted)); font-size: var(--t-sm); }

/* ============================== motion ================================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="scale"] { transform: scale(1.04); transition: opacity 1.1s var(--ease), transform 1.4s var(--ease); }
[data-reveal="scale"].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media img { transform: none !important; }
  .atmosphere { transition: none; }
  .btn, .btn .arrow, .retreat-media img { transition: none; }
  .video-embed .video-poster, .video-embed:hover .video-poster { transform: none; transition: none; }
  .hero-endframe { transition: none; }
  .world-media img, .world-index { transform: none; }
}

/* utility */
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .measure, .center .measure-wide { margin-inline: auto; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 1.8rem; } .mt-l { margin-top: 3rem; }
.text-amber { color: oklch(var(--amber)); }
.grain::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}