/* ==========================================================================
   Kristin Panek — "First Light"
   One page, one dawn. Night water → dusk → sunrise → morning → night again.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* The hero's load-in zoom renders 7% wider than the viewport for its first
     beat. body's overflow-x already stops the page scrolling, but clipping at
     the root keeps the document's own width honest too. `clip` rather than
     `hidden` so no scroll container is created. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-d-body);
  background: var(--g-night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: rgba(107, 200, 191, 0.35); color: #08262c; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  padding: 0.7rem 1.2rem; border-radius: var(--r-pill);
  background: var(--c-teal); color: var(--c-teal-label);
  font-weight: 600; font-size: var(--t-sm);
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Film grain — one fixed veil over everything, barely there. */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* --- Frame --------------------------------------------------------------- */

.inner {
  width: min(var(--inner), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.inner--narrow { max-width: var(--narrow); }
.inner--module { max-width: 1080px; }

/* --- Voice: eyebrows, display, prose ------------------------------------- */

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
}
.eyebrow--light { color: var(--c-rose-deep); }

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink-d-title);
}
.display--light { color: var(--ink-l-title); }

.title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.18;
  letter-spacing: var(--ls-display);
  color: var(--ink-d-title);
}
.title--light { color: var(--ink-l-title); }

.em-lav, .em-rose, .em-roseink {
  font-style: italic;
  font-weight: 500;
}
.em-lav     { color: var(--c-lavender); }
.em-rose    { color: var(--c-rose-deep); }
.em-roseink { color: var(--c-lavender-ink); }

.lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-d-body);
  max-width: 42em;
}
.lede--light { color: var(--ink-l-body); }

.lead {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: #c5d4dc;
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
}
.lead--light { color: var(--c-slate-deep); }

