/* ================================================================
   INNER CURRENT — Design System
   shreejavachhani.com
   v1.1 — adds glass surfaces, hover patterns, two new specialty icons
   ----------------------------------------------------------------
   TABLE OF CONTENTS
   01. DESIGN TOKENS
   02. RESET + BASE
   03. AMBIENT BACKGROUND
   04. SKIP LINK
   05. GLASS NAVIGATION (desktop)
   06. MOBILE MENU OVERLAY
   07. HOVER PATTERN UTILITIES
   08. CONTAINERS
   09. SHARED ELEMENTS (eyebrow, horizon, brand dot)
   10. BUTTONS
   11. INLINE LINKS
   12. PAGE HEROES
   13. SECTION FRAMEWORK
   14. PROSE STYLES
   15. PULL QUOTE
   16. AREA / SPECIALTY CARDS
   17. SERVICE BLOCKS (Individual / Couples)
   18. BIO BLOCK + IDENTITY CLAIMS
   19. MODALITIES LIST
   20. REFLECTION (centered quote)
   21. PRACTICAL INFO BLOCK
   22. AREAS LIST (compact, for home preview)
   23. BREATH MOTIF + FINAL CTA
   24. CONTACT FORM
   25. FAQ ACCORDION
   26. CRISIS RESOURCES
   27. FOOTER
   28. REVEAL ANIMATIONS
   29. REDUCED MOTION
   30. RESPONSIVE
   ================================================================ */


/* ================================================================
   01. DESIGN TOKENS
   ================================================================ */
:root {
  /* — Color: surface — */
  --ic-eggshell:        #EFEAE2;
  --ic-eggshell-warm:   #F2EDE3;
  --ic-eggshell-deep:   #E5DECF;

  /* — Color: ink — */
  --ic-teal:            #1F3A3D;
  --ic-teal-soft:       #34555A;

  /* — Color: depth — */
  --ic-indigo:          #3D5A6C;
  --ic-indigo-deep:     #2A4150;

  /* — Color: warmth — */
  --ic-clay:            #B47A5C;
  --ic-clay-deep:       #9C5F46;
  --ic-ochre-pale:      #D9B58A;

  /* — Color: rules — */
  --ic-rule:            rgba(31, 58, 61, 0.14);
  --ic-rule-soft:       rgba(31, 58, 61, 0.08);
  --ic-rule-strong:     rgba(31, 58, 61, 0.24);

  /* — Type families — */
  --ic-font-display:    'Spectral', 'Georgia', serif;
  --ic-font-body:       'Spectral', 'Georgia', serif;
  --ic-font-ui:         'DM Sans', system-ui, sans-serif;
  --ic-font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* — Type scale — */
  --ic-text-hero:       clamp(3.25rem, 7.5vw, 7rem);
  --ic-text-h1:         clamp(2.75rem, 5.5vw, 5rem);
  --ic-text-h2:         clamp(2rem, 4vw, 3.5rem);
  --ic-text-h3:         clamp(1.5rem, 2.5vw, 2.25rem);
  --ic-text-pull:       clamp(1.75rem, 3.5vw, 3rem);
  --ic-text-lede:       clamp(1.25rem, 1.6vw, 1.625rem);
  --ic-text-body-lg:    1.3125rem;
  --ic-text-body:       1.1875rem;
  --ic-text-ui:         1rem;
  --ic-text-sm:         0.875rem;
  --ic-text-xs:         0.75rem;
  --ic-text-meta:       0.6875rem;
  --ic-text-label:      0.625rem;

  /* — Type weight — */
  --ic-w-light:         200;
  --ic-w-regular:       300;
  --ic-w-medium:        400;
  --ic-w-semi:          500;

  /* — Type rhythm — */
  --ic-lh-display:      0.98;
  --ic-lh-tight:        1.05;
  --ic-lh-snug:         1.3;
  --ic-lh-normal:       1.55;
  --ic-lh-prose:        1.75;
  --ic-lh-airy:         1.85;
  --ic-tracking-tight:  -0.025em;
  --ic-tracking-normal: 0;
  --ic-tracking-wide:   0.2em;
  --ic-tracking-wider:  0.3em;
  --ic-tracking-widest: 0.4em;

  /* — Spacing scale (4px base) — */
  --ic-s-1:  4px;
  --ic-s-2:  8px;
  --ic-s-3:  12px;
  --ic-s-4:  16px;
  --ic-s-5:  20px;
  --ic-s-6:  24px;
  --ic-s-7:  32px;
  --ic-s-8:  40px;
  --ic-s-9:  48px;
  --ic-s-10: 56px;
  --ic-s-11: 64px;
  --ic-s-12: 80px;
  --ic-s-13: 100px;
  --ic-s-14: 120px;
  --ic-s-15: 140px;
  --ic-s-16: 160px;

  /* — Section rhythm — */
  --ic-section-y:        140px;
  --ic-section-y-mobile: 80px;

  /* — Layout — */
  --ic-container:        1180px;
  --ic-container-tight:  880px;
  --ic-container-prose:  720px;
  --ic-gutter:           56px;
  --ic-gutter-mobile:    24px;

  /* — Radii — */
  --ic-r-none:    0;
  --ic-r-sm:      4px;
  --ic-r-md:      8px;
  --ic-r-pill:    999px;
  --ic-r-full:    50%;

  /* — Motion: durations — */
  --ic-d-instant:  150ms;
  --ic-d-quick:    300ms;
  --ic-d-soft:     600ms;
  --ic-d-wash:     1000ms;
  --ic-d-settle:   1400ms;
  --ic-d-emanate:  8s;
  --ic-d-breath:   8s;
  --ic-d-flow:     22s;
  --ic-d-drift:    32s;

  /* — Motion: easings — */
  --ic-ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ic-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ic-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ic-ease-breath:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* — Z-index — */
  --ic-z-bg:        -1;
  --ic-z-base:      0;
  --ic-z-elevated:  10;
  --ic-z-sticky:    100;
  --ic-z-overlay:   1000;
  --ic-z-modal:     2000;

  /* — Glass surfaces (v1.1 addition) — */
  --ic-glass-bg:          rgba(239, 234, 226, 0.28);
  --ic-glass-bg-scrolled: rgba(239, 234, 226, 0.5);
  --ic-glass-bg-strong:   rgba(239, 234, 226, 0.8);
  --ic-glass-border:      rgba(255, 255, 255, 0.5);
  --ic-glass-blur:        blur(20px) saturate(140%);
  --ic-glass-blur-strong: blur(28px) saturate(150%);
}


/* ================================================================
   02. RESET + BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* compensate for fixed nav */
}
body {
  background: var(--ic-eggshell);
  color: var(--ic-teal);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-ui);
  line-height: var(--ic-lh-normal);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}
img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
blockquote { quotes: none; }

/* Focus state (per brand book §21) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--ic-clay);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Selection */
::selection {
  background: rgba(180, 122, 92, 0.25);
  color: var(--ic-teal);
}


/* ================================================================
   03. AMBIENT BACKGROUND
   Slow-drifting color washes. The page itself breathes.
   ================================================================ */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: var(--ic-z-bg);
  pointer-events: none;
  overflow: hidden;
}
.ambient-bg .wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  animation: drift 32s ease-in-out infinite;
}
.ambient-bg .wash-1 {
  width: 800px; height: 800px;
  background: rgba(180, 122, 92, 0.18);
  top: -10%; left: -15%;
}
.ambient-bg .wash-2 {
  width: 700px; height: 700px;
  background: rgba(61, 90, 108, 0.14);
  top: 40%; right: -12%;
  animation-delay: -10s; animation-duration: 38s;
}
.ambient-bg .wash-3 {
  width: 600px; height: 600px;
  background: rgba(217, 181, 138, 0.16);
  bottom: -10%; left: 30%;
  animation-delay: -20s; animation-duration: 42s;
}
/* On inner pages, slightly dial back so content reads cleanly */
body.page-inner .ambient-bg .wash { opacity: 0.45; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -40px) scale(1.06); }
  66%      { transform: translate(-40px, 50px) scale(0.94); }
}


/* ================================================================
   04. SKIP LINK
   ================================================================ */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ic-teal);
  color: var(--ic-eggshell);
  padding: 12px 20px;
  z-index: 9999;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--ic-w-semi);
}
.skip-link:focus { left: 16px; top: 16px; }


/* ================================================================
   05. GLASS NAVIGATION
   ----------------------------------------------------------------
   Frosted color glass: backdrop-filter blurs ambient washes
   behind it; inner radial gradients drift slowly inside the pill;
   inner-white border + soft outer shadow give the floating effect.
   On scroll past 60px, .scrolled increases opacity + shadow.
   ================================================================ */
