/* ============================================================
   LEEF · leefmassage.com
   Calm, mineral, resort-register design system.
   Palette: Jason's Pantone family (sage ramp + cool graphite),
   extended with a cool paper white and a blue-gray slate.
   Hierarchy comes from scale, tracking, whitespace and surfaces.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display: Newsreader (literary serif) · Sans: Jost (geometric) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..600;1,6..72,200..500&family=Jost:wght@300;400;500&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Brand: Pantone Coated, verified */
  --pms-431:   #5B6770; /* cool graphite  · muted text, form borders */
  --pms-443:   #919D9D; /* pale cool gray · decorative */
  --pms-622:   #B7CDC2; /* pale eucalyptus · signature soft block */
  --pms-623:   #9AB9AD; /* mid sage · color blocks */
  --pms-5507:  #9DB0AC; /* mineral sage-gray · image mattes */
  --pms-5565:  #7F9C90; /* deep sage · surfaces + large type only */
  --pms-7538:  #949A90; /* warm gray-green · rules, texture */

  /* Derived extensions (palette-native) */
  --paper:       #F0F4F2;
  --paper-2:     #E4EBE7;
  --slate:       #2C3940;
  --slate-deep:  #232E34;
  --sage-deep:   #3C5D4F;
  --sage-deeper: #2F4C41;

  /* Semantic */
  --bg:            var(--paper);
  --ink:           var(--slate);
  --ink-72:        rgba(44, 57, 64, 0.82);
  --ink-52:        rgba(44, 57, 64, 0.64);
  --ink-30:        rgba(44, 57, 64, 0.34);
  --muted:         var(--pms-431);
  --accent:        var(--sage-deep);
  --accent-hover:  var(--sage-deeper);
  --hairline:      rgba(44, 57, 64, 0.14);
  --rule:          var(--pms-7538);
  --field-border:  var(--pms-431);
  --on-dark:       #E9EFEC;
  --on-dark-72:    rgba(233, 239, 236, 0.84);
  --on-dark-52:    rgba(233, 239, 236, 0.66);
  --hairline-dark: rgba(233, 239, 236, 0.16);
  --accent-on-dark: var(--pms-622);

  /* Legacy aliases (kept so every existing class keeps working) */
  --hedge:        var(--slate);
  --hedge-deep:   var(--slate-deep);
  --shadow-water: var(--sage-deeper);
  --deep-teal:    var(--sage-deep);
  --pool:         var(--pms-622);
  --white:        var(--paper);
  --white-warm:   var(--paper-2);
  --sand:         var(--paper-2);
  --stone:        var(--pms-7538);
  --ink-70:       var(--ink-72);
  --ink-50:       var(--ink-52);
  --on-dark-70:   var(--on-dark-72);
  --on-dark-45:   var(--on-dark-52);

  /* Type */
  --display: 'Newsreader', 'Times New Roman', Georgia, serif;
  --sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm */
  --nav-h:     clamp(76px, 8vh, 104px);
  --page-x:    clamp(1.5rem, 5vw, 6.5rem);
  --frame-x:   clamp(1rem, 3.5vw, 3.5rem);
  --section-y: clamp(5.5rem, 13vh, 11rem);
  --maxw:      1560px;
  --radius:        0;
  --radius-media:  10px;
  --radius-arch:   50vw 50vw var(--radius-media) var(--radius-media);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ink);
  background: var(--bg);
  letter-spacing: 0.012em;
  overflow-x: hidden;
}
/* A whisper of grain so the pale palette does not read flat. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--pms-622); color: var(--slate); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0;
  font-optical-sizing: auto;
}
.display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
}
.display em, h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: inherit; }

.h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 300; letter-spacing: 0.006em; line-height: 1.1; }
.h2 { font-size: clamp(1.85rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: 0.008em; line-height: 1.16; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.24; }

/* Tracked caps ladder (Ojai register): the smaller the type, the wider the track. */
.caps    { font-family: var(--sans); text-transform: uppercase; font-weight: 400; letter-spacing: 0.16em; }
.caps-sm { font-family: var(--sans); text-transform: uppercase; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; }

.lede {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.5;
  letter-spacing: 0.004em;
  color: var(--ink);
}

.kicker {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
}
.kicker::before { content: none; }
.kicker.center { justify-content: center; }

.body-lg { font-size: 1.125rem; line-height: 1.8; color: var(--ink-72); }
p.muted { color: var(--ink-72); }
.on-dark { color: var(--on-dark); }
.on-dark .kicker { color: var(--accent-on-dark); }
.on-dark p, .on-dark .body-lg, .on-dark .lede { color: var(--on-dark-72); }
.on-dark .lede { color: var(--on-dark); }