.prose { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 34em; }
.prose p + p { margin-top: 1em; }
.prose__strong { font-weight: 600; color: #d9e5ea; }
.prose--light { color: var(--ink-l-body); }
.prose--light .prose__strong { color: var(--ink-l-title); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 1rem 2.1rem;
  border-radius: var(--r-pill);
  background: var(--c-teal);
  color: var(--c-teal-label);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  box-shadow: var(--sh-cta);
  transition: transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              background-color var(--dur-hover) var(--ease);
}
.btn:hover  { background: var(--c-teal-hi); transform: translateY(-2px); box-shadow: var(--sh-cta-hov); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 1.15rem 2.5rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.92rem 1.5rem; font-size: 0.9375rem; }

/* --- Header ---------------------------------------------------------------- */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.header.is-scrolled {
  background: rgba(11, 22, 29, 0.9);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  box-shadow: 0 1px 0 rgba(107, 200, 191, 0.12);
}
.header__inner {
  width: min(1320px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.9rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand__lotus { width: 40px; height: 27.5px; flex: none; }
.lotus-petal { fill: var(--c-rose); }
.lotus-leaf  { fill: var(--c-teal); }
.brand__text { display: flex; flex-direction: column; gap: 0.18rem; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f2f6f8; line-height: 1;
}
.brand__tag {
  font-size: 0.575rem; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-d-soft); line-height: 1;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.9rem; }
.nav__link {
  font-size: 0.9375rem; font-weight: 500; color: #cfdde4;
  letter-spacing: 0.02em; padding: 0.4rem 0.1rem;
  transition: color var(--dur-hover) var(--ease);
}
.nav__link:hover { color: var(--c-teal); }
.nav__mobileCta { display: none; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav__burger span {
  display: block; width: 24px; height: 1.6px; background: #e7eef2;
  border-radius: 2px;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.3px) rotate(-45deg); }

/* --- Hero · nightfall ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__media, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  z-index: -2;
}
.js .hero__media img { animation: hero-drift 14s var(--ease) both; }
@keyframes hero-drift {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(11, 22, 29, 0.4),
      rgba(11, 22, 29, 0.04) 30%,
      rgba(11, 22, 29, 0.1) 55%,
      rgba(11, 22, 29, 0.58) 76%,
      rgba(11, 22, 29, 0.92) 90%,
      var(--g-night) 98%),
    radial-gradient(120% 90% at 50% 42%, transparent 32%, rgba(11, 22, 29, 0.5) 100%);
}

.hero__inner {
  position: relative;
  width: min(var(--inner), 100% - var(--gutter) * 2);
  padding-top: clamp(4rem, 10vh, 7rem);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero__eyebrow { color: #9fd8d2; text-shadow: 0 1px 22px rgba(11,22,29,0.6); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  color: #f4f8f9;
  text-shadow: 0 2px 34px rgba(11, 22, 29, 0.55);
}
.hero__line { display: block; }
.hero__accent { color: var(--c-lavender); font-weight: 500; }
.hero__sub {
  margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
  font-size: var(--t-lede);
  font-weight: 300;
  color: #d3e0e6;
  text-shadow: 0 1px 20px rgba(11, 22, 29, 0.6);
}
.hero__actions {
  margin-top: clamp(1.8rem, 4vw, 2.7rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
}
.hero__quiet {
  font-size: var(--t-sm); font-weight: 500; color: #b7c9d2;
  border-bottom: 1px solid rgba(183, 201, 210, 0.35);
  padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.hero__quiet:hover { color: var(--c-teal); border-color: var(--c-teal); }

/* Load-in: title lines, sub, actions rise in sequence. */
.js .hero__eyebrow,
.js .hero__line,
.js .hero__sub,
.js .hero__actions { opacity: 0; transform: translateY(26px); animation: hero-rise 1s var(--ease) forwards; }
.js .hero__eyebrow            { animation-delay: 0.25s; }
.js .hero__line:nth-child(1)  { animation-delay: 0.45s; }
.js .hero__line:nth-child(2)  { animation-delay: 0.68s; }
.js .hero__sub                { animation-delay: 1.0s; }
.js .hero__actions            { animation-delay: 1.25s; }
@keyframes hero-rise { to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: clamp(3.4rem, 7vh, 5rem); width: 44px;
  display: flex; justify-content: center;
}
.hero__scrollLine {
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(159, 216, 210, 0.8));
  animation: scroll-breathe 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-breathe {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --- Acts: the arc -------------------------------------------------------- */

.act { position: relative; padding-block: var(--act-pad); }

.act--night   { background: linear-gradient(to bottom, var(--g-night), var(--g-act1) 22%); }
.act--deep    { background: linear-gradient(to bottom, var(--g-act1), var(--g-act2) 14rem); }
.act--dusk    { background: linear-gradient(to bottom, var(--g-act2), var(--g-act3) 15rem); }
.act--predawn { background: linear-gradient(to bottom, var(--g-act3), var(--g-act4) 15rem); }
.act--morning { background: var(--g-morning); color: var(--ink-l-body); }
.act--day     { background: var(--g-day);     color: var(--ink-l-body); }
.act--rose    { background: var(--g-rosewash); color: var(--ink-l-body); }
.faq          { background: var(--g-faq); }

/* Consecutive same-ground acts share the light; tighten the seam. */
.mapit, .faq { padding-top: var(--act-pad-sm); }
.voices, .pathways { padding-top: var(--act-pad-sm); }
.meet { padding-top: var(--act-pad-sm); }

/* --- Act dividers — the G-centre diamond on a thread of light -------------- */

.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem;
  width: min(340px, 62%);
  margin: 0 auto clamp(2.8rem, 6vw, 4.5rem);
}
.divider::before, .divider::after {
  content: "";
  height: 1px; flex: 1;
  background: linear-gradient(to right, transparent, rgba(107, 200, 191, 0.4));
}
.divider::after { background: linear-gradient(to left, transparent, rgba(107, 200, 191, 0.4)); }
.divider svg {
  width: 15px; height: 15px; flex: none;
  fill: none;
  stroke: rgba(127, 210, 201, 0.75);
  stroke-width: 1.2;
}
.divider--light::before { background: linear-gradient(to right, transparent, rgba(176, 85, 95, 0.38)); }
.divider--light::after  { background: linear-gradient(to left, transparent, rgba(176, 85, 95, 0.38)); }
.divider--light svg { stroke: rgba(176, 85, 95, 0.65); }

/* Statement — one held breath, centered. */
.statement { text-align: center; padding-block: var(--act-pad); }
.statement .lede { margin: clamp(1.4rem, 3vw, 2rem) auto 0; max-width: 36em; }

/* --- Splits ---------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6.5vw, 6rem);
  align-items: center;
}
.split--rev .split__media { order: 2; }
.split--rev .split__body  { order: 1; }

.split__media img {
  width: 100%;
  border-radius: var(--r-image);
  box-shadow: var(--sh-media);
}
.split__media--square { max-width: 520px; justify-self: center; width: 100%; }
.split__media--square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--sh-media-light);
}
.root .split__media img { aspect-ratio: 1 / 1; object-fit: cover; }

/* --- The chart: a map drawn in light -------------------------------------- */

.split__media--chart { display: grid; justify-items: center; }
.chart { width: min(400px, 82vw); }
.chart__svg { width: 100%; height: auto; overflow: visible; }

.chart__ring {
  fill: none;
  stroke: rgba(107, 200, 191, 0.34);
  stroke-width: 1.1;
}
.chart__ring--inner { stroke: rgba(107, 200, 191, 0.13); stroke-width: 1; }

.chan {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ctr {
  fill: rgba(20, 43, 54, 0.5);
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
}
.ctr--teal { stroke: #7fd2c9; fill: rgba(107, 200, 191, 0.13); }
.ctr--lav  { stroke: #cdb4f2; fill: rgba(214, 188, 250, 0.13); }
.ctr--rose { stroke: #edaaab; fill: rgba(235, 153, 154, 0.13); }

/* Draw-on-scroll: channels trace, centers bloom, the G-centre breathes. */
.js .chart:not(.is-drawn) .chan { stroke-dashoffset: 1; }
.js .chart:not(.is-drawn) .ctr  { opacity: 0; transform: scale(0.82); }
.js .chart .chan { transition: stroke-dashoffset 1.5s var(--ease); }
.js .chart .ctr  { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .chart .chan:nth-child(3n)   { transition-delay: 320ms; }
.js .chart .chan:nth-child(3n+1) { transition-delay: 120ms; }
.js .chart .chan:nth-child(3n+2) { transition-delay: 520ms; }
.js .chart .ctr:nth-child(1) { transition-delay: 500ms; }
.js .chart .ctr:nth-child(2) { transition-delay: 640ms; }
.js .chart .ctr:nth-child(3) { transition-delay: 780ms; }
.js .chart .ctr:nth-child(4) { transition-delay: 940ms; }
.js .chart .ctr:nth-child(5) { transition-delay: 1060ms; }
.js .chart .ctr:nth-child(6) { transition-delay: 1180ms; }
.js .chart .ctr:nth-child(7) { transition-delay: 1300ms; }
.js .chart .ctr:nth-child(8) { transition-delay: 1420ms; }
.js .chart .ctr:nth-child(9) { transition-delay: 1560ms; }

.chart.is-drawn .ctr--pulse { animation: gcentre 5s ease-in-out 2.2s infinite; }
@keyframes gcentre {
  0%, 100% { fill: rgba(235, 153, 154, 0.13); }
  50%      { fill: rgba(235, 153, 154, 0.32); }
}

.chart__caption {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: #93aab8;
}

/* --- Steps · before dawn --------------------------------------------------- */

.steps__head { text-align: center; max-width: 720px; margin-inline: auto; }
.steps__head .lede { margin: clamp(1.2rem, 2.6vw, 1.7rem) auto 0; }

.steps__grid {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
}
.step {
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(107, 200, 191, 0.22);
}
.step__num {
  position: absolute; top: -0.72em; left: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: rgba(159, 216, 210, 0.4);
  background: linear-gradient(var(--g-act4), var(--g-act4)) padding-box;
  padding-right: 0.35em;
}
@supports (-webkit-text-stroke: 1px black) {
  .step__num { color: transparent; -webkit-text-stroke: 1px rgba(159, 216, 210, 0.55); }
}
.step__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink-d-title);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.step__body { margin-top: 0.8rem; font-size: var(--t-sm); max-width: 30em; }
.steps__cta { text-align: center; margin-top: clamp(3rem, 6vw, 4.5rem); }

/* --- Interlude · dawn breaks over the lavender spiral ---------------------- */

.interlude {
  position: relative;
  isolation: isolate;
  min-height: min(98vh, 960px);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.interlude__media, .interlude__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
  z-index: -2;
}
.interlude__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* The fog lifts into morning over the bottom half — a long eased dissolve,
       not the 13% hard edge it used to be. */
    linear-gradient(to top,
      var(--g-morning) 0%,
      rgba(251, 245, 239, 0.95) 7%,
      rgba(251, 245, 239, 0.78) 15%,
      rgba(251, 245, 239, 0.5)  24%,
      rgba(251, 245, 239, 0.26) 32%,
      rgba(251, 245, 239, 0.1)  40%,
      rgba(251, 245, 239, 0.02) 46%,
      rgba(251, 245, 239, 0)    52%),
    linear-gradient(to bottom, var(--g-act4) 0, rgba(26, 52, 65, 0) 28%),
    linear-gradient(to top, rgba(29, 27, 42, 0.6), rgba(29, 27, 42, 0.2) 58%, rgba(29, 27, 42, 0.06));
}
.interlude__quote {
  /* The weighting sets where the quote sits in the frame. Mirroring it drops
     the text a clean 20% of the scene height from dead-centre-high to
     comfortably lower, still clear of the dissolve. */
  padding-block: clamp(11rem, 24vw, 18rem) clamp(4rem, 9vw, 7rem);
  max-width: 880px;
  text-align: center;
}
/* Seat the quote over the open field, clear of Kristin's figure at left. */
@media (min-width: 1021px) {
  .interlude__quote { margin-right: 2vw; max-width: 780px; }
}
.interlude__quote blockquote p {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-quote);
  line-height: 1.45;
  color: #fdf9f6;
  text-shadow: 0 2px 30px rgba(29, 27, 42, 0.65);
}
.interlude__quote figcaption { margin-top: 1.8rem; }
.interlude__name {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f3d9d4;
}
.interlude__role {
  display: block;
  margin: 0.55rem auto 0;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(250, 240, 238, 0.8);
}

/* --- Meet Kristin · morning ------------------------------------------------ */

.meet__creds {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(105, 135, 164, 0.22);
  display: grid;
  gap: 0.55rem;
  font-size: var(--t-sm);
  color: var(--ink-l-soft);
}
.meet__creds li { padding-left: 1.35rem; position: relative; }
.meet__creds li::before {
  content: "";
  position: absolute; left: 0; top: 0.52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-rose);
}
.meet__creds em { font-style: italic; color: var(--ink-l-body); }

/* --- Qualifier · day ------------------------------------------------------- */

.qualifier__head { text-align: center; max-width: 780px; margin: 0 auto clamp(3rem, 7vw, 5rem); }

.qualifier__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  max-width: 1080px;
  margin-inline: auto;
}
.qualifier__colTitle {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--c-teal-deep);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(105, 135, 164, 0.25);
}
.qualifier__col--no .qualifier__colTitle { color: var(--c-rose-deep); }

.qualifier__list { display: grid; }
.qualifier__list li {
  padding-block: 1.5rem;
  border-bottom: 1px solid rgba(105, 135, 164, 0.16);
}
.qualifier__itemTitle { font-weight: 600; color: var(--ink-l-title); line-height: 1.45; }
.qualifier__itemBody  { margin-top: 0.45rem; font-size: var(--t-sm); color: var(--ink-l-soft); }

/* --- Clarity call module · full light -------------------------------------- */

.mapit__head { text-align: center; max-width: 700px; margin: 0 auto clamp(2.8rem, 6vw, 4.2rem); }
.mapit__head .lede { margin: clamp(1.2rem, 2.6vw, 1.6rem) auto 0; }

.mapit__module {
  background:
    radial-gradient(120% 160% at 88% -20%, rgba(107, 200, 191, 0.15), transparent 52%),
    radial-gradient(110% 130% at 0% 110%, rgba(235, 153, 154, 0.12), transparent 50%),
    linear-gradient(160deg, #12333d, #0e2830 58%, #0d232c);
  border-radius: 26px;
  box-shadow: var(--sh-media);
  overflow: hidden;
}
.mapit__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.8rem, 4.5vw, 3.5rem);
}