.site-nav {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1100px;
  z-index: var(--ic-z-sticky);
  padding: 14px 24px 14px 28px;

  background: var(--ic-glass-bg);
  backdrop-filter: var(--ic-glass-blur);
  -webkit-backdrop-filter: var(--ic-glass-blur);

  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-r-pill);
  overflow: hidden;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 1px rgba(31, 58, 61, 0.04),
    0 8px 32px rgba(31, 58, 61, 0.06),
    0 16px 64px rgba(31, 58, 61, 0.04);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  transition:
    background var(--ic-d-soft) var(--ic-ease-soft),
    box-shadow var(--ic-d-soft) var(--ic-ease-soft);
}
.site-nav::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 100% at 15% 50%, rgba(180, 122, 92, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 100% at 85% 50%, rgba(61, 90, 108, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 30%, rgba(217, 181, 138, 0.10) 0%, transparent 65%);
  animation: glass-drift 28s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes glass-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(16px, 4px); }
}
.site-nav > * { position: relative; z-index: 1; }
.site-nav.scrolled {
  background: var(--ic-glass-bg-scrolled);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 1px rgba(31, 58, 61, 0.08),
    0 14px 48px rgba(31, 58, 61, 0.1),
    0 24px 80px rgba(31, 58, 61, 0.05);
}

.site-nav__brand {
  display: flex; align-items: center;
  font-family: var(--ic-font-display);
  font-style: normal;
  font-weight: var(--ic-w-regular);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ic-teal);
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.site-nav__brand em {
  font-style: italic;
  color: var(--ic-clay);
  margin: 0 0.06em;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.site-nav__brand:hover em { color: var(--ic-clay-deep); }
.site-nav__dot { display: none; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav__link {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  color: var(--ic-teal-soft);
  font-weight: var(--ic-w-semi);
  position: relative;
  padding: 4px 0;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 1px;
  background: var(--ic-clay);
  transition:
    left var(--ic-d-soft) var(--ic-ease-out),
    right var(--ic-d-soft) var(--ic-ease-out);
}
.site-nav__link:hover { color: var(--ic-clay); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  left: 0; right: 0;
}
.site-nav__link[aria-current="page"] { color: var(--ic-clay); }

.site-nav__cta {
  padding: 10px 22px;
  border: 1px solid var(--ic-teal);
  border-radius: var(--ic-r-pill);
  color: var(--ic-teal);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--ic-w-semi);
  background: transparent;
  transition:
    color var(--ic-d-soft) var(--ic-ease-soft),
    border-color var(--ic-d-soft) var(--ic-ease-soft);
  position: relative;
  overflow: hidden;
}
.site-nav__cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ic-clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ic-d-soft) var(--ic-ease-out);
  z-index: -1;
}
.site-nav__cta:hover {
  color: var(--ic-eggshell);
  border-color: var(--ic-clay);
}
.site-nav__cta:hover::before { transform: scaleX(1); }

/* Mobile hamburger */
.site-nav__hamburger {
  display: none;
  width: 40px; height: 40px;
  position: relative;
  border-radius: 50%;
  transition: background var(--ic-d-quick) var(--ic-ease-soft);
}
.site-nav__hamburger:hover { background: rgba(180, 122, 92, 0.08); }
.site-nav__hamburger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1px;
  background: var(--ic-teal);
  transition: all var(--ic-d-soft) var(--ic-ease-soft);
}
.site-nav__hamburger span:nth-child(1) { top: 16px; }
.site-nav__hamburger span:nth-child(2) { top: 23px; }


/* ================================================================
   06. MOBILE MENU OVERLAY
   ----------------------------------------------------------------
   Full-screen frosted overlay. Slides in from right.
   Same glass treatment as the desktop nav.
   ================================================================ */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--ic-glass-bg-strong);
  backdrop-filter: var(--ic-glass-blur-strong);
  -webkit-backdrop-filter: var(--ic-glass-blur-strong);
  z-index: var(--ic-z-overlay);
  transform: translateX(100%);
  transition: transform var(--ic-d-soft) var(--ic-ease-out);
  display: flex;
  flex-direction: column;
  padding: 80px 32px 48px;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(180, 122, 92, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(61, 90, 108, 0.16) 0%, transparent 60%);
  animation: glass-drift 36s ease-in-out infinite;
  pointer-events: none;
}
.mobile-menu > * { position: relative; z-index: 1; }
.mobile-menu__close {
  position: absolute;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ic-font-display);
  font-size: 28px;
  color: var(--ic-teal);
  font-weight: 200;
  transition: background var(--ic-d-quick) var(--ic-ease-soft);
}
.mobile-menu__close:hover { background: rgba(180, 122, 92, 0.1); }
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.mobile-menu__link {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 32px;
  line-height: 1.2;
  color: var(--ic-teal);
  padding: 12px 0;
  border-bottom: 1px solid var(--ic-rule);
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.mobile-menu__link:hover,
.mobile-menu__link[aria-current="page"] { color: var(--ic-clay); }
.mobile-menu__cta {
  margin-top: 32px;
  padding: 18px 32px;
  background: var(--ic-teal);
  color: var(--ic-eggshell);
  border-radius: var(--ic-r-pill);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--ic-w-semi);
  text-align: center;
  transition: background var(--ic-d-soft) var(--ic-ease-soft);
}
.mobile-menu__cta:hover { background: var(--ic-clay); }
.mobile-menu__footer {
  margin-top: 32px;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ic-teal-soft);
  text-align: center;
}

body.menu-open { overflow: hidden; }


/* ================================================================
   07. HOVER PATTERN UTILITIES
   ----------------------------------------------------------------
   Three reusable patterns. All slow (400–1000ms), ease-out,
   never more than 3px of movement. Compose as needed.
     .hover-wash   — radial gradient blooms from corner
     .hover-glow   — soft inner box-shadow appears
     .hover-bleed  — color softens to clay
   ================================================================ */
.hover-wash {
  position: relative;
  overflow: hidden;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out),
    transform var(--ic-d-wash) var(--ic-ease-out);
}
.hover-wash::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 140%; height: 140%;
  background: radial-gradient(circle at 25% 75%, rgba(180, 122, 92, 0.28) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.hover-wash > * { position: relative; z-index: 1; }
.hover-wash:hover::before { opacity: 1; }


/* ================================================================
   08. CONTAINERS
   ================================================================ */
.container {
  max-width: var(--ic-container);
  margin: 0 auto;
  padding: 0 var(--ic-gutter);
}
.container-tight { max-width: var(--ic-container-tight); }
.container-prose { max-width: var(--ic-container-prose); }


/* ================================================================
   09. SHARED ELEMENTS
   ================================================================ */
.eyebrow {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 13px;
  letter-spacing: var(--ic-tracking-widest);
  text-transform: uppercase;
  color: var(--ic-clay);
  text-align: center;
}
.eyebrow.left { text-align: left; }

.horizon {
  width: 200px;
  height: 1px;
  background: var(--ic-teal-soft);
  margin: 0 auto;
  opacity: 0.4;
  position: relative;
}
.horizon::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ic-clay);
}


/* ================================================================
   10. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 38px;
  background: var(--ic-teal);
  color: var(--ic-eggshell);
  border: 1px solid var(--ic-teal);
  border-radius: var(--ic-r-pill);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--ic-w-semi);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background var(--ic-d-soft) var(--ic-ease-soft),
    border-color var(--ic-d-soft) var(--ic-ease-soft),
    box-shadow var(--ic-d-soft) var(--ic-ease-soft);
}
.btn:hover {
  background: var(--ic-clay);
  border-color: var(--ic-clay);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.15);
}
.btn.ghost {
  background: transparent;
  color: var(--ic-teal);
}
.btn.ghost:hover {
  background: transparent;
  color: var(--ic-clay);
  border-color: var(--ic-clay);
  box-shadow: inset 0 0 0 1px var(--ic-clay);
}
.btn.full { width: 100%; justify-content: center; }


/* ================================================================
   11. INLINE LINKS — "read more" arrows
   ================================================================ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  color: var(--ic-teal);
  padding: 4px 0;
  position: relative;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.link-arrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 1px;
  background: var(--ic-clay);
  transition:
    left var(--ic-d-soft) var(--ic-ease-out),
    right var(--ic-d-soft) var(--ic-ease-out);
}
.link-arrow:hover { color: var(--ic-clay); }
.link-arrow:hover::after { left: 0; right: 0; }
.link-arrow .arrow {
  font-size: 14px;
  transition: transform var(--ic-d-soft) var(--ic-ease-out);
}
.link-arrow:hover .arrow { transform: translateX(6px); }

/* Inline link inside prose */
.inline-link {
  color: var(--ic-clay);
  position: relative;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.inline-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--ic-clay);
  opacity: 0.4;
  transition: opacity var(--ic-d-soft) var(--ic-ease-soft);
}
.inline-link:hover { color: var(--ic-clay-deep); }
.inline-link:hover::after { opacity: 1; }


/* ================================================================
   12. PAGE HEROES
   ================================================================ */
