/* Homepage sections. Loaded after site.css by src/content/approved-pages/index.html. */

/* No paragraph ends on a single short word, as on the inner pages (pages.css); widths vary too much to hand-break lines */
main p, main li, main dd, main blockquote { text-wrap: pretty; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: min(calc(100vh - var(--header-h)), 58rem);
  min-height: min(calc(100svh - var(--header-h)), 58rem);
  background: linear-gradient(165deg, var(--ivory) 0%, #FBF0E6 48%, var(--blush) 100%);
}

.hero-photo { position: relative; overflow: hidden; background: #D7B39F; }
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* The text block sits centered in its half, with equal room on both sides at every width */
.hero-copy {
  --pad: clamp(3.5rem, 14.55vw - 5.8rem, 7.5rem); /* 56px at 1024 → 95px at 1292 → 120px from 1440 */
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: calc(32rem + 2 * var(--pad));
  padding: clamp(3rem, 7vh, 6rem) var(--pad);
}
.hero h1 { margin: var(--stack-label) 0 var(--stack-heading); }
.hero-lede { max-width: 29ch; font-size: var(--p1); line-height: var(--p1-lh); }
.hero-action { margin-top: var(--stack-action); }

@media (max-width: 63.99rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: 50% 12%; }
  .hero-copy { justify-self: start; max-width: 44rem; padding: 3rem var(--gutter) 4rem; }
}
@media (max-width: 47.99rem) {
  .hero-photo { aspect-ratio: 1 / 1.04; }
  .hero-photo img { object-position: 50% 16%; }
  .hero-copy { padding: 2.5rem var(--gutter) 3.5rem; }
}
/* Tablets: the words under her photo sit centered (Amber, October 2); phones keep them to the left edge */
@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  .hero-copy { justify-self: center; text-align: center; }
  .hero-lede { margin-inline: auto; }
}

/* As seen in */
/* Quiet, on the page's own ivory: the logos sit in charcoal at reduced strength under a hairline */
.press { background: var(--ivory); color: var(--charcoal); }
.press-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: var(--section-s);
  border-bottom: 1px solid var(--rule);
}
.press .eyebrow { flex: none; color: var(--muted); }
.press-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem clamp(1.75rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.press-logos img {
  width: calc(var(--w) * 1px * var(--press-scale, 1));
  filter: brightness(0);
  opacity: .62;
}

@media (max-width: 71.99rem) {
  .press-logos { max-width: 34rem; }
}
@media (min-width: 72rem) {
  .press-inner { flex-direction: row; justify-content: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
@media (max-width: 47.99rem) {
  .press-logos { --press-scale: .7; gap: 1rem 1.5rem; }
}
/* Phones: the logos run in one row that drifts slowly sideways (Amber's pick A, October 2026). The echo set closes the
   loop and is hidden from screen readers. With reduced motion, or once the visitor presses Pause (the round button at
   the band's top right; site.js), the logos hold still in two centred rows. */
.press-track { display: contents; }
.press-echo { display: none; }
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .press-track {
    display: block;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  html:not(.motion-paused) .press-logos { flex-wrap: nowrap; justify-content: flex-start; width: max-content; max-width: none; gap: 0; animation: press-drift 40s linear infinite; }
  html:not(.motion-paused) .press-logos li { flex: none; padding-right: 2.25rem; }
  html:not(.motion-paused) .press-echo { display: block; }
  .js .press:not(.is-live) .press-logos { animation-play-state: paused; }
  .press-inner { position: relative; }
  .press-motion { position: absolute; top: calc(var(--section-s) - .75rem); right: -.25rem; padding: .25rem; }
}
@media (min-width: 48rem) {
  .js .press-motion { display: none; }
}
@keyframes press-drift { to { transform: translateX(-50%); } }

/* Italic accent words, as on Squarespace */
.home-v2 h2 em {
  color: var(--pink);
  font-style: italic;
}

/* Meet Dr. Marquisha Frost: one centered note in her own voice, signed */
.meet { padding-block: var(--section-l); }
.meet-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Sized to the screen: one long line on wide desktops, two balanced lines below that */
.meet-statement { font-size: var(--h2); }
.meet-body { max-width: 44ch; margin-top: var(--stack-heading); color: var(--muted); font-size: var(--p1); line-height: var(--p1-lh); }
.meet-sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--stack-heading) 0 var(--stack-action);
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h4);
  font-style: italic;
  font-variation-settings: var(--display-settings);
  line-height: 1.2;
}
.meet-sign::before,
.meet-sign::after { content: ""; width: clamp(1.75rem, 4vw, 3rem); height: 1.5px; background: var(--pink); }