.mapit__blockTitle {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.22rem;
  color: #e9f2f4;
}
.mapit__blockTitle--paths { margin-top: clamp(2rem, 4vw, 2.8rem); }

.mapit__list { margin-top: 1.4rem; display: grid; gap: 1rem; color: #b9cdd6; }
.mapit__list li { display: flex; align-items: baseline; gap: 0.95rem; }
.mapit__marker {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(107, 200, 191, 0.5);
  color: var(--c-teal);
  font-size: 0.8rem; font-weight: 600;
  transform: translateY(0.32em);
}

.mapit__paths { margin-top: 1.3rem; display: grid; gap: 0.85rem; }
.mapit__paths a {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: #a9bfc9;
  transition: color var(--dur-hover) var(--ease);
}
.mapit__paths strong { color: #dcebee; font-weight: 600; }
.mapit__paths a:hover, .mapit__paths a:hover strong { color: var(--c-teal); }

.mapit__col--book {
  align-self: stretch;
  background: rgba(251, 245, 239, 0.045);
  border: 1px solid rgba(107, 200, 191, 0.18);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column;
}
.mapit__bookTitle {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: #f1f7f8;
}
.mapit__meta {
  margin-top: 1.3rem;
  display: grid; gap: 0.7rem;
  color: #b9cdd6; font-size: var(--t-sm); font-weight: 500;
}
.mapit__meta li { display: flex; align-items: center; gap: 0.65rem; }
.mapit__meta svg { color: var(--c-teal); flex: none; }
.mapit__note {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(107, 200, 191, 0.16);
  font-size: 0.9rem; line-height: 1.65; color: #9db3be;
}
.mapit__cta { margin-top: auto; padding-top: 1.6rem; text-align: center; align-self: stretch; }

/* --- FAQ ------------------------------------------------------------------- */

.faq .eyebrow { text-align: center; }
.faq__list { margin-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid rgba(105, 135, 164, 0.2); }

.faq__item { border-bottom: 1px solid rgba(105, 135, 164, 0.2); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.35rem;
  font-weight: 600; font-size: 1.05rem; color: var(--ink-l-title);
  transition: color var(--dur-hover) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--c-rose-deep); }

.faq__mark { position: relative; flex: none; width: 14px; height: 14px; }
.faq__mark::before, .faq__mark::after {
  content: "";
  position: absolute; inset: 50% auto auto 0;
  width: 14px; height: 1.6px;
  background: var(--c-slate-deep);
  transition: transform 300ms var(--ease);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

.faq__item p {
  padding: 0 2.4rem 1.5rem 0;
  max-width: 60ch;
  font-size: var(--t-sm);
  color: var(--ink-l-body);
}

/* --- Voices ---------------------------------------------------------------- */

.voices__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.8rem, 6vw, 4.2rem); }
.voices__head .lede { margin: 1.2rem auto 0; }

