/* ============================================================
   THREE LITTLE LUNAS — Brand System v1 (design tokens)
   Earthy · Elemental · Expansive
   Display: Fraunces  ·  Body/UI: Manrope
   ============================================================ */

:root {
  /* ==========================================================
     CANYON & MOSS — approved palette
     ========================================================== */

  /* --- The four elements (primary) --- */
  --forest:     #405636;  /* EARTH · Ground   — white text */
  --river-teal: #3F7D85;  /* WATER · Release  — white text */
  --brick:      #A5533D;  /* FIRE  · Awaken   — white text */
  --warm-sand-light: #E2D4B6;  /* AIR · Expand — dark ink text */

  /* --- Secondary --- */
  --lichen:     #DDC77E;  /* mustard gold — accent rules, tags, highlights */
  --deep-water: #1F5265;  /* depth, footers, dark bands */
  --clay:       #B5764C;
  --sage:       #8B9678;
  --dry-grass:  #D4C6A8;
  --linen:      #F3EDE1;
  --bark:       #332F29;
  --soft-white: #FFFDF8;

  /* --- Whimsy accents (use sparingly) --- */
  --moon-lilac: #9C86AE;  /* luna motif; bridges the previous purple identity */
  --bloom-rose: #D9927E;  /* flower-farm & Petals + Presence events */

  /* --- Legacy aliases (kept so older rules resolve) --- */
  --cream: var(--linen);
  --warm-sand: var(--dry-grass);
  --mustard: var(--lichen);
  --moss: var(--forest);
  --ocean: var(--river-teal);
  --deep-ocean: var(--deep-water);
  --charcoal: var(--bark);

  /* Semantic */
  --bg: var(--linen);
  --bg-raised: var(--soft-white);
  --ink: var(--bark);
  --ink-soft: #5E574C;
  --accent: var(--brick);
  --link: var(--deep-water);

  /* ==========================================================
     TYPE SYSTEM — modular scale, ratio 1.25 (major third)
     Base 18px desktop / 16px mobile. Every size is on the scale;
     nothing is set ad hoc.
     ========================================================== */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, "Segoe UI", Helvetica, sans-serif;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);  /* micro labels */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);  /* small / captions */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem); /* body */
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem);  /* lead / large body */
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.75rem);  /* h3 */
  --step-3:  clamp(1.63rem, 1.42rem + 1.02vw, 2.12rem);  /* h2 */
  --step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.05rem);  /* h1 */
  --step-5:  clamp(2.49rem, 1.95rem + 2.70vw, 3.82rem);  /* hero display */

  /* Line heights — tighter as size grows */
  --lh-display: 1.12;
  --lh-heading: 1.22;
  --lh-body: 1.65;
  --lh-tight: 1.4;

  /* Tracking */
  --track-display: -0.008em;
  --track-heading: -0.004em;
  --track-label: 0.18em;

  /* Measures */
  --measure-body: 66ch;
  --measure-lead: 46ch;
  --measure-head: 20ch;

  /* Rhythm */
  --space-section: clamp(3.1rem, 5.2vw, 5rem);
  --space-block: clamp(1.4rem, 2.6vw, 2.1rem);
  --measure: 62ch;
  --radius-card: 14px;
  --radius-arch: 999px 999px 14px 14px;
  --maxw: 1440px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
/* ---------- Typographic foundation ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;   /* Marcellus ships a single weight — never fake-bold it */
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  margin: 0 0 0.45em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-4); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: var(--measure-head); }
h2 { font-size: var(--step-3); max-width: 24ch; }
h3 { font-size: var(--step-2); max-width: 30ch; }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; max-width: var(--measure-body); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Sibling rhythm: headings hug the text that follows them */
h2 + p, h3 + p, h4 + p { margin-top: 0; }
p + h2, ul + h2 { margin-top: 2.2em; }
p + h3, ul + h3 { margin-top: 1.8em; }

/* Utility type classes — use these instead of inline font-size */
.t-lead   { font-size: var(--step-1); line-height: var(--lh-tight); max-width: var(--measure-lead); }
.t-body   { font-size: var(--step-0); }
.t-small  { font-size: var(--step--1); }
.t-micro  { font-size: var(--step--2); }
.t-quiet  { color: var(--ink-soft); }
.t-h2     { font-size: var(--step-3); }
.t-h3     { font-size: var(--step-2); }
:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3.25rem); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }
/* .eyebrow's own margin shorthand is declared later and was overriding
   .center's margin-inline:auto — hence centred eyebrows sitting off to the left. */
.eyebrow.center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-family: var(--font-body);
  /* 700 at 12px under 0.18em tracking reads as medium — the letters are too
     far apart to build any weight. 800 and a hair more size fixes it. */
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 0.9rem;
  /* optical: uppercase tracking adds space after the last letter — pull it back */
  text-indent: 0;
  padding-right: var(--track-label);
}
.section { padding-block: var(--space-section); }
/* Tighter band — for sections whose content already carries its own padding. */
.section--tight { padding-block: clamp(1.6rem, 2.6vw, 2.4rem); }
.section-heading { font-size: var(--step-3); max-width: var(--measure-head); margin-bottom: 0.45em; }
.section-heading.center { margin-inline: auto; }
.measure { max-width: var(--measure-body); }
.measure-lead { max-width: var(--measure-lead); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.05rem 1.9rem 0.95rem;
  padding-right: calc(1.9rem + 0.08em);
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}
.btn-primary { background: var(--brick); color: var(--soft-white); }
.btn-primary:hover { background: #8E4432; }
.btn-ghost { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
.btn-ghost:hover { background: var(--charcoal); color: var(--cream); }
/* On sand, a transparent ghost has no surface to sit on. Linen gives it one. */
.band-sand .btn-ghost, .pattern-bamboo .btn-ghost { background: var(--linen); }
.band-sand .btn-ghost:hover, .pattern-bamboo .btn-ghost:hover { background: var(--charcoal); color: var(--cream); }
.btn-light { border-color: var(--soft-white); color: var(--soft-white); background: rgba(56,52,47,0.25); }
.btn-light:hover { background: var(--soft-white); color: var(--charcoal); }
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.text-link {
  font-weight: 700;
  color: var(--deep-ocean);
  text-decoration: none;
  border-bottom: 2px solid var(--warm-sand);
  padding-bottom: 2px;
  transition: border-color 250ms ease;
}
.text-link:hover { border-color: var(--brick); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--warm-sand);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.55rem;   /* +20px overall header height */
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--forest); text-decoration: none;
  white-space: nowrap;
}
.wordmark .moon { color: var(--brick); }
.site-nav { display: flex; align-items: center; gap: clamp(0.85rem, 1.7vw, 1.5rem); }
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; gap: 0.42em;
  font-size: var(--step--1); font-weight: 600;
  color: var(--charcoal); text-decoration: none;
  white-space: nowrap;
}
.site-nav a:not(.btn) svg { width: 1.05em; height: 1.05em; flex: none; opacity: .72; }
.site-nav a:not(.btn):hover svg { opacity: 1; }
.site-nav a:not(.btn):hover { color: var(--brick); }
.site-nav .btn { padding: 0.6rem 1.3rem; }
/* ---------- Mobile menu ---------- */
.nav-toggle {
  display: none;
  align-items: center; gap: 0.55rem;
  background: transparent; border: 0; padding: 0.4rem 0.2rem;
  font: inherit; color: var(--bark); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars { position: relative; width: 22px; height: 14px; flex: none; }
.nav-toggle .bars i {
  position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor;
  border-radius: 2px; transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 6.2px; }
.nav-toggle .bars i:nth-child(3) { top: 12.4px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }
.nav-toggle .label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(51,47,41,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms;
  backdrop-filter: blur(2px);
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

/* The panel is a giant vertical pill — the brand mark shape, at full scale. */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(86vw, 380px);
  background: var(--forest);
  color: var(--linen);
  border-radius: 190px 0 0 190px;
  padding: clamp(3.5rem, 9vw, 5rem) clamp(1.8rem, 6vw, 2.6rem) 2rem;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform 460ms cubic-bezier(.32,.72,0,1);
  overflow-y: auto;
  box-shadow: -18px 0 60px rgba(51,47,41,0.28);
}
body.nav-open .mobile-nav { transform: translateX(0); }

.mobile-nav .mn-mark { align-self: center; margin-bottom: 1.6rem; opacity: .9; }
.mobile-nav .mn-mark svg { height: 54px; width: auto; display: block; }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.mobile-nav li {
  opacity: 0; transform: translateX(16px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.32,.72,0,1);
}
body.nav-open .mobile-nav li { opacity: 1; transform: none; }
body.nav-open .mobile-nav li:nth-child(1) { transition-delay: 120ms; }
body.nav-open .mobile-nav li:nth-child(2) { transition-delay: 175ms; }
body.nav-open .mobile-nav li:nth-child(3) { transition-delay: 230ms; }
body.nav-open .mobile-nav li:nth-child(4) { transition-delay: 285ms; }
body.nav-open .mobile-nav li:nth-child(5) { transition-delay: 340ms; }

.mobile-nav a.mn-link {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--linen); text-decoration: none;
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(212,198,168,0.18);
}
.mobile-nav a.mn-link svg { width: 1.05em; height: 1.05em; flex: none; opacity: .75; }
.mobile-nav a.mn-link:hover, .mobile-nav a.mn-link:focus-visible { color: var(--lichen); }

