/* ═══════════════════════════════════════════════════════════════
   SOUL THERAPIES — v3 homepage
   Built from DESIGN-DNA.md. Tokens, type, and motifs are read
   directly from that document. Restraint is the governing rule:
   stillness is the default, motion must earn its place (§9).
═══════════════════════════════════════════════════════════════ */

/* ─── 1 · TOKENS (DNA §2 palette) ──────────────────────────── */
:root {
  /* backgrounds — warm parchment family.
     Per the Atmosphere bible: same family, more warmth + luminosity. */
  --bg:          #F1E8D9;
  --bg-cool:     #EAE1D2;
  --bg-warm:     #EDE0CA;
  --surface:     #F7F0E4;

  /* ink */
  --ink:         #211E16;
  --ink-soft:    #38352C;
  --ink-ondark:  #ECE6D9;
  --ink-onsoft:  rgba(236,230,217,0.74);

  /* Dark brand colours — a layered pair for greater depth (bible §Colour).
     --dark is the Primary Dark; --dark-2 the Secondary Dark used to lift
     surfaces and build subtle gradients. --shadow is the warm Shadow
     Accent that tints the deepest pools so darks read rich, not flat. */
  --dark:        #121E26;
  --dark-rgb:    18, 30, 38;
  --dark-2:      #202F37;
  --dark-2-rgb:  32, 47, 55;
  --shadow:      #42323E;       /* aubergine — warm shadow pools (deeper) */
  --shadow-rgb:  66, 50, 62;
  --moss:        #2E4437;       /* moss — richer forest green, used as a whisper */
  --moss-rgb:    46, 68, 55;
  --petrol:      var(--dark);
  --petrol-deep: var(--dark);
  --btn:         var(--dark);
  --sage:        #5C6967;  /* muted text accent (not a background) */

  /* gold accent — more luminous antique gold (bible §Colour) */
  --gold:        #CBA25C;
  --gold-light:  #DCC194;

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", "Helvetica Neue", Arial, sans-serif;

  /* structure */
  --nav-h: 96px;
  --max-w: 1240px;
  --measure: 64ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --gold-line: rgba(203,162,92,0.5);

  /* atmosphere — extremely slow ambient drift (bible §Motion: "breath").
     Used only on faint background layers, never on content. */
  --breath: 19s;
}

/* ─── 2 · RESET / BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* a soft gold tap flash instead of the browser default blue on touch */
* { -webkit-tap-highlight-color: rgba(203, 162, 92, 0.18); }
html { scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ─── 3 · TYPE SCALE (DNA §3) ──────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;          /* even, harmonious line lengths everywhere */
}
h1 {
  font-size: clamp(2.75rem, 5.6vw, 4.7rem);
  line-height: 1.04;
  font-weight: 500;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  line-height: 1.12;
}
h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 600;
}
p { margin: 0 0 1.3rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 1.6rem;
}
.eyebrow--ondark { color: var(--gold-light); }
/* contemplative framing line under a section heading */
.section-head .lede {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--sage);
  max-width: 46ch;
  margin: 1.6rem auto 0;
}

/* ─── 4 · LAYOUT PRIMITIVES ────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
.narrow p { max-width: var(--measure); }
.center p { max-width: 64ch; }
.balance { text-wrap: balance; }

.section { padding-block: clamp(5rem, 11vh, 9rem); }
.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.bg-warm { background: var(--bg-warm); }
.bg-cool { background: var(--bg-cool); }

/* ─── 5 · SACRED-GEOMETRY RULES (structural dividers, DNA §4) ─ */
/* All decorative dividers are symmetrical: ────◇────
   The diamond is the centred child; ::before and ::after are the
   matching gold hairlines that flank it on both sides. */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 1px;
}
.rule::before, .rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.rule--center { width: min(360px, 60%); margin: 2rem auto 2.4rem; }
/* short rule used inside left-aligned text blocks — still symmetrical,
   but anchored to the start rather than centred in the column */
.rule--sm {
  width: 132px;
  margin: 1.4rem 0 2rem;
  justify-content: flex-start;
}
.rule--sm::before, .rule--sm::after {
  background: var(--gold-line);
  flex: 0 0 48px;
}
.rule-diamond {
  width: 7px; height: 7px;
  flex: 0 0 auto;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.9;
}

.geo { color: var(--gold); width: 100%; height: 100%; display: block; }

/* ─── 6 · BUTTONS (DNA §5 — solid, confident, never thin) ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 2.4rem;
  border: 1px solid transparent;
  /* one button system site-wide — clean rectangular corners */
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.btn-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--ink-ondark);
}
/* every button shares one hover language — the gold accent */
.btn-dark:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-light {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--dark);
}
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* gold fill — for CTAs sitting over a dark field (the hero).
   Warms on hover and lifts a touch, like catching the light. */
.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #20170A;
  box-shadow: 0 1px 18px rgba(203,162,92,0.18);
}
.btn-gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #20170A;
  transform: translateY(-1px);
}
.btn-arrow .arrow,
.btn-arrow::after {
  content: "→";
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 0.45s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* ─── 7 · NAVIGATION (DNA §10 — large logo · spacious · CTA) ── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(236,228,216,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.nav.scrolled {
  background: rgba(236,228,216,0.97);
  box-shadow: 0 1px 0 rgba(203,162,92,0.18);
}
/* at the top of the page the nav floats transparently over the dark
   hero with light text; it settles into the parchment bar on scroll.
   The colour shift is eased so the change is felt, not seen. */
.nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav:not(.scrolled) .nav-logo-text,
.nav:not(.scrolled) .nav-links a:not(.nav-cta),
.nav:not(.scrolled) .nav-more-toggle { color: var(--ink-ondark); }
.nav:not(.scrolled) .nav-logo-icon { filter: brightness(0) invert(1); opacity: 0.9; }
.nav:not(.scrolled) .nav-links a:not(.nav-cta):hover,
.nav:not(.scrolled) .nav-more-toggle:hover { color: var(--gold-light); }
.nav:not(.scrolled) .nav-cta {
  background: transparent;
  border-color: rgba(220,193,148,0.7);
  color: var(--gold-light) !important;
}
.nav:not(.scrolled) .nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #20170A !important;
}
.nav:not(.scrolled) .nav-burger span { background: var(--ink-ondark); }
/* the colour transition itself */
.nav-logo-text, .nav-logo-icon, .nav-links a, .nav-burger span {
  transition: color 0.5s var(--ease), filter 0.5s var(--ease),
              background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  /* keep clear of the notch in landscape on modern iPhones */
  padding-inline: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex-shrink: 0;
  /* sits hard left so it never crowds the first nav item */
  margin-right: clamp(1rem, 2.5vw, 2.5rem);
}
.nav-logo-icon {
  /* condensed so the mark doesn't reach into the menu */
  width: 54px; height: 54px;
  object-fit: contain;
}
.nav-logo-text {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.35rem, 2vw, 2.1rem);
}
.nav-links a {
  position: relative;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.nav-links a:not(.nav-cta):hover { color: var(--gold); }
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.is-active::after { width: 100%; }

.nav-cta {
  color: var(--ink-ondark) !important;
  background: var(--dark);
  border: 1px solid var(--dark);
  padding: 0.92rem 1.7rem;
  border-radius: 2px;
  margin-left: 0.6rem;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav-cta:hover { background: var(--gold); border-color: var(--gold); }

/* "More" dropdown — matches the nav-link type; a quiet cream panel drops
   beneath it on hover/focus, mirroring the v1 menu. */
.nav-more { position: relative; display: inline-flex; }
.nav-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  position: relative;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav-more-toggle::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.nav-more:hover .nav-more-toggle,
.nav-more-toggle[aria-expanded="true"] { color: var(--gold); }
.nav-more:hover .nav-more-toggle::after,
.nav-more-toggle[aria-expanded="true"]::after { width: calc(100% - 1.05em); }
.nav-more-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.3s var(--ease);
}
.nav-more:hover .nav-more-caret,
.nav-more-toggle[aria-expanded="true"] .nav-more-caret { transform: rotate(180deg); }

.nav-more-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 264px;
  background: var(--bg);
  border: 1px solid rgba(203,162,92,0.28);
  box-shadow: 0 18px 50px -18px rgba(36,33,25,0.35);
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  z-index: 1001;
}
/* both dropdowns now sit mid-nav, so each menu drops beneath its own label
   (aligned left, extending right) rather than the old edge-anchored right align */
#nav-work-menu, #nav-more-menu { left: 0; right: auto; }
.nav-more:hover .nav-more-menu,
.nav-more.open .nav-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
}
/* a hover bridge so the menu doesn't vanish as the cursor crosses the gap */
.nav-more-menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-more-menu a {
  padding: 0.72rem 1.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-more-menu a::after { display: none; }
.nav-more-menu a:hover { color: var(--gold) !important; background: rgba(203,162,92,0.08); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  /* 44×44 hit area (WCAG / iOS min) with the bars kept flush right */
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav-burger span {
  width: 26px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 999;
  background: var(--bg);
  border-bottom: 1px solid rgba(203,162,92,0.2);
  padding: 1rem clamp(1.5rem, 5vw, 4rem) max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  /* the full menu is now 13 items — cap it to the screen and let it scroll
     so the lower links stay reachable on shorter phones */
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  padding: 1rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(36,33,25,0.08);
}
.nav-mobile-cta {
  margin-top: 1.4rem;
  background: var(--dark);
  color: var(--ink-ondark) !important;
  text-align: center;
  border-radius: 2px;
  border-bottom: 0 !important;
  padding: 1.1rem !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--petrol);
  color: #fff;
  padding: 0.8rem 1.2rem;
  z-index: 2000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ─── 8 · HERO — descent · full-bleed cinematic field (Atmosphere bible
   §Hero + Sherif reference).  The lake-at-first-light photograph fills
   the whole frame; a deep blue-charcoal veil holds the left for the
   words while the sunrise stays luminous on the right; the sacred
   geometry (composited into the photo) is lifted by a soft radial light
   so it reads as *emerging from mist*, not a logo laid on top. The field
   resolves into the page below through an organic wave, not a hard edge. */
.hero {
  position: relative;
  isolation: isolate;
  /* locked to the hero image's 16:9 ratio so the whole composition (emblem
     + baked wave) shows uncropped, exactly as placed — the height follows
     the width and lands ~at the first fold on a standard screen */
  aspect-ratio: 1672 / 941;
  display: flex;
  /* copy sits below the nav with breathing room, not vertically centred */
  align-items: flex-start;
  overflow: hidden;
  background: var(--dark);
  color: var(--ink-ondark);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* the flipped sunset footage (mountains left, glow right) fills the frame;
     it loops seamlessly via a baked-in crossfade. The emblem is overlaid
     separately so it can sit over the water and breathe. */
  object-fit: cover;
  object-position: center;
  z-index: -3;
  /* a hair of scale so any sub-pixel edge from the loop crossfade never
     shows; the water itself supplies the motion, so no ken-burns drift */
  transform: scale(1.03);
  background: var(--dark);
  will-change: transform;
}
/* the sacred-geometry emblem, overlaid on the right near the sun, clear of
   the headline. It rises from mist (soft glow), breathes, and turns almost
   imperceptibly so the field feels alive (bible §Sacred Geometry). */
.hero-emblem {
  position: absolute;
  z-index: -2;
  /* centred on the horizon line, set over the open water where the warm
     glow gathers (right of the mountains) — it reads like light on water */
  top: 50%;
  right: clamp(15%, 21vw, 25%);
  width: clamp(210px, 26vw, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  /* centre on the horizon, then nudge 10% right and 10% higher; scaled up
     (10%, +40%, then trimmed 10% and a further 5% so the breath peak no
     longer bleeds into the header); 1cm shift right, and 1cm lower so its top
     sits closer to the top of the hero headline (per art-direction) */
  transform: translateX(1cm) translateY(calc(-50% + 1cm)) translate(10%, -10%) scale(1.317);
}
.hero-emblem-art {
  display: block;
  width: 100%; height: 100%;
  /* the open line-art mark (same as the nav logo) so the sunset reads
     through the linework — a real transparency, not a filled gold disc */
  background: url("../assets/images/logo-transparent.png") center / contain no-repeat;
  opacity: 0.82;
  /* invert the black linework to dove white, then warm it a touch with a
     gentle sepia/saturate (champagne, never brassy) so it plays off the
     sunset instead of matching it; dark halo for contrast, warm glow for depth */
  filter:
    brightness(0) invert(1)
    brightness(0.81) sepia(0.6) saturate(1.1) brightness(1.07)
    drop-shadow(0 1px 3px rgba(16,16,22,0.5))
    drop-shadow(0 0 22px rgba(255,247,228,0.5))
    drop-shadow(0 0 60px rgba(247,230,196,0.3));
  transform-origin: center;
  animation: emblem-breathe 13s ease-in-out infinite;
  will-change: transform, opacity;
}
/* left scrim only — holds the words; the sunrise + emblem stay luminous */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* gentle nav legibility at the very top */
    linear-gradient(180deg, rgba(var(--dark-rgb),0.30) 0%, rgba(var(--dark-rgb),0) 15%),
    /* soft copy scrim holding the left for the headline */
    linear-gradient(100deg,
      rgba(var(--dark-rgb),0.62) 0%,
      rgba(var(--dark-rgb),0.40) 24%,
      rgba(var(--dark-rgb),0.12) 44%,
      rgba(var(--dark-rgb),0) 58%);
}
/* the field resolves into the cream page below through a soft fade — no
   hard edge, no white band (matches the About cream exactly) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(170px, 28vh, 360px);
  z-index: -1;
  pointer-events: none;
  /* resolve to the EXACT cream the section below opens with (--bg-cool
     #EAE1D2 = 234,225,210), over a tall, many-stop ramp so the video melts
     into the page with no band and no colour jump (matches .page-hero) */
  background: linear-gradient(180deg,
    rgba(234,225,210,0) 0%,
    rgba(234,225,210,0.03) 12%,
    rgba(234,225,210,0.08) 23%,
    rgba(234,225,210,0.16) 33%,
    rgba(234,225,210,0.27) 43%,
    rgba(234,225,210,0.40) 53%,
    rgba(234,225,210,0.55) 63%,
    rgba(234,225,210,0.70) 73%,
    rgba(234,225,210,0.84) 83%,
    rgba(234,225,210,0.94) 92%,
    rgba(234,225,210,1) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  /* drop the copy well below the nav so it isn't crowding the logo/menu
     (raised 1cm so the headline top moves toward the emblem top) */
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 14vh, 9rem) - 1cm);
  /* keep the copy clear of the wave at the foot of the hero */
  padding-bottom: clamp(3rem, 8vw, 6.5rem);
}
/* wider container lets the headline breathe — more editorial (DNA §5) */
.hero-text { max-width: 620px; }
.hero h1 { color: var(--ink-ondark); margin-bottom: 0; }
/* gold italic subtitle — reuses our own line "Beyond insight, into lasting
   change" so it reads as a poetic restatement (reference §gold subtitle) */
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.3;
  color: var(--gold-light);
  margin: 1.1rem 0 0;
  text-wrap: balance;
}
/* short gold rule, as in the reference, before the body copy */
.hero-rule {
  display: block;
  width: 56px; height: 1px;
  margin: 1.9rem 0;
  background: linear-gradient(90deg, var(--gold), rgba(203,162,92,0));
}
.hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  max-width: 38ch;
  color: var(--ink-ondark);
}
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 40ch; color: var(--ink-ondark); }
.hero .btn { margin-top: 1.9rem; }

