/* ============================================================
   Homepage — "Night to Morning"
   The page opens in the 10:40 p.m. kitchen (deep navy, one lamp)
   and ends in morning light (cream, a touch of gold). Motion lives
   in home.js; everything here reads fine with no JS at all.
   ============================================================ */

/* ---------- Shared bits ---------- */
.h-section { position: relative; padding-block: clamp(var(--space-20), 11vw, 10rem); }
.h-night { background: var(--navy-deep); color: var(--cream); }
.h-dusk { background: var(--navy); color: var(--cream); }
.h-morning { background: var(--cream); color: var(--ink); }
.h-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-5);
}
.h-morning .h-kicker { color: var(--orange); }
.h-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.h-title-md { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.h-body { font-size: var(--text-lg); line-height: 1.7; max-width: 60ch; }
.h-night .h-body, .h-dusk .h-body { color: rgba(250, 246, 240, 0.78); }
.h-morning .h-body { color: var(--ink-muted); }
.h-body + .h-body { margin-top: var(--space-5); }
.h-narrow { max-width: 760px; margin-inline: auto; }

/* Word-by-word reveal: home.js wraps words in .w > span. */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; will-change: transform; }

/* ---------- 1. Hero ---------- */
.h-hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
  color: var(--cream);
  overflow: hidden;
  padding-block: var(--space-12) var(--space-16);
}
/* The lamp: one warm pool of light that grows as the hero settles. */
.h-lamp {
  position: absolute;
  width: 140vmax; height: 140vmax;
  left: 68%; top: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 194, 51, 0.22) 0%, rgba(255, 122, 48, 0.08) 22%, transparent 48%);
  pointer-events: none;
}
.h-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; max-width: var(--content-full); }
.h-endorse { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.h-endorse img { height: 26px; width: auto; }
.h-endorse span {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.h-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.h-hero h1 .gold { color: var(--gold); }
.h-hero-sub { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; color: rgba(250, 246, 240, 0.8); margin-bottom: var(--space-8); }
.h-hero-sub strong { color: var(--cream); font-weight: 700; }
.h-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.h-call-note { margin-top: var(--space-5); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.62); }

/* Mya: before on the left, today on the right. Today sits higher and larger. */
.h-ba { position: relative; display: grid; grid-template-columns: 1fr 1.12fr; align-items: end; gap: var(--space-5); width: 100%; max-width: 640px; justify-self: end; }
.h-ba-item { position: relative; }
.h-ba-item img { width: 100%; aspect-ratio: 3 / 4.1; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.h-ba-item.before { margin-bottom: calc(-1 * var(--space-6)); }
.h-ba-item.before img { filter: saturate(0.85) brightness(0.92); }
.h-ba-item.after img { border-radius: 200px 200px var(--radius-xl) var(--radius-xl); outline: 2px solid rgba(255, 194, 51, 0.55); outline-offset: 8px; }
.h-ba-item.after::before {
  content: ''; position: absolute; inset: -25%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 194, 51, 0.35), transparent 60%);
}
.h-ba-tag {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: rgba(19, 31, 56, 0.85); color: var(--cream);
}
.h-ba-tag.today { background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--navy-deep); }
.h-ba figcaption {
  grid-column: 1 / -1; margin-top: var(--space-10);
  font-size: var(--text-sm); color: rgba(250, 246, 240, 0.7); text-align: right;
}
.h-ba figcaption strong { color: var(--cream); font-family: var(--font-display); }
.h-ba figcaption span { display: block; color: var(--gold); font-weight: 600; }
.h-scroll-cue {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250, 246, 240, 0.45); z-index: 1;
}
@media (max-width: 900px) {
  .h-hero .container { grid-template-columns: 1fr; gap: var(--space-10); }
  .h-ba { order: -1; justify-self: center; max-width: 380px; }
  .h-scroll-cue { display: none; }
}