.mobile-nav .mn-cta { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.7rem; }
.mobile-nav .mn-cta .btn { width: 100%; text-align: center; }
.mobile-nav .mn-cta .btn-primary { background: var(--brick); }
.mobile-nav .mn-sig {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: var(--step--1); color: var(--dry-grass);
  text-align: center; margin-top: 1.1rem;
}

@media (max-width: 860px) {
  .site-nav a:not(.btn) { display: none; }
  .site-nav .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 861px) {
  .mobile-nav, .nav-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
  .mobile-nav li { opacity: 1; transform: none; transition: none; }
}
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; width: 100%; aspect-ratio: 2600 / 1040; min-height: 680px; max-height: 820px; display: flex; align-items: center; color: var(--bark); isolation: isolate; }
.hero-img { position: absolute; inset: 0; z-index: -2; }
/* Mirrored so the landscape opens to the right, away from the copy column. */
.hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 0% 55%;
  transform: scaleX(-1);
}
/* Scrim sits on the LEFT, where the copy lives — the right third stays clear
   so the figure on the dune reads against open sky. Flip this whenever the
   copy column moves, or the headline ends up over the bright part of the sky. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(250,246,238,0.90) 0%, rgba(249,244,236,0.78) 20%, rgba(247,242,232,0.48) 40%, rgba(244,239,228,0.14) 62%, rgba(243,237,225,0) 80%);
}
/* .hero-content also carries .wrap, so it keeps the full 1180 measure and the
   children sit against its left edge — not floated in the middle. */
.hero-content {
  /* top pad clears the sticky header; bottom keeps the copy off the fold */
  padding-block: clamp(5.5rem, 9vw, 7rem) clamp(2rem, 4.5vw, 3.5rem);
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.hero-col {
  width: min(48ch, 100%);
  text-align: left;
  /* Extra left inset on top of .wrap's gutter — the copy was sitting hard against
     the edge once it moved to the left column. Collapses to almost nothing on
     phones, where the gutter is already the whole margin. */
  margin-left: clamp(0rem, 3vw, 3.25rem);
}
.hero-col > * { margin-left: 0; margin-right: 0; }
.hero h1 { max-width: 13ch; }
.hero-sub { max-width: 36ch; }
.hero-quote { max-width: 54ch; }
.hero .btn-row { justify-content: flex-start; }

@media (max-width: 860px) {
  /* Mobile art-direction: taller crop, copy returns to the left for readability */
  .hero { aspect-ratio: 1200 / 985; min-height: 560px; max-height: none; }
  .hero-img img { content: url("../assets/img/hero-landscape-mobile.jpg"); object-position: 30% 45%; }
  .hero::after {
    background: linear-gradient(180deg, rgba(243,237,225,0) 0%, rgba(245,240,230,0.55) 34%, rgba(248,244,236,0.94) 62%, rgba(250,246,238,0.98) 100%);
  }
  .hero-content { justify-content: flex-start; }
  .hero-col { width: 100%; }
}
.hero .eyebrow { color: var(--brick); opacity: 1; }
.hero h1 { font-size: var(--step-5); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: 13ch; }
.hero h1 { color: var(--bark); }
.hero-sub { font-size: var(--step-1); line-height: var(--lh-tight); max-width: 40ch; color: #4A443B; }
.hero-quote {
  /* One step down and a wider measure so it lands in two lines and clears the
     sand line. Forest green read muddy against the mountain band behind it —
     ink-soft keeps it quieter than the sub-headline but far more legible. */
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft);
  margin-block: 1.1rem 1.8rem;
}

/* ---------- Elemental pathway cards ---------- */
.pathways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: var(--space-block); }
@media (max-width: 980px) { .pathways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pathways { grid-template-columns: 1fr; } }
.pathway {
  /* Arched top, square-ish foot — the same shape grammar as the feature photos,
     and it gives the centred title pill something to sit inside. */
  border-radius: 2.6rem 2.6rem var(--radius-card) var(--radius-card);
  padding: 2.1rem 1.6rem 1.8rem;
  color: var(--soft-white);
  display: flex; flex-direction: column; gap: 0.4rem;
  text-decoration: none;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
/* cards are descriptive now — the section CTA does the converting */
.pathway .element {
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85;
}
.pathway h3 { font-size: var(--step-2); margin: 0.1em 0 0.3em; }
.pathway p { font-size: var(--step--1); line-height: 1.55; opacity: 0.94; flex: 1; }
.pathway .cta { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em; }
.pathway-earth { background: var(--forest); }
.pathway-water { background: var(--river-teal); }
.pathway-fire  { background: var(--brick); }
/* Air is the one light card — a hairline keeps it reading as a block on pale grounds */
.pathway-air   { background: var(--warm-sand-light); color: var(--bark); box-shadow: inset 0 0 0 1px #CDBC98; }

.pathway-air .element { opacity: 0.72; }
.pathway-air .cta { color: #8A5A2B; }
.pathway .sigil { width: 30px; height: 30px; margin-bottom: 0.7rem; opacity: 0.9; }

/* ---------- Split feature (mentorship / about / retreat) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.split-img.arch img { border-radius: var(--radius-arch); aspect-ratio: 4 / 5; }
/* The groups photo is a wide frame in a 4:5 arch, so a centred crop cut the
   second person off the left edge. Shifting the window right keeps them in. */
#groups .split-img.arch img { object-position: 34% 50%; }

.mentor-paths { display: grid; gap: 1.2rem; margin-block: 1.4rem; }
.mentor-path {
  background: var(--bg-raised);
  border: 1px solid var(--warm-sand);
  border-left: 5px solid var(--sage);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
}
.mentor-path.expand { border-left-color: var(--mustard); }
.mentor-path h3 { font-size: var(--step-1); margin-bottom: 0.25em; }
.mentor-path p { font-size: var(--step--1); margin: 0 0 0.6em; color: var(--ink-soft); }

/* ---------- Section grounds ---------- */
.band-sand  { background: var(--dry-grass); }
.band-white { background: var(--soft-white); }   /* lightest ground — founder moment */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--space-block); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-raised);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(56,52,47,0.08);
  text-decoration: none; color: var(--ink);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(56,52,47,0.16); }
.card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.card figure img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.card .tag {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep-ocean); background: color-mix(in srgb, var(--ocean) 14%, white);
  padding: 0.25rem 0.7rem; border-radius: 999px;
}
.card h3 { font-size: var(--step-1); margin: 0.4em 0 0.2em; }
.card p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; flex: 1; }
.card .cta { margin-top: 0.9rem; font-weight: 700; font-size: var(--step--1); color: var(--brick); }

/* ---------- Retreat band ---------- */
.band-deep { background: var(--deep-ocean); color: var(--cream); }
.band-deep .eyebrow { color: var(--warm-sand); }
.band-deep .section-heading { color: var(--soft-white); }
.band-deep .text-link { color: var(--warm-sand); border-color: rgba(217,200,174,0.4); }
.band-deep .text-link:hover { border-color: var(--warm-sand); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--space-block); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: var(--bg-raised);
  border-radius: var(--radius-card);
  padding: 2rem 1.8rem;
  border-top: 4px solid var(--clay);
}
.quote:nth-child(2) { border-top-color: var(--moon-lilac); }
.quote:nth-child(3) { border-top-color: var(--bloom-rose); }
.quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-body); font-weight: 400; font-size: var(--step-1); font-style: italic; line-height: 1.45;
}
.quote cite { font-style: normal; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }

/* ---------- Signup ---------- */
.signup { background: var(--deep-water); color: var(--soft-white); }
.signup .section-heading { color: var(--soft-white); }
.signup p { opacity: 0.95; }
.signup-form { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.signup-form input[type="email"] {
  font: inherit; padding: 0.9rem 1.2rem; border-radius: 999px; border: none;
  min-width: min(20rem, 80vw); background: var(--soft-white); color: var(--ink);
}
.signup-form .btn-primary { background: var(--charcoal); }
.signup-form .btn-primary:hover { background: #221f1b; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--warm-sand); padding-block: 3.5rem 2rem; font-size: var(--step--1); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--soft-white); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer a { color: var(--warm-sand); text-decoration: none; }
.site-footer a:hover { color: var(--soft-white); text-decoration: underline; }
.footer-sig { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 1.1rem; color: var(--soft-white); margin-top: 0.8rem; }
.footer-legal { border-top: 1px solid rgba(217,200,174,0.25); margin-top: 2.5rem; padding-top: 1.4rem; opacity: 0.75; line-height: 1.7; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   INTERIOR PAGES (mentorship, offerings, group)
   ============================================================ */

/* Compact page hero — flat band by default */
.page-hero { background: var(--dry-grass); padding-block: clamp(4.25rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5.5rem); }

/* Photo variant — image behind, scrim on the LEFT where the copy sits */
.page-hero.photo {
  position: relative; isolation: isolate;
  background: var(--dry-grass);
  /* match the crop's own ratio so the full frame shows — no extra zoom.
     width:100% is required: with aspect-ratio + min-height and no definite
     width, the browser derives width from the height and overflows. */
  width: 100%;
  aspect-ratio: 2048 / 850;
  min-height: 340px;
  max-height: 620px;
  display: flex; align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  color: var(--bark);
}
.page-hero.photo .ph-img { position: absolute; inset: 0; z-index: -2; background: var(--dry-grass); }
.page-hero.photo .ph-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* dry-grass underlay — keeps the banner in the palette rather than going neutral */
.page-hero.photo .ph-img::after {
  content: ""; position: absolute; inset: 0;
  background: var(--dry-grass);
  mix-blend-mode: multiply;
  opacity: 0.30;
}
.page-hero.photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Soft white, not sand — the warm scrim was tinting the photo as well as the
     copy panel, and the banner read as one flat sand block on light images. */
  background: linear-gradient(90deg, rgba(255,253,248,0.96) 0%, rgba(255,253,248,0.88) 22%, rgba(255,253,248,0.58) 42%, rgba(255,253,248,0.20) 64%, rgba(255,253,248,0) 82%);
}
/* .wrap is a flex child here — without width:100% it shrinks to content and
   margin-inline:auto centres it, throwing the copy off the page's left edge. */
.page-hero.photo > .wrap { width: 100%; }
.page-hero.photo .ph-col { width: min(58ch, 100%); }

.page-hero.photo h1 { color: var(--bark); }
.page-hero.photo .lede { color: #4A443B; }
.page-hero.photo .eyebrow { color: var(--brick); }
.page-hero.photo .breadcrumb { color: #5E574C; }

@media (max-width: 860px) {
  /* No blanket mobile swap here. Per-page rules below must out-specify
     `.page-hero.photo .ph-img img` (0,3,1), so they are written as
     `.page-hero.photo.<name>-banner .ph-img img`. Write one the short way and
     it silently loses — which is how every page but this one spent a day
     serving the mentorship photo on mobile. */
  .page-hero.photo.mentorship-banner .ph-img img { content: url("../assets/img/mentorship-hero-mobile.jpg"); object-position: 72% 30%; }
  .page-hero.photo.offer-banner .ph-img img { content: url("../assets/img/offerings-hero-mobile.jpg"); object-position: center 50%; }
  .page-hero.photo::after {
    background: linear-gradient(180deg, rgba(243,237,225,0) 0%, rgba(246,241,231,0.62) 30%, rgba(249,245,237,0.95) 58%, rgba(250,246,238,0.98) 100%);
  }
  .page-hero.photo { align-items: flex-end; aspect-ratio: 1200 / 803; min-height: 420px; max-height: none; }
}
.page-hero h1 { font-size: var(--step-4); max-width: 26ch; text-wrap: balance; }
.page-hero .lede { font-size: var(--step-1); line-height: 1.5; max-width: 46ch; color: var(--ink); }
/* Third step of the hero hierarchy, same drop the home page uses: headline in
   display serif, statement at step-1, then a quieter brick-ruled close. Without
   it the two sentences sat at identical weight and the eye had nothing to follow. */
.page-hero .ph-note {
  margin-top: 1rem; font-size: var(--step-0); line-height: 1.5;
  color: var(--ink-soft); border-left: 2px solid var(--brick);
  padding-left: 1rem; max-width: 42ch;
}
.page-hero.deep .ph-note { color: var(--dry-grass); border-left-color: var(--dry-grass); }
.page-hero.deep { background: var(--deep-water); color: var(--linen); }
.page-hero.deep h1 { color: var(--soft-white); }
.page-hero.deep .lede { color: var(--dry-grass); }
.page-hero.deep .eyebrow { color: var(--lichen); }

.breadcrumb { font-size: var(--step--1); margin-bottom: 1.2rem; color: var(--ink-soft); }
.breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sage); }
.breadcrumb a:hover { color: var(--brick); }
.page-hero.deep .breadcrumb { color: var(--dry-grass); }
.page-hero.deep .breadcrumb a { border-bottom-color: rgba(212,198,168,.5); }

/* Divider — moon phase run, from the original mark */
.moon-rule { display: block; margin: 0 auto; width: min(420px, 70%); height: 26px; }

/* Program blocks (mentorship pathways) */
.program {
  background: var(--bg-raised);
  border: 1px solid var(--dry-grass);
  border-radius: var(--radius-card);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1.8rem;
  border-top: 5px solid var(--forest);
}
.program.b { border-top-color: var(--lichen); }
.program h2 { font-size: var(--step-3); margin-bottom: 0.2em; }
.program .kicker { font-size: var(--step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brick); margin-bottom: .5rem; }
.program .intro { font-size: var(--step-1); line-height: 1.5; color: var(--ink); max-width: 56ch; }
.program .pull { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: var(--step-1); color: var(--forest); margin: 1.2rem 0; }

.support-list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; }
.support-list li { position: relative; padding-left: 1.7rem; font-size: var(--step--1); color: var(--ink-soft); }
.support-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--sage);
}
.program.b .support-list li::before { background: var(--clay); }
.support-list strong { color: var(--ink); font-weight: 600; }

/* Service rows (offerings) */
.service {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
  background: var(--bg-raised); border: 1px solid var(--dry-grass);
  border-radius: var(--radius-card); padding: 1.6rem 1.8rem; margin-bottom: 1.1rem;
}
@media (max-width: 700px) { .service { grid-template-columns: 1fr; } }
.service h3 { font-size: var(--step-1); margin-bottom: .3em; }
.service p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .6rem; }
.service .price-line { font-size: var(--step--1); font-weight: 700; color: var(--forest); }
.service .price-line .dur { font-weight: 400; color: var(--ink-soft); }
.service .act { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 150px; }
.service .btn { text-align: center; padding: .8rem 1.4rem; }
.service .note { font-size: .78rem; color: var(--ink-soft); text-align: center; }