/* organic wave — the hero settles into the page through a soft rise of
   parchment rather than a hard line (bible §Section Transitions) */
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 1;
  width: 100%;
  height: clamp(60px, 8vw, 130px);
  display: block;
  pointer-events: none;
}
.hero-wave svg { width: 100%; height: 100%; display: block; }
.hero-wave path { fill: var(--bg-cool); }

/* ─── 9 · IMAGE QUOTE BAND — a cinematic moment of pause.
   Full-width atmospheric photograph under the one brand dark, the
   quote centred, a gold sun-mark above and attribution below. Kept
   to a compact band height so it reads as immersive, not empty. */
/* a cream breath separating the quote pause from the dark Work section */
/* the Who section's cream field is matched to the About section so the two
   cream passages read as one continuous parchment family */
#who .feature-body { background: var(--bg-cool); }

.band-spacer { height: clamp(3rem, 6vh, 5rem); background: var(--bg-cool); }

.quoteband {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  /* a transitional pause between Who and What Changes. Taller than the copy
     needs, so the edge feathering has room to fade without eating into the
     dark band that holds the quote. */
  min-height: clamp(330px, 42vh, 460px);
  overflow: hidden;
  text-align: center;
  color: var(--ink-ondark);
}
.quoteband-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* a dark mountain peak emerging through swirling mist — moody movement
     with a bright break of light in the cloud, looped seamlessly. Fills the
     band via object-fit. */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  background: var(--dark);
}
/* the one brand dark, carried as a translucent veil — heavy enough for
   readability, light enough to let the cave's light beam read through.
   The radial centre stays open so the shaft of light is preserved. */
.quoteband-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* feather colours come from the neighbouring sections — overridable per
     page so the band melts into whatever cream sits above/below it */
  --qb-top: 234, 225, 210;    /* bg-cool, the section above (default) */
  --qb-bottom: 237, 224, 202; /* bg-warm, the section below (default) */
  /* warm Shadow Accent woven into the dark veil so the band reads rich;
     the radial centre stays open to preserve the cave's shaft of light.
     The top and bottom edges feather into the cream sections above and
     below, so the band melts in rather than meeting a hard line. */
  background:
    /* tall, many-stop edge feathers — a slow eased ramp (no steep first
       step) so the cream dissolves into the band with no pronounced line,
       still leaving a solid dark middle for the quote */
    linear-gradient(180deg,
      rgba(var(--qb-top),1) 0%,
      rgba(var(--qb-top),0.93) 4%,
      rgba(var(--qb-top),0.82) 8%,
      rgba(var(--qb-top),0.66) 12%,
      rgba(var(--qb-top),0.49) 16%,
      rgba(var(--qb-top),0.34) 20%,
      rgba(var(--qb-top),0.21) 24%,
      rgba(var(--qb-top),0.11) 28%,
      rgba(var(--qb-top),0.04) 32%,
      rgba(var(--qb-top),0) 37%),
    linear-gradient(0deg,
      rgba(var(--qb-bottom),1) 0%,
      rgba(var(--qb-bottom),0.93) 4%,
      rgba(var(--qb-bottom),0.82) 8%,
      rgba(var(--qb-bottom),0.66) 12%,
      rgba(var(--qb-bottom),0.49) 16%,
      rgba(var(--qb-bottom),0.34) 20%,
      rgba(var(--qb-bottom),0.21) 24%,
      rgba(var(--qb-bottom),0.11) 28%,
      rgba(var(--qb-bottom),0.04) 32%,
      rgba(var(--qb-bottom),0) 37%),
    linear-gradient(180deg, rgba(var(--dark-rgb),0.58), rgba(var(--dark-rgb),0.46) 50%, rgba(var(--dark-rgb),0.60)),
    radial-gradient(120% 130% at 50% 44%, rgba(var(--dark-rgb),0) 30%, rgba(var(--shadow-rgb),0.22) 92%);
}
.quoteband-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.6rem, 3.5vh, 2.6rem);
}
.quoteband-mark {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto 1.2rem;
  color: var(--gold-light);
  opacity: 0.95;
}
.quoteband-quote {
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.45;
  color: var(--ink-ondark);
  max-width: 32ch;
  text-wrap: balance;
}
.quoteband-quote::before { content: "\201C"; }
.quoteband-quote::after  { content: "\201D"; }
.quoteband-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.2rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.7rem;
  color: var(--gold-light);
}
.quoteband-cite::before, .quoteband-cite::after {
  content: "";
  width: 26px; height: 1px;
  background: rgba(201,180,150,0.5);
}

/* ─── 9b · ABOUT — editorial split (asymmetry breaks the centred run) */
.section--about {
  position: relative;
  overflow: hidden;          /* clip the bleeding watermark emblem (no h-scroll) */
  padding-block: clamp(4.5rem, 9vh, 7rem);
  /* the hero image ends in a warm parchment baked wave (#E7D7C7); start
     About at that exact colour and settle into --bg-cool so the join is
     seamless (no hard line, no colour jump) on every screen size */
  background: linear-gradient(180deg, #E7D7C7 0%, var(--bg-cool) 14%);
}
/* single left-aligned column: eyebrow, heading, then body all begin at the
   same left gutter as the hero copy — one consistent left margin for every
   left-aligned block on the page (no right-hand prose column). */
.about-grid {
  display: block;
  text-align: center;          /* whole section centred on the page */
}
.about-aside { margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem); }
.about-aside .eyebrow { margin-bottom: 1.1rem; }
.about-lead {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--ink);
}
.about-aside .rule--sm { margin-top: 1.6rem; }
/* one consistent Mulish body size throughout. Headings are Cormorant;
   body is Mulish only. The measure is held by max-width, not a column. */
.about-body { max-width: 62ch; margin-inline: auto; }
.about-body p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.about-body p:last-child { margin-bottom: 0; }

/* ─── 9c · FEATURE SPLITS — image + text, alternating sides.
   The page's storytelling rhythm: a full-bleed image on one side, a
   text panel on the other. feature--reverse flips the order; feature
   --dark gives the text panel the one brand dark (DNA §5). */
.feature { position: relative; }
/* the two-column cinematic split now sits BELOW a centred section header */
.feature-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(480px, 66vh, 700px);
}
.feature-media { position: relative; overflow: hidden; }
.feature-media img,
.feature-media-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* the sage bundle sits low in its (portrait) frame — anchor the crop down
   so the smouldering tip and rising smoke stay in view, not cropped off */
#how .feature-media-video { object-position: center 78%; }
/* nudge the forest a touch darker so it sits in the same atmosphere as
   the cave image — subtle, not moody */
#who .feature-media img { filter: brightness(0.93) saturate(0.97); }
/* the one brand dark, as a soft veil over the cave image */
.feature-media--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--dark-rgb),0.34), rgba(var(--dark-rgb),0.20));
}
.feature-body {
  display: flex;
  align-items: center;
  padding: clamp(3.25rem, 6vw, 6.5rem) clamp(1.75rem, 5.5vw, 5.5rem);
  background: var(--bg-warm);
}
.feature-body-inner { width: 100%; max-width: 30rem; }
.feature--reverse .feature-body  { order: 2; }
.feature--reverse .feature-media { order: 1; }
/* dark text panel — the descent into the work.
   A faint diagonal lift from primary to secondary dark, with a warm
   shadow pool low-left, so the panel reads with depth (bible §Colour). */
.feature--dark .feature-body {
  background:
    radial-gradient(120% 100% at 12% 88%, rgba(var(--shadow-rgb),0.30), rgba(var(--shadow-rgb),0) 56%),
    radial-gradient(100% 90% at 92% 6%, rgba(var(--moss-rgb),0.24), rgba(var(--moss-rgb),0) 52%),
    linear-gradient(155deg, var(--dark-2) 0%, var(--dark) 62%);
}
.feature--dark .feature-body .eyebrow { color: var(--gold-light); }
.feature--dark h2 { color: var(--ink-ondark); }
.feature--dark .lede { color: var(--ink-onsoft); }

/* ─── soft section feathering ──────────────────────────────────────
   Sections melt into one another like the hero's foot (a soft cream
   fade), instead of meeting at a hard line. Each dark/image edge fades
   into the neighbouring parchment; the copy stays above the feather. */
.feature .feature-body-inner { position: relative; z-index: 2; }
.feature-split::before,
.feature-split::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* a tall, gently eased taper so the parchment dissolves slowly into the
     dark/image — a true fade, not a cream sheet laid over full dark */
  height: clamp(110px, 16vh, 210px);
  z-index: 1;
  pointer-events: none;
}
.feature-split::before {
  top: 0;
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.9) 16%,
    rgba(234,225,210,0.66) 36%,
    rgba(234,225,210,0.38) 56%,
    rgba(234,225,210,0.16) 76%,
    rgba(234,225,210,0.05) 90%,
    rgba(234,225,210,0) 100%);
}
.feature-split::after {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.9) 16%,
    rgba(234,225,210,0.66) 36%,
    rgba(234,225,210,0.38) 56%,
    rgba(234,225,210,0.16) 76%,
    rgba(234,225,210,0.05) 90%,
    rgba(234,225,210,0) 100%);
}
/* The Work meets the cream sections on a flat dark panel, where any overlay
   shows most — give it a taller, very gradual taper (many low steps in the
   tail) so the dark emerges imperceptibly, never as an obvious overlay edge */