/* ---------- Layout ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding-left: var(--page-x); padding-right: var(--page-x); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(3.5rem, 8vh, 6.5rem); padding-bottom: clamp(3.5rem, 8vh, 6.5rem); }

/* Surfaces */
.bg-hedge, .band--slate { background: var(--slate); color: var(--on-dark); }
.bg-sand,  .band--paper2 { background: var(--paper-2); }
.bg-white-warm { background: var(--paper-2); }
.band--sage   { background: var(--pms-622); color: var(--slate); }
.band--sage-2 { background: var(--pms-623); color: var(--slate); }
.band--wash { position: relative; isolation: isolate; }
.band--wash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(127, 156, 144, 0.2); }

.hr { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.on-dark .hr, .hr-dark { background: var(--hairline-dark); }
.rule { height: 1px; background: var(--rule); border: 0; opacity: 0.7; margin: 0; }

.grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.two { grid-template-columns: 1fr 1fr; }
.two-40-60 { grid-template-columns: 4fr 6fr; }
.two-60-40 { grid-template-columns: 6fr 4fr; }
.three { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); }
.four { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.align-center { align-items: center; }
.align-start { align-items: start; }
.align-end { align-items: end; }
.center-col { max-width: 62rem; margin: 0 auto; text-align: center; }

/* ---------- Buttons: hard-edged, tracked caps ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.15rem 2.2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
  cursor: pointer;
  line-height: 1;
}
.btn .arrow { transition: transform 0.45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--solid { background: var(--slate); color: var(--paper); }
.btn--solid:hover { background: var(--sage-deeper); }
.btn--light { background: var(--paper); color: var(--slate); }
.btn--light:hover { background: var(--pms-622); }
.btn--pool, .btn--sage { background: var(--pms-622); color: var(--slate); }
.btn--pool:hover, .btn--sage:hover { background: var(--pms-623); }
.btn--ghost { background: transparent; border-color: var(--pms-431); color: var(--ink); }
.btn--ghost:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.on-dark .btn--ghost { border-color: var(--hairline-dark); color: var(--on-dark); }
.on-dark .btn--ghost:hover { background: var(--pms-622); border-color: var(--pms-622); color: var(--slate); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link-arrow .arrow { transition: transform 0.4s var(--ease); }
.link-arrow:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--accent-on-dark); border-color: var(--hairline-dark); }
.on-dark .link-arrow:hover { color: var(--on-dark); border-color: var(--on-dark); }

/* ============================================================
   NAV · solid paper from scroll zero
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2rem);
  min-height: var(--nav-h);
  padding: 0.75rem var(--page-x);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: min-height 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.scrolled, .nav.solid {
  border-bottom-color: var(--hairline);
}
.nav.scrolled { min-height: calc(var(--nav-h) * 0.8); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.9rem); }
.nav__actions { display: flex; align-items: center; gap: 1.35rem; justify-content: flex-end; }
.nav a.navlink {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink); opacity: 0.82;
  transition: opacity 0.3s var(--ease);
  position: relative; padding-bottom: 4px;
}
/* Center-out underline sweep */
.nav a.navlink::before {
  content: ""; position: absolute; height: 1px; bottom: 0; left: 51%; right: 51%;
  background: currentColor; transition: left 0.35s var(--ease), right 0.35s var(--ease);
}
.nav a.navlink:hover { opacity: 1; }
.nav a.navlink:hover::before, .nav a.navlink.active::before { left: 0; right: 0; }
.nav a.navlink.active { opacity: 1; }
.nav.solid a.navlink { color: var(--ink); }

.wordmark { display: flex; align-items: center; justify-content: flex-start; margin-right: auto; }
.wordmark img { height: 72px; width: auto; display: block; transition: height 0.4s var(--ease); }
.nav.scrolled .wordmark img { height: 60px; }
.wordmark .logo-dark { display: block; }
.wordmark .logo-light { display: none; }

.nav__cta {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--slate); color: var(--paper); background: var(--slate);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
  white-space: nowrap;
}
.nav__cta:hover, .nav.solid .nav__cta:hover { background: var(--sage-deeper); border-color: var(--sage-deeper); color: var(--paper); }
.nav.solid .nav__cta { background: var(--slate); border-color: var(--slate); color: var(--paper); }

/* burger */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), background-color 0.4s var(--ease); }
.nav.solid .burger span { background: var(--ink); }
/* Open state: bars 1 and 3 meet in the middle as an X, bar 2 fades out. The
   nav keeps its own paper background above the panel (nav z-index 100 vs 99),
   so the bars stay --ink here rather than going light. */
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--slate); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--page-x);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-slow), visibility 0s linear 0.6s;
  visibility: hidden;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 0.6s var(--ease-slow), visibility 0s linear 0s; }
