/* ==========================================================================
   It Starts with Sleep - main site
   Light #f7f1ec page with a black and white family photo beside the headline,
   sage accents, Bricolage Grotesque headings and Figtree text. Fonts are
   self-hosted (the site CSP allows only 'self'). Kate's brand palette only.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/bricolage-grotesque.woff2) format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/figtree.woff2) format("woff2");
}

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
  /* Kate's brand colors */
  --blush: #f1b2b2;
  --clay: #cb855a;
  --sage: #809d8b;
  --sand: #d2bdad;
  /* grounds: the light page, a sage wash for alternate sections, a lifted panel */
  --ground: #f7f1ec;           /* page: ink 10.2:1 */
  --wash: #DDDFD7;             /* sage 22% into ground: ink 8.5:1 */
  --surface: #CFD4CB;          /* panels, sage 34% into ground: ink 7.6:1 */
  --blush-wash: #f5d8d5;       /* blush 40% into ground, the dawn band only */
  /* sage scheme */
  --head: #2E3D35;             /* headings, pine ink: 10.2:1 on ground */
  --accent-lg: #4F6B5C;        /* display-size accent ("Starts Here."): 5.2:1 on ground */
  --deep: #4F6B5C;             /* button fill under white text (5.9:1), step numerals */
  --accent: #3F5A4B;           /* small accent text: 6.8:1 ground, 5.6:1 wash, 5.0:1 panel */
  /* neutrals */
  --ink: #3B3A37;
  --white: #ffffff;

  /* role tokens */
  --fg: var(--ink);            /* 10.2:1 ground, 8.5:1 wash, 7.6:1 panel */
  --fg-strong: var(--ink);
  --fg-muted: var(--ink);      /* stone (#7B7770) is 4.0:1 on ground, too low for text */
  --link: var(--ink);
  --focus: var(--ink);
  --line: rgba(59, 58, 55, 0.18);

  /* fixed top bar; js/site.js keeps this in step with the bar's real height */
  --bar-h: 76px;

  /* type: ratio 1.297 from byte 0x98 (1 + 152/512), base 18px */
  --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, sans-serif;
  --f-mono: var(--f-body);     /* small labels share the body font (plain zeros) */
  --t-1: 0.867rem;
  --t0: 1.125rem;
  --t1: 1.459rem;
  --t2: 1.893rem;
  --t3: 2.455rem;
  --t4: 3.184rem;
  --t5: 4.13rem;
  --t6: 5.357rem;
  --t7: 6.948rem;

  /* space: 8px unit from the "88" pair in 2b88c5 */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s6: 3rem;
  --s8: 4rem;
  --s12: 6rem;
  --s16: 8rem;

  /* radius 16px from byte 0x10 in 3f107c */
  --r: 16px;
  --r-lg: 28px;

  --wrap: 1320px;
  --gutter: clamp(16px, 5vw, 64px);
  --col-gap: clamp(16px, 2.4vw, 32px);
}

/* the light grounds swap the role tokens */
.sec--morning,
.foot {
  --accent: var(--accent-lg);  /* 5.2:1 on ground, 5.9:1 on white */
  --line: rgba(59, 58, 55, 0.14);
  --surface: var(--white);
}