.voices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 1080px;
  margin-inline: auto;
}
.voice {
  position: relative;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(176, 85, 95, 0.14);
  border-radius: var(--r-card);
  padding: clamp(1.8rem, 3.6vw, 2.6rem);
  box-shadow: var(--sh-card);
}
.voice::before {
  content: "\201C";
  position: absolute; top: -0.18em; left: 0.12em;
  font-family: var(--f-display); font-style: italic;
  font-size: 5.2rem; line-height: 1;
  color: rgba(235, 153, 154, 0.4);
  pointer-events: none;
}
.voice blockquote p {
  font-size: 1.02rem; line-height: 1.75; color: var(--ink-l-body);
}
.voice figcaption { margin-top: 1.4rem; }
.voice__name { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--ink-l-title); }
.voice__role { display: block; margin-top: 0.25rem; font-size: 0.84rem; color: var(--ink-l-soft); }

/* --- Pathways -------------------------------------------------------------- */

.pathways__head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.8rem, 6vw, 4rem); }
.pathways__head .lede { margin: 1.1rem auto 0; }

.pathways__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.6rem, 3.2vw, 2.6rem);
}
.pathways__grid li { grid-column: span 2; }
.pathways__grid li:nth-child(4) { grid-column: 2 / span 2; }
.pathways__grid li:nth-child(5) { grid-column: 4 / span 2; }

.path { display: block; }
.path__media {
  display: block; overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--sh-media-light);
}
.path__media img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 700ms var(--ease);
}
.path:hover .path__media img { transform: scale(1.045); }
.path__title {
  margin-top: 1.15rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink-l-title);
  transition: color var(--dur-hover) var(--ease);
}
.path:hover .path__title { color: var(--c-rose-deep); }
.path__body { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--ink-l-soft); max-width: 40ch; }

/* --- Footer · nightfall again ---------------------------------------------- */

.footer {
  background: linear-gradient(to bottom, var(--g-day), var(--g-day)) top / 100% 0 no-repeat,
              var(--g-night);
  color: var(--ink-d-body);
  padding-top: clamp(4.5rem, 9vw, 7rem);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(107, 200, 191, 0.4), transparent);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}