#approach .feature-split::before { height: clamp(190px, 25vh, 300px); }
/* shorter bottom feather so it starts well below the "Learn more" link,
   leaving solid dark for the link before the fade into Who */
#approach .feature-split::after  { height: clamp(78px, 11vh, 140px); }
#approach .feature-split::before {
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.96) 7%,
    rgba(234,225,210,0.86) 17%,
    rgba(234,225,210,0.68) 29%,
    rgba(234,225,210,0.5) 41%,
    rgba(234,225,210,0.35) 53%,
    rgba(234,225,210,0.23) 65%,
    rgba(234,225,210,0.13) 77%,
    rgba(234,225,210,0.06) 88%,
    rgba(234,225,210,0.02) 95%,
    rgba(234,225,210,0) 100%);
}
#approach .feature-split::after {
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.96) 7%,
    rgba(234,225,210,0.86) 17%,
    rgba(234,225,210,0.68) 29%,
    rgba(234,225,210,0.5) 41%,
    rgba(234,225,210,0.35) 53%,
    rgba(234,225,210,0.23) 65%,
    rgba(234,225,210,0.13) 77%,
    rgba(234,225,210,0.06) 88%,
    rgba(234,225,210,0.02) 95%,
    rgba(234,225,210,0) 100%);
}

/* ─── centred section header — the section label, lifted out of the text
   column and centred on the page, flanked by two fine horizontal rules in
   the label's own colour (gold). A quiet, consistent marker that opens
   About, The Work, Who, and What Changes alike. */
.section-heading { text-align: center; }
.section-heading .eyebrow { margin-bottom: 1.25rem; }
.section-heading h2 {
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  color: var(--ink);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* on the feature splits the header gets its own cream band above the
   cinematic two-column content (matched to the neighbouring parchment) */
.feature > .section-heading {
  background: var(--bg-cool);
  padding: clamp(3.25rem, 6vw, 5rem) clamp(1.5rem, 5vw, 2rem) clamp(1.7rem, 3.4vw, 2.6rem);
}
/* breathing room beneath Who so the quote band doesn't hug its base — mirrors
   the voices section's top padding, giving equal cream space above and below
   the quote (its bg-cool matches the quote's top feather, so the join stays soft) */
#who { padding-bottom: clamp(5rem, 11vh, 9rem); }

/* The Practice / The Approach read as one centred statement — body prose is
   centre-set beneath the lead header (constrained measure keeps lines elegant) */
#practice .feature-prose,
#approach .feature-prose,
#sf-lineage .feature-prose { text-align: center; }
#practice .feature-prose p,
#approach .feature-prose p,
#sf-lineage .feature-prose p { max-width: 60ch; margin-inline: auto; }

/* the label itself, ~20% larger than the inline eyebrow and flanked by two
   fine rules. A single, richer gold — warmer and more luminous than the muted
   site gold — so the label reads clearly and lifts off the parchment without
   tipping into brassy. The rules take the same colour (currentColor). */
.eyebrow--ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.2vw, 1.6rem);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.24em;  /* a hair more open so the bolder gold breathes */
  white-space: nowrap;     /* keep the label on one line; the rules shrink to fit */
  color: #C99634;          /* richer, more luminous gold than --gold (#CBA25C) */
  /* match the What Changes marker exactly: the same 64ch frame the voices
     header imposes via .center p, so every marker's rules resolve to the
     same modest length regardless of where it sits */
  max-width: 64ch;
  margin-inline: auto;
  --rule-len: clamp(110px, 34vw, 380px);
}
.eyebrow--ruled::before,
.eyebrow--ruled::after {
  content: "";
  flex: 0 1 var(--rule-len);
  height: 1px;
  background: currentColor;
  opacity: 0.85;           /* rules a touch quieter than the word itself */
}
/* taper each rule's outer end so it dissolves into the parchment */
.eyebrow--ruled::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 88%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 88%);
}
.eyebrow--ruled::after {
  -webkit-mask-image: linear-gradient(90deg, #000 12%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 12%, transparent 100%);
}
/* on a phone the longer labels can't stay on one line — let them wrap
   (centred, with shorter flanking rules) instead of clipping at the edges */
@media (max-width: 600px) {
  .eyebrow--ruled {
    white-space: normal;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    gap: clamp(0.55rem, 3vw, 0.95rem);
    --rule-len: clamp(16px, 7vw, 60px);
  }
  .eyebrow--ruled::before, .eyebrow--ruled::after { align-self: center; }
}

/* WHO THIS IS FOR — text list beside the forest image */
.feature .lede,
.who-list { margin-top: 0; }
.feature .section-head .lede { margin-inline: 0; text-align: left; }
.who-list, .worklist { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.who-list li + li { margin-top: 1.6rem; }
.who-list h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.28rem);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.who-list p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; }
/* the detailed Who-this-is-for prose — a short essay that acts as the filter,
   set in the same quiet body voice as the rest of the cream sections */
.who-prose p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.78;
  margin-bottom: 1.1rem;
}
.who-prose p:last-child {
  margin-bottom: 0;
  color: var(--ink);   /* the closing invitation reads a touch firmer */
}
/* ── DESIGN LOCK · staggered paragraph reveal (site-wide) ──────────
   Body paragraphs reveal one at a time as their section scrolls into view —
   a gentle cascade. Wrap a run of paragraphs in .reveal-stagger and give each
   child a .reveal class; the IntersectionObserver (js/main.js) adds .in and
   these delays stagger them. Used by .who-prose, .feature-prose, and every
   future page's prose. Honours prefers-reduced-motion (reveals show at once). */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.22s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.44s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.66s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.88s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 1.10s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 1.32s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 1.54s; }

/* THE WORK — three dimensions as a vertical sequence on the dark panel.
   Headline carries the authority; the supporting line sits quietly below
   with a clear gap, then the three dimensions. */
.feature-body h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.05rem);
  line-height: 1.06;
}
.feature .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.12rem, 1.45vw, 1.34rem);
  line-height: 1.62;
  color: var(--sage);
  margin: 2.1rem 0 0;
  max-width: 100%;
  text-wrap: balance;
}
/* The Work's italic lead now opens the dark panel directly (the heading was
   lifted into the centred header above), so colour it by section, not adjacency */
#approach .feature-body .lede { color: var(--gold-light); }
/* three dimensions — concise, premium, generous breathing room.
   A gold roman numeral leads each, divided by a faint hairline. */
.worklist { margin-top: 2.4rem; }
.worklist-item { display: flex; gap: 1.4rem; align-items: baseline; }
.worklist-item + .worklist-item {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(201,180,150,0.18);
}
.worklist-num {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  min-width: 2.2ch;
}
.worklist-item h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink-ondark);
  margin-bottom: 0.45rem;
}
.worklist-item p { color: var(--ink-onsoft); font-size: 0.98rem; line-height: 1.6; max-width: 40ch; }
.worklist-more { margin-top: 2.4rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-line);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.textlink span { transition: transform 0.35s var(--ease); }
.textlink:hover { color: var(--ink-ondark); border-color: var(--gold-light); }
.textlink:hover span { transform: translateX(4px); }

/* ─── 12 · VOICES — integration · light, three columns in a single row.
   Restraint over a dark wall of text: generous whitespace, a category
   label, the quote, and an attribution. Columns divided by gold
   hairlines, never enclosed in cards (DNA §4). */
.voices { background: var(--bg-warm); }
.voices-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.voices-head h2 {
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  /* wider measure so the line resolves to two lines, not three */
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

.voices-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  max-width: 1140px;
  margin-inline: auto;
}
.voice {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-inline: clamp(0px, 1vw, 1rem);
}
/* refined gold hairline dividing adjacent columns (desktop) —
   sits centred in the widened gutter */
.voice + .voice { position: relative; }
.voice + .voice::before {
  content: "";
  position: absolute;
  left: clamp(-1.5rem, -3vw, -3.25rem);
  top: 0.3rem; bottom: 0.3rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-line), transparent);
}
/* hierarchy: category label · numeral · quote · attribution */
.voice-theme {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 1rem;
}
.voice-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
  margin: 0 0 1.4rem;
}
.voice-quote {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
}
.voice-quote::before { content: "\201C"; }
.voice-quote::after  { content: "\201D"; }
.voice-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin: auto 0 0;
  padding-top: 0.4rem;
}

/* ─── 13 · CTA — the emotional conclusion.
   One flat brand dark, a restrained closing invitation. No watermark,
   no oversized type — quiet confidence. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* a warm, luminous pool of light rises from the centre-low — the
     closing breath. Primary→secondary dark with a faint gold glow and
     warm shadow edges (bible §Colour: greater depth, warmer highlights) */
  background:
    /* top edge tapers up into the cream What Changes section — a long,
       eased fade so the dark emerges gradually rather than in a band */
    linear-gradient(180deg,
      var(--bg-warm) 0%,
      rgba(237,224,202,0.86) 5%,
      rgba(237,224,202,0.55) 12%,
      rgba(237,224,202,0.28) 19%,
      rgba(237,224,202,0.1) 26%,
      rgba(237,224,202,0) 33%),
    radial-gradient(95% 130% at 50% 116%, rgba(203,162,92,0.14), rgba(203,162,92,0) 58%),
    radial-gradient(120% 110% at 50% 0%, var(--dark-2), var(--dark) 70%);
  color: var(--ink-onsoft);
  /* compact and intentional — trimmed a further ~22% */
  padding-block: clamp(3.1rem, 6.25vh, 5.25rem);
  text-align: center;
}
.cta-inner { position: relative; z-index: 1; }
.cta h2 {
  color: var(--ink-ondark);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  line-height: 1.14;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.cta-lead {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  color: var(--ink-onsoft);
  max-width: 44ch;
  margin: 0 auto;
}
/* reversed CTA button — gold by default, settling to cream on hover */
.cta-btn {
  margin-top: 2.4rem;
  background: var(--gold);
  border-color: var(--gold);
  color: #20170A;
}
.cta-btn:hover {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--dark);
}

/* ─── 14 · FOOTER — full premium footer (4 columns + legal row).
   Shares the one brand dark with the CTA, so a refined gold seam +
   centred diamond marks the boundary — the CTA reads as a destination,
   the footer as a separate navigational area. */