/* ---------- 2. Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
em { font-style: normal; color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--blush); color: var(--ink); padding: var(--s1) var(--s2);   /* 6.4:1 */
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s2); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* 10-column grid: the "a" nibble in c94a00 */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4) var(--col-gap); }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* ---------- 3. Type ----------------------------------------------------- */
.h2, .h3, .hero__title, .offer__title, .stage__title, .step__title, .video__title {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  color: var(--head);
  margin: 0;
  text-wrap: balance;
}
.h2 { font-size: clamp(2.4rem, 6vw, var(--t5)); font-weight: 650; line-height: 1.02; letter-spacing: -0.025em; margin-bottom: var(--s3); }
.h2--mid { font-size: clamp(1.9rem, 4.2vw, var(--t4)); line-height: 1.08; max-width: 22ch; }
.h2--lines { max-width: none; }
.h2--lines > span { display: block; }
.h3 { font-size: var(--t1); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.h3--lg { font-size: clamp(1.7rem, 3.4vw, var(--t3)); line-height: 1.1; margin-bottom: var(--s4); }
.lede { font-size: var(--t1); line-height: 1.45; color: var(--fg-strong); max-width: 34ch; }
.prose { max-width: 62ch; }
.prose p, .pillar p, .offer__text p, .stage p, .faq__a p { color: var(--fg); }

/* ---------- 4. Buttons & links ----------------------------------------- */
/* charcoal pill with ground text (10.2:1); booking buttons use .pill--blush; Submit is deep sage with white (5.9:1) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0.8em 1.6em;
  background: #3B3A37; color: #f7f1ec;
  font-family: var(--f-body); font-size: var(--t0); font-weight: 700; line-height: 1.2;
  border: 0; border-radius: 999px; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 8px 28px -12px rgba(59, 58, 55, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pill:hover { background: var(--deep); transform: translateY(-1px); box-shadow: 0 12px 32px -12px rgba(46, 61, 53, 0.45); }   /* ground on deep sage 5.4:1 */
.form .pill { background: var(--deep); color: var(--white); box-shadow: 0 8px 24px -12px rgba(79, 107, 92, 0.5); }
.form .pill:hover { background: var(--head); box-shadow: 0 12px 28px -12px rgba(46, 61, 53, 0.45); }
/* every booking button ("Book Your Free Discovery Call", "Let's Chat"): blush with ink, 6.4:1 */
.pill--blush { background: var(--blush); color: var(--ink); box-shadow: 0 8px 24px -12px rgba(241, 178, 178, 0.9); }
.pill--blush:hover { background: var(--sand); box-shadow: 0 12px 28px -12px rgba(59, 58, 55, 0.35); }
.pill--sm { min-height: 40px; padding: 0.5em 1.1em; font-size: 0.95rem; box-shadow: none; }
.pill:focus-visible { outline-offset: 4px; border-radius: 999px; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; color: var(--accent); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.arrow-link span { transition: transform 0.2s ease; }
.arrow-link:hover span { transform: translateX(4px); }

/* ---------- 5. Top bar -------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.bar.is-scrolled, body.menu-open .bar {
  background: rgba(247, 241, 236, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--wash);
}
.bar__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 14px var(--gutter);
  min-height: var(--bar-h); display: flex; align-items: center; gap: var(--s4);
}
.bar__brand {
  display: inline-flex; align-items: center; gap: 12px; margin-right: auto;
  color: var(--fg-strong); text-decoration: none;
  font-family: var(--f-display); font-weight: 650; font-size: 1.15rem; letter-spacing: -0.01em;
}
.bar__brand img { width: 44px; height: auto; }
.bar__nav { display: none; gap: var(--s3); }
.bar__nav a {
  position: relative; color: var(--fg); text-decoration: none; font-size: 1rem; padding: 6px 0;
}
.bar__nav a:hover { color: var(--fg-strong); }
.bar__nav a.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--blush);
}
.bar__cta { display: none; }
.bar__ig {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: calc(-1 * var(--s2));
  border-radius: 50%; color: var(--fg-strong); transition: background-color 0.2s ease;
}
.bar__ig:hover { background: var(--wash); }
.bar__ig:focus-visible { border-radius: 50%; }
.bar__toggle {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(59, 58, 55, 0.2);
  background: rgba(247, 241, 236, 0.55); color: var(--fg-strong); cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.bar__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease; }
.bar__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.bar__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* the bar's labels never wrap; between 960 and 1099px the spacing tightens so
   the brand, five links, Instagram and Let's Chat fit on one line */
.bar__brand span, .bar__nav a, .bar__cta { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1099px) {
  .bar__inner { gap: var(--s3); }
  .bar__nav { gap: var(--s2); }
  .bar__ig { margin-right: calc(-1 * var(--s1)); }
}
@media (min-width: 960px) {
  .bar__nav { display: flex; }
  .bar__cta, .bar__ig { display: inline-flex; }
  .bar__toggle { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: linear-gradient(180deg, var(--ground) 0%, var(--ground) 55%, var(--wash) 100%);
  padding: calc(var(--bar-h) + 20px) var(--gutter) var(--s6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: block;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  color: var(--fg-strong); text-decoration: none;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em;
}
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.menu__ig { color: var(--fg); }
@media (min-width: 960px) { .menu { display: none !important; } }

/* ---------- 6. Hero ----------------------------------------------------- */
/* the hero sits on the ground with dark ink; the black and white photo is a
   rounded panel beside the headline (16:9 on phones, 16:10 on desktop)
   instead of a full-bleed band */
.hero {
  position: relative; background: var(--ground);
  padding: calc(var(--bar-h) + var(--s8)) 0 var(--s8);
  --accent: var(--accent-lg);  /* "Starts Here.": 5.2:1 on ground */
}
.hero__grid { row-gap: var(--s6); }
.hero__title {
  font-size: clamp(3.4rem, 8.6vw, var(--t7));
  font-weight: 700; line-height: 0.96; letter-spacing: -0.035em;
  color: var(--head);
}
.hero__title span { color: var(--accent); display: inline-block; }
.hero__media {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--wash);
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);        /* the photo is already black and white; this just guarantees it */
}
.hero__sub { font-size: var(--t1); line-height: 1.5; color: var(--fg-strong); max-width: 36ch; margin: 0; }
.hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.hero__tagline { color: var(--fg-muted); font-size: 1rem; margin: 0; }
@media (min-width: 960px) {
  .hero { padding-top: calc(var(--bar-h) + var(--s6)); }
  .hero__title { grid-column: 1 / span 6; align-self: center; }
  /* the photo is a wider 16:10 crop that reaches 5/8 of a column left (into
     the gap beside the headline; it clears the headline down to 960px) and to
     16px from the window edge on the right, at most 64px past the content
     edge on very wide screens. The button and tagline line up under it and sit
     at the bottom of the row, the tagline level with the paragraph's last line. */
  .hero__media, .hero__act { margin-left: calc(-1 * (100% + var(--col-gap)) * 5 / 32); }
  .hero__media {
    grid-column: 7 / span 4; aspect-ratio: 16 / 10;
    margin-right: calc(16px - var(--gutter) - min(64px, max(0px, (100vw - var(--wrap)) / 2)));
  }
  .hero__media img { object-position: 50% 45%; }
  .hero__sub { grid-column: 1 / span 6; align-self: end; padding-right: calc((100% + var(--col-gap)) * 5 / 48); }   /* clears the shifted button column */
  .hero__act { grid-column: 7 / span 4; align-self: end; }
}
/* Kate's name on its own line, then the three credentials flowing after it,
   each led by a small blush dot, so a narrower screen wraps them cleanly
   instead of forcing a lopsided grid. Wide screens: one row, spread out. */
.creds {
  list-style: none; margin: var(--s8) 0 0; padding: var(--s3) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4);
  border-top: 1px solid var(--line);
  color: var(--fg-muted); font-size: 1rem;
}
.creds li:first-child { flex-basis: 100%; }
.creds li + li { white-space: nowrap; }
.creds li + li::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.6em;
  border-radius: 50%; background: var(--blush); vertical-align: 0.15em;
}
.creds strong { color: var(--fg-strong); font-family: var(--f-display); font-weight: 650; font-size: var(--t1); letter-spacing: -0.01em; }
@media (min-width: 1100px) {
  .creds { flex-wrap: nowrap; justify-content: space-between; }
  .creds li:first-child { flex-basis: auto; }
  .creds li + li::before { display: none; }
}

