/* Navana — Tesla-clean: stark space, precise grid, teal accent */

:root {
  /* ——— Navana palette 1.0.33 — the only colors on the site ——— */
  --ink: #171A20;              /* body text */
  --ink-muted: #5C5E62;        /* secondary text (6.4:1 on paper) */
  --paper: #FFFFFF;            /* page background, cards */
  --band: #EAF5F3;             /* soft teal section band */
  --line: #E1E8E6;             /* hairlines, borders */
  --accent: #2A9B8F;           /* brand teal */
  --accent-hover: #1F8A80;
  --accent-deep: #176B63;      /* links, eyebrows on light */
  --green: #37635E;            /* softened sage-teal: hero tint, page headers, footer */
  --green-deep: #23403D;       /* Darkness page (same family, deeper) */
  --on-dark: #F4F7F6;          /* text on green / green-deep / photo */
  --on-dark-accent: #C4E4DC;   /* mint: lotus light, focus on dark */
  --warm: #C9A66B;             /* warm sand — sparing: dividers, breath ring, portal hint */
  --warm-soft: #EAD9B8;        /* sand eyebrows on green / photo */
  --warm-deep: #86672F;        /* sand eyebrows on light (AA 5.3:1 on paper) */

  /* rgb channels — only for rgba() where transparency is needed */
  --ink-rgb: 23, 26, 32;
  --paper-rgb: 255, 255, 255;
  --band-rgb: 234, 245, 243;
  --accent-rgb: 42, 155, 143;
  --accent-hover-rgb: 31, 138, 128;
  --accent-deep-rgb: 23, 107, 99;
  --green-rgb: 55, 99, 94;
  --green-deep-rgb: 35, 64, 61;
  --on-dark-rgb: 244, 247, 246;
  --on-dark-accent-rgb: 196, 228, 220;
  --warm-rgb: 201, 166, 107;
  --warm-soft-rgb: 234, 217, 184;

  /* warm-accent switch — add class "no-warm" to <html> or <body> to fall back to all-teal */
  --eyebrow: var(--warm-deep);
  --eyebrow-on-dark: var(--warm-soft);
  --highlight: var(--warm);
  --highlight-rgb: var(--warm-rgb);
  --portal-core-rgb: var(--warm-soft-rgb);

  /* legacy aliases (existing selectors keep working) */
  --bg: var(--paper);
  --bg-subtle: var(--band);
  --bg-band: var(--band);
  --bg-footer: var(--green);
  --text: var(--ink);
  --text-secondary: var(--ink-muted);
  --text-tertiary: var(--ink-muted);
  --accent-wash: rgba(var(--accent-rgb), 0.08);
  --accent-line: rgba(var(--accent-rgb), 0.32);
  --line-strong: var(--line);
  --page-header-bg: var(--green);
  --page-header-fg: var(--on-dark);
  --page-header-muted: rgba(var(--on-dark-rgb), 0.88);
  --page-header-eyebrow: var(--on-dark-accent);

  --max: 920px;
  --max-wide: 1120px;
  --header-h: 4.25rem;
  --font: "Gotham SSm", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* 1.0.40: reserve the classic (Windows) scrollbar from the first paint — the Home gate script now
     runs mid-parse, and the bar appearing a moment later narrowed the page by 15px (CLS 0.006) */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* No site-wide lattice wallpaper — clean field; lotus geometry lives in the mark only */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

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

a {
  color: var(--accent-deep);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

a:hover { color: var(--accent); }

a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--on-dark);
  padding: 0.6rem 1rem;
  z-index: 1000;
}

.skip-link:focus { left: 1rem; top: 1rem; }

/* Header — thin chrome */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--paper-rgb), 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 0 var(--accent-line);
}

.header-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  overflow: visible;
  flex-shrink: 0;
  text-decoration: none;
}

.logo:hover { opacity: 0.85; color: var(--text); }

.logo-mark {
  height: 44px;
  width: 44px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
  /* Full lotus petals — never clip */
  overflow: visible;
}

.logo-wordmark {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  line-height: 1;
  white-space: nowrap;
}

/* Legacy combined PNG class kept for any leftover refs */
.logo-img {
  height: 44px;
  width: auto;
  max-width: min(200px, 48vw);
  object-fit: contain;
  object-position: left center;
  display: block;
  overflow: visible;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text);
}

.nav-toggle-bars {
  display: block;
  width: 1.125rem;
  height: 1px;
  background: currentColor;
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.site-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a[aria-current="page"]:not(.nav-cta) {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.site-nav a.nav-cta {
  background: var(--accent);
  color: var(--text);
  margin-left: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 0;
  font-weight: 500;
}

.site-nav a.nav-cta:hover {
  background: var(--accent-deep);
  color: var(--on-dark);
  opacity: 1;
}

/* Layout */
main { min-height: 60vh; }

.container {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 2rem;
}

.container.narrow {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: 7rem 0;
}

.section-tight { padding: 4.5rem 0; }

.section-alt {
  background: var(--bg-band);
}

.section-band {
  background: var(--bg-band);
}

/* After a banded page-header, first content section stays clean white (rhythm) */
.page-header + .section.section-alt {
  background: var(--bg);
}

.page-header + .section.section-alt .card,
.page-header + .section.section-alt .program-card {
  background: linear-gradient(180deg, var(--accent-wash) 0%, transparent 100%);
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
}

/* Thin architectural rule */
.rule {
  border: none;
  border-top: 1px solid var(--accent-line);
  margin: 0;
  max-width: var(--max-wide);
  margin-left: auto;
  margin-right: auto;
}

.rule-accent {
  border: none;
  width: 64px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.25rem;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 1.25rem;
}

h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 500;
  max-width: 16ch;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 500;
  max-width: 18ch;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  max-width: 36rem;
  margin: 0;
}

.prose { max-width: 36rem; }

.prose p {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.prose p:last-child { margin-bottom: 0; }

.prose a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:hover { color: var(--accent); }

.muted { color: var(--text-secondary); }
.small { font-size: 0.875rem; line-height: 1.45; }

/* Hero — generated Kailash-style photo (hero-kailash-style-generated.jpg), soft overlay for type */
.hero {
  position: relative;
  isolation: isolate;
  padding: 8.5rem 0 6.75rem;
  color: var(--on-dark);
  background-color: var(--green);
  background-image: url("../assets/hero-kailash-style-generated.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Soft vignette (1.0.5 approach) — keep generated Kailash hero readable */
  background: linear-gradient(
    180deg,
    rgba(var(--green-rgb), 0.16) 0%,
    rgba(var(--green-rgb), 0.14) 40%,
    rgba(var(--green-deep-rgb), 0.38) 100%
  );
}

.hero > .container {
  position: relative;
  z-index: 2; /* keep copy above lotus wrap (z-index: 1) */
}

.hero .eyebrow {
  color: rgba(var(--on-dark-accent-rgb), 0.95);
}

.hero h1 {
  color: var(--on-dark);
}

.hero .lead {
  margin-top: 0.25rem;
  color: rgba(var(--on-dark-rgb), 0.88);
  max-width: 32rem; /* slightly tighter than global .lead so settled lotus clears the band */
}

.hero .btn-secondary {
  /* Quiet text path — primary CTA carries the invite */
  color: rgba(var(--on-dark-rgb), 0.88);
  box-shadow: none;
  background: transparent;
}

.hero-line {
  margin-top: 3.25rem;
  width: 48px;
  height: 2px;
  background: rgba(var(--on-dark-rgb), 0.7);
}

/* Buttons — rectangular, product-like */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), opacity 0.15s var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--text);
}

.btn-primary:hover {
  background: var(--accent-deep);
  color: var(--on-dark);
  opacity: 1;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
}

.btn-secondary:hover {
  background: var(--accent-wash);
  color: var(--text);
}

.btn-light {
  background: var(--accent);
  color: var(--text);
}

.btn-light:hover {
  background: var(--accent-deep);
  color: var(--on-dark);
  opacity: 1;
}

.btn-outline-light {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
}

.btn-outline-light:hover {
  background: var(--accent-wash);
  color: var(--text);
}

/* Value grid — no cards, thin rules */
.value-grid {
  display: grid;
  gap: 0;
  margin-top: 3.5rem;
  border-top: 1px solid var(--accent-line);
}

@media (min-width: 720px) {
  .value-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-block {
  padding: 2rem 0 2rem 1.25rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-wash) 0%, transparent 72%);
}

@media (min-width: 720px) {
  .value-block {
    padding: 2.5rem 2rem 2.5rem 1.5rem;
    border-bottom: none;
    border-right: 1px solid var(--line);
    border-left: 2px solid var(--accent);
  }
  .value-block:last-child {
    border-right: none;
    padding-right: 0;
  }
  .value-block:not(:first-child) {
    padding-left: 1.5rem;
  }
}

.value-block h3 {
  margin-bottom: 0.75rem;
  color: var(--text);
}

.value-block h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}

.value-block p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 22rem;
}

/* Path list — architectural rows */
.path-list {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--accent-line);
}

.path-list li {
  border-bottom: 1px solid var(--line);
}

.path-list a {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.75rem 1rem 1.75rem 0.75rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

.path-list a:hover {
  opacity: 1;
  color: inherit;
  background: var(--accent-wash);
}

.path-index {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.path-body strong {
  display: block;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.path-body span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 36rem;
}

/* Legacy card support (inner pages) — decluttered */
.card-grid {
  display: grid;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 2rem 0;
  box-shadow: none;
  height: auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .card-grid.cols-3 .card,
  .card-grid.cols-2 .card {
    padding: 2rem 1.5rem 2rem 0;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
  .card-grid.cols-3 .card:last-child,
  .card-grid.cols-2 .card:last-child {
    border-right: none;
  }
}

.card h3 { margin-bottom: 0.65rem; }

.card p {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1;
}

.card .card-link {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--accent-deep);
  margin-top: auto;
}

.card .card-link:hover { color: var(--accent); }

.value-card {
  text-align: left;
  border-top: none;
}

.value-card h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}

.value-icon,
.program-mark,
.path-mark,
.lotus,
.breath-circle,
.mandala-stage,
.section-divider,
.vision-ornament,
.hero-logo,
.footer-brand {
  display: none !important;
}

/* Notes */
.note {
  background: var(--accent-wash);
  border-left: 2px solid var(--accent);
  padding: 1.5rem 1.5rem;
  border-radius: 0;
  margin: 2rem 0;
}

.note-warn { background: var(--bg-subtle); }

.note p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.note p + p { margin-top: 0.6rem; }
.note strong { color: var(--text); font-weight: 500; }

.placeholder {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.84em;
  background: rgba(var(--ink-rgb), 0.04);
  padding: 0.12em 0.4em;
  border-radius: 0;
  color: var(--text);
}

/* Page header — pale teal band (breaks plain white) */
.page-header {
  padding: 5.5rem 0 3rem;
  background: var(--bg-band);
  border-bottom: 1px solid var(--accent-line);
}

.page-header .lead { margin-top: 0.75rem; }

.content-block + .content-block {
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--accent-line);
}

.two-col {
  display: grid;
  gap: 3rem;
}

@media (min-width: 760px) {
  .two-col {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
  }
}

.program-card {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem !important;
}

/* Contact list */
.contact-list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.contact-list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 1rem;
}

.contact-list li:first-child { border-top: 1px solid var(--line); }

.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
}

/* Footer */
.site-footer {
  background: var(--bg-footer);
  color: rgba(var(--on-dark-rgb), 0.85);
  padding: 4rem 0 2rem;
  margin-top: 0;
  border-top: 2px solid var(--accent);
}

.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: 0.875rem;
}

.site-footer a:hover { opacity: 0.65; color: var(--on-dark); }

.footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.footer-logo,
.footer-mark {
  height: 36px;
  width: 36px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 0;
  opacity: 1;
  overflow: visible;
  flex-shrink: 0;
}

.footer-wordmark {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
  line-height: 1;
}

.site-footer .small { color: rgba(var(--on-dark-rgb), 0.85); }

.footer-nav ul,
.footer-values ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li,
.footer-values li { margin-bottom: 0.6rem; }

.footer-values li {
  color: rgba(var(--on-dark-rgb), 0.85);
  font-size: 0.875rem;
}

