/* ==========================================================================
   Lead From Center — public site
   One stylesheet for every public page. The demo admin and MazinCMS keep
   their own CSS.

   Follows the Lead From Center Brand Identity Guide (Round 3):
   - Palette: Forest, Sage, Clay, Sand, Charcoal, Ivory
   - Display type: Canela (licensed file pending). Until it is added, headings
     use the guide's preview face, Noto Serif Display Light. Add Canela with
     @font-face and it takes over automatically.
   - Text type: Inter Regular 400 / Medium 500 for body, navigation, labels.

   Design notes
   - Charisse's own trail photographs carry the identity. They sit inside
     the page width in soft 22px frames, the same corner as the workshop and
     retreat cards, so they hold their shape on very wide screens.
   - The serif does the talking: large, light headings and statements.
   - Sentence case everywhere. Cards only where something is a thing you
     choose or open (workshop, retreat, survey, principle). No divider lines
     inside cards.
   - Every link styled as a button carries the same arrow.
   - Clay lives in the logo, illustration and card labels, not in buttons.
   - Background rhythm: Ivory by default, Sage tint for reflective sections,
     Sand tint for "how we work together", Forest once on Workshops &
     Retreats to separate the two formats from the page opener. Pages close
     with a slim Sand invitation strip, then the Forest footer.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand palette (guide section 04) */
  --forest: #2e4a3f;
  --sage: #8fa695;
  --clay: #c07a5a;
  --sand: #e6dcc8;
  --charcoal: #3f3f3f;
  --ivory: #f8f6f1;

  /* Tints and shades derived from the palette */
  --forest-deep: #243b32;
  --forest-soft: #4f6a5e;
  --sage-deep: #6f8a76;
  --sage-tint: #e9eee6;
  --sand-tint: #f0e9dc;
  --paper: #fffefb;
  --muted: #62645f;
  --on-forest: rgba(248, 246, 241, .8);
  --line: rgba(46, 74, 63, .13);
  --line-strong: rgba(46, 74, 63, .24);

  /* Type */
  --font-display: 'Canela', 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.75rem, 1.9rem + 3.3vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.7vw, 3.125rem);
  --fs-h3: clamp(1.375rem, 1.28rem + .35vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.06rem + .25vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1400px;
  --narrow: 760px;
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --section-y: clamp(3rem, 2.25rem + 2.5vw, 4.75rem);
  --radius: 12px;
  --header-h: 84px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
:where(main, .site-header-v2, .practice-footer) :is(img, svg, iframe) { display: block; }
:where(main, .practice-footer) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(main) :is(ul, ol)[class] { list-style: none; padding: 0; }
main { overflow-x: clip; }
a { color: inherit; }
:where(main) :is(p, li) a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--sand); color: var(--forest); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  color: var(--forest);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.008em; font-weight: 400; }
h4 { font: 500 1rem/1.45 var(--font-body); letter-spacing: 0; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.008em; font-weight: 400; }
p, li { text-wrap: pretty; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 6px;
  background: var(--forest); color: var(--ivory); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }

/* 3. Text ------------------------------------------------------------------ */
/* The short line above a heading: quiet, sentence case. */
.eyebrow {
  display: block;
  margin: 0 0 1rem;
  font: 500 .9375rem/1.4 var(--font-body);
  color: var(--forest-soft);
}
.lead { font-size: var(--fs-lead); line-height: 1.6; }
.note { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.credential { font-size: var(--fs-small); color: var(--muted); }

.flow > * + * { margin-top: 1rem; }
.flow > :is(h1, h2) + * { margin-top: 1.5rem; }
.flow > h3 + * { margin-top: .625rem; }
.flow > * + :is(h2, h3) { margin-top: 2.25rem; }
.flow > .eyebrow + *, .flow > .breadcrumb + * { margin-top: 0; }
.flow > * + :is(.actions, .button, .text-link) { margin-top: 2rem; }
.flow > .credential { margin-top: .75rem; }
.flow > .button + .note { margin-top: 1.25rem; }

/* 4. Layout ---------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); }
.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand-tint); }
.section--sage { background: var(--sage-tint); }
.section--tight { padding-block: calc(var(--section-y) * .75); }
.section--stone { background: #f1eee7; }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.section-head > :is(h2, h3) + p { margin-top: 1.125rem; font-size: var(--fs-lead); line-height: 1.6; }

/* Content that starts a third of the way in, for a looser, asymmetric page. */
.offset { padding-left: calc((100% - 2 * clamp(2rem, 4vw, 4rem)) / 3 + clamp(2rem, 4vw, 4rem)); }
.offset > * { max-width: 42rem; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--end { align-items: end; }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.columns { display: grid; gap: 2.5rem clamp(2rem, 4vw, 4rem); align-items: start; }
.columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns > article > h3 + p, .columns > article > h2 + p { margin-top: .75rem; }
.columns > article > p + .text-link { margin-top: 1rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* 5. Buttons & links ------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .75rem 1.625rem;
  gap: .5rem;
  border: 1px solid var(--forest); border-radius: 999px;
  background: var(--forest); color: var(--ivory);
  font: 500 .9375rem/1.2 var(--font-body); letter-spacing: .005em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.button--light { background: var(--ivory); border-color: var(--ivory); color: var(--forest); }
.button--light:hover { background: #fff; border-color: #fff; }
.button--ghost { background: transparent; color: var(--forest); }
.button--ghost:hover { background: var(--forest); color: var(--ivory); }
.button--on-dark { background: transparent; border-color: rgba(248, 246, 241, .45); color: var(--ivory); }
.button--on-dark:hover { background: var(--ivory); border-color: var(--ivory); color: var(--forest); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button svg { width: 1rem; height: 1rem; flex: none; transition: transform .2s ease; }
.button:hover svg { transform: translateX(2px); }
.button:hover svg:has(path[d^="M12 5v14"]) { transform: translateY(2px); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--forest); font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: .35em;
  transition: text-decoration-color .2s ease;
}
.text-link:hover { text-decoration-color: currentColor; }

/* 6. Header & navigation --------------------------------------------------- */
.site-header-v2 {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--header-h);
  padding-inline: var(--bleed);
  background: rgba(248, 246, 241, .95);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.review-brand-lockup { display: flex; align-items: center; flex: none; text-decoration: none; }
.review-brand-lockup .review-brand-stones { display: none; }
.review-brand-wordmark img { width: auto; height: 50px; }

.desktop-nav { display: flex; align-items: center; gap: clamp(1.25rem, .5rem + 1.6vw, 2.25rem); }
.desktop-nav > a, .work-menu > summary {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  color: var(--forest); font: 500 .9375rem/1 var(--font-body);
  text-decoration: none; text-underline-offset: .55em; text-decoration-thickness: 1px;
}
.desktop-nav > a:hover, .work-menu > summary:hover,
.desktop-nav > a[aria-current="page"], .work-menu:has([aria-current="page"]) > summary { text-decoration-line: underline; }
.desktop-nav > a.nav-cta {
  min-height: 44px; padding: 0 1.375rem; border-radius: 999px;
  background: var(--forest); color: var(--ivory); text-decoration: none;
}
.desktop-nav > a.nav-cta:hover { background: var(--forest-deep); }

.work-menu { position: relative; }
.work-menu > summary { list-style: none; cursor: pointer; }
.work-menu > summary::-webkit-details-marker { display: none; }
.work-menu .chev { width: 11px; height: 11px; transition: transform .2s ease; }
.work-menu[open] .chev { transform: rotate(180deg); }
.work-menu > div {
  position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%);
  display: grid; min-width: 290px; padding: .5rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 40px -24px rgba(36, 59, 50, .4);
}
.work-menu > div a {
  display: block; padding: .8rem .9rem; border-radius: 7px;
  color: var(--forest); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.work-menu > div a:hover, .work-menu > div a[aria-current="page"] { background: var(--sage-tint); }
.nav-audience { display: block; padding: .5rem .9rem .25rem; font-size: var(--fs-xs); color: var(--muted); }

.mobile-menu { display: none; }
.mobile-menu > summary {
  list-style: none; cursor: pointer;
  display: grid; place-content: center; gap: 6px;
  width: 44px; height: 44px; margin-right: -8px; border-radius: 6px;
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary span {
  display: block; width: 22px; height: 1.5px; background: var(--forest);
  transition: transform .25s ease;
}
.mobile-menu[open] > summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.mobile-menu[open] > summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu > div {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: .5rem var(--gutter) 1.5rem;
  background: var(--ivory); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(36, 59, 50, .35);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-menu > div a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--line);
  color: var(--forest); font: 500 1.0625rem/1.3 var(--font-body); text-decoration: none;
}
.mobile-menu > div a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
.mobile-menu > div a:last-child {
  justify-content: center; margin-top: 1.25rem; border: 0; border-radius: 999px;
  background: var(--forest); color: var(--ivory);
}
.mobile-menu .nav-audience { padding: 1.25rem 0 .25rem; }
.mobile-menu .nav-audience ~ a:not(:last-child) { padding-left: 1rem; }

@media (max-width: 920px) {
  :root { --header-h: 72px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .review-brand-wordmark img { height: 40px; }
}

/* 7. Footer (reversed: ivory artwork on Forest) ------------------------------ */
.practice-footer { background: var(--forest); color: var(--on-forest); }
.practice-footer a { color: var(--ivory); }
.practice-footer :focus-visible { outline-color: var(--ivory); }
.practice-footer-main {
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3.5rem, 3rem + 2vw, 5rem) clamp(3rem, 2.5rem + 2vw, 4rem);
}
.practice-footer-brand { display: grid; align-content: start; justify-items: start; gap: 1rem; font-size: var(--fs-small); }
.practice-footer-logo { margin-bottom: .5rem; }
.practice-footer-logo img { width: auto; height: 46px; }
.practice-footer-brand p { color: var(--on-forest); line-height: 1.65; }
.practice-footer-email { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(248, 246, 241, .4); text-underline-offset: .25em; }
.practice-footer-location { color: rgba(248, 246, 241, .68); }
.practice-footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.practice-footer-nav h2 { margin-bottom: .75rem; font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--sand); }
.practice-footer-nav a {
  display: inline-flex; align-items: center; min-height: 38px;
  font-size: var(--fs-small); text-decoration: none;
}
.practice-footer-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.practice-footer .nav-audience { display: none; }
.practice-footer-bottom {
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
  padding-block: 1.5rem; border-top: 1px solid rgba(248, 246, 241, .16);
  font-size: var(--fs-xs); color: rgba(248, 246, 241, .68);
}
.practice-footer-copyright a { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.practice-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.practice-footer-legal > a, .visitor-preferences > summary {
  display: inline-flex; align-items: center; min-height: 36px;
  color: rgba(248, 246, 241, .74); text-decoration: none; cursor: pointer;
}
.practice-footer-legal > a:hover, .visitor-preferences > summary:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; }
.visitor-preferences { position: relative; }
.visitor-preferences > summary { list-style: none; }
.visitor-preferences > summary::-webkit-details-marker { display: none; }
.visitor-preferences > div {
  position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 10;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  display: grid; gap: .75rem; padding: 1.25rem;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--charcoal);
}
.visitor-preferences [data-analytics-state] { font-weight: 500; color: var(--forest); }
.preference-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.preference-actions button {
  min-height: 38px; padding: .4rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--forest); font: 500 .8125rem/1.2 var(--font-body); cursor: pointer;
}
.preference-actions button:hover:not(:disabled) { background: var(--sage-tint); }
.preference-actions button:disabled { opacity: .5; cursor: not-allowed; }
.visitor-preferences :focus-visible { outline-color: var(--forest); }

/* 8. Page openers ----------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.hero h1 { max-width: 13em; }
.hero .lead { max-width: 34rem; }
.hero--page { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero--standalone { display: flex; align-items: center; min-height: min(56vh, 520px); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-small); color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: .3em; }
.breadcrumb [aria-current] { color: var(--forest); }

/* Copy beside a framed photograph. The photo stretches to the height of the
   copy (never less than its minimum) and is capped by the page width, so it
   keeps a sensible shape from a laptop to a zoomed-out ultrawide screen. */
.hero--photo { padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.75rem); }
.hero--photo + .section:not([class*="section--"]) { padding-top: calc(var(--section-y) * .6); }
.feature {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1.25rem + 3vw, 5rem);
  align-items: center;
}
.feature__copy h1 { font-size: clamp(2.75rem, 1.9rem + 2.7vw, 4.25rem); }
.feature__photo {
  position: relative; overflow: hidden; align-self: stretch;
  min-height: clamp(300px, 16rem + 10vw, 480px);
  border-radius: 22px; background: var(--sage-tint);
}
.feature__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A portrait of Charisse: narrower column, upright frame */
.feature--portrait { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.feature--portrait .feature__photo { align-self: center; min-height: 0; aspect-ratio: 4 / 5; }
.feature--portrait .feature__photo img { object-position: 50% 66%; }

/* Homepage opener: the lake illustration sits in the top-right corner */
.hero--home {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(46vw, 640px);
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.hero--home .wrap { position: relative; z-index: 1; }
.hero--home .hero__copy { max-width: 35rem; }
.hero--home h1 { max-width: 11em; }
.hero__art { position: absolute; top: 0; right: 0; width: min(46vw, 640px); pointer-events: none; }
.hero__art img { width: 100%; height: auto; }

/* 9. Section patterns ------------------------------------------------------- */
/* Home: Meet Charisse */
.founder { position: relative; overflow: hidden; padding-block: var(--section-y); background: var(--sand-tint); }
.founder .feature__photo { aspect-ratio: 1 / 1; }
.founder__leaves {
  position: absolute; top: -2rem; right: -2.5rem; z-index: 0;
  width: clamp(150px, 15vw, 230px); opacity: .45; pointer-events: none;
  transform: rotate(18deg);
}
.founder .feature__copy { position: relative; z-index: 1; }

/* Home: the four ways to work together, as an index. Each row ends in a
   real button; the buttons share one width so they line up as a column. */
.index-list { border-top: 1px solid var(--line-strong); }
.index-list > article {
  display: grid; grid-template-columns: auto minmax(0, 4.5fr) minmax(0, 6fr) auto;
  gap: .75rem clamp(1.25rem, 2.5vw, 2.5rem); align-items: center;
  padding-block: clamp(1.125rem, .9rem + .7vw, 1.5rem);
  border-bottom: 1px solid var(--line-strong);
}
.index-list h3 { font-size: clamp(1.5rem, 1.3rem + .7vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.012em; }
.index-list .button { justify-self: end; min-width: 14rem; min-height: 46px; justify-content: space-between; white-space: nowrap; }

/* Steps that really are a sequence: large serif numerals */
.steps { counter-reset: step; display: grid; gap: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); }
.steps > li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font: 300 2.75rem/.9 var(--font-display); color: var(--sage-deep);
}
.steps > li > * { grid-column: 2; }
.steps h3 { margin-bottom: .375rem; }
.steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
.steps--row > li { grid-template-columns: minmax(0, 1fr); }
.steps--row > li::before { grid-row: auto; margin-bottom: 1rem; font-size: 3.5rem; }
.steps--row > li > * { grid-column: 1; }

/* Short serif statements, e.g. the situations facilitation helps with */
.statements { display: grid; gap: 1.5rem; }
.statements > li {
  font: 300 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.35 var(--font-display);
  letter-spacing: -.008em; color: var(--forest);
}

/* Compact numbered list (booking request) */
.list-numbered { counter-reset: n; display: grid; gap: .625rem; }
.list-numbered > li { counter-increment: n; display: flex; align-items: baseline; gap: .875rem; color: var(--forest); }
.list-numbered > li::before { content: counter(n) "."; flex: none; min-width: 1.25rem; font: 400 1.25rem/1 var(--font-display); color: var(--sage-deep); }

.plain-list { list-style: disc !important; padding-left: 1.25rem !important; }
.plain-list li + li { margin-top: .375rem; }
.plain-list li::marker { color: var(--sage-deep); }

.statement {
  max-width: 26ch;
  font: 300 clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem)/1.28 var(--font-display);
  letter-spacing: -.012em; color: var(--forest); text-wrap: balance;
}