.tag-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.pill-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px;
}
.t-earth { background: var(--forest); color: var(--soft-white); }
.t-water { background: var(--river-teal); color: var(--soft-white); }
.t-fire  { background: var(--brick); color: var(--soft-white); }
.t-air   { background: var(--warm-sand-light); color: var(--bark); box-shadow: inset 0 0 0 1px #CDBC98; }
.t-lilac { background: var(--moon-lilac); color: var(--soft-white); }

/* Intro/prose blocks.
   NOTE: .prose usually sits on the same element as .wrap, which is margin-inline:auto.
   Constraining .prose itself would centre the column and leave dead space on both
   sides — so keep the box full width and constrain the children instead. */
.prose { max-width: none; }
.prose > * { max-width: var(--measure-body); }
.prose > .disclosure { max-width: none; }
.prose > .t-lead, .prose > p.lead { max-width: var(--measure-lead); }
.prose h2 { font-size: var(--step-2); margin-top: 2rem; }
.prose p { color: var(--ink-soft); }
.prose p.lead { font-size: var(--step-1); color: var(--ink); line-height: 1.45; }

/* Callout */
.callout {
  background: var(--warm-sand-light); border-radius: var(--radius-card);
  padding: 1.6rem 1.9rem; box-shadow: inset 0 0 0 1px #CDBC98; margin: 1.6rem 0;
}
.callout h3 { font-size: var(--step-1); margin-bottom: .3em; }
.callout p { font-size: var(--step--1); color: #5E574C; margin: 0; }

/* Legal / disclaimer */
.legal { font-size: .8rem; color: var(--ink-soft); line-height: 1.7; max-width: 78ch; }
.legal + .legal { margin-top: .8rem; }

/* ============================================================
   GRAPHIC LANGUAGE — motifs pulled from the original logo
   ============================================================ */

/* ---------- Pattern overlays (data-URI SVG) ---------- */

/* Sparkle field — diamond lattice. Overlaid on the hero image. */
.pattern-sparkle::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFDF8' stroke-width='1.1'%3E%3Cpath d='M30 8 L36 24 L30 40 L24 24 Z'/%3E%3Cpath d='M90 8 L96 24 L90 40 L84 24 Z'/%3E%3Cpath d='M60 52 L66 68 L60 84 L54 68 Z'/%3E%3Cpath d='M0 52 L6 68 L0 84 L-6 68 Z'/%3E%3Cpath d='M120 52 L126 68 L120 84 L114 68 Z'/%3E%3Cpath d='M30 96 L36 112 L30 128 L24 112 Z'/%3E%3Cpath d='M90 96 L96 112 L90 128 L84 112 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* Thread rain — vertical dotted threads. For sand/linen bands. */
.pattern-thread { position: relative; isolation: isolate; }
.pattern-thread::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg stroke='%23405636' stroke-width='1.2' stroke-dasharray='3 7'%3E%3Cline x1='14' y1='0' x2='14' y2='88'/%3E%3Cline x1='44' y1='0' x2='44' y2='88'/%3E%3Cline x1='74' y1='0' x2='74' y2='88'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
}

/* Night moons — crescents + gold dots. For deep-water / dark scenes only. */
.pattern-nightmoons { position: relative; isolation: isolate; }
.pattern-nightmoons::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cmask id='a'%3E%3Crect width='160' height='160' fill='%23000'/%3E%3Ccircle cx='44' cy='50' r='15' fill='%23fff'/%3E%3Ccircle cx='52' cy='44' r='14' fill='%23000'/%3E%3Ccircle cx='116' cy='114' r='15' fill='%23fff'/%3E%3Ccircle cx='124' cy='108' r='14' fill='%23000'/%3E%3C/mask%3E%3Crect width='160' height='160' fill='%23E2D4B6' mask='url(%23a)'/%3E%3Ccircle cx='120' cy='38' r='7' fill='%23DDC77E'/%3E%3Ccircle cx='38' cy='124' r='5' fill='%23DDC77E'/%3E%3Ccircle cx='82' cy='82' r='3' fill='%23DDC77E'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- Dividers ---------- */

/* Merged A+B: dotted thread, diamond sparkles, and the three moon phases.
   This is the one divider — used across the site. */
.divider { display: block; margin: 0 auto; width: min(1120px, 94%); height: 34px; }
.divider--tight { margin-block: 0.5rem; }

/* Horizon & sun — closes a pull quote or a page section. */
.divider-horizon { display: block; margin: 0 auto; width: min(300px, 60%); height: 40px; }

/* ---------- Full circle frame ---------- */
.circle-frame {
  position: relative;
  border-radius: 999px;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem);
  max-width: 420px; margin-inline: auto;
}
.circle-frame.forest { background: var(--forest); color: var(--linen); }
.circle-frame.sand { background: var(--warm-sand-light); color: var(--bark); box-shadow: inset 0 0 0 1px #CDBC98; }
.circle-frame.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
.circle-frame .cf-mark { margin-bottom: 0.7rem; }
.circle-frame .cf-title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; margin: 0 0 0.25rem; max-width: 14ch; }
.circle-frame .cf-sub { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.circle-frame.forest .cf-sub { color: var(--dry-grass); }

/* ---------- Pull quote ---------- */
.pullquote { text-align: center; padding-block: clamp(2rem, 5vw, 3rem); }
.pullquote .pq-text {
  font-family: var(--font-display); font-style: normal;
  font-size: var(--step-3); line-height: 1.28;
  max-width: 22ch; margin: 1rem auto 1.1rem;
  letter-spacing: var(--track-heading);
}
.pullquote .pq-attr { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Tags & badges (rebuilt) ---------- */
.tag-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.9rem; }
.pill-tag {
  display: inline-flex; align-items: center; gap: 0.42em;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.5em 0.95em 0.5em 0.75em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill-tag svg { width: 1.05em; height: 1.05em; flex: none; display: block; }
.pill-tag svg [stroke] { stroke: currentColor; }
.pill-tag svg [fill]:not([fill="none"]) { fill: currentColor; }

.t-earth { background: var(--forest);          color: var(--soft-white); }
.t-water { background: var(--river-teal);      color: var(--soft-white); }
.t-fire  { background: var(--brick);           color: var(--soft-white); }
.t-air   { background: var(--warm-sand-light); color: var(--bark); border-color: #CDBC98; }
.t-lilac { background: var(--moon-lilac);      color: var(--soft-white); }

/* The four buckets. Same colours the element tags used, now carrying the labels
   people actually book by. The t-earth/water/fire/air classes stay only for the
   book on the shop page, which is genuinely about the four elements. */
.t-mentorship { background: var(--forest);          color: var(--soft-white); }
.t-privates   { background: var(--river-teal);      color: var(--soft-white); }
.t-groups     { background: var(--brick);           color: var(--soft-white); }
.t-events     { background: var(--warm-sand-light); color: var(--bark); border-color: #CDBC98; }
.t-rose  { background: var(--bloom-rose);      color: var(--bark); }
.t-quiet-tag { background: transparent; color: var(--ink-soft); border-color: var(--dry-grass); }
.t-outline { background: transparent; color: var(--brick); border-color: var(--brick); }
.t-sold { background: var(--bark); color: var(--dry-grass); }

/* Pathway cards get the sigil inline with the element label */
.pathway .element { display: inline-flex; align-items: center; gap: 0.5em; }
.pathway .element svg { width: 1.15em; height: 1.15em; flex: none; }

/* ============================================================
   OFFER CARDS — portrait rectangles, condensed, price-forward
   ============================================================ */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}
@media (max-width: 1080px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .offer-grid { grid-template-columns: 1fr; } }

.offer {
  display: flex; flex-direction: column;
  background: var(--soft-white);
  border: 1px solid var(--dry-grass);
  border-top: 4px solid var(--sage);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.35rem 1.25rem;
  /* no min-height: grid stretch already equalises each row, and forcing a
     portrait ratio left a dead band between the copy and the price */
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.offer:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(51,47,41,0.13); }
.offer.is-earth { border-top-color: var(--forest); }
.offer.is-water { border-top-color: var(--river-teal); }
.offer.is-fire  { border-top-color: var(--brick); }
.offer.is-air   { border-top-color: var(--lichen); }
.offer.is-lilac { border-top-color: var(--moon-lilac); }
.offer.is-signature { border-top-width: 6px; border-top-color: var(--brick); background: var(--linen); }

.offer .tag-row { margin-bottom: 0.7rem; gap: 0.35rem; }
.offer h3 {
  font-size: var(--step-2);
  line-height: 1.14;
  margin: 0 0 0.45rem;
  max-width: none;
}
.offer p {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.55rem;
  max-width: none;
}
.offer .offer-body { flex: 1; }

/* Price block — the loudest thing in the card after the name */
.offer .price {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid #EDE5D6;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.offer .price .amt {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
  line-height: 1;
  color: var(--brick);
  letter-spacing: -0.01em;
}
.offer .price .from {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); align-self: center;
}
.offer .price .dur {
  font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap;
}
.offer .price.custom .amt { font-size: var(--step-1); color: var(--forest); }

.offer .meta-note {
  font-size: var(--step--2); color: var(--ink-soft);
  margin: 0.5rem 0 0; line-height: 1.5;
}
.offer .btn { margin-top: 0.95rem; text-align: center; width: 100%; padding: 0.85rem 1.2rem; }

/* Wide card for anything that needs a list (group healing themes) */
.offer.span-2 { grid-column: span 2; }
@media (max-width: 620px) { .offer.span-2 { grid-column: span 1; } }
.offer .theme-list { list-style: none; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.3rem; }
.offer .theme-list li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.offer .theme-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}

/* Section intros tighten up now that cards carry the weight */
.offer-intro { max-width: 58ch; margin-bottom: 0.2rem; }

/* Pathway cards: the bucket name is the card's title, so it sits centred at the
   top with no icon. The glyphs were four different metaphors doing the job the
   word already did, and at 12px they read as noise. */
.pathway .element {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center; text-align: center;
  font-size: var(--step--2); font-weight: 800; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.62em 1.25em;
  border-radius: 999px;
  background: rgba(255,253,248,0.20);
  border: 1px solid rgba(255,253,248,0.36);
  opacity: 1;
  margin-bottom: 1rem;
}
.pathway-air .element { background: rgba(51,47,41,0.07); border-color: rgba(51,47,41,0.22); }

/* ============================================================
   PARTNERS
   ============================================================ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
}
.partner {
  display: flex; flex-direction: column;
  background: var(--soft-white);
  border: 1px solid var(--dry-grass);
  border-radius: var(--radius-card);
  padding: 2rem 1.6rem 1.5rem;
  text-decoration: none; color: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.partner:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(51,47,41,0.12); border-color: var(--sage); }
.partner .logo {
  height: 74px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.partner .logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.partner h3 { font-size: var(--step-1); margin: 0 0 0.2rem; max-width: none; }
.partner .role {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brick); margin-bottom: 0.55rem;
}
.partner p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; max-width: none; flex: 1; }
.partner .visit {
  margin-top: 1rem; font-size: var(--step--1); font-weight: 700;
  color: var(--deep-water);
}
.partner:hover .visit { color: var(--brick); }

/* Quiet logo strip — for the homepage footer area */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2rem;
}
.logo-strip img { height: 46px; width: auto; opacity: 0.55; transition: opacity 220ms ease; }
.logo-strip a:hover img { opacity: 1; }