/* ---------- 2. Her night ---------- */
.h-night-scene { padding-block: clamp(var(--space-20), 12vw, 11rem); }
.h-clock {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 2rem + 9vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--gold);
  text-shadow: 0 0 60px rgba(255, 194, 51, 0.25);
}
.h-clock small { font-size: 0.32em; letter-spacing: 0; margin-left: 0.15em; color: rgba(255, 194, 51, 0.8); }
.h-night-lead { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.2; margin: var(--space-4) 0 var(--space-12); }
.h-night-lines { display: grid; gap: var(--space-8); max-width: 640px; }
.h-night-lines p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.55; color: rgba(250, 246, 240, 0.86); }
.h-voice { font-style: italic; color: var(--cream) !important; border-left: 3px solid var(--orange); padding-left: var(--space-5); }
.h-quote-card {
  margin-top: var(--space-16);
  max-width: 640px;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.h-quote-card blockquote { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.35; color: var(--cream); }
.h-quote-card figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.55); }

/* Night: words on the left, her phone lighting up on the right */
.h-night-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-16); align-items: center; }
.h-phone {
  justify-self: center; width: 100%; max-width: 300px; aspect-ratio: 9 / 18.5;
  padding: 12px; border-radius: 46px; background: #0a0f1c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 120px rgba(255, 194, 51, 0.12);
}
.h-phone-screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden; padding: var(--space-10) var(--space-4) var(--space-4);
  background: radial-gradient(ellipse 120% 70% at 50% 0%, #2a3c66, #131f38 60%, #0b1324);
  text-align: center; color: var(--cream);
}
.h-phone-time { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; }
.h-phone-date { font-size: var(--text-xs); opacity: 0.7; margin-top: var(--space-1); }
.h-notes { display: grid; gap: var(--space-2); margin-top: var(--space-6); text-align: left; }
.h-note {
  padding: var(--space-3) var(--space-3); border-radius: 16px;
  background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 0.78rem; line-height: 1.35;
}
.h-note b { display: block; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.h-phone-screen { display: flex; flex-direction: column; }
.h-phone-battery { margin-top: auto; padding-top: var(--space-3); font-size: 0.7rem; color: #ff8f6b; }
@media (max-width: 900px) {
  .h-night-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .h-phone { max-width: 280px; aspect-ratio: auto; }
}

/* ---------- 3. What it costs ---------- */
.h-costs-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); align-items: center; }
.h-costs-photo { margin: 0; }
.h-costs-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 200px 200px var(--radius-xl) var(--radius-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.h-costs-photo figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.6); text-align: center; }
@media (max-width: 900px) {
  .h-costs-grid { grid-template-columns: 1fr; }
  .h-costs-photo { max-width: 320px; }
}

/* Method intro with a real walk beside it */
.h-method-top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: center; margin-bottom: var(--space-16); }
.h-method-top .h-method-head { margin-bottom: 0; }
.h-method-photo { position: relative; margin: 0; order: 2; }
.h-sound {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: rgba(19, 31, 56, 0.82); color: var(--cream);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.06em;
}
.h-sound:hover, .h-sound[aria-pressed='true'] { background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--navy-deep); }
.h-method-photo video { display: block; background: var(--navy-deep); }
.h-method-photo img, .h-method-photo video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius-xl) 200px var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .h-method-top { grid-template-columns: 1fr; }
  .h-method-photo { order: 0; max-width: 340px; }
}
.h-costs { list-style: none; display: grid; gap: var(--space-4); margin: var(--space-10) 0; max-width: 680px; }
.h-costs li {
  font-size: var(--text-lg); line-height: 1.5;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--gold);
  color: rgba(250, 246, 240, 0.9);
}
.h-answer { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.35; max-width: 680px; }
.h-answer-gold { color: var(--gold); font-size: var(--text-2xl); margin-top: var(--space-6); line-height: 1.2; }