.aside-note { padding-left: 1.5rem; border-left: 1px solid var(--line-strong); }

/* About: how Charisse works. The heading sits in the same row as the three
   principles, so the section reads as one line of thought. */
.principles {
  display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: 1.25rem; align-items: stretch;
}
.principles__head { align-self: center; padding-right: clamp(0rem, 1.5vw, 1.5rem); }
.principles__head h2 { font-size: clamp(2rem, 1.7rem + .9vw, 2.5rem); text-wrap: pretty; }
.principle {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + .6vw, 1.875rem);
  border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(36, 59, 50, .05), 0 14px 30px -26px rgba(36, 59, 50, .35);
}
.section--sage .principle .icon-badge { margin-bottom: 1.375rem; background: var(--sage-tint); }
.principle h3 { font-size: clamp(1.25rem, 1.18rem + .3vw, 1.5rem); }
.principle p { margin-top: .625rem; font-size: var(--fs-small); line-height: 1.65; }

/* About: experience. Same shape as facilitation's "Start with the work":
   heading and why it matters on the left, the credentials as icon points. */
.icon-list--roomy { gap: 1.75rem; }

.fine-print {
  margin-top: 2rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.section-foot { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.section-foot .note { max-width: 32rem; }

/* Closing invitation: a slim Sand strip before the footer */
.closing, .practice-footer-invitation {
  background: var(--sand);
  padding-block: clamp(1.75rem, 1.5rem + .8vw, 2.25rem);
}
.closing__inner { max-width: 62rem; text-align: center; }
.closing__inner > * { margin-inline: auto; }
.closing h2, .practice-footer-invitation h2 {
  font-size: clamp(1.625rem, 1.4rem + .9vw, 2.125rem); line-height: 1.15; letter-spacing: -.012em;
  max-width: none;
}
.closing .flow { margin-top: .375rem; }
.closing .lead { max-width: 60rem; margin-inline: auto; font-size: var(--fs-body); line-height: 1.55; text-wrap: balance; }
.closing .flow > .button { margin-top: .875rem; min-height: 44px; }
.practice-footer-invitation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-inline: var(--bleed);
}
.practice-footer-invitation p { margin-bottom: .375rem; font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--forest-soft); }