.footer-heading {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), 0.85);   /* AA on black (6.4:1) */
  margin: 0 0 1rem;
  font-weight: 500;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--on-dark-rgb), 0.08);
  font-size: 0.75rem;
  color: rgba(var(--on-dark-rgb), 0.85);   /* AA on black (6.4:1) */
}

/* Kill motion — Tesla restraint */
.fade-in,
.fade-in-delay-1,
.fade-in-delay-2,
.fade-in-delay-3 {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Mobile */
@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 2rem 1rem;
    display: none;
  }

  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav a {
    padding: 0.85rem 0;
    font-size: 0.9375rem;
  }

  .site-nav a.nav-cta {
    margin-left: 0;
    text-align: center;
    margin-top: 0.5rem;
  }

  .section { padding: 4.5rem 0; }
  .hero { padding: 5rem 0 4rem; }
  .page-header { padding: 3.5rem 0 2rem; }
  .header-inner,
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Section sage → clean white (compat) */
.section-sage {
  background: var(--bg-band);
}
.section-sage .eyebrow { color: var(--accent-deep); }
.section-sage h1,
.section-sage h2,
.section-sage h3 { color: var(--text); }
.section-sage .lead { color: var(--text-secondary); }
.section-sage a { color: var(--accent-deep); }
.section-sage a:hover { color: var(--accent); }

.section-vision h2 { max-width: 20ch; }

/* Intro splash — Kailash landing + Enter (stillness). On Enter: cinematic lotus portal
   stillness → awaken → lumen → expand → zero → emerge (~3.8s desktop). Cross-dissolve, no hard cut.
   HERO PHOTO NEVER MOVES UP: no translateY/top/bg-position anim; no bg-size zoom that reads
   as a push-up. #home-hero stays position:fixed (full-viewport cover) through emerge/done;
   only has-entered unpins with margin-top:-header-h so the painted crop matches landing
   (sticky header overlays the same frame — no peak drop). Main emerges over the pinned photo.
   Light FROM lotus center → soft afterglow wash on hero after lotus fades. Scroll locked until done.
   intro-locked hide rules exclude emerge/done so chrome can show while scroll stays locked.
   z-index must beat sticky .site-header (100), #main (1), and Elementor overlays.
   High-specificity selectors beat .elementor-kit-* button/p resets on body. */
body.intro-locked {
  overflow: hidden !important;
  overflow-x: hidden !important;
  height: 100%;
  touch-action: none;
}

/* Keep horizontal overflow clipped while portal runs (scale/light field) */
body.intro-entering {
  overflow-x: hidden !important;
}

/* Pin hero PHOTO as fixed full-viewport layer during portal AND through emerge/done.
   Stationary cover — no translateY / top / bg-position / bg-size zoom.
   Header chrome fades in as overlay without pushing the mountain.
   Unpin only on has-entered (see below) with -header-h pull-up so crop matches. */
body.intro-locked #home-hero,
body.intro-entering #home-hero,
body.is-portal-emerge #home-hero,
body.is-portal-done #home-hero {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  z-index: 40;
  display: flex;
  align-items: center;
  transform: none !important;
  translate: none;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: none !important;
  overflow: hidden;
  overflow-x: hidden;
}

/* Hold in-flow space so sections do not jump up under the pinned hero
   (pin lasts through emerge/done until has-entered). */
body.intro-locked #main::before,
body.intro-entering #main::before,
body.is-portal-emerge #main::before,
body.is-portal-done #main::before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  visibility: hidden;
}

/* 1.0.37/1.0.38: no forced width:100% on the hero copy while pinned. The settled (has-entered)
   hero sizes the container to its content and centres it; forcing full width during
   emerge/done made the copy jump ~200px sideways at the handoff (CLS ~0.067). */

/* After portal: unpin only on has-entered.
   Pull hero under sticky header (margin-top: -header-h) so the element box still
   starts at document y=0 with min-height 100vh — identical cover crop to the
   fixed full-viewport pin. Sticky header overlays; no peak drop / reframe. */
body.has-entered #home-hero {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  /* 1.0.37/1.0.38: header box = --header-h + 1px hairline; pull up by the full box so the
     hero top stays at y=0 (was y=1 → 1px photo drop at handoff) */
  margin-top: calc(-1 * (var(--header-h) + 1px)) !important;
  margin-bottom: 0 !important;
  z-index: auto;
  transform: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: none !important;
  display: flex;
  align-items: center;
  /* 1.0.37/1.0.38: clip both axes like the pinned phase. .hero's overflow-x:hidden alone makes
     overflow-y auto, so with classic scrollbars (Windows) the settled hero grew its own
     15px scrollbar and the copy jumped ~7px sideways at the handoff. */
  overflow: hidden;
}

body.has-entered #main::before {
  content: none;
  display: none;
  height: 0;
}

/* No main padding-top during emerge/done — hero stays fixed full-bleed;
   sticky handoff uses -header-h on has-entered instead. */
body.is-portal-emerge #main,
body.is-portal-done #main,
body.has-entered #main {
  padding-top: 0;
}

/* While locked / entering, main chrome must not intercept Enter / splash clicks.
   Emerge/done: restore pointer-events so header + content are usable (fix 1.0.19 block). */
body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header,
body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main,
body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer,
body.intro-entering.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header,
body.intro-entering.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main,
body.intro-entering.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer {
  pointer-events: none !important;
}

body.is-portal-emerge .site-header,
body.is-portal-emerge #main,
body.is-portal-emerge .site-footer,
body.is-portal-emerge #home-hero > .container,
body.is-portal-done .site-header,
body.is-portal-done #main,
body.is-portal-done .site-footer,
body.is-portal-done #home-hero > .container {
  pointer-events: auto !important;
}

/* Hide main chrome until emerge — seamless portal, no flash of unfinished page.
   Collapse header layout too: opacity alone still leaves a sticky ~header-h band. */
body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header,
body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header {
  /* Overlay fade only — no translateY slide; pinned hero ignores height collapse */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none;
  z-index: 100;
}

body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header .header-inner,
body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-header .header-inner {
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

body.is-portal-emerge .site-header,
body.is-portal-done .site-header {
  /* Fade in over pinned hero — no vertical slide of chrome or photo */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  opacity: 1;
  visibility: visible;
  transform: none !important;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 0 var(--accent-line);
  background: rgba(var(--paper-rgb), 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
  z-index: 100;
  pointer-events: auto;
}

body.has-entered .site-header {
  position: sticky;
  top: 0;
  opacity: 1;
  visibility: visible;
  transform: none !important;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 0 var(--accent-line);
  background: rgba(var(--paper-rgb), 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: none;
  z-index: 100;
}

body.is-portal-emerge .site-header .header-inner,
body.is-portal-done .site-header .header-inner,
body.has-entered .site-header .header-inner {
  min-height: var(--header-h);
  height: auto;
  overflow: visible;
}

body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #home-hero > .container,
body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #home-hero > .container {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  clip-path: circle(0% at 50% 46%);
}

body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main > :not(#home-hero),
body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main > :not(#home-hero),
body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer,
body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer {
  opacity: 0;
  clip-path: circle(0% at 50% 42%);
}

/* First paint = Kailash hero scene (not a separate dark-teal splash) */
.intro-splash,
#intro-splash {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  /* 1.0.40: 100% (not 100vw) so the gate photo sits pixel-exact on the pinned hero photo even with a
     classic scrollbar — the quick cross-dissolve below is then invisible */
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
  background-color: var(--green) !important;
  background-image: url("../assets/hero-kailash-style-generated.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box;
  /* Photo stays locked — cross-dissolve via opacity only (no bg-size zoom / slide) */
  transform: none !important;
  transition: none;
}

/* Match .hero-overlay — soft vignette over generated Kailash hero */
.intro-splash-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--green-rgb), 0.16) 0%,
    rgba(var(--green-rgb), 0.14) 40%,
    rgba(var(--green-deep-rgb), 0.38) 100%
  );
  transition: opacity 2.2s var(--ease);
}

/* Leaving: panel fades first; the gate photo (identical to the pinned hero photo underneath)
   dissolves quickly. 1.0.40: was 2.4s — the gate sits ABOVE the hero lotus and light, so the
   petals' opening (0.45–1.65s) happened behind it and was never seen. */
.intro-splash.is-leaving {
  pointer-events: none !important;
  animation: intro-splash-dissolve 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.intro-splash.is-leaving .intro-splash-panel {
  animation: intro-panel-out 0.55s var(--ease) forwards;
}

.intro-splash.is-leaving .intro-splash-scrim {
  opacity: 1; /* 1.0.40: keep = .hero-overlay, so the dissolve shows no brightness change */
}

.intro-splash.is-done {
  opacity: 0;
  visibility: hidden;
  animation: none;
  pointer-events: none !important;
}

.intro-splash-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1.5rem 1.25rem;
  text-align: center;
  max-width: min(40rem, 92vw);
  width: 100%;
  pointer-events: auto;
  isolation: isolate;
}

/* Eyebrow — matches hero Nonprofit */
body.elementor-kit-22 .intro-splash .intro-splash-eyebrow,
.intro-splash .intro-splash-eyebrow {
  display: block !important;
  margin: 0 0 1.1rem !important;
  font-family: var(--font) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: rgba(var(--on-dark-accent-rgb), 0.95) !important;
}

/* Headline — matches hero h1 */
body.elementor-kit-22 .intro-splash .intro-splash-headline,
.intro-splash .intro-splash-headline,
#intro-splash-headline {
  margin: 0 0 1rem !important;
  font-family: var(--font) !important;
  font-size: clamp(2.25rem, 6.5vw, 4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: var(--on-dark) !important;
  text-transform: none !important;
  max-width: 16ch;
}

/* Lead — matches hero .lead */
body.elementor-kit-22 .intro-splash .intro-splash-lead,
.intro-splash .intro-splash-lead {
  margin: 0 0 1.75rem !important;
  font-family: var(--font) !important;
  font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
  color: rgba(var(--on-dark-rgb), 0.88) !important;
  text-transform: none !important;
  max-width: 38rem;
}

body.elementor-kit-22 .intro-splash .intro-enter,
.intro-splash .intro-enter,
#intro-enter {
  position: relative;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem !important;
  min-width: 8.5rem !important;
  min-height: 2.75rem !important;
  padding: 0.85rem 1.75rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--accent) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

body.elementor-kit-22 .intro-splash .intro-enter:hover,
.intro-splash .intro-enter:hover,
#intro-enter:hover {
  background: var(--accent-deep) !important;
  color: var(--on-dark) !important;
}

body.elementor-kit-22 .intro-splash .intro-enter:focus-visible,
.intro-splash .intro-enter:focus-visible,
#intro-enter:focus-visible {
  outline: 2px solid var(--on-dark-accent) !important;
  outline-offset: 3px !important;
}

@keyframes intro-splash-dissolve {
  0% {
    opacity: 1;
    visibility: visible;
  }
  18% {
    opacity: 0.92;
  }
  45% {
    opacity: 0.62;
  }
  72% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes intro-panel-out {
  to {
    opacity: 0;
    transform: none;
  }
}

/* Landing copy + Enter visible early (no lotus wait) */
body.elementor-kit-22 .intro-splash .intro-splash-eyebrow,
.intro-splash .intro-splash-eyebrow,
body.elementor-kit-22 .intro-splash .intro-splash-headline,
.intro-splash .intro-splash-headline,
body.elementor-kit-22 .intro-splash .intro-splash-lead,
.intro-splash .intro-splash-lead,
body.elementor-kit-22 .intro-splash .intro-enter,
.intro-splash .intro-enter,
#intro-enter {
  animation: intro-copy-in 0.55s var(--ease) both !important;
}

body.elementor-kit-22 .intro-splash .intro-splash-eyebrow,
.intro-splash .intro-splash-eyebrow {
  animation-delay: 0.06s !important;
}

body.elementor-kit-22 .intro-splash .intro-splash-headline,
.intro-splash .intro-splash-headline {
  animation-delay: 0.12s !important;
}

body.elementor-kit-22 .intro-splash .intro-splash-lead,
.intro-splash .intro-splash-lead {
  animation-delay: 0.2s !important;
}