/* ---------- Why Black women ---------- */
.h-why { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--cream); }
.h-why-bg { position: absolute; inset: 0; }
.h-why-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: grayscale(0.4) blur(1px); }
.h-why-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy-deep) 0%, rgba(19, 31, 56, 0.65) 30%, rgba(19, 31, 56, 0.85) 75%, var(--navy) 100%); }
.h-why .container { position: relative; z-index: 1; }
.h-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; margin-top: var(--space-12); }
.h-why-lines { list-style: none; display: grid; gap: var(--space-5); }
.h-why-lines li { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; color: rgba(250, 246, 240, 0.88); }
.h-why-turn { margin-top: var(--space-4); padding-left: var(--space-5); border-left: 3px solid var(--orange); font-style: italic; color: var(--cream) !important; }
.h-why-stats { display: grid; gap: var(--space-5); }
.h-stat { margin: 0; padding: var(--space-8); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); }
.h-stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--gold); }
.h-stat figcaption { margin-top: var(--space-3); font-size: var(--text-lg); line-height: 1.45; color: var(--cream); }
.h-src { display: block; margin-top: var(--space-3); font-size: var(--text-xs); }
.h-src a { color: rgba(250, 246, 240, 0.6); text-decoration: underline; text-underline-offset: 2px; }
.h-src a:hover { color: var(--gold); }
.h-why-close { margin-top: var(--space-16); max-width: 820px; }
.h-why-close p { font-size: var(--text-lg); color: rgba(250, 246, 240, 0.75); }
.h-why-big { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl) !important; line-height: 1.2; color: var(--cream) !important; }
.h-why-big span { display: block; color: var(--gold); }
@media (max-width: 900px) { .h-why-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ---------- 4. Three rooms + the cycle ---------- */
.h-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
.h-room {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: 120px 120px var(--radius-lg) var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.h-room h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--cream); margin-bottom: var(--space-3); }
.h-room p { font-size: var(--text-base); color: rgba(250, 246, 240, 0.75); }
.h-room h3, .h-room p { position: relative; z-index: 1; }
.h-room-door {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: linear-gradient(180deg, #0d1528, #101a30);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
.h-trap { margin-top: var(--space-16); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.h-trap-text p { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.25; }
.h-trap-text p .gold { color: var(--gold); }
.h-cycle { width: 100%; max-width: 420px; margin-inline: auto; }
.h-cycle text { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.12em; fill: var(--cream); }
@media (max-width: 860px) {
  .h-rooms { grid-template-columns: 1fr; }
  .h-room { min-height: 0; padding-top: var(--space-12); }
  .h-trap { grid-template-columns: 1fr; }
}

/* Audit chart — numbers only, no names */
.h-data { margin-top: var(--space-16); padding: var(--space-8); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.h-data h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-6); }
.h-bars { display: grid; gap: var(--space-4); }
.h-bar { display: grid; grid-template-columns: 9.5rem 1fr 2.5rem; align-items: center; gap: var(--space-4); font-size: var(--text-sm); }
.h-bar-track, .h-bar-fill { display: block; }
.h-bar-track { height: 14px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.h-bar-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--orange), var(--gold)); transform-origin: left center; }
.h-bar-num { font-family: var(--font-display); font-weight: 800; text-align: right; color: var(--gold); }
.h-data figcaption { margin-top: var(--space-6); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.65); max-width: 60ch; }
@media (max-width: 520px) { .h-bar { grid-template-columns: 7rem 1fr 2rem; } }

/* ---------- Dawn: the band between night and the method ---------- */
.h-dawn {
  position: relative; overflow: hidden;
  height: clamp(220px, 40vh, 420px);
  background: linear-gradient(180deg, var(--navy) 0%, #3a3f5c 38%, #b98a6a 72%, var(--cream) 100%);
}
.h-dawn-sun {
  position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%);
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--gold), var(--orange));
  box-shadow: 0 0 120px 40px rgba(255, 194, 51, 0.35);
}
/* Sun rays: thin beams that fan out and slowly turn behind the sun. */
.h-dawn-rays {
  position: absolute; left: 50%; bottom: -70px;
  width: 900px; height: 900px; margin-left: -450px; margin-bottom: -380px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 110, 0.55) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.5) 30%, transparent 62%);
          mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.5) 30%, transparent 62%);
  pointer-events: none;
}
.h-dawn-sun, .h-dawn-rays { z-index: 1; }
.h-dawn-sun { z-index: 2; }

