/* Sue Sarkar Wellbeing — calm, natural, uncluttered */
:root {
  --bg: #faf7f2;
  --surface: #f1eadf;
  --ink: #3b2f25;
  --muted: #6b5d4f;
  --green: #4f5d3a;
  --green-dark: #3d4a2c;
  --green-soft: #e4e8d8;
  --line: #e2d8c8;
  --on-image: #fffdf8;

  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Raleway', system-ui, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 112px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 250ms;
  --max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-dark); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.25; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--s2); max-width: 65ch; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: var(--s1) var(--s2); z-index: 100; }
.skip:focus { left: var(--s2); top: var(--s2); }

.wrap { width: min(var(--max), 100% - 2 * var(--s3)); margin-inline: auto; }
.section { padding-block: var(--s6); overflow-x: clip; }
.section--tint { background: var(--surface); }
.wrap--wide { width: min(1560px, 100% - 2 * var(--s3)); margin-inline: auto; }
.eyebrow { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header--overlay { position: absolute; inset: 0 0 auto 0; background: transparent; border: 0; color: var(--on-image); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--s3); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-serif); letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.9rem; text-decoration: none; color: inherit; }
.nav-toggle { display: none; min-width: 48px; min-height: 48px; background: none; border: 0; color: inherit; cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }
.nav ul { display: flex; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-block; padding: 12px 4px; text-decoration: none; color: inherit;
  font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { border-bottom-color: currentColor; }
.nav .nav-book { border: 1px solid currentColor; padding: 10px 18px; }
.nav .nav-book:hover { background: var(--green); color: #fff; border-color: var(--green); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: var(--s1) var(--s3) var(--s3); }
  .nav a { display: block; padding: 14px 0; }
  .nav .nav-book { text-align: center; margin-top: var(--s1); }
}

/* Hero: one continuous scroll. The headline's words gather into a glowing orb, which drops straight down the screen
   and carries on into the Services section (see main.js). */
.hero { position: relative; color: var(--on-image); text-align: center; }
.hero-pin { position: relative; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 120px var(--s3) var(--s6); }
.hero-bg { position: absolute; inset: -4%; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-bg--a { inset: 0; background: linear-gradient(180deg, #6b4a2e 0%, #a98560 40%, #dcc8a8 68%, #f5ede0 88%, var(--bg) 100%); } /* the photo melts into sand and then straight into the cream page */
/* The photo runs the full width of the screen along the top and fades into the dark below, so the whole figure and
   the bowl always stay in view (a very wide picture would otherwise have to be cropped hard). */
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; display: block; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.hero-bg--b { inset: 0; background: radial-gradient(ellipse 75% 85% at calc(58% + var(--p, 0) * 14%) 48%, #fffaf2 0%, #f7efe2 50%, #eee3d0 100%); opacity: 0; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(rgba(20, 18, 12, 0.5), rgba(20, 18, 12, 0.12) 16%, rgba(20, 18, 12, 0.26) 45%, rgba(20, 18, 12, 0) 72%); }
/* The Book buttons are solid gold, so they stand out against the photo and later against the cream page */
.hero .btn--ghost { background: #e8bb68; color: #2b1c10; border-color: #e8bb68; font-weight: 600; min-height: 54px; padding-inline: 46px; box-shadow: 0 8px 28px rgba(232, 187, 104, 0.45); }
.hero .btn--ghost:hover { background: #f4d08c; border-color: #f4d08c; color: #2b1c10; }
.site-header--overlay .nav .nav-book { background: #e8bb68; border-color: #e8bb68; color: #2b1c10; font-weight: 600; }
.site-header--overlay .nav .nav-book:hover { background: #f4d08c; border-color: #f4d08c; color: #2b1c10; }
@keyframes bookpulse { 0% { box-shadow: 0 8px 28px rgba(232, 187, 104, 0.45), 0 0 0 0 rgba(232, 187, 104, 0.55); } 70%, 100% { box-shadow: 0 8px 28px rgba(232, 187, 104, 0.45), 0 0 0 16px rgba(232, 187, 104, 0); } }
.hero-inner { position: relative; width: min(1120px, 100%); }
.quote { margin: 0 auto var(--s5); }
.quote-stack { display: grid; gap: var(--s3); }
.quote-stack > * { margin: 0 auto; }
.quote-text { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.8vw, 2.6rem); line-height: 1.38; font-style: italic; text-shadow: 0 1px 20px rgba(20, 12, 6, 0.5); }
.quote-cite { display: block; margin-top: var(--s2); font-family: var(--font-sans); font-style: normal; font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; }
.vis { display: block; position: relative; }
.hero-headline { text-align: right; }
.hero-headline h1 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 2.6rem); line-height: 1.16; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(20, 12, 6, 0.6); }
.hero-headline .gold, .hero-headline .tagline { color: #e8bb68; }
.hero-headline .rule { display: block; height: 2px; margin: var(--s2) 0; background: #e8bb68; }
.hero-headline .lines { margin: 0 0 var(--s2); font-size: clamp(0.95rem, 1.5vw, 1.35rem); line-height: 1.6; font-weight: 500; text-shadow: 0 1px 14px rgba(20, 12, 6, 0.6); }
.hero-headline .tagline { margin: 0; font-size: clamp(0.78rem, 1.05vw, 1rem); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(20, 12, 6, 0.6); }
.orb, .scroll-cue { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The bottom of the hero dissolves into the page so Services follows without a hard edge */
.hero-melt { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero { height: 270vh; }
  .js .hero-pin { position: sticky; top: 0; height: 100dvh; min-height: 0; }
  .js .hero-photo img { transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(calc(1.02 + var(--p, 0) * 0.07)); will-change: transform; /* a slow push-in */
    /* The picture fills the whole first screen. Its soft edge into the cream page only appears once you start scrolling. */
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--bg2, 0) * 45%), transparent); mask-image: linear-gradient(#000 calc(100% - var(--bg2, 0) * 45%), transparent); }
  .js .hero .btn--ghost { animation: bookpulse 2.8s ease-out infinite; }
  .js .hero-bg--b { opacity: calc(var(--bg2, 0) * 0.8); } /* the photo is left faintly visible under the light wash */
  .js .hero-veil { opacity: calc(1 - var(--bg2, 0)); }

  .js .quote-stack { gap: 0; min-height: min(56vh, 520px); grid-template-rows: 1fr; }
  .js .quote-stack > * { grid-area: 1 / 1; }
  /* The headline sits on the right, as in the client's banner */
  .js .hero-inner { width: min(1400px, 100%); text-align: right; }
  .js .quote-main { justify-self: end; align-self: center; text-align: right; max-width: min(460px, 38%); margin: 0 0 0 auto; }
  .js .quote-main .rule { opacity: calc(1 - var(--out, 0) * 2); }

  /* Each word has its own progress, offset by its position so the line sweeps */
  .js .w { display: inline-block; will-change: opacity, transform, filter; }
  /* Quote 1: every word is pulled to the centre of the line, shrinking and glowing out */
  .js .quote-main .w {
    --t: clamp(0, calc(var(--out, 0) * 1.5 - var(--i) / var(--n) * 0.5), 1);
    transform: translate(calc(var(--dx, 0) * var(--t) * 1px), calc(var(--dy, 0) * var(--t) * 1px)) scale(calc(1 - var(--t) * 0.75));
    opacity: calc(1 - var(--t) * var(--t));
    filter: blur(calc(var(--t) * 6px));
  }
  .js .orb {
    display: block; position: fixed; top: 0; left: 0; z-index: 5; width: clamp(72px, 9vw, 108px); aspect-ratio: 1; /* one orb for the whole page, fixed to the screen */
    border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
    filter: blur(0.5px) drop-shadow(0 0 14px rgba(235, 150, 50, 0.75)) drop-shadow(0 0 3px rgba(120, 60, 10, 0.4));
    background: radial-gradient(circle, #fffdf2 0%, #ffd070 22%, #f2a53c 46%, rgba(235, 140, 50, 0.45) 62%, transparent 72%);
  }
  .js .orb::after {
    content: ''; position: absolute; inset: -35%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 160, 0.38), transparent 65%);
    animation: glow 4.5s ease-in-out infinite alternate;
  }
  /* "Scroll" prompt: a label and a bobbing arrow, so nobody misses that the page carries on. It fades once you start scrolling. */
  .js .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; left: 50%; bottom: 28px; translate: -50% 0; z-index: 4; padding: 12px 22px 8px; border-radius: 40px; color: var(--on-image); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; background: rgba(24, 14, 6, 0.55); border: 1px solid rgba(255, 253, 248, 0.4); backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); opacity: calc(1 - var(--p, 0) * 30); }
  .js .scroll-cue::after { content: ''; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; animation: cuebob 1.6s ease-in-out infinite; }
  .js .scroll-cue:hover { background: rgba(232, 187, 104, 0.9); color: #2b1c10; }
  .js .hero-pin { padding-bottom: 150px; }
  .js .hero-melt { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 3; pointer-events: none; opacity: var(--bg2, 0); background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--bg) 88%); }

  /* Dark controls while the screen is light */
  .site-header--overlay.on-light { color: var(--ink); }

  @media (max-width: 820px) {
    .js .hero-inner { text-align: center; }
    .js .quote-main { justify-self: stretch; align-self: end; text-align: center; max-width: 100%; margin: 0; }
    .hero-headline { text-align: center; }
    .hero-headline h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    .hero-headline .lines { font-size: 1.05rem; }
    .hero-headline .tagline { font-size: 0.8rem; }
  }
}
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes cuebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes glow { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(1.12); opacity: 1; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 32px;
  font: inherit; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn--ghost { color: var(--on-image); border-color: rgba(255, 253, 248, 0.85); }
.btn--ghost:hover { background: var(--on-image); color: var(--ink); }
.btn--solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn--solid:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn--solid[disabled] { background: #9a9a8a; border-color: #9a9a8a; cursor: not-allowed; }
.btn--line { color: var(--green-dark); }
.btn--line:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* Page hero (audience / about / book) */
.page-hero {
  position: relative; color: var(--on-image); text-align: center; padding: var(--s7) var(--s3) var(--s6);
  background: linear-gradient(rgba(32, 28, 18, 0.5), rgba(32, 28, 18, 0.55)), var(--hero-img) center / cover no-repeat;
}
.page-hero p { margin-inline: auto; }
.page-hero--plain { background: var(--surface); color: var(--ink); padding-block: var(--s6); }

/* Content blocks */
.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } .split--flip > :first-child { order: 2; } }
.photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cards { display: grid; gap: var(--s3); }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { padding: var(--s4); background: var(--bg); border: 1px solid var(--line); }
.section--tint .card { background: var(--bg); }
.card h3 { margin-bottom: var(--s1); }
.card p { margin: 0; color: var(--muted); }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* Events */
.events { display: grid; gap: var(--s2); }
.event { display: grid; gap: var(--s2); padding: var(--s3); background: var(--bg); border: 1px solid var(--line); }
@media (min-width: 820px) { .event { grid-template-columns: 120px 1fr auto; align-items: center; gap: var(--s4); } }
.event-date { font-family: var(--font-serif); line-height: 1.2; }
.event-date .day { display: block; font-size: 2.25rem; }
.event-date .mon { display: block; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.event h3 { margin-bottom: 4px; }
.event-meta { margin: 0; color: var(--muted); font-size: 0.95rem; }
.tag { display: inline-block; padding: 0 12px; margin-left: var(--s1); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--green-soft); color: var(--green-dark); }
.event-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.event-buy label { font-size: 0.875rem; color: var(--muted); display: flex; align-items: center; gap: var(--s1); }
.event-buy select { min-height: 48px; padding: 0 var(--s2); font: inherit; border: 1px solid var(--muted); background: #fff; color: var(--ink); }
.price { font-family: var(--font-serif); font-size: 1.25rem; }
.status { min-height: 1.5em; margin: var(--s2) 0 0; color: var(--ink); }
.status--error { color: #9b2c2c; }
.notice { padding: var(--s2) var(--s3); background: var(--green-soft); border-left: 3px solid var(--green); margin-bottom: var(--s3); }
.empty { padding: var(--s4); border: 1px dashed var(--muted); text-align: center; }

/* Footer */
.site-footer { background: var(--green-dark); color: #f3efe6; padding-block: var(--s5); text-align: center; }
.site-footer p { margin-inline: auto; }
.site-footer a { color: inherit; }
.site-footer .brand { display: block; margin-bottom: var(--s1); }
.site-footer small { opacity: 0.85; }

/* Home sections */
.more { font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-dark); border-bottom: 1px solid currentColor; }
.gallery { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-top: var(--s6); }
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 30px 70px rgba(140, 90, 30, 0.28), 0 0 0 1px rgba(190, 150, 60, 0.35); }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1200ms var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: var(--s6) var(--s3) var(--s3); font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; color: #fffdf8; background: linear-gradient(0deg, rgba(40, 22, 8, 0.78), transparent); }
@media (min-width: 820px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: start; }
  .gallery figure:nth-child(2) { margin-top: var(--s6); }
}

/* Reviews: one featured quote, then two supporting ones */
.review { margin: 0; }
.review blockquote { margin: 0; }
.review p { font-family: var(--font-serif); font-style: italic; margin: 0 0 var(--s2); }
.review-who { display: inline-flex; align-items: center; gap: 12px; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.review-who::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fffdf2 0%, #ffd070 35%, #f2a53c 70%, transparent 74%); box-shadow: 0 0 12px rgba(235, 150, 50, 0.6); }
.review--feature { max-width: 46rem; margin: var(--s5) auto var(--s6); text-align: center; }
.review--feature p { max-width: none; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.4; }
.review-mark { display: block; margin-bottom: var(--s1); font-family: var(--font-serif); font-size: 5rem; line-height: 0.7; color: rgba(190, 150, 60, 0.6); }
.reviews { display: grid; gap: var(--s5); max-width: 56rem; margin: 0 auto; padding-top: var(--s5); border-top: 1px solid var(--line); }
.reviews .review p { font-size: 1.25rem; line-height: 1.55; }
@media (min-width: 820px) {
  .reviews { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .reviews .review + .review { padding-left: var(--s6); border-left: 1px solid var(--line); }
}

/* Journey: the orb carries on down the page and wakes each portal as it arrives */
.journey { position: relative; padding-block: var(--s6) var(--s7); background: var(--bg); overflow-x: clip; }
.journey-line { display: none; }
.journey-head { position: relative; z-index: 1; text-align: center; }
.journey-head > div { display: inline-block; background: var(--bg); padding: 0 var(--s4); }
.portals { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: 14vh; position: relative; z-index: 1; }
.portal-link { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s5); color: inherit; text-decoration: none; }
.portal--right .portal-media { order: 2; }
.portal-media { --d: min(30vw, 340px); position: relative; justify-self: center; width: var(--d); aspect-ratio: 1; }
.portal-disc { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(170, 140, 64, 0.35), 0 24px 60px rgba(120, 90, 40, 0.18);
  transition: transform 900ms var(--ease), filter 900ms var(--ease), opacity 900ms var(--ease), box-shadow 900ms var(--ease); }
.portal-disc img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.portal-link:hover .portal-disc img, .portal-link:focus-visible .portal-disc img { transform: scale(1.06); }
.pr { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(170, 140, 64, 0.8); opacity: 0; pointer-events: none; }
.portal-text { position: relative; justify-self: center; max-width: 26rem; padding: var(--s2) var(--s3); background: var(--bg); }
.portal-text h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.portal-text p { color: var(--muted); }
@keyframes pr { from { transform: scale(1); opacity: 0.75; } to { transform: scale(1.75); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .js .journey-line { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } /* behind the pictures and text (they come later in the page), so it never crosses them */
  .js .jl-base { fill: none; stroke: rgba(170, 140, 64, 0.35); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 9; }
  .js .jl-lit { fill: none; stroke: rgba(196, 160, 70, 0.9); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(235, 170, 80, 0.6)); }
  .js .portal:not(.lit) .portal-disc { transform: scale(0.9); filter: grayscale(0.7) brightness(1.08); opacity: 0.7; box-shadow: none; }
  .js .portal.lit .pr { animation: pr 1.8s var(--ease) 1 both; }
  .js .portal.lit .pr + .pr { animation-delay: 0.3s; }
}
@media (max-width: 820px) {
  .portal-link { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s3); }
  .portal--right .portal-media { order: 0; }
  .portal-media { --d: min(64vw, 300px); }
  .portals { gap: 12vh; }
}

/* Audience pages: illustrated header, quick facts, circular photo, steps, arch photos */
.page-hero--scene { display: grid; align-items: start; min-height: clamp(460px, 66vh, 640px); padding: 4.5rem var(--s3) 6rem; text-align: left; color: var(--ink); background: var(--scene) center bottom / cover no-repeat; }
.page-hero--scene .wrap > * { max-width: 30rem; margin-inline: 0; }
.page-hero--scene h1 { margin-bottom: var(--s2); }
.page-hero--scene .eyebrow { color: inherit; opacity: 0.8; }
.page-hero--dark { color: var(--on-image); }
.lede { font-size: 1.25rem; line-height: 1.6; }
.hero-cta { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.facts { background: var(--bg); border-bottom: 1px solid var(--line); }
.facts-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { display: grid; gap: 4px; padding: var(--s4) var(--s3); text-align: center; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact-k { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.fact-v { font-family: var(--font-serif); font-size: 1.15rem; }
.halo-photo { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.halo-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(170, 140, 64, 0.35), 0 28px 70px rgba(120, 90, 40, 0.2); }
.hp-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(170, 140, 64, 0.7); opacity: 0; pointer-events: none; animation: hp 6s var(--ease) infinite; }
.hp-ring + .hp-ring { animation-delay: 3s; }
@keyframes hp { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.5); opacity: 0; } }
.steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5); }
.step { position: relative; padding-top: var(--s4); border-top: 1px solid var(--line); }
.step::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fffdf2 0%, #ffd070 40%, #f2a53c 80%); box-shadow: 0 0 12px rgba(235, 150, 50, 0.7); }
.step-n { display: block; margin-bottom: var(--s1); font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: rgba(190, 150, 60, 0.85); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); }
.arches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: 62rem; margin: 0 auto; }
.arches figure { margin: 0; }
.arches img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 10px 10px; }
.arches figcaption { padding-top: var(--s2); text-align: center; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .facts-row { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
  .arches { gap: var(--s1); }
  .arches figcaption { font-size: 0.7rem; letter-spacing: 0.06em; }
}

/* Scroll reveal (only when JS is on and motion is allowed) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
.js [data-reveal].in-view { opacity: 1; transform: none; }

/* Header sits over the hero on the home page, then turns solid */
.site-header--overlay { position: fixed; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.site-header--overlay.is-solid { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Recent sessions + Kind words: warm, glowing sections that carry on from the orb's journey */
.glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); background: radial-gradient(circle, rgba(255, 190, 90, 0.55), rgba(255, 190, 90, 0) 70%); }
.recent { position: relative; padding-block: var(--s6) var(--s7); background: linear-gradient(180deg, var(--bg) 0%, #f5e6cc 22%, #f0dcba 62%, #f7ecd9 100%); }
.recent .glow--a { width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; left: -12vw; top: 14%; }
.recent .glow--b { width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; right: -10vw; bottom: 4%; background: radial-gradient(circle, rgba(220, 120, 60, 0.4), rgba(220, 120, 60, 0) 70%); }
.recent-head { position: relative; z-index: 1; padding-top: var(--s5); }
.recent-head h2 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
.recent .wrap--wide { position: relative; z-index: 1; }
.kind { position: relative; overflow: hidden; background: linear-gradient(180deg, #f7ecd9 0%, #fbf1df 35%, var(--bg) 100%); }
.kind .wrap { position: relative; z-index: 1; }
.kind .glow--c { width: 520px; height: 520px; left: -8%; top: 4%; }
.kind .glow--d { width: 460px; height: 460px; right: -6%; top: 38%; background: radial-gradient(circle, rgba(230, 140, 70, 0.4), rgba(230, 140, 70, 0) 70%); }
.kind .glow--e { width: 380px; height: 380px; left: 30%; bottom: -6%; }
.kind .review--feature { padding: var(--s6) var(--s5) var(--s5); border-radius: 32px; background: rgba(255, 252, 245, 0.78); box-shadow: 0 30px 80px rgba(160, 100, 30, 0.2), 0 0 0 1px rgba(200, 160, 70, 0.45); backdrop-filter: blur(6px); }
.kind .review-mark { font-size: 7rem; background: linear-gradient(180deg, #f2a53c, #c98a2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kind .reviews { border-top: 0; max-width: 60rem; gap: var(--s4); }
.kind .reviews .review { padding: var(--s5); border-radius: 24px; background: rgba(255, 252, 245, 0.85); box-shadow: 0 18px 50px rgba(160, 100, 30, 0.16), 0 0 0 1px rgba(200, 160, 70, 0.35); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.kind .reviews .review:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(160, 100, 30, 0.26), 0 0 0 1px rgba(200, 160, 70, 0.6); }
@media (min-width: 820px) { .kind .reviews .review + .review { padding-left: var(--s5); border-left: 0; } }
@keyframes drift { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes glowfloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(30px, -24px, 0) scale(1.12); } }
@keyframes bloom { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(3.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .gallery figure { animation: drift 6s ease-in-out infinite alternate; }
  .gallery figure:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
  .gallery figure:nth-child(3) { animation-delay: -4s; animation-duration: 8s; }
  .glow { animation: glowfloat 12s ease-in-out infinite alternate; }
  .glow--b, .glow--d { animation-duration: 15s; animation-direction: alternate-reverse; }
  .recent-head::before, .recent-head::after { content: ''; position: absolute; left: 50%; top: 0; width: 140px; aspect-ratio: 1; margin: -70px 0 0 -70px; border-radius: 50%; border: 2px solid rgba(200, 150, 60, 0.8); opacity: 0; pointer-events: none; }
  .recent.bloom .recent-head::before { animation: bloom 2.2s var(--ease) 1 both; }
  .recent.bloom .recent-head::after { animation: bloom 2.2s var(--ease) 0.35s 1 both; }
}

/* About page */
.wrap--narrow { width: min(46rem, 100% - 2 * var(--s3)); margin-inline: auto; }
.page-hero .lead { max-width: 40rem; margin: var(--s2) auto 0; color: var(--muted); font-size: 1.125rem; }
.prose p { max-width: none; }
.prose .emph, .about-purpose .emph { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.55; color: var(--green-dark); }
.about-philosophy { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, #f5e8d0 50%, var(--bg) 100%); }
.about-philosophy .wrap { position: relative; z-index: 1; }
.about-philosophy .center { margin-bottom: var(--s4); }
.pullquote { margin: var(--s5) 0; padding: var(--s5) var(--s4); text-align: center; border-radius: 28px; background: rgba(255, 252, 245, 0.8); box-shadow: 0 24px 70px rgba(160, 100, 30, 0.18), 0 0 0 1px rgba(200, 160, 70, 0.45); }
.pullquote blockquote { margin: 0; }
.pullquote p { margin: 0 auto; max-width: 34rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.45; }
.pullquote figcaption { margin-top: var(--s2); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.work-grid { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 980px) { .work-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.work-card { padding: var(--s5) var(--s4); border-radius: 24px; background: rgba(255, 252, 245, 0.9); box-shadow: 0 18px 50px rgba(160, 100, 30, 0.14), 0 0 0 1px rgba(200, 160, 70, 0.35); }
.work-card h3 { font-size: 1.4rem; }
.work-card p { max-width: none; color: var(--muted); }
.work-card .more { display: inline-block; margin-top: var(--s1); }
.about-purpose { background: linear-gradient(180deg, var(--bg) 0%, #f5e6cc 100%); padding-block: var(--s7); }
.purpose-lead { margin-inline: auto; font-family: var(--font-serif); font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.3; }
.about-purpose p { margin-inline: auto; }
.about-philosophy .glow--c { width: 460px; height: 460px; left: -8%; top: 10%; }
.about-philosophy .glow--d { width: 420px; height: 420px; right: -6%; bottom: 8%; background: radial-gradient(circle, rgba(230, 140, 70, 0.35), rgba(230, 140, 70, 0) 70%); }

/* Photo headers on the Children, Adults and Corporate pages */
/* The photo shows clean across the top, then melts into a dark warm band that carries the text, so nothing sits on faces. */
.page-hero--photo { display: grid; align-items: end; min-height: clamp(440px, 41vw, 620px); padding: 6rem var(--s3) var(--s5); text-align: left; color: var(--on-image);
  background-color: #2a1c12;
  background-image: linear-gradient(180deg, rgba(42, 28, 18, 0) 0%, rgba(42, 28, 18, 0) 56%, rgba(42, 28, 18, 0.9) 78%, #2a1c12 92%), var(--photo);
  background-size: 100% 100%, max(100%, 900px) auto; background-position: center, center var(--y, 0px); background-repeat: no-repeat; }
.page-hero--photo h1, .page-hero--photo .eyebrow, .page-hero--photo .lede { text-shadow: 0 1px 14px rgba(20, 10, 4, 0.6); }
.page-hero--photo .wrap > * { max-width: 34rem; margin-inline: 0; }
.page-hero--photo h1 { margin-bottom: var(--s2); }
.page-hero--photo .eyebrow { color: inherit; opacity: 0.85; }
.page-hero--photo .lede { color: inherit; }