/* /: the hero spotlight, the scroll-zoom into "calm", the three steps, gatherings, Mind State, six kinds of service, the FAQ
   and the map block. Tokens only; story.css supplies the hero, beats and next step. Behaviour: assets/js/shell/home.js. */
.home-page { min-inline-size: 0; overflow-x: clip; }
.home-h3 { margin: 0; font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); }
.home-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--ds-accent); text-underline-offset: .2em; }
.home-note { margin: 0; max-inline-size: 65ch; font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.home-note a { color: var(--ds-accent); }
.home-num { font-variant-numeric: lining-nums tabular-nums; }
.home-page .story-prose { color: var(--ds-text); }
.home-page .ds-card__footer { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

/* The hero: a painted garden of marble arches by still water, full bleed, under a dawn gradient mesh, with a light that follows a fine pointer.
   Still by default (phones, reduced motion, Save-Data, slow links); home.js adds .is-live where motion is welcome. Everything here is
   decoration (aria-hidden); the words and buttons sit above it and stay readable on a scrim in both themes. */
.home-hero { isolation: isolate; min-block-size: min(46rem, calc(100svh - var(--ds-header-h))); display: flex; flex-direction: column; justify-content: center; background: var(--ds-surface); }
.home-hero .story-hero__inner, .home-hero .story-hero__trust { position: relative; z-index: 1; inline-size: 100%; box-sizing: border-box; }
.home-hero .story-hero__inner { padding-block-start: var(--ds-space-10); }
.home-hero__world { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.home-hero__art { position: absolute; inset: 0; }
.home-hero__art picture, .home-hero__art img { display: block; inline-size: 100%; block-size: 100%; }
.home-hero__art img { object-fit: cover; object-position: 50% 62%; transform-origin: 60% 55%; }
.home-hero__art--light { display: none; }
:root:not(.dark) .home-hero__art--dark { display: none; }
:root:not(.dark) .home-hero__art--light { display: block; }
/* dawn gradient mesh: three soft colour fields rising from the horizon */
.home-hero__mesh i { position: absolute; display: block; border-radius: 50%; inline-size: 60vmax; block-size: 60vmax; will-change: transform; }
.home-hero__mesh i:nth-child(1) { inset-inline-start: -12vmax; inset-block-end: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--ds-accent) 55%, transparent), transparent); }
.home-hero__mesh i:nth-child(2) { inset-inline-end: -16vmax; inset-block-end: -24vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--ds-action) 62%, transparent), transparent); }
.home-hero__mesh i:nth-child(3) { inset-inline-start: 28%; inset-block-start: -34vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--ds-accent) 26%, transparent), transparent); }
:root.dark .home-hero__mesh { mix-blend-mode: screen; opacity: 1; }
:root:not(.dark) .home-hero__mesh { opacity: .5; }
/* the scrim keeps AA contrast under the words: stronger on the text side and on phones */
.home-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-surface) 94%, transparent) 0%, color-mix(in srgb, var(--ds-surface) 78%, transparent) 46%, color-mix(in srgb, var(--ds-surface) 14%, transparent) 100%),
    linear-gradient(0deg, var(--ds-surface), transparent 30%); }
@media (max-width: 47.99rem) { .home-hero__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--ds-surface) 92%, transparent), color-mix(in srgb, var(--ds-surface) 74%, transparent)); } }
/* the cursor light: clearly visible but calm (a warm pool about 22rem wide); it brightens the painting and the scrim alike */
.home-hero__light { position: absolute; inset: 0; opacity: 0; transition: opacity var(--ds-dur-slow) var(--ds-ease-gentle);
  background: radial-gradient(circle 26rem at var(--spot-x, 62%) var(--spot-y, 38%), color-mix(in srgb, var(--ds-accent) 50%, transparent), color-mix(in srgb, var(--ds-accent) 18%, transparent) 48%, transparent 74%); }