/* ---------- 5. The method ---------- */
.h-method { background: var(--cream); color: var(--ink); padding-top: var(--space-12); }
.h-method .h-title { color: var(--navy); }
.h-method .h-body { color: var(--ink-muted); }
.h-method .h-step h3 { color: var(--navy); }
.h-method .h-step p { color: var(--ink-muted); opacity: 1; }
.h-method .h-step-dot { background: var(--cream); border-color: var(--orange); color: var(--orange); }
.h-method-head { max-width: 720px; margin-bottom: var(--space-16); }
.h-path { position: relative; display: grid; gap: var(--space-12); padding-left: clamp(3.5rem, 6vw, 5rem); }
.h-path-line {
  position: absolute; left: clamp(1.2rem, 2.4vw, 1.9rem); top: 0.6rem; bottom: 0.6rem; width: 3px;
  background: rgba(127, 127, 127, 0.25); border-radius: 3px; overflow: hidden;
}
.h-path-line i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--orange), var(--gold)); transform-origin: top center; }
.h-step { position: relative; max-width: 640px; }
.h-step-dot {
  position: absolute; left: calc(-1 * clamp(3.5rem, 6vw, 5rem) + clamp(1.2rem, 2.4vw, 1.9rem) - 12px); top: 0.15rem;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--navy-deep); border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--gold);
}
.h-step h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-2); }
.h-step p { font-size: var(--text-lg); line-height: 1.6; opacity: 0.85; }

/* Method chips: three short promises instead of one long sentence */
.h-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
.h-chips li {
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  background: var(--white); border: 1.5px solid var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--navy);
}

/* Testimony: before and after, her words, then her video */
.h-story {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
  max-width: 980px; padding: var(--space-6); border-radius: var(--radius-xl);
  background: var(--white); color: var(--ink);
  box-shadow: 0 24px 60px rgba(19, 31, 56, 0.25);
}
.h-story-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.h-story-pair > div { position: relative; }
.h-story-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-lg); }
.h-story-pair .h-ba-tag { left: var(--space-3); bottom: var(--space-3); }
/* Photos on the left; her words with the video under them on the right. */
.h-story-pair { grid-column: 1; grid-row: 1 / span 2; }
.h-story > figcaption { grid-column: 2; grid-row: 1; align-self: end; }
.h-story video { grid-column: 2; grid-row: 2; align-self: start; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--navy-deep); object-fit: cover; }
.h-story-strip { grid-template-columns: 1.1fr 0.9fr; }
.h-story-film { grid-column: 1 / -1; }
.h-story-film img { width: 100%; height: auto; border-radius: var(--radius-md); }
.h-story-strip > figcaption { grid-column: 1; grid-row: 2; align-self: center; }
.h-story-strip video { grid-column: 2; grid-row: 2; }
.h-story blockquote { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.35; color: var(--navy); }
.h-story .who { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); }
.h-story .who strong { color: var(--navy); font-family: var(--font-display); }
.h-story .fruit { display: inline-block; margin-top: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(255, 194, 51, 0.18); color: var(--navy); font-size: var(--text-xs); font-weight: 600; }
.h-results-note { font-size: var(--text-xs); opacity: 0.7; margin-top: var(--space-10); max-width: 60ch; }
@media (max-width: 860px) {
  .h-story, .h-story-strip { grid-template-columns: 1fr; }
  .h-story > *, .h-story-strip > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---------- 6. Walking it together ---------- */
.h-run { margin: var(--space-12) 0 0; }
.h-run img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.h-together-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-16); align-items: start; margin-top: var(--space-16); }
.h-letter-kicker { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-3); }
.h-letter-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.15; color: var(--navy); margin-bottom: var(--space-6); }
.h-letter p { font-size: var(--text-base); line-height: 1.75; color: var(--ink-muted); }
.h-letter p + p { margin-top: var(--space-4); }
.h-letter-pull {
  margin: var(--space-8) 0; padding-left: var(--space-5); border-left: 4px solid var(--gold);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.3; color: var(--navy);
}
.h-together-close { margin-top: var(--space-16); padding: clamp(var(--space-8), 5vw, var(--space-16)); border-radius: var(--radius-xl); background: var(--navy); color: var(--cream); text-align: center; }
.h-together-close p { color: rgba(250, 246, 240, 0.8); font-size: var(--text-lg); max-width: 52ch; margin: 0 auto; }
.h-together-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl) !important; color: var(--cream) !important; margin-bottom: var(--space-4) !important; }
.h-together-invite { margin-top: var(--space-5) !important; font-family: var(--font-display); font-weight: 700; color: var(--gold) !important; }
@media (max-width: 900px) {
  .h-together-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .h-run img { aspect-ratio: 4 / 3; }
}