.brand--footer .brand__name { font-size: 1.15rem; }
.footer__line {
  margin-top: 1.4rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.06rem;
  color: #c3d2da;
  max-width: 30ch;
}
.footer__social { margin-top: 1.6rem; display: flex; gap: 0.9rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(107, 200, 191, 0.3);
  color: #cfdde4;
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.footer__social a:hover { color: var(--c-teal-label); background: var(--c-teal); border-color: var(--c-teal); }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer__heading {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 1.1rem;
}
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a {
  font-size: var(--t-sm);
  color: #a8bcc7;
  transition: color var(--dur-hover) var(--ease);
}
.footer__col a:hover { color: #e7eef2; }

.footer__base {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-block: 1.6rem;
  border-top: 1px solid rgba(107, 200, 191, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.84rem; color: var(--ink-d-soft);
}
.footer__base a { color: #a8bcc7; transition: color var(--dur-hover) var(--ease); }
.footer__base a:hover { color: var(--c-teal); }

/* --- Reveals ---------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-rise) var(--ease), transform var(--dur-rise) var(--ease);
}
.js .reveal.in-view { opacity: 1; transform: none; }

/* gentle stagger inside grids */
.js .steps__grid .reveal:nth-child(2),
.js .voices__grid .reveal:nth-child(2),
.js .pathways__grid li:nth-child(2).reveal { transition-delay: 140ms; }
.js .steps__grid .reveal:nth-child(3),
.js .pathways__grid li:nth-child(3).reveal { transition-delay: 280ms; }
.js .pathways__grid li:nth-child(4).reveal { transition-delay: 120ms; }
.js .pathways__grid li:nth-child(5).reveal { transition-delay: 260ms; }
.js .qualifier__cols .reveal:nth-child(2)  { transition-delay: 160ms; }

/* --- Mobile nav drawer ------------------------------------------------------ */

@media (max-width: 880px) {
  .nav__list {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 1.6rem;
    background: rgba(11, 22, 29, 0.985);
    opacity: 0; pointer-events: none;
    transition: opacity 350ms var(--ease);
  }
  .js .nav__list.is-open { opacity: 1; pointer-events: auto; }
  html:not(.js) .nav__list { position: static; flex-direction: row; gap: 1rem; opacity: 1; pointer-events: auto; background: none; }
  .nav__link { font-family: var(--f-display); font-size: 1.7rem; color: #eef4f6; }
  .nav__mobileCta { display: block; margin-top: 1rem; }
  .header__cta { display: none; }
  .nav__burger { display: flex; }
  body.nav-open { overflow: hidden; }
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); }
  .split--rev .split__media { order: 0; }
  .split--rev .split__body  { order: 0; }
  .split__media { max-width: 560px; }

  .steps__grid { grid-template-columns: 1fr; gap: 2.6rem; max-width: 560px; margin-inline: auto; margin-top: 3.4rem; }
  .qualifier__cols { grid-template-columns: 1fr; }
  .voices__grid { grid-template-columns: 1fr; max-width: 640px; }
  .mapit__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }

  .pathways__grid { grid-template-columns: 1fr 1fr; }
  .pathways__grid li,
  .pathways__grid li:nth-child(4),
  .pathways__grid li:nth-child(5) { grid-column: auto; }

}

@media (max-width: 560px) {
  .pathways__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .hero__media img { object-position: 30% 30%; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .mapit__grid { padding: 1.5rem 1.25rem; }
  .interlude { align-items: center; min-height: min(92vh, 760px); }
  .interlude__quote { padding-block: clamp(7rem, 20vw, 11rem) clamp(3rem, 8vw, 5rem); }
  .header .brand__tag { display: none; }
  .header .brand__name { font-size: 0.98rem; }
}

/* --- QA static mode (?static) ------------------------------------------------ */

.static *, .static *::before, .static *::after {
  animation: none !important;
  transition: none !important;
}
.static .reveal,
.static .hero__eyebrow, .static .hero__line, .static .hero__sub, .static .hero__actions {
  opacity: 1 !important;
  transform: none !important;
}
.static .chart .chan { stroke-dashoffset: 0 !important; }
.static .chart .ctr { opacity: 1 !important; transform: none !important; }

/* --- Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__eyebrow, .js .hero__line, .js .hero__sub, .js .hero__actions { opacity: 1; transform: none; animation: none; }
  .js .chart:not(.is-drawn) .chan { stroke-dashoffset: 0; }
  .js .chart:not(.is-drawn) .ctr { opacity: 1; transform: none; }
  .hero__scrollLine { animation: none; }
}

.static { scroll-behavior: auto !important; }

/* QA static mode: pin viewport-relative heights so full-page captures are sane. */
.static .hero { min-height: 844px; }

/* ==========================================================================
   Elevation pass — HIG + atmosphere refinements
   ========================================================================== */

/* Balanced display setting: no widowed words in any heading. */
.hero__title, .display, .title, .steps__title,
.interlude__quote blockquote p, .mapit__bookTitle { text-wrap: balance; }
.lede, .lead, .prose p { text-wrap: pretty; }

/* Anchor jumps clear the fixed header. */
main [id], footer[id] { scroll-margin-top: 92px; }

/* HIG floor: light weight only at large sizes. */
@media (max-width: 700px) {
  .lede { font-weight: 400; }
}

/* Increased-contrast mode: step every ink toward its title tone. */
@media (prefers-contrast: more) {
  :root {
    --ink-d-body: #c9d8e0;
    --ink-d-soft: #a7bac6;
    --ink-l-body: #42525c;
    --ink-l-soft: #54646e;
  }
  .grain { display: none; }
}

/* --- Seed-of-life watermarks: geometry breathing behind the words --------- */

.statement, .footer { position: relative; }
.statement > .inner, .footer > .inner { position: relative; }
.statement::before, .footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%236bc8bf' stroke-width='0.8'%3E%3Ccircle cx='100' cy='100' r='46'/%3E%3Ccircle cx='146' cy='100' r='46'/%3E%3Ccircle cx='54' cy='100' r='46'/%3E%3Ccircle cx='123' cy='139.8' r='46'/%3E%3Ccircle cx='77' cy='139.8' r='46'/%3E%3Ccircle cx='123' cy='60.2' r='46'/%3E%3Ccircle cx='77' cy='60.2' r='46'/%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.statement::before {
  inset: 50% auto auto 50%;
  width: min(860px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.05;
}
.footer::after {
  right: -8%; bottom: -18%;
  width: min(560px, 70vw); aspect-ratio: 1;
  opacity: 0.05;
}

/* --- Ambient halos behind media cards ------------------------------------- */

.split__media { position: relative; }
.split__media:not(.split__media--chart)::before {
  content: "";
  position: absolute; inset: -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(107, 200, 191, 0.16), transparent 72%);
  pointer-events: none;
}
.act--morning .split__media:not(.split__media--chart)::before,
.act--day .split__media:not(.split__media--chart)::before {
  background: radial-gradient(closest-side, rgba(235, 153, 154, 0.2), transparent 74%);
}

/* --- The wheel turns: mandala ring rotates once drawn --------------------- */

.js .chart.is-drawn .chart__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ring-turn 140s linear infinite;
}
@keyframes ring-turn { to { transform: rotate(360deg); } }

/* Steps numerals: a touch more presence on the darkest ground. */
@supports (-webkit-text-stroke: 1px black) {
  .step__num { -webkit-text-stroke: 1px rgba(159, 216, 210, 0.7); }
}

/* --- Qualifier: the two columns become washed panels ----------------------- */

.qualifier__col {
  background: rgba(107, 200, 191, 0.09);
  border: 1px solid rgba(23, 89, 81, 0.12);
  border-radius: 20px;
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
}
.qualifier__col--no {
  background: rgba(235, 153, 154, 0.1);
  border-color: rgba(176, 85, 95, 0.14);
}
.qualifier__list li { border-bottom-color: rgba(105, 135, 164, 0.13); }
.qualifier__list li:last-child { border-bottom: 0; padding-bottom: 0.4rem; }

/* --- Pathway links carry the diamond motif --------------------------------- */

.mapit__paths a { position: relative; padding-left: 1.2rem; }
.mapit__paths a::before {
  content: "";
  position: absolute; left: 1px; top: 0.5em;
  width: 7px; height: 7px;
  border: 1px solid rgba(107, 200, 191, 0.75);
  border-radius: 1.5px;
  transform: rotate(45deg);
  transition: background-color var(--dur-hover) var(--ease);
}
.mapit__paths a:hover::before { background: rgba(107, 200, 191, 0.55); }

/* --- Header: scroll-edge light falloff instead of a hard bar --------------- */

.header.is-scrolled { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.header::before {
  content: "";
  position: absolute; inset: 0 0 -22px 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 22, 29, 0.94) 46%, rgba(11, 22, 29, 0.55) 72%, rgba(11, 22, 29, 0));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-mask-image: linear-gradient(to bottom, black 58%, transparent);
  mask-image: linear-gradient(to bottom, black 58%, transparent);
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.header.is-scrolled::before { opacity: 1; }

/* ==========================================================================
   Interior pages — course · coaching · about · clarity call
   Same system as home: the acts still run night → day. Each page is one
   chapter of that arc rather than the whole dawn.
   ========================================================================== */

/* --- Page hero: the home hero, held to two thirds of the screen ----------- */

.hero--page { min-height: clamp(540px, 76svh, 740px); }
.hero--page .hero__inner { padding-top: clamp(3.5rem, 8vh, 5.5rem); }
.hero--page .hero__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
.hero--page .hero__sub { max-width: 34em; }

.hero__meta {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.4rem;
  font-size: var(--t-sm); font-weight: 500;
  color: #b7c9d2;
  text-shadow: 0 1px 16px rgba(11, 22, 29, 0.6);
}
.hero__meta > * { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__meta > * + *::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(107, 200, 191, 0.7);
}

/* Current page marker in the nav. */
.nav__link--current { color: var(--c-teal); }

/* --- Section head: the centered opener used across interior pages --------- */

.head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.6rem, 6vw, 4rem); }
.head .lede { margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0; }
.head--wide { max-width: 900px; }