/* ---------- 7. Quote band ---------------------------------------------- */
.quote-band {
  background: var(--ground);
  padding: var(--s12) 0;
}
.quote-band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.quote-band__fig { max-width: 52rem; }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p {
  font-family: var(--f-display); font-weight: 450; font-size: clamp(1.5rem, 3.2vw, var(--t3));
  line-height: 1.22; letter-spacing: -0.015em; color: var(--fg-strong); text-wrap: balance;
}
.quote-band figcaption { margin-top: var(--s3); font-size: clamp(1.125rem, 1.8vw, var(--t1)); line-height: 1.4; color: var(--fg-muted); }
.quote-band__close {
  margin-top: var(--s8); font-size: clamp(1.45rem, 3vw, var(--t2)); line-height: 1.3; color: var(--fg-strong);
  padding: var(--s3) var(--s4); border-radius: var(--r-lg); display: inline-block;
  background: var(--wash); text-wrap: balance;
}

/* ---------- 8. Sections (shared) --------------------------------------- */
.sec { padding: var(--s12) 0; }
@media (min-width: 960px) { .sec { padding: 7rem 0; } }

/* rounded photo frame; the two About photos of Kate are shown in color */
.tint { border-radius: var(--r); overflow: hidden; background: var(--surface); }
.tint img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 9. About --------------------------------------------------- */
.sec--about { background: var(--ground); }
.about__intro { align-items: center; }
.about__photo { aspect-ratio: 4 / 5; max-width: 440px; }
.about__roles { color: var(--fg-muted); font-size: 1.05rem; max-width: 46ch; margin-bottom: var(--s4); }
@media (min-width: 960px) {
  .about__photo { grid-column: 1 / span 4; max-width: none; }
  .about__text { grid-column: 6 / span 5; }
}