/* 10. Workshops & retreats -------------------------------------------------- */
/* The two formats, on Forest, directly under the page opener */
.formats { padding-block: clamp(2.5rem, 2rem + 1.8vw, 3.75rem); background: var(--forest); color: var(--on-forest); }
.formats__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start;
}
.formats__intro {
  max-width: 24ch;
  font: 300 clamp(1.5rem, 1.25rem + .9vw, 2rem)/1.25 var(--font-display);
  letter-spacing: -.012em; color: var(--ivory); text-wrap: balance;
}
.formats article { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.formats h3 { margin-top: 1rem; color: var(--ivory); }
.formats article p { margin-top: .5rem; margin-bottom: 1.5rem; max-width: 34rem; }
.formats .button { margin-top: auto; min-height: 46px; }
.formats .icon-badge { background: rgba(248, 246, 241, .1); color: var(--sand); box-shadow: inset 0 0 0 1px rgba(248, 246, 241, .18); }
.formats :focus-visible { outline-color: var(--ivory); }

.disclosure { margin-top: 2.25rem; border-block: 1px solid var(--line-strong); }
.disclosure > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding-block: 1rem;
  color: var(--forest); font-weight: 500;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: background-size .2s ease;
}
.disclosure[open] > summary::after { background-size: 14px 1.5px, 1.5px 0; }
.disclosure__body { padding-bottom: 2rem; }
.disclosure__body > * + * { margin-top: 1rem; }
.disclosure__body > * + :is(h3, h4, .topics) { margin-top: 1.75rem; }
.topics { display: grid; gap: 1.25rem; }
.topics h4 { color: var(--forest); }
.topics h4 + p { margin-top: .125rem; }