/* --- Ten modules: a ladder of light --------------------------------------- */

.modules { max-width: 900px; margin-inline: auto; }
.module {
  border-top: 1px solid rgba(107, 200, 191, 0.18);
}
.modules > .module:last-child { border-bottom: 1px solid rgba(107, 200, 191, 0.18); }

.module summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 1.9rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  transition: color var(--dur-hover) var(--ease);
}
.module summary::-webkit-details-marker { display: none; }

.module__num {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1;
  color: rgba(159, 216, 210, 0.5);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-hover) var(--ease);
}
.module__title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.45rem);
  line-height: 1.25;
  color: var(--ink-d-title);
}
.module summary:hover .module__num,
.module[open] .module__num { color: var(--c-teal); }

.module__mark { position: relative; width: 14px; height: 14px; flex: none; }
.module__mark::before, .module__mark::after {
  content: "";
  position: absolute; inset: 50% auto auto 0;
  width: 14px; height: 1.5px;
  background: rgba(159, 216, 210, 0.75);
  transition: transform 320ms var(--ease);
}
.module__mark::after { transform: rotate(90deg); }
.module[open] .module__mark::after { transform: rotate(0deg); }

.module__body {
  padding: 0 0 clamp(1.3rem, 2.6vw, 1.8rem) 0;
  margin-left: calc(2.6ch + clamp(1rem, 2.6vw, 1.9rem));
  max-width: 62ch;
  font-size: var(--t-sm);
  color: var(--ink-d-body);
}

/* --- Card grids: what's included, packages, ways to reach ----------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
.cards--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; margin-inline: auto; }

.card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(105, 135, 164, 0.16);
  box-shadow: var(--sh-card);
}
.card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--ink-l-title);
}
.card__body { margin-top: 0.7rem; font-size: var(--t-sm); color: var(--ink-l-body); }

/* Diamond bullet, the page's recurring mark. */
.card__mark {
  display: block; width: 10px; height: 10px;
  margin-bottom: 1.1rem;
  border: 1px solid var(--c-teal-deep);
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: 0.65;
}

/* --- Investment: two payment options -------------------------------------- */

.price {
  padding: clamp(1.7rem, 3.4vw, 2.4rem);
  border-radius: 18px;
  background: rgba(107, 200, 191, 0.1);
  border: 1px solid rgba(23, 89, 81, 0.16);
  text-align: center;
}
.price--plan { background: rgba(235, 153, 154, 0.1); border-color: rgba(176, 85, 95, 0.16); }
.price__name {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-teal-deep);
}
.price--plan .price__name { color: var(--c-rose-deep); }
.price__figure {
  display: block;
  margin: 1rem 0 0.7rem;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.1rem);
  line-height: 1;
  color: var(--ink-l-title);
  font-variant-numeric: lining-nums tabular-nums;
}
.price__note { font-size: var(--t-sm); color: var(--ink-l-soft); max-width: 26em; margin-inline: auto; }

/* --- Packages: the deeper container on a dark ground ---------------------- */

.package {
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  border-radius: 18px;
  background: rgba(251, 245, 239, 0.045);
  border: 1px solid rgba(107, 200, 191, 0.18);
}
.package__name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: #eef4f6;
}
.package__body { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--ink-d-body); }
.package__note {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
  font-family: var(--f-display); font-style: italic;
  font-size: 1.05rem;
  color: #c5d4dc;
}

/* --- Numbered points: "is this your threshold" ---------------------------- */

.points {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  max-width: 900px;
  margin-inline: auto;
  counter-reset: pt;
}
.point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: start;
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.3rem, 2.8vw, 1.9rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(105, 135, 164, 0.14);
}
.point::before {
  counter-increment: pt;
  content: counter(pt);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(23, 89, 81, 0.3);
  color: var(--c-teal-deep);
  font-size: 0.82rem; font-weight: 600;
  transform: translateY(0.1em);
}
.point__title { font-weight: 600; color: var(--ink-l-title); line-height: 1.45; }
.point__body { margin-top: 0.35rem; font-size: var(--t-sm); color: var(--ink-l-soft); }

/* --- Ways to reach --------------------------------------------------------- */