.pillars {
  margin-top: var(--s12);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap);
}
@media (min-width: 960px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar {
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s4) var(--s4) var(--s6);
  font-size: 1.0625rem;
}
.pillar__n { display: block; font-family: var(--f-mono); font-size: var(--t-1); color: var(--accent); margin-bottom: var(--s3); }

.about__proof { margin-top: var(--s12); align-items: center; }
.about__family { aspect-ratio: 5 / 6; max-width: 360px; }
.about__badge { display: flex; align-items: center; gap: var(--s3); }
.badge-disc {
  flex: none; width: 132px; height: 132px; border-radius: 50%;
  background: var(--ground); display: grid; place-items: center; padding: 14px;
}
.about__badge-text { color: var(--fg-muted); font-size: 1rem; max-width: 22ch; margin: 0; }
.about__close { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.about__close .lede { margin: 0; }
@media (min-width: 960px) {
  .about__family { grid-column: 1 / span 3; max-width: none; }
  .about__badge { grid-column: 4 / span 3; flex-direction: column; align-items: flex-start; }
  .about__close { grid-column: 7 / span 4; }
}

/* ---------- 10. Podcast ------------------------------------------------ */
.sec--podcast { background: var(--wash); }
.sec--podcast .video__frame { background: var(--ground); }
.videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--col-gap); margin-top: var(--s6); }
@media (min-width: 800px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* click-to-play: a local thumbnail that links to YouTube; js/site.js swaps in the player on click */
.video__play { position: absolute; inset: 0; display: block; }
.video__play img { width: 100%; height: 100%; object-fit: cover; }
.video__play-mark {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: rgba(46, 61, 53, 0.78); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.video__play-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--white);
}
.video__play:hover .video__play-mark, .video__play:focus-visible .video__play-mark { background: var(--deep); transform: scale(1.06); }
.video__play:focus-visible { outline-offset: -4px; border-radius: var(--r); }
.video__meta { margin: var(--s2) 0 var(--s1); font-family: var(--f-mono); font-size: var(--t-1); color: var(--fg-muted); }
.video__title { font-size: var(--t1); font-weight: 600; line-height: 1.25; }
.video__ref { margin-top: var(--s6); color: var(--fg-muted); font-size: 1rem; }