body.elementor-kit-22 .intro-splash .intro-enter,
.intro-splash .intro-enter,
#intro-enter {
  animation-delay: 0.32s !important;
}

@keyframes intro-copy-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ——— Lotus portal light field (fixed overlay) ——— */
.lotus-portal {
  position: fixed;
  inset: 0;
  z-index: 2147482900;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  overflow-x: hidden;
  contain: layout paint;
  max-width: 100vw;
}

body.intro-entering .lotus-portal,
body.is-portal-awaken .lotus-portal,
body.is-portal-lumen .lotus-portal,
body.is-portal-expand .lotus-portal,
body.is-portal-zero .lotus-portal {
  opacity: 1;
  visibility: visible;
}

/* Portal fades on emerge — light story continues as hero afterglow (not a hard cut) */
body.is-portal-emerge .lotus-portal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s var(--ease), visibility 0s linear 0.85s;
}

body.is-portal-done .lotus-portal,
body.has-entered .lotus-portal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.lotus-light-field {
  /* 1.0.40: one fixed-size soft disc, animated with transform: scale + opacity ONLY.
     Before: width/height/border-radius/background-gradient changed per phase — gradients don't
     interpolate (brightness popped at each phase), the zero gradient was still visible at the
     clipped edge (hard-edged pale disc → rounded rectangle → full-screen veil, then a hard cut),
     and animating size repainted a ~2000px layer every frame (stutter). The gradient now reaches
     full transparency inside its own circle, so no edge can ever show. Same phases/timing/colours. */
  position: absolute;
  left: 50%;
  top: 48%;
  width: 100vmin;
  height: 100vmin;
  margin: -50vmin 0 0 -50vmin;
  border-radius: 50%;
  transform: scale(0.02);
  transform-origin: 50% 50%;
  opacity: 0;
  background: radial-gradient(
    circle closest-side,
    rgba(var(--paper-rgb), 0.86) 0%,
    rgba(var(--band-rgb), 0.6) 25%,
    rgba(var(--on-dark-accent-rgb), 0.33) 48%,
    rgba(var(--band-rgb), 0.16) 68%,
    rgba(var(--accent-rgb), 0.05) 85%,
    rgba(var(--accent-rgb), 0) 100%
  );
  will-change: transform, opacity;
  transition:
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-portal-awaken .lotus-light-field {
  opacity: 0.18;
  transform: scale(0.06);
}

body.is-portal-lumen .lotus-light-field {
  opacity: 0.42;
  transform: scale(0.36);
}

body.is-portal-expand .lotus-light-field {
  opacity: 0.68;
  transform: scale(1);
}

/* Zero point: the light becomes a soft field over the whole frame (no edge in view) */
body.is-portal-zero .lotus-light-field {
  opacity: 0.6;
  transform: scale(3.2);
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-portal-emerge .lotus-light-field {
  opacity: 0;
  transform: scale(3.4);
  transition:
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

body.is-portal-done .lotus-light-field,
body.has-entered .lotus-light-field {
  will-change: auto;
}

/* Soft secondary wash — never a hard full-screen white flash */
.lotus-portal::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(var(--band-rgb), 0);
  transition: opacity 0.9s var(--ease), background 0.9s var(--ease);
}

body.is-portal-expand .lotus-portal::after {
  opacity: 0.1;
  background: rgba(var(--band-rgb), 0.22);
}

body.is-portal-zero .lotus-portal::after {
  opacity: 0.22;
  background: rgba(var(--band-rgb), 0.32);
}

body.is-portal-emerge .lotus-portal::after {
  opacity: 0.06;
  background: rgba(var(--band-rgb), 0.14);
  transition: opacity 0.9s var(--ease), background 0.9s var(--ease);
}

/* ——— Hero lotus — hidden until Enter; then awaken + camera forward ——— */
.hero-lotus-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(1);
  transform-origin: center center;
}

/* Visible only while the portal lotus is playing (awaken → lumen → expand → zero) */
.hero.is-lotus-play .hero-lotus-wrap {
  opacity: 1;
  visibility: visible;
}

/* Entering space through the lotus — push aligned to zero (~3.2s) */
.hero.is-lotus-play .hero-lotus-wrap {
  animation: lotus-camera-forward 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Zero-point: dissolve lotus (must be gone before emerge) */
body.is-portal-zero .hero.is-lotus-play .hero-lotus-wrap {
  animation: lotus-camera-dissolve 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes lotus-camera-dissolve {
  from {
    transform: scale(2.35);
    opacity: 0.12;
  }
  to {
    transform: scale(2.65);
    opacity: 0;
  }
}

/* Emerge / done / main: lotus already hidden — force collapse */
body.is-portal-emerge .hero.is-lotus-play .hero-lotus-wrap,
body.is-portal-emerge .hero.is-lotus-done .hero-lotus-wrap,
body.is-portal-done .hero-lotus-wrap,
body.has-entered .hero-lotus-wrap,
.hero.is-lotus-done .hero-lotus-wrap {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  /* Reset scale so settled page does not keep a wider-than-viewport overflow box */
  transform: none;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

@keyframes lotus-camera-forward {
  /* 0–18%: stillness / anticipation — lotus present, almost motionless */
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  8% {
    opacity: 0.92;
    transform: scale(0.96);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  /* 18–42%: hold while petals awaken (organic open, not a zoom) */
  36% {
    transform: scale(1.06);
    opacity: 1;
  }
  /* 42–78%: camera push toward center — entering space */
  58% {
    transform: scale(1.42);
    opacity: 1;
  }
  78% {
    transform: scale(1.95);
    opacity: 0.75;
  }
  /* 78–100%: approach center; dissolve takes over at zero */
  92% {
    transform: scale(2.28);
    opacity: 0.22;
  }
  100% {
    transform: scale(2.4);
    opacity: 0.08;
  }
}

/* Hero PHOTO: locked cover for entire portal — never zoom / slide / translate */
body.intro-entering #home-hero,
body.is-portal-awaken #home-hero,
body.is-portal-lumen #home-hero,
body.is-portal-expand #home-hero,
body.is-portal-zero #home-hero,
body.is-portal-emerge #home-hero,
body.is-portal-done #home-hero,
body.has-entered #home-hero {
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
}

.hero .navana-lotus-svg.hero-lotus {
  display: block;
  width: min(9.5rem, 38vw);
  height: auto;
  max-width: 152px;
  overflow: visible;
  /* 1.0.40: ONE soft drop-shadow (was 2, then 3 during lumen/expand). Stacked blurs on the lotus
     while it scales 1→2.4× re-rendered every frame: the camera push ran at ~12 fps. Same glow colour. */
  filter: drop-shadow(0 0 18px rgba(var(--green-deep-rgb), 0.6));
  transform-origin: center center;
}

body.is-portal-lumen .hero .navana-lotus-svg.hero-lotus,
body.is-portal-expand .hero .navana-lotus-svg.hero-lotus {
  filter: drop-shadow(0 0 24px rgba(var(--band-rgb), 0.5));
}

/* Petal rings — organic scale-open from center (after ~0.8s stillness) */
.hero .lotus-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.72);
  opacity: 0.35;
}

.hero.is-lotus-play .lotus-ring-outer {
  animation: lotus-ring-open 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards;
}

.hero.is-lotus-play .lotus-ring-middle {
  animation: lotus-ring-open 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.62s forwards;
}

.hero.is-lotus-play .lotus-ring-inner {
  animation: lotus-ring-open 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.78s forwards;
}

.hero.is-lotus-done .lotus-ring {
  transform: scale(1);
  opacity: 1;
  animation: none;
}

@keyframes lotus-ring-open {
  0% {
    transform: scale(0.72);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.045);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Idle (before Enter): no strokes visible */
.hero .lotus-path {
  fill: transparent;
  stroke: var(--on-dark-accent);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero .lotus-petal-outer { stroke: var(--on-dark-accent); }
.hero .lotus-petal-middle { stroke: color-mix(in srgb, var(--accent) 50%, var(--on-dark-accent)); }
.hero .lotus-petal-inner { stroke: var(--accent); stroke-width: 1.55; }
.hero .lotus-hex { stroke: var(--on-dark); stroke-width: 1.45; }

/* Play stroke-draw + soft fill after stillness (botanical tempo, not flat rotate) */
.hero.is-lotus-play .lotus-path {
  animation: lotus-stroke-draw 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

.hero.is-lotus-play .lotus-petal-outer,
.hero.is-lotus-play .lotus-petal-middle {
  animation-name: lotus-stroke-draw, lotus-fill-light;
  animation-duration: 1.05s, 0.55s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
  animation-fill-mode: forwards, forwards;
}

.hero.is-lotus-play .lotus-petal-outer { animation-delay: 0.45s, 1.45s; }
.hero.is-lotus-play .lotus-petal-middle { animation-delay: 0.65s, 1.65s; }

.hero.is-lotus-play .lotus-petal-inner {
  animation-name: lotus-stroke-draw, lotus-fill-teal;
  animation-duration: 0.95s, 0.5s;
  animation-delay: 0.85s, 1.85s;
  animation-fill-mode: forwards, forwards;
}

.hero.is-lotus-play .lotus-hex {
  animation-name: lotus-stroke-draw, lotus-fill-hex, lotus-hex-glow;
  animation-duration: 0.75s, 0.45s, 1.1s;
  animation-delay: 1.05s, 1.95s, 1.9s;
  animation-fill-mode: forwards, forwards, forwards;
}

/* Settled state after animation (or reduced-motion) */
.hero.is-lotus-done .lotus-path {
  stroke-dashoffset: 0;
  animation: none;
}
.hero.is-lotus-done .lotus-petal-outer,
.hero.is-lotus-done .lotus-petal-middle {
  fill: rgba(var(--on-dark-rgb), 0.72);
}
.hero.is-lotus-done .lotus-petal-inner {
  fill: rgba(var(--accent-rgb), 0.88);
  stroke: var(--accent);
}
.hero.is-lotus-done .lotus-hex {
  fill: rgba(var(--on-dark-rgb), 0.4);
  stroke: var(--on-dark);
}

@keyframes lotus-stroke-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes lotus-fill-light {
  from { fill: transparent; }
  to { fill: rgba(var(--on-dark-rgb), 0.72); }
}

@keyframes lotus-fill-teal {
  from { fill: transparent; }
  to { fill: rgba(var(--accent-rgb), 0.88); }
}

@keyframes lotus-fill-hex {
  from { fill: transparent; }
  to { fill: rgba(var(--on-dark-rgb), 0.4); }
}

@keyframes lotus-hex-glow {
  0% { filter: none; }
  45% { filter: drop-shadow(0 0 5px rgba(var(--on-dark-rgb), 0.55)); }
  100% { filter: none; }
}

/* ——— Main emerge: from center outward (clip) + gentle rise ——— */
body.is-portal-emerge #home-hero > .container,
body.is-portal-done #home-hero > .container,
body.has-entered #home-hero > .container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  clip-path: circle(160% at 50% 46%);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 1.0.37/1.0.38: the copy box is now content-width (same as settled) instead of forced full width.
   clip-path % radii scale with the box, so pin the reveal circle to the old full-width
   geometry (160% of a min(1120px, 100vw) × ~24rem box) — the emerge circle opens exactly as before. */
@media (min-width: 721px) {
  body.is-portal-emerge #home-hero > .container,
  body.is-portal-done #home-hero > .container,
  body.has-entered #home-hero > .container {
    clip-path: circle(calc(1.6 * hypot(min(1120px, 100vw), 24rem) / 1.41421) at 50% 46%);
  }
}

body.is-portal-emerge #home-hero > .container .eyebrow {
  animation: portal-emerge-rise 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s both;
}
body.is-portal-emerge #home-hero > .container h1 {
  animation: portal-emerge-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}
body.is-portal-emerge #home-hero > .container .lead {
  animation: portal-emerge-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s both;
}
body.is-portal-emerge #home-hero > .container .btn-row {
  animation: portal-emerge-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}
body.is-portal-emerge #home-hero > .container .hero-line {
  animation: portal-emerge-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}