.footer {
  position: relative;
  /* settles to the deepest, stillest pool — primary dark with a warm
     shadow tint low, so CTA (lit) → footer (deep) reads as a descent */
  background:
    radial-gradient(140% 120% at 50% 120%, rgba(var(--shadow-rgb),0.22), rgba(var(--shadow-rgb),0) 60%),
    var(--dark);
  color: var(--ink-onsoft);
  border-top: 1px solid rgba(203,162,92,0.22);
  /* tighter top padding so CTA → seam → footer reads as one intentional step */
  padding-block: clamp(2.75rem, 4.25vw, 3.85rem) 2.2rem;
}
/* gold diamond seated on the seam — the deliberate divider */
.footer::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.footer-col--brand { max-width: 32ch; }
/* nudge the link columns so their headings sit on the wordmark line */
.footer-col:not(.footer-col--brand) { padding-top: 0.55rem; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  margin-bottom: 1.3rem;
}
.footer-logo-icon {
  width: 50px; height: 50px;
  object-fit: contain;
  /* lift the dark linework so the emblem reads on the deep panel */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer-logo-text {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-ondark);
}
.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--gold-light);
  margin-bottom: 1.6rem;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0; padding: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(201,180,150,0.3);
  border-radius: 50%;
  color: var(--gold-light);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.footer-social a:hover {
  color: var(--petrol-deep);
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.footer-heading {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 1.7rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.95rem; }
.footer-links a, .footer-links span {
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  color: var(--ink-onsoft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer-links a { position: relative; }
.footer-links a:hover { color: var(--gold-light); }
.footer-links--contact a, .footer-links--contact span { color: var(--ink-onsoft); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(201,180,150,0.16);
}
.footer-copy {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-onsoft);
  opacity: 0.7;
  margin: 0;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  list-style: none;
  margin: 0; padding: 0;
}
.footer-legal a {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-onsoft);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-legal a:hover { opacity: 1; color: var(--gold-light); }
.footer-legal-sep { opacity: 0.4; }

/* ─── 14b · EMBLEM AS ATMOSPHERE (bible §Sacred Geometry) ─────
   The lotus emblem is not a logo here — it is a faint visual motif
   that lives *within* the landscape: large, partially obscured,
   bleeding off an edge, discovered rather than declared. It breathes
   imperceptibly so the field feels alive, never animated. */
.emblem {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: url("../assets/images/lotus-emblem.png") center / contain no-repeat;
  /* the slow ambient breath — scale + opacity drift over ~19s */
  animation: breathe var(--breath) ease-in-out infinite;
  will-change: opacity, transform;
}
/* About — the emblem emerges from the right edge, sitting within the
   parchment (multiply) so it reads as watermark, not sticker */
.about-grid { position: relative; }
.emblem--about {
  top: 50%;
  right: clamp(-22rem, -16vw, -9rem);
  width: clamp(26rem, 40vw, 40rem);
  aspect-ratio: 3 / 2;
  --b-tf: translateY(-50%);   /* preserved through the breath keyframe */
  --b-lo: 0.07; --b-hi: 0.12;
  transform: var(--b-tf);
  opacity: 0.09;
  mix-blend-mode: multiply;
}
/* CTA — the emblem rises, half-submerged, from below the closing words */
.emblem--cta {
  left: 50%;
  bottom: clamp(-20rem, -22vw, -11rem);
  width: clamp(30rem, 52vw, 46rem);
  aspect-ratio: 3 / 2;
  --b-tf: translateX(-50%);
  --b-lo: 0.13; --b-hi: 0.19;
  transform: var(--b-tf);
  opacity: 0.16;
}

/* ─── 15 · MOTION — gentle, purposeful, opt-out (DNA §9) ────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }

/* What Changes — the three testimonials arrive in a deliberate sequence:
   the left settles in first, the middle five seconds later, the right five
   seconds after that. Left fades over 0.5s; middle and right over 0.8s. */
.voices-grid .voice {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.voices-grid .voice:nth-child(1) { transition-duration: 0.5s; transition-delay: 0s; }
.voices-grid .voice:nth-child(2) { transition-delay: 1s; }
.voices-grid .voice:nth-child(3) { transition-delay: 2s; }

/* the ambient breath — barely perceptible; for atmosphere layers only,
   never content. Kept within the bible's slow, intentional register. */
@keyframes breathe {
  0%, 100% { opacity: var(--b-lo, 0.10); transform: var(--b-tf, none); }
  50%      { opacity: var(--b-hi, 0.16);
             transform: var(--b-tf, none) scale(1.035); }
}

/* hero atmosphere — a slow ken-burns drift, an emblem that breathes and
   turns almost imperceptibly, and copy that rises in on load. Together the
   field feels alive and draws you in, without ever calling attention. */
@keyframes ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11) translateY(-1.4%); }
}
@keyframes emblem-breathe {
  0%, 100% { opacity: 0.66; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.045); }
}

/* hero copy emerges on load — a quiet, staggered rise */
.hero-text > * { opacity: 0; animation: hero-rise 1.15s var(--ease) both; }
.hero-text > h1            { animation-delay: 0.15s; }
.hero-text > .hero-tagline { animation-delay: 0.40s; }
.hero-text > .hero-rule    { animation-delay: 0.54s; }
.hero-text > .hero-lead    { animation-delay: 0.66s; }
.hero-text > .hero-sub     { animation-delay: 0.78s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* parallax — image layers drift slower than the page as you scroll.
   JS feeds --py; the tiny over-scale keeps edges covered. */
.feature-media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .emblem, .hero-emblem, .hero-emblem-art, .hero-media { animation: none; }
  .hero-text > * { opacity: 1; animation: none; }
  /* stillness is the honest default when motion is unwelcome — the video is
     paused in JS and rests on its poster frame */
  .hero-media { transform: scale(1.03); }
  .feature-media img { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ─── 16 · RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  :root { --nav-h: 80px; }
  .nav-logo-icon { width: 50px; height: 50px; }
  .nav-logo-text { font-size: 1.3rem; }
}

/* tablet — testimonials to two columns, footer to two columns */
@media (max-width: 980px) {
  .voices-grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.5rem, 6vw, 3.5rem); }
  /* vertical column rule only between items on the same row */
  .voice:nth-child(2n+1)::before { display: none; }

  .footer-inner { grid-template-columns: 1.4fr 1fr; row-gap: clamp(2.5rem, 6vw, 3.5rem); }
  .footer-col--brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 860px) {
  body { font-size: 1rem; }

  /* about reverts to a single editorial column, still left-aligned */
  .about-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .about-aside { position: static; }
  .about-aside .rule--sm { margin-bottom: 0; }
  /* on a narrow screen the 16:9 image crops at the sides; keep the sun and
     emblem in frame, hold the copy with a stronger top-down scrim, and let
     the foot resolve into the cream page (the ::after fade carries it). */
  .hero { aspect-ratio: auto; min-height: 90vh; align-items: flex-start; }
  .hero-media { inset: 0; object-fit: cover; object-position: 54% center; }
  /* the hero copy runs further down on a phone; hold the scrim through the
     text band (~55%) so the lower lines stay legible over the bright water,
     then release to let the sunset read below */
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(var(--dark-rgb),0.64) 0%,
        rgba(var(--dark-rgb),0.5) 26%,
        rgba(var(--dark-rgb),0.46) 46%,
        rgba(var(--dark-rgb),0.38) 60%,
        rgba(var(--dark-rgb),0.24) 74%,
        rgba(var(--dark-rgb),0) 90%);
  }
  /* a small mark hovering in the open sky to the right — tucked just under
     the first headline line and above the tagline, clear of all the copy */
  .hero-emblem {
    top: 25.5%; bottom: auto;
    right: 4%; left: auto;
    width: clamp(112px, 31vw, 150px);
    transform: none;
  }
  /* the small sky mark sits over the warm sunset — a bright, crisp white (not
     the desktop's warm tint) reads best here, standing out by contrast; a
     tight dark halo outlines the linework so it never blends into the sky */
  .hero-emblem-art {
    /* hold a steady, present opacity (no breathing dip that makes it recede) —
       the linework stays open, so the sky still shows through */
    animation: none;
    opacity: 0.95;
    filter:
      brightness(0) invert(1)
      drop-shadow(0 1px 4px rgba(16,16,22,0.7))
      drop-shadow(0 0 9px rgba(16,16,22,0.5))
      drop-shadow(0 0 26px rgba(255,250,242,0.32));
  }
  .hero-inner { padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: clamp(5rem, 22vw, 9rem); }
  .hero-text { max-width: 100%; }
  /* a scrim-halo on the body copy guarantees legibility where the lower
     lines fall over the bright water; the last paragraph sits lowest, so it
     gets a touch more */
  .hero-lead, .hero-sub { text-shadow: 0 1px 2px rgba(var(--dark-rgb), 0.6), 0 0 18px rgba(var(--dark-rgb), 0.62); }
  .hero-sub { text-shadow: 0 1px 2px rgba(var(--dark-rgb), 0.72), 0 0 20px rgba(var(--dark-rgb), 0.74); }
  .hero::after { height: clamp(120px, 22vh, 220px); }

  /* feature splits stack: image becomes a band above the text panel */
  .feature-split { grid-template-columns: 1fr; min-height: 0; }
  .feature-media { height: 66vw; max-height: 440px; }
  /* stacked layout: image is in normal flow, so drop the parallax
     transform (it would shift the band and reveal a gap) */
  .feature-media img { position: static; transform: none; }
  .feature-body { padding-block: clamp(2.75rem, 8vw, 4rem); }
  .feature-body-inner { max-width: 38rem; margin-inline: auto; }
  /* image always sits above the text when stacked — for every feature, so
     Who reads image-then-text like The Work. The section's top feather then
     fades the top of each image into the section above. */
  .feature .feature-media { order: 1; }
  .feature .feature-body  { order: 2; }
  /* the panels are much shorter on a phone, so the desktop-scale feathers
     would reach the edge copy — keep them shorter here so the fade stays in
     the padding and the eyebrow/link keep their contrast */
  .feature-split::before, .feature-split::after,
  #approach .feature-split::before, #approach .feature-split::after { height: clamp(60px, 16vw, 104px); }
}

/* mobile — testimonials and footer stack to a single column */
@media (max-width: 600px) {
  .voices-grid { grid-template-columns: 1fr; }
  .voice + .voice::before { display: none; }
  /* comfortable thumb targets for the social icons */
  .footer-social a { width: 44px; height: 44px; }
  /* gold hairline + diamond between stacked testimonials (DNA §4) */
  .voice + .voice {
    border-top: 1px solid var(--gold-line);
    padding-top: clamp(2rem, 7vw, 2.6rem);
    margin-top: clamp(0.5rem, 2vw, 1rem);
  }

  .footer-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}

@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; }
  .cta .btn { width: auto; }
  .nav-inner { gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES — shared scaffolding
   A video page-hero (page title over footage, dark field, light copy,
   left scrim, soft resolve into cream) consistent with the homepage hero;
   plus light feature splits and a centred statement band.
═══════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(480px, 74vh, 720px);
  display: flex;
  /* title sits below the nav exactly where the homepage hero copy sits — the
     same standard position on every page */
  align-items: flex-start;
  overflow: hidden;
  background: var(--dark);
  color: var(--ink-ondark);
}
.page-hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
  transform: scale(1.03);   /* hides any sub-pixel loop seam */
  background: var(--dark);
}
/* Shamanic Foundations hero — the first seconds frame the stone steps
   closely; a gentle crop keeps them centred and in full view */
.page-hero-media--forest {
  object-position: center 54%;
  transform: scale(1.06);
  transform-origin: center 54%;
}
.page-hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* nav legibility at the very top, even over bright footage */
    linear-gradient(180deg, rgba(var(--dark-rgb),0.50) 0%, rgba(var(--dark-rgb),0.14) 16%, rgba(var(--dark-rgb),0) 32%),
    /* copy scrim holding the left */
    linear-gradient(100deg,
      rgba(var(--dark-rgb),0.78) 0%,
      rgba(var(--dark-rgb),0.54) 24%,
      rgba(var(--dark-rgb),0.24) 46%,
      rgba(var(--dark-rgb),0) 64%),
    /* gentle overall settle so highlights never wash the title */
    linear-gradient(0deg, rgba(var(--dark-rgb),0.34), rgba(var(--dark-rgb),0.12));
}
/* resolve the footage into the cream page below — matched to the section
   band that follows, so the join is one continuous parchment */
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  /* shorter so the fade doesn't begin high up the footage — it stays clear
     until near the foot, then resolves seamlessly into the cream below */
  height: clamp(110px, 17vh, 220px); z-index: -1; pointer-events: none;
  /* many-stop ramp to the EXACT cream below (--bg-cool 234,225,210), eased
     so the last stretch melts in with no hard edge */
  background: linear-gradient(180deg,
    rgba(234,225,210,0) 0%,
    rgba(234,225,210,0.05) 18%,
    rgba(234,225,210,0.13) 33%,
    rgba(234,225,210,0.25) 46%,
    rgba(234,225,210,0.40) 58%,
    rgba(234,225,210,0.57) 69%,
    rgba(234,225,210,0.73) 79%,
    rgba(234,225,210,0.87) 88%,
    rgba(234,225,210,0.95) 95%,
    rgba(234,225,210,1) 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  /* identical to the homepage .hero-inner so the title lands in the same spot */
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 14vh, 9rem) - 1cm);
  padding-bottom: clamp(3rem, 8vw, 6.5rem);
}
.page-hero .eyebrow { color: var(--gold-light); margin-bottom: 1.25rem; }
.page-hero h1 {
  color: var(--ink-ondark);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.03;
  margin: 0;
}
.page-hero-lead {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.7;
  color: var(--ink-ondark);
}
/* the title rises on load, like the homepage hero */
.page-hero-inner > * { opacity: 0; animation: hero-rise 1.05s var(--ease) both; }
.page-hero-inner > .eyebrow         { animation-delay: 0.10s; }
.page-hero-inner > h1               { animation-delay: 0.22s; }
.page-hero-inner > .page-hero-lead  { animation-delay: 0.42s; }

/* light feature variant — both content columns on cream (text in dark ink) */
.feature--light .feature-body { background: var(--bg-cool); }
/* multi-paragraph body prose inside a feature column */
.feature-prose p { color: var(--ink-soft); font-size: 0.99rem; line-height: 1.78; margin-bottom: 1.1rem; }
.feature-prose p:last-child { margin-bottom: 0; }
/* a section's opening line, set as a header (like the homepage About lead) */
.section-lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.24;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  margin: 0 auto;
}
/* DESIGN LOCK — always leave the words room to breathe between a section
   header and the text beneath it, on every page */