.hero {
  padding: 220px 0 120px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.hero-content { position: relative; z-index: 1; }

/* Hero variants */
.hero.hero-home { padding: 220px 0 100px; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; }
.hero.hero-inner { padding: 200px 0 100px; }
.hero.hero-short { padding: 180px 0 80px; }

/* Concentric ripples behind hero */
.hero-ripples {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, 110vw);
  height: min(1000px, 110vw);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.hero-ripples.small {
  width: min(640px, 80vw);
  height: min(640px, 80vw);
  opacity: 0.35;
}
.hero-ripples circle {
  fill: none;
  stroke: var(--ic-clay);
  stroke-width: 0.5;
  transform-origin: center;
  animation: ic-emanate 9s ease-out infinite;
  opacity: 0;
}
.hero-ripples circle:nth-child(1) { animation-delay: 0s; }
.hero-ripples circle:nth-child(2) { animation-delay: 2.25s; }
.hero-ripples circle:nth-child(3) { animation-delay: 4.5s; }
.hero-ripples circle:nth-child(4) { animation-delay: 6.75s; }
@keyframes ic-emanate {
  0%   { transform: scale(0.15); opacity: 0; stroke-width: 1.2; }
  20%  { opacity: 0.75; }
  100% { transform: scale(1.4); opacity: 0; stroke-width: 0.3; }
}

.hero-eyebrow {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 13px;
  letter-spacing: var(--ic-tracking-widest);
  text-transform: uppercase;
  color: var(--ic-clay);
  margin-bottom: var(--ic-s-10);
}
.hero-eyebrow .ornament { color: var(--ic-ochre-pale); margin: 0 8px; }

.hero h1 {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: var(--ic-text-hero);
  line-height: var(--ic-lh-display);
  letter-spacing: var(--ic-tracking-tight);
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-9);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.hero h1 em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.hero-h1-smaller h1 { font-size: var(--ic-text-h1); }

.hero-sub {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: var(--ic-text-lede);
  line-height: var(--ic-lh-normal);
  color: var(--ic-teal-soft);
  max-width: 680px;
  margin: 0 auto var(--ic-s-11);
}
.hero-sub.upright { font-style: normal; }

.hero-sub-two {
  font-family: var(--ic-font-display);
  font-size: 1.15rem;
  font-weight: var(--ic-w-regular);
  color: var(--ic-teal-soft);
  line-height: 1.7;
  max-width: 700px;
  margin: -32px auto 64px;
}

.hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--ic-s-12);
}


/* ================================================================
   13. SECTION FRAMEWORK
   ================================================================ */
section.s {
  padding: var(--ic-section-y) 0;
  position: relative;
}
section.s + section.s { border-top: 1px solid var(--ic-rule); }

.section-head {
  text-align: center;
  margin-bottom: var(--ic-s-12);
}
.section-head .eyebrow { margin-bottom: var(--ic-s-6); }

.section-h {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: var(--ic-text-h1);
  line-height: var(--ic-lh-tight);
  letter-spacing: var(--ic-tracking-tight);
  color: var(--ic-teal);
  max-width: 880px;
  margin: 0 auto;
}
.section-h em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.section-h.smaller { font-size: var(--ic-text-h2); }


/* ================================================================
   14. PROSE STYLES
   ================================================================ */
.prose {
  font-family: var(--ic-font-display);
  max-width: var(--ic-container-prose);
  margin: 0 auto;
}
.prose p {
  font-weight: var(--ic-w-regular);
  font-size: var(--ic-text-body-lg);
  line-height: var(--ic-lh-prose);
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-7);
}
.prose p em {
  font-style: italic;
  color: var(--ic-clay);
}
.prose p:last-child { margin-bottom: 0; }

.prose.centered { text-align: center; }
.prose.centered p { font-size: 22px; line-height: 1.8; margin-bottom: var(--ic-s-8); }

/* Drop cap on first paragraph */
.drop-cap::first-letter {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 84px;
  float: left;
  line-height: 0.85;
  margin: 6px 14px 0 0;
  color: var(--ic-clay);
}

/* Section sub-heading inside long-form pages */
.prose h3 {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ic-teal);
  margin: var(--ic-s-12) 0 var(--ic-s-5);
  letter-spacing: -0.015em;
}
.prose h3 em {
  font-style: italic;
  color: var(--ic-clay);
}
.prose h3:first-child { margin-top: 0; }


/* ================================================================
   15. PULL QUOTE
   ================================================================ */
.pull-quote {
  margin: var(--ic-s-13) auto;
  max-width: 880px;
  text-align: center;
  padding: 0 var(--ic-s-7);
  position: relative;
}
.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--ic-clay);
  margin: 0 auto;
  opacity: 0.6;
}
.pull-quote::before { margin-bottom: var(--ic-s-8); }
.pull-quote::after { margin-top: var(--ic-s-8); }
.pull-quote p {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: var(--ic-text-pull);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ic-teal);
}
.pull-quote p em { color: var(--ic-clay); }


/* ================================================================
   16. AREA / SPECIALTY CARDS
   Used on Services page and (smaller variant) preview.
   ================================================================ */
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.area-grid.three-up { grid-template-columns: repeat(3, 1fr); }
.area-grid.two-up   { grid-template-columns: repeat(2, 1fr); }

.area {
  position: relative;
  padding: 40px 28px 36px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ic-rule);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out),
    transform var(--ic-d-wash) var(--ic-ease-out);
}
.area::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 140%; height: 140%;
  background: radial-gradient(circle at 25% 75%, rgba(180, 122, 92, 0.28) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.area > * { position: relative; z-index: 1; }
.area:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(180, 122, 92, 0.3);
  transform: translateY(-3px);
}
.area:hover::before { opacity: 1; }

.area-icon {
  width: 44px; height: 44px;
  margin-bottom: var(--ic-s-7);
  transition: transform var(--ic-d-wash) var(--ic-ease-out);
}
.area:hover .area-icon { transform: scale(1.06); }

.area-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 20px;
  line-height: 1.25;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-4);
  letter-spacing: -0.005em;
}
.area-title em {
  font-style: italic;
  color: var(--ic-clay);
}

.area-desc {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ic-teal-soft);
  flex: 1;
}


/* ================================================================
   17. SERVICE BLOCKS — Individual + Couples on Services page
   ================================================================ */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.service {
  position: relative;
  padding: 56px 48px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ic-rule);
  overflow: hidden;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out);
}
.service::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 70%, rgba(180, 122, 92, 0.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.service > * { position: relative; z-index: 1; }
.service:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(180, 122, 92, 0.25);
}
.service:hover::before { opacity: 1; }

.service-icon { width: 56px; height: 56px; margin-bottom: var(--ic-s-7); }
.service-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-5);
}
.service-title em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.service-desc {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-5);
}
.service-desc em {
  font-style: italic;
  color: var(--ic-clay);
}
.service-desc:last-child { margin-bottom: 0; }


/* ================================================================
   18. BIO BLOCK + IDENTITY CLAIMS
   ================================================================ */
.bio-block {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--ic-s-12);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.bio-block.flipped { grid-template-columns: 1.4fr 1fr; }

.bio-portrait {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 35% 30%, rgba(217, 181, 138, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 60% 65%, rgba(180, 122, 92, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 70% 30%, rgba(61, 90, 108, 0.22) 0%, transparent 50%),
    linear-gradient(160deg, var(--ic-eggshell-warm) 0%, var(--ic-eggshell-deep) 100%);
  border: 1px solid var(--ic-rule);
}
.bio-portrait::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(180, 122, 92, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(217, 181, 138, 0.18) 0%, transparent 60%);
  animation: portrait-drift 36s ease-in-out infinite;
}
@keyframes portrait-drift {
  0%, 100% { transform: scale(1)    translate(0, 0); }
  33%      { transform: scale(1.04) translate(-8px, 4px); }
  66%      { transform: scale(0.98) translate(6px, -6px); }
}
.bio-portrait::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.bio-portrait.large { aspect-ratio: 4 / 5; }

/* Bio content */
.bio-name {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-2);
}
.bio-name em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.bio-credentials {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  color: var(--ic-clay);
  margin-bottom: var(--ic-s-7);
}
.bio-prose {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-5);
}
.bio-prose em {
  font-style: italic;
  color: var(--ic-clay);
}
.bio-link { margin-top: var(--ic-s-4); display: inline-flex; }

/* Identity claims — the pipe-delimited list of roles on About */
.identity-claims {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  max-width: 760px;
  margin: 0 auto var(--ic-s-9);
}
.identity-claims.left { justify-content: flex-start; margin: 0 0 var(--ic-s-9); }
.identity-claims span {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 16px;
  color: var(--ic-teal-soft);
  position: relative;
}
.identity-claims span::after {
  content: '·';
  margin-left: 18px;
  color: var(--ic-clay);
  opacity: 0.6;
}
.identity-claims span:last-child::after { display: none; }