/* ============================================================
   DISCLOSURE — "more info" accordion (native <details>, no JS)
   ============================================================ */
.disclosure { max-width: none; margin-top: 1.6rem; }
.disclosure + .disclosure { margin-top: 0.6rem; }

.disclosure details {
  border: 1px solid var(--dry-grass);
  border-radius: 12px;
  background: var(--soft-white);
  overflow: hidden;
  transition: border-color 220ms ease;
}
.disclosure details[open] { border-color: var(--sage); }

.disclosure summary {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  -webkit-tap-highlight-color: transparent;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { color: var(--brick); }
.disclosure summary:focus-visible { outline: 3px solid var(--river-teal); outline-offset: -3px; }

/* Waxing-moon marker: a crescent that fills to full when open */
.disclosure summary .marker {
  position: relative; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.6px solid currentColor;
  overflow: hidden;
}
.disclosure summary .marker::after {
  content: ""; position: absolute; inset: -1px;
  background: currentColor;
  border-radius: 50%;
  transform: translateX(-58%);
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.disclosure details[open] summary .marker::after { transform: translateX(0); }

.disclosure summary .txt { flex: 1; }
.disclosure summary .hint {
  font-size: var(--step--2); font-weight: 400; letter-spacing: 0.1em;
  color: var(--ink-soft); text-transform: none;
}
.disclosure details[open] summary .hint { opacity: 0; }

.disclosure .panel {
  padding: 0 1.25rem 1.3rem;
  border-top: 1px solid #EDE5D6;
}
.disclosure .panel > *:first-child { margin-top: 1.1rem; }
.disclosure .panel p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.9rem; max-width: var(--measure-body); }
.disclosure .panel p:last-child { margin-bottom: 0; }
.disclosure .panel h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .disclosure summary .marker::after { transition: none; }
}

/* Quiet variant — for policies and fine print, not primary content */
.disclosure--quiet details { background: transparent; border-color: #E4DBC9; }
.disclosure--quiet summary { color: var(--ink-soft); font-weight: 600; }
.disclosure--quiet summary:hover { color: var(--bark); }

/* Stacked FAQ: collapse the gap so a run reads as one list */
.disclosure + .disclosure { margin-top: 0.55rem; }
.disclosure summary .hint:empty { display: none; }

/* ============================================================
   FOOTER IMAGE BAND — dusk road, fading down into the footer
   ============================================================ */
.footer-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: var(--bark);
  aspect-ratio: 2048 / 788;
  min-height: 240px;
  max-height: 480px;
  overflow: hidden;
  margin-bottom: -1px;            /* kill the hairline seam against the footer */
}
.footer-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: -2;
}
/* Fade the photo down into the footer's bark, and just soften the very top edge */
.footer-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(31,82,101,0.62) 0%,
      rgba(31,82,101,0.16) 17%,
      rgba(51,47,41,0.00) 40%,
      rgba(51,47,41,0.42) 68%,
      rgba(51,47,41,0.86) 87%,
      rgba(51,47,41,1) 100%);
}

/* Signature line riding on the horizon */
.footer-hero .fh-line {
  position: absolute; left: 0; right: 0; bottom: clamp(1.1rem, 3vw, 2.2rem);
  text-align: center; z-index: 1;
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--dry-grass);
  opacity: 0.92;
  max-width: none;      /* global p rule caps at the body measure — override */
  margin: 0 auto;
  padding-inline: 1.25rem;
  text-shadow: 0 1px 12px rgba(31,25,18,0.55);
}

@media (max-width: 760px) {
  .footer-hero { aspect-ratio: 1200 / 900; max-height: 420px; }
  .footer-hero img { content: url("../assets/img/footer-road-mobile.jpg"); }
}

/* Deep-water CTA band: primary buttons keep brick, ghost buttons go light */
.signup .eyebrow { color: var(--lichen); }
.signup .btn-ghost { border-color: var(--linen); color: var(--linen); }
.signup .btn-ghost:hover { background: var(--linen); color: var(--deep-water); }
.signup .btn-primary { background: var(--brick); color: var(--soft-white); }
.signup .btn-primary:hover { background: #8E4432; }
.signup .measure, .signup p { color: var(--dry-grass); }

/* ---------- Policies, living in the footer ---------- */
.footer-policies { margin-top: 2.4rem; }
.disclosure--onDark { max-width: none; margin-top: 0; }
.disclosure--onDark details {
  background: rgba(255,253,248,0.045);
  border-color: rgba(212,198,168,0.22);
  border-radius: 10px;
}
.disclosure--onDark details[open] { border-color: rgba(212,198,168,0.4); }
.disclosure--onDark summary { color: var(--dry-grass); font-weight: 600; padding: 0.85rem 1.1rem; }
.disclosure--onDark summary:hover { color: var(--soft-white); }
.disclosure--onDark summary .hint { color: rgba(212,198,168,0.6); }
.disclosure--onDark .panel { border-top-color: rgba(212,198,168,0.18); padding: 0 1.1rem 1.1rem; }
.disclosure--onDark .panel p { color: rgba(212,198,168,0.85); }
.disclosure--onDark .panel strong { color: var(--soft-white); }

/* Group banner: cooler underlay than the mentorship one — it is a dawn photo */
.page-hero.photo.group-banner .ph-img::after { background: var(--river-teal); opacity: 0.20; }
.page-hero.photo.group-banner .ph-img img { object-position: center 46%; }
@media (max-width: 860px) {
  .page-hero.photo.group-banner .ph-img img { content: url("../assets/img/group-hero-mobile.jpg"); object-position: center 40%; }
}

/* Brand mark in the header lockup */
.wm-mark { height: 1.9rem; width: auto; flex: none; color: var(--forest); }
.wordmark .wm-text { white-space: nowrap; }
@media (max-width: 520px) { .wm-mark { height: 1.6rem; } .wordmark { gap: 0.45rem; } }

/* The header ran out of room before it ran out of wordmark. At 375px the
   lockup measured 280px, the toggle needed 76px, and 20px of padding put the
   hamburger 34px off the right edge — no way to open the menu on a phone.
   The wordmark comes down first; below 400px the MENU word goes and the bars
   carry it alone, which is the convention at that width anyway. */
@media (max-width: 520px) {
  .wordmark { font-size: 1.02rem; letter-spacing: 0.13em; }
  .header-inner { gap: 0.6rem; }
}
@media (max-width: 400px) {
  .wordmark { font-size: 0.92rem; letter-spacing: 0.1em; }
  .nav-toggle .label { display: none; }
  .nav-toggle { padding-inline: 0.35rem; }
}

/* ============================================================
   TITLE ON THE RULE — heading centred, dotted thread either side
   ============================================================ */
.rule-title {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: 1rem;
}
.rule-title h2 {
  margin: 0; text-align: center; max-width: none; flex: none;
  font-size: var(--step-3);
}
.rule-title .rl { flex: 1; height: 34px; min-width: 40px; }
.rule-title .rl svg { width: 100%; height: 100%; display: block; }
@media (max-width: 700px) {
  .rule-title .rl { display: none; }
  .rule-title { justify-content: center; }
}

/* Centred section variant */
.section-centred { text-align: center; }
.section-centred .offer-intro,
.section-centred .measure { margin-inline: auto; text-align: center; }
.section-centred .cards { text-align: left; }

/* Four-up experience cards */
.cards--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cards--four { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS — avatar + six-up
   ============================================================ */
.quotes--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .quotes--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .quotes--six { grid-template-columns: 1fr; } }

.quote { display: flex; flex-direction: column; }
.quote blockquote { flex: 1; }
.quote .attrib { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.quote .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--font-display); font-size: 0.95rem; line-height: 1;
  color: var(--soft-white); background: var(--sage);
}
.quote .avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote .avatar.a-earth { background: var(--forest); }
.quote .avatar.a-water { background: var(--river-teal); }
.quote .avatar.a-fire  { background: var(--brick); }
.quote .avatar.a-air   { background: var(--lichen); color: var(--bark); }
.quote .avatar.a-lilac { background: var(--moon-lilac); }
.quote .avatar.a-rose  { background: var(--bloom-rose); color: var(--bark); }
.quote cite { display: block; }
.quote .role { display: block; font-size: var(--step--2); color: var(--ink-soft); font-weight: 400; letter-spacing: 0.04em; }