body.is-portal-emerge #main > :not(#home-hero),
body.is-portal-done #main > :not(#home-hero),
body.has-entered #main > :not(#home-hero),
body.is-portal-emerge .site-footer,
body.is-portal-done .site-footer,
body.has-entered .site-footer {
  position: relative;
  z-index: 60; /* above pinned hero (40) — main emerges OVER stationary photo */
  opacity: 1;
  clip-path: circle(160% at 50% 42%);
  transition:
    opacity 0.8s var(--ease) 0.08s,
    clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s;
}

body.has-entered #main > :not(#home-hero),
body.has-entered .site-footer {
  z-index: auto;
}

@keyframes portal-emerge-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .hero .navana-lotus-svg.hero-lotus {
    width: min(7.5rem, 42vw);
    max-width: 120px;
  }

  .lotus-light-field {
    top: 46%;
  }

  .hero.is-lotus-play .hero-lotus-wrap {
    animation-duration: 2s;
  }

  body.is-portal-zero .hero.is-lotus-play .hero-lotus-wrap {
    animation-duration: 0.55s;
  }

  .hero.is-lotus-play .lotus-ring-outer {
    animation-delay: 0.35s;
  }
  .hero.is-lotus-play .lotus-ring-middle {
    animation-delay: 0.5s;
  }
  .hero.is-lotus-play .lotus-ring-inner {
    animation-delay: 0.65s;
  }

  @keyframes lotus-camera-forward {
    0% { transform: scale(0.92); opacity: 0; }
    10% { opacity: 0.95; transform: scale(0.97); }
    20% { opacity: 1; transform: scale(1); }
    40% { transform: scale(1.05); opacity: 1; }
    62% { transform: scale(1.32); opacity: 1; }
    80% { transform: scale(1.72); opacity: 0.8; }
    94% { transform: scale(2.0); opacity: 0.32; }
    100% { transform: scale(2.15); opacity: 0.1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-splash.is-leaving {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .intro-splash.is-leaving .intro-splash-panel {
    animation: none;
  }

  .intro-splash .intro-splash-eyebrow,
  .intro-splash .intro-splash-headline,
  .intro-splash .intro-splash-lead,
  .intro-splash .intro-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .lotus-portal,
  .lotus-light-field,
  .lotus-portal::after {
    transition: none !important;
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .hero.is-lotus-play .lotus-path,
  .hero.is-lotus-play .lotus-petal-outer,
  .hero.is-lotus-play .lotus-petal-middle,
  .hero.is-lotus-play .lotus-petal-inner,
  .hero.is-lotus-play .lotus-hex,
  .hero.is-lotus-play .lotus-ring-outer,
  .hero.is-lotus-play .lotus-ring-middle,
  .hero.is-lotus-play .lotus-ring-inner,
  .hero.is-lotus-play .hero-lotus-wrap {
    animation: none !important;
  }

  /* Reduced motion: no lotus on main after enter */
  .hero.is-lotus-play .hero-lotus-wrap,
  .hero.is-lotus-done .hero-lotus-wrap,
  body.is-portal-emerge .hero-lotus-wrap,
  body.is-portal-done .hero-lotus-wrap,
  body.has-entered .hero-lotus-wrap {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none;
  }

  .hero.is-lotus-play .lotus-ring,
  .hero.is-lotus-done .lotus-ring {
    transform: scale(1);
    opacity: 1;
  }

  .hero.is-lotus-play .lotus-path,
  .hero.is-lotus-done .lotus-path {
    stroke-dashoffset: 0 !important;
  }

  .hero.is-lotus-play .lotus-petal-outer,
  .hero.is-lotus-play .lotus-petal-middle,
  .hero.is-lotus-done .lotus-petal-outer,
  .hero.is-lotus-done .lotus-petal-middle {
    fill: rgba(var(--on-dark-rgb), 0.72);
  }

  .hero.is-lotus-play .lotus-petal-inner,
  .hero.is-lotus-done .lotus-petal-inner {
    fill: rgba(var(--accent-rgb), 0.88);
    stroke: var(--accent);
  }

  .hero.is-lotus-play .lotus-hex,
  .hero.is-lotus-done .lotus-hex {
    fill: rgba(var(--on-dark-rgb), 0.4);
    stroke: var(--on-dark);
  }

  body.intro-locked #home-hero > .container,
  body.intro-entering #home-hero > .container,
  body.has-entered #home-hero > .container {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  body.intro-locked .site-header,
  body.intro-entering .site-header,
  body.has-entered .site-header,
  body.intro-locked #main > :not(#home-hero),
  body.intro-entering #main > :not(#home-hero),
  body.intro-locked .site-footer,
  body.intro-entering .site-footer {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }

  body.is-portal-emerge #home-hero > .container .eyebrow,
  body.is-portal-emerge #home-hero > .container h1,
  body.is-portal-emerge #home-hero > .container .lead,
  body.is-portal-emerge #home-hero > .container .btn-row,
  body.is-portal-emerge #home-hero > .container .hero-line {
    animation: none !important;
  }
}


/* ——— 1.0.21 presence polish ——— */
.site-header.is-scrolled {
  background: rgba(var(--paper-rgb), 0.99);
  box-shadow: 0 1px 0 0 var(--accent-line), 0 8px 24px rgba(var(--ink-rgb), 0.04);
}

.site-header.is-scrolled .site-nav a {
  color: var(--text-secondary);
}

.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-nav a[aria-current="page"] {
  color: var(--text);
}

/* Hero copy: more air after lotus dissolve */
.hero > .container {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

.hero h1 {
  margin-bottom: 1.15rem;
  letter-spacing: -0.028em;
}

.hero .lead {
  margin-bottom: 2rem;
  max-width: 34rem;
  line-height: 1.62;
}

.hero .btn-row {
  gap: 1rem 1.35rem;
  align-items: center;
}

/* Quieter secondary path — invitation, not twin CTA */
.hero .btn-secondary {
  background: transparent;
  color: rgba(var(--on-dark-rgb), 0.88);
  box-shadow: none;
  border: none;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  text-decoration: underline;
  text-decoration-color: rgba(var(--on-dark-rgb), 0.35);
  text-underline-offset: 0.28em;
  font-weight: 450;
  letter-spacing: 0.02em;
}

.hero .btn-secondary:hover {
  background: transparent;
  color: var(--on-dark);
  text-decoration-color: rgba(var(--on-dark-rgb), 0.7);
}

.hero .btn-primary {
  min-width: 11rem;
}

/* First content band: breathing room */
.section.section-alt:first-of-type,
main > hr.rule + .section.section-alt {
  padding-top: 4.5rem;
  padding-bottom: 4.25rem;
}

/* Body / prose line length + contrast */
.prose p,
.section .lead,
.value-block p,
.path-body span,
.card p {
  max-width: 38rem;
  line-height: 1.65;
}

.eyebrow {
  color: var(--accent-deep);
}

/* Lazy-loaded below-fold images */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Page headers: slightly more vertical air */
.page-header {
  padding-top: 3.25rem;
  padding-bottom: 2.25rem;
}

.page-header .lead {
  max-width: 36rem;
  line-height: 1.62;
}

/* ——— 1.0.22 framing lock + portal light continuity ——— */

/* Explicit cover/center on base hero — same tokens as splash + pin */
.hero#home-hero,
#home-hero.hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Soft atmospheric wash after lotus dissolves — teal/warm, not neon.
   Continues the portal light story into the first band without a “normal site” snap. */
#home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 85% 70% at 50% 42%,
    rgba(var(--portal-core-rgb), 0.12) 0%,
    rgba(var(--band-rgb), 0.1) 28%,
    rgba(var(--accent-rgb), 0.045) 55%,
    transparent 74%
  );
  transition: opacity 1.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-portal-emerge #home-hero::after,
body.is-portal-done #home-hero::after,
body.has-entered #home-hero::after {
  opacity: 1;
}

/* First homepage band: faint residual wash so emerge → scroll feels one room */
body.has-entered #main > #home-hero + .section {
  position: relative;
}

body.has-entered #main > #home-hero + .section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 90% 55% at 50% 0%,
    rgba(var(--band-rgb), 0.35) 0%,
    rgba(var(--band-rgb), 0.12) 42%,
    transparent 72%
  );
  opacity: 0.55;
}

body.has-entered #main > #home-hero + .section > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #home-hero::after,
  body.has-entered #main > #home-hero + .section::before {
    transition: none !important;
  }
}


/* ——— 1.0.23 secondary pages + quieter invites ——— */

.page-invite {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--accent-line);
  text-align: center;
}

.page-invite .eyebrow {
  margin-bottom: 0.85rem;
}

.page-invite-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

.page-invite-links a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1em;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-invite-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-line);
}

.section-vision .page-invite-links {
  margin-top: 1.75rem;
}

/* Interior page rhythm — more air, same teal chrome */
.page-header h1 {
  max-width: 18ch;
  letter-spacing: -0.02em;
}

.page-header .lead {
  margin-top: 1rem;
  color: var(--text-secondary);
}

.content-block h2 {
  letter-spacing: -0.015em;
}

/* Four-up retreat invitations */
.invite-grid {
  margin-top: 1.75rem;
}
@media (min-width: 720px) {
  .invite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .invite-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ——— 1.0.24 Academy editorial page ——— */

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

.section-lead {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.55;
}

.academy-threshold .lead {
  max-width: 34rem;
}

.academy-stance {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  text-align: center;
}

.stance-statement {
  margin: 0 auto;
  max-width: 34rem;
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text);
}

.academy-scope {
  margin: 2.25rem auto 0;
  max-width: 36rem;
  text-align: left;
}

/* Fields of study — labels first; desc on hover/focus */
.field-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--accent-line);
}

@media (min-width: 720px) {
  .field-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .field-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field-item {
  position: relative;
  padding: 1.35rem 1.25rem 1.35rem 1.35rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  cursor: default;
  outline: none;
  transition:
    background 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

@media (min-width: 720px) {
  .field-item {
    border-right: 1px solid var(--line);
  }
  .field-item:nth-child(2n) {
    border-right: none;
  }
}

@media (min-width: 1100px) {
  .field-item:nth-child(2n) {
    border-right: 1px solid var(--line);
  }
  .field-item:nth-child(3n) {
    border-right: none;
  }
}

.field-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
}

.field-desc {
  display: block;
  margin: 0.55rem 0 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
  transition:
    max-height 0.5s var(--ease),
    opacity 0.45s var(--ease),
    margin 0.45s var(--ease);
}

.field-item:hover,
.field-item:focus,
.field-item:focus-within {
  background: linear-gradient(90deg, var(--accent-wash) 0%, transparent 85%);
  border-left-color: var(--accent);
}

.field-item:hover .field-desc,
.field-item:focus .field-desc,
.field-item:focus-within .field-desc {
  max-height: 6rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .field-item,
  .field-desc {
    transition: none;
  }
  .field-desc {
    max-height: none;
    opacity: 1;
    margin-top: 0.55rem;
  }
}

/* Three ways to learn */
.academy-ways {
  margin-top: 1.75rem;
}

@media (min-width: 720px) {
  .academy-ways.invite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .academy-ways.invite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.academy-ways .value-block .muted,
.academy-ways .value-block .small {
  margin-top: 1rem;
}

.academy-ways .value-block a {
  font-size: 0.95rem;
}

/* Integration bridge */
.academy-bridge {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.academy-bridge h2 {
  margin: 0.35rem auto 0;
  max-width: 18ch;
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.academy-bridge .section-lead {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.25rem;
}

.bridge-links {
  margin-top: 1.75rem;
  justify-content: center;
}

.page-academy .page-invite {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}


/* ——— 1.0.25 aesthetic / wording / motion polish ——— */

/* Quieter section bands: soft ivory-teal instead of mint candy */
:root {
  --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Page headers — deeper charcoal-teal, more air, stronger hierarchy */
.page-header {
  padding: 6.75rem 0 4.25rem;
  background: var(--page-header-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-rgb), 0.10) 0%, transparent 62%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--page-header-fg);
}

.page-header .eyebrow {
  color: var(--page-header-eyebrow);
  margin-bottom: 1.5rem;
}

.page-header h1 {
  color: var(--page-header-fg);
  max-width: 14ch;
  font-size: clamp(2.85rem, 7.2vw, 4.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}

.page-header .lead {
  margin-top: 0;
  max-width: 34rem;
  color: var(--page-header-muted);
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .page-header {
    padding: 4.75rem 0 3rem;
  }
}

/* After dark page-header, first content section stays clean white */
.page-header + .section.section-alt {
  background: var(--bg);
}

/* Hero quiet invites (no primary button stack) */
.hero-invite-links.page-invite-links {
  justify-content: flex-start;
  margin-top: 1.75rem;
  color: rgba(var(--on-dark-rgb), 0.88);
}

.hero-invite-links.page-invite-links a {
  color: rgba(var(--on-dark-rgb), 0.92);
  border-bottom-color: transparent;
}

.hero-invite-links.page-invite-links a:hover {
  color: var(--on-dark);
  border-bottom-color: rgba(var(--on-dark-rgb), 0.45);
}

#home-hero .hero-invite-links {
  position: relative;
  z-index: 2;
}

/* Longer portal afterglow into first band — framing lock untouched */
#home-hero::after {
  transition: opacity 2.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.has-entered #main > #home-hero + .section::before,
body.has-entered #main > #home-hero + hr.rule + .section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 90% 55% at 50% 0%,
    rgba(var(--band-rgb), 0.42) 0%,
    rgba(var(--band-rgb), 0.16) 42%,
    transparent 72%
  );
  opacity: 0.7;
  animation: afterglow-linger 5.5s var(--reveal-ease) forwards;
}

/* Hero may be followed by .rule then section — support both */
body.has-entered #main > #home-hero + hr.rule + .section {
  position: relative;
}