/* ================================================================
   19. MODALITIES LIST
   ================================================================ */
.modalities {
  text-align: center;
  margin: var(--ic-s-9) auto;
  max-width: 880px;
  padding: var(--ic-s-7) var(--ic-s-7);
  border-top: 1px solid var(--ic-rule);
  border-bottom: 1px solid var(--ic-rule);
}
.modalities-label {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-widest);
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
  margin-bottom: var(--ic-s-5);
}
.modalities-list {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ic-teal);
}
.modalities-list span { display: inline; }
.modalities-list span::after {
  content: ' · ';
  color: var(--ic-clay);
}
.modalities-list span:last-child::after { display: none; }


/* ================================================================
   20. REFLECTION (centered quote)
   ================================================================ */
.reflection {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reflection-bg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}
.reflection-bg circle {
  fill: none;
  stroke: var(--ic-clay);
  stroke-width: 0.6;
  transform-origin: center;
  animation: ic-emanate 8s ease-out infinite;
  opacity: 0;
}
.reflection-bg circle:nth-child(1) { animation-delay: 0s; }
.reflection-bg circle:nth-child(2) { animation-delay: 2s; }
.reflection-bg circle:nth-child(3) { animation-delay: 4s; }
.reflection-bg circle:nth-child(4) { animation-delay: 6s; }

.reflection-content { position: relative; z-index: 1; }
.reflection-quote {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.5;
  color: var(--ic-teal);
}
.reflection-quote em { color: var(--ic-clay); }


/* ================================================================
   21. PRACTICAL INFO BLOCK
   For the "where, format, languages" data on home + fees.
   ================================================================ */
.practical {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 56px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ic-rule);
  position: relative;
}
.practical-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--ic-s-7);
  align-items: baseline;
  padding: var(--ic-s-5) 0;
  border-bottom: 1px solid var(--ic-rule-soft);
}
.practical-row:last-of-type { border-bottom: none; }
.practical-row dt {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
}
.practical-row dd {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ic-teal);
}
.practical-row dd em {
  font-style: italic;
  color: var(--ic-clay);
}
.practical-link {
  margin-top: var(--ic-s-7);
  padding-top: var(--ic-s-6);
  border-top: 1px solid var(--ic-rule);
  text-align: right;
}


/* ================================================================
   22. AREAS LIST — compact, for home preview
   ================================================================ */
.areas-list {
  max-width: 800px;
  margin: 0 auto var(--ic-s-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.areas-list li {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  color: var(--ic-teal);
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--ic-rule-soft);
  position: relative;
}
.areas-list li::before {
  content: '~';
  position: absolute;
  left: 0;
  color: var(--ic-clay);
}


/* ================================================================
   23. BREATH MOTIF + FINAL CTA
   ================================================================ */
.breath-motif {
  width: 180px; height: 180px;
  position: relative;
  margin: 0 auto var(--ic-s-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.breath-orb {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 122, 92, 0.32) 0%, rgba(180, 122, 92, 0.08) 65%, transparent 100%);
  border: 1px solid rgba(180, 122, 92, 0.5);
  animation: breath-cycle 8s ease-in-out infinite;
}
.breath-ring {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 1px solid var(--ic-clay);
  opacity: 0;
  animation: breath-ring 8s ease-out infinite;
}
@keyframes breath-cycle {
  0%, 100% { transform: scale(0.85); opacity: 0.75; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes breath-ring {
  0%   { transform: scale(0.7); opacity: 0; }
  50%  { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.3); opacity: 0; }
}
.breath-paused .breath-orb,
.breath-paused .breath-ring { animation-play-state: paused; }

.final-cta {
  text-align: center;
  position: relative;
}
.final-cta .eyebrow { margin-bottom: var(--ic-s-5); }
.final-cta h2 {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: var(--ic-text-h1);
  line-height: 1.05;
  letter-spacing: var(--ic-tracking-tight);
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-7);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta h2 em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.final-cta-sub {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ic-teal-soft);
  max-width: 620px;
  margin: 0 auto var(--ic-s-10);
}
.final-cta-sub em {
  font-style: italic;
  color: var(--ic-clay);
}


/* ================================================================
   24. CONTACT FORM
   ================================================================ */
.form-block {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 56px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--ic-rule);
  position: relative;
}
.form-helper {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ic-teal-soft);
  text-align: center;
  margin-bottom: var(--ic-s-9);
  line-height: 1.6;
}
.form-field { margin-bottom: var(--ic-s-7); }
.form-field label {
  display: block;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-teal-soft);
  margin-bottom: var(--ic-s-2);
  font-weight: var(--ic-w-semi);
}
.form-field label .req {
  color: var(--ic-clay);
  margin-left: 4px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--ic-s-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ic-rule);
  font-family: var(--ic-font-display);
  font-size: 18px;
  color: var(--ic-teal);
  transition: border-color var(--ic-d-quick) var(--ic-ease-soft);
}
.form-field textarea {
  resize: vertical;
  min-height: 88px;
  padding: var(--ic-s-3) 0;
}
.form-field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B47A5C' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 8px;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-bottom-color: var(--ic-clay);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ic-teal-soft);
  opacity: 0.4;
  font-style: italic;
}
.form-note {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ic-teal-soft);
  margin-top: var(--ic-s-3);
  line-height: 1.55;
}
.form-crisis {
  margin-top: var(--ic-s-7);
  padding: var(--ic-s-5);
  border: 1px solid rgba(156, 95, 70, 0.3);
  border-left: 3px solid var(--ic-clay-deep);
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ic-teal);
}
.form-crisis strong {
  font-style: normal;
  font-family: var(--ic-font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ic-clay-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.form-submit-row { margin-top: var(--ic-s-9); }


/* ================================================================
   25. FAQ ACCORDION
   ================================================================ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid var(--ic-rule);
}
.faq-item:last-child { border-bottom: 1px solid var(--ic-rule); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--ic-s-7) 0;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ic-teal);
  text-align: left;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.faq-q:hover { color: var(--ic-clay); }
.faq-q-plus {
  color: var(--ic-clay);
  font-style: normal;
  font-size: 18px;
  flex-shrink: 0;
  margin-left: var(--ic-s-7);
  transition: transform var(--ic-d-soft) var(--ic-ease-soft);
}
.faq-item[aria-expanded="true"] .faq-q-plus { transform: rotate(45deg); }
.faq-a {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ic-teal-soft);
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--ic-d-soft) var(--ic-ease-soft),
    margin-bottom var(--ic-d-soft) var(--ic-ease-soft),
    padding-bottom var(--ic-d-soft) var(--ic-ease-soft);
}
.faq-item[aria-expanded="true"] .faq-a {
  max-height: 600px;
  margin-bottom: var(--ic-s-7);
}
.faq-a p { margin-bottom: var(--ic-s-4); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a em {
  font-style: italic;
  color: var(--ic-clay);
}


/* ================================================================
   26. CRISIS RESOURCES
   ================================================================ */
.crisis-block {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--ic-s-12) var(--ic-s-10);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--ic-rule);
  border-left: 3px solid var(--ic-clay-deep);
}
.crisis-block h3 {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-5);
}
.crisis-block h3 em {
  font-style: italic;
  color: var(--ic-clay-deep);
}
.crisis-resource {
  padding: var(--ic-s-5) 0;
  border-bottom: 1px solid var(--ic-rule-soft);
}
.crisis-resource:last-child { border-bottom: none; padding-bottom: 0; }
.crisis-resource-name {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 19px;
  color: var(--ic-teal);
  margin-bottom: 4px;
}
.crisis-resource-detail {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ic-teal-soft);
  line-height: 1.55;
}
.crisis-resource a {
  font-family: var(--ic-font-ui);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
  margin-left: var(--ic-s-3);
  transition: color var(--ic-d-quick) var(--ic-ease-soft);
}
.crisis-resource a:hover { color: var(--ic-clay-deep); }


/* ================================================================
   27. FOOTER
   ================================================================ */