/* ============================================================
   RETREAT band — warm, adventurous; the moons move to sound
   ============================================================ */
.band-retreat { background: var(--forest); color: var(--linen); }
.band-retreat .section-heading { color: var(--soft-white); }
.band-retreat .eyebrow { color: var(--lichen); }
.band-retreat p { color: var(--dry-grass); }
.band-retreat .text-link { color: var(--lichen); border-color: rgba(221,199,126,.4); }
.pattern-sparkle-warm { position: relative; isolation: isolate; }
.pattern-sparkle-warm::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.09;
  /* Sparse and asymmetric — three small diamonds per tile, none touching the
     edges, so it reads as scattered texture rather than a repeating grid. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23DDC77E' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M62 44 L74 68 L62 92 L50 68 Z'/%3E%3Cpath d='M214 118 L223 136 L214 154 L205 136 Z'/%3E%3Cpath d='M118 216 L128 238 L118 260 L108 238 Z'/%3E%3C/g%3E%3Ccircle cx='250' cy='58' r='3' fill='%23DDC77E'/%3E%3Ccircle cx='40' cy='176' r='2.4' fill='%23DDC77E'/%3E%3Ccircle cx='176' cy='274' r='2.2' fill='%23DDC77E'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* Story banner — cool desert light, so a lighter sand underlay than mentorship */
.page-hero.photo.story-banner .ph-img::after { background: var(--dry-grass); opacity: 0.18; }
.page-hero.photo.story-banner .ph-img img { object-position: center 52%; }
@media (max-width: 860px) {
  .page-hero.photo.story-banner .ph-img img { content: url("../assets/img/story-hero-mobile.jpg"); object-position: center 42%; }
}

/* Nothing may push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }

/* ============================================================
   JUMP CHIPS — type filter row on the offerings master page
   ============================================================ */
.jump-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.jump-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-body);
  font-size: var(--step--2); font-weight: 700; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.75em 1.2em; border-radius: 999px;
  text-decoration: none; color: var(--forest);
  background: var(--soft-white); border: 1px solid var(--dry-grass);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.jump-chip:hover { background: var(--forest); color: var(--linen); border-color: var(--forest); }
.jump-chip--alt { background: transparent; color: var(--brick); border-color: var(--brick); }
.jump-chip--alt:hover { background: var(--brick); color: var(--soft-white); }
/* offset anchor jumps for the sticky header */
[id] { scroll-margin-top: 6.5rem; }
/* The four buckets are tall. Land the jump tight under the header — right above
   the eyebrow — so as much of the card row as possible clears the fold. */
#offerings { scroll-margin-top: 3.9rem; }

/* Two-up offer grid — for pages with four cards that should read 2x2 */
.offer-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .offer-grid--two { grid-template-columns: 1fr; } }

/* Reviews stand on their own — no avatar, no invented attribution. */
.quote { justify-content: center; }
.quote blockquote { font-size: var(--step-1); line-height: 1.45; flex: 0; }

/* (retired placeholder styles kept out of the cascade) */
.book-cover--unused {
  position: relative; aspect-ratio: 2 / 3; max-width: 340px; margin-inline: auto;
  background: var(--linen); color: var(--forest);
  border-radius: 6px 14px 14px 6px;
  box-shadow: -6px 0 0 rgba(51,47,41,.14), 0 18px 40px rgba(51,47,41,.30);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.2rem 1.6rem; text-align: center; gap: .5rem; overflow: hidden;
}
.book-cover .bc-eyebrow { font-family: var(--font-display); font-size: clamp(1.6rem,1.2rem+1.4vw,2.2rem); line-height:1.05; }
.book-cover .bc-sub { font-size: var(--step--2); line-height:1.5; color:#5E574C; max-width: 26ch; }
.book-cover .bc-author { font-size: var(--step--2); letter-spacing:.18em; text-transform:uppercase; color: var(--brick); margin-top:.4rem; }
.book-cover .bc-mark { height: 68px; width:auto; margin-top:.7rem; opacity:.85; }
.band-retreat .book-cover { color: var(--forest); }

/* Real book cover. Source art is 313x500, so the display width is capped near
   native to keep it sharp rather than upscaled. */
.book-cover-link { display: block; max-width: 313px; margin-inline: auto; }
.book-cover-img {
  width: 100%; height: auto; display: block;
  border-radius: 3px 8px 8px 3px;
  box-shadow: -5px 0 0 rgba(51,47,41,.16), 0 18px 42px rgba(51,47,41,.34);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.book-cover-link:hover .book-cover-img {
  transform: translateY(-4px);
  box-shadow: -5px 0 0 rgba(51,47,41,.16), 0 24px 54px rgba(51,47,41,.42);
}

/* Journal banner — she reads in from the right, so the copy column sits over the
   valley on the left. That side is mid-tone green, so the wash works harder here
   than on the other banners. */
.page-hero.photo.journal-banner .ph-img::after { background: var(--dry-grass); opacity: 0.30; }
.page-hero.photo.journal-banner .ph-img img { object-position: center 45%; }
@media (max-width: 860px) {
  .page-hero.photo.journal-banner .ph-img img { content: url("../assets/img/journal-hero-mobile.jpg"); object-position: center 50%; }
}

/* Retreats banner — palapa at sunrise. Tasha stands right of the copy column;
   the sunlit windows behind the copy carry dark text without help. */
.page-hero.photo.retreat-banner .ph-img::after { background: var(--dry-grass); opacity: 0.20; }
.page-hero.photo.retreat-banner .ph-img img { object-position: center 50%; }
@media (max-width: 860px) {
  .page-hero.photo.retreat-banner .ph-img img { content: url("../assets/img/retreats-hero-mobile.jpg"); object-position: 58% 45%; }
}

/* ---------- Bamboo ----------
   Earth's texture. The grove is a real place she teaches in, and the form is
   already the brand's grammar: vertical, rhythmic, segmented — the same logic as
   the wordmark's pill and the thread-rain pattern.

   Node spacing is 80px inside a 240px tile (240 = 3 x 80) so the joints keep
   their rhythm across the seam. Change one and you must change the other. */
.pattern-bamboo { position: relative; isolation: isolate; }
.pattern-bamboo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23405636' stroke-width='1.3'%3E%3Cline x1='14' y1='0' x2='14' y2='240'/%3E%3Cline x1='30' y1='0' x2='30' y2='240'/%3E%3Cpath d='M14 10 H30 M14 90 H30 M14 170 H30'/%3E%3Cline x1='58' y1='0' x2='58' y2='240'/%3E%3Cline x1='78' y1='0' x2='78' y2='240'/%3E%3Cpath d='M58 46 H78 M58 126 H78 M58 206 H78'/%3E%3Cline x1='140' y1='0' x2='140' y2='240'/%3E%3Cline x1='162' y1='0' x2='162' y2='240'/%3E%3Cpath d='M140 66 H162 M140 146 H162 M140 226 H162'/%3E%3Cline x1='216' y1='0' x2='216' y2='240'/%3E%3Cline x1='236' y1='0' x2='236' y2='240'/%3E%3Cpath d='M216 24 H236 M216 104 H236 M216 184 H236'/%3E%3C/g%3E%3Cg fill='none' stroke='%23405636' stroke-width='0.9' opacity='0.6'%3E%3Cline x1='104' y1='0' x2='104' y2='240'/%3E%3Cline x1='115' y1='0' x2='115' y2='240'/%3E%3Cpath d='M104 34 H115 M104 114 H115 M104 194 H115'/%3E%3Cline x1='188' y1='0' x2='188' y2='240'/%3E%3Cline x1='199' y1='0' x2='199' y2='240'/%3E%3Cpath d='M188 74 H199 M188 154 H199 M188 234 H199'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 330px 330px;
}
/* Same grove, drawn in linen for forest / deep-water grounds. */
.pattern-bamboo-light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23F3EDE1' stroke-width='1.3'%3E%3Cline x1='14' y1='0' x2='14' y2='240'/%3E%3Cline x1='30' y1='0' x2='30' y2='240'/%3E%3Cpath d='M14 10 H30 M14 90 H30 M14 170 H30'/%3E%3Cline x1='58' y1='0' x2='58' y2='240'/%3E%3Cline x1='78' y1='0' x2='78' y2='240'/%3E%3Cpath d='M58 46 H78 M58 126 H78 M58 206 H78'/%3E%3Cline x1='140' y1='0' x2='140' y2='240'/%3E%3Cline x1='162' y1='0' x2='162' y2='240'/%3E%3Cpath d='M140 66 H162 M140 146 H162 M140 226 H162'/%3E%3Cline x1='216' y1='0' x2='216' y2='240'/%3E%3Cline x1='236' y1='0' x2='236' y2='240'/%3E%3Cpath d='M216 24 H236 M216 104 H236 M216 184 H236'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F3EDE1' stroke-width='0.9' opacity='0.6'%3E%3Cline x1='104' y1='0' x2='104' y2='240'/%3E%3Cline x1='115' y1='0' x2='115' y2='240'/%3E%3Cpath d='M104 34 H115 M104 114 H115 M104 194 H115'/%3E%3Cline x1='188' y1='0' x2='188' y2='240'/%3E%3Cline x1='199' y1='0' x2='199' y2='240'/%3E%3Cpath d='M188 74 H199 M188 154 H199 M188 234 H199'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.14;
}