/* ---------- 11. Services ----------------------------------------------- */
.sec--services { background: var(--ground); }
.services__head { margin-bottom: var(--s8); }
.offers { display: flex; flex-direction: column; gap: var(--col-gap); }
.offer {
  background: var(--wash); border-radius: var(--r-lg);
  padding: var(--s3); row-gap: var(--s4);
}
@media (min-width: 600px) { .offer { padding: var(--s4); } }
@media (min-width: 960px) {
  .offer { padding: var(--s6); }
  .offer__head { grid-column: 1 / span 4; position: sticky; top: 104px; align-self: start; }
  .offer__text { grid-column: 5 / span 6; }
}
.offer--glow {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(203, 133, 90, 0.2), rgba(203, 133, 90, 0) 55%),
    var(--wash);
}
.offer__title { font-size: clamp(1.7rem, 3vw, var(--t3)); font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.offer__price {
  display: inline-block; font-family: var(--f-mono); font-size: 1rem; color: var(--ink);
  background: var(--ground); border-radius: 999px; padding: 6px 14px; margin-bottom: var(--s3);
}
.offer__note { color: var(--fg-muted); font-size: 0.98rem; }
.offer__head { display: flex; flex-direction: column; align-items: flex-start; }
.offer__head .arrow-link { margin-top: var(--s1); }
.offer__text { max-width: 64ch; }

/* ---------- 12. Stages ------------------------------------------------- */
.sec--stages { background: var(--wash); }
.stages {
  list-style: none; margin: var(--s8) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--col-gap);
  position: relative;
}
.stage { position: relative; padding-left: var(--s6); }
.stage::before {           /* the age track, vertical on phones */
  content: ""; position: absolute; left: 7px; top: 12px; bottom: calc(-1 * var(--s6));
  width: 2px; background: linear-gradient(180deg, rgba(241, 178, 178, 0.7), rgba(128, 157, 139, 0.6));
}
.stage:last-child::before { bottom: 0; background: linear-gradient(180deg, rgba(128, 157, 139, 0.6), rgba(128, 157, 139, 0)); }
.stage::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--wash); border: 2px solid var(--blush);
}
.stage__age { font-family: var(--f-mono); font-size: var(--t-1); color: var(--accent); margin-bottom: var(--s1); }
.stage__title { font-size: var(--t2); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.stage p { font-size: 1.0625rem; }
@media (min-width: 960px) {
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage { padding-left: 0; padding-top: var(--s6); }
  .stage::before { left: 16px; right: calc(-1 * var(--col-gap)); top: 7px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, rgba(241, 178, 178, 0.7), rgba(128, 157, 139, 0.6)); }
  .stage:last-child::before { right: 0; background: linear-gradient(90deg, rgba(128, 157, 139, 0.6), rgba(128, 157, 139, 0)); }
  .stage::after { top: 0; }
}

/* ---------- 13. Testimonials ------------------------------------------- */
.sec--voices {
  background: var(--ground);
  padding-bottom: var(--s8);
}
.voices { max-width: 60rem; }
.voices__rotator { display: grid; }
.voice {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.voice.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.voice p {
  font-family: var(--f-display); font-weight: 550; font-size: clamp(1.9rem, 4.6vw, var(--t5));
  line-height: 1.08; letter-spacing: -0.025em; color: var(--fg-strong); text-wrap: balance;
}
.voice footer { margin-top: var(--s3); font-family: var(--f-mono); font-size: 1rem; color: var(--ink); }
.voices__controls { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s6); }
.voices__step {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(59, 58, 55, 0.3); background: transparent; color: var(--fg-strong); font-size: 1.2rem;
}
.voices__step:hover { background: var(--wash); }
.voices__dots { display: flex; gap: 4px; }
.voices__dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
}
.voices__dots button::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(59, 58, 55, 0.4);
}
.voices__dots button[aria-current="true"]::before { background: var(--blush); box-shadow: none; }
.voices__all { margin-top: var(--s6); }

/* ---------- 14. Dawn: midnight brightens into the ground ---------------- */
.dawn {
  position: relative;
  background: linear-gradient(180deg, var(--ground) 0%, var(--wash) 30%, var(--blush-wash) 60%, var(--ground) 85%);
  padding-top: clamp(48px, 9vw, 128px);
}
.dawn__media { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.dawn__media img {
  /* the photo's own 3:2 frame, so nobody is cropped; short fades only at the very edges */
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 94%, transparent 100%);
}

/* ---------- 15. Contact + FAQ on the ground ---------------------------- */
.sec--morning { background: var(--ground); color: var(--fg); padding-top: var(--s8); }
.morning__head { display: flex; flex-direction: column; align-items: flex-start; }
.morning__head .lede { margin-bottom: var(--s4); }
.steps {
  list-style: none; margin: var(--s12) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap);
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { background: var(--white); border-radius: var(--r-lg); padding: var(--s4); box-shadow: 0 1px 0 rgba(59, 58, 55, 0.06); }
.step__n {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t5); line-height: 0.9;
  color: var(--deep); letter-spacing: -0.04em; margin-bottom: var(--s3);   /* 4.6:1 on white */
}
.step__title { font-size: var(--t1); font-weight: 650; line-height: 1.2; margin-bottom: var(--s2); }
.step p { color: var(--ink); font-size: 1.0625rem; }