/* Nicole's story: 2021 and today, side by side, with her own words */
.h-nstory { margin-top: var(--space-16); display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8) var(--space-12); align-items: center; }
.h-nstory-head { grid-column: 1 / -1; }
.h-nstory-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
.h-nstory-photos figure { position: relative; margin: 0; }
.h-nstory-photos img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-lg); }
.h-nstory-photos .h-ba-tag { left: var(--space-3); bottom: var(--space-3); }
.h-nstory-quote {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.25; color: var(--navy);
  padding-left: var(--space-6); border-left: 5px solid var(--gold);
}
.h-weights { margin-top: var(--space-16); }
.h-weights ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.h-weights li {
  padding: var(--space-6); border-radius: var(--radius-lg); background: var(--white);
  border: 1px solid var(--border-light); border-top: 4px solid var(--orange);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.4; color: var(--navy);
}
.h-yt { margin: var(--space-16) auto 0; max-width: 880px; }
.h-yt-play { position: relative; display: block; width: 100%; padding: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); cursor: pointer; }
.h-yt-play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 600ms ease; }
.h-yt-play:hover img { transform: scale(1.03); }
.h-yt-btn {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold)); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.h-yt-btn::after { content: ''; position: absolute; left: 36px; top: 28px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--navy-deep); }
.h-yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: block; }
.h-yt figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); text-align: center; }
.h-yt figcaption strong { color: var(--navy); font-family: var(--font-display); }
.h-together-family { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl) !important; color: var(--gold) !important; margin-bottom: var(--space-4) !important; }
@media (max-width: 860px) {
  .h-nstory { grid-template-columns: 1fr; }
  .h-weights ul { grid-template-columns: 1fr; }
}

/* Chips on a dark hero (apply, schedule) */
.h-chips-dark { justify-content: center; margin: var(--space-5) 0; }
.h-chips-dark li { background: rgba(255, 255, 255, 0.06); color: var(--cream); border-color: rgba(255, 194, 51, 0.6); }
.hero-band .h-call-note { text-align: center; }

/* Mya's word on the apply page */
.h-mya-word { margin: var(--space-12) auto 0; max-width: 760px; text-align: center; }
.h-mya-word blockquote { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.25; color: var(--navy); }
.h-mya-word figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.h-mya-word figcaption strong { color: var(--navy); font-family: var(--font-display); }
.h-steps3 li strong { display: block; color: var(--navy); font-family: var(--font-display); margin-bottom: var(--space-1); }

/* Real-life photo reels inside the method */
.h-reel { max-width: 980px; margin: 0; }
.h-reel-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.h-reel-move .h-reel-row { grid-template-columns: 0.8fr 1fr 1fr 1.4fr; }
.h-reel-row img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-md); }
.h-reel figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
@media (max-width: 720px) {
  .h-reel-row, .h-reel-move .h-reel-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
  .h-reel-row img { height: 200px; scroll-snap-align: start; }
}

/* Night: the applicant and Nicole, side by side */
.h-quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-16); max-width: 980px; }
.h-quote-pair .h-quote-card { margin-top: 0; max-width: none; }
@media (max-width: 760px) { .h-quote-pair { grid-template-columns: 1fr; } }

/* ---------- 7. Is this you ---------- */
.h-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.h-fit-card { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--border-light); }
.h-fit-card.yes { border: 2px solid var(--gold); }
.h-fit-card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--navy); margin-bottom: var(--space-5); }
.h-fit-card ul { list-style: none; display: grid; gap: var(--space-4); }
.h-fit-card li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--space-2); font-size: var(--text-base); line-height: 1.55; color: var(--ink-muted); }
.h-fit-card li::before { font-weight: 800; }
.h-fit-card.yes li::before { content: '\2713'; color: var(--orange); }
.h-fit-card.no li::before { content: '\2014'; color: var(--ink-faint); }
@media (max-width: 820px) { .h-fit { grid-template-columns: 1fr; } }

/* ---------- 8. Morning close ---------- */
.h-close { text-align: center; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 194, 51, 0.28), transparent 60%), var(--cream); }
.h-close .h-title { color: var(--navy); }
.h-close .h-body { margin: var(--space-6) auto var(--space-8); }
.h-close .h-ctas { justify-content: center; }
.h-close .btn-outline-navy { padding: var(--space-5) var(--space-10); font-size: var(--text-base); }
.h-close-call { max-width: 56ch; margin: var(--space-10) auto 0; font-size: var(--text-base); line-height: 1.65; color: var(--ink-muted); }
.h-close-call strong { color: var(--navy); }
.h-sun {
  width: 84px; height: 84px; margin: 0 auto var(--space-8); border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, var(--gold), var(--orange));
  box-shadow: 0 0 0 14px rgba(255, 194, 51, 0.16), 0 0 0 30px rgba(255, 194, 51, 0.08);
}

