/* ============================================================
   Entheo Clinic — Design System
   Palette + type per Entheo Brand Kit v1
   ============================================================ */

:root {
  /* Brand palette */
  --gold: #C7921E;
  --gold-deep: #A97412;
  --gold-soft: #E5C978;
  --ivory: #F7F5F1;
  --pearl: #ECE9E2;
  --stone: #D8D1C7;
  --mist: #DCE8F2;
  --fog: #B9CBD8;
  --slate: #6E8597;
  --ink: #243240;
  --ink-soft: #3D4E5E;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-prose: Georgia, "Times New Roman", serif;

  /* Rhythm */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 18px 50px rgba(36, 50, 64, 0.10);
  --shadow-card: 0 6px 24px rgba(36, 50, 64, 0.06);

  --max-width: 1120px;
  --header-h: 76px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 100%;
}
body {
  margin: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
.site-header,
.site-footer { flex: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 var(--space-sm); }
ul, ol { padding-left: 1.3em; margin: 0 0 var(--space-sm); }
li { margin-bottom: .45em; }
strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--stone); margin: var(--space-lg) 0; }

::selection { background: var(--gold-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--ink); color: var(--ivory);
  padding: 10px 18px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { transform: translateY(0); color: var(--ivory); }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.narrow { max-width: 780px; }

main,
section {
  width: 100%;
}
section { padding: clamp(56px, 8vw, 104px) 0; }
section.tight { padding: clamp(36px, 5vw, 64px) 0; }
section[data-section-spacing="compact"] { padding-top: 40px; padding-bottom: 40px; }
section[data-section-spacing="normal"] { padding-top: 88px; padding-bottom: 88px; }
section[data-section-spacing="large"] { padding-top: 148px; padding-bottom: 148px; }
.section-pearl { background: var(--pearl); }
.section-ink { background: var(--ink); color: var(--ivory); }
.section-ink h2, .section-ink h3 { color: var(--ivory); }
.section-ink p { color: var(--fog); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-sm);
}
.lede {
  font-family: var(--font-prose);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--slate);
  line-height: 1.75;
  max-width: 46em;
}
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--slate); border-color: var(--fog); }
.btn-secondary:hover { color: var(--ink); border-color: var(--slate); }
.btn-ghost-light { background: transparent; color: var(--ivory); border-color: rgba(247,245,241,.45); }
.btn-ghost-light:hover { color: #fff; border-color: var(--gold-soft); }
.btn-lg { padding: 17px 38px; font-size: 1.02rem; }
.btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(247, 245, 241, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(216, 209, 199, .6);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(36,50,64,.07); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand svg, .brand img { width: 42px; height: 42px; flex: none; }
.brand-name {
  font-family: Didot, "Bodoni 72", "Bodoni 72 Smallcaps", var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.main-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.main-nav a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--gold-deep); }
.main-nav a[aria-current="page"] { color: var(--gold-deep); border-bottom-color: var(--gold); }
.header-cta { flex: none; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.header-cta .btn { padding: 11px 24px; font-size: .88rem; }
.header-portal-link {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.header-portal-link:hover { color: var(--gold-deep); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 10px; margin-right: -10px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--ink); margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-menu {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--ivory);
  z-index: 99;
  padding: var(--space-lg) clamp(20px, 6vw, 40px);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--pearl);
}
.mobile-menu a[aria-current="page"] { color: var(--gold-deep); }
.mobile-menu .btn { margin-top: var(--space-md); font-size: 1rem; border-bottom: none; font-family: var(--font-body); }
.mobile-menu .btn-primary,
.mobile-menu .btn-primary:hover { color: #fff; }
html.menu-open,
body.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.menu-open {
  position: fixed;
  top: var(--menu-scroll-offset, 0);
  right: 0;
  left: 0;
  width: 100%;
}
body.menu-open .site-header {
  position: fixed;
  inset: 0 0 auto;
  transform: translateY(0);
}
/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 11vw, 150px) 0 clamp(64px, 9vw, 120px);
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(229, 201, 120, .28), transparent 62%),
    radial-gradient(900px 500px at 12% 108%, rgba(220, 232, 242, .55), transparent 60%),
    var(--ivory);
  overflow: hidden;
}
.hero-mark {
  position: absolute;
  right: -110px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(340px, 42vw, 620px);
  opacity: .09;
  pointer-events: none;
}
.hero-content { position: relative; max-width: 640px; }
.hero h1 { margin-bottom: var(--space-md); }
.hero .lede { margin-bottom: var(--space-lg); }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--stone);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: var(--space-md);
}
.hero-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
.hero-note {
  color: var(--slate);
  font-family: var(--font-body);
  font-size: clamp(.8rem, 1vw, .9rem);
  margin-top: var(--space-sm);
  max-width: none;
}