:root.dark .home-hero__light { mix-blend-mode: screen; }
.home-hero.is-live .home-hero__light { opacity: 1; }
.home-hero.is-live:not(.is-lit) .home-hero__light { opacity: 0; }
.home-hero.is-lit .home-hero__light { opacity: 1; }
.story-actions > .home-note { flex-basis: 100%; }
.home-hero .story-hero__title { text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  /* one orchestrated entrance: the painting rises out of the dark, the headline's words settle one by one, then the rest follows */
  /* the painting rises out of the dark: a veil of the page colour lifts off it (the image itself is painted at once, so the entrance never delays the first paint) */
  .home-hero__world::after { content: ""; position: absolute; inset: 0; background: var(--ds-surface); pointer-events: none; animation: home-veil 1.2s var(--ds-ease-gentle) forwards; }
  .home-hero .story-word { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(8px);
    animation: home-word .6s var(--ds-ease-gentle) forwards; animation-delay: calc(.05s + var(--i, 0) * .05s); }
  .home-hero .story-hero__lede, .home-hero .story-actions > *, .home-hero .story-hero__trust { opacity: 0; animation: home-rise .6s var(--ds-ease-gentle) forwards; }
  .home-hero .story-hero__lede { animation-delay: .35s; }
  .home-hero .story-actions > :nth-child(1) { animation-delay: .45s; }
  .home-hero .story-actions > :nth-child(2) { animation-delay: .5s; }
  .home-hero .story-actions > :nth-child(n+3) { animation-delay: .6s; }
  .home-hero .story-hero__trust { animation-delay: .7s; }
  /* the slow living backdrop (desktop pointers only; the class is set by home.js) */
  .home-hero.is-live .home-hero__art img { animation: home-drift 46s ease-in-out infinite alternate; }
  .home-hero.is-live .home-hero__mesh i:nth-child(1) { animation: home-mesh-a 34s ease-in-out infinite alternate; }
  .home-hero.is-live .home-hero__mesh i:nth-child(2) { animation: home-mesh-b 41s ease-in-out infinite alternate; }
  .home-hero.is-live .home-hero__mesh i:nth-child(3) { animation: home-mesh-a 52s ease-in-out infinite alternate-reverse; }
}
@keyframes home-veil { from { opacity: 1; } to { opacity: 0; } }
@keyframes home-word { to { opacity: 1; transform: none; filter: none; } }
@keyframes home-rise { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@keyframes home-drift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.12) translate3d(1.5%, -1.5%, 0); } }
@keyframes home-mesh-a { from { transform: translate3d(-4vmax, 2vmax, 0) scale(1); } to { transform: translate3d(6vmax, -4vmax, 0) scale(1.18); } }
@keyframes home-mesh-b { from { transform: translate3d(5vmax, -2vmax, 0) scale(1.1); } to { transform: translate3d(-6vmax, 3vmax, 0) scale(.95); } }

/* Scroll-zoom into "calm". Base: a plain, large, still word. With scroll-driven animation (or the home.js fallback) the section is tall
   and the word grows inside a sticky stage; nothing leaves the stage, so there is no layout shift and no horizontal overflow. */
.home-calm { background: var(--ds-surface); color: var(--ds-text); border-block-end: 1px solid var(--ds-border); overflow-x: clip; }
.home-calm__stage { display: grid; justify-items: center; align-content: center; gap: var(--ds-space-4); text-align: center; margin-inline: auto;
  max-inline-size: 72rem; padding: var(--ds-space-10) var(--ds-space-4); min-inline-size: 0; }
.home-calm__title { margin: 0; font-family: var(--ds-font-ui); font-size: var(--ds-text-md); font-weight: 400; letter-spacing: .04em; color: var(--ds-text-muted); }
.home-calm__word { --calm-size: min(30vw, 40svh); margin: 0; font-family: var(--ds-font-display); font-weight: 500; line-height: 1; letter-spacing: .02em;
  font-size: var(--calm-size); color: var(--ds-accent); }