body.has-entered #main > #home-hero + hr.rule + .section > * {
  position: relative;
  z-index: 1;
}

@keyframes afterglow-linger {
  0% { opacity: 0.78; }
  55% { opacity: 0.55; }
  100% { opacity: 0.28; }
}

/* Fields of study — calmer hover */
.field-item {
  transition:
    background 0.75s var(--reveal-ease),
    border-color 0.75s var(--reveal-ease);
}

.field-desc {
  transition:
    max-height 0.7s var(--reveal-ease),
    opacity 0.65s var(--reveal-ease),
    margin 0.65s var(--reveal-ease);
}

.field-item:hover,
.field-item:focus,
.field-item:focus-within {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 88%);
  border-left-color: rgba(var(--accent-rgb), 0.55);
}

/* Scroll reveals — slow staggered opacity only (needs html.js-reveal) */
html.js-reveal .reveal {
  opacity: 0;
  transform: none;
  transition: opacity 1.15s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity;
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
}

html.js-reveal .reveal-child {
  opacity: 0;
  transition: opacity 1.05s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-reveal .reveal.is-visible .reveal-child,
html.js-reveal .reveal-child.is-visible {
  opacity: 1;
}

/* Stagger helpers for grids inside a revealed section */
html.js-reveal .reveal.is-visible .value-block:nth-child(1),
html.js-reveal .reveal.is-visible .field-item:nth-child(1),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(1) { animation-delay: 0.05s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(2),
html.js-reveal .reveal.is-visible .field-item:nth-child(2),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(2) { animation-delay: 0.14s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(3),
html.js-reveal .reveal.is-visible .field-item:nth-child(3),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(3) { animation-delay: 0.23s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(4),
html.js-reveal .reveal.is-visible .field-item:nth-child(4),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(4) { animation-delay: 0.32s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(5),
html.js-reveal .reveal.is-visible .field-item:nth-child(5),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(5) { animation-delay: 0.41s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(6),
html.js-reveal .reveal.is-visible .field-item:nth-child(6),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(6) { animation-delay: 0.5s; }
html.js-reveal .reveal.is-visible .value-block:nth-child(n+7),
html.js-reveal .reveal.is-visible .field-item:nth-child(n+7),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(n+7) { animation-delay: 0.58s; }

html.js-reveal .reveal.is-visible .value-block,
html.js-reveal .reveal.is-visible .field-item,
html.js-reveal .reveal.is-visible .path-list > li {
  opacity: 0;
  animation: reveal-fade 1.1s var(--reveal-ease) forwards;
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal,
  html.js-reveal .reveal-child,
  html.js-reveal .reveal.is-visible .value-block,
  html.js-reveal .reveal.is-visible .field-item,
  html.js-reveal .reveal.is-visible .path-list > li {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  #home-hero::after,
  body.has-entered #main > #home-hero + .section::before,
  body.has-entered #main > #home-hero + hr.rule + .section::before {
    transition: none !important;
    animation: none !important;
    opacity: 0.35;
  }

  .field-item,
  .field-desc {
    transition: none !important;
  }

  .field-desc {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 0.55rem !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Soften primary nav Donate if a WP menu still shows it */
.site-nav a[href*="donate"]:not(.nav-cta) {
  opacity: 0.72;
  font-weight: 400;
}

.site-nav a[href*="donate"]:not(.nav-cta):hover {
  opacity: 1;
}

/* ——— 1.0.27 Daily practice + soft inquiry ——— */
.daily-practice {
  text-align: center;
}

.daily-practice h2 {
  margin-inline: auto;
  text-align: center;
}

.daily-practice .practice-card {
  margin-top: 1.5rem;
  padding: 2rem 1.5rem 1.75rem;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.daily-practice .practice-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.daily-practice .practice-body {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
}

.daily-practice .practice-body p {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

.daily-practice .practice-body p:last-child {
  margin-bottom: 0;
}

.daily-practice .practice-note {
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

.daily-practice .practice-links {
  justify-content: center;
  margin: 0;
}

.daily-practice.practice-fade .practice-card {
  animation: practice-soft-fade 0.9s var(--reveal-ease, ease) both;
}

@keyframes practice-soft-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-practice.practice-fade .practice-card {
    animation: none;
  }
}

.inquiry-link {
  margin-top: 0.85rem;
}

.inquiry-link a {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-deep-rgb), 0.28);
  transition: border-color 0.35s ease, color 0.35s ease;
}

.inquiry-link a:hover,
.inquiry-link a:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: rgba(var(--accent-hover-rgb), 0.55);
}

.interest-note {
  max-width: 40rem;
  margin: 0 auto 1.75rem;
  padding: 0.85rem 1.15rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--accent-deep);
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 3px;
}

.interest-note[hidden] {
  display: none !important;
}

/* ——— 1.0.28 Darkness Retreat — the night side of the lotus ——— */
.darkness-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--green-deep);
  color: var(--on-dark);
  text-align: center;
  padding: 8rem 0 7.5rem;
  border-top: 1px solid rgba(var(--on-dark-accent-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--on-dark-accent-rgb), 0.10);
}

/* Teal turned into faint moonlight */
.darkness-moon {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 14%, rgba(var(--on-dark-accent-rgb), 0.13) 0%, rgba(var(--on-dark-accent-rgb), 0.05) 45%, transparent 75%),
    linear-gradient(180deg, var(--green-deep) 0%, var(--green-deep) 100%);
}

.darkness-inner > * {
  margin-left: auto;
  margin-right: auto;
}

.darkness-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 2.25rem;
}

/* Unlit outline lotus — not the bright PNG */
.darkness-lotus {
  width: 132px;
  height: 132px;
  opacity: 0.42;
  filter: drop-shadow(0 0 14px rgba(var(--on-dark-accent-rgb), 0.10));
}

.darkness-lotus path {
  fill: none;
  stroke: var(--on-dark-accent);
  stroke-width: 0.9;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.darkness-lotus .lotus-petal-middle { stroke-opacity: 0.75; }
.darkness-lotus .lotus-petal-inner,
.darkness-lotus .lotus-hex { stroke-opacity: 0.6; }

.darkness-band .eyebrow {
  color: var(--on-dark-accent);
  letter-spacing: 0.18em;
}

.darkness-band h2 {
  color: var(--on-dark);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-weight: 400;
}

.darkness-lines {
  max-width: 32rem;
  margin: 2rem auto 0;
}

.darkness-lines p {
  margin: 0 0 0.9rem;
  font-size: clamp(1.08rem, 1.9vw, 1.25rem);
  line-height: 1.6;
  color: rgba(var(--on-dark-rgb), 0.88);
}

.darkness-lines p:last-child { margin-bottom: 0; }

.darkness-care {
  max-width: 30rem;
  margin: 2.75rem auto 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(var(--on-dark-rgb), 0.74);
}

.darkness-care strong {
  color: var(--on-dark);
  font-weight: 500;
}

.darkness-details {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  font-size: 0.92rem;
  color: rgba(var(--on-dark-rgb), 0.74);
}

.darkness-detail-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(var(--on-dark-accent-rgb), 0.9);
  margin-right: 0.35rem;
}

.darkness-band .placeholder {
  background: rgba(var(--on-dark-rgb), 0.08);
  color: var(--on-dark);
}

.darkness-ask {
  margin-top: 2.5rem;
}

.darkness-band .inquiry-link a {
  color: var(--on-dark-accent);
  border-bottom-color: rgba(var(--on-dark-accent-rgb), 0.38);
}

.darkness-band .inquiry-link a:hover,
.darkness-band .inquiry-link a:focus-visible {
  color: var(--on-dark);
  border-bottom-color: rgba(var(--on-dark-rgb), 0.7);
}

.darkness-band a:focus-visible {
  outline: 2px solid var(--on-dark-accent);
  outline-offset: 3px;
}

/* Reveal: band stays dark; moonlight + content rise slowly from black */
html.js-reveal .darkness-band.reveal {
  opacity: 1;
  transition: none;
}

html.js-reveal .darkness-band .darkness-moon {
  opacity: 0;
  transition: opacity 3.2s var(--reveal-ease, ease) 0.2s;
}

html.js-reveal .darkness-band .darkness-inner {
  opacity: 0;
  transition: opacity 2.6s var(--reveal-ease, ease) 0.7s;
}

html.js-reveal .darkness-band.is-visible .darkness-moon,
html.js-reveal .darkness-band.is-visible .darkness-inner {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .darkness-band .darkness-moon,
  html.js-reveal .darkness-band .darkness-inner {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 720px) {
  .darkness-band { padding: 5.5rem 0 5rem; }
  .darkness-lotus { width: 104px; height: 104px; }
  .darkness-mark { margin-bottom: 1.75rem; }
  .darkness-details { flex-direction: column; align-items: center; gap: 0.6rem; }
}

/* Continuation after the band keeps the first-section look (white + accent cards) */
.retreats-continue {
  background: var(--bg);
}

.retreats-continue .card {
  background: linear-gradient(180deg, var(--accent-wash) 0%, transparent 100%);
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
}

/* Home — quiet pointer to the Darkness Retreat */
.darkness-whisper {
  margin: 2.25rem 0 0;
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.darkness-whisper a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.darkness-whisper a:hover,
.darkness-whisper a:focus-visible {
  color: var(--accent-hover);
}

.darkness-lead {
  max-width: 30rem;
  margin: 1.5rem auto 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  color: var(--on-dark);
}

/* 1.0.28 polish — balanced lines, aligned mobile details */
.darkness-band h2,
.darkness-lead,
.darkness-lines p,
.darkness-care {
  text-wrap: balance;
}

.darkness-band h2 { max-width: 15ch; }

@media (max-width: 720px) {
  .darkness-details {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 0.75rem;
    row-gap: 0.6rem;
  }
  .darkness-details li { display: contents; }
  .darkness-detail-label {
    text-align: right;
    margin-right: 0;
    align-self: center;
  }
  .darkness-details .placeholder { justify-self: start; }
}

/* ——— 1.0.29 Darkness Retreat page — the night side of the lotus ——— */
.page-darkness {
  background: var(--green-deep);
}

.darkness-hero {
  padding: 8.5rem 0 6rem;
  border-top: none;
  border-bottom: none;
}

.darkness-hero h1 {
  color: var(--on-dark);
  font-weight: 400;
  max-width: 14ch;
  margin: 0.25rem auto 0;
  text-align: center;
  text-wrap: balance;
}

.darkness-hero .darkness-lead {
  margin-top: 1.75rem;
}

.darkness-body {
  background: var(--green-deep);
  padding: 2rem 0 8rem;
  border-top: none;
  border-bottom: none;
}

.darkness-section-title {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
  max-width: none;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.darkness-body .darkness-lines {
  margin-top: 0;
}

.darkness-block {
  max-width: 30rem;
  margin: 4rem auto 0;
  padding-top: 3.25rem;
  border-top: 1px solid rgba(var(--on-dark-accent-rgb), 0.14);
}

.darkness-block p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(var(--on-dark-rgb), 0.8);
  text-wrap: balance;
}

.darkness-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 4rem auto 0;
  font-size: 0.92rem;
}

.darkness-links .inquiry-link { margin: 0; }

.darkness-links-sep { color: rgba(var(--on-dark-accent-rgb), 0.5); }

.darkness-soft-link {
  color: rgba(var(--on-dark-rgb), 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--on-dark-rgb), 0.22);
  letter-spacing: 0.02em;
}

.darkness-soft-link:hover,
.darkness-soft-link:focus-visible {
  color: var(--on-dark);
  border-bottom-color: rgba(var(--on-dark-rgb), 0.6);
}

@media (max-width: 720px) {
  .darkness-hero { padding: 5.5rem 0 4rem; }
  .darkness-body { padding: 1rem 0 5.5rem; }
  .darkness-block { margin-top: 3rem; padding-top: 2.5rem; }
  .darkness-links { margin-top: 3rem; }
}

/* Retreats — quiet pointer to the separate program */
.darkness-pointer {
  margin: 2.75rem 0 0;
  font-size: 0.98rem;
  color: var(--text-secondary);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.darkness-pointer a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.darkness-pointer a:hover,
.darkness-pointer a:focus-visible {
  color: var(--accent-hover);
}

/* Desktop nav: keep items on one line with the added program */
@media (min-width: 821px) {
  .site-nav a { white-space: nowrap; }
}

/* 1.0.29 — section titles beat the band h2 rule (15ch ivory) */
.darkness-band h2.darkness-section-title {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
  max-width: none;
  margin: 0 auto 1.25rem;
  line-height: 1.4;
}

/* ═════════ 1.0.30 Motion system — one easing + duration scale ═════════
   Portal / splash / hero-lotus timings are intentionally untouched (1.0.22 framing lock).
   Everything else draws from these tokens. */
:root {
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm ease-out */
  --motion-hover: 0.25s;    /* links, nav, focus */
  --motion-state: 0.6s;     /* hover backgrounds, field lines, page-header copy */
  --motion-reveal: 1.1s;    /* scroll reveals */
  --motion-still: 2.4s;     /* Darkness moonlight, afterglow-scale fades */
  --motion-stagger: 0.09s;  /* per item in a card group */
  --motion-group-offset: 0.25s; /* group items start once their section has begun */
  --reveal-ease: var(--motion-ease);
}

/* Hover / focus — one speed everywhere outside the portal */
.site-nav a,
.page-invite-links a,
.inquiry-link a,
.darkness-whisper a,
.darkness-pointer a,
.darkness-soft-link,
.site-footer a,
.prose a,
.path-list a {
  transition:
    color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease),
    background-color var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease);
}

/* Scroll reveals — opacity only, no transform (no layout shift) */
html.js-reveal .reveal {
  transition: opacity var(--motion-reveal) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: auto; /* was permanent will-change on every section: costly layers on mobile */
}

/* Page headers: the dark band is there at once; only the words fade in (no white→dark flash) */
html.js-reveal .page-header.reveal {
  opacity: 1;
  transition: none;
}
html.js-reveal .page-header.reveal > .container {
  opacity: 0;
  transition: opacity var(--motion-state) var(--motion-ease) 0.05s;
}
html.js-reveal .page-header.reveal.is-visible > .container {
  opacity: 1;
}

/* Card groups: one gentle stagger, starting once the section has begun to arrive */
html.js-reveal .reveal.is-visible .value-block,
html.js-reveal .reveal.is-visible .field-item,
html.js-reveal .reveal.is-visible .path-list > li,
html.js-reveal .reveal.is-visible .card-grid > .card {
  opacity: 0;
  animation: reveal-fade var(--motion-reveal) var(--motion-ease) forwards;
  animation-delay: var(--motion-group-offset);
}
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(2),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(2) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 1); }
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(3),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(3) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 2); }
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(4),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(4) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 3); }
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(5),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(5) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 4); }
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(6),
html.js-reveal .reveal.is-visible .path-list > li:nth-child(6) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 5); }
html.js-reveal .reveal.is-visible :is(.value-block, .field-item, .card-grid > .card):nth-child(n+7) { animation-delay: calc(var(--motion-group-offset) + var(--motion-stagger) * 6); }