/* Page hero (interior pages) */
.page-hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(229, 201, 120, .2), transparent 60%),
    var(--ivory);
  border-bottom: 1px solid var(--pearl);
}
.page-hero h1 { max-width: min(100%, 1280px); }
.page-hero .lede { margin-bottom: 0; max-width: min(100%, 1280px); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.card {
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.card .card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.card .card-link::after { content: " →"; }
.card-icon {
  width: 44px; height: 44px;
  margin-bottom: 18px;
  color: var(--gold);
}
.section-ink .card {
  background: rgba(247, 245, 241, .05);
  border-color: rgba(185, 203, 216, .25);
}
.section-ink .card h3 { color: var(--ivory); }
.section-ink .card p { color: var(--fog); }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.split-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.4; }

/* ---------- Pillars / numbered features ---------- */
.pillar { display: flex; gap: 22px; margin-bottom: var(--space-lg); }
.pillar-num {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  width: 52px; height: 52px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.5);
}
.pillar h3 { margin-bottom: 6px; }
.pillar p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Fee table ---------- */
.fee-table { margin-top: var(--space-lg); border-top: 1px solid var(--stone); }
.fee-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 4px;
  border-bottom: 1px solid var(--stone);
}
.fee-name { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 600; }
.fee-meta { color: var(--slate); font-size: clamp(.8rem, 1vw, .9rem); margin-top: 4px; }
.fee-price { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--gold-deep); white-space: nowrap; }
.fee-desc { grid-column: 1 / -1; color: var(--ink-soft); font-size: .95rem; margin: 2px 0 0; max-width: 56em; }
.fee-desc-consult {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.consultation-glass-button {
  align-items: center;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background: rgba(255, 254, 252, .94);
  border: 1px solid rgba(169, 116, 18, .24);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(185, 203, 216, .18),
    0 14px 34px rgba(74, 67, 57, .09);
  color: var(--gold-deep);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  letter-spacing: .02em;
  min-height: 48px;
  padding: 11px 20px 12px;
  position: relative;
  text-decoration: none;
  -webkit-text-fill-color: var(--gold-deep);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  width: fit-content;
}
.consultation-glass-button::before {
  background: linear-gradient(110deg, rgba(255,255,255,.8), rgba(255,255,255,0) 42%, rgba(203,221,226,.2));
  border-radius: inherit;
  content: "";
  inset: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.consultation-glass-button-label,
.consultation-glass-button-arrow {
  background: none;
  color: var(--gold-deep);
  position: relative;
  -webkit-text-fill-color: var(--gold-deep);
  z-index: 1;
}
.consultation-glass-button-arrow { font-size: 1.05em; transition: transform .2s ease; }
.consultation-glass-button:hover {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(169, 116, 18, .42);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(185, 203, 216, .2),
    0 18px 40px rgba(74, 67, 57, .12);
  color: var(--gold-deep);
  transform: translateY(-2px);
}
.consultation-glass-button:hover .consultation-glass-button-arrow { transform: translateX(3px); }
.consultation-glass-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.consultation-glass-button:active {
  background: #fffefc;
  box-shadow: inset 0 1px 2px rgba(74, 67, 57, .09);
  transform: translateY(0);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .consultation-glass-button {
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
    background: rgba(255, 255, 255, .7);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .consultation-glass-button {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fffefc;
    border-color: var(--gold-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-glass-button,
  .consultation-glass-button-arrow { transition: none; }
  .consultation-glass-button:hover,
  .consultation-glass-button:hover .consultation-glass-button-arrow { transform: none; }
}

/* ---------- Fee-page practical details ---------- */
.fees-policy-section {
  background: var(--pearl);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}
.fees-policy-caption {
  display: block;
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}
/* Text measures sit on the text elements themselves (not their wrapper
   divs) so the editor's per-element size/width overrides can release them.
   min(64ch, …) keeps the global paragraph measure these wrappers used to
   combine with, so default rendering is unchanged. */
.fees-policy-intro > * { max-width: min(64ch, 44rem); }
.fees-policy-intro h2 { max-width: 18ch; }
.fees-policy-intro p { color: var(--ink-soft); margin-bottom: 0; }
.fees-policy-list { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--stone); }
.fees-policy-item {
  display: grid;
  grid-template-columns: minmax(142px, .32fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(30px, 4vw, 46px) 4px;
  border-bottom: 1px solid var(--stone);
}
.fees-policy-label {
  margin: 4px 0 0;
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.fees-policy-item h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 8px; }
.fees-policy-item p:not(.fees-policy-label) { color: var(--ink-soft); max-width: 48rem; }
.fees-policy-item p:last-child { margin-bottom: 0; }
.fees-policy-note {
  color: var(--slate) !important;
  font-family: var(--font-body);
  font-size: clamp(.82rem, 1vw, .92rem);
  max-width: none !important;
}
.fees-policy-rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin: var(--space-md) 0 0;
}
.fees-policy-rate { margin: 0; padding-top: 14px; border-top: 1px solid var(--stone); }
.fees-policy-rate dt { color: var(--slate); font-family: var(--font-body); font-size: .78rem; line-height: 1.4; }
.fees-policy-rate dd { margin: 8px 0 0; color: var(--gold-deep); font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.1; }
.fees-policy-footnote { margin-top: var(--space-md); }
.fees-policy-footnote > * { max-width: none; }
.fees-policy-footnote p,
.fees-policy-bridge {
  color: var(--slate);
  font-family: var(--font-body);
  font-size: clamp(.82rem, 1vw, .92rem);
  margin-bottom: 0;
  max-width: none !important;
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.step {
  counter-increment: step;
  position: relative;
  padding: 26px 28px 26px 84px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
}
.step::before {
  content: counter(step, upper-roman);
  position: absolute;
  left: 26px; top: 26px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}
.step h3 { font-size: 1.25rem; margin-bottom: 6px; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: var(--space-lg); border-top: 1px solid var(--stone); }
.faq-item { border-bottom: 1px solid var(--stone); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 22px 4px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 4px 24px; color: var(--ink-soft); }
.faq-item .faq-body > * { max-width: min(64ch, 60em); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Notices ---------- */
.notice {
  border-left: 3px solid var(--gold);
  background: rgba(229, 201, 120, .14);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: var(--space-md) 0;
  font-size: clamp(.88rem, 1.1vw, 1rem);
  color: var(--ink-soft);
}
.notice.notice-slate { border-left-color: var(--slate); background: rgba(220, 232, 242, .45); }
.notice strong { color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(800px 400px at 85% 120%, rgba(199, 146, 30, .25), transparent 60%),
    var(--ink);
  color: var(--ivory);
  text-align: center;
  padding: clamp(64px, 9vw, 110px) 0;
}
.cta-band h2 { color: var(--ivory); max-width: 18em; margin: 0 auto var(--space-sm); }
.cta-band p { color: var(--fog); max-width: 40em; margin: 0 auto var(--space-lg); }
.cta-band .btn-group { justify-content: center; }

/* ---------- Booking embed ---------- */
.booking-panel {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-lg);
}
.booking-embed {
  min-height: 120px;
  margin-top: var(--space-md);
}
.appointment-widget {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.appointment-widget .spwidget-button-wrapper {
  text-align: left;
}
.appointment-widget-button {
  min-width: min(100%, 260px);
}
.appointment-widget-note {
  margin: 0;
  color: var(--slate);
  font-family: var(--font-body);
  font-size: clamp(.8rem, 1vw, .9rem);
  max-width: none;
}

/* Secure SimplePractice contact-form launcher */
.contact-widget-panel {
  align-items: center;
  background:
    radial-gradient(640px 260px at 92% 115%, rgba(199, 146, 30, .28), transparent 62%),
    var(--ink);
  border: 1px solid rgba(247, 245, 241, .12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--ivory);
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(250px, .52fr);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  padding: clamp(30px, 5vw, 52px);
}
.contact-widget-panel .eyebrow { color: var(--gold-soft); }
.contact-widget-panel h2 {
  color: var(--ivory);
  font-size: clamp(2rem, 4vw, 3.7rem);
  margin-bottom: 14px;
}
.contact-widget-copy p {
  color: var(--fog);
  font-family: var(--font-prose);
  font-size: 1rem;
  margin: 0;
}
.contact-widget-action {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-widget-button {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
  min-height: 60px;
  width: 100%;
}
.contact-widget-button:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
  transform: translateY(-1px);
}
.contact-widget-button:active { transform: translateY(1px); }
.contact-widget-action p {
  color: var(--fog);
  font-family: var(--font-body);
  font-size: .78rem;
  line-height: 1.55;
  margin: 0;
  text-align: center;
}

/* Two booking paths: free intro consultation vs. full evaluation */
.booking-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-bottom: var(--space-md);
}
.booking-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--stone);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
}
.booking-path-free { border-color: var(--stone); }
.booking-path h3 { font-size: 1.35rem; margin: 0; }
.booking-path p { margin: 0 0 6px; font-size: .95rem; color: var(--ink-soft); }
.booking-path-tag {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.booking-path p.booking-path-meta {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--slate);
}
.booking-path .btn { margin-top: auto; }

/* Quiet free-consult line under the CTA band buttons */
.cta-band .cta-consult-note {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--fog);
  margin: var(--space-md) auto 0;
}
.cta-band .cta-consult-note a {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.booking-placeholder {
  border: 1.5px dashed var(--fog);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  color: var(--slate);
  font-size: .95rem;
}
.portal-strip {
  display: grid;
  grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px clamp(24px, 4vw, 48px);
  margin-top: var(--space-lg);
  padding: 24px 4px 0;
  border-top: 1px solid var(--stone);
}
.portal-strip-label {
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.portal-strip-copy {
  color: var(--ink-soft);
  font-family: var(--font-prose);
  font-size: .96rem;
  line-height: 1.65;
}
.portal-strip-copy a {
  font-family: var(--font-body);
  font-size: .9em;
  font-weight: 600;
}
.portal-strip-action {
  grid-column: 2;
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.portal-strip-action::after { content: " \2192"; }

/* ---------- Quote ---------- */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 26em;
  margin: 0 auto;
  text-align: center;
}
.pullquote::before { content: "“"; color: var(--gold); }
.pullquote::after { content: "”"; color: var(--gold); }
.pullquote-attr { text-align: center; color: var(--slate); font-size: clamp(.8rem, 1vw, .92rem); margin-top: var(--space-sm); max-width: none; }

/* ---------- Prose (long-form legal etc.) ---------- */
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: var(--space-xl); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin-top: var(--space-lg); }
.prose p, .prose li { color: var(--ink-soft); }

main p,
main li,
main summary,
.card p,
.step p,
.faq-body,
.fee-desc {
  font-family: var(--font-prose);
}

.eyebrow,
.btn,
.main-nav,
.header-cta,
.mobile-menu,
.mobile-menu .btn,
.fee-meta,
.pullquote-attr,
.site-footer h4,
.site-footer ul,
.site-footer a,
.chip,
.hero-note,
.notice,
.faq-cat {
  font-family: var(--font-body);
}

/* Theme measures (max-width in ch/em) scale with the element's own font
   size, which pins the wrap point to the same words at any size. Once the
   editor sets a custom size, drop the element's own measure so the text
   reflows to its container instead. max-width is !important so it also
   beats higher-specificity theme rules (e.g. ".fees-policy-item p:not(…)");
   the editor's own width control uses an inline !important, which still
   outranks this. */
[data-eid][style*="--ec-desktop-font-size"] {
  font-size: var(--ec-desktop-font-size) !important;
  max-width: none !important;
}

@media (max-width: 760px) {
  [data-eid][style*="--ec-mobile-font-size"] {
    font-size: var(--ec-mobile-font-size) !important;
    max-width: none !important;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--fog);
  padding: clamp(56px, 7vw, 88px) 0 var(--space-lg);
  font-size: .92rem;
  width: 100%;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.footer-grid > div:not(.footer-brand) { align-self: start; }
.footer-brand svg, .footer-brand img { width: 52px; height: 52px; margin-bottom: 16px; object-fit: contain; }
.logo-on-dark { filter: brightness(0) invert(1); }
.footer-brand .brand-name { color: var(--ivory); font-size: 1.4rem; display: block; margin-bottom: 10px; }
.footer-brand p {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.65;
  max-width: 30em;
}
.site-footer h4 {
  font-family: var(--font-body);
  color: var(--ivory);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--fog); }
.site-footer a:hover { color: var(--gold-soft); }
.footer-contact {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  color: var(--fog);
  font-family: var(--font-body);
  font-size: .82rem;
  font-style: normal;
  line-height: 1.55;
}
.footer-contact strong { color: var(--ivory); }
.footer-contact a { color: var(--fog); }
.footer-bottom {
  border-top: 1px solid rgba(185, 203, 216, .2);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--slate);
}
.footer-bottom a { color: var(--slate); }
.footer-bottom a:hover { color: var(--gold-soft); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none; }
}

/* ============================================================
   Dynamic components — v2
   ============================================================ */

/* ---------- Landing hero (full-bleed) ---------- */
.hero-landing {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}
.hero-landing .hero-bg {
  position: absolute;
  inset: 0;
  background: url("/assets/img/mountains-2400.jpg") center 35% / cover no-repeat;
  animation: heroZoom 22s ease-out forwards;
  will-change: transform;
}
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(247,245,241,0) 55%, rgba(247,245,241,.55) 85%, var(--ivory) 100%),
    linear-gradient(100deg, rgba(247,245,241,.94) 0%, rgba(247,245,241,.78) 34%, rgba(247,245,241,.25) 58%, rgba(247,245,241,0) 78%);
}
.hero-landing .container { position: relative; z-index: 2; width: 100%; }
.hero-landing .hero-content { max-width: 620px; padding: clamp(96px, 14vh, 160px) 0 clamp(96px, 16vh, 180px); }
.hero-tagline {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 7vw, 5rem);
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 10px;
}
.hero-tagline em {
  font-style: italic;
  color: var(--gold-deep);
}
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: var(--space-sm);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-md); }
.chip {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--stone);
  border-radius: 999px;
  padding: 7px 15px;
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 2px solid var(--slate);
  border-radius: 14px;
  opacity: .55;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--slate);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
}