.section-lead, .about-lead { margin-bottom: clamp(1.7rem, 3.6vw, 2.6rem); }
/* on the dark feature panel the prose reads light */
.feature--dark .feature-prose p { color: var(--ink-onsoft); }
/* Lineage & Influences — the gorge as a long image column beside the body text */
#lineage .feature-split { min-height: clamp(520px, 72vh, 780px); }
/* pull Lineage up closer to The Practice — trim the cream band above its
   heading so the two sections don't drift too far apart */
#lineage > .section-heading { padding-top: clamp(0.5rem, 1.6vw, 1.25rem); }
/* breathing room beneath Lineage so the quote band sits down the page — the
   same rule the homepage uses before its quote band (#who padding-bottom).
   A cream background so the foot of the section reads as one parchment. */
#lineage { padding-bottom: clamp(5rem, 11vh, 9rem); background: var(--bg-cool); }
/* a tall, very gradual top feather so the cream dissolves into the gorge with
   no visible edge beneath the fade */
#lineage .feature-split::before { height: clamp(210px, 28vh, 340px); }
#lineage .feature-split::before {
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.975) 6%,
    rgba(234,225,210,0.92) 13%,
    rgba(234,225,210,0.83) 21%,
    rgba(234,225,210,0.72) 30%,
    rgba(234,225,210,0.6) 39%,
    rgba(234,225,210,0.48) 48%,
    rgba(234,225,210,0.37) 57%,
    rgba(234,225,210,0.27) 66%,
    rgba(234,225,210,0.18) 75%,
    rgba(234,225,210,0.11) 83%,
    rgba(234,225,210,0.06) 90%,
    rgba(234,225,210,0.025) 96%,
    rgba(234,225,210,0) 100%);
}
/* a matching tall, gradual BOTTOM feather so the gorge dissolves down into the
   cream with no hard edge (mirrors the top) */
#lineage .feature-split::after { height: clamp(210px, 28vh, 340px); }
#lineage .feature-split::after {
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.975) 6%,
    rgba(234,225,210,0.92) 13%,
    rgba(234,225,210,0.83) 21%,
    rgba(234,225,210,0.72) 30%,
    rgba(234,225,210,0.6) 39%,
    rgba(234,225,210,0.48) 48%,
    rgba(234,225,210,0.37) 57%,
    rgba(234,225,210,0.27) 66%,
    rgba(234,225,210,0.18) 75%,
    rgba(234,225,210,0.11) 83%,
    rgba(234,225,210,0.06) 90%,
    rgba(234,225,210,0.025) 96%,
    rgba(234,225,210,0) 100%);
}
/* ── The Work feature splits (How the work unfolds / How I work) ──
   Bring Unfolds up toward the Approach (trim the cream band above its
   heading), give both sections a cream ground, and replace the base
   feathers with the tall, very-gradual Lineage ramp so the image edges
   dissolve with no hard line. */
#unfolds, #how, #sf-container { background: var(--bg-cool); }
#unfolds > .section-heading { padding-top: clamp(0.4rem, 1.4vw, 1.25rem); }
#unfolds .feature-split::before,
#unfolds .feature-split::after,
#how .feature-split::before,
#how .feature-split::after,
#sf-container .feature-split::before,
#sf-container .feature-split::after { height: clamp(210px, 28vh, 340px); }
/* tall top feathers into the bg-cool above (the heading bands) */
#unfolds .feature-split::before,
#how .feature-split::before,
#sf-container .feature-split::before {
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.975) 6%,
    rgba(234,225,210,0.92) 13%,
    rgba(234,225,210,0.83) 21%,
    rgba(234,225,210,0.72) 30%,
    rgba(234,225,210,0.6) 39%,
    rgba(234,225,210,0.48) 48%,
    rgba(234,225,210,0.37) 57%,
    rgba(234,225,210,0.27) 66%,
    rgba(234,225,210,0.18) 75%,
    rgba(234,225,210,0.11) 83%,
    rgba(234,225,210,0.06) 90%,
    rgba(234,225,210,0.025) 96%,
    rgba(234,225,210,0) 100%);
}
/* Unfolds foot dissolves into the bg-cool below (the How heading) */
#unfolds .feature-split::after {
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.975) 6%,
    rgba(234,225,210,0.92) 13%,
    rgba(234,225,210,0.83) 21%,
    rgba(234,225,210,0.72) 30%,
    rgba(234,225,210,0.6) 39%,
    rgba(234,225,210,0.48) 48%,
    rgba(234,225,210,0.37) 57%,
    rgba(234,225,210,0.27) 66%,
    rgba(234,225,210,0.18) 75%,
    rgba(234,225,210,0.11) 83%,
    rgba(234,225,210,0.06) 90%,
    rgba(234,225,210,0.025) 96%,
    rgba(234,225,210,0) 100%);
}
/* How I work / The Container feet dissolve into the bg-warm below
   (the movements / medicine-wheel sections) */
#how .feature-split::after,
#sf-container .feature-split::after {
  background: linear-gradient(0deg,
    var(--bg-warm) 0%,
    rgba(237,224,202,0.975) 6%,
    rgba(237,224,202,0.92) 13%,
    rgba(237,224,202,0.83) 21%,
    rgba(237,224,202,0.72) 30%,
    rgba(237,224,202,0.6) 39%,
    rgba(237,224,202,0.48) 48%,
    rgba(237,224,202,0.37) 57%,
    rgba(237,224,202,0.27) 66%,
    rgba(237,224,202,0.18) 75%,
    rgba(237,224,202,0.11) 83%,
    rgba(237,224,202,0.06) 90%,
    rgba(237,224,202,0.025) 96%,
    rgba(237,224,202,0) 100%);
}

/* About quote band — taller video with the emblem-plus-quote block lifted to
   the true vertical centre (a margin-bottom offsets the emblem's weight on top) */
.quoteband--about { min-height: clamp(400px, 50vh, 540px); }
.quoteband--about .quoteband-inner { margin-bottom: clamp(1.4rem, 4vh, 3rem); }
/* The Work quote band — cream-warm sits both above (movements) and below
   (band-gap), so both feathers feather to bg-warm. The waterfall is pushed
   left (zoom + shift) so the quote rests over the dark rock, not the moving
   water. */
.quoteband--work .quoteband-veil { --qb-top: 237, 224, 202; --qb-bottom: 237, 224, 202; }
/* full-bleed soft B&W smoke — already dark, so only a light touch of
   contrast; spans the page with no shift */
.quoteband--work .quoteband-media {
  object-position: center 50%;
  filter: brightness(0.92) contrast(1.05);
}
/* a calm cream breath between the quote band and the closing CTA */
.band-gap { background: var(--bg-warm); height: clamp(2.5rem, 6vh, 5rem); }

/* ── FOUR MOVEMENTS (The Work) — a simple symbolic model, four round
   emblem portraits on cream. No cards or boxes (DNA §4); the round
   images and a single gold hairline ring carry the structure. ── */
.movements { background: var(--bg-warm); padding-block: clamp(5rem, 11vh, 9rem); }
.movements .section-lead { margin-bottom: 0.55rem; }
.movements-intro {
  max-width: none;            /* sits on one line on desktop; wraps on small screens */
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.movements-grid {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0;
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.75rem, 3.2vw, 3rem);
}
.movement { text-align: center; }
/* show the full medallion artwork — the dark disc supplies its own crisp
   circle edge, and the animal is free to break past it (the serpent's coil,
   the hummingbird's wing). No clip, no ring: nothing is cut off, and the
   disc edge stays a hard line. A shaped drop-shadow follows the alpha. */
.movement-figure {
  display: block;
  width: clamp(150px, 17vw, 210px);
  margin: 0 auto clamp(1rem, 1.8vw, 1.4rem);
}
.movement-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(var(--dark-rgb), 0.30));
}
.movement h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.movement-sub {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.85rem;
}
.movement-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 25ch;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .movements-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2.25rem, 6vw, 3rem); }
}
@media (max-width: 460px) {
  .movements-grid { grid-template-columns: 1fr; max-width: 22rem; }
}

/* candles + flame sit around the vertical centre of their portrait frame */
#sf-container .feature-media-video { object-position: center 44%; }

/* ── THE MEDICINE WHEEL (Shamanic Foundations) — the circular quadrant
   of the four animals at centre, the teaching set in the four corners
   around it (Serpent TL · Jaguar TR · Hummingbird BL · Eagle BR). A
   distinct layout from The Work's compact medallion row (DNA §4). ── */
.sf-wheel { background: var(--bg-warm); padding-block: clamp(5rem, 11vh, 9rem); overflow: hidden; }
.sf-wheel .movements-intro { margin-bottom: 0; }
.sf-wheel-stage {
  display: grid;
  grid-template-columns: 1fr clamp(280px, 36vw, 460px) 1fr;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  max-width: var(--max-w);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.sf-wheel-side {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 5rem);
}
.sf-wheel-side--left { text-align: right; align-items: flex-end; }
.sf-wheel-side--right { text-align: left; align-items: flex-start; }
.sf-wheel-text { max-width: 30ch; }
.sf-wheel-text h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ink);
  margin: 0 0 0.15rem;
}
.sf-wheel-role {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.85rem;
}
.sf-wheel-text p:not(.sf-wheel-role) {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.72;
  margin: 0 0 0.75rem;
}
.sf-wheel-text p:last-child { margin-bottom: 0; }

/* the circle — four sliced quarters reassembled (transparent outside) */
.sf-wheel-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0 22px 42px rgba(var(--dark-rgb), 0.34));
}
.sf-wheel-q { position: absolute; width: 50%; height: 50%; display: block; }
.sf-q-serpent     { top: 0; left: 0; }
.sf-q-jaguar      { top: 0; right: 0; }
.sf-q-hummingbird { bottom: 0; left: 0; }
.sf-q-eagle       { bottom: 0; right: 0; }

/* sequenced reveal — the four animals fade up one at a time (serpent,
   jaguar, hummingbird, eagle), then the four texts in the same order,
   once the wheel scrolls into view (.sf-wheel-stage gets .in) */
.sf-qfade { opacity: 0; transition: opacity 0.9s ease; }
.sf-rise  { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.sf-wheel-stage.in .sf-qfade { opacity: 1; }
.sf-wheel-stage.in .sf-rise  { opacity: 1; transform: none; }
.sf-wheel-stage.in .sf-q-serpent     { transition-delay: 0.10s; }
.sf-wheel-stage.in .sf-q-jaguar      { transition-delay: 0.75s; }
.sf-wheel-stage.in .sf-q-hummingbird { transition-delay: 1.40s; }
.sf-wheel-stage.in .sf-q-eagle       { transition-delay: 2.05s; }
.sf-wheel-stage.in .sf-t-serpent     { transition-delay: 3.10s; }
.sf-wheel-stage.in .sf-t-jaguar      { transition-delay: 3.55s; }
.sf-wheel-stage.in .sf-t-hummingbird { transition-delay: 4.00s; }
.sf-wheel-stage.in .sf-t-eagle       { transition-delay: 4.45s; }
@media (prefers-reduced-motion: reduce) {
  .sf-qfade, .sf-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 820px) {
  .sf-wheel-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(2rem, 6vw, 3rem);
  }
  .sf-wheel-circle { width: min(78vw, 380px); order: -1; }
  .sf-wheel-side { align-items: center; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .sf-wheel-side--left, .sf-wheel-side--right { text-align: center; align-items: center; }
  .sf-wheel-text { max-width: 44ch; }
}

/* a quiet caption beneath a feature image (e.g. the altar) */
.feature-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: clamp(1rem, 2.5vw, 1.6rem);
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-ondark); text-align: center;
  background: linear-gradient(0deg, rgba(var(--dark-rgb),0.6), rgba(var(--dark-rgb),0) 100%);
}

/* centred statement band — a single line that lands the page's invitation */
.statement {
  background: var(--bg-warm);
  text-align: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}
.statement blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.26;
  color: var(--ink);
  text-wrap: balance;
}
.statement blockquote::before {
  content: ""; display: block;
  width: 54px; height: 1px; margin: 0 auto 1.8rem;
  background: #C99634;
}