.mobile-menu a {
  font-family: var(--display); font-size: clamp(1.75rem, 7vw, 2.8rem); font-weight: 300;
  letter-spacing: 0.01em;
  padding: 0.35rem 0; opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
/* Stagger applies only on the way in. On the base (closed) state the delays
   made links linger past the 0.6s panel slide and get cut off mid-fade.
   Covers 10 links; the menu currently has 8. */
.mobile-menu.open a:nth-child(1) { transition-delay: .12s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .18s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .24s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .30s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .36s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .42s; }
.mobile-menu.open a:nth-child(7) { transition-delay: .48s; }
.mobile-menu.open a:nth-child(8) { transition-delay: .54s; }
.mobile-menu.open a:nth-child(9) { transition-delay: .60s; }
.mobile-menu.open a:nth-child(10) { transition-delay: .66s; }
.mobile-menu a em { font-style: italic; color: var(--accent-on-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--slate);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,57,64,0.22), rgba(44,57,64,0.04) 45%, rgba(44,57,64,0.38));
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(2rem, 4.5vh, 3.25rem);
  padding-top: 8rem;
}
.hero__inner .shell { width: 100%; max-width: none; padding-left: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); }
.hero h1 { color: var(--on-dark); max-width: 22ch; }
.hero .kicker { color: var(--accent-on-dark); margin-bottom: 1.75rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero__headline {
  color: var(--on-dark);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.005em;
  max-width: none;
}
.hero__eyebrow {
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-on-dark);
}
.hero__scroll {
  position: absolute; bottom: 2rem; right: var(--page-x); z-index: 3;
  font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--on-dark-52); display: flex; align-items: center; gap: 0.75rem;
}
.hero__scroll .line { width: 1px; height: 40px; background: var(--on-dark-52); position: relative; overflow: hidden; }
.hero__scroll .line::after {
  content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 40px;
  background: var(--pms-622); animation: scrolldot 2.6s var(--ease) infinite;
}
@keyframes scrolldot { 0%{ top:-40px } 60%,100%{ top:40px } }

/* --- H1 "Cream Portal": paper masthead, video aperture, wordmark settles --- */
.hero--portal {
  align-items: center; justify-content: center;
  padding-top: var(--nav-h);
  min-height: 100vh; min-height: 100svh;
}
.hero--portal .hero__media { top: var(--nav-h); }
.hero--portal .hero__media::after {
  background:
    radial-gradient(70% 55% at 50% 52%, rgba(35,46,52,0.42), rgba(35,46,52,0) 72%),
    linear-gradient(180deg, rgba(44,57,64,0.3), rgba(44,57,64,0.12) 42%, rgba(44,57,64,0.44));
}
.hero__mark {
  position: relative; z-index: 2;
  display: grid; place-items: center; text-align: center;
  padding: 0 var(--page-x);
}
.hero__mark span {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 8.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--on-dark);
  text-shadow: 0 0 2.5rem rgba(20, 28, 32, 0.5);
  animation: markSettle 1.5s var(--ease-slow) 0.2s both;
}
.hero__mark small {
  display: block;
  margin-top: clamp(1.1rem, 2.4vh, 1.9rem);
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--on-dark);
  text-shadow: 0 1px 1.25rem rgba(20, 28, 32, 0.7);
  animation: markFade 1.2s var(--ease-slow) 1.05s both;
}
@keyframes markSettle {
  from { transform: scale(1.5); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes markFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   REUSABLE PIECES
   ============================================================ */
.eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title { max-width: 22ch; }
.measure { max-width: 62ch; }

.figure { position: relative; overflow: hidden; background: var(--pms-5507); border-radius: var(--radius-media); }
.figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.02); transition: transform 1.4s var(--ease-slow); }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--square { aspect-ratio: 1 / 1; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--band { aspect-ratio: 21 / 9; }
.figure--arch { aspect-ratio: 3 / 4; border-radius: var(--radius-arch); }
a.figure:hover img, .hover-zoom:hover img { transform: scale(1.04); }

/* Settle reveal: image visible at once, easing from a slight zoom to rest.
   (Replaced the curtain wipe, which read as slow image loading.) */
.wipe { position: relative; overflow: hidden; }
.wipe img { transform: scale(1.07); transition: transform 1.8s var(--ease-slow); }
.wipe.in img,
.reveal.in .wipe img { transform: scale(1); }
.reveal.in .wipe.hover-zoom:hover img,
a.figure:hover .wipe img,
.wipe.in.hover-zoom:hover img { transform: scale(1.04); }

.caption { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.9rem; }
.on-dark .caption { color: var(--on-dark-72); }

/* Welcome (signature) */
.welcome { text-align: center; max-width: 60rem; margin: 0 auto; }
.welcome p { font-family: var(--display); font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.6; color: var(--ink-72); margin: 0 0 1.5rem; letter-spacing: 0.004em; }
.welcome p:first-of-type { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; color: var(--ink); }
.welcome p em { font-style: italic; color: inherit; }
.signature { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--ink); margin-top: 2.5rem; }