/* Fields of study: no height animation (neighbours used to jump). Space is reserved;
   the line fades in on hover/focus. On touch screens the line is simply shown. */
.field-item {
  transition:
    background-color var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease);
}
.field-desc {
  max-height: none;
  margin-top: 0.55rem;
  overflow: visible;
  opacity: 0;
  transition: opacity var(--motion-state) var(--motion-ease);
}
.field-item:hover .field-desc,
.field-item:focus .field-desc,
.field-item:focus-within .field-desc {
  max-height: none;
  opacity: 1;
}
.field-item:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
@media (hover: none) {
  .field-desc { opacity: 0.9; }
}

/* Darkness: same slow fade from black, on the shared scale; content arrives sooner on load */
html.js-reveal .darkness-band .darkness-moon {
  transition: opacity var(--motion-still) var(--motion-ease) 0.1s;
}
html.js-reveal .darkness-band .darkness-inner {
  transition: opacity calc(var(--motion-still) * 0.75) var(--motion-ease) 0.3s;
}

/* Inquiry links */
.inquiry-link a {
  transition:
    color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease);
}

/* Mobile: drop costly effects that run on every scroll frame */
@media (max-width: 820px) {
  .site-header,
  body.is-portal-emerge .site-header,
  body.is-portal-done .site-header,
  body.has-entered .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(var(--paper-rgb), 0.99);
  }
  .darkness-lotus { filter: none; }
}

/* Reduced motion — full coverage. Durations collapse to ~0 so any end-events still fire. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html.js-reveal .reveal,
  html.js-reveal .page-header.reveal > .container,
  html.js-reveal .reveal.is-visible .value-block,
  html.js-reveal .reveal.is-visible .field-item,
  html.js-reveal .reveal.is-visible .path-list > li,
  html.js-reveal .reveal.is-visible .card-grid > .card,
  html.js-reveal .darkness-band .darkness-moon,
  html.js-reveal .darkness-band .darkness-inner {
    opacity: 1 !important;
  }
  .field-desc { opacity: 1; }
}

/* ——— 1.0.30 Participant intake — soft secondary button, no urgency ——— */
.intake {
  margin-top: 1.75rem;
}

.btn-intake {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  background: transparent;
  border: 1px solid var(--accent-line);
  text-decoration: none;
  transition:
    background-color var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) var(--motion-ease),
    color var(--motion-hover) var(--motion-ease);
}

.btn-intake::after {
  content: "↗";
  font-size: 0.85em;
  opacity: 0.7;
}

.btn-intake:hover,
.btn-intake:focus-visible {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-deep);
}

.intake-note {
  margin: 0.75rem 0 0;
  max-width: 30rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.card .intake { margin-top: 1.25rem; }

/* On the Darkness page: moonlit outline, ivory text, centered */
.intake-dark {
  margin-top: 2rem;
  text-align: center;
}

.intake-dark .btn-intake {
  color: var(--on-dark);
  border-color: rgba(var(--on-dark-accent-rgb), 0.42);
}

.intake-dark .btn-intake:hover,
.intake-dark .btn-intake:focus-visible {
  background: rgba(var(--on-dark-accent-rgb), 0.10);
  border-color: rgba(var(--on-dark-rgb), 0.7);
  color: var(--on-dark);
}

.intake-dark .btn-intake:focus-visible {
  outline: 2px solid var(--on-dark-accent);
  outline-offset: 3px;
}

.intake-dark .intake-note {
  margin-left: auto;
  margin-right: auto;
  color: rgba(var(--on-dark-rgb), 0.72);
  text-wrap: balance;
}
.darkness-block .intake-dark .intake-note {
  font-size: 0.88rem;
  line-height: 1.55;
}
/* Intake inside .prose: no inherited underline / body-size note */
.prose .intake .btn-intake,
.card .intake .btn-intake {
  text-decoration: none;
  color: var(--accent-deep);
}
.prose .intake .intake-note,
.card .intake .intake-note {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}


/* ——— 1.0.31 Private participants page ——— */
.page-participants .participants-gate {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.04);
}

.page-participants .post-password-form {
  margin: 0;
}

.page-participants .post-password-form p {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.55;
}

.page-participants .post-password-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}

.page-participants .post-password-form input[type="password"] {
  display: block;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.page-participants .post-password-form input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent-deep);
}

.page-participants .post-password-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  border: 0;
  border-radius: 2px;
  background: var(--accent-deep);
  color: var(--on-dark);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms var(--ease);
}

.page-participants .post-password-form input[type="submit"]:hover,
.page-participants .post-password-form input[type="submit"]:focus-visible {
  background: var(--green);
}

.page-participants .post-password-form input[type="submit"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.page-participants .participants-files {
  margin-top: 0.25rem;
}

.page-participants .participants-files > *:first-child {
  margin-top: 0;
}

.page-participants .participants-files ul,
.page-participants .participants-files ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-participants .participants-files li,
.page-participants .participants-file-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.page-participants .participants-files a,
.page-participants .participants-files .wp-block-file a:not(.wp-block-file__button) {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 500;
}

.page-participants .participants-files a:hover,
.page-participants .participants-files .wp-block-file a:not(.wp-block-file__button):hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.page-participants .participants-files .wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}

.page-participants .participants-files .wp-block-file:first-child {
  border-top: 1px solid var(--line);
}

.page-participants .participants-empty {
  margin: 0;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-secondary);
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px dashed rgba(var(--accent-deep-rgb), 0.28);
}

.page-participants .participants-privacy {
  margin: 2rem 0 0;
}

.page-participants .participants-example {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ——— 1.0.32 Participant file cards (matching side-by-side previews) ———
   Markup comes from the WP editor:
   .participant-files > figure.participant-file > a > img + figcaption(strong, br, text, br, a[download])
   Robust to wpautop: stray <p>/<br> are neutralised. */
.page-participants .container.narrow:has(.participant-files) {
  max-width: 760px;
}

.page-participants .participant-files {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin: 0;
}

@media (min-width: 640px) {
  .page-participants .participant-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* wpautop leftovers: empty / wrapping paragraphs and stray line breaks */
.page-participants .participants-files > p:empty,
.page-participants .participant-files > br,
.page-participants .participant-file > br {
  display: none;
}

.page-participants .participant-files > p,
.page-participants .participant-file > p {
  display: contents;
  margin: 0;
}

.page-participants .participant-files > p:empty,
.page-participants .participant-file > p:empty {
  display: none;
}

.page-participants .participant-file {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 8px 24px rgba(var(--ink-rgb), 0.04);
  overflow: hidden;
  transition:
    transform var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease),
    box-shadow var(--motion-state) var(--motion-ease);
}

.page-participants .participant-file:hover,
.page-participants .participant-file:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 1px 0 var(--accent-line), 0 14px 32px rgba(var(--accent-deep-rgb), 0.08);
}

.page-participants .participant-file:hover {
  transform: translateY(-2px);
}

/* Preview frame: the image link at the top of each card */
.page-participants .participant-file > a,
.page-participants .participant-file > p > a {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 1.5rem 1.5rem 0;
  overflow: hidden;
  background: var(--bg-band);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.page-participants .participant-file > a:hover,
.page-participants .participant-file > p > a:hover {
  text-decoration: none;
}

.page-participants .participant-file > a:focus-visible,
.page-participants .participant-file > p > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.page-participants .participant-file > a img,
.page-participants .participant-file > p > a img {
  display: block;
  width: 100%;          /* overrides the editor's width="240" */
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: top center;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.08), 0 6px 18px rgba(var(--ink-rgb), 0.08);
  transition: transform var(--motion-state) var(--motion-ease);
}

.page-participants .participant-file:hover > a img,
.page-participants .participant-file:hover > p > a img {
  transform: translateY(-3px);
}