@media (max-width: 860px) {
  .page-hero { min-height: 78vh; }
  .page-hero-inner { padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: clamp(5rem, 22vw, 9rem); }
  .page-hero-veil {
    background:
      linear-gradient(180deg, rgba(var(--dark-rgb),0.52) 0%, rgba(var(--dark-rgb),0.16) 18%, rgba(var(--dark-rgb),0) 36%),
      linear-gradient(160deg, rgba(var(--dark-rgb),0.74) 0%, rgba(var(--dark-rgb),0.4) 48%, rgba(var(--dark-rgb),0.2) 100%),
      linear-gradient(0deg, rgba(var(--dark-rgb),0.4), rgba(var(--dark-rgb),0.12));
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-inner > * { opacity: 1; animation: none; }
}

/* ─── BOOK A SESSION ─────────────────────────────────────────────
   Opening · what to expect · the investment · before-booking form ·
   the scheduler. Built in the page's parchment-and-gold language. */
.page-hero-media--ocean { object-position: center 42%; }
.page-hero-media--waterfall { object-position: center 56%; }
.feature-prose--centred { text-align: center; }
.feature-prose--centred p { max-width: 60ch; margin-inline: auto; }

/* ─── WORK WITH ME ───────────────────────────────────────────────
   Two offerings side by side, and a quote band feathering warm→cool. */
.wwm-offerings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.wwm-offer h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}
.wwm-offer-rule { width: 44px; height: 2px; background: var(--gold); margin-bottom: 1.5rem; }
.wwm-offer p {
  color: var(--ink-soft);
  line-height: 1.78;
  font-size: 0.98rem;
  margin-bottom: 1rem;
}
.wwm-offer p:last-child { margin-bottom: 0; margin-top: 1.4rem; }
#wwm-intro { padding-bottom: clamp(1.8rem, 4vh, 3rem); }
#wwm-ways { padding-top: clamp(2.4rem, 5vh, 3.6rem); }
.quoteband--wwm { min-height: clamp(400px, 50vh, 540px); }
.quoteband--wwm .quoteband-inner { margin-bottom: clamp(1.4rem, 4vh, 3rem); }
.quoteband--wwm .quoteband-veil { --qb-top: 237, 224, 202; --qb-bottom: 234, 225, 210; }
@media (max-width: 760px) {
  .wwm-offerings { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* ─── SHAMANIC ENERGY MEDICINE ───────────────────────────────────
   Centred statements, a two-column conditions list, a dark statement
   band over video, and a grid of practice cards. */
.page-hero-media--canyon { object-position: center 42%; }
.nav-more-menu a.is-active { color: var(--gold) !important; }

/* italic serif emphasis line used between prose blocks */
.statement-em {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  max-width: 42ch;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
}
.statement-em--lead { margin: 0 auto clamp(1.4rem, 3vw, 2rem); }

.sem-helps-intro, .sem-practices-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  color: var(--ink-soft);
  line-height: 1.75;
}

/* What this work may help with — two columns of diamond-marked items */
.sem-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 4vw, 3.5rem);
  max-width: 820px;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
}
.sem-conditions ul { list-style: none; }
.sem-conditions li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.sem-conditions li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* SEM dark feature splits (The luminous body / A complement) use the shared
   .feature feature--dark component — the centred ruled header sits above each
   split, the heading is separate from the body, and the cream feathers blend
   the dark panels into the parchment, exactly as on the other pages. Just
   ensure body paragraphs read light and give the feathers a tall, gentle taper. */
.feature--dark .feature-body p { color: var(--ink-onsoft); }
/* clear space between the dark-split heading and its body text */
.feature--dark .feature-body-inner h2 { margin-bottom: clamp(1.3rem, 2.8vw, 2rem); }
/* The three SEM dark splits (luminous / complement / reclaim): give the dark
   boxes generous vertical room and keep the BOTTOM feather short so the cream
   fade never bleeds up into the last line of copy. */
#sem-doorways .feature-body, #sem-chosen .feature-body, #sem-purpose .feature-body {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
#sem-doorways .feature-split::before, #sem-chosen .feature-split::before, #sem-purpose .feature-split::before {
  height: clamp(150px, 20vh, 240px);
}
#sem-doorways .feature-split::after, #sem-chosen .feature-split::after, #sem-purpose .feature-split::after {
  height: clamp(70px, 9vh, 120px);
}
/* the Doorways photograph — a dark, high-contrast corridor of arches — already
   sits in the split's atmosphere; just a whisper darker to seat it fully */
#sem-doorways .feature-media img { filter: brightness(0.92); }

/* ─────────────────────────────────────────────────────────────────
   SOUL RETRIEVAL page — dark splits, signs list, quote band
   ───────────────────────────────────────────────────────────────── */
/* generous room in the dark boxes; tall top feather, short bottom feather so
   the cream fade never bleeds up into the last line (mirrors the SEM splits) */
#soul-means .feature-body, #soul-integration .feature-body {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
#soul-means .feature-split::before, #soul-integration .feature-split::before {
  height: clamp(150px, 20vh, 240px);
}
#soul-means .feature-split::after, #soul-integration .feature-split::after {
  height: clamp(70px, 9vh, 120px);
}
/* the italic lede reads as a subheading — give it room before the body text */
#soul-means .feature-body .lede,
#soul-integration .feature-body .lede { margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem); }

/* When It May Be Relevant — cream split: text left, dark forest right (mirrors
   the homepage "Who this is for"). Body-text signs sit in the copy column. */
#soul-signs .feature-body { background: var(--bg-cool); }
#soul-signs .feature-media img { filter: brightness(1.02) contrast(1.02); object-position: center 42%; }
/* nudge the forest crop left so the receding archway centres in the panel */
#soul-integration .feature-media img { object-position: 74% center; }
.soul-when-prose > p { color: var(--ink-soft); line-height: 1.8; }
.soul-signs {
  list-style: none;
  margin: clamp(0.9rem, 2vw, 1.3rem) 0 clamp(1.2rem, 2.6vw, 1.7rem);
  display: grid;
  gap: 0.6rem;
}
.soul-signs li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.soul-signs li::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.62em;
  width: 6px; height: 6px;
  margin-top: -3px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* Quote band — the figure in the distance. Feather into the cream that the
   neighbouring dark splits fade to, top and bottom. */
.quoteband--soul .quoteband-veil { --qb-top: 234, 225, 210; --qb-bottom: 234, 225, 210; }
.quoteband--soul .quoteband-media { object-position: center 46%; }

/* Forms of Work — dark boxes that open on hover to reveal Sherif's fuller copy.
   Collapsed: name + one-line essence. On hover (or focus / tap-to-pin via
   .is-open), the box lifts and the detail unfurls. Selective motion elsewhere
   keeps the page calm; here the interaction is the only movement. */
.sem-forms-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--ink-soft);
  line-height: 1.75;
}
.sem-forms-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: clamp(0.7rem, 1.1vw, 1rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
@media (max-width: 1080px) { .sem-forms-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sem-forms-list { grid-template-columns: 1fr; } }
.sem-form {
  position: relative;
  min-height: 12rem;
  padding: clamp(1.3rem, 1.5vw, 1.65rem) clamp(1.3rem, 1.5vw, 1.55rem);
  /* graphite with depth: warm gold light in the top corner, a diagonal ramp
     from a lifted top edge down to a deeper base, so the card reads dimensional
     rather than a flat fill */
  background:
    radial-gradient(135% 95% at 6% 0%, rgba(203,162,92,0.16), rgba(203,162,92,0) 52%),
    linear-gradient(157deg, #474E55 0%, #3A4147 47%, #2E343B 100%);
  border: 1px solid rgba(203,162,92,0.22);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 34px -22px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
@media (max-width: 1080px) { .sem-form { min-height: 11rem; } }
@media (max-width: 560px)  { .sem-form { min-height: 9rem; } }
.sem-form:hover,
.sem-form:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 56px -26px rgba(0,0,0,0.6);
  border-color: rgba(203,162,92,0.6);
  outline: none;
}
.sem-form.is-active {
  border-color: rgba(203,162,92,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 56px -26px rgba(0,0,0,0.6);
}
.sem-form-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name icon" "sum icon";
  align-items: start;
  column-gap: clamp(1rem, 3vw, 2rem);
}
.sem-form-name {
  grid-area: name;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  transition: color 0.3s var(--ease);
}
.sem-form-sum {
  grid-area: sum;
  font-size: 0.86rem;
  color: rgba(245,241,232,0.62);
  line-height: 1.55;
  margin-top: 0.6rem;
}
.sem-form-icon {
  grid-area: icon;
  position: relative;
  width: 18px; height: 18px;
  margin-top: 0.35rem;
}
.sem-form-icon::before, .sem-form-icon::after {
  content: "";
  position: absolute;
  background: var(--gold-light);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.sem-form-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.sem-form-icon::after  { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
/* the icon is a + when collapsed and a − only when actually expanded */
.sem-form.is-active .sem-form-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.sem-form.is-active .sem-form-icon::before { background: var(--gold); }
.sem-form:hover .sem-form-name,
.sem-form:focus-visible .sem-form-name,
.sem-form.is-active .sem-form-name { color: var(--gold-light); }

/* Detail panel — spans the full grid width, opens beneath the active row.
   Height animates via grid-template-rows 0fr -> 1fr. JS inserts / removes it. */
.sem-form-detail { display: none; }
.sem-form-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background:
    radial-gradient(120% 100% at 3% 0%, rgba(203,162,92,0.12), rgba(203,162,92,0) 52%),
    linear-gradient(160deg, #454C53 0%, #373E44 55%, #2C3238 100%);
  border: 1px solid rgba(203,162,92,0.28);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 54px -30px rgba(0,0,0,0.55);
  transition: grid-template-rows 0.5s var(--ease), opacity 0.45s var(--ease);
}
.sem-form-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.sem-form-panel-inner { overflow: hidden; min-height: 0; }
.sem-form-panel-body {
  padding: clamp(1.9rem, 3vw, 2.7rem) clamp(1.9rem, 3.2vw, 3rem) clamp(2rem, 3.2vw, 2.9rem);
}
.sem-form-panel-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: #fff;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.sem-form-panel-body .sem-form-detail { display: block; }
.sem-form-panel-copy,
.sem-form-panel-body {
  color: rgba(245,241,232,0.78);
}
.sem-form-panel-body p {
  color: rgba(245,241,232,0.78);
  line-height: 1.78;
  font-size: 0.96rem;
  margin: 0 0 1rem;
  break-inside: avoid;
  max-width: 40rem;
}
/* full-width panels read as two comfortable columns on wide screens */
@media (min-width: 900px) {
  .sem-form-panel-copy { columns: 2; column-gap: clamp(2.2rem, 4vw, 3.4rem); }
  .sem-form-panel-copy p { max-width: none; }
}
.sem-form-panel-body p:last-child { margin-bottom: 0; }
.sem-form-link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--gold-light);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(203,162,92,0.4);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sem-form-link:hover { color: #fff; border-color: var(--gold); }

/* Practices within this framework — card grid */
.sem-practices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}
.sem-practice {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 2.8vw, 2.4rem);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(203,162,92,0.1), rgba(203,162,92,0) 55%),
    var(--dark);
  border: 1px solid rgba(203,162,92,0.22);
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,0.55);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.sem-practice:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -26px rgba(0,0,0,0.62);
  border-color: rgba(203,162,92,0.65);
}
.sem-practice h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  color: #fff;
  margin-bottom: 0.9rem;
}
.sem-practice p { color: rgba(245,241,232,0.76); line-height: 1.72; font-size: 0.95rem; margin: 0; }
.sem-practice-link {
  margin-top: 1.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: color 0.3s var(--ease);
}
.sem-practice--linked:hover .sem-practice-link { color: #fff; }

/* dark CTA with two buttons */
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.btn-outline-light {
  color: var(--ink-ondark);
  background: transparent;
  border: 1px solid rgba(245,241,232,0.5);
}
.btn-outline-light:hover { background: rgba(245,241,232,0.1); border-color: var(--gold-light); color: #fff; }

@media (max-width: 860px) { .sem-practices-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .sem-conditions { grid-template-columns: 1fr; gap: 0; }
  .sem-practices-grid { grid-template-columns: 1fr; }
}

/* Tighter vertical rhythm — these sections sit closer than the default
   .section so the page doesn't open up with too much parchment between bands. */
#book-intro  { padding-bottom: clamp(1.8rem, 4vh, 3rem); }
#book-expect { padding-top: clamp(2.4rem, 5vh, 3.6rem); padding-bottom: clamp(2.4rem, 5vh, 3.6rem); }
#book-invest { padding-top: clamp(2.4rem, 5vh, 3.6rem); padding-bottom: clamp(2.6rem, 5.5vh, 4rem); }
#book-form   { padding-top: clamp(2.4rem, 5vh, 3.6rem); padding-bottom: clamp(2.6rem, 5.5vh, 4rem); }
#schedule    { padding-top: clamp(2.4rem, 5vh, 3.6rem); }

/* The Investment — three quiet cards */
.invest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.invest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 3.4vw, 2.9rem) clamp(1.4rem, 2.4vw, 2rem);
  background: var(--bg-warm);
  border: 1px solid rgba(203,162,92,0.26);
  border-top: 2px solid var(--gold);
  /* now an interactive button */
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.invest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(36,33,25,0.45);
  border-color: rgba(203,162,92,0.55);
}
.invest-card--feature {
  background: rgba(203,162,92,0.09);
  border-color: rgba(203,162,92,0.5);
}
.invest-card[aria-pressed="true"] {
  background: rgba(203,162,92,0.16);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold), 0 18px 40px -22px rgba(36,33,25,0.45);
}
/* the Choose / Selected pill, pinned to the foot of each card */
.invest-pick {
  margin-top: auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* the primary booking action - a solid gold button with white type so it
     reads as the thing to click, not a faint outline */
  color: #fff;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.62rem 1.5rem;
  box-shadow: 0 8px 20px -8px rgba(203,162,92,0.65);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.invest-card:hover .invest-pick {
  background: #9C7530;
  border-color: #9C7530;
  box-shadow: 0 12px 26px -8px rgba(120,90,36,0.55);
}
.invest-card[aria-pressed="true"] .invest-pick {
  background: #8A6627;
  border-color: #8A6627;
  color: #fff;
}
/* On the deepest card the gold button sits on gold-toned sand, so give it a
   soft light outline to lift it off the background. Hold the outline on hover. */
#book-invest .invest-card--tier3 .invest-pick {
  border-color: rgba(248,241,226,0.7);
}
#book-invest .invest-card--tier3:hover .invest-pick {
  border-color: rgba(248,241,226,0.9);
}
.invest-card[aria-pressed="true"] .invest-pick::after { content: " \2713"; }