/* The survey is a card of its own, in the same family as the two above */
.xcards > .survey { margin-top: .75rem; }
.survey {
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(36, 59, 50, .04), 0 16px 36px -28px rgba(36, 59, 50, .3);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.survey > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem 1.25rem;
  padding: clamp(1.25rem, 1rem + .8vw, 1.625rem) clamp(1.25rem, 1rem + 1.5vw, 2.75rem);
}
.survey > summary::-webkit-details-marker { display: none; }
.survey__title { flex: 1; display: grid; gap: .125rem; }
.survey__title strong { font: 400 var(--fs-h3)/1.25 var(--font-display); color: var(--forest); letter-spacing: -.008em; }
.survey__title span { font-size: var(--fs-small); color: var(--muted); }
.survey__open {
  flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: .5rem 1.375rem;
  border: 1px solid var(--forest); border-radius: 999px;
  color: var(--forest); font-weight: 500; font-size: var(--fs-small);
  transition: background-color .2s ease, color .2s ease;
}
.survey > summary:hover .survey__open { background: var(--forest); color: var(--ivory); }
.survey__when-open, .survey[open] .survey__when-closed { display: none; }
.survey[open] .survey__when-open { display: inline; }
.survey__body { padding: 0 clamp(1.25rem, 1rem + 1.5vw, 2.75rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.survey__toolbar, .survey__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  font-size: var(--fs-small); color: var(--muted);
}
.survey__toolbar { margin-bottom: 1rem; }
.survey__footer { margin-top: 1rem; }
.survey__toolbar a, .survey__footer a { color: var(--forest); font-weight: 500; text-underline-offset: .25em; }
.survey iframe { width: 100%; height: 900px; border: 0; border-radius: 8px; background: #fff; }

/* 11. Icons, illustrations and cards ---------------------------------------- */
/* Line icons sit in a soft Sage circle, as in the original Figma cards. */
.icon-badge {
  flex: none; display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--sage-tint); color: var(--forest);
}
.icon-badge svg { width: 1.25rem; height: 1.25rem; }
:is(.section--sage, .section--sand, .founder) .icon-badge { background: var(--paper); }
.index-list .icon-badge { width: 3rem; height: 3rem; }

/* A list of short items, each with an icon */
header + .icon-list { margin-top: 2rem; }
.icon-list { display: grid; gap: 1.25rem; }
.icon-list > li, .icon-list > article { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.icon-list h3 { font-size: clamp(1.25rem, 1.18rem + .3vw, 1.5rem); margin: .3rem 0 .25rem; }
.icon-list p { color: var(--charcoal); }
.icon-list > * > :not(.icon-badge) { grid-column: 2; }
.icon-list > * > .icon-badge { grid-row: 1 / span 2; }

/* Columns that open with an icon */
.columns > article > .icon-badge { margin-bottom: 1rem; }

/* Watercolour vignettes from the brand illustration set */
.vignette { width: 100%; max-width: 520px; height: auto; margin-inline: auto; }

/* Workshop and retreat cards, rebuilt from the original Figma design */
.xcards { display: grid; gap: 1.5rem; }
.xcard {
  display: grid; grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(36, 59, 50, .04), 0 16px 36px -28px rgba(36, 59, 50, .3);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.xcard:focus { outline: none; }
.xcard--reverse { grid-template-columns: minmax(0, 61fr) minmax(0, 39fr); }
.xcard__media { position: relative; min-height: 360px; background: var(--sage-tint); }
.xcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xcard__badge, .xcard__chip {
  position: absolute; left: 1.25rem; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .875rem; border-radius: 999px; font: 500 .8125rem/1 var(--font-body);
}
.xcard__badge { top: 1.25rem; background: var(--paper); color: var(--forest); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25); }
.xcard__badge svg { width: 1rem; height: 1rem; }
.xcard__chip { bottom: 1.25rem; background: var(--forest); color: var(--ivory); }
/* Card body rhythm, the same in both cards:
   label · heading · summary · details or highlights · prompt + actions · more */
.xcard__body { display: flex; flex-direction: column; padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem) clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem) 0; }
.xcard__eyebrow { margin-bottom: .875rem; font: 500 .75rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--clay-text); }
.xcard h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.016em; }
.xcard__summary { margin-top: 1rem; max-width: 40rem; color: var(--muted); }

/* Key details: label + value pairs Charisse edits in the panel (a repeat
   list, up to four). site.js picks each icon from the label. */