/* Hanging numeral index rows */
.feature-list { display: grid; gap: 0; }
.feature-row {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline; padding: clamp(1.75rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--rule);
}
.on-dark .feature-row { border-color: var(--hairline-dark); }
.feature-row:last-child { border-bottom: 1px solid var(--rule); }
.on-dark .feature-row:last-child { border-color: var(--hairline-dark); }
.feature-row .num { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--muted); }
.on-dark .feature-row .num { color: var(--accent-on-dark); }
.feature-row h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 400; }
.feature-row p { margin: 0.6rem 0 0; max-width: 46ch; color: var(--ink-72); }
.on-dark .feature-row p { color: var(--on-dark-72); }

/* Three-up cards */
.card { display: flex; flex-direction: column; }
.card__media { margin-bottom: 1.6rem; }
.card__label { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.on-dark .card__label { color: var(--accent-on-dark); }
.card h3 { margin-bottom: 0.85rem; }
.card p { color: var(--ink-72); margin: 0 0 1.75rem; flex-grow: 1; }
.on-dark .card p { color: var(--on-dark-72); }

/* Step blocks (the path into LEEF) */
.step { display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(2rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--rule); }
.step:last-of-type { border-bottom: 1px solid var(--rule); }
.step__num { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--muted); line-height: 1; }
.step__body p { color: var(--ink-72); max-width: 58ch; }
.step__body h3 { margin-bottom: 0.9rem; }

/* Simple info blocks */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.info-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--paper-2); }
.info-card .kicker { margin-bottom: 1.25rem; }
.info-card h3 { font-size: 1.4rem; font-weight: 400; margin-bottom: 0.75rem; }
.info-card p { color: var(--ink-72); margin: 0; }

/* Offer cards (kept for compatibility) */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.offer { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(2rem, 3.5vw, 3rem); display: flex; flex-direction: column; }
.offer.featured { background: var(--slate); color: var(--on-dark); border-color: transparent; }
.offer.featured p, .offer.featured .offer__meta { color: var(--on-dark-72); }
.offer__tag { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.offer h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; margin-bottom: 0.4rem; }
.offer p { color: var(--ink-72); margin: 0 0 2rem; flex-grow: 1; }

/* Prep steps */
.prep { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.prep-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.prep-item .dot {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--pms-431); color: var(--muted);
  display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: 1.1rem;
}
.on-dark .prep-item .dot { border-color: var(--pms-622); color: var(--accent-on-dark); }
.prep-item h4 { font-family: var(--display); font-size: 1.2rem; font-weight: 400; margin-bottom: 0.35rem; }
.prep-item p { margin: 0; color: var(--ink-72); font-size: 1rem; }
.on-dark .prep-item p { color: var(--on-dark-72); }
.on-dark .prep-item h4 { color: var(--on-dark); }

/* Pull quote */
.pullquote {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1.34; letter-spacing: 0.004em;
  color: var(--ink); max-width: 26ch; margin: 0;
}
.on-dark .pullquote { color: var(--on-dark); }
.pullquote__by { display: block; margin-top: 1.4rem; font-family: var(--sans); font-style: normal; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.on-dark .pullquote__by { color: var(--on-dark-72); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 1.5vw, 1.5rem); grid-auto-flow: dense; }
.gallery-grid .figure { margin: 0; }
.g-4 { grid-column: span 4; } .g-5 { grid-column: span 5; } .g-6 { grid-column: span 6; }
.g-7 { grid-column: span 7; } .g-8 { grid-column: span 8; }
.g-tall { aspect-ratio: 3/4; } .g-wide { aspect-ratio: 16/10; } .g-sq { aspect-ratio: 1/1; }
.figure .fig-tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
  opacity: 0; transform: translateY(8px); transition: 0.5s var(--ease);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.figure:hover .fig-tag { opacity: 1; transform: translateY(0); }

.masonry { column-count: 3; column-gap: clamp(0.75rem, 1.5vw, 1.5rem); }
.masonry .figure { break-inside: avoid; margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem); display: block; cursor: pointer; }
.masonry .figure img { width: 100%; height: auto; }
.masonry .figure:hover img { transform: scale(1.04); }
@media (max-width: 900px){ .masonry { column-count: 2; } }
@media (max-width: 560px){ .masonry { column-count: 1; } }