.site-footer {
  background: var(--ic-teal);
  color: var(--ic-eggshell);
  padding: 96px 0 32px;
  margin-top: var(--ic-s-12);
  position: relative;
  overflow: hidden;
}
.footer-ripples {
  position: absolute;
  top: -180px; left: -180px;
  width: 600px; height: 600px;
  opacity: 0.12;
  pointer-events: none;
}
.footer-ripples circle {
  fill: none;
  stroke: var(--ic-ochre-pale);
  stroke-width: 0.5;
  transform-origin: center;
  animation: ic-emanate 9s ease-out infinite;
  opacity: 0;
}
.footer-ripples circle:nth-child(1) { animation-delay: 0s; }
.footer-ripples circle:nth-child(2) { animation-delay: 2.25s; }
.footer-ripples circle:nth-child(3) { animation-delay: 4.5s; }
.footer-ripples circle:nth-child(4) { animation-delay: 6.75s; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  position: relative;
  z-index: 1;
}
.footer-wordmark {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: 36px;
  line-height: 1.05;
  color: var(--ic-eggshell);
  margin-bottom: var(--ic-s-5);
  letter-spacing: -0.02em;
}
.footer-wordmark em {
  font-style: italic;
  color: var(--ic-ochre-pale);
}
.footer-tagline {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(239, 234, 226, 0.75);
  max-width: 340px;
}
.footer-col h4 {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-widest);
  text-transform: uppercase;
  color: var(--ic-ochre-pale);
  margin-bottom: var(--ic-s-6);
  font-weight: var(--ic-w-semi);
}
.footer-col a {
  display: block;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 16px;
  color: rgba(239, 234, 226, 0.85);
  padding: 6px 0;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.footer-col a:hover { color: var(--ic-ochre-pale); }
.footer-col a em { font-style: italic; color: var(--ic-ochre-pale); }

.footer-bottom {
  margin-top: var(--ic-s-12);
  padding-top: var(--ic-s-7);
  border-top: 1px solid rgba(239, 234, 226, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ic-s-4);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wide);
  text-transform: uppercase;
  color: rgba(239, 234, 226, 0.5);
  position: relative;
  z-index: 1;
}
.footer-bottom a { transition: color var(--ic-d-quick) var(--ic-ease-soft); }
.footer-bottom a:hover { color: var(--ic-ochre-pale); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-s-5);
}
.footer-tag {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(239, 234, 226, 0.6);
}


/* ================================================================
   28. REVEAL ANIMATIONS — Settle on scroll
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.4s var(--ic-ease-out),
    transform 1.4s var(--ic-ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.2s var(--ic-ease-out),
    transform 1.2s var(--ic-ease-out);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }


/* ================================================================
   29. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}


/* ================================================================
   30. RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid.three-up { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .site-nav__links { display: none; }
  .site-nav__cta { display: none; }
  .site-nav__hamburger { display: block; }
  .container { padding: 0 var(--ic-gutter-mobile); }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .bio-block, .bio-block.flipped {
    grid-template-columns: 1fr;
    gap: var(--ic-s-10);
    text-align: center;
  }
  .bio-portrait { width: 100%; max-width: 380px; margin: 0 auto; }
  .bio-block .identity-claims.left { justify-content: center; margin-left: auto; margin-right: auto; }
  .bio-block .eyebrow.left { text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--ic-s-9); }
  section.s { padding: var(--ic-section-y-mobile) 0; }
  .hero, .hero.hero-home, .hero.hero-inner, .hero.hero-short {
    padding: 140px 0 80px;
    min-height: auto;
  }
  .pull-quote { margin: var(--ic-s-12) auto; }
  .practical-row { grid-template-columns: 1fr; gap: var(--ic-s-2); }
  .practical { padding: var(--ic-s-9) var(--ic-s-8); }
  .form-block { padding: var(--ic-s-9) var(--ic-s-8); }
}

@media (max-width: 700px) {
  .area-grid, .area-grid.three-up, .area-grid.two-up { grid-template-columns: 1fr; }
  .areas-list { grid-template-columns: 1fr; max-width: 480px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--ic-s-8); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-block { padding: var(--ic-s-7) var(--ic-s-6); }
  .practical { padding: var(--ic-s-7) var(--ic-s-6); }
  .crisis-block { padding: var(--ic-s-9) var(--ic-s-7); }
  .identity-claims span { font-size: 14px; }
  .identity-claims span::after { margin-left: 14px; }
  .site-nav { padding: 12px 14px 12px 22px; }
  .site-nav__brand { font-size: 17px; }
  .drop-cap::first-letter { font-size: 64px; }
}


/* ================================================================
   ╔══════════════════════════════════════════════════════════════╗
   ║  v1.2 ADDITIONS — Per content brief feedback                ║
   ║  31. HERO HIERARCHY REFINEMENT                               ║
   ║  32. COMPACT ICON CARDS (8 starting places)                  ║
   ║  33. LARGE SERVICE CARDS (home Services section)             ║
   ║  34. SOFT STANDALONE LINES (Approach Section 1)              ║
   ║  35. HORIZONTAL TIMELINE (Approach Section 2)                ║
   ║  36. CONSTELLATION / ORBIT (Approach Section 3)              ║
   ║  37. FORMATION MAP (About Section 2)                         ║
   ║  38. PUBLICATION CARDS (About Section 3)                     ║
   ║  39. PATHWAY VISUAL (About Section 1)                        ║
   ║  40. BEGIN PAGE — simplified consultation block              ║
   ║  41. SECONDARY IMAGE                                         ║
   ╚══════════════════════════════════════════════════════════════╝
   ================================================================ */


/* ================================================================
   31. HERO HIERARCHY REFINEMENT
   Stronger sub-line + visible practical line that doesn't read
   as fine print. Hierarchy: eyebrow → question → invitation
   → location/format (separated by a horizon mark) → CTAs.
   ================================================================ */
.hero-invitation {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: 1.55;
  color: var(--ic-teal-soft);
  max-width: 720px;
  margin: 0 auto var(--ic-s-9);
}

.hero-practical {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ic-teal);
  max-width: 720px;
  margin: 0 auto var(--ic-s-10);
  position: relative;
}
.hero-practical em {
  font-style: italic;
  color: var(--ic-clay);
}
.hero-separator {
  width: 80px;
  height: 1px;
  background: var(--ic-rule-strong);
  margin: 0 auto var(--ic-s-7);
  position: relative;
}
.hero-separator::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ic-clay);
}


/* ================================================================
   32. COMPACT ICON CARDS — for the 8 starting places on home
   Smaller than .area cards. Denser grid. Tighter typography.
   ================================================================ */
.compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.compact-card {
  position: relative;
  padding: 28px 24px 26px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ic-rule);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out),
    transform var(--ic-d-wash) var(--ic-ease-out);
}
.compact-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 140%; height: 140%;
  background: radial-gradient(circle at 25% 75%, rgba(180, 122, 92, 0.22) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.compact-card > * { position: relative; z-index: 1; }
.compact-card:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(180, 122, 92, 0.3);
  transform: translateY(-3px);
}
.compact-card:hover::before { opacity: 1; }

.compact-icon {
  width: 34px; height: 34px;
  margin-bottom: 18px;
  transition: transform var(--ic-d-wash) var(--ic-ease-out);
}
.compact-card:hover .compact-icon { transform: scale(1.06); }

.compact-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-3);
  letter-spacing: -0.005em;
}
.compact-title em {
  font-style: italic;
  color: var(--ic-clay);
}

.compact-desc {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ic-teal-soft);
  flex: 1;
}


/* ================================================================
   33. LARGE SERVICE CARDS — for Services section on home
   Bigger than .service. The hero of the middle of the page.
   ================================================================ */
.large-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.large-service {
  position: relative;
  padding: 72px 56px 64px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--ic-rule);
  overflow: hidden;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out);
}
.large-service::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 70%, rgba(180, 122, 92, 0.2) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.large-service > * { position: relative; z-index: 1; }
.large-service:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(180, 122, 92, 0.28);
}
.large-service:hover::before { opacity: 1; }

.large-service-icon {
  width: 64px; height: 64px;
  margin-bottom: var(--ic-s-8);
}
.large-service-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: clamp(1.875rem, 2.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-6);
}
.large-service-title em {
  font-style: italic;
  font-weight: var(--ic-w-regular);
  color: var(--ic-clay);
}
.large-service-desc {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ic-teal);
}
.large-service-desc em {
  font-style: italic;
  color: var(--ic-clay);
}


/* ================================================================
   34. SOFT STANDALONE LINES — Approach Section 1
   The five "What you notice first…" lines. Not bullets, not body.
   Spacious, italic, with subtle hairlines. Staggered fade-in.
   ================================================================ */
.soft-lines {
  max-width: 640px;
  margin: 48px auto;
}
.soft-line {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ic-teal);
  text-align: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--ic-rule-soft);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ic-ease-out), transform 1.1s var(--ic-ease-out);
}
.soft-line:last-child { border-bottom: none; }
.soft-line em {
  color: var(--ic-clay);
}
.soft-lines.visible .soft-line { opacity: 1; transform: translateY(0); }
.soft-lines.visible .soft-line:nth-child(1) { transition-delay: 0ms; }
.soft-lines.visible .soft-line:nth-child(2) { transition-delay: 220ms; }
.soft-lines.visible .soft-line:nth-child(3) { transition-delay: 440ms; }
.soft-lines.visible .soft-line:nth-child(4) { transition-delay: 660ms; }
.soft-lines.visible .soft-line:nth-child(5) { transition-delay: 880ms; }


/* ================================================================
   35. HORIZONTAL TIMELINE — Approach Section 2
   Horizontal on desktop with horizon-line motif and 6 dots.
   Each dot has title + one-sentence description below.
   On mobile, switches to vertical stack with line on left.
   ================================================================ */