.morning__form { margin-top: var(--s12); align-items: start; }
.morning__photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1; max-width: 460px; }
.morning__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .morning__form-col { grid-column: 1 / span 6; }
  .morning__photo { grid-column: 7 / span 4; max-width: none; aspect-ratio: 4 / 5; margin-top: var(--s8); }
}

.form { display: flex; flex-direction: column; gap: var(--s3); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 600px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 1rem; color: var(--ink); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--white); border: 1.5px solid rgba(59, 58, 55, 0.3); border-radius: 12px;
  padding: 12px 14px; min-height: 52px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.form .pill { align-self: flex-start; }
.form__botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .pill:disabled { opacity: 0.6; cursor: progress; transform: none; }
.form__status {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--wash); color: var(--ink); font-weight: 600;
}
.form__status.is-error { background: var(--blush-wash); }

.faqs { margin-top: var(--s16); }
.faqs__list { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s6); max-width: 60rem; }
.faq { background: var(--white); border-radius: var(--r); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--s3) calc(var(--s3) + 44px) var(--s3) var(--s3);
  font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--ink);
  border-radius: var(--r);
}
.faq summary::-webkit-details-marker { display: none; }
/* the plus and minus are drawn as two bars rather than "+" and "-" glyphs,
   which sit off-centre in the font; the bars are exactly centred in the circle */
.faq summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background:
    linear-gradient(var(--white), var(--white)) center / 12px 2px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 2px 12px no-repeat,
    var(--deep);
}
.faq[open] summary::after {
  background: linear-gradient(var(--white), var(--white)) center / 12px 2px no-repeat, var(--deep);
}
.faq__a { padding: 0 var(--s3) var(--s3); max-width: 68ch; }
.faq__a p { color: var(--ink); }

/* ---------- 16. Footer ------------------------------------------------- */
.foot { background: var(--wash); color: var(--fg); padding: var(--s8) 0 var(--s6); }
.foot__inner { display: flex; flex-direction: column; gap: var(--s4); }
.foot__logo img { width: 180px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-bottom: var(--s3); }
.foot__nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__legal { color: var(--ink); font-size: 0.95rem; }
@media (min-width: 900px) {
  .foot__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s8); }
  .foot__side { max-width: 640px; }
}

/* ---------- 17. Reveal ------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .voice, .voice.is-active { transition: none; transform: none; }
  .pill, .arrow-link span, .video__play-mark { transition: none; }
}

/* ---------- 18. Testimonials page -------------------------------------- */
/* one centered reading column: quotes on lifted panels, grouped by age,
   with two black and white family photos between the groups */
.tpage { padding-top: calc(var(--bar-h) + var(--s8)); }
.tpage__wrap { max-width: calc(54rem + 2 * var(--gutter)); }
.tpage__head { margin-bottom: var(--s8); }
.tpage__head .h2 span { color: var(--accent-lg); }
.tpage__group { margin: var(--s12) 0 var(--s4); }
.tpage__head + .tpage__group { margin-top: 0; }
.tcard {
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s4) var(--s3); margin-bottom: var(--s3);
}
@media (min-width: 600px) { .tcard { padding: var(--s6) var(--s6) var(--s4); } }
.tcard__text p { font-size: 1.0625rem; color: var(--fg); }
.tcard__cite { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 1rem; color: var(--fg); }
.tcard__cite b { font-family: var(--f-display); font-weight: 650; color: var(--head); }
.tpage__photo { margin: var(--s8) auto 0; max-width: 34rem; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.tpage__photo img { width: 100%; height: auto; filter: grayscale(1); }
.tpage__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s4); margin-top: var(--s6); }
.tpage__cta--end { margin-top: var(--s12); }

/* ---------- 19. Not found page (404.html) ------------------------------ */
/* the testimonials page's column, with the heading, one line and the way home */
.nf { min-height: 72vh; }
.nf .h2 span { color: var(--accent-lg); }
.nf__text { font-size: var(--t1); line-height: 1.5; color: var(--fg-strong); max-width: 36ch; }
.nf__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s6); }