/* The work */
.work { padding-block: var(--section-l); background: var(--cream); }
.ways {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each way is centered under its icon (Marquisha, October 4) */
.way { position: relative; text-align: center; }
.way-icon { display: block; width: 8rem; height: 8rem; margin: 0 auto 1.25rem; color: var(--charcoal); }
.way-icon svg { width: 100%; height: 100%; overflow: visible; transition: transform .6s var(--ease); }
.way-icon .ln { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.way-icon .ln-thick { stroke-width: 9; }
.way-icon .ln-thin { stroke-width: 3.5; }
.way-icon .ac { fill: var(--pink); }
.way-icon .ac-dot { stroke: var(--cream); stroke-width: 10; paint-order: stroke; }
.way-icon .pop,
.way-icon .ac { transform-origin: var(--o, 0 0); }
.way:hover .way-icon svg { transform: translateY(-.3rem); }
.way h3 {
  margin-bottom: .8rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-strong);
}
.way h3 a { text-decoration: none; }
.way h3 a::after { content: ""; position: absolute; inset: -.75rem; }
.way:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.way p { color: var(--muted); font-size: var(--p2); line-height: var(--p2-lh); }
/* Pause motion for the icons' loops, at the list's right edge and clear of the cards' stretched links (the button
   itself is styled in site.css) */
.motion-row { position: relative; display: none; justify-content: flex-end; margin: clamp(2rem, 3vw, 2.75rem) -.5rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .motion-row { display: flex; }
}

@media (min-width: 48rem) {
  .ways { row-gap: 0; }
  .way { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

@media (min-width: 48rem) and (max-width: 73.99rem) {
  .ways { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .way { grid-column: span 2; }
  .way:nth-child(n + 4) { margin-top: 3.5rem; }
  .way-icon { width: 6.5rem; height: 6.5rem; }
  .way:nth-child(4) { grid-column: 2 / span 2; }
  .way:nth-child(5) { grid-column: 4 / span 2; }
}

/* Phones: one centered way after another, each with its icon above, between hairlines */
@media (max-width: 47.99rem) {
  .ways { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .way { padding-block: 1.75rem; border-top: 1px solid var(--rule-strong); }
  .way:last-child { border-bottom: 1px solid var(--rule-strong); }
  .way-icon { width: 5.25rem; height: 5.25rem; margin-bottom: 1rem; }
  .way h3 { margin-bottom: .45rem; padding-top: 0; border-top: 0; }
  .way p { max-width: 30ch; margin-inline: auto; }
}

/* Two ways in (Amber's pick, October 1: "open pair"). Its own section on the page's ivory after the cream
   five ways: two square photos with the heading under a hairline, the same treatment as the ways. No boxes. */
.paths { padding-block: var(--section-l); }
.paths-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.path { position: relative; display: flex; flex-direction: column; }
/* Each photo wears the pink frame pass as it scrolls in (.glint-frame in site.css: 4px soft-pink surround, the pass
   runs once from the tile's reveal). The span keeps the hover zoom inside the frame. (Amber, October 1 night) */
.path-photo { margin: 0; aspect-ratio: 1 / 1; }
.path-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); }
.path-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.path-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.path-copy .btn { margin-top: auto; } /* the two buttons share one line even when one line of text above them wraps */
.path-copy h3 { width: 100%; padding-top: 1.35rem; border-top: 1px solid var(--rule-strong); }
.path-copy p { margin: .55rem 0 var(--stack-action); color: var(--muted); font-size: var(--p1); line-height: var(--p1-lh); }
.path .btn::after { content: ""; position: absolute; inset: 0; } /* the whole tile is the link, so hovering it hovers the button */

@media (prefers-reduced-motion: no-preference) {
  .path-img img { transition: transform 1.2s var(--ease); }
  .path:hover .path-img img { transform: scale(1.03); }
}

/* Side by side from 720px, so an iPad mini held upright (744px) shows the two choices together rather than two photos
   almost a screen tall each, one above the other (October 2). Below 720px a button no longer fits half the width. */
@media (max-width: 44.99rem) {
  .paths-inner { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
}

/* One client's words, set simply. Since October 4 it follows the gold figures (Marquisha) and leads into the
   Collective on the same ivory. */
.voice-band { padding-block: var(--section-m); }
.voice { max-width: 72rem; text-align: center; }
.voice-mark {
  display: block;
  height: clamp(3rem, 2rem + 3vw, 4.5rem);
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(7rem, 5rem + 6vw, 10rem);
  font-style: italic;
  line-height: .9;
}
.voice blockquote p {
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h3);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.3;
  text-wrap: balance;
}
/* Where the credit doesn't fit on one line beside its dash (phones), the dash sits centered above it and the credit
   breaks into two even lines */
.voice figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-wrap: balance;
  margin-top: var(--stack-heading);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.voice figcaption::before { content: ""; width: 1.75rem; height: 2px; background: var(--pink); }

/* Stats */
/* The gold band, back by Amber's request (October 1 night) after the blush-with-gold-rule pass: charcoal type on gold */
.stats { padding-block: var(--section-m); background: var(--gold); color: var(--charcoal); }
.stats-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-block: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.stat-figure {
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-size: var(--h1);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-settings);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.stat-label { max-width: 17ch; margin: 1rem auto 0; font-size: var(--p3); font-weight: 600; line-height: 1.45; }

@media (max-width: 47.99rem) {
  .stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.75rem; column-gap: 1rem; }
}

/* Sanctuary Collective: the headline on the soft pink highlight and the soft button from the Squarespace
   screenshot, in a clean split. The copy is centered in its panel and keeps clear of the photo. */
.collective {
  --marker: #FADAE8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy photo";
}
@media (min-width: 80rem) {
  .collective { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.collective-photo { grid-area: photo; position: relative; min-height: clamp(34rem, 47vw, 54rem); overflow: hidden; }
.collective-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform-origin: 50% 60%;
}
.collective-copy {
  --pad: clamp(2rem, 5vw, 5rem);
  grid-area: copy;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: calc(28rem + 2 * var(--pad));
  padding: var(--section-l) var(--pad);
}
.collective h2 {
  max-width: 12em;
  margin: var(--stack-label) 0 var(--stack-heading) -.2em;
  line-height: 1.22;
}
.collective h2 em { color: inherit; }
.marker {  /* square, like the photo-header highlights (Amber, Round 13) */
  padding: .02em .2em .06em;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.collective-lede { max-width: 26ch; margin-bottom: var(--stack-action); font-size: var(--p1); line-height: var(--p1-lh); }


@media (max-width: 63.99rem) {
  .collective { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "copy"; }
  .collective-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .collective-copy { max-width: 44rem; padding: var(--section-m) var(--gutter) var(--section-l); justify-self: start; }
  .collective h2 { max-width: 11em; }
}
@media (max-width: 47.99rem) {
  .collective-photo { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: no-preference) {
  .ways.is-ready .way {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--n) * .12s);
  }
  .ways.is-in .way { opacity: 1; transform: none; }

  /* Icons draw themselves in, then their pink parts pop in */
  .ways.is-ready .way-icon .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
  .ways.is-ready .way-icon .pop { opacity: 0; transform: scale(.3); }
  .ways.is-ready .sun-rise { transform: translateY(96px); }
  .ways.is-in .way-icon .ln { animation: icon-draw 1.7s cubic-bezier(.45, .05, .25, 1) calc(.25s + var(--n) * .18s) both; }
  .ways.is-in .way-icon .pop { animation: icon-pop .75s cubic-bezier(.3, 1.45, .5, 1) calc(1.3s + var(--n) * .18s + var(--d, 0s)) both; }
  .ways.is-in .sun-rise { animation: sun-rise 1.9s var(--ease) calc(1.1s + var(--n) * .18s) both; }

  /* Then each keeps a small, slow life of its own */
  .ways.is-in .ac-arrow { animation: arrow-nudge 3.8s ease-in-out 3.2s infinite; }
  .ways.is-in .ac-beam { animation: beam-sweep 9s ease-in-out 3.4s infinite; }
  .ways.is-in .way-icon .ln.waves { animation: icon-draw 1.7s cubic-bezier(.45, .05, .25, 1) .43s both, waves 5s ease-in-out 3.4s infinite alternate; }
  .ways.is-in .ring-a { animation: ring-a 6s ease-in-out 3.2s infinite alternate; }
  .ways.is-in .ring-b { animation: ring-b 6s ease-in-out 3.2s infinite alternate; }
  .ways.is-in .ring-c { animation: ring-c 6s ease-in-out 3.2s infinite alternate; }
  .ways.is-in .ac-heart { animation: heartbeat 3s ease-in-out 3.6s infinite; transform-origin: 228px 252px; }
  .ways.is-in .ac-dot { animation: dot-pulse 5s ease-in-out calc(3.6s + var(--k) * .5s) infinite; }
  .ways.is-in .ac-flag { animation: flag-wave 2.6s ease-in-out 4s infinite; transform-origin: 307px 49px; }
  .ways.is-in .ac-sun { animation: sun-breathe 7s ease-in-out 4.2s infinite; }
  .ways.is-in .way-icon .ln.water { animation: icon-draw 1.7s cubic-bezier(.45, .05, .25, 1) .97s both, water 4.5s ease-in-out 4s infinite alternate; }
  .ways.is-in .way-icon .ln.water:nth-last-child(2) { animation-direction: normal, alternate-reverse; }
  .ways.is-in:not(.is-live) .way-icon * { animation-play-state: paused; }
  /* Paused (the button under the five ways; site.js), the small loops rest on their still frame; the icons still
     draw themselves in */
  .motion-paused .ways .way-icon .ac,
  .motion-paused .ways .way-icon .ring { animation-name: none; }
  .motion-paused .ways .way-icon .ln.waves,
  .motion-paused .ways .way-icon .ln.water { animation-name: icon-draw, none; }

  /* The Collective highlight sweeps in behind the headline */
  .js .collective-copy .marker { background-size: 0% 100%; transition: background-size 1.3s var(--ease) .35s; }
  .js .collective-copy.is-visible .marker { background-size: 100% 100%; }
}

@keyframes icon-draw {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
  5% { opacity: 1; }
  99.9% { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
}
@keyframes icon-pop {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: none; }
}
@keyframes sun-rise {
  from { transform: translateY(96px); }
  to { transform: none; }
}
@keyframes arrow-nudge {
  0%, 50%, 100% { transform: none; }
  25% { transform: translate(14px, -3px); }
}
/* The lighthouse beam turns: it narrows, crosses to the other side, and comes back */
@keyframes beam-sweep {
  0%, 44% { transform: none; }
  54%, 78% { transform: scaleX(-1); }
  88%, 100% { transform: none; }
}
@keyframes waves {
  from { transform: translateX(-7px); }
  to { transform: translateX(7px); }
}
@keyframes ring-a { to { transform: translateY(7px); } }
@keyframes ring-b { to { transform: translate(6px, -4px); } }
@keyframes ring-c { to { transform: translate(-6px, -4px); } }
@keyframes heartbeat {
  0%, 34%, 100% { transform: none; }
  8% { transform: scale(1.24); }
  16% { transform: scale(1); }
  24% { transform: scale(1.12); }
}
@keyframes dot-pulse {
  0%, 20%, 100% { transform: none; }
  10% { transform: scale(1.4); }
}
@keyframes flag-wave {
  0%, 100% { transform: none; }
  50% { transform: skewY(-10deg) scaleX(.86); }
}
@keyframes sun-breathe {
  0%, 100% { transform: none; }
  50% { transform: translateY(9px); }
}
@keyframes water {
  from { transform: translateX(-8px); }
  to { transform: translateX(8px); }
}