.timeline {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 0;
}
.timeline-line {
  position: absolute;
  top: 56px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ic-rule-strong) 10%, var(--ic-rule-strong) 90%, transparent);
}
.timeline-nodes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  position: relative;
}
.timeline-node {
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.timeline-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ic-eggshell);
  border: 1.5px solid var(--ic-clay);
  margin: 48px auto 32px;
  position: relative;
  z-index: 1;
  transition: all var(--ic-d-soft) var(--ic-ease-soft);
}
.timeline-node:hover .timeline-dot {
  background: var(--ic-clay);
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(180, 122, 92, 0.12);
}
.timeline-label {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
  margin-bottom: 6px;
}
.timeline-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-style: italic;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-3);
  letter-spacing: -0.005em;
}
.timeline-desc {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ic-teal-soft);
}




/* ================================================================
   36. ORGANIC CLUSTER CONSTELLATION — Approach §3
   Replaces the old radial spoke design. Left: star cluster with
   curved connecting lines fading to center. Right: description
   panel with auto-cycling content and a synced progress bar.
   Mobile fallback: collapsible accordion cards (see below).
   ================================================================ */
.cluster-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
  min-height: 580px;
  margin: 48px 0 32px;
  border: 1px solid var(--ic-rule);
}
.cluster-stage {
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding: 32px;
  background:
    radial-gradient(ellipse 60% 100% at 70% 50%, rgba(61, 90, 108, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 55% 85% at 22% 50%, rgba(180, 122, 92, 0.10) 0%, transparent 70%),
    rgba(239, 234, 226, 0.4);
  border-right: 1px solid var(--ic-rule);
}
.cluster-stars-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.cluster-stars-bg .dust { fill: rgba(31, 58, 61, 0.13); }
.cluster-stars-bg .link {
  stroke: rgba(180, 122, 92, 0.5);
  stroke-width: 0.2;
  fill: none;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.cluster-stars-bg .link.active {
  stroke: rgba(180, 122, 92, 0.78);
  stroke-width: 0.28;
}
.cluster-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  z-index: 5;
}
.center-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ic-clay-deep);
  animation: center-breathe 7s ease-in-out infinite;
}
@keyframes center-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 7px rgba(180, 122, 92, 0.22),
      0 0 0 18px rgba(180, 122, 92, 0.09),
      0 0 0 32px rgba(180, 122, 92, 0.04);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(180, 122, 92, 0.28),
      0 0 0 24px rgba(180, 122, 92, 0.12),
      0 0 0 42px rgba(180, 122, 92, 0.05);
  }
}
.center-label {
  margin-top: 30px;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 16px;
  color: var(--ic-clay-deep);
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.pleiad {
  position: absolute;
  transform: translate(-50%, calc(-50% + 15px));
  background: none; border: none; padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ic-teal);
  font-family: var(--ic-font-display);
  transition: transform 0.25s;
  z-index: 6;
}
.pleiad:hover { z-index: 10; transform: translate(-50%, calc(-50% + 15px)) scale(1.03); }
.pleiad:focus-visible { outline: none; }
.pleiad.label-above {
  flex-direction: column-reverse;
  transform: translate(-50%, calc(-50% - 15px));
}
.pleiad.label-above:hover { transform: translate(-50%, calc(-50% - 15px)) scale(1.03); }
.pleiad.label-above .pleiad-label { margin-top: 0; margin-bottom: 10px; }
.pleiad-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ic-clay);
  box-shadow: 0 0 0 4px rgba(180, 122, 92, 0.14);
  transition: all 0.25s;
}
.pleiad.size-lg .pleiad-dot {
  width: 11px; height: 11px;
  box-shadow: 0 0 0 6px rgba(180, 122, 92, 0.16);
}
.pleiad.size-sm .pleiad-dot {
  width: 7px; height: 7px;
  box-shadow: 0 0 0 3px rgba(180, 122, 92, 0.12);
}
.pleiad:hover .pleiad-dot,
.pleiad.active .pleiad-dot,
.pleiad:focus-visible .pleiad-dot {
  background: var(--ic-clay-deep);
  box-shadow: 0 0 0 6px rgba(180, 122, 92, 0.28), 0 0 0 14px rgba(180, 122, 92, 0.1);
}
.pleiad-label {
  margin-top: 10px;
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: 13.5px;
  color: var(--ic-teal);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.2s, color 0.2s;
  text-align: center;
}
.pleiad:hover .pleiad-label,
.pleiad.active .pleiad-label,
.pleiad:focus-visible .pleiad-label { opacity: 1; color: var(--ic-clay-deep); }

.cluster-panel {
  position: relative; overflow: hidden;
  padding: 48px 40px;
  background: rgba(255, 255, 255, 0.42);
  display: flex; flex-direction: column; justify-content: center;
}
.cluster-panel-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-light);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ic-teal);
  margin: 0 0 18px;
  transition: opacity 0.25s ease;
}
.cluster-panel-desc {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ic-teal);
  margin: 0;
  transition: opacity 0.25s ease;
}
.cluster-panel-title.fading,
.cluster-panel-desc.fading { opacity: 0.15; }
/* Progress bar — driven from JS so it stays synced with content cycling */
.cluster-progress-bar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0; opacity: 0;
  background: var(--ic-clay);
}
.cluster-progress-bar.running {
  animation: cluster-progress 4s linear forwards;
}
@keyframes cluster-progress {
  0%   { width: 0;    opacity: 0; }
  4%   { width: 1%;   opacity: 0.45; }
  92%  { width: 95%;  opacity: 0.45; }
  100% { width: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cluster-progress-bar { display: none; }
  .center-dot { animation: none; }
}

/* Mobile fallback: collapsible cards */
.constellation-cards {
  display: none;
}
.constellation-card {
  border-top: 1px solid var(--ic-rule);
}
.constellation-card:last-child { border-bottom: 1px solid var(--ic-rule); }
.constellation-card-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 4px;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ic-teal);
  text-align: left;
  transition: color var(--ic-d-soft) var(--ic-ease-soft);
}
.constellation-card-btn:hover,
.constellation-card[aria-expanded="true"] .constellation-card-btn { color: var(--ic-clay); }
.constellation-card-plus {
  color: var(--ic-clay);
  font-size: 18px;
  flex-shrink: 0;
  margin-left: 20px;
  transition: transform var(--ic-d-soft) var(--ic-ease-soft);
}
.constellation-card[aria-expanded="true"] .constellation-card-plus { transform: rotate(45deg); }
.constellation-card-body {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ic-teal-soft);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ic-d-soft) var(--ic-ease-soft), padding-bottom var(--ic-d-soft) var(--ic-ease-soft);
}
.constellation-card[aria-expanded="true"] .constellation-card-body {
  max-height: 320px;
  padding-bottom: 22px;
}


/* ================================================================
   37. FORMATION MAP — About Section 2
   Four-card layout for "Training that shaped my clinical eye"
   ================================================================ */
.formation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.formation-card {
  position: relative;
  padding: 44px 40px 40px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--ic-rule);
  overflow: hidden;
  transition:
    background var(--ic-d-wash) var(--ic-ease-out),
    border-color var(--ic-d-wash) var(--ic-ease-out);
}
.formation-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 70%, rgba(180, 122, 92, 0.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ic-d-wash) var(--ic-ease-out);
  pointer-events: none;
  z-index: 0;
}
.formation-card > * { position: relative; z-index: 1; }
.formation-card:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(180, 122, 92, 0.25);
}
.formation-card:hover::before { opacity: 1; }

.formation-number {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: 42px;
  line-height: 1;
  color: var(--ic-clay);
  opacity: 0.4;
  margin-bottom: var(--ic-s-3);
}
.formation-eyebrow {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
  margin-bottom: var(--ic-s-3);
}
.formation-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-5);
}
.formation-title em {
  font-style: italic;
  color: var(--ic-clay);
}
.formation-desc {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-4);
}
.formation-desc:last-child { margin-bottom: 0; }
.formation-desc em {
  font-style: italic;
  color: var(--ic-clay);
}


/* ================================================================
   38. PUBLICATION CARDS — About Section 3
   Link cards for selected publications. Not a CV — set with
   restraint, with the tag line carrying the visual interest.
   ================================================================ */
.publications {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

.publication {
  display: block;
  padding: 28px 36px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ic-rule);
  position: relative;
  overflow: hidden;
  transition:
    background var(--ic-d-soft) var(--ic-ease-soft),
    border-color var(--ic-d-soft) var(--ic-ease-soft),
    transform var(--ic-d-soft) var(--ic-ease-soft);
}
.publication::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: radial-gradient(ellipse at 100% 50%, rgba(180, 122, 92, 0.16) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--ic-d-soft) var(--ic-ease-soft);
  pointer-events: none;
  z-index: 0;
}
.publication > * { position: relative; z-index: 1; }
.publication:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(180, 122, 92, 0.3);
  transform: translateX(2px);
}
.publication:hover::before { opacity: 1; }