/* Lightbox slideshow */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(35, 46, 52, 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
.lightbox__stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox__img {
  max-width: min(90vw, 1100px); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-media);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  animation: lbfade 0.35s var(--ease);
}
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__cap { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; color: var(--on-dark-72); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }
.lightbox__btn {
  position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(233,239,236,0.32); background: rgba(44,57,64,0.5); color: var(--on-dark);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__btn:hover { background: var(--pms-622); color: var(--slate); border-color: var(--pms-622); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .lightbox__img { max-width: 94vw; max-height: 74vh; }
  .lightbox__close { top: 1rem; right: 1rem; }
  .lightbox__btn { width: 46px; height: 46px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.5rem; transform: none; }
  .lightbox__prev { left: calc(50% - 3.4rem); right: auto; }
  .lightbox__next { right: calc(50% - 3.4rem); left: auto; }
}

/* ---------- Muted autoplay video block ---------- */
.media-video { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--slate); aspect-ratio: 16/9; }
.media-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Click-to-play panel (kept) */
.video-panel { position: relative; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 16/9; background: var(--slate); }
.video-panel img { width:100%; height:100%; object-fit: cover; opacity: 0.8; }
.video-panel[data-video] { cursor: pointer; }
.video-panel .vp-video { width:100%; height:100%; object-fit: cover; display:block; }
.video-panel::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(to top, rgba(44,57,64,0.5), rgba(44,57,64,0.1) 55%); transition: opacity 0.4s var(--ease); }
.video-panel.playing::after { opacity:0; }
.video-panel.playing .play, .video-panel.playing .vp-label { opacity:0; pointer-events:none; }
.video-panel .play, .video-panel .vp-label { transition: opacity 0.3s var(--ease); }
.video-panel .play { position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.video-panel .play button {
  width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(233,239,236,0.6);
  background: rgba(233,239,236,0.12); color: var(--on-dark);
  display:grid; place-items:center; transition: 0.5s var(--ease);
}
.video-panel .play button:hover { background: var(--pms-622); border-color: var(--pms-622); color: var(--slate); }
.video-panel .play button svg { width: 26px; height: 26px; margin-left: 4px; }
.video-panel .vp-label { position:absolute; left:1.5rem; bottom:1.5rem; z-index:2; color: var(--on-dark); }
.video-panel .vp-label .k { font-family: var(--sans); font-size:0.66rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-on-dark); }
.video-panel .vp-label .t { font-family:var(--display); font-size:1.5rem; font-weight:300; }

/* ============================================================
   FAQ / accordions
   ============================================================ */