/* ---------- Shared on the funnel pages ---------- */
/* Stories strip: Mya and Magleny, before and today, in their own words */
.h-stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-10); }
.h-sc { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-md); }
.h-sc .h-story-pair { grid-row: auto; }
.h-sc .h-story-pair img { aspect-ratio: 4 / 5; }
.h-sc .h-story-film img { aspect-ratio: auto; }
.h-sc blockquote { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.4; color: var(--navy); }
.h-sc .who { font-size: var(--text-sm); color: var(--ink-muted); }
.h-sc .who strong { color: var(--navy); font-family: var(--font-display); }
.h-sc .fruit { align-self: flex-start; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(255, 194, 51, 0.18); color: var(--navy); font-size: var(--text-xs); font-weight: 600; }
@media (max-width: 820px) { .h-stories-grid { grid-template-columns: 1fr; } }

/* Simple page hero (funnel pages): dark, one lamp, one idea */
.h-phero { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--cream); padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.h-phero .container { position: relative; z-index: 1; }
.h-phero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.h-phero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: var(--space-6); }
.h-phero h1 .gold { color: var(--gold); }
.h-phero .h-hero-sub { margin-bottom: var(--space-8); }
.h-phero-center { text-align: center; max-width: 820px; margin-inline: auto; }
.h-phero-center .h-ctas { justify-content: center; }
.h-points { list-style: none; display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); }
.h-points li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-lg); color: rgba(250, 246, 240, 0.9); }
.h-points li::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131f38' stroke-width='3.2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.h-phero-photo { position: relative; margin: 0; }
.h-phero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px var(--radius-xl) var(--radius-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); outline: 2px solid rgba(255, 194, 51, 0.5); outline-offset: 8px; }
.h-phero-photo figcaption { margin-top: var(--space-5); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.75); text-align: center; }
.h-phero-photo figcaption strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--cream); margin-bottom: var(--space-1); }
@media (max-width: 900px) {
  .h-phero-grid { grid-template-columns: 1fr; }
  .h-phero-photo { max-width: 320px; }
}

/* Audit page: the result card */
.h-rc { justify-self: center; width: 100%; max-width: 380px; padding: var(--space-8); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.h-rc-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-5); }
.h-rc-stage { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); margin-bottom: var(--space-3); color: rgba(250, 246, 240, 0.6); font-family: var(--font-display); font-weight: 700; }
.h-rc-stage i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.h-rc-stage.is-on { background: rgba(255, 194, 51, 0.14); color: var(--cream); }
.h-rc-stage.is-on i { background: var(--gold); }
.h-rc-stage small { margin-left: auto; font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); color: var(--gold); }
.h-rc-note { margin-top: var(--space-5); font-size: var(--text-sm); color: rgba(250, 246, 240, 0.7); }

/* Stage cards (audit page) */
.h-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-10); }
.h-stage { padding: var(--space-8); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.h-stage-dot { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--navy-deep); background: var(--gold); margin-bottom: var(--space-4); }
.h-stage h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.h-stage p { color: rgba(250, 246, 240, 0.8); font-size: var(--text-base); line-height: 1.6; }
@media (max-width: 860px) { .h-stages { grid-template-columns: 1fr; } }

/* Three numbered steps */
.h-steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-10); counter-reset: s; }
.h-steps3 li { padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--border-light); font-size: var(--text-lg); line-height: 1.5; color: var(--ink-muted); }
.h-steps3 li::before { counter-increment: s; content: counter(s); display: flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; margin-bottom: var(--space-4); background: var(--navy); color: var(--gold); font-family: var(--font-display); font-weight: 800; }
@media (max-width: 860px) { .h-steps3 { grid-template-columns: 1fr; } }

/* ---------- Motion setup: only when home.js runs the animations ---------- */
/* Without JS, or with reduced motion, nothing below applies and every line is visible. */
.js-motion .reveal { opacity: 0; transform: translateY(28px); }
.js-motion [data-split] { visibility: hidden; }
.js-motion [data-split].is-split { visibility: visible; }