/* Caption: title, short description, quiet download button */
.page-participants .participant-file figcaption {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto 1fr auto;  /* title · description · button pinned to the bottom */
  justify-items: start;
  align-content: stretch;
  row-gap: 0.45rem;
  padding: 1.35rem 1.5rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.page-participants .participant-file figcaption br {
  display: none;
}

.page-participants .participant-file figcaption p {
  display: contents;
  margin: 0;
}

.page-participants .participant-file figcaption strong {
  display: block;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.35;
}

.page-participants .participants-files .participant-file figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  grid-row: 3;
  align-self: end;
  margin-top: 0.75rem;
  min-height: 2.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  background: transparent;
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background var(--motion-hover) var(--motion-ease),
    color var(--motion-hover) var(--motion-ease);
}

.page-participants .participants-files .participant-file figcaption a::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-participants .participants-files .participant-file figcaption a:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  text-decoration: none;
}

.page-participants .participants-files .participant-file figcaption a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .page-participants .participant-file,
  .page-participants .participant-file > a img,
  .page-participants .participant-file > p > a img,
  .page-participants .participants-files .participant-file figcaption a {
    transition: none;
  }
  .page-participants .participant-file:hover,
  .page-participants .participant-file:hover > a img,
  .page-participants .participant-file:hover > p > a img {
    transform: none;
  }
}


/* ——— 1.0.33 UX: transitions · settled header · type rhythm · parallax · card response · breath cue ——— */

/* 1. Page transitions — cross-document View Transitions (soft fade, under 400ms).
      The header stays put while the page fades. Back/forward and anchors are native. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

::view-transition-old(root) {
  animation: pt-fade-out 0.18s var(--motion-ease) both;
}
::view-transition-new(root) {
  animation: pt-fade-in 0.32s var(--motion-ease) both;
}
::view-transition-group(site-header) { animation-duration: 0.32s; }

@keyframes pt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pt-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* JS fallback (no cross-document support): fade main out, then in on arrival */
html.pt-out main,
html.pt-out .site-footer {
  opacity: 0;
  transition: opacity 0.18s var(--motion-ease);
}
html.pt-in main,
html.pt-in .site-footer {
  animation: pt-fade-in 0.32s var(--motion-ease) both;
}

/* Sticky fix: overflow-x:hidden on html/body made <body> a scroll container, so the
   sticky header never stuck. clip keeps the no-sideways-scroll guard without that. */
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

/* 2. Header that settles on scroll — translucent + blur + hairline past the hero;
      hides while reading down, returns on scroll up, at the top, and on focus. */
.site-header,
body.has-entered .site-header {
  transition:
    transform 0.4s var(--motion-ease),
    background-color var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease);
}

.site-header.is-settled,
body.has-entered .site-header.is-settled {
  background: rgba(var(--paper-rgb), 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 6px 24px rgba(var(--ink-rgb), 0.04);
}

.site-header.is-hidden,
body.has-entered .site-header.is-hidden {
  transform: translateY(-100%) !important;
}

.site-header.is-hidden:focus-within,
body.has-entered .site-header.is-hidden:focus-within {
  transform: none !important;
}

@media (max-width: 820px) {
  /* Mobile keeps the 1.0.30 no-blur rule for scroll performance; slight translucency only */
  .site-header.is-settled,
  body.has-entered .site-header.is-settled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(var(--paper-rgb), 0.95);
  }
}

/* 3. Refined type and rhythm — fluid scale, steadier leading, finer tracking on labels.
      The home hero keeps its exact size (framing lock). */
:root {
  --fs-h1: clamp(2.6rem, 1.85rem + 3.2vw, 4.35rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 1.9vw, 2.85rem);
  --fs-h3: clamp(1.15rem, 1.07rem + 0.35vw, 1.35rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.35rem);
  --lh-body: 1.6;
  --lh-tight: 1.08;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --track-label: 0.16em;
}

body { line-height: var(--lh-body); }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.012em; margin-bottom: 0.75rem; }
.hero h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1.05; }
.hero .lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; }

.lead { font-size: var(--fs-lead); line-height: 1.5; }


.eyebrow,
.page-header .eyebrow {
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  margin-bottom: var(--space-3);
}

.footer-heading,
.darkness-detail-label,
.darkness-section-title,
.field-label {
  letter-spacing: var(--track-label);
}

.section { padding-block: clamp(4.5rem, 3.1rem + 4.5vw, 7rem); }
.two-col + .content-block,
.prose + .content-block {
  margin-top: clamp(3rem, 2.2rem + 3vw, 5rem);
}
.content-block + .content-block {
  margin-top: clamp(3rem, 2.2rem + 3vw, 5rem);
  padding-top: clamp(3rem, 2.2rem + 3vw, 5rem);
}

/* 4. Gentle parallax — content-band photos only (JS sets the transform; never the hero) */
.has-parallax {
  will-change: transform;
  transition: none;
}
.hero .has-parallax,
#home-hero .has-parallax,
.intro-splash .has-parallax { transform: none !important; }

/* 5. Cards respond — soft lift + light teal glow; images ease to 1.03 */
.card,
.value-block,
.page-participants .participant-file {
  transition:
    transform var(--motion-state) var(--motion-ease),
    box-shadow var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease);
}

.card:hover,
.card:focus-within,
.value-block:hover,
.value-block:focus-within {
  transform: translateY(-3px);
  border-bottom-color: var(--accent-line);
  box-shadow:
    0 0 0 0.85rem rgba(var(--accent-rgb), 0.045),
    0 18px 36px 0.85rem rgba(var(--accent-deep-rgb), 0.07);
}

.page-participants .participant-file:hover,
.page-participants .participant-file:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow:
    0 1px 0 var(--accent-line),
    0 16px 36px rgba(var(--accent-rgb), 0.16);
}

.card img,
.value-block img {
  transition: transform var(--motion-state) var(--motion-ease);
}

.card:hover img,
.card:focus-within img,
.value-block:hover img,
.value-block:focus-within img,
.page-participants .participant-file:hover > a img,
.page-participants .participant-file:hover > p > a img,
.page-participants .participant-file:focus-within > a img,
.page-participants .participant-file:focus-within > p > a img {
  transform: scale(1.03);
}

/* 6. Breath cue on Today's practice — ~4s in, ~4s out; click to pause */
.breath-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  margin: 0.25rem 0 1rem;
  padding: 0.25rem 0.75rem 0.25rem 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.breath-cue[hidden] { display: none; } /* 1.0.41 — journal days: no breathing ring */

.breath-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.breath-ring {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}

.breath-ring::before,
.breath-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.breath-ring::after {           /* still guide circle at full size */
  border: 1px solid rgba(var(--accent-rgb), 0.18);
}

.breath-ring::before {          /* the breathing ring */
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.03) 70%);
  transform: scale(0.5);
  animation: breath-ring 8s ease-in-out infinite;
}

.breath-text {
  display: inline-grid;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.breath-text > span { grid-area: 1 / 1; }
.breath-in  { animation: breath-in-text 8s ease-in-out infinite; }
.breath-out { animation: breath-out-text 8s ease-in-out infinite; opacity: 0; }
.breath-sep { display: none; }

@keyframes breath-ring {
  0%, 100% { transform: scale(0.5); opacity: 0.75; }
  50%      { transform: scale(1);   opacity: 1; }
}
@keyframes breath-in-text {
  0%, 44%   { opacity: 1; }
  50%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes breath-out-text {
  0%, 44%   { opacity: 0; }
  50%, 94%  { opacity: 1; }
  100%      { opacity: 0; }
}

.breath-cue.is-paused .breath-ring::before,
.breath-cue.is-paused .breath-in,
.breath-cue.is-paused .breath-out {
  animation-play-state: paused;
}
.breath-cue.is-paused .breath-ring { opacity: 0.55; }

/* Reduced motion: no page fades, no header hide, no parallax, no lift, static ring */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  html.pt-out main,
  html.pt-out .site-footer { opacity: 1 !important; }
  html.pt-in main,
  html.pt-in .site-footer { animation: none !important; }
  .site-header.is-hidden,
  body.has-entered .site-header.is-hidden { transform: none !important; }
  .has-parallax { transform: none !important; }
  .card:hover, .card:focus-within,
  .value-block:hover, .value-block:focus-within,
  .page-participants .participant-file:hover,
  .page-participants .participant-file:focus-within,
  .card:hover img, .value-block:hover img,
  .page-participants .participant-file:hover > a img,
  .page-participants .participant-file:hover > p > a img,
  .page-participants .participant-file:focus-within > a img,
  .page-participants .participant-file:focus-within > p > a img {
    transform: none !important;
  }
  .breath-ring::before {
    animation: none !important;
    transform: scale(0.8);
    opacity: 1;
  }
  .breath-in,
  .breath-out {
    animation: none !important;
    opacity: 1 !important;
  }
  .breath-text { display: inline-flex; gap: 0.4em; }
  .breath-sep { display: inline; }
  .breath-cue { cursor: default; }
}


/* ——— 1.0.33 warm secondary accent (sand) — one switch: .no-warm ——— */
:root.no-warm,
body.no-warm {
  --eyebrow: var(--accent-deep);
  --eyebrow-on-dark: var(--on-dark-accent);
  --highlight: var(--accent);
  --highlight-rgb: var(--accent-rgb);
  --portal-core-rgb: var(--paper-rgb);
}

/* Eyebrow labels */
.eyebrow,
.section-sage .eyebrow { color: var(--eyebrow); }
.page-header .eyebrow,
.hero .eyebrow,
.darkness-band .eyebrow,
.darkness-section-title,
.darkness-band h2.darkness-section-title { color: var(--eyebrow-on-dark); }
body.elementor-kit-22 .intro-splash .intro-splash-eyebrow,
.intro-splash .intro-splash-eyebrow { color: var(--eyebrow-on-dark) !important; }

/* Small dividers */
.rule-accent,
.value-block h3::before,
.value-card h3::before { background: var(--highlight); }

/* Breath ring */
.breath-ring::before {
  border-color: rgba(var(--highlight-rgb), 0.75);
  background: radial-gradient(circle, rgba(var(--highlight-rgb), 0.2) 0%, rgba(var(--highlight-rgb), 0.04) 70%);
}
.breath-ring::after { border-color: rgba(var(--highlight-rgb), 0.25); }


/* ——— 1.0.34 hero legibility — quiet localized scrim + soft halo on the copy only.
   Hero photo, framing/crop, portal timing and lotus fade untouched (scrim rides inside the
   copy container / splash panel, so it appears and fades with the words). ——— */
#home-hero > .container::before,
.intro-splash .intro-splash-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70% -45%;
  pointer-events: none;
  /* closest-side keeps every edge at 0 alpha — no visible box; long falloff reads as a vignette */
  background: radial-gradient(
    closest-side at 40% 50%,
    rgba(var(--green-deep-rgb), 0.66) 0%,
    rgba(var(--green-deep-rgb), 0.63) 40%,
    rgba(var(--green-deep-rgb), 0.55) 51%,
    rgba(var(--green-deep-rgb), 0.41) 62%,
    rgba(var(--green-deep-rgb), 0.26) 73%,
    rgba(var(--green-deep-rgb), 0.13) 84%,
    rgba(var(--green-deep-rgb), 0.04) 93%,
    rgba(var(--green-deep-rgb), 0) 100%
  );
}
.intro-splash .intro-splash-panel::before {
  inset: -60% -50%;
  background: radial-gradient(
    closest-side at 50% 45%,
    rgba(var(--green-deep-rgb), 0.66) 0%,
    rgba(var(--green-deep-rgb), 0.63) 40%,
    rgba(var(--green-deep-rgb), 0.55) 51%,
    rgba(var(--green-deep-rgb), 0.41) 62%,
    rgba(var(--green-deep-rgb), 0.26) 73%,
    rgba(var(--green-deep-rgb), 0.13) 84%,
    rgba(var(--green-deep-rgb), 0.04) 93%,
    rgba(var(--green-deep-rgb), 0) 100%
  );
}
@media (max-width: 900px) {
  /* Copy spans the full width on phones: a soft horizontal shade band, faded top + bottom */
  #home-hero > .container::before {
    inset: -36% -100vw -24%; /* reach past both viewport edges; .hero clips overflow */
    background: linear-gradient(
      180deg,
      rgba(var(--green-deep-rgb), 0) 0%,
      rgba(var(--green-deep-rgb), 0.1) 5%,
      rgba(var(--green-deep-rgb), 0.3) 11%,
      rgba(var(--green-deep-rgb), 0.52) 17%,
      rgba(var(--green-deep-rgb), 0.63) 23%,
      rgba(var(--green-deep-rgb), 0.62) 55%,
      rgba(var(--green-deep-rgb), 0.5) 76%,
      rgba(var(--green-deep-rgb), 0.24) 89%,
      rgba(var(--green-deep-rgb), 0) 100%
    );
  }
}