.faq { border-top: 1px solid var(--hairline); }
.on-dark .faq { border-color: var(--hairline-dark); }
.faq details { border-bottom: 1px solid var(--hairline); }
.on-dark .faq details { border-color: var(--hairline-dark); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.6rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 400;
  letter-spacing: 0.006em;
  color: var(--ink); transition: color 0.3s var(--ease);
}
.on-dark .faq summary { color: var(--on-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.on-dark .faq summary:hover { color: var(--accent-on-dark); }
.faq .sign { flex: none; width: 24px; height: 24px; position: relative; transition: transform 0.5s var(--ease); }
.faq .sign::before, .faq .sign::after { content: ""; position: absolute; background: var(--muted); transition: 0.4s var(--ease); }
.on-dark .faq .sign::before, .on-dark .faq .sign::after { background: var(--accent-on-dark); }
.faq .sign::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq .sign::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.faq details[open] .sign::after { transform: translateX(-50%) scaleY(0); }
.faq details[open] .sign { transform: rotate(180deg); }
.faq .answer { overflow: hidden; }
.faq .answer p { margin: 0 0 1.5rem; max-width: 66ch; color: var(--ink-72); font-size: 1.02rem; }
.on-dark .faq .answer p { color: var(--on-dark-72); }
.faq details[open] .answer p:first-child { margin-top: -0.25rem; }

/* Long bios behind a Read Bio accordion */
.bio { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bio + .bio { margin-top: clamp(3.5rem, 8vw, 7rem); }
.bio__role { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.bio__intro { color: var(--ink-72); max-width: 52ch; }
.bio .faq { margin-top: 1.75rem; }
.bio .faq .answer p { max-width: 62ch; }
@media (max-width: 980px) { .bio { grid-template-columns: 1fr; } }

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: 1.6rem; }
.field { display: grid; gap: 0.55rem; }
.field label { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.on-dark .field label { color: var(--on-dark-72); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink);
  background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius);
  padding: 0.85rem 0.9rem; transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.on-dark .field input, .on-dark .field textarea, .on-dark .field select {
  color: var(--on-dark); background: rgba(233,239,236,0.06); border-color: rgba(233,239,236,0.34);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sage-deep); }
.on-dark .field input:focus, .on-dark .field textarea:focus, .on-dark .field select:focus { border-color: var(--pms-622); }
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-30); }
.on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: var(--on-dark-52); }
.field select {
  -webkit-appearance: none; appearance: none; width: 100%;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235B6770' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}
.field select option { color: #2C3940; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 560px) {
  .four { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.9rem; color: var(--ink-52); }

/* Contact page: sessions are booked with a practitioner, never through the form.
   Deliberately louder than .form-note, because the whole job of this line is to
   be read BEFORE someone types a booking request into the message box.
   Link uses --sage-deeper, not the usual --sage-deep: on this pale sage panel
   --sage-deep only reaches 4.36:1, under AA. --sage-deeper gives 5.61:1. */
.booking-note {
  background: var(--pms-622);
  color: var(--slate);
  border-left: 3px solid var(--sage-deeper);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.booking-note a { color: var(--sage-deeper); text-decoration: underline; }
.on-dark .form-note { color: var(--on-dark-52); }
.form-status { font-size: 0.95rem; margin: 0.25rem 0 0; opacity: 0; transition: opacity .5s var(--ease); }
.form-panel { background: var(--paper-2); border: 1px solid var(--hairline); padding: clamp(1.75rem, 3.5vw, 3rem); }
.on-dark .form-panel { background: rgba(233,239,236,0.05); border-color: var(--hairline-dark); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { position: relative; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__media::after { content:""; position:absolute; inset:0; background: rgba(44,57,64,0.82); }
.cta-band__inner { position: relative; z-index: 2; text-align: center; max-width: 46rem; margin: 0 auto; color: var(--on-dark); }
.cta-band h2 { color: var(--on-dark); margin-bottom: 1.5rem; }
.cta-band .kicker { color: var(--accent-on-dark); }
.cta-band p { color: var(--on-dark-72); margin: 0 auto 2.5rem; max-width: 44ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--slate); color: var(--on-dark); padding-top: clamp(4rem, 8vh, 7rem); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; }
.footer .wordmark-lg { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 300; letter-spacing: 0.18em; color: var(--on-dark); line-height: 1; text-transform: uppercase; }
.footer-logo { height: 52px; width: auto; display: block; }
.footer .tag { font-family: var(--display); font-style: italic; color: var(--accent-on-dark); font-size: 1.15rem; margin-top: 1rem; }
.footer-desc { margin: 1.25rem 0 0; max-width: 40ch; color: var(--on-dark-72); font-size: 0.95rem; line-height: 1.7; }
.footer h5 { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-dark-52); margin: 0 0 1.25rem; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer ul a { color: var(--on-dark-72); font-size: 0.95rem; transition: color 0.3s var(--ease); }
.footer ul a:hover { color: var(--accent-on-dark); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 2rem 0; border-top: 1px solid var(--hairline-dark); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--on-dark-52); }
.footer__legal a { color: var(--on-dark-72); }
.footer__legal a:hover { color: var(--accent-on-dark); }

/* LEEF badge marks */
.leef-badge {
  position: relative; display: grid; place-items: center; flex: none;
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--slate); color: var(--paper);
  font-family: var(--sans); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.14em;
}
.leef-badge span { text-indent: 0.14em; }
.leef-badge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(240,244,242,0.9); }
.leef-badge--lg { width: 9rem; height: 9rem; font-size: 2.3rem; }
.leef-badge--footer { width: 4rem; height: 4rem; font-size: 1rem; background: transparent; color: var(--on-dark); margin-top: 1.75rem; }
.leef-badge-img { display: block; width: 5rem; height: 5rem; }
.leef-badge-img--lg { width: clamp(7rem, 14vw, 10rem); height: clamp(7rem, 14vw, 10rem); }
.leef-badge-img--footer { width: 4.5rem; height: 4.5rem; margin-top: 0; }
.leef-badge-img--hero { width: clamp(84px, 12vw, 132px); height: auto; }

/* Discover list (dark) */
.discover-list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.discover-list li {
  padding: 1.15rem 0; border-top: 1px solid var(--hairline-dark);
  font-family: var(--display); font-weight: 300; letter-spacing: 0.004em;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--on-dark);
}
.discover-list li:last-child { border-bottom: 1px solid var(--hairline-dark); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* ---------------------------------------------------------------------------
   Share page (/leef-in-my-city): the Want LEEF form on its own, for the team to
   send straight to someone. No nav and no footer on purpose - it exists to be
   filled in, not browsed - so it carries its own centred layout and a way back
   to the site at the end.
   --------------------------------------------------------------------------- */
.share-page { background: var(--paper); position: relative; }
/* Language toggle sits at the page's top right, where it is on every other page.
   The section's top padding is set below to clear it, so it can never land on
   top of the badge on a narrow screen. */
.share-lang {
  position: absolute;
  top: clamp(0.9rem, 2.5vh, 1.5rem);
  right: var(--page-x);
  z-index: 2;
}
.share-page .section { padding-block: clamp(4.5rem, 9vh, 6rem) clamp(2.5rem, 7vh, 5rem); }
.shell--narrow { max-width: 560px; margin-inline: auto; padding-inline: var(--page-x); }
/* Block, not inline-block: as an inline box the badge shares a line with the
   kicker that follows it, and the kicker lands on the badge's baseline - which
   reads as a stray indent. width:max-content keeps the click target on the logo
   rather than stretching across the column. */
.share-brand { display: block; width: max-content; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.share-brand img { display: block; width: 72px; height: auto; }
.share-form { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.share-back { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
/* Anchor targets: the nav is position:fixed, so a section linked directly would
   otherwise land underneath it. Applies to any section given an id, not just
   today's, so the next anchor works without remembering this. */
.section[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .wipe img { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.pagehead { position: relative; padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem)); padding-bottom: clamp(2.5rem, 6vh, 4.5rem); overflow: hidden; }
.pagehead .kicker { margin-bottom: 1.4rem; }
.pagehead h1 { max-width: 18ch; }
.pagehead p { max-width: 50ch; margin-top: 1.6rem; }
.pagehead--center { text-align: center; }
.pagehead--center h1, .pagehead--center p { margin-left: auto; margin-right: auto; }

/* Interior hero band: a framed photograph under the masthead */
.pagehero { padding-top: var(--nav-h); background: var(--paper); }
.pagehero__media { position: relative; height: clamp(320px, 56svh, 620px); overflow: hidden; background: var(--pms-5507); }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.02); }
.pagehero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,57,64,0.16), rgba(44,57,64,0.12) 45%, rgba(44,57,64,0.62)); }
.pagehero__label {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(1.75rem, 5vh, 3.5rem);
  text-align: center; color: var(--on-dark);
  font-family: var(--sans); font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.testimonials-cols { columns: 3 340px; column-gap: clamp(1rem, 2vw, 1.75rem); }
.tcard { break-inside: avoid; -webkit-column-break-inside: avoid; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.25rem); margin: 0 0 clamp(1rem, 2vw, 1.75rem); }
.testimonials-cols .tcard { display: inline-block; width: 100%; }
.tcard__mark { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; height: 1.4rem; color: var(--pms-5565); }
.tcard__quote { color: var(--ink-72); line-height: 1.75; font-size: 1.02rem; margin: 0 0 1.25rem; }
.tcard__name { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.on-dark .tcard { background: rgba(233,239,236,0.05); border-color: var(--hairline-dark); }
.on-dark .tcard__quote { color: var(--on-dark-72); }
.on-dark .tcard__name { color: var(--accent-on-dark); }
@media (max-width: 880px) { .tgrid { grid-template-columns: 1fr; } .testimonials-cols { columns: 2 300px; } }
@media (max-width: 600px) { .testimonials-cols { columns: 1; } }

/* ---- Practitioner cards ---- */
.prac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.prac-card { background: transparent; border: 0; padding: 0; }
.prac-card .figure { margin-bottom: 1.5rem; }
.prac-card h3 { margin: 0 0 0.4rem; }
.prac-card .prac-loc { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.prac-card p { color: var(--ink-72); }
@media (max-width: 700px) { .prac-grid { grid-template-columns: 1fr; } }

/* ---- Language toggle (EN / FR) ---- */
.lang-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; }
.lang-toggle a, .lang-toggle .on, .lang-toggle .sep,
.nav.solid .lang-toggle a, .nav.solid .lang-toggle .on, .nav.solid .lang-toggle .sep { color: var(--ink); }
.lang-toggle a { opacity: 0.5; transition: opacity 0.3s var(--ease); }
.lang-toggle a:hover { opacity: 1; }
.lang-toggle .on { opacity: 1; }
.lang-toggle .sep { opacity: 0.3; }

/* ---- Language switcher (EN / ES / FR) ---- */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1L4.5 4.5L8 1' fill='none' stroke='%232C3940' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 9px 6px;
  border: 0;
  border-bottom: 1px solid rgba(44, 57, 64, 0.18);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 40px;
  padding: 0 1.15rem 0 0.1rem;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.nav.solid .lang-select { color: var(--ink); }
.lang-select:hover { border-bottom-color: rgba(44, 57, 64, 0.45); }
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang-select option {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  letter-spacing: normal;
  text-transform: none;
}

/* ---- Text wordmark fallback (nav) ---- */
.wordmark.brandmark { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: 0.34em; color: var(--ink); padding-left: 0.34em; }
.nav.solid .wordmark.brandmark { color: var(--ink); }

/* ---- Legal prose ---- */
.legal-prose { max-width: 68ch; }
.legal-meta { font-family: var(--sans); color: var(--muted); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 2.75rem; }
.legal-prose h2 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.3; margin: 2.75rem 0 1rem; }
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose p, .legal-prose li { color: var(--ink-72); line-height: 1.8; font-size: 1.02rem; }
.legal-prose p { margin: 0 0 1.15rem; }
.legal-prose ul { margin: 0 0 1.4rem; padding-left: 1.15rem; }
.legal-prose li { margin: 0 0 0.5rem; }
.legal-prose strong { color: var(--ink); font-weight: 500; }
.legal-prose a { color: var(--accent); border-bottom: 1px solid var(--hairline); }
.legal-prose a:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .nav__links { display: none; }
  .nav__actions .nav__cta { display: none; }
  .burger { display: flex; }
  .nav .wordmark img { height: 60px; }
}
@media (max-width: 1024px) {
  .two, .two-40-60, .two-60-40, .three, .offer-grid, .info-grid, .prep, .footer__top { grid-template-columns: 1fr; }
  .four { grid-template-columns: repeat(2, 1fr); }
  .footer__top { gap: 2.5rem; }
  .gallery-grid .figure { grid-column: span 6 !important; }
}
@media (max-width: 620px) {
  .gallery-grid .figure { grid-column: span 12 !important; }
  .feature-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .step { grid-template-columns: 1fr; gap: 0.75rem; }
  .hero__scroll { display: none; }
  .btn { padding: 1rem 1.6rem; letter-spacing: 0.14em; }
  .bio { gap: 2rem; }
}