/* ---------- Full-width image bands ---------- */
.img-band {
  position: relative;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: clamp(88px, 12vw, 150px) 0;
  color: var(--ivory);
}
.img-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(36,50,64,.72), rgba(36,50,64,.72));
}
.img-band > .container { position: relative; }
.img-band .pullquote { color: var(--ivory); }
.img-band .pullquote::before, .img-band .pullquote::after { color: var(--gold-soft); }
.img-band .pullquote-attr { color: var(--fog); }
.band-waves { background-image: url("/assets/img/waves-2000.jpg"); }
.band-meditate { background-image: url("/assets/img/meditate-2000.jpg"); }
.band-rocks { background-image: url("/assets/img/rocks-2000.jpg"); }
@media (max-width: 1024px) {
  .img-band { background-attachment: scroll; }
}

/* ---------- Floating ornament ---------- */
.floaty { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- Staggered reveals ---------- */
.card-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: .1s; }
.card-grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: .2s; }
.card-grid .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: .3s; }
.card-grid .reveal:nth-child(5) { transition-delay: .4s; }
.card-grid .reveal:nth-child(6) { transition-delay: .5s; }
.chip-row .chip { opacity: 0; transform: translateY(10px); animation: chipIn .6s ease forwards; }
.chip-row .chip:nth-child(1) { animation-delay: .5s; }
.chip-row .chip:nth-child(2) { animation-delay: .65s; }
.chip-row .chip:nth-child(3) { animation-delay: .8s; }
.chip-row .chip:nth-child(4) { animation-delay: .95s; }
@keyframes chipIn { to { opacity: 1; transform: none; } }

/* ---------- Portrait ---------- */
.portrait-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(160deg, var(--pearl), var(--mist));
  aspect-ratio: 4/4.6;
  max-width: 440px;
}
.portrait-frame img.portrait-photo { width: 100%; height: 100%; object-fit: cover; }
.portrait-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: var(--space-lg);
}
.portrait-fallback img { width: 96px; opacity: .8; }
.portrait-fallback .pf-name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.portrait-fallback .pf-title { font-size: .85rem; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Lotus divider ---------- */
.divider-lotus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  padding: 0;
  border: none;
}
.divider-lotus::before, .divider-lotus::after {
  content: "";
  height: 1px;
  width: min(120px, 24vw);
  background: var(--stone);
}
.divider-lotus img { width: 30px; opacity: .75; }

/* ---------- Landing responsive ---------- */
@media (max-width: 760px) {
  .hero-landing { min-height: 88vh; align-items: flex-end; }
  .hero-landing::before {
    background:
      linear-gradient(to bottom, rgba(247,245,241,.1) 0%, rgba(247,245,241,.72) 45%, var(--ivory) 100%);
  }
  .hero-landing .hero-content { padding: 46vh 0 72px; max-width: 100%; }
  .scroll-cue { display: none; }
  .portrait-frame { margin: 0 auto; }
}

/* ============================================================
   Editorial nature direction — July 2026
   Drawn from the clinic's visual studies: large serif type,
   open compositions, organic image masks, and quiet slate bands.
   ============================================================ */
:root {
  --ivory: #f4f2ed;
  --pearl: #e7e4de;
  --stone: #cbc7bf;
  --mist: #d7dde0;
  --fog: #b6c1c8;
  --slate: #596773;
  --ink: #302c2a;
  --ink-soft: #4b4744;
  --gold: #bd8e2d;
  --gold-deep: #946c19;
  --max-width: 1320px;
  --header-h: 82px;
  --radius-lg: 36px;
  --shadow-soft: 0 28px 70px rgba(39, 43, 46, .12);
}

body {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.58;
  letter-spacing: -.008em;
  background: var(--ivory);
}

p, li { max-width: 64ch; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.025em; }
h1 { font-size: clamp(3.25rem, 7vw, 6.7rem); line-height: .96; }
h2 { font-size: clamp(2.6rem, 5.2vw, 5.35rem); line-height: 1; }
h3 { font-size: clamp(1.55rem, 2.6vw, 2.25rem); line-height: 1.08; }

.eyebrow,
.btn,
.main-nav,
.header-cta,
.mobile-menu .btn,
.fee-meta,
.pullquote-attr,
.site-footer,
.chip,
.hero-note {
  font-family: var(--font-body);
}

.container { padding-inline: clamp(24px, 5.5vw, 88px); }
section { padding: clamp(80px, 10vw, 160px) 0; }
.narrow { max-width: 920px; }