.details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr));
  gap: 1.25rem 1.5rem; margin-top: 1.75rem;
}
/* Four details sit as a 2 x 2 block rather than a row of three and an orphan */
.details:has(> .detail:nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); max-width: 36rem; }
.detail { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.detail__icon {
  position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--sage-tint);
}
.detail__icon::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem;
  background: var(--forest);
  -webkit-mask: var(--detail-icon) center / contain no-repeat;
  mask: var(--detail-icon) center / contain no-repeat;
}
.detail__text { display: grid; gap: .125rem; min-width: 0; }
.detail__label { font: 500 .6875rem/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.detail__value { color: var(--forest); font-size: var(--fs-small); font-weight: 500; line-height: 1.35; }

/* @icons: generated by build.py, edit the icon list there */
.detail { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5c-.3-8.2 4.6-13.6 14.5-14.5.6 9.7-4.6 14.6-13 14.5'/%3E%3Cpath d='M5.5 19c2.6-4 5.6-6.6 9-8.5'/%3E%3C/svg%3E"); }
.detail[data-icon="calendar"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E"); }
.detail[data-icon="clock"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.detail[data-icon="pin"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.detail[data-icon="tag"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.4 1.4 0 0 1 0 2l-6.6 6.6a1.4 1.4 0 0 1-2 0Z'/%3E%3Ccircle cx='8' cy='8' r='1.3'/%3E%3C/svg%3E"); }
.detail[data-icon="users"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.5'/%3E%3Cpath d='M3 19.5v-1a4.5 4.5 0 0 1 4.5-4.5h4a4.5 4.5 0 0 1 4.5 4.5v1'/%3E%3Cpath d='M15.5 4.6a3.5 3.5 0 0 1 0 6.8'/%3E%3Cpath d='M18 14.2a4.5 4.5 0 0 1 3 4.3v1'/%3E%3C/svg%3E"); }
.detail[data-icon="chat"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8 8 0 0 1-11.7 7.1L3.5 20l1.4-4.6a8 8 0 1 1 15.6-3.8Z'/%3E%3C/svg%3E"); }
.detail[data-icon="compass"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1Z'/%3E%3C/svg%3E"); }
.detail[data-icon="home"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4Z'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.detail[data-icon="leaf"] { --detail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5c-.3-8.2 4.6-13.6 14.5-14.5.6 9.7-4.6 14.6-13 14.5'/%3E%3Cpath d='M5.5 19c2.6-4 5.6-6.6 9-8.5'/%3E%3C/svg%3E"); }
.highlights > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4a3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
/* @end-icons */

/* Retreat highlights: a short checked list, one per line */
.highlights { display: grid; gap: .75rem; margin-top: 1.75rem; }
.highlights > li { display: flex; align-items: flex-start; gap: .75rem; color: var(--forest); font-weight: 500; line-height: 1.5; }
.highlights > li::before {
  content: ""; flex: none; width: 1.625rem; height: 1.625rem; margin-top: -.05rem; border-radius: 50%;
  background-color: var(--sage-tint); background-position: center; background-size: .875rem; background-repeat: no-repeat;
}

.xcard__foot { margin-top: auto; padding-top: 2rem; }
.xcard__prompt { margin-bottom: .875rem; color: var(--muted); font-size: var(--fs-small); }
.xcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.xcard__actions .text-link { font-size: var(--fs-small); }
.xcard .disclosure { margin: 1.75rem calc(-1 * clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem)) 0; padding-inline: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem); border-bottom: 0; border-top-color: var(--line); }
.xcard .disclosure > summary { min-height: 58px; font-size: var(--fs-small); }
.xcard .disclosure > summary:hover { color: var(--forest-deep); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.xcard .disclosure__body { padding-bottom: 2rem; }

/* 12. Contact & booking request -------------------------------------------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "intro form" "next form";
  gap: 0 clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: start;
}
.contact__intro { grid-area: intro; }
.contact__form { grid-area: form; }
.contact__next { grid-area: next; margin-top: 3rem; }
.contact__next h2 { font-size: var(--fs-h3); font-weight: 400; margin-bottom: .75rem; }
.contact__next p + p { margin-top: .75rem; }
.contact__next p:last-child { font-size: var(--fs-small); color: var(--muted); }

.host { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.host img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.host p { color: var(--forest); font-weight: 500; line-height: 1.45; }
.host a { display: inline-block; margin-top: .25rem; font-size: var(--fs-small); color: var(--charcoal); text-underline-offset: .22em; }

.form-panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.form-panel:focus { outline: none; }
.form-panel form { display: grid; gap: 1.375rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
.field { display: grid; gap: .5rem; }
.field label { color: var(--forest); font-size: var(--fs-small); font-weight: 500; }
.field label span { color: var(--muted); font-weight: 400; }
.form-panel :is(input:not([type="checkbox"]), select, textarea),
.booking-page select {
  width: 100%; min-height: 50px; padding: .75rem 1rem;
  border: 1px solid #b9c2b6; border-radius: 6px;
  background: #fff; color: var(--charcoal);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-panel select, .booking-page select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232e4a3f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form-panel textarea { min-height: 160px; resize: vertical; }
.form-panel :is(input, select, textarea):focus, .booking-page select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(46, 74, 63, .15); }
.form-panel [aria-invalid="true"] { border-color: #a34d30 !important; }
.field small { font-size: var(--fs-xs); color: var(--muted); }
.lfc-field-error { color: #a34d30 !important; font-weight: 500; }
.lfc-field-error:empty { display: none; }
.lfc-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lfc-consent { display: flex; align-items: flex-start; gap: .75rem; color: var(--charcoal); font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.lfc-consent input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--forest); }
.lfc-contact-status { padding: .875rem 1rem; border-radius: 6px; background: var(--sage-tint); color: var(--forest); font-size: var(--fs-small); line-height: 1.5; }
.lfc-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.lfc-contact-confirmation { padding: 1.5rem; border-radius: var(--radius); background: var(--sage-tint); }
.lfc-contact-confirmation h3 { margin-bottom: .5rem; }
.form-guidance:empty { display: none; }
.form-guidance { color: #a34d30; font-size: var(--fs-small); }
.success-note { padding: 1.5rem; border-radius: var(--radius); background: var(--sage-tint); }

.crosslink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
  padding-block: 1.75rem; border-top: 1px solid var(--line);
}
.crosslink p { color: var(--forest); }

.demo-disabled { display: grid; gap: .75rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) !important; border: 0 !important; border-radius: var(--radius) !important; background: var(--sage-tint) !important; color: var(--charcoal) !important; }
.demo-disabled strong { font: 400 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -.008em; color: var(--forest); }
.demo-disabled a.button { justify-self: start; margin-top: .5rem; }

/* 13. Policy pages ---------------------------------------------------------- */
.page-intro {
  width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}
.page-intro .eyebrow { color: var(--forest-soft); }
.page-intro h1 { max-width: 14em; }
.page-intro .lede { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.6; max-width: 40rem; }
.policy-page {
  width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto;
  padding-bottom: var(--section-y);
}
.policy-date { padding-bottom: 1rem; font-size: var(--fs-small); color: var(--muted); }
.policy-page > section { padding-top: 2.25rem; }
.policy-page h2 { font-size: clamp(1.5rem, 1.4rem + .4vw, 1.875rem); font-weight: 400; letter-spacing: -.01em; margin-bottom: .875rem; }
.policy-page h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.policy-page p + p, .policy-page p + ul, .policy-page ul + p { margin-top: 1rem; }
.policy-page ul { padding-left: 1.25rem; }
.policy-page li + li { margin-top: .5rem; }
.policy-page li::marker { color: var(--sage-deep); }

/* 14. Booking demo (experience-booking.php) ------------------------------- */
.booking-masthead { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.booking-masthead img { height: 46px; width: auto; }
.booking-page { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section-y); }
.booking-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--forest); font-size: var(--fs-small); font-weight: 500; text-underline-offset: .3em; }
.booking-heading { max-width: 44rem; margin: 1rem 0 2.5rem; }
.booking-heading h1 { margin-bottom: 1rem; }
.booking-notice, .booking-empty { padding: 1.5rem; border-radius: var(--radius); background: var(--sage-tint); color: var(--forest); }
.booking-notice > * + *, .booking-empty > * + * { margin-top: .75rem; }
.booking-flow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.booking-choices fieldset { margin: 0; padding: 0; border: 0; }
.booking-choices legend { margin-bottom: .5rem; font: 400 var(--fs-h3)/1.25 var(--font-display); color: var(--forest); }
.booking-choices legend + p { margin-bottom: 1.25rem; color: var(--muted); font-size: var(--fs-small); }
.booking-session-list { display: grid; gap: .75rem; }
.booking-session-option {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.booking-session-option:hover { border-color: var(--forest); }
.booking-session-option:has(input:checked) { border-color: var(--forest); background: var(--sage-tint); box-shadow: inset 0 0 0 1px var(--forest); }
.booking-session-option input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--forest); }
.booking-slot-copy { display: grid; gap: .125rem; }
.booking-session-date { color: var(--forest); font-weight: 500; }
.booking-session-meta { color: var(--muted); font-size: var(--fs-small); }
.booking-details { display: grid; gap: 1rem; position: sticky; top: 1.5rem; }
.booking-summary, .experience-request-form { padding: 1.5rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.booking-summary { background: var(--sand-tint); border: 0; }
.booking-summary h2, .experience-request-form h2 { font-size: var(--fs-h3); font-weight: 400; margin: .25rem 0 .5rem; }
.booking-summary [aria-live] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); color: var(--forest); }
.experience-request-form { display: grid; gap: 1rem; }
.experience-request-form label { display: grid; gap: .5rem; color: var(--forest); font-size: var(--fs-small); font-weight: 500; }
.experience-request-form .booking-consent { display: flex; gap: .75rem; font-weight: 400; color: var(--charcoal); line-height: 1.5; }
.experience-request-form .booking-consent input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--forest); }
.honey-field { position: absolute !important; left: -10000px; }
.experience-request-reassurance, .experience-request-privacy { font-size: var(--fs-xs); color: var(--muted); }
.experience-request-privacy summary { cursor: pointer; color: var(--forest); font-weight: 500; }
.experience-request-privacy p { margin-top: .5rem; }
.booking-page .work-eyebrow { display: block; margin-bottom: .75rem; font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--forest-soft); }
.booking-page .work-button { width: 100%; }

/* 15. Responsive ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles__head { grid-column: 1 / -1; margin-bottom: .75rem; }
  .formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formats__intro { grid-column: 1 / -1; max-width: 30ch; }
}
@media (max-width: 1100px) {
  .hero--home .hero__copy { max-width: 29rem; }
  .hero__art { width: min(50vw, 620px); }
  .index-list > article { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); }
  .index-list .button { grid-column: 3; justify-self: start; }
}
@media (max-width: 860px) {
  .split, .split--7-5 { grid-template-columns: minmax(0, 1fr); }
  .columns--3, .steps--row { grid-template-columns: minmax(0, 1fr); }
  .offset { padding-left: 0; }
  .contact, .booking-flow { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-areas: "intro" "form" "next"; }
  .contact__form { margin-top: 2.5rem; }
  .booking-details { position: static; }

  .feature, .feature--portrait { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .feature__photo { min-height: 0; aspect-ratio: 4 / 3; border-radius: 18px; }
  /* On phones the copy leads, so two photographs never stack back to back */
  .feature--photo-first > .feature__photo { order: 1; }
  .feature--portrait .feature__photo, .founder .feature__photo { aspect-ratio: 1 / 1; }
  .founder__leaves { display: none; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .principles__head { margin-bottom: .5rem; }
  .principle { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.375rem; }
  .section--sage .principle .icon-badge { grid-row: 1 / span 2; margin: 0; }
  .principle p { grid-column: 2; }

  .hero--home { display: block; min-height: 0; padding-bottom: 0; }
  .hero--home .hero__copy { max-width: none; }
  .hero__art { position: relative; width: min(100%, 520px); margin: 2.5rem calc(var(--gutter) * -1) 0 auto; }
  .steps--row > li::before { font-size: 2.75rem; }
}
@media (max-width: 1000px) {
  .xcard, .xcard--reverse { grid-template-columns: minmax(0, 1fr); }
  .xcard__media { min-height: 0; aspect-ratio: 16 / 10; }
  .xcard--reverse .xcard__media { order: -1; }
}
@media (max-width: 680px) {
  .columns--2, .field-row { grid-template-columns: minmax(0, 1fr); }
  .formats__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .formats article p { margin-bottom: 1.25rem; }
  .survey > summary { flex-wrap: wrap; }
  .survey > summary .icon-badge { display: none; }
  .survey__open { width: 100%; justify-content: center; }
  .xcard__actions .button { width: 100%; }
  .index-list > article { grid-template-columns: auto minmax(0, 1fr); }
  .index-list > article > :not(.icon-badge) { grid-column: 2; }
  .index-list .button { min-width: 0; width: 100%; margin-top: .5rem; }
  .vignette { max-width: 360px; }
  .practice-footer-invitation { flex-direction: column; align-items: flex-start; }
  .actions { gap: .75rem 1.5rem; }
  .actions .button { width: 100%; }
  .practice-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .practice-footer-main { grid-template-columns: minmax(0, 1fr); }
  .practice-footer-bottom { flex-direction: column; align-items: flex-start; }
  .visitor-preferences > div { left: 0; right: auto; }
}

/* 16. Motion preferences ---------------------------------------------------- */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header-v2, .practice-footer, .demo-banner, .closing, .practice-footer-invitation { display: none; }
  body { background: #fff; }
}

/* October 16 client feedback: clearer opening logo; existing layout retained. */
.site-header-v2 .review-brand-wordmark img{height:60px;max-width:100%;object-fit:contain}
.lfc-testimonial{margin:0;padding:clamp(22px,4vw,42px);background:var(--ivory,#F8F6F1);border-left:3px solid #8FA695}
.lfc-testimonial p{line-height:1.8}.lfc-testimonial figcaption{margin-top:20px;font-weight:500}.lfc-testimonials{display:grid;gap:28px}.lfc-testimonials h2{margin-bottom:12px}
@media(max-width:700px){.site-header-v2 .review-brand-wordmark img{height:auto;width:min(230px,60vw)}.lfc-interest-options{grid-template-columns:1fr}}

/* October 22 visual review: preserve the LFC identity, simplify its rhythm. */
[data-mz-section="homepage-client-voice"] > .wrap {
  display:grid; grid-template-columns:minmax(0, .75fr) minmax(0, 1.5fr);
  column-gap:clamp(2rem,5vw,5rem); row-gap:1.25rem; align-items:start;
}
[data-mz-section="homepage-client-voice"] > .wrap > h2 {font-size:clamp(2rem,3.2vw,3rem);max-width:10ch;}
[data-mz-section="homepage-client-voice"] > .wrap > p {grid-column:2;}
.lfc-testimonials {grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem clamp(2rem,4vw,4rem);}
.lfc-testimonials > h2 {grid-column:1/-1;margin:0;}
.lfc-testimonial {padding:1.5rem 0 0;margin:0;background:transparent;border:0;border-top:1px solid #9fae9f;min-width:0;}
.lfc-testimonial blockquote {margin:0;}
.lfc-testimonial p {font-size:clamp(1rem,.94rem + .24vw,1.15rem);line-height:1.75;max-width:68ch;}
.lfc-testimonial figcaption {margin-top:1.25rem;font-size:.9rem;color:var(--forest);font-weight:500;}
[data-mz-section="lfc-oct6-about-leadership-background"] .flow .lead {font-size:1.0625rem;line-height:1.7;max-width:34rem;}
@media(min-width:960px) and (min-height:720px) {
  [data-mz-section="lfc-oct6-about-leadership-background"] .split > .flow {position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start;}
}
/* Keep the liked image/card language; reduce padding and gaps, never clip copy. */
.formats {padding-block:clamp(2rem,3.5vw,3rem);}
.xcard__body {padding:clamp(1.25rem,2.2vw,2rem) clamp(1.25rem,2.2vw,2rem) 0;}
.xcard h2 {font-size:clamp(1.8rem,2.4vw,2.5rem);line-height:1.15;}
.xcard__eyebrow {margin-bottom:.625rem;}
.xcard__summary {margin-top:.75rem;line-height:1.6;}
.xcard .details {margin-top:1.25rem;gap:.875rem 1rem;}
.xcard__foot {margin-top:0;padding-top:1.25rem;}
.xcard__prompt {margin-bottom:.625rem;}
.xcard .disclosure {margin:1.25rem calc(-1 * clamp(1.25rem,2.2vw,2rem)) 0;padding-inline:clamp(1.25rem,2.2vw,2rem);}
.xcard .disclosure > summary {min-height:52px;}
.xcard__media {min-height:300px;}
/* Give the first-row selector enough width without squeezing its labels. */
.page-contact .contact {grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 clamp(1.5rem,3vw,3rem);}
.page-contact .contact__intro h1 {font-size:clamp(2.25rem,3.4vw,3.5rem);}
@media(max-width:1000px){
  .xcard__media {min-height:0;aspect-ratio:16/9;}
  .page-contact .contact {grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "form" "next";gap:2rem;}
}
@media(max-width:760px){
  [data-mz-section="homepage-client-voice"] > .wrap,.lfc-testimonials {grid-template-columns:minmax(0,1fr);gap:1.5rem;}
  [data-mz-section="homepage-client-voice"] > .wrap > h2 {max-width:none;}
  [data-mz-section="homepage-client-voice"] > .wrap > p {grid-column:1;}
  .lfc-testimonials > h2 {grid-column:1;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;}}
html[data-motion="off"] {scroll-behavior:auto!important;}
/* With the redundant intro removed, both service summaries share the band. */
@media(min-width:701px){.page-experiences .formats__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* October 23: clear, restrained interaction feedback; preference controls win. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .button:not(:disabled),
  html[data-motion="on"] .lfc-interest-option {
    transition: translate 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }
  html[data-motion="on"] .button:not(:disabled):focus-visible,
  html[data-motion="on"] .lfc-interest-option:focus-within {
    translate: 0 -2px;
    box-shadow: 0 5px 16px rgba(38,62,47,.12);
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-motion="on"] .button:not(:disabled):hover,
    html[data-motion="on"] .lfc-interest-option:hover {
      translate: 0 -2px;
      box-shadow: 0 5px 16px rgba(38,62,47,.12);
    }
  }
}