/* Testimonial attribution line */
.tcard__meta { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }

/* ============================================================
   PRACTITIONER MAP (find-a-leef-practitioner, all languages)
   Inline equirectangular SVG (no map library, no tiles, no
   external requests). Markers and filter chips are generated
   at runtime from the LEEF_CITIES array in the page, so adding
   a city is a one-line edit. Without JavaScript the map still
   draws and every practitioner card stays visible.
   ============================================================ */
.pracmap { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.pracmap__intro { max-width: 46ch; color: var(--ink-72); margin: 1.15rem 0 clamp(1.5rem, 3.5vw, 2.5rem); }

.pracmap__frame {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-media);
  padding: clamp(0.75rem, 2vw, 1.75rem);
}
.pracmap__stage { position: relative; }
.pracmap__svg { display: block; width: 100%; height: auto; }
.pracmap__land { fill: var(--pms-5507); fill-opacity: 0.52; }

/* Marker layer sits exactly over the SVG box, so percentages map
   straight onto the projection: left = x / 1000, top = y / 420. */
.pracmap__markers { position: absolute; inset: 0; }
/* --hit-dy is set by main.js: where two cities sit closer together than a
   comfortable touch target, the 44px hit boxes are nudged apart while the
   visible dot and its label stay exactly on their true coordinates. */