.publication-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: var(--ic-s-3);
  flex-wrap: wrap;
}
.publication-year {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-teal-soft);
  font-weight: var(--ic-w-semi);
}
.publication-arrow {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ic-clay);
  transition: transform var(--ic-d-soft) var(--ic-ease-out);
}
.publication:hover .publication-arrow {
  transform: translateX(4px);
  color: var(--ic-clay-deep);
}
.publication-title {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-3);
  letter-spacing: -0.005em;
}
.publication:hover .publication-title { color: var(--ic-clay-deep); }
.publication-tag {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 14px;
  color: var(--ic-clay);
  line-height: 1.5;
}
.publication-citation {
  font-family: var(--ic-font-ui);
  font-size: 12.5px;
  color: var(--ic-teal-soft);
  line-height: 1.55;
  margin-top: var(--ic-s-3);
  opacity: 0.7;
}


/* ================================================================
   39. PATHWAY VISUAL — About Section 1
   Three or four thin lines converging beside the prose.
   Subtle, suggesting formation rather than chronology.
   ================================================================ */
.pathway-block {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--ic-s-12);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.pathway-visual {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}
.pathway-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pathway-visual svg path,
.pathway-visual svg line {
  fill: none;
  stroke: var(--ic-clay);
  stroke-width: 0.6;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: pathway-draw 4s ease-out forwards;
  opacity: 0.55;
}
.pathway-visual svg path:nth-child(2) { animation-delay: 0.4s; opacity: 0.4; }
.pathway-visual svg path:nth-child(3) { animation-delay: 0.8s; opacity: 0.5; }
.pathway-visual svg path:nth-child(4) { animation-delay: 1.2s; opacity: 0.35; }
.pathway-visual svg circle.converge {
  fill: var(--ic-clay);
  opacity: 0;
  animation: pathway-dot 0.8s ease-out 2s forwards;
}
@keyframes pathway-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pathway-dot {
  to { opacity: 1; }
}


/* ================================================================
   40. BEGIN PAGE — simplified consultation block
   No more form. Just consultation description + 2 CTA buttons.
   ================================================================ */
.consultation-block {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 64px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--ic-rule);
  position: relative;
  overflow: hidden;
}
.consultation-block::before {
  content: '';
  position: absolute;
  top: -40%; right: -40%;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 70%, rgba(180, 122, 92, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.consultation-block > * { position: relative; z-index: 1; }
.consultation-prose {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-9);
}
.consultation-prose em {
  font-style: italic;
  color: var(--ic-clay);
}
.consultation-prose p { margin-bottom: var(--ic-s-5); }
.consultation-prose p:last-child { margin-bottom: 0; }
.consultation-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: var(--ic-s-7);
  border-top: 1px solid var(--ic-rule);
}


/* ================================================================
   41. SECONDARY IMAGE (About Section 4)
   Single quality image, intentional placement.
   ================================================================ */
.secondary-image {
  aspect-ratio: 16 / 9;
  max-width: 880px;
  margin: 64px auto 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 30% 40%, rgba(217, 181, 138, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 70% 55%, rgba(180, 122, 92, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 50%, rgba(61, 90, 108, 0.18) 0%, transparent 50%),
    linear-gradient(160deg, var(--ic-eggshell-warm) 0%, var(--ic-eggshell-deep) 100%);
  border: 1px solid var(--ic-rule);
}
.secondary-image::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 30% 50%, rgba(180, 122, 92, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 70% 50%, rgba(217, 181, 138, 0.14) 0%, transparent 60%);
  animation: portrait-drift 40s ease-in-out infinite;
}
.secondary-image::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.secondary-image-caption {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ic-teal-soft);
  text-align: center;
  margin-top: var(--ic-s-3);
}


/* ================================================================
   v1.2 RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 1080px) {
  .compact-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-nodes { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .timeline-line { display: none; }
  .timeline-dot { margin-top: 0; }
}

@media (max-width: 980px) {
  .compact-grid { grid-template-columns: repeat(2, 1fr); }
  .large-service-grid { grid-template-columns: 1fr; gap: 18px; }
  .formation-grid { grid-template-columns: 1fr; gap: 16px; }
  .pathway-block { grid-template-columns: 1fr; gap: var(--ic-s-10); }
  .pathway-visual { max-width: 280px; margin: 0 auto; }

  /* Constellation: hide cluster on small screens, show accordion cards */
  .cluster-wrap { display: none; }
  .constellation-cards { display: block; max-width: 720px; margin: 0 auto; }

  .timeline-nodes { grid-template-columns: 1fr; row-gap: 28px; text-align: left; }
  .timeline { padding-left: 24px; }
  .timeline-line {
    display: block;
    left: 18px;
    top: 0;
    right: auto;
    bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(to bottom, transparent, var(--ic-rule-strong) 8%, var(--ic-rule-strong) 92%, transparent);
  }
  .timeline-node {
    padding: 0 0 0 40px;
    text-align: left;
  }
  .timeline-dot {
    margin: 0;
    position: absolute;
    left: -28px;
    top: 6px;
  }

  .consultation-block { padding: 48px 36px; }
  .hero-practical { font-size: 1rem; }
}

@media (max-width: 700px) {
  .compact-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .consultation-block { padding: 36px 24px; }
  .consultation-ctas { flex-direction: column; }
  .consultation-ctas .btn { width: 100%; justify-content: center; }
  .formation-card { padding: 36px 28px; }
  .large-service { padding: 48px 32px; }
  .publication { padding: 24px 24px; }
}


/* ================================================================
   ╔══════════════════════════════════════════════════════════════╗
   ║  v1.3 ADDITIONS — Per content brief feedback                ║
   ║  42. EM STYLING: italic only by default                     ║
   ║  43. LARGER DESCRIPTIVE TEXT                                 ║
   ║  44. DROP CAP "S" FIX                                       ║
   ║  45. SUBTLE LOGO MARK (replaces brand dot)                  ║
   ║  46. SERVICE CARD FULL-AREA HOVER                           ║
   ║  47. CONSTELLATION: WATERCOLOR PILLS                        ║
   ║  48. FEE TABLE (replaces fee cards)                         ║
   ║  49. FORMATION STACK (About §2 redesign)                    ║
   ║  50. WATERCOLOR PETALS PATHWAY (About §1 redesign)          ║
   ║  51. FORM (Begin page form returns)                         ║
   ╚══════════════════════════════════════════════════════════════╝
   ================================================================ */


/* ================================================================
   42. EM STYLING — italic only by default
   Reserves clay color for display/heading elements where it
   functions as an intentional accent. In body prose, em is
   simply italic, so the page feels less "highlighted" overall.
   ================================================================ */
.prose p em,
.bio-prose em,
.large-service-desc em,
.formation-desc em,
.area-desc em,
.compact-desc em,
.timeline-desc em,
.final-cta-sub em,
.publication-citation em,
.publication-tag em,
.hero-invitation em,
.hero-practical em,
.hero-sub em,
.hero-sub-two em,
.consultation-prose em,
.consultation-prose p em,
.faq-a em,
.faq-a p em,
.formation-eyebrow em,
.modalities-list em,
.identity-claims span em,
.footer-tagline em,
.formation-item-text em,
.formation-item-text p em,
.crisis-resource-detail em {
  color: inherit;
  font-style: italic;
}


/* ================================================================
   43. LARGER DESCRIPTIVE TEXT
   Bumped across body/prose contexts so reading feels easier.
   Display headings stay the same — they were already substantial.
   ================================================================ */