.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.reach__item {
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(105, 135, 164, 0.16);
  box-shadow: var(--sh-card);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
a.reach__item:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.reach__title {
  font-family: var(--f-display);
  font-size: 1.18rem;
  color: var(--ink-l-title);
  margin-bottom: 0.5rem;
}
.reach__body { font-size: var(--t-sm); color: var(--ink-l-soft); }
.reach__value {
  display: block; margin-top: 0.6rem;
  font-weight: 600; color: var(--c-teal-deep);
  word-break: break-word;
}

/* --- Request form ---------------------------------------------------------- */

.form { display: grid; gap: clamp(1.1rem, 2.4vw, 1.5rem); }
.field { display: grid; gap: 0.5rem; }
.field__label { font-size: var(--t-sm); font-weight: 600; color: #dceaee; }
.field__hint { font-size: 0.82rem; color: var(--ink-d-soft); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: #eef4f6;
  background: rgba(11, 22, 29, 0.45);
  border: 1px solid rgba(107, 200, 191, 0.28);
  border-radius: 12px;
  transition: border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%236bc8bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-teal);
  background: rgba(11, 22, 29, 0.62);
}
.field input::placeholder, .field textarea::placeholder { color: #7e97a6; }
.form__submit { margin-top: 0.4rem; justify-self: start; }
.form__note { font-size: 0.84rem; color: var(--ink-d-soft); }

/* --- Closing CTA band ------------------------------------------------------ */

.close { text-align: center; }
.close__actions {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.close__meta { font-size: var(--t-sm); color: var(--ink-l-soft); }
.act--night .close__meta, .act--deep .close__meta, .act--dusk .close__meta { color: var(--ink-d-soft); }

/* --- Story blocks: the about page's narrative ------------------------------ */

.story { max-width: var(--narrow); margin-inline: auto; }
.story + .story { margin-top: clamp(3rem, 7vw, 5rem); }
.story__kicker {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--c-lavender);
  margin-top: clamp(1.2rem, 2.6vw, 1.7rem);
}
.act--morning .story__kicker, .act--day .story__kicker { color: var(--c-lavender-ink); }

/* Pull line: a held sentence between passages. */
.pull {
  margin: clamp(2rem, 4.5vw, 3rem) auto;
  max-width: 26ch;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.3;
  color: var(--ink-d-title);
}
.act--morning .pull, .act--day .pull { color: var(--ink-l-title); }
.pull em { font-style: italic; color: var(--c-lavender); }
.act--morning .pull em, .act--day .pull em { color: var(--c-lavender-ink); }

/* --- Interior responsive --------------------------------------------------- */

@media (max-width: 640px) {
  .module summary { gap: 0.9rem; }
  .module__body { margin-left: 0; }
  .point { padding: 1.2rem; }
}

/* --- Inverted hero: the clarity call page arrives in full light ------------ */

.hero--light .hero__veil {
  background:
    linear-gradient(to bottom,
      rgba(251, 245, 239, 0.5),
      rgba(251, 245, 239, 0.12) 30%,
      rgba(251, 245, 239, 0.2) 58%,
      rgba(251, 245, 239, 0.78) 82%,
      var(--g-day) 98%),
    radial-gradient(115% 85% at 42% 46%, rgba(251, 245, 239, 0.62), transparent 62%);
}
.hero--light .hero__title { color: #2b4553; text-shadow: 0 1px 26px rgba(251, 245, 239, 0.85); }
.hero--light .hero__accent { color: var(--c-rose-deep); }
.hero--light .hero__eyebrow { color: #9c4a54; text-shadow: 0 1px 18px rgba(251, 245, 239, 0.9); }
.hero--light .hero__sub { color: #4a5f6b; text-shadow: 0 1px 20px rgba(251, 245, 239, 0.9); }
.hero--light .hero__meta { color: #566a75; text-shadow: 0 1px 16px rgba(251, 245, 239, 0.9); }
.hero--light .hero__quiet { color: #4a5f6b; border-color: rgba(74, 95, 107, 0.4); }
.hero--light .hero__quiet:hover { color: var(--c-teal-deep); border-color: var(--c-teal-deep); }
.hero--light .hero__scrollLine {
  background: linear-gradient(to bottom, transparent, rgba(23, 89, 81, 0.6));
}

/* --- Solo testimony: a single held quote between sections ------------------ */

.testimony {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.testimony blockquote p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.48;
  color: var(--ink-d-title);
}
.act--morning .testimony blockquote p,
.act--day .testimony blockquote p,
.act--rose .testimony blockquote p { color: var(--ink-l-title); }
.testimony figcaption { margin-top: 1.6rem; }
.testimony__name {
  display: block;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-teal);
}
.act--morning .testimony__name,
.act--day .testimony__name,
.act--rose .testimony__name { color: var(--c-rose-deep); }
.testimony__role {
  display: block; margin-top: 0.5rem;
  font-size: 0.86rem; color: var(--ink-d-soft);
}
.act--morning .testimony__role,
.act--day .testimony__role,
.act--rose .testimony__role { color: var(--ink-l-soft); }

/* --- Interior fixes --------------------------------------------------------- */

/* Consecutive acts on the same ground share one long breath; halve the seam. */
.act--night + .act--night,
.act--deep + .act--deep,
.act--dusk + .act--dusk,
.act--morning + .act--morning,
.act--day + .act--day,
.act--rose + .act--rose { padding-top: var(--act-pad-sm); }

/* A pull line that ends a section shouldn't add to the act's own padding. */
.pull:last-child { margin-bottom: 0; }

/* Prata has no tabular figures, so the module numerals need a fixed column. */
.module__num { min-width: 2.1rem; }

/* Long addresses wrap between characters rather than overflowing the card. */
.reach__value { font-size: 0.94rem; overflow-wrap: anywhere; }

/* Header ink over a light hero: dark until the scroll-edge blur arrives. */
.page-light .header:not(.is-scrolled) .brand__name { color: #2b4553; }
.page-light .header:not(.is-scrolled) .brand__tag  { color: #61757f; }
.page-light .header:not(.is-scrolled) .nav__link   { color: #3f5663; }
.page-light .header:not(.is-scrolled) .nav__link:hover,
.page-light .header:not(.is-scrolled) .nav__link--current { color: var(--c-teal-deep); }
.page-light .header:not(.is-scrolled) .nav__burger span { background: #2b4553; }
.page-light .header:not(.is-scrolled) .lotus-leaf { fill: #4aa79e; }

/* --- Book cover: the free-book pages -------------------------------------- */

.bookshot { display: grid; justify-items: center; }
.bookshot img {
  width: min(340px, 78%);
  border-radius: 6px;
  box-shadow:
    0 2px 6px rgba(11, 22, 29, 0.2),
    0 26px 60px -20px rgba(11, 22, 29, 0.55);
  transform: rotate(-2deg);
}
.act--morning .bookshot img, .act--day .bookshot img {
  box-shadow: 0 2px 6px rgba(78, 105, 128, 0.14), 0 26px 56px -22px rgba(78, 105, 128, 0.4);
}

/* Resource cards that are whole links (the library grid). */
a.card { display: block; transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
a.card .card__title { transition: color var(--dur-hover) var(--ease); }
a.card:hover .card__title { color: var(--c-rose-deep); }

/* --- Hero legibility scrim -------------------------------------------------
   Every hero plate carries its focal geometry in the right third, and the
   headline reaches into it. A soft radial behind the text block keeps type
   first without flattening the photograph. */

.hero--page .hero__veil::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 46%,
    rgba(11, 22, 29, 0.55), rgba(11, 22, 29, 0.28) 55%, transparent 78%);
}
.hero--light .hero__veil::after {
  background: radial-gradient(58% 46% at 50% 46%,
    rgba(251, 245, 239, 0.72), rgba(251, 245, 239, 0.4) 55%, transparent 78%);
}

/* --- Step numerals: the mask must match whichever ground it sits on -------
   The numeral straddles the rule above it and masks the line behind itself.
   That mask was hard-coded to the predawn ground, so it read as a dark box on
   every other act. Each act now publishes its own solid colour. */

.act--night   { --act-bg: var(--g-act1); }
.act--deep    { --act-bg: var(--g-act2); }
.act--dusk    { --act-bg: var(--g-act3); }
.act--predawn { --act-bg: var(--g-act4); }
.act--morning { --act-bg: var(--g-morning); }
.act--day     { --act-bg: var(--g-day); }
.act--rose    { --act-bg: var(--g-rosewash); }

.step__num {
  background: linear-gradient(var(--act-bg, var(--g-act4)), var(--act-bg, var(--g-act4))) padding-box;
}
/* On the light acts the stroke has to invert too. */
.act--morning .step__num, .act--day .step__num, .act--rose .step__num { color: rgba(53, 80, 95, 0.32); }
@supports (-webkit-text-stroke: 1px black) {
  .act--morning .step__num, .act--day .step__num, .act--rose .step__num {
    color: transparent; -webkit-text-stroke: 1px rgba(53, 80, 95, 0.45);
  }
}
.act--morning .step, .act--day .step, .act--rose .step { border-top-color: rgba(105, 135, 164, 0.28); }
.act--morning .step__title, .act--day .step__title, .act--rose .step__title { color: var(--ink-l-title); }
.act--morning .step__body, .act--day .step__body, .act--rose .step__body { color: var(--ink-l-body); }

/* --- Ambient hero loop ------------------------------------------------------
   The still is the LCP element and stays the poster; the video is layered over
   it and faded in only once it is actually playing, so a slow or blocked video
   simply never appears and the page looks the same as before. */

.hero__video {
  position: absolute; inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* --- Footer aurora ---------------------------------------------------------
   The footer is the page's return to night, and it was reading flat. This gives
   it the hero's own language in a quieter register: three soft brand-coloured
   glows drifting over the deep ground, plus the seed-of-life mark turning very
   slowly behind everything.

   Drawn in CSS rather than video on purpose — it appears on all fourteen pages,
   so a shared clip would cost bytes and decode time on every one. Gradients
   cost nothing, and because each keyframe track begins and ends on the same
   transform, the loop is seamless by construction rather than by encoding. */

.footer { overflow: hidden; isolation: isolate; }

.footer__aura {
  position: absolute; inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
.footer__aura span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

/* Seafoam — the widest, slowest sweep, low on the left. */
.footer__aura span:nth-child(1) {
  width: 58%; aspect-ratio: 1.6;
  left: -8%; bottom: -18%;
  background: radial-gradient(closest-side, rgba(107, 200, 191, 0.24), transparent 74%);
  animation: aura-a 64s ease-in-out infinite;
}
/* Lavender — high and to the right, the slowest of the three. */
.footer__aura span:nth-child(2) {
  width: 52%; aspect-ratio: 1.35;
  right: -6%; top: -14%;
  background: radial-gradient(closest-side, rgba(214, 188, 250, 0.2), transparent 74%);
  animation: aura-b 82s ease-in-out infinite;
}
/* Rose — small, centre-right, the warm ember. */
.footer__aura span:nth-child(3) {
  width: 38%; aspect-ratio: 1.2;
  left: 46%; top: 24%;
  background: radial-gradient(closest-side, rgba(235, 153, 154, 0.17), transparent 72%);
  animation: aura-c 53s ease-in-out infinite;
}

/* Every track returns to its starting transform, so there is no seam. */
@keyframes aura-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(9%, -6%, 0) scale(1.12); }
  66%      { transform: translate3d(-5%, 4%, 0) scale(0.94); }
}
@keyframes aura-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-8%, 7%, 0) scale(1.14); }
  72%      { transform: translate3d(4%, -3%, 0) scale(0.96); }
}
@keyframes aura-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-11%, -8%, 0) scale(1.2); }
}

/* The seed-of-life mark turns with them, one revolution every four minutes. */
.footer::after { animation: aura-turn 240s linear infinite; transform-origin: center; }
@keyframes aura-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .footer__aura span, .footer::after { animation: none; }
}