.pracmap__pin {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, calc(-50% + var(--hit-dy, 0px)));
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pracmap__dotwrap {
  display: grid;
  place-items: center;
  transform: translateY(calc(-1 * var(--hit-dy, 0px)));
}
.pracmap__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sage-deep);
  box-shadow: 0 0 0 4px rgba(60, 93, 79, 0.16);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}
.pracmap__pin:hover .pracmap__dot { transform: scale(1.24); box-shadow: 0 0 0 7px rgba(60, 93, 79, 0.2); }
.pracmap__pin[aria-pressed="true"] .pracmap__dot {
  background: var(--sage-deeper);
  transform: scale(1.34);
  box-shadow: 0 0 0 8px rgba(60, 93, 79, 0.26);
}
.pracmap__pin:focus { outline: none; }
.pracmap__pin:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 1px; }
.pracmap__pin:focus-visible .pracmap__dot { transform: scale(1.24); box-shadow: 0 0 0 7px rgba(60, 93, 79, 0.2); }

.pracmap__label {
  position: absolute;
  left: calc(50% + 15px);
  top: 50%;
  transform: translateY(calc(-50% + var(--label-dy, 0px) - var(--hit-dy, 0px)));
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-52);
  pointer-events: none;
  transition: color 0.4s var(--ease);
}
.pracmap__pin:hover .pracmap__label { color: var(--ink); }
.pracmap__pin[aria-pressed="true"] .pracmap__label { color: var(--sage-deeper); }

/* Filter chips: the reliable control on touch screens, and the
   "show all" reset. Generated from the same city array. */
.pracmap__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.15rem, 2.5vw, 1.6rem); }
.pracmap__filters:empty { display: none; }
.pracmap__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pracmap__chip:hover { border-color: var(--sage-deep); color: var(--ink); }
.pracmap__chip[aria-pressed="true"] { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--paper); }
.pracmap__chip:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* Filtered results */
.prac-results__title { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.prac-grid { transition: opacity 0.3s var(--ease); }
.prac-grid.is-swapping { opacity: 0; }
.prac-card[hidden] { display: none; }

@media (max-width: 860px) {
  .pracmap__label { display: none; }
}
@media (max-width: 520px) {
  .pracmap__chip { padding: 0 1rem; font-size: 0.64rem; letter-spacing: 0.16em; }
  .pracmap__dot { width: 10px; height: 10px; }
}

/* Practitioner contact details */
.prac-contact { display: grid; gap: 0.55rem; margin: 1.25rem 0 0; }
.prac-contact > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.9rem; align-items: baseline; }
.prac-contact dt { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.prac-contact dd { margin: 0; font-size: 0.98rem; }
.prac-contact a { color: var(--accent); border-bottom: 1px solid rgba(60,93,79,0.28); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.prac-contact a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
@media (max-width: 480px) { .prac-contact > div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Inline links inside FAQ answers: clearly clickable */
.faq .answer a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(60, 93, 79, 0.45);
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.faq .answer a:hover,
.faq .answer a:focus-visible { color: var(--accent-hover); text-decoration-color: currentColor; }