/* Eyebrow: on-dark, a touch heavier, soft local halo (sand moves to the hero rule below) */
#home-hero .eyebrow,
body.elementor-kit-22 .intro-splash .intro-splash-eyebrow,
.intro-splash .intro-splash-eyebrow {
  color: var(--on-dark) !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 2px rgba(var(--green-deep-rgb), 0.75),
    0 0 6px rgba(var(--green-deep-rgb), 0.7),
    0 0 12px rgba(var(--green-deep-rgb), 0.55) !important;
}

/* Subline + quiet links: full on-dark + soft halo */
#home-hero .lead,
#home-hero .hero-invite-links.page-invite-links,
#home-hero .hero-invite-links.page-invite-links a,
body.elementor-kit-22 .intro-splash .intro-splash-lead,
.intro-splash .intro-splash-lead {
  color: var(--on-dark) !important;
  text-shadow:
    0 0 2px rgba(var(--green-deep-rgb), 0.45),
    0 0 10px rgba(var(--green-deep-rgb), 0.5),
    0 0 22px rgba(var(--green-deep-rgb), 0.3) !important;
}
#home-hero .hero-invite-links.page-invite-links a:hover,
#home-hero .hero-invite-links.page-invite-links a:focus-visible {
  border-bottom-color: rgba(var(--on-dark-rgb), 0.7);
}

/* Headline: barely-there halo so it holds on the bright sky */
#home-hero h1,
body.elementor-kit-22 .intro-splash .intro-splash-headline,
.intro-splash .intro-splash-headline {
  text-shadow: 0 0 28px rgba(var(--green-deep-rgb), 0.3), 0 1px 3px rgba(var(--green-deep-rgb), 0.25) !important;
}

/* Keep the warm accent in the hero: the short rule under the links carries the sand */
#home-hero .hero-line { background: rgba(var(--highlight-rgb), 0.85); }


/* ——— 1.0.39 Practitioners resource hub (page-practitioners.php · inc/practitioners.php) ———
   Same family as the participants file cards: white cards, strong hairline, 2px corners, soft teal lift.
   FILE cards = document icon (+ type badge) and Download; LINK cards = link icon and Open link (new tab);
   placeholders = dashed, muted, not interactive. Tokens only; reduced motion → no lift. */
.page-practitioners .practitioners-container {
  max-width: 980px;
}

.practitioners-tools {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 0.5rem;
}

.practitioners-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.practitioners-jump-label {
  margin-right: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.practitioners-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--accent-deep);
  font-size: 0.875rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--motion-hover) var(--motion-ease), background var(--motion-hover) var(--motion-ease);
}

.practitioners-jump a:hover {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.practitioners-jump a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.practitioners-filter input[type="search"] {
  display: block;
  width: 100%;
  max-width: 24rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.practitioners-filter input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent-deep);
}

.practitioners-filter-status {
  min-height: 1.25em;
  margin: 0.45rem 0 0;
}

.practitioners-section {
  margin-top: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.practitioners-section-title {
  margin: 0 0 0.35rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  max-width: none;
}

.practitioners-intro {
  max-width: 62ch;
  margin: 0.85rem 0 0;
  color: var(--text-secondary);
}

.practitioners-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .practitioners-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.practitioner-item {
  display: flex;
  min-width: 0;
  margin: 0;
}

.practitioner-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 1rem;
  row-gap: 0.85rem;
  width: 100%;
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 8px 24px rgba(var(--ink-rgb), 0.04);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    transform var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease),
    box-shadow var(--motion-state) var(--motion-ease);
}

a.practitioner-card:hover,
a.practitioner-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: 0 1px 0 var(--accent-line), 0 16px 36px rgba(var(--accent-rgb), 0.16);
  color: var(--text-secondary);
  text-decoration: none;
}

a.practitioner-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.practitioner-icon {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 2px;
  background: var(--band);
  color: var(--accent-deep);
}

.practitioner-badge {
  position: absolute;
  right: -0.4rem;
  bottom: -0.4rem;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  background: var(--accent-deep);
  color: var(--on-dark);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.practitioner-text {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.practitioner-title {
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.practitioner-meta {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.practitioner-action {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.95rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
  color: var(--accent-deep);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: background var(--motion-hover) var(--motion-ease);
}

.practitioner-action::after {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.practitioner-item.is-link .practitioner-action::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-8 8'/%3E%3Cpath d='M17 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-8 8'/%3E%3Cpath d='M17 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4'/%3E%3C/svg%3E");
}

a.practitioner-card:hover .practitioner-action,
a.practitioner-card:focus-visible .practitioner-action {
  background: var(--accent-wash);
}

/* Placeholders: present but quiet — dashed hairline, muted icon, no button, no lift */
.practitioner-item.is-placeholder .practitioner-card {
  background: rgba(var(--paper-rgb), 0.6);
  border-style: dashed;
  box-shadow: none;
}

.practitioner-item.is-placeholder .practitioner-icon {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-secondary);
}

.practitioner-item.is-placeholder .practitioner-title {
  color: var(--text);
}

.practitioner-item.is-placeholder .practitioner-action {
  box-shadow: none;
  padding: 0;
  min-height: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.practitioner-item.is-placeholder .practitioner-action::after {
  content: none;
}

.practitioners-empty-filter {
  margin: 2rem 0 0;
}

.practitioners-hub .is-filtered-out {
  display: none;
}

@media (max-width: 420px) {
  .practitioner-card {
    padding: 1rem 1.05rem 1.1rem;
    column-gap: 0.85rem;
  }
  .practitioner-icon {
    width: 2.6rem;
    height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practitioner-card,
  .practitioners-jump a,
  .practitioner-action {
    transition: none;
  }
  a.practitioner-card:hover,
  a.practitioner-card:focus-visible {
    transform: none;
  }
}


/* ——— 1.0.40 Home gate ——— the Enter screen shows every time Home is shown (incl. Back/bfcache). */

/* Reduced motion: the global 0.01ms transition still animated min-height etc. for one frame, so the
   header flashed 45px→69px and the hero blinked 24px at the switch. Switch these instantly. */
@media (prefers-reduced-motion: reduce) {
  body.has-entered .site-header,
  body.has-entered .site-header .header-inner,
  body.has-entered #home-hero,
  body.has-entered #home-hero > .container {
    transition: none !important;
  }
}

/* 1.0.40: no circular clip on the hero copy. Since 1.0.34 the copy carries a soft dark legibility
   scrim (::before); the emerge circle clipped it, so a hard-edged dark disc swept across the photo.
   The copy now emerges by fade + the existing staggered 14px rise only. */
#home-hero > .container {
  clip-path: none !important;
}



/* ═════════ 1.0.42 Mobile smoothness — phones/tablets only (≤820px, touch); desktop untouched ═════════
   Hero photo never moves (svh, not dvh, once settled); lotus portal keeps its look with lighter paint;
   Enter gate, single tap, reduced-motion fallbacks unchanged. Audit: tools/mobile_audit_1042.js. */

/* Taps: no double-tap-zoom wait on links/buttons (iOS/Android); soft teal press tint instead of grey */
a, button, summary, label, [role="button"], input[type="submit"] {
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.14); }
}

/* Touch screens: hover lifts stuck on after a tap (card stayed raised/glowing until you tapped elsewhere) */
@media (hover: none) {
  .card:hover:not(:focus-within),
  .value-block:hover:not(:focus-within) {
    transform: none;
    box-shadow: none;
  }
  .page-participants .participant-file:hover,
  a.practitioner-card:hover { transform: none; }
  .card:hover img,
  .value-block:hover img,
  .page-participants .participant-file:hover > a img,
  .page-participants .participant-file:hover > p > a img { transform: none; }
  .card:active, .value-block:active, a.practitioner-card:active { transform: translateY(1px); transition-duration: 0.08s; }
}

@media (max-width: 820px) {
  /* Address bar: the settled hero used 100dvh, which re-sizes while the phone's URL bar slides away —
     the cover photo re-cropped (looked like a nudge/zoom) and everything below jumped. svh is fixed;
     at the top (URL bar shown, i.e. the handoff moment) svh = dvh, so the pinned→settled crop is identical. */
  body.has-entered #home-hero { min-height: 100vh !important; min-height: 100svh !important; }

  /* Menu button: was 34×17px — a real 44×44 target, bars unchanged, right edge aligned with content */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -0.7rem;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Open menu: quick fade/drop (compositor only), scrolls inside itself on short screens, page can't scroll behind */
  .site-nav.is-open {
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 24px rgba(var(--ink-rgb), 0.08);
    animation: navana-menu-in 0.18s var(--motion-ease) both;
  }
  .site-nav a { display: flex; align-items: center; min-height: 48px; padding-block: 0.6rem; }
  .site-nav a.nav-cta { justify-content: center; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  html.nav-open body { touch-action: none; }
  html.nav-open .site-nav { touch-action: pan-y; }

  /* Quiet text links → 44px-tall tap rows (look unchanged: same size, colour, underline) */
  .page-invite-links { gap: 0 1rem; }
  .page-invite-links a,
  .inquiry-link a,
  .darkness-soft-link,
  .tap-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: rgba(var(--accent-deep-rgb), 0.28);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }
  .page-invite-links a,
  .hero-invite-links.page-invite-links a,
  #home-hero .hero-invite-links.page-invite-links a { text-decoration-color: transparent; }
  .darkness-band .inquiry-link a { text-decoration-color: rgba(var(--on-dark-rgb), 0.35); }
  .darkness-soft-link { text-decoration-color: rgba(var(--on-dark-rgb), 0.22); }
  .inquiry-link { margin-top: 0.4rem; }
  .darkness-links { align-items: center; gap: 0 1rem; }
  .practitioners-jump a,
  .practitioner-action,
  .page-participants .participants-files .participant-file figcaption a { min-height: 44px; }
  .tap-row a { text-decoration-color: transparent; }

  /* Footer: 16px-tall links → 44px rows, two columns so the footer doesn't get longer */
  .footer-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .footer-nav li { margin: 0; }
  .footer-nav a { display: flex; align-items: center; min-height: 44px; }
  .footer-grid { gap: 2rem; }

  /* Small labels: 11–11.5px → 12.5px; still quiet uppercase */
  .eyebrow,
  .page-header .eyebrow { font-size: 0.78rem; }
  .footer-heading { font-size: 0.75rem; }

  /* Forms: 16px+ so iOS never zooms into a field (Contact, password-protected pages) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: max(16px, 1em); }
  .post-password-form input[type="submit"],
  .post-password-form button { min-height: 44px; }

  /* Lotus portal: look kept exactly (glow, petals, camera push measured smooth at 4× CPU — no change needed). */
  /* Content below the pinned hero is off-screen during the emerge — fade it, no animated circle clip */
  body.is-portal-emerge #main > :not(#home-hero),
  body.is-portal-done #main > :not(#home-hero),
  body.has-entered #main > :not(#home-hero),
  body.is-portal-emerge .site-footer,
  body.is-portal-done .site-footer,
  body.has-entered .site-footer { clip-path: none; transition: opacity 0.8s var(--ease) 0.08s; }
  body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main > :not(#home-hero),
  body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) #main > :not(#home-hero),
  body.intro-locked:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer,
  body.intro-entering:not(.is-portal-emerge):not(.is-portal-done):not(.has-entered) .site-footer { clip-path: none; }

  /* Settled header: the reading-down hide/return slide is a little quicker on a phone */
  .site-header,
  body.has-entered .site-header { transition: transform 0.28s var(--motion-ease), background-color var(--motion-hover) var(--motion-ease); }
  .site-header.is-settled,
  body.has-entered .site-header.is-settled { box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.18); }
}

@keyframes navana-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open { animation: none !important; }
  .card:active, .value-block:active, a.practitioner-card:active { transform: none !important; }
}