.home-calm__text { text-align: start; margin-inline: auto; }
@media (min-width: 48rem) { .home-calm__stage { padding-inline: var(--ds-space-8); } }
@media (prefers-reduced-motion: no-preference) {
  .home-calm__stage { transition: none; }
  @supports (animation-timeline: view()) {
    .home-calm { block-size: 175svh; view-timeline-name: --calm; view-timeline-axis: block; }
    .home-calm__stage { position: sticky; inset-block-start: var(--ds-header-h); block-size: calc(100svh - var(--ds-header-h)); padding-block: var(--ds-space-6); box-sizing: border-box; overflow: clip; }
    .home-calm__word { animation: home-calm-zoom linear both; animation-timeline: --calm; animation-range: cover 15% cover 55%; }
    .home-calm__text { animation: home-calm-fade linear both; animation-timeline: --calm; animation-range: cover 35% cover 55%; }
  }
  /* no scroll-driven animation: home.js sets --calm-p (0..1) from the scroll position and marks the section .is-scrolled */
  @supports not (animation-timeline: view()) {
    .home-calm.is-scrolled { block-size: 175svh; }
    .home-calm.is-scrolled .home-calm__stage { position: sticky; inset-block-start: var(--ds-header-h); block-size: calc(100svh - var(--ds-header-h)); padding-block: var(--ds-space-6); box-sizing: border-box; overflow: clip; }
    .home-calm.is-scrolled .home-calm__word { font-size: calc(var(--ds-text-4xl) + (var(--calm-size) - var(--ds-text-4xl)) * var(--calm-p, 1)); }
    .home-calm.is-scrolled .home-calm__text { opacity: var(--calm-t, 1); }
  }
}
@keyframes home-calm-zoom { from { font-size: var(--ds-text-4xl); } to { font-size: var(--calm-size); } }
@keyframes home-calm-fade { from { opacity: 0; } to { opacity: 1; } }

/* Findings, steps, cards, kinds, FAQ */
.home-limits { margin: 0; max-inline-size: 65ch; padding-inline-start: var(--ds-space-4); border-inline-start: 3px solid var(--ds-accent); color: var(--ds-text-muted); }
.home-findings, .home-steps, .home-kinds, .home-mind__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); }
.home-finding { min-inline-size: 0; padding: var(--ds-space-4); background: var(--ds-surface-raised); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.home-finding p { margin: 0; }
.home-cite { margin-block-start: var(--ds-space-2) !important; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.home-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-4); align-items: start; min-inline-size: 0; }
.home-step p { margin: var(--ds-space-1) 0 0; color: var(--ds-text-muted); }
.home-step__n { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--ds-border); border-radius: 50%; color: var(--ds-accent); font-variant-numeric: lining-nums tabular-nums; }
.home-cards { display: grid; gap: var(--ds-space-4); }
.home-cards > * { min-inline-size: 0; }
.home-when { margin: 0; }
.home-ask { display: grid; gap: var(--ds-space-3); max-inline-size: 40rem; padding-block-start: var(--ds-space-6); border-block-start: 1px solid var(--ds-border); }
.home-ask p { margin: 0; color: var(--ds-text-muted); }
.home-kind { display: flex; flex-direction: column; gap: var(--ds-space-1); min-block-size: 2.75rem; padding: var(--ds-space-4); background: var(--ds-surface-raised); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md); color: var(--ds-text); text-decoration: none; block-size: 100%; box-sizing: border-box; }
.home-kind__label { font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; color: var(--ds-accent); }
.home-kind__line { color: var(--ds-text-muted); }
.home-kind:hover { border-color: var(--ds-accent); }
.home-kind:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.home-faqs { display: grid; gap: var(--ds-space-2); max-inline-size: 48rem; }
.home-faq { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-raised); }
.home-faq summary { display: flex; align-items: center; min-block-size: 2.75rem; padding: var(--ds-space-2) var(--ds-space-4); cursor: pointer; font-weight: 600; }
.home-faq summary:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.home-faq__a { padding: 0 var(--ds-space-4) var(--ds-space-4); color: var(--ds-text-muted); }
.home-faq__a p { margin: 0; }

/* Mind State: four aria-pressed cards; every recommendation shows until the script has run (then only the chosen one) */
.home-mind__card { position: relative; display: flex; align-items: center; gap: var(--ds-space-3); inline-size: 100%; min-block-size: 2.75rem; padding: var(--ds-space-3) var(--ds-space-4); box-sizing: border-box; cursor: pointer;
  background: var(--ds-surface-raised); color: var(--ds-text); font: inherit; text-align: start; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.home-mind__card[aria-pressed="true"] { border-color: var(--ds-accent); background: var(--ds-surface-sunken); }
.home-mind__card:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.home-mind__icon { font-size: var(--ds-text-xl); }
.home-mind__recs { display: grid; gap: var(--ds-space-4); margin-block: var(--ds-space-4); }
.home-mind__rec { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-sunken); max-inline-size: 48rem; }
.home-mind__rec p { margin: 0; }
.home-mind__rec[hidden] { display: none; }

/* Plan your visit: the map block is css/ds/atlas.css (shared with /centers); only the wrapper is the page's */
.home-plan { min-inline-size: 0; }