/* selection carried into the booking form */
.booking-selected {
  max-width: 56ch;
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.booking-selected strong {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.booking-selected-change {
  margin-left: 0.6rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.booking-selected-change:hover { color: var(--gold); }
.invest-flag {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  white-space: nowrap;
}
.invest-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.invest-price {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.invest-per {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.72;
  margin-top: 0.5rem;
}
.invest-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 1.25rem;
  margin-bottom: 1.7rem;
  max-width: 26ch;
}
.invest-note {
  max-width: 60ch;
  margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  opacity: 0.85;
}
.book-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.book-actions-alt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(203,162,92,0.4);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.book-actions-alt:hover { color: var(--ink); border-color: var(--gold); }

/* The Investment on a dark field — the light cards pop for contrast & oomph */
#book-invest {
  /* A full-height section, so the linear ramp holds the lighter --dark-2 blue
     across the whole visible area and only eases toward the deep footer tone
     off-canvas (130%) - otherwise a section this tall bottoms out at pure
     --dark and reads identical to the footer. */
  background:
    radial-gradient(120% 100% at 12% 88%, rgba(var(--shadow-rgb),0.30), rgba(var(--shadow-rgb),0) 56%),
    radial-gradient(100% 90% at 92% 6%, rgba(var(--moss-rgb),0.24), rgba(var(--moss-rgb),0) 52%),
    linear-gradient(160deg, var(--dark-2) 0%, var(--dark-2) 48%, var(--dark) 130%);
}
#book-invest .eyebrow { color: var(--gold-light); }
#book-invest .section-lead { color: var(--ink-ondark); }
#book-invest .invest-note { color: rgba(245,241,232,0.78); opacity: 1; }
#book-invest .invest-card { box-shadow: 0 18px 44px -26px rgba(0,0,0,0.6); }
#book-invest .invest-card:hover {
  box-shadow: 0 0 0 1px rgba(203,162,92,0.45), 0 28px 56px -22px rgba(0,0,0,0.65);
}
/* keep the feature + selected cards on a LIGHT parchment so text stays
   readable against the dark section (their translucent tints would
   otherwise turn dark-on-dark) */
#book-invest .invest-card--feature {
  background: linear-gradient(180deg, rgba(203,162,92,0.18), rgba(203,162,92,0.05)), var(--bg-warm);
  border-color: var(--gold);
}
#book-invest .invest-card[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(203,162,92,0.22), rgba(203,162,92,0.08)), var(--bg-warm);
}
/* Value/commitment progression: the parchment deepens gently as the package
   grows - Single lightest, Three medium, Six deepest. Same specificity as
   .invest-card--feature above but placed after it, so tier3 wins its background.
   The selected state ([aria-pressed]) is more specific, so it still overrides
   with the gold-selected tint on click. */
#book-invest .invest-card--tier1 {
  background: linear-gradient(180deg, #F5EDDC 0%, #EFE4CF 100%);
}
#book-invest .invest-card--tier2 {
  background: linear-gradient(180deg, #EDDFC5 0%, #E4D3B4 100%);
}
#book-invest .invest-card--tier3 {
  background:
    linear-gradient(180deg, rgba(203,162,92,0.14), rgba(203,162,92,0.03)),
    linear-gradient(180deg, #E1CFAD 0%, #D5C098 100%);
}
/* The standard gold label loses contrast on the deeper tier backgrounds, so
   deepen it to a richer bronze-gold that stays legible on the sand. */
#book-invest .invest-card--tier2 .invest-name { color: #97772F; }
#book-invest .invest-card--tier3 .invest-name { color: #866927; }
#book-invest .book-actions-alt { color: var(--gold-light); border-bottom-color: rgba(203,162,92,0.5); }
#book-invest .book-actions-alt:hover { color: #fff; border-bottom-color: var(--gold-light); }

/* Before Booking — form */
.booking-intro {
  max-width: 56ch;
  margin: 0 auto;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.booking-form {
  max-width: 660px;
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
}
.form-q {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.9rem;
}
.form-num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  margin-top: 0.1rem;
}
.form-q-body { flex: 1; }
.form-q-body label {
  display: block;
  font-size: 0.96rem;
  color: var(--ink);
  margin-bottom: 0.65rem;
  line-height: 1.5;
}
.form-q-body label em { color: var(--ink-soft); opacity: 0.7; font-style: italic; }
.booking-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--sans);
  /* 16px keeps iOS from auto-zooming the page when a field gains focus */
  font-size: 16px;
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(203,162,92,0.3);
  border-radius: 2px;
  resize: vertical;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.booking-form textarea::placeholder { color: var(--ink-soft); opacity: 0.4; }
.booking-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(203,162,92,0.22);
}
.form-actions { text-align: center; margin-top: 2.2rem; }
.form-confirm {
  max-width: 56ch;
  margin: 2.5rem auto 0;
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(203,162,92,0.3);
  color: var(--ink-soft);
}
.form-confirm-lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* Schedule — embed / placeholder */
.schedule-embed {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(203,162,92,0.28);
  background: var(--bg-warm);
}
.schedule-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}
.schedule-placeholder-lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--ink);
}
.schedule-placeholder p { max-width: 50ch; color: var(--ink-soft); line-height: 1.7; }
.schedule-placeholder .btn { margin-top: 0.6rem; }
.schedule-embed iframe { display: block; width: 100%; border: 0; }

@media (max-width: 860px) {
  .invest-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 460px) {
  .form-q { gap: 0.8rem; }
  .form-num { width: 32px; height: 32px; font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS  —  a curated arc of client words, not a flat list
═══════════════════════════════════════════════════════════════ */

/* ── alternating movements: a dark section reads its voices in light,
   the same trade-off of dark and cream the rest of the site follows ── */
.section--dark { position: relative; background: var(--dark); color: var(--ink-ondark); }
.section--dark .voices-head h2 { color: var(--ink-ondark); }
.section--dark .voice-quote    { color: var(--ink-ondark); }
.section--dark .voice-name     { color: var(--ink-ondark); opacity: 0.72; }
/* the copy rides above the feathers so the cream never washes the text */
.section--dark > .container { position: relative; z-index: 2; }
/* top & bottom feathers — the cream sections above and below dissolve into
   the dark rather than meeting a hard line (same taper as .feature-split) */
.section--dark::before,
.section--dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(90px, 13vh, 170px);
  z-index: 1;
  pointer-events: none;
}
.section--dark::before {
  top: 0;
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.9) 16%,
    rgba(234,225,210,0.66) 36%,
    rgba(234,225,210,0.38) 56%,
    rgba(234,225,210,0.16) 76%,
    rgba(234,225,210,0.05) 90%,
    rgba(234,225,210,0) 100%);
}
.section--dark::after {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.9) 16%,
    rgba(234,225,210,0.66) 36%,
    rgba(234,225,210,0.38) 56%,
    rgba(234,225,210,0.16) 76%,
    rgba(234,225,210,0.05) 90%,
    rgba(234,225,210,0) 100%);
}

/* ── the anchor voice, now carried on a media band near the foot of the
   page (matches the quote bands on the other pages) ── */
.quoteband--reviews .quoteband-veil { --qb-top: 234, 225, 210; --qb-bottom: 234, 225, 210; }
.quoteband--reviews .quoteband-media { object-position: center 46%; }
.quoteband-cite {
  margin: 1.4rem 0 0;
  text-align: center;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: var(--gold);
}
.reviews-more-actions { margin-top: 2.2rem; }

/* ── a two-quote movement centres to a narrower measure ── */
.voices-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 840px;
}

/* ── brief words: a lighter interlude of shorter reflections ── */
.brief-words {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  text-align: center;
}
.brief-words blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.brief-words blockquote::before { content: "\201C"; }
.brief-words blockquote::after  { content: "\201D"; }
.brief-words cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--gold);
}
/* a small gold diamond separates each brief line */
.brief-words li + li { margin-top: clamp(2.1rem, 4.5vw, 3rem); }
.brief-words li + li::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  margin: 0 auto clamp(2.1rem, 4.5vw, 3rem);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  /* both grid variants stack on a phone */
  .voices-grid--two { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT · FAQ · WORKSHOPS · BLOG  (the remaining pages)
═══════════════════════════════════════════════════════════════ */

/* ── contact form: text/email inputs match the booking textareas ── */
.booking-form input[type="text"],
.booking-form input[type="email"] {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--sans);
  font-size: 16px;               /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(203,162,92,0.3);
  border-radius: 2px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.booking-form input::placeholder { color: var(--ink-soft); opacity: 0.4; }
.booking-form input[type="text"]:focus,
.booking-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(203,162,92,0.22);
}
.contact-note {
  margin: clamp(1.8rem,3.5vw,2.6rem) auto 0;
  max-width: 56ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
}
.contact-note a { color: var(--gold); }

/* a plain (parchment) section, for alternating with .bg-cool without dark */
.section--plain { background: var(--bg); }
/* the workshop's dark "explore" band keeps its lead legible */
.section--dark .section-lead { color: var(--ink-ondark); }