/* Full-bleed photographic band — image behind, forest wash over, light copy on top. */
.photo-band { position: relative; isolation: isolate; overflow: hidden; color: var(--linen); }
.photo-band > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(31,42,26,.88) 0%, rgba(31,42,26,.72) 46%, rgba(31,42,26,.42) 100%);
}
.photo-band h2, .photo-band h2.section-heading { color: var(--soft-white); }
.photo-band .eyebrow { color: var(--lichen); }
.photo-band p { color: var(--dry-grass); }
@media (max-width: 860px) {
  .photo-band > img { content: url("../assets/img/bamboo-band-mobile.jpg"); }
  .photo-band::after { background: linear-gradient(180deg, rgba(31,42,26,.62) 0%, rgba(31,42,26,.88) 62%); }
}

/* Reversed split — image sits right of the copy on desktop, but still leads on
   mobile so every stacked split reads image-then-words. */
.split--rev .split-img { order: 2; }
@media (max-width: 860px) { .split--rev .split-img { order: 0; } }

/* Portrait not yet supplied. Deliberately looks unfinished so it cannot ship by accident. */
.portrait-pending {
  aspect-ratio: 4 / 5; border-radius: var(--radius-arch);
  background: var(--warm-sand-light);
  box-shadow: inset 0 0 0 1.5px #CDBC98;
  display: grid; place-content: center; gap: 0.9rem; justify-items: center;
  text-align: center; padding: 2rem;
}
.portrait-pending svg { width: 46px; height: auto; color: var(--forest); opacity: 0.32; }
/* Same placeholder, square corners — for the wide feature slots. */
.photo-pending {
  aspect-ratio: 4 / 5; border-radius: var(--radius-card);
  background: var(--warm-sand-light);
  box-shadow: inset 0 0 0 1.5px #CDBC98;
  display: grid; place-content: center; gap: 0.9rem; justify-items: center;
  text-align: center; padding: 2rem;
}
.photo-pending svg { width: 46px; height: auto; color: var(--forest); opacity: 0.32; }
.photo-pending span {
  font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase;
  color: #7C6F58;
}
.portrait-pending span {
  font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase;
  color: #7C6F58;
}

/* ============================================================
   TRAVEL POSTCARDS — the journal's collage
   Deliberately off-grid: each card is placed on a 12-column
   track, then rotated and nudged so the pile reads as something
   spread on a table rather than a gallery wall.
   ============================================================ */
.postcards {
  display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: start; gap: 0;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  padding-bottom: 3.5rem;
}
.postcard {
  position: relative; margin: 0;
  background: var(--soft-white);
  padding: 11px 11px 2.6rem;
  box-shadow: 0 16px 38px rgba(51,47,41,.22), 0 2px 6px rgba(51,47,41,.12);
  transition: transform 320ms cubic-bezier(.2,.7,.3,1), box-shadow 320ms ease;
}
.postcard img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--dry-grass); }
.postcard.pc--p img { aspect-ratio: 2 / 3; }
.postcard.pc--l img { aspect-ratio: 3 / 2; }
.postcard figcaption {
  position: absolute; left: 11px; right: 11px; bottom: 0.85rem;
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
  color: #7C6F58; text-align: center;
}
/* Straighten and lift on hover — the card you pick up out of the pile. */
.postcard:hover, .postcard:focus-within {
  transform: rotate(0deg) translateY(-10px) scale(1.03);
  box-shadow: 0 26px 60px rgba(51,47,41,.30);
  z-index: 9;
}
/* The pin — reuses the brand's diamond sparkle. */
.postcard::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 26px;
  transform: translateX(-50%) rotate(8deg);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M12 2 L18 17 L12 32 L6 17 Z' fill='%23A5533D'/%3E%3C/svg%3E");
  opacity: 0;
}
.postcard.pc--pinned::before { opacity: .85; }

/* Placement. Column spans and rotations are hand-set — there is no rule to
   derive them from, the pile just has to look dropped rather than dealt. */
.pc-1 { grid-column: 1 / span 3;  transform: rotate(-5deg);  z-index: 7; margin-top: 0.5rem; }
.pc-2 { grid-column: 4 / span 5;  transform: rotate(2.5deg); z-index: 9; margin-top: 3.5rem; margin-inline: 0.9rem; }
.pc-3 { grid-column: 9 / span 3;  transform: rotate(-3deg);  z-index: 8; margin-top: 0; }
.pc-4 { grid-column: 2 / span 5;  transform: rotate(-1.8deg);z-index: 5; margin-top: -3.5rem; margin-inline: 1.2rem 0; }
.pc-5 { grid-column: 7 / span 3;  transform: rotate(6deg);   z-index: 6; margin-top: -5.5rem; }

/* Eight-card variant (offerings). Two loose bands rather than one pile — five
   cards can look dropped, eight in the same footprint just looks like a mess.
   Spans and rotations are hand-set for the same reason as above. */
.postcards--eight .pc-1 { grid-column: 1 / span 3;  transform: rotate(-4.5deg); z-index: 8; margin-top: 0.4rem;  margin-inline: 0 0.7rem; }
.postcards--eight .pc-2 { grid-column: 4 / span 3;  transform: rotate(2.8deg);  z-index: 7; margin-top: 3.6rem;  margin-inline: 0.5rem 0; }
.postcards--eight .pc-3 { grid-column: 7 / span 3;  transform: rotate(-2.2deg); z-index: 9; margin-top: 0;       margin-inline: 0 0.6rem; }
.postcards--eight .pc-4 { grid-column: 10 / span 3; transform: rotate(4.2deg);  z-index: 6; margin-top: 2.8rem;  margin-inline: 0.4rem 0; }
.postcards--eight .pc-5 { grid-column: 1 / span 3;  transform: rotate(3.2deg);  z-index: 5; margin-top: 0.6rem;  margin-inline: 0.9rem 0; }
.postcards--eight .pc-6 { grid-column: 4 / span 3;  transform: rotate(-3.6deg); z-index: 4; margin-top: -4.4rem; margin-inline: 0 0.9rem; }
.postcards--eight .pc-7 { grid-column: 7 / span 3;  transform: rotate(2.4deg);  z-index: 3; margin-top: -1.6rem; margin-inline: 0.7rem 0; }
.postcards--eight .pc-8 { grid-column: 10 / span 3; transform: rotate(-3deg);   z-index: 2; margin-top: -4.8rem; margin-inline: 0 0.5rem; }