.prose p { font-size: 22px; line-height: 1.78; }
.prose.centered p { font-size: 23px; line-height: 1.8; }
.bio-prose { font-size: 20px; line-height: 1.78; }
.large-service-desc { font-size: 20px; line-height: 1.7; }
.formation-desc { font-size: 18px; line-height: 1.72; }
.area-desc { font-size: 16.5px; line-height: 1.62; }
.compact-desc { font-size: 16px; line-height: 1.6; }
.timeline-desc { font-size: 16px; line-height: 1.6; }
.final-cta-sub { font-size: 20px; line-height: 1.65; }
.consultation-prose { font-size: 19px; line-height: 1.78; }
.faq-a { font-size: 19px; line-height: 1.72; }
.hero-invitation { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.hero-practical { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.formation-item-text { font-family: var(--ic-font-display); font-weight: var(--ic-w-regular); font-size: 19px; line-height: 1.75; }


/* ================================================================
   44. DROP CAP "S" FIX
   Italic "S" was misaligning at the top. Switch to upright,
   slightly smaller, with more top + right margin so the body
   text flows cleanly around it.
   ================================================================ */
.drop-cap::first-letter {
  font-style: normal;
  font-weight: var(--ic-w-regular);
  font-size: 72px;
  line-height: 0.78;
  margin: 10px 18px 0 0;
}


/* ================================================================
   45. WORDMARK ONLY (v1.5)
   Replaces the concentric-ripple SVG mark with refined typography.
   The brand is set in Spectral with italic+clay on "Vachhani"
   (matching the footer wordmark). Any legacy logo SVG in markup
   is hidden defensively below.
   ================================================================ */
.site-nav__logo { display: none; }
.site-nav__logo .logo-dot { display: none; }
.site-nav__dot { display: none; }


/* ================================================================
   46. SERVICE CARD FULL-AREA HOVER
   Was: corner-emerging wash.
   Now: subtle full-area tint that lifts uniformly. More legible
   as a "this card is active" signal.
   ================================================================ */
.large-service::before {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(ellipse at center, rgba(180, 122, 92, 0.12) 0%, rgba(180, 122, 92, 0.04) 70%, rgba(180, 122, 92, 0.02) 100%) !important;
}





/* ================================================================
   48. FEE TABLE (replaces fee cards)
   Per the brief: fees should not be the main visual focus.
   Quiet, well-set table inside the prose flow.
   ================================================================ */
.fee-table-wrap {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 28px 36px 32px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid var(--ic-rule);
}
.fee-table-label {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 15.5px;
  color: var(--ic-teal-soft);
  margin-bottom: 18px;
  line-height: 1.55;
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
}
.fee-table thead th {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-clay);
  font-weight: var(--ic-w-semi);
  padding: 0 0 14px 0;
  text-align: left;
  border-bottom: 1px solid var(--ic-rule);
}
.fee-table thead th:last-child { text-align: right; }
.fee-table thead th:nth-child(2) { text-align: center; }
.fee-table tbody td {
  font-family: var(--ic-font-display);
  font-size: 17.5px;
  color: var(--ic-teal);
  padding: 18px 0;
  border-bottom: 1px solid var(--ic-rule-soft);
  vertical-align: baseline;
  line-height: 1.4;
}
.fee-table tbody tr:last-child td { border-bottom: none; }
.fee-table .col-service { font-style: italic; }
.fee-table .col-duration { text-align: center; color: var(--ic-teal-soft); font-style: italic; font-size: 16px; }
.fee-table .col-rate { text-align: right; font-weight: var(--ic-w-regular); }


/* ================================================================
   49. FORMATION STACK (About §2 redesign)
   Replaces the 4-card grid (which read too similar to home
   services). Now a vertical sequence: each item has a numbered
   mark, optional small label, and prose. A thin clay accent
   line runs along the left, connecting items as one continuous
   "comprehensive approach" rather than four separate boxes.
   ================================================================ */
.formation-stack {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.formation-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 36px;
  padding: 48px 0 48px 0;
  position: relative;
}
.formation-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(180, 122, 92, 0.35), rgba(180, 122, 92, 0));
  margin-top: 4px;
  transform: translateY(50%);
}
.formation-item:first-child { padding-top: 0; }
.formation-item:last-child  { padding-bottom: 0; }
.formation-item-mark {
  position: relative;
}
.formation-item-num {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-light);
  font-size: 32px;
  line-height: 1;
  color: var(--ic-clay);
  opacity: 0.45;
  display: block;
  margin-bottom: 8px;
}
.formation-item-mark-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ic-clay);
  margin-top: 4px;
  opacity: 0.7;
}
.formation-item-content { padding-top: 2px; }
.formation-item-label {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 17px;
  color: var(--ic-clay);
  margin-bottom: 14px;
}


/* ================================================================
   50. CONVERGENT CURRENTS PATHWAY (About §1, v1.6)
   Five thin curved lines flowing inward to a center anchor.
   Reads cleanly as "many ways of listening converging into a
   meeting place between lenses" — no more blurry-blob look.
   ================================================================ */
.pathway-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: 0 auto;
}
.pathway-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Each current draws in slowly, then breathes */
.pathway-visual svg .current {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: current-draw 4s var(--ic-ease-soft) forwards;
}
.pathway-visual svg .current:nth-of-type(1) { animation-delay: 0.2s; }
.pathway-visual svg .current:nth-of-type(2) { animation-delay: 0.6s; }
.pathway-visual svg .current:nth-of-type(3) { animation-delay: 1.0s; }
.pathway-visual svg .current:nth-of-type(4) { animation-delay: 1.4s; }
.pathway-visual svg .current:nth-of-type(5) { animation-delay: 1.8s; }
@keyframes current-draw {
  to { stroke-dashoffset: 0; }
}


/* ================================================================
   51. FORM (Begin page form returns)
   Per the brief: form back with 6 required fields.
   Restraint: underline-only inputs, generous spacing, the
   small `req` star kept since the brief says all required.
   ================================================================ */
.begin-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 56px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--ic-rule);
  position: relative;
}
.begin-form .form-helper {
  font-family: var(--ic-font-display);
  font-weight: var(--ic-w-regular);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ic-teal);
  margin-bottom: var(--ic-s-9);
}
.begin-form .form-helper em {
  font-style: italic;
  color: inherit;
}
.begin-form .form-helper-emphasis {
  font-style: italic;
  color: var(--ic-teal-soft);
  display: block;
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.65;
}
.begin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--ic-s-7);
}
.begin-form .form-field {
  margin-bottom: var(--ic-s-7);
}
.begin-form .form-row .form-field { margin-bottom: 0; }
.begin-form label {
  display: block;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  letter-spacing: var(--ic-tracking-wider);
  text-transform: uppercase;
  color: var(--ic-teal-soft);
  margin-bottom: var(--ic-s-2);
  font-weight: var(--ic-w-semi);
}
.begin-form label .req {
  color: var(--ic-clay);
  margin-left: 4px;
}
.begin-form input,
.begin-form textarea,
.begin-form select {
  width: 100%;
  padding: var(--ic-s-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ic-rule);
  font-family: var(--ic-font-display);
  font-size: 18px;
  color: var(--ic-teal);
  transition: border-color var(--ic-d-quick) var(--ic-ease-soft);
}
.begin-form textarea {
  resize: vertical;
  min-height: 110px;
  padding: var(--ic-s-3) 0;
  line-height: 1.55;
}
.begin-form select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B47A5C' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 8px;
}
.begin-form input:focus,
.begin-form textarea:focus,
.begin-form select:focus {
  outline: none;
  border-bottom-color: var(--ic-clay);
}
.begin-form input::placeholder,
.begin-form textarea::placeholder {
  color: var(--ic-teal-soft);
  opacity: 0.4;
  font-style: italic;
}
.begin-form .form-submit-row {
  margin-top: var(--ic-s-9);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-success-message {
  display: none;
  margin-top: 24px;
  padding: 22px 28px;
  background: rgba(180, 122, 92, 0.1);
  border: 1px solid rgba(180, 122, 92, 0.3);
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ic-teal);
}
.form-success-message.show { display: block; }

@media (max-width: 700px) {
  .begin-form { padding: 36px 24px; }
  .begin-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .begin-form .form-row .form-field { margin-bottom: var(--ic-s-7); }
}

@media (max-width: 700px) {
  .formation-item {
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .formation-item-num { font-size: 26px; }
  .fee-table-wrap { padding: 24px 22px 28px; }
  .fee-table thead th { font-size: 10px; letter-spacing: 0.2em; }
  .fee-table tbody td { font-size: 16px; padding: 14px 0; }
}


/* ================================================================
   ╔══════════════════════════════════════════════════════════════╗
   ║  v1.4 ADDITIONS — Real photographs                          ║
   ║  52. BIO PORTRAIT WITH ACTUAL IMAGE                         ║
   ║  53. CONTEXTUAL IMAGE (About training section)              ║
   ╚══════════════════════════════════════════════════════════════╝
   ================================================================ */

/* 52. Bio portrait — image sits above the watercolor wash background
   but below the inner-border frame, so the photo is the focus while
   the brand's visual language still holds it. */
.bio-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.bio-portrait::after { z-index: 2; }

/* 53. Contextual image — small framed photo placed between sections.
   Used on About to show Shreeja in her educator mode (after the
   formation-stack, before the publications). */
.contextual-image {
  max-width: 360px;
  margin: 72px auto 0;
}
.contextual-image-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--ic-rule);
  background: var(--ic-eggshell-deep);
}
.contextual-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contextual-image-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.contextual-image-caption {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: var(--ic-w-regular);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ic-teal-soft);
  text-align: center;
  margin-top: 18px;
  letter-spacing: 0.01em;
}


/* ================================================================
   54. APPROACH HERO WAVES (v1.6)
   Replaces the flat .horizon rule under the Approach H1 with
   a slow-moving triple-wave SVG. Subtle, breathing, never noisy.
   ================================================================ */
.hero-waves {
  display: block;
  width: 100%;
  max-width: 620px;
  height: 80px;
  margin: 56px auto 0;
}
@media (max-width: 700px) {
  .hero-waves { max-width: 460px; height: 64px; margin-top: 40px; }
}