/* ── FAQ accordion (native <details>, no JS) ── */
.faq-item { border-bottom: 1px solid var(--gold-line); }
.faq-item:first-child { border-top: 1px solid var(--gold-line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-q { flex: 1; }
.faq-mark { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-mark::before { top: 50%; left: 0; width: 16px; height: 1.5px; transform: translateY(-50%); }
.faq-mark::after  { left: 50%; top: 0; width: 1.5px; height: 16px; transform: translateX(-50%); }
.faq-item[open] .faq-mark::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq-answer { padding: 0 0 clamp(1.2rem, 2.5vw, 1.6rem); max-width: 62ch; }
.faq-answer p { color: var(--ink-soft); line-height: 1.8; margin: 0 0 0.9rem; }
.faq-answer p:last-child { margin-bottom: 0; }
/* inline links inside body prose read in gold with a soft underline —
   never the browser's default blue */
.feature-prose a,
.booking-intro a,
.faq-answer a,
.contact-note a,
.soul-when-prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(203,162,92,0.42);
  text-underline-offset: 2px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.feature-prose a:hover,
.booking-intro a:hover,
.faq-answer a:hover,
.contact-note a:hover,
.soul-when-prose a:hover {
  color: var(--gold-light);
  text-decoration-color: var(--gold);
}

/* ── workshops ── */
.ws-meta {
  list-style: none;
  margin: clamp(2rem,5vw,3rem) auto clamp(2.5rem,5vw,3.5rem);
  padding: clamp(1.4rem,3vw,1.9rem) 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  text-align: center;
}
.ws-meta li { display: flex; flex-direction: column; gap: 0.55rem; }
.ws-meta-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.7rem; font-weight: 700; color: var(--gold);
}
.ws-meta-value { font-family: var(--serif); font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--ink); }
@media (max-width: 560px) { .ws-meta { grid-template-columns: 1fr; gap: 1.3rem; } }

.ws-explore-lead { color: var(--ink-ondark); margin-bottom: clamp(2rem,4vw,2.8rem); }
.ws-explore-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem;
}
.ws-explore-list li {
  position: relative; padding-left: 1.5rem;
  color: var(--ink-ondark); line-height: 1.5; font-size: 1rem;
}
.ws-explore-list li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.62em;
  width: 6px; height: 6px; margin-top: -3px;
  border: 1px solid var(--gold); transform: rotate(45deg);
}
@media (max-width: 640px) { .ws-explore-list { grid-template-columns: 1fr; } }

.ws-details { margin: clamp(1.4rem,3vw,2rem) 0 0; }
.ws-details > div {
  display: grid; grid-template-columns: 170px 1fr; gap: 0.5rem 2rem;
  padding: clamp(1rem,2.2vw,1.4rem) 0; border-top: 1px solid var(--gold-line);
}
.ws-details > div:last-child { border-bottom: 1px solid var(--gold-line); }
.ws-details dt {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 700; color: var(--gold); padding-top: 0.2rem;
}
.ws-details dd { margin: 0; color: var(--ink-soft); line-height: 1.75; }
@media (max-width: 560px) { .ws-details > div { grid-template-columns: 1fr; gap: 0.4rem; } }

.ws-bring { margin-top: clamp(2rem,4vw,2.8rem); }
.ws-bring-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.72rem; font-weight: 700; color: var(--gold); margin: 0 0 1rem;
}

/* ── blog: three streams + a future placeholder ── */
.blog-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem,2.2vw,1.6rem);
}
.blog-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(2rem,4vw,3rem);
  background: var(--bg-cool);
  border: 1px solid rgba(203,162,92,0.28);
  border-radius: 2px;
  min-height: 230px;
}
.blog-card-num {
  font-family: var(--serif); font-style: italic; font-size: 1.5rem;
  color: var(--gold); opacity: 0.85; line-height: 1; margin-bottom: 0.9rem;
}
.blog-card-title {
  font-family: var(--serif); font-size: clamp(1.5rem,2.4vw,2rem);
  font-weight: 500; color: var(--ink); margin: 0 0 0.6rem;
}
.blog-card-sub { color: var(--ink-soft); line-height: 1.6; margin: 0 0 auto; }
.blog-card-tag {
  margin-top: 1.6rem; align-self: flex-start;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.68rem; font-weight: 700; color: var(--gold);
  padding: 0.4rem 0.85rem; border: 1px solid rgba(203,162,92,0.4); border-radius: 999px;
}
.blog-card--future {
  background: transparent; border-style: dashed;
  align-items: center; justify-content: center; text-align: center;
  min-height: 230px;
}
.blog-card--future .blog-card-tag { margin: 0; color: var(--ink-soft); border-color: rgba(120,110,90,0.3); }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── workshops "What You'll Explore": cream eyebrow band on top (reusing
   .feature > .section-heading), then a dark panel whose top & bottom melt
   into the cream with a long, many-stop taper (no hard line, no crowding) ── */
.ws-explore-panel {
  position: relative;
  background: var(--dark);
  color: var(--ink-ondark);
  overflow: hidden;
  /* top padding clears the top feather so the lead sits on solid dark;
     bottom padding keeps the last list items well clear of the bottom fade */
  padding-block: clamp(105px, 14vh, 170px) clamp(120px, 17vh, 200px);
}
.ws-explore-panel > .container { position: relative; z-index: 2; }
.ws-explore-panel::before,
.ws-explore-panel::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  height: clamp(90px, 12vh, 150px);
}
.ws-explore-panel::before {
  top: 0;
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.985) 8%,
    rgba(234,225,210,0.94) 17%,
    rgba(234,225,210,0.85) 27%,
    rgba(234,225,210,0.72) 37%,
    rgba(234,225,210,0.57) 47%,
    rgba(234,225,210,0.42) 57%,
    rgba(234,225,210,0.28) 67%,
    rgba(234,225,210,0.17) 77%,
    rgba(234,225,210,0.08) 86%,
    rgba(234,225,210,0.03) 94%,
    rgba(234,225,210,0) 100%);
}
.ws-explore-panel::after {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.985) 8%,
    rgba(234,225,210,0.94) 17%,
    rgba(234,225,210,0.85) 27%,
    rgba(234,225,210,0.72) 37%,
    rgba(234,225,210,0.57) 47%,
    rgba(234,225,210,0.42) 57%,
    rgba(234,225,210,0.28) 67%,
    rgba(234,225,210,0.17) 77%,
    rgba(234,225,210,0.08) 86%,
    rgba(234,225,210,0.03) 94%,
    rgba(234,225,210,0) 100%);
}

/* ── blog author portrait — image feathered top & bottom into the cream ── */
.author-portrait {
  margin: clamp(1.8rem,3.5vw,2.6rem) auto clamp(1.3rem,2.6vw,1.9rem);
  max-width: 320px;
}
.author-portrait img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.author-note {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem,1.6vw,1.4rem); line-height: 1.55; color: var(--ink);
  max-width: 40ch; margin: 0 auto 1rem;
}
.author-byline {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.75rem; color: var(--gold); margin: 0;
}

/* Experience page — "People experience this differently" list (on cream feature) */
.exp-list {
  list-style: none; margin: 0.4rem 0 1.5rem; padding: 0;
}
.exp-list li {
  position: relative; padding-left: 1.6rem; margin: 0.55rem 0;
  color: var(--ink-soft); line-height: 1.55;
}
.exp-list li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.6em;
  width: 6px; height: 6px; margin-top: -3px;
  border: 1px solid var(--gold); transform: rotate(45deg);
}

/* Homepage About — inline "Read more" link beneath the prose */
.about-more { display: inline-flex; margin-top: 1.9rem; }

/* About page — Sherif's B&W portrait sits in the Lineage & Influences split,
   inheriting that section's tall, very-gradual top/bottom cream feather.
   His photo is landscape, so frame his face within the taller image column. */
.feature-media--portrait img { object-position: center 34%; }
/* On mobile the split stacks into a short, wide band — too short for a
   portrait, so it crops to a slice below the chin. Give Sherif's portrait a
   taller, portrait-shaped band and centre it on his face so head + shoulders
   sit fully in frame. */
@media (max-width: 860px) {
  .feature-media--portrait { height: auto; max-height: none; aspect-ratio: 5 / 6; }
  .feature-media--portrait img { object-position: center 26%; }
}

/* Book a Session — Practice Better booking actions (opens in a secure tab) */
.book-direct { margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.book-direct-more { display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap; }
.book-direct-more a { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--gold); text-decoration: underline;
  text-decoration-color: rgba(203,162,92,0.42); text-underline-offset: 2px; }
.book-direct-more a:hover { color: var(--gold-light); }
.book-direct-sep { color: rgba(203,162,92,0.5); }

/* Contact form — centre the numerals in their gold circles (Cormorant uses
   old-style figures that sit low; lining figures sit evenly on the baseline) */
.form-num { line-height: 1; margin-top: 0; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ── Mobile-only image reframing: the stacked bands are short, so re-centre
   each photo/clip on its subject and lift it clear of the top feather. ── */
@media (max-width: 860px) {
  /* The Experience — waterfall/greenery instead of dark moss foreground */
  #unfolds .feature-media img { object-position: center 34%; }
  /* Foundations — more sage + flame, less candle pillar */
  #sf-container .feature-media-video { object-position: center 24%; }
  /* Shamanic Energy Medicine — show the full archway in a square band with a
     lighter top feather so the first arch's crown isn't blended away */
  #sem-doorways .feature-media { height: auto; max-height: none; aspect-ratio: 1 / 1; }
  #sem-doorways .feature-media img { object-position: center 32%; }
  #sem-doorways .feature-split::before { height: clamp(44px, 12vw, 74px); }
  /* Workshops — lift "Preparing for the Day" so it doesn't start so low
     (trim its own top padding and the details section's bottom padding) */
  #ws-details { padding-bottom: clamp(1.4rem, 4.5vw, 2.4rem); }
  #ws-prepare { padding-top: clamp(1.6rem, 5vw, 2.6rem); }
}

/* ─── CMS blog: post cards (index) + single post view ─────────── */
.blog-card-date { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-soft); opacity: 0.7; margin-top: 0.3rem; }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--gold); }
.blog-card-more {
  margin-top: auto; align-self: flex-start; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(203,162,92,0.5); padding-bottom: 2px;
}
.blog-card-more:hover { color: var(--ink); border-bottom-color: var(--gold); }
[data-cms-postview] .post-title {
  font-family: var(--serif); font-weight: 500; line-height: 1.1;
  font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0.6rem 0 0.4rem;
}
[data-cms-postview] .post-date { color: var(--ink-soft); opacity: 0.7; font-size: 0.82rem; letter-spacing: 0.05em; margin-bottom: 2rem; }
[data-cms-postview] .post-body { font-size: 1.02rem; line-height: 1.85; color: var(--ink-soft); }
[data-cms-postview] .post-body h2 { font-family: var(--serif); color: var(--ink); font-size: 1.7rem; margin: 2.2rem 0 0.8rem; }
[data-cms-postview] .post-body h3 { font-family: var(--serif); color: var(--ink); font-size: 1.35rem; margin: 1.8rem 0 0.6rem; }
[data-cms-postview] .post-body p { margin: 0 0 1.2rem; }
[data-cms-postview] .post-body ul { margin: 0 0 1.2rem 1.2rem; }
[data-cms-postview] .post-body a { color: var(--gold); }
[data-cms-postview] .post-back { margin-top: 2.6rem; }
[data-cms-postview] .post-back a { color: var(--ink-soft); text-decoration: none; letter-spacing: 0.04em; }
[data-cms-postview] .post-back a:hover { color: var(--gold); }

/* ─── Full-width photo band, feathered gently into the cream ────
   Used on The Experience (the altar, between the ceremonial space
   and Integration). Shorter taper than the section feathers so the
   fade never encroaches on the subject. */
.photo-band { position: relative; overflow: hidden; background: var(--bg-cool); }
.photo-band img {
  display: block; width: 100%;
  height: auto;            /* show the full photo at its natural aspect */
  /* Samsung Internet can ignore height:auto when the <img> carries explicit
     width/height attributes, holding the height near its attribute value and
     distorting the picture. Pinning the aspect-ratio forces the height to be
     derived from the rendered width, so it scales correctly everywhere. */
  aspect-ratio: 2048 / 1012;
  max-width: 100%;
}
.photo-band::before,
.photo-band::after {
  content: ""; position: absolute; left: 0; right: 0;
  z-index: 1; pointer-events: none;
}
/* Taller, gradual tapers (matching the site's section feathers) so the fade
   reads clearly on the tall desktop image - the short version vanished there.
   Top is generous (fades the wall light); bottom is shorter to spare the
   altar objects. */
.photo-band::before {
  top: 0;
  height: clamp(90px, 14vh, 185px);
  background: linear-gradient(180deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.90) 15%,
    rgba(234,225,210,0.62) 37%,
    rgba(234,225,210,0.34) 58%,
    rgba(234,225,210,0.13) 80%,
    rgba(234,225,210,0) 100%);
}
.photo-band::after {
  bottom: 0;
  height: clamp(64px, 10vh, 130px);
  background: linear-gradient(0deg,
    var(--bg-cool) 0%,
    rgba(234,225,210,0.90) 15%,
    rgba(234,225,210,0.62) 37%,
    rgba(234,225,210,0.34) 58%,
    rgba(234,225,210,0.13) 80%,
    rgba(234,225,210,0) 100%);
}