@media (max-width: 900px) {
  /* Rotation survives; the pile becomes a strip you push sideways. */
  .postcards {
    display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
    /* Bleed back out through .wrap's padding so the strip runs edge to edge. */
    padding: 1.6rem clamp(1.25rem, 4vw, 3.25rem) 3rem;
    margin-inline: calc(clamp(1.25rem, 4vw, 3.25rem) * -1);
    scrollbar-width: none;
  }
  .postcards::-webkit-scrollbar { display: none; }
  .postcard { flex: 0 0 min(70vw, 300px); margin: 0 !important; scroll-snap-align: center; }
  .pc-1 { transform: rotate(-3deg); }  .pc-2 { transform: rotate(2deg); }
  .pc-3 { transform: rotate(-2deg); }  .pc-4 { transform: rotate(1.5deg); }
  .pc-5 { transform: rotate(-3.5deg); }
  .pc-6 { transform: rotate(2.5deg); }  .pc-7 { transform: rotate(-2.5deg); }
  .pc-8 { transform: rotate(3deg); }
  /* The hand-set desktop offsets must not survive into the strip. */
  .postcards--eight .postcard { margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .postcard { transition: none; }
  .postcard:hover, .postcard:focus-within { transform: none; }
}

/* ============================================================
   PAST RETREATS — small scroll-snap carousel
   ============================================================ */
.reel {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem; margin-top: var(--space-block);
  scrollbar-width: thin;
}
.reel::-webkit-scrollbar { height: 6px; }
.reel::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 3px; }
.reel::-webkit-scrollbar-track { background: rgba(139,150,120,.18); border-radius: 3px; }
.reel figure {
  flex: 0 0 clamp(240px, 30%, 380px); margin: 0; scroll-snap-align: start;
}
.reel img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-card); background: var(--dry-grass);
}
.reel figcaption {
  margin-top: 0.6rem; font-size: var(--step--1); color: var(--ink-soft);
}
.reel-hint { margin-top: 0.9rem; font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================
   PATHWAY OFFER LISTS — the four buckets on the landing page
   carry their actual bookable offerings now, not just a
   description. Each line links straight into OfferingTree.
   ============================================================ */
.pathway .pw-list { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.pathway .pw-list li { border-top: 1px solid rgba(255,255,255,.22); }
.pathway-air .pw-list li { border-top-color: rgba(51,47,41,.16); }
.pathway .pw-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .7rem;
  padding: .5rem 0; color: inherit; text-decoration: none;
  font-size: var(--step--1); line-height: 1.35;
}
.pathway .pw-list a:hover { opacity: .72; }
.pathway .pw-list .amt { font-weight: 700; white-space: nowrap; opacity: .8; }
.pathway .pw-more {
  margin-top: .9rem; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: inherit;
  opacity: .75; text-decoration: none; border-bottom: 1px solid currentColor;
  align-self: flex-start; padding-bottom: 1px;
}
.pathway .pw-more:hover { opacity: 1; }
.pathway p { flex: 0 0 auto; }
.pathway .pw-said { font-style: italic; opacity: .85; font-size: var(--step--1); margin: 0 0 .2rem; }

/* Upcoming band — the merged Events moment, pointing at the live calendar */
.upcoming-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; }

/* ============================================================
   PATHWAY CHIPS — the four bucket cards carry their offerings as
   tappable pills now rather than a priced list. Prices moved to the
   detail pages; these are for choosing, not comparing.
   ============================================================ */
.pathway .pw-chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; margin: 1.05rem 0 1.15rem; padding: 0;
}
/* The chips were pills with a border, same as the title pill — two different
   kinds of thing wearing the same shape, so the eye read them as one list.
   They are soft-cornered tiles now: no border, flatter fill, different rhythm. */
.pathway .pw-chips a {
  display: inline-block; padding: .42rem .8rem; border-radius: 7px;
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 500;
  line-height: 1.35; letter-spacing: .015em; text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.13);
  border: 0;
  transition: background 160ms ease, transform 160ms ease;
}
.pathway .pw-chips a:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
/* Air is the one light card, so the translucent-white treatment disappears on it. */
.pathway-air .pw-chips a { background: rgba(51,47,41,.07); }
.pathway-air .pw-chips a:hover { background: rgba(51,47,41,.13); }

/* The card's own call to action — a real button, not a text link. */
.pathway .pw-btn {
  /* margin-top:auto pins the button to the card bottom so all four line up
     across the row; the negative bottom margin then lets it hang over the edge.
     .pathways carries matching bottom padding so nothing below gets clipped.
     Dry grass is the one light tone that reads against BOTH the three dark
     cards and the linen page the button overhangs onto. */
  display: block; width: 100%; text-align: center;
  margin-top: auto; margin-bottom: -3.15rem;
  padding: .82rem 1.1rem; border-radius: 999px;
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 700;
  line-height: 1.15; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  background: var(--dry-grass); color: var(--bark);
  box-shadow: 0 6px 18px rgba(51,47,41,.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pathway .pw-btn:hover {
  transform: translateY(-2px);
  background: var(--warm-sand-light);
  box-shadow: 0 10px 24px rgba(51,47,41,.26);
}
.pathway { justify-content: flex-start; padding-bottom: 2.2rem; }
.pathways { padding-bottom: 3.6rem; }


/* Story bleed — the "How I found my way here" column is a single narrow measure,
   which left half the page empty on wide screens. The photo runs off the right
   edge rather than sitting in a box, and it is decorative, so it drops out
   entirely once the text needs the full width. */
.story-bleed { position: relative; overflow: hidden; }
.story-bleed > .wrap { position: relative; z-index: 1; }
.story-bleed .prose, .story-bleed .section-heading { max-width: 58ch; }
.sb-img {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(260px, 30vw, 480px);
  border-radius: 260px 0 0 260px; overflow: hidden;
}
.sb-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 1180px) { .sb-img { display: none; } }
/* Hold every child of the column clear of the photo — the credentials bar is
   full-width inside .wrap and was running underneath it. */
@media (min-width: 1181px) { .story-bleed > .wrap { padding-right: clamp(300px, 34vw, 540px); } }

/* Arch feature photos were overpowering the copy beside them. */
.split-img.arch { max-width: 75%; margin-inline: auto; }
/* Sound journeys is the one square-cornered feature photo — same 25% reduction
   so it does not read heavier than the arches above and below it. */
.band-deep .split-img { max-width: 75%; margin-inline: auto; }
/* The founder portrait carries more weight, so it only comes down 15%. */
.split-img.arch.founder { max-width: 85%; }

/* ============================================================
   HERO TEXT HIERARCHY
   Three stacked blocks — headline, sub, pull-quote — were landing at
   near-identical weight on phones, so the eye had nothing to follow and the
   buttons got pushed off the fold. Each step now drops clearly:

     h1    display serif, largest
     sub   body, one clear step down
     quote italic, smallest, with a brick hairline so it reads as a quote
           rather than a third paragraph

   The hairline is the important part: it does the "this is an aside" work
   that size alone cannot at small sizes.
   ============================================================ */
.hero-quote {
  border-left: 2px solid var(--brick);
  padding-left: 1rem;
  max-width: 48ch;
}

@media (max-width: 860px) {
  .hero-sub {
    font-size: var(--step-0);
    line-height: 1.45;
    max-width: 34ch;
  }
  .hero-quote {
    font-size: var(--step--1);
    line-height: 1.5;
    max-width: 34ch;
    margin-block: 1rem 1.5rem;
    padding-left: .8rem;
  }
  .hero h1 { max-width: 15ch; }
  /* Two side-by-side buttons beat two stacked ones for getting to the fold. */
  .hero .btn-row { gap: .6rem; }
  .hero .btn-row .btn { padding-inline: 1.15rem; font-size: var(--step--2); }
}