@media (min-width: 48rem) {
  .home-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-mind__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .home-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Rhythm below the hero: each beat has one visual moment (a painted frame, a band, a path, a lab accent) and the rest stays quiet. Original
   artwork only (assets/art), decorative, lazy. ---- */
.home-band, .home-frame, .home-closing { margin: 0; }
.home-band { position: relative; block-size: clamp(8rem, 18vw, 15rem); overflow: hidden; border-block: 1px solid var(--ds-border); }
.home-band picture, .home-band img, .home-frame picture, .home-frame img, .home-closing > picture, .home-closing > picture img { display: block; inline-size: 100%; block-size: 100%; }
.home-band img { object-fit: cover; object-position: 50% 58%; }
.home-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ds-surface), transparent 32%, transparent 68%, var(--ds-surface)), color-mix(in srgb, var(--ds-surface) 38%, transparent); }
:root.dark .home-band img, :root.dark .home-frame img, :root.dark .home-closing > picture img { filter: brightness(.7) saturate(1.05); }

/* What is Brahm Gyan: words beside a framed painted doorway (a gateway, not a person) */
.home-split { display: grid; gap: var(--ds-space-8); align-items: center; }
.home-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ds-radius-lg); overflow: hidden; border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-2); isolation: isolate; }
.home-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 4rem color-mix(in srgb, var(--ds-accent) 30%, transparent); }
.home-frame img { object-fit: cover; }
@media (min-width: 64rem) { .home-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ds-space-11); } }

/* The science: a lab accent (neural cyan) on each finding, never a claim of healing */
.home-findings--lab .home-finding { border-block-start: 3px solid var(--ds-neural); background: linear-gradient(180deg, var(--ds-neural-soft), transparent 40%), var(--ds-surface-raised); }
.home-findings--lab .home-cite a { color: var(--ds-neural); }

/* How to start: three steps on one path */
.home-steps { position: relative; counter-reset: step; }
.home-step { position: relative; }
.home-step__n { position: relative; z-index: 1; background: var(--ds-surface-raised); font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; border-color: var(--ds-accent);
  box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--ds-accent) 14%, transparent); }
@media (max-width: 47.99rem) {
  .home-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 1.375rem; inset-block: 2.75rem calc(-1 * var(--ds-space-4)); inline-size: 1px; background: linear-gradient(var(--ds-accent), transparent); }
}
@media (min-width: 48rem) {
  /* the numeral sits above its words and a thread runs on to the next one */
  .home-step { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-3); }
  .home-step:not(:last-child)::before { content: ""; position: absolute; inset-block-start: 1.375rem; inset-inline: 3.6rem calc(-1 * var(--ds-space-4)); block-size: 1px; background: linear-gradient(90deg, var(--ds-accent), transparent); }
}

/* Six kinds of service: a lit top edge, a stronger hover */
.home-kind { position: relative; overflow: hidden; border-block-start: 2px solid var(--ds-accent); transition: transform var(--ds-dur-base) var(--ds-ease-gentle), border-color var(--ds-dur-base); }
.home-kind::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ds-dur-base);
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--ds-accent) 22%, transparent), transparent 70%); }
.home-kind:hover::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .home-kind:hover { transform: translateY(-3px); } }

/* Honest answers: the question stays beside its answers on wide screens */
@media (min-width: 64rem) {
  #faq .ds-section__inner { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--ds-space-11); align-items: start; }
  #faq .ds-section__head { position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-6)); }
  #faq .story-eyebrow, #faq .home-faq-more { grid-column: 2; }
  #faq .ds-section__head { grid-row: 1 / span 3; grid-column: 1; }
  #faq .home-faqs { grid-column: 2; max-inline-size: none; }
}

/* The close: the painted path, softened, behind one primary step */
.home-closing { position: relative; isolation: isolate; overflow: hidden; border-block-start: 1px solid var(--ds-border); }
.home-closing > picture { position: absolute; inset: 0; z-index: -1; }
.home-closing > picture img { object-fit: cover; object-position: 50% 70%; opacity: .55; }
.home-closing .ds-section--dawn { background: linear-gradient(180deg, var(--ds-surface), color-mix(in srgb, var(--ds-surface) 55%, transparent) 40%, color-mix(in srgb, var(--ds-surface) 80%, transparent)); }