.site-header {
  background: rgba(244, 242, 237, .94);
  border-bottom-color: rgba(48, 44, 42, .1);
}
.site-header.scrolled { box-shadow: 0 10px 36px rgba(39, 43, 46, .07); }
.header-inner { max-width: 1440px; }
.brand-name { font-size: 1.68rem; font-weight: 500; }
.brand img { width: 46px; height: 46px; }
.main-nav a { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

.btn {
  min-height: 52px;
  padding: 15px 30px;
  font-size: .84rem;
  letter-spacing: .035em;
  text-transform: none;
  border-radius: 999px;
}
.btn-primary { background: var(--ink); }
.btn-primary:hover { background: var(--gold-deep); }
.btn-secondary { color: var(--ink); border-color: rgba(48,44,42,.35); }
.btn-secondary:hover { color: var(--ivory); background: var(--ink); border-color: var(--ink); }

.hero-landing {
  min-height: min(90vh, 940px);
  align-items: center;
  color: #fff;
  isolation: isolate;
}
.hero-landing .hero-bg {
  background-position: center 42%;
  transform: none;
  animation: editorialHero 24s ease-out both;
}

/* ---------- Water hero (physics ripple) ---------- */
.hero-landing .hero-bg.hero-water {
  background-image:
    radial-gradient(ellipse 46% 22% at 52% 92%, rgba(224, 192, 106, .30) 0%, rgba(203, 178, 108, .12) 38%, transparent 76%),
    radial-gradient(ellipse 38% 42% at 62% 51%, rgba(100, 204, 213, .27) 0%, rgba(56, 159, 184, .11) 45%, transparent 78%),
    radial-gradient(ellipse 34% 34% at 21% 19%, rgba(32, 117, 151, .42) 0%, rgba(20, 85, 117, .10) 52%, transparent 80%),
    linear-gradient(180deg,
      #0d3d54 0%,
      #12516a 24%,
      #1a6b80 47%,
      #2b8392 68%,
      #245f74 84%,
      #1b4d65 100%);
  background-size: 132% 72%, 130% 138%, 126% 132%, 100% 100%;
  background-position: 50% 104%, 56% 50%, 16% 16%, center;
  animation: heroBaseMeshFlow 12s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.ripple-canvas.ripple-live { opacity: .94; }
.hero-landing::before { z-index: 1; }
.hero-landing .container { position: relative; z-index: 2; }
.hero-landing .scroll-cue { z-index: 2; }
@keyframes editorialHero {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}
/* The fallback mirrors the low-frequency drift in the WebGL color field.
   It stays behind the water canvas and moves gently for WebGL-unavailable browsers. */
@keyframes heroBaseMeshFlow {
  0% {
    background-size: 130% 70%, 128% 136%, 124% 130%, 100% 100%;
    background-position: 48% 104%, 50% 47%, 12% 18%, center;
  }
  34% {
    background-size: 136% 74%, 134% 142%, 130% 136%, 100% 100%;
    background-position: 54% 101%, 64% 56%, 20% 12%, center;
  }
  67% {
    background-size: 128% 70%, 132% 138%, 128% 134%, 100% 100%;
    background-position: 45% 106%, 52% 42%, 8% 24%, center;
  }
  100% {
    background-size: 132% 72%, 130% 138%, 126% 132%, 100% 100%;
    background-position: 50% 104%, 56% 50%, 16% 16%, center;
  }
}
.hero-landing::before {
  background:
    linear-gradient(180deg, rgba(20,32,40,.26), rgba(20,32,40,.42)),
    linear-gradient(90deg, rgba(18,28,34,.26), transparent 65%);
}
.hero-landing .hero-content {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 170px) 0;
  text-align: center;
}
.hero-emblem {
  width: clamp(100px, 12vw, 170px);
  margin: 0 auto 26px;
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0,0,0,.15));
}
.hero-landing .eyebrow { color: rgba(255,255,255,.78); }
.hero-tagline {
  color: #fff;
  font-size: clamp(4rem, 9.5vw, 8rem);
  font-weight: 500;
  line-height: .9;
  text-shadow: 0 3px 26px rgba(0,0,0,.16);
}
.hero-tagline em { color: #fff; font-weight: 500; }
.hero-sub { color: rgba(255,255,255,.94); font-size: clamp(1.35rem, 2.5vw, 2rem); }
.hero-landing .lede {
  color: rgba(255,255,255,.9);
  max-width: 700px;
  margin: 0 auto var(--space-md);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
}
.hero-landing .btn-group { justify-content: center; }
.hero-landing .btn-primary { color: var(--ink); background: rgba(244,242,237,.94); }
.hero-landing .btn-primary:hover { color: #fff; background: var(--gold-deep); }
.hero-landing .btn-secondary { color: #fff; border-color: rgba(255,255,255,.68); }
.hero-landing .btn-secondary:hover { background: #fff; color: var(--ink); }
.hero-landing .chip-row { display: none; }
.scroll-cue { border-color: #fff; opacity: .65; }
.scroll-cue::before { background: #fff; }

.page-hero {
  padding: clamp(92px, 12vw, 168px) 0 clamp(70px, 9vw, 122px);
  background: var(--pearl);
  border: 0;
}
.page-hero .container { max-width: 1320px; }
.page-hero h1 { max-width: min(100%, 1280px); }
.page-hero .lede { font-size: clamp(1.25rem, 2.3vw, 1.75rem); color: var(--ink-soft); max-width: min(100%, 1280px); }
.section-pearl { background: #e2e0db; }
.split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(50px, 8vw, 130px); }
.split p { font-size: clamp(1.06rem, 1.55vw, 1.3rem); }
.split-img {
  border-radius: 48% 48% 40% 40% / 38% 38% 48% 48%;
  box-shadow: none;
  background: var(--pearl);
}
.split-img img { aspect-ratio: 4/4.4; }
.organic-frame { border-radius: 44% 44% 44% 44% / 34% 34% 44% 44%; }
.organic-frame img { aspect-ratio: 4/4.25; object-position: 42% center; }

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 6vw, 88px) clamp(26px, 4vw, 58px);
  margin-top: clamp(54px, 7vw, 100px);
}
.card {
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.card:hover { transform: translateY(-5px); box-shadow: none; }
.card-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 24px;
  opacity: .7;
  filter: grayscale(1) sepia(.08);
}
.depth-therapy-logo {
  display: block;
  width: clamp(96px, 8vw, 132px);
  height: clamp(96px, 8vw, 132px);
  object-fit: contain;
  margin: 0 auto clamp(22px, 2.8vw, 34px);
  opacity: .72;
  filter: grayscale(1) sepia(.05) contrast(104%);
}
.card h3 { font-size: clamp(1.75rem, 2.4vw, 2.4rem); }
.card p { color: var(--ink-soft); font-size: 1.05rem; margin-inline: auto; }
.card .card-link { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

.conditions-grid {
  align-items: start;
  row-gap: clamp(72px, 8vw, 116px);
}
.conditions-grid .card {
  display: grid;
  grid-template-rows: 112px auto 1fr;
  justify-items: center;
  height: 100%;
}
.condition-icon {
  display: block;
  width: 104px !important;
  height: 104px !important;
  max-width: 104px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.conditions-grid h3 {
  max-width: 11em;
  margin: 0 auto 14px;
  line-height: 1.02;
}
.conditions-grid p { max-width: 34em; }

.telehealth-grid .card {
  display: grid;
  grid-template-rows: 112px auto 1fr;
  justify-items: center;
  height: 100%;
}
.telehealth-icon {
  display: block;
  width: 104px !important;
  height: 104px !important;
  max-width: 104px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.telehealth-grid h3 {
  max-width: 11em;
  margin: 0 auto 14px;
  line-height: 1.02;
}
.telehealth-grid p { max-width: 34em; }

.img-band {
  min-height: min(84vh, 860px);
  display: grid;
  place-items: center;
  padding: clamp(110px, 16vw, 210px) 0;
}
.img-band::before { background: rgba(27, 43, 53, .66); }
.img-band .pullquote { font-size: clamp(2.8rem, 5.5vw, 5.6rem); line-height: 1.03; max-width: 17em; }
.img-band .pullquote-attr { margin-top: 26px; letter-spacing: .12em; text-transform: uppercase; }

.portrait-wrap { display: grid; place-items: center; }
.portrait-frame {
  max-width: 560px;
  width: 100%;
  aspect-ratio: 4/5.1;
  border-radius: 48% 48% 4px 4px / 24% 24% 4px 4px;
  box-shadow: none;
  background: var(--pearl);
}
.portrait-frame img.portrait-photo { object-position: 50% 35%; }

.pillar {
  padding: 30px 0;
  margin: 0;
  border-bottom: 1px solid rgba(48,44,42,.18);
}
.pillar-num { border: 0; background: none; font-size: 2.15rem; }
.steps { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 42px); }
.step { padding: 76px 8px 18px; border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none; }
.step::before { left: 8px; top: 20px; font-size: 1.6rem; }

.cta-band { background: var(--ink); }
.cta-band h2 { font-size: clamp(3rem, 6vw, 6rem); max-width: 15em; }
.cta-band p { font-size: 1.2rem; }

.site-footer { background: #262e34; }

body[data-page="home"] main > section:nth-child(2) { background: #f7f6f3; }
body[data-page="home"] main > section:nth-child(3) { background: #dedcd7; }
body[data-page="home"] main > section:nth-child(6) {
  background: linear-gradient(125deg, #d8dde6 0%, #d6e5d9 52%, #ece7b8 100%);
}

@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .step { padding-top: 64px; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  h1 { font-size: clamp(3.1rem, 17vw, 5.1rem); }
  h2 { font-size: clamp(2.5rem, 12vw, 4rem); }
  section { padding: 78px 0; }
  .hero-landing { min-height: 820px; align-items: center; }
  .hero-landing .hero-content { padding: 82px 0 90px; }
  .hero-emblem { width: 106px; }
  .hero-tagline { font-size: clamp(4rem, 19vw, 5.7rem); }
  .hero-landing .lede { font-size: 1.05rem; }
  .split { gap: 42px; }
  .split-img img { aspect-ratio: 4/4.25; }
  .card-grid { grid-template-columns: 1fr; gap: 62px; }
  .card { max-width: 460px; margin-inline: auto; }
  .card-icon { width: 86px; height: 86px; }
  .conditions-grid { gap: 72px; }
  .conditions-grid .card { grid-template-rows: 96px auto 1fr; }
  .condition-icon { width: 88px !important; height: 88px !important; max-width: 88px; margin-bottom: 8px; }
  .conditions-grid h3 { margin-bottom: 12px; }
  .telehealth-grid .card { grid-template-rows: 96px auto 1fr; }
  .telehealth-icon { width: 88px !important; height: 88px !important; max-width: 88px; margin-bottom: 8px; }
  .telehealth-grid h3 { margin-bottom: 12px; }
  .img-band { min-height: 650px; background-attachment: scroll; }
  .img-band .pullquote { font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .portrait-frame { max-width: 460px; }
  .contact-widget-panel {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
  .portal-strip {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0 0;
  }
  .portal-strip-action {
    grid-column: auto;
    white-space: normal;
  }
  .mobile-menu { background: var(--ivory); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  section[data-mobile-hidden="true"] { display: none !important; }
  body { font-size: 16px; }
  .split { grid-template-columns: 1fr; }
  .split-img { order: -1; }
  .split-img img { aspect-ratio: 16/10; }
  .hero-mark { display: none; }
  .pillar { gap: 16px; }
  .pillar-num { width: 44px; height: 44px; font-size: 1.2rem; }
  .step { padding: 22px 20px 22px 66px; }
  .step::before { left: 20px; top: 22px; }
  .fee-row { grid-template-columns: 1fr; gap: 4px; }
  .fees-policy-item { grid-template-columns: 1fr; gap: 12px; }
  .fees-policy-label { margin-top: 0; }
  .fees-policy-rates { grid-template-columns: 1fr; gap: 14px; }
  .btn-group .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; }
}

/* Keep editorial mobile rules last in the cascade. */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .split-img img { aspect-ratio: 4/4.25; }
  .step { padding: 64px 8px 18px; }
  .step::before { left: 8px; top: 20px; }
}

/* ============================================================
   v4 refinements
   ============================================================ */

/* Statement bands: no quotation marks (nothing here is a quote) */
.pullquote::before, .pullquote::after,
.img-band .pullquote::before, .img-band .pullquote::after { content: none; }

/* Header glass: readable first, then frosted refraction where supported */
.site-header {
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 254, 252, .82);
  border-bottom-color: rgba(169, 116, 18, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 30px rgba(48, 44, 42, .04);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(ellipse 42% 120% at 18% 50%, rgba(112, 192, 250, .18), transparent 68%),
    radial-gradient(ellipse 38% 120% at 76% 50%, rgba(229, 201, 120, .24), transparent 72%),
    linear-gradient(115deg, rgba(255, 255, 255, .52), rgba(247, 245, 241, .2));
}
.site-header.scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 14px 38px rgba(48, 44, 42, .08);
}
.header-inner {
  position: relative;
  z-index: 1;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 254, 252, .58);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header {
    background: rgba(255, 254, 252, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header::before { display: none; }
}

/* Header: larger logo, tighter lockup, wordmark matches logo gold */
.brand { gap: 8px; }
.brand svg, .brand img { width: 54px; height: 54px; }
.brand-name { color: #ce8d04; }
.site-header .brand-name {
  text-shadow:
    0 1px 0 rgba(247, 245, 241, .72),
    0 2px 8px rgba(48, 44, 42, .08);
}
.brand:hover .brand-name { color: #ce8d04; }

/* Buttons: true vertical centering of label */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

.booking-path .booking-path-cta {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(47, 43, 40, .12);
  color: #fff;
  display: flex;
  line-height: 1.08;
  max-width: 320px;
  min-height: 64px;
  width: 100%;
}
.booking-path .booking-path-cta:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  box-shadow: 0 14px 30px rgba(148, 108, 25, .2);
  color: #fff;
  transform: translateY(-1px);
}
.booking-path .booking-path-cta:active {
  box-shadow: 0 6px 16px rgba(47, 43, 40, .12);
  transform: translateY(1px);
}

/* Landing hero: larger emblem */
.hero-emblem { width: clamp(140px, 16vw, 230px); }

/* Steps: keep all steps on one aligned grid (2x2 when there are four) */
@media (min-width: 761px) {
  .steps:has(.step:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* CTA band headline: calmer scale so it holds one line */
.cta-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 22em; }
.cta-band p { font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* FAQ category headers: clearly distinct from accordion items */
.faq-cat {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 2px solid var(--gold-soft);
  padding-bottom: 12px;
  margin: var(--space-xl) 0 0;
}
.faq-cat:first-of-type { margin-top: 0; }
.faq-list { margin-top: var(--space-sm); border-top: none; }

/* About: keep the name on one line at a balanced size */
.about-name { white-space: nowrap; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* Rectangular photo frame variant (rocks section): larger, uncropped view */
.split-img.frame-rect {
  border-radius: var(--radius-lg);
  background: none;
}
.split-img.frame-rect img { aspect-ratio: 4/3.2; object-position: center; }

/* Why Entheo band: soft atmospheric gradient */
.band-entheo {
  background:
    linear-gradient(115deg, rgba(220, 232, 242, .9) 0%, rgba(236, 233, 226, .6) 42%, rgba(229, 201, 120, .55) 120%),
    var(--ivory);
  padding: clamp(72px, 10vw, 128px) 0;
}
.band-entheo h2 { margin-bottom: var(--space-md); }

/* ============================================================
   v5 refinements
   ============================================================ */

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Header: slightly larger logo */
.brand svg, .brand img { width: 60px; height: 60px; }

/* Landing hero: editorial two-line wordmark, larger emblem, and connected prose lede */
.hero-emblem { width: clamp(160px, 18vw, 260px); margin-bottom: 34px; }
.hero-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, .35vw, 8px);
  margin-bottom: 30px;
  line-height: 1;
}
.hero-tagline-kicker {
  display: block;
  font-size: clamp(2.65rem, 5.2vw, 5rem);
  font-style: normal;
  font-weight: 500;
  line-height: .95;
}
.hero-tagline-balance {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: clamp(5.4rem, 11.2vw, 10rem);
  font-style: italic;
  font-weight: 500;
  line-height: .8;
}
/* Sits just clear of the baseline so the rule underlines "Balance" rather
   than striking through it. The offset is a percentage of the word's own
   line box, so it tracks the clamped font size at every width. */
.hero-tagline-balance::after {
  content: "";
  position: absolute;
  top: 116%;
  left: 50%;
  width: min(92vw, 1120px);
  height: 1px;
  transform: translate(-50%, -50%) scaleY(1);
  transform-origin: center;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 8%, rgba(255,255,255,.78) 31%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.78) 69%, rgba(255,255,255,.18) 92%, transparent 100%);
  animation: heroLineBreath 5s infinite;
  pointer-events: none;
}
@keyframes heroLineBreath {
  0%, 100% {
    transform: translate(-50%, -50%) scaleY(1);
    animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  }
  40% {
    transform: translate(-50%, -50%) scaleY(5);
    animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  }
}
.hero-lede {
  font-family: var(--font-prose);
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  line-height: 1.55;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Home intro: larger tree image */
.split.img-lg { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split.img-lg .split-img img { aspect-ratio: 4/4.5; }

@media (max-width: 760px) {
  .hero-tagline { gap: 5px; }
  .hero-tagline-kicker { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .hero-tagline-balance {
    font-size: clamp(4.4rem, 22vw, 6.4rem);
    line-height: .84;
  }
  .hero-tagline-balance::after { width: 94vw; }

  /* Keep the story first, then give the banyan a generous full-width reveal. */
  .split.img-lg.home-intro { grid-template-columns: 1fr; }
  .home-intro .split-img { order: 2; width: 100%; }
  .home-intro .split-img img {
    aspect-ratio: 4/3.8;
    object-position: 42% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-landing .hero-bg.hero-water { animation: none; }
  .hero-tagline-balance::after {
    animation: none;
    transform: translate(-50%, -50%) scaleY(1.35);
  }
}

/* Compact, scroll-aware mobile header. Desktop sizing and behavior stay unchanged. */
@media (max-width: 760px) {
  :root { --header-h: 64px; }

  .site-header {
    transition: transform .28s ease, box-shadow .25s ease;
    will-change: transform;
  }
  .site-header.header-hidden { transform: translateY(-100%); }
  .mobile-menu {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .header-inner { height: var(--header-h); }
  .brand { gap: 7px; }
  .brand svg,
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.22rem; letter-spacing: 0; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: -8px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
  }
  .nav-toggle span {
    width: 22px;
    height: 1.5px;
    margin: 3px 0;
    background: var(--ink);
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* Icon color for inline marks */
svg.card-icon { color: var(--gold-deep); }

/* Why Entheo band v4: calm moving mesh with direct text overlay */
.band-entheo {
  --entheo-mesh-duration: 12s;
  --entheo-mesh-saturation: 155%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(620px, 72vh, 860px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 12% 16%, rgba(194, 225, 249, .98) 0%, transparent 40%),
    radial-gradient(circle at 54% 70%, rgba(214, 229, 217, .98) 0%, transparent 44%),
    radial-gradient(circle at 86% 78%, rgba(240, 199, 76, .9) 0%, transparent 44%),
    linear-gradient(135deg, #c7e4f8 0%, #d6e5d9 45%, #f0c74c 118%);
}
.band-entheo::before,
.band-entheo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.band-entheo::before {
  inset: -34%;
  z-index: -2;
  /* Two white light-wells sweep corner-to-corner through higher-contrast
     color fields; boundaries stay soft but clearly defined. */
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 1) 0 10%, transparent 34%),
    radial-gradient(circle at 72% 64%, rgba(255, 255, 255, .95) 0 8%, transparent 30%),
    radial-gradient(circle at 18% 28%, rgba(112, 192, 250, 1) 0 22%, transparent 50%),
    radial-gradient(circle at 76% 18%, rgba(248, 232, 172, 1) 0 21%, transparent 50%),
    radial-gradient(circle at 82% 78%, rgba(232, 170, 26, 1) 0 26%, transparent 56%),
    radial-gradient(circle at 28% 84%, rgba(190, 224, 198, 1) 0 22%, transparent 52%),
    radial-gradient(circle at 52% 48%, rgba(120, 204, 162, .95) 0 19%, transparent 47%),
    linear-gradient(115deg, rgba(150, 208, 250, .9), rgba(205, 226, 208, .8), rgba(236, 186, 46, .9));
  background-size: 120% 120%, 115% 115%, 130% 130%, 125% 125%, 140% 140%, 135% 135%, 150% 150%, 100% 100%;
  filter: blur(22px) saturate(var(--entheo-mesh-saturation)) contrast(108%);
  transform-origin: 50% 50%;
  animation: entheoMeshDrift var(--entheo-mesh-duration) cubic-bezier(.37, 0, .63, 1) infinite alternate;
  will-change: transform, background-position;
}
.band-entheo::after {
  inset: 0;
  z-index: -1;
  opacity: .018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.band-entheo > .container {
  position: relative;
  max-width: 980px;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  color: #151515;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.band-entheo .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.band-entheo h2,
.band-entheo p {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .42),
    0 4px 24px rgba(0, 0, 0, .16);
}
.band-entheo h2 {
  color: #121212;
  mix-blend-mode: normal;
}
.band-entheo .lede {
  color: #151515;
}
/* Centered bands: the 64ch measure on p/li would otherwise leave the
   text block flush left inside the wider container. */
.band-entheo .center p {
  margin-left: auto;
  margin-right: auto;
}
/* The foreground stays anchored while the mesh does all the moving.
   Layer order: white well A, white well B, blue, cream, gold, sage,
   green, base wash. The two white wells cross the field corner to
   corner in opposite directions while the color fields swing wide —
   vigorous travel, organic uneven rhythm at one steady idle speed. */
@keyframes entheoMeshDrift {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
    background-position: 8% 92%, 92% 8%, 0% 0%, 62% 8%, 100% 100%, 10% 92%, 50% 50%, 0% 0%;
  }
  22% {
    transform: translate3d(3%, -4%, 0) rotate(6deg) scale(1.05);
    background-position: 34% 62%, 66% 34%, 22% 16%, 82% 30%, 80% 74%, 32% 100%, 64% 36%, 42% 32%;
  }
  45% {
    transform: translate3d(4%, 2%, 0) rotate(-5deg) scale(1.09);
    background-position: 68% 26%, 32% 74%, 42% 36%, 54% 46%, 64% 58%, 56% 70%, 38% 66%, 78% 64%;
  }
  68% {
    transform: translate3d(-2%, 4%, 0) rotate(8deg) scale(1.05);
    background-position: 90% 8%, 10% 92%, 26% 62%, 34% 18%, 54% 82%, 76% 44%, 56% 38%, 56% 88%;
  }
  100% {
    transform: translate3d(-4%, -2%, 0) rotate(-4deg) scale(1.02);
    background-position: 14% 78%, 86% 22%, 6% 14%, 50% 4%, 96% 96%, 14% 74%, 48% 52%, 100% 100%;
  }
}
@media (max-width: 760px) {
  .band-entheo {
    min-height: auto;
    align-items: flex-start;
  }
  .band-entheo > .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .band-entheo::before { animation: none; }
}

/* ---------- Sunset variant (About – "Why I Built This Practice") ----------
   Same band mechanics as the home page's Why Entheo mesh, but a warm
   gold/amber/rose field with no blue or green, and a slower vertical
   "sinking light" drift instead of the home page's rotating sweep. */
.band-sunset {
  --entheo-mesh-duration: 26s;
  --entheo-mesh-saturation: 148%;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 233, 190, .98) 0%, transparent 42%),
    radial-gradient(circle at 58% 66%, rgba(244, 168, 106, .95) 0%, transparent 46%),
    radial-gradient(circle at 88% 86%, rgba(206, 92, 66, .9) 0%, transparent 46%),
    linear-gradient(160deg, #fdeccb 0%, #f4c073 42%, #d97a45 118%);
}
.band-sunset::before {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 250, 236, 1) 0 12%, transparent 38%),
    radial-gradient(circle at 66% 58%, rgba(255, 238, 206, .95) 0 9%, transparent 32%),
    radial-gradient(circle at 16% 34%, rgba(249, 200, 104, 1) 0 24%, transparent 52%),
    radial-gradient(circle at 74% 26%, rgba(242, 160, 66, 1) 0 23%, transparent 51%),
    radial-gradient(circle at 80% 76%, rgba(203, 82, 48, 1) 0 27%, transparent 57%),
    radial-gradient(circle at 30% 80%, rgba(188, 66, 78, .96) 0 24%, transparent 54%),
    radial-gradient(circle at 50% 52%, rgba(228, 124, 56, .96) 0 21%, transparent 49%),
    linear-gradient(170deg, rgba(255, 236, 198, .92), rgba(240, 172, 96, .85), rgba(198, 88, 62, .9));
  background-size: 130% 130%, 120% 120%, 140% 140%, 135% 135%, 150% 150%, 145% 145%, 160% 160%, 100% 100%;
  filter: blur(26px) saturate(var(--entheo-mesh-saturation)) contrast(104%);
  animation-name: entheoSunsetDrift;
  animation-timing-function: cubic-bezier(.45, .05, .55, .95);
}
/* Light sinks and re-rises through the field: the warm wells travel
   mostly on the vertical axis with a slow horizontal lean, so the motion
   reads as a settling sun rather than the home page's orbiting mesh. */
@keyframes entheoSunsetDrift {
  0% {
    transform: translate3d(-2%, -6%, 0) scale(1.04) skewY(0deg);
    background-position: 50% 4%, 44% 96%, 20% 8%, 78% 12%, 84% 96%, 22% 90%, 50% 30%, 50% 0%;
  }
  30% {
    transform: translate3d(2%, 0%, 0) scale(1.08) skewY(1.2deg);
    background-position: 44% 34%, 52% 68%, 26% 40%, 70% 42%, 78% 70%, 30% 62%, 46% 52%, 50% 30%;
  }
  60% {
    transform: translate3d(3%, 5%, 0) scale(1.05) skewY(-1deg);
    background-position: 56% 72%, 46% 32%, 34% 74%, 64% 76%, 70% 36%, 38% 28%, 54% 76%, 50% 68%;
  }
  100% {
    transform: translate3d(-2%, -4%, 0) scale(1.03) skewY(.4deg);
    background-position: 48% 12%, 50% 90%, 18% 16%, 76% 20%, 82% 88%, 24% 84%, 48% 36%, 50% 8%;
  }
}

/* Four-card grids align 2x2 (3-col default leaves an orphan) */
.card-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .card-grid.grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Pillar icons (About page – "Three pillars") ---------- */
.pillar-icon {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: .7;
  filter: grayscale(1) sepia(.08);
  align-self: start;
  margin-top: 4px;
}

@media (min-width: 761px) {
  .pillar-icon {
    width: 112px;
    height: 112px;
  }
}

/* ============================================================
   Home service wheel
   Six services on the vertices of a hexagon — the same geometry
   as the lotus mark (six petals around a centre). The ring spins
   and each node counter-spins at the same rate, so icons and
   labels stay upright. Hover or focus anywhere in the wheel
   pauses it, so a link is never a moving target.
   ============================================================ */
.service-wheel {
  --wheel-size: min(620px, 88vw);
  --wheel-radius: calc(var(--wheel-size) * 0.34);
  --wheel-node: calc(var(--wheel-size) * 0.30);
  --wheel-duration: 150s;
  --lattice-open: 2.0;
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin: var(--space-lg) auto 0;
}

.wheel-ring {
  position: absolute;
  inset: 0;
  animation: wheel-spin var(--wheel-duration) linear infinite;
}

.wheel-node {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--wheel-node);
  height: var(--wheel-node);
  margin-left: calc(var(--wheel-node) / -2);
  margin-top: calc(var(--wheel-node) / -2);
  transform:
    rotate(calc(var(--i) * 60deg))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(calc(var(--i) * -60deg));
  text-decoration: none;
  border-radius: 50%;
}

.wheel-node-spin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  animation: wheel-spin-reverse var(--wheel-duration) linear infinite;
}

.wheel-icon {
  width: calc(var(--wheel-node) * 0.58);
  height: calc(var(--wheel-node) * 0.58);
  object-fit: contain;
  opacity: .72;
  transition: opacity .3s ease, transform .3s ease;
}

.wheel-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color .3s ease;
}

.wheel-node:hover .wheel-icon,
.wheel-node:focus-visible .wheel-icon { opacity: 1; transform: scale(1.08); }
.wheel-node:hover .wheel-label,
.wheel-node:focus-visible .wheel-label { color: var(--gold-deep); }
.wheel-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* The drift continues under the pointer by design. It only pauses for
   keyboard focus, where a moving focus ring is disorienting. At 150s a
   turn the marks travel under 9px per second, so they stay easy to hit. */
.service-wheel:focus-within .wheel-ring,
.service-wheel:focus-within .wheel-node-spin { animation-play-state: paused; }

/* Sized by its content rather than a fixed square. A fixed hub narrower
   than the button made grid centring fall back to safe alignment, which
   pushed the button off centre by half the overflow. */
.wheel-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}


/* Fibonacci lattice. It sits in its own layer beneath the ring so that
   when it blooms it passes behind the marks rather than over them, and
   it never intercepts a click meant for one of them.
   Seeds reach 46 of the 100-unit viewBox, so the visible radius is 0.46
   of the element. --lattice-open is set so that radius lands on the
   outer edge of the marks: 0.46 * 0.21 * 4.75 = 0.46 of the wheel. */
/* Scale lives on the layer and rotation on the svg inside it, so the two
   never fight over the transform property. --lattice-open is set so the
   open lattice just meets the inner edge of the marks: at 2.0,
   0.46 * 0.21 * 2.0 = 0.193 of the wheel, against an inner edge of 0.19. */
.wheel-lattice-layer {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}

.wheel-lattice {
  display: block;
  width: calc(var(--wheel-size) * 0.21);
  height: calc(var(--wheel-size) * 0.21);
  opacity: .45;
  transform-origin: 50% 50%;
  transition: opacity .8s ease;
  /* Same duration as the ring, so when it runs it turns at exactly the
     speed of the marks. Held paused until the link is hovered. */
  animation: lattice-rotate var(--wheel-duration) linear infinite,
             lattice-shine 6s ease-in-out infinite;
  animation-play-state: paused;
}

/* One-shot bloom when the wheel first scrolls into view. This rides the
   .visible class the site's existing reveal observer already sets, so it
   needs no new script, and it is how touch devices see the effect at all.
   No fill-mode: the animation ends where the base rule already is, so a
   hover straight afterwards still transitions instead of jumping. */
.reveal.visible .wheel-lattice-layer {
  animation: lattice-bloom 3.2s cubic-bezier(.22, .61, .36, 1) .45s 1;
}

/* Hover, keyboard focus, and touch-press all open it. :active is what
   carries the interaction on phones, where there is no hover. */
.service-wheel:has(.wheel-hub-cta:hover) .wheel-lattice-layer,
.service-wheel:has(.wheel-hub-cta:focus-visible) .wheel-lattice-layer,
.service-wheel:has(.wheel-hub-cta:active) .wheel-lattice-layer {
  transform: translate(-50%, -50%) scale(var(--lattice-open));
}

.service-wheel:has(.wheel-hub-cta:hover) .wheel-lattice,
.service-wheel:has(.wheel-hub-cta:focus-visible) .wheel-lattice,
.service-wheel:has(.wheel-hub-cta:active) .wheel-lattice {
  animation-play-state: running;
  opacity: .7;
}

@keyframes lattice-bloom {
  0%   { transform: translate(-50%, -50%) scale(1); }
  42%  { transform: translate(-50%, -50%) scale(var(--lattice-open)); }
  70%  { transform: translate(-50%, -50%) scale(var(--lattice-open)); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes lattice-rotate { to { transform: rotate(360deg); } }

/* A narrow gold-to-rose sweep. Rest sits at the gradient's own colour so
   the paused first frame looks intentional rather than tinted. */
@keyframes lattice-shine {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(-16deg) brightness(1.12); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

/* A solid pill, so it reads as a button rather than a caption. .btn
   already sets a 1px transparent border, so nothing is stroked around
   it. Sized down from the site default to sit well inside the ring
   without reaching the marks, and pointer-events restored because the
   hub around it is inert. */
.wheel-hub-cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-size: .8rem;
  min-height: 44px;
  white-space: nowrap;
}

/* Keyboard-only focus ring. Mouse and touch never see it. */
.wheel-hub-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.wheel-ring { z-index: 1; }
.wheel-hub { z-index: 2; }

@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes wheel-spin-reverse { to { transform: rotate(-360deg); } }

/* The wheel stays a wheel on small screens. It takes more of the
   viewport, the marks take a larger share of each node, and the label
   tightens so six of them still fit around the ring. */
@media (max-width: 700px) {
  /* The wheel must fit inside .container's content box or margin auto
     cannot centre it and it drifts right. Below 760px that padding is
     clamp(24px, 5.5vw, 88px) a side, so subtract both, plus a little
     slack. At 375px: 375 - 48 - 8 = 319 inside a 327px content box. */
  .service-wheel {
    --wheel-size: calc(100vw - 2 * clamp(24px, 5.5vw, 88px) - 8px);
    --wheel-node: calc(var(--wheel-size) * 0.32);
    --lattice-open: 2.6;
    margin-top: var(--space-md);
  }
  .wheel-icon { width: calc(var(--wheel-node) * 0.50); height: calc(var(--wheel-node) * 0.50); opacity: .85; }
  .wheel-node-spin { gap: 6px; }
  .wheel-label { font-size: 10px; letter-spacing: .04em; line-height: 1.25; }
  /* The lattice rests smaller here, so it needs a larger open factor to
     still reach the marks: 0.46 * 0.15 * 7.3 = 0.50 of the wheel, which
     is where the mobile marks' outer edge sits. */
  .wheel-lattice {
    width: calc(var(--wheel-size) * 0.15);
    height: calc(var(--wheel-size) * 0.15);
  }
  .wheel-hub-cta { padding: 8px 14px; font-size: .7rem; min-height: 44px; }
}

@media (max-width: 380px) {
  .wheel-label { font-size: 9px; letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-ring, .wheel-node-spin { animation: none; }
  .wheel-icon, .wheel-label { transition: none; }
  /* No drift, no bloom, no colour cycle, and the lattice holds its
     resting size rather than snapping open without the transition. */
  .wheel-lattice, .wheel-lattice-layer,
  .reveal.visible .wheel-lattice-layer { animation: none !important; transition: none !important; }
  .service-wheel:has(.wheel-hub-cta:hover) .wheel-lattice-layer,
  .service-wheel:has(.wheel-hub-cta:focus-visible) .wheel-lattice-layer,
  .service-wheel:has(.wheel-hub-cta:active) .wheel-lattice-layer { transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   Call-to-action band buttons — gold, with a drifting halo.
   The halo is a blurred conic gradient on ::before at z-index -1.
   For that to sit behind the button rather than over it, the button
   must not form a stacking context, so it takes position: relative
   with z-index auto and lifts on hover via `top` rather than
   translateY. The group is given a stacking context so the halo is
   trapped above the band's own background instead of behind it.
   ============================================================ */
/* The stacking context traps the halo above the band's background.
   The wider gap keeps each button's pool of light readable as its own
   rather than merging the two into a single wash. */
.cta-band .btn-group { position: relative; z-index: 0; gap: var(--space-lg); }

.cta-band .btn {
  position: relative;
  border-color: transparent;
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, top .25s ease;
}

/* The halo's own shape never moves — rotating this pill made it read as
   a spinning oblong. Instead three soft radial pools of light drift
   inside a fixed, heavily blurred pill. Each layer is larger than the
   box and travels a different path at a different size, so their peaks
   drift in and out of phase and the light never repeats visibly. */
.cta-band .btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background-image:
    radial-gradient(40% 62% at 50% 50%, rgba(255, 243, 214, .95), rgba(255, 243, 214, 0) 70%),
    radial-gradient(44% 66% at 50% 50%, rgba(229, 201, 120, .85), rgba(229, 201, 120, 0) 72%),
    radial-gradient(52% 72% at 50% 50%, rgba(199, 146, 30, .70), rgba(199, 146, 30, 0) 75%);
  background-size: 165% 210%, 190% 240%, 150% 195%;
  background-repeat: no-repeat;
  filter: blur(16px);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
  animation: cta-glow-drift 16s ease-in-out infinite;
  transition: opacity .4s ease, filter .4s ease;
}

.cta-band .btn:hover::before,
.cta-band .btn:focus-visible::before {
  opacity: .92;
  filter: blur(20px);
  animation-duration: 8s;
}

@keyframes cta-glow-drift {
  0%   { background-position:  8% 42%, 88% 58%, 46%  6%; }
  22%  { background-position: 34% 14%, 58% 88%, 16% 74%; }
  46%  { background-position: 74% 72%, 18% 26%, 82% 38%; }
  68%  { background-position: 40% 90%, 76% 10%, 12% 22%; }
  86%  { background-position: 16% 60%, 96% 44%, 62% 78%; }
  100% { background-position:  8% 42%, 88% 58%, 46%  6%; }
}

/* Solid gold. Dark label, because white on this gold is only 2.8:1. */
.cta-band .btn-gold {
  background-color: var(--gold);
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  background-size: 240% 100%;
  background-position: 145% 0;
  background-repeat: no-repeat;
  color: #2A2622;
}

.cta-band .btn-gold:hover,
.cta-band .btn-gold:focus-visible { background-color: var(--gold-soft); top: -2px; }

/* A sheen that crosses the face once per hover. Driven by
   background-position so it is clipped by the pill automatically —
   an overflow:hidden here would cut off the halo. */
.cta-band .btn-gold:hover { animation: cta-sheen .9s ease-out; }
@keyframes cta-sheen {
  from { background-position: 145% 0; }
  to   { background-position: -45% 0; }
}

.cta-band .btn-gold-ghost {
  background-color: rgba(199, 146, 30, .08);
  color: var(--gold-soft);
  border-color: rgba(229, 201, 120, .5);
}

.cta-band .btn-gold-ghost:hover,
.cta-band .btn-gold-ghost:focus-visible {
  background-color: rgba(229, 201, 120, .18);
  border-color: var(--gold-soft);
  color: #FFF6E2;
  top: -2px;
}

/* The ghost pill is almost transparent, so the halo shows straight through
   it and reads far brighter than the same light does behind solid gold.
   Hold it back to a suggestion. Must stay after the shared ::before rules —
   the specificity is identical, so source order decides. */
.cta-band .btn-gold-ghost::before { opacity: .26; }
.cta-band .btn-gold-ghost:hover::before,
.cta-band .btn-gold-ghost:focus-visible::before { opacity: .5; }

.cta-band .btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

/* translateY would make the button a stacking context and drop the
   halo in front of it, so press moves `top` instead. Keep last. */
.cta-band .btn:active { transform: none; top: 1px; }

@media (max-width: 760px) {
  /* The buttons go full-width here, so the halo layer nearly spans the
     screen and any boundary inside it reads as a hard-edged panel: the
     drifting gradient pools are wider than the layer and get cut off by
     its pill, and mobile compositors can additionally clip filter:blur()
     at the layer's own rectangle.

     Masking is applied after the filter, so a closest-side ellipse — one
     that reaches full transparency at every edge of the layer, not just
     at the corners — puts alpha 0 exactly where any of those cuts could
     land. Whatever the compositor does at the boundary is then invisible,
     and the blur can stay for softness. */
  .cta-band .btn::before {
    inset: -26px -16px;
    filter: blur(14px);
    -webkit-mask-image: radial-gradient(
      closest-side ellipse at center,
      #000 0 40%,
      rgba(0, 0, 0, .55) 72%,
      transparent 100%
    );
    mask-image: radial-gradient(
      closest-side ellipse at center,
      #000 0 40%,
      rgba(0, 0, 0, .55) 72%,
      transparent 100%
    );
    opacity: .5;
  }
  .cta-band .btn:hover::before,
  .cta-band .btn:focus-visible::before { filter: blur(18px); opacity: .8; }

  /* Same restraint as on desktop, one step further: at this size the ghost
     pill fills the width, so its halo covers much more of the band. */
  .cta-band .btn-gold-ghost::before { opacity: .24; }
  .cta-band .btn-gold-ghost:hover::before,
  .cta-band .btn-gold-ghost:focus-visible::before { opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band .btn::before { animation: none; }
  .cta-band .btn-gold:hover { animation: none; }
  .cta-band .btn { transition: none; }
}

/* ============================================================
   Image-band parallax for touch widths.
   background-attachment: fixed drives the effect on desktop, but it is
   ignored by iOS Safari and was dropped by Chrome on Android for
   performance, which is why it is switched off below 1024px. This
   rebuilds the effect from parts that do work on a phone: the photo
   moves to its own layer, taller than the band, and a scroll-driven
   animation slides it as the band crosses the viewport.
   The movement is a transform, so it composites instead of repainting,
   and it is wrapped in @supports — where scroll-driven animations are
   unavailable the layer simply sits still, exactly as it does today.
   ============================================================ */
@media (max-width: 1024px) {
  .img-band {
    /* clip, not hidden: overflow:hidden makes the band a scroll
       container, and view() then resolves its timeline against the band
       instead of the page, leaving it inactive and the photo static.
       overflow:clip crops the taller layer without that side effect. */
    overflow: clip;
    isolation: isolate;
    background-image: none;
  }

  .img-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 124%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .img-band::before { z-index: 1; }
  .img-band > .container { z-index: 2; }

  .band-waves::after { background-image: url("/assets/img/waves-2000.jpg"); }
  .band-meditate::after { background-image: url("/assets/img/meditate-2000.jpg"); }
  .band-rocks::after { background-image: url("/assets/img/rocks-2000.jpg"); }

  @supports (animation-timeline: view()) {
    .img-band::after {
      animation: band-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* 8% of a layer 124% tall is under the 12% of headroom at each
       end, so the band stays fully covered throughout the travel. */
    @keyframes band-parallax {
      from { transform: translate3d(0, -8%, 0); }
      to   { transform: translate3d(0, 8%, 0); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .img-band::after { animation: none; transform: none; }
  }
}