/* ============================================================
   ROOTS TO RUBIES — "Work With Us" (CCC program) page
   program.css — page-specific layout on top of the shared system
   ============================================================ */

/* back-to-home link in the nav slot */
.practice-card h3{ font-weight:400; }
.program-incl h2{ letter-spacing:-1.3px; }
.subnav-back{
  font-family:var(--font-ui); font-size:.8125rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:color .3s var(--ease-soft);
}
.subnav-back svg{ transition:transform .3s var(--ease-soft); flex:none; transform:translateY(.5px); }
.subnav-back:hover{ color:var(--ruby); }
.subnav-back:hover svg{ transform:translate(-3px, .5px); }

/* ---------------- WHY GUIDED (stakes strip) ---------------- */
.stakes-section{ background:var(--paper); }
.stakes-inner{ max-width:60ch; margin-inline:auto; text-align:center; }
.stakes-inner .eyebrow{ margin-bottom:1.5rem; margin-inline:auto; }
.stakes-inner h2{ margin-bottom:1.4rem; }
.stakes-inner h2 em{ color:var(--ruby); }
.stakes-inner p{ color:var(--ink-soft); margin-inline:auto; }

/* ---------------- HOW IT WORKS (3 steps) ---------------- */
/* reuses .practice-head / .practice-grid / .practice-card from the system.
   TONE: flat --paper, matching the .stakes-section above and the top of the
   .incl-section gradient below — so the run reads as one continuous calm field
   with no seam. (See the section-rhythm rule in the design system.) */
.steps-section{ background:linear-gradient(var(--paper-deep), var(--paper)); }

/* hero sits a little shorter than the homepage hero */
.program-hero{ min-height:min(92svh, 880px); align-items:center; background:var(--feat-bg-2); }
.program-hero .hero-inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2.5rem, 6vw, 6rem); align-items:center; }
.program-hero .hero-figure{ position:relative; width:100%; max-width:420px; justify-self:end; }
.program-hero .hero-figure .arch{
  position:relative; overflow:hidden; aspect-ratio:4 / 4.7;
  border-radius:999px 999px var(--radius-card) var(--radius-card);
  box-shadow:0 44px 90px -46px #000;
}
.program-hero .hero-figure .arch img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) brightness(.9); }
.program-hero .arch-ring{
  position:absolute; inset:-14px; pointer-events:none;
  border:1px solid color-mix(in oklab, var(--feat-gold) 38%, transparent);
  border-radius:999px 999px calc(var(--radius-card) + 14px) calc(var(--radius-card) + 14px);
}
.hero-note{ margin-top:1.5rem; font-family:var(--font-ui); font-size:.8125rem; letter-spacing:.03em; color:color-mix(in oklab, var(--feat-soft) 78%, transparent); }
@media (max-width: 900px){
  .program-hero .hero-inner{ grid-template-columns:1fr; }
  .program-hero .hero-figure{ display:none; }
}

/* steps grid — unified with the Sleep Reset "how it works" rows */
.practice-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0 clamp(1.5rem, 3.5vw, 3.25rem); border-top:1px solid var(--rule); }
.practice-card{ padding:clamp(1.7rem, 3vw, 2.5rem) clamp(.2rem, .8vw, .9rem); border-bottom:1px solid var(--rule); }
.step-top{ display:flex; align-items:center; gap:1.1rem; margin-bottom:.9rem; }
.step-n{
  font-family:var(--font-display); font-weight:300; font-variation-settings:"opsz" 144;
  font-size:clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); line-height:1;
  color:color-mix(in oklab, var(--ruby) 42%, var(--paper-deep));
  font-variant-numeric:tabular-nums; transition:color .45s var(--ease-soft);
}
.practice-card:hover .step-n{ color:var(--ruby); }
.practice-card .glyph{ width:44px; height:44px; color:var(--ruby); flex:none; }
.practice-card .glyph svg{ width:100%; height:100%; }
.step-word{ display:block; font-family:var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.9rem; }
.practice-card h3{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-bottom:.7rem; }
.practice-card p{ color:var(--ink-soft); font-size:.9844rem; line-height:1.62; max-width:42ch; }
@media (max-width: 860px){ .practice-grid{ grid-template-columns:1fr; } }

/* ---------------- WHAT'S INSIDE ---------------- */
.incl-section{ background:linear-gradient(var(--paper), var(--paper-deep)); }
.program-incl{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2.5rem, 6vw, 6rem); align-items:start; }
.program-incl .col-head{ position:sticky; top:118px; }
.program-incl .col-head .eyebrow{ margin-bottom:1.6rem; }
.program-incl .col-head h2{ margin-bottom:1.4rem; }
.program-incl .col-head p{ color:var(--ink-soft); }
.incl-list{ list-style:none; display:block; border-top:1px solid var(--rule); }
.incl-item{ display:grid; grid-template-columns:auto 1fr; gap:1.6rem; padding:1.7rem 0; border-bottom:1px solid var(--rule); align-items:start; }
.incl-item .n{ font-family:var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--ruby); padding-top:.45rem; font-variant-numeric:tabular-nums; }
.incl-item h3{ font-size:clamp(1.2rem, 1.1rem + .5vw, 1.45rem); margin-bottom:.5rem; }
.incl-item p{ color:var(--ink-soft); font-size:1.0313rem; max-width:48ch; }
@media (max-width: 900px){
  .program-incl{ grid-template-columns:1fr; }
  .program-incl .col-head{ position:static; }
}

/* ---------------- 1:1 COACHING (premium, dark) ---------------- */
.coaching-section{
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in oklab, var(--feat-gold) 16%, transparent), transparent 55%),
    var(--feat-bg);
  color:var(--feat-ink); position:relative; overflow:hidden;
}
.coaching-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center; }
.coaching-body .eyebrow{ margin-bottom:1.6rem; }
.coaching-body h2{ color:var(--feat-ink); margin-bottom:1.5rem; max-width:16ch; }
.coaching-body h2 em{ color:var(--feat-gold); }
.coaching-body p{ color:var(--feat-soft); margin-bottom:1.3rem; }
.coaching-body p strong{ color:var(--feat-ink); font-weight:500; }
.coaching-meta{ font-family:var(--font-ui); font-size:.8125rem; letter-spacing:.04em; color:color-mix(in oklab, var(--feat-soft) 80%, transparent); margin:1.8rem 0 2.2rem; line-height:1.7; }
.coaching-figure{ position:relative; }
.coaching-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:calc(var(--radius-card) + 6px); filter:saturate(.9) brightness(.92); box-shadow:0 44px 90px -46px #000; }
.coaching-figure .ring{ position:absolute; inset:-14px; border:1px solid color-mix(in oklab, var(--feat-gold) 42%, transparent); border-radius:calc(var(--radius-card) + 20px); pointer-events:none; }
.coaching-figure figcaption{ margin-top:1rem; font-family:var(--font-ui); font-size:.8125rem; color:color-mix(in oklab, var(--feat-soft) 85%, transparent); letter-spacing:.04em; }
@media (max-width: 900px){
  .coaching-grid{ grid-template-columns:1fr; }
  .coaching-figure{ order:-1; max-width:420px; }
}

/* ---------------- THE FORK (two assessments) ---------------- */
.fork-head{ text-align:center; max-width:56ch; margin-inline:auto; margin-bottom:clamp(3rem, 7vw, 4.5rem); }
.fork-head .eyebrow{ margin-bottom:1.6rem; }
.fork-note{ margin-top:clamp(2rem, 4vw, 2.75rem); text-align:center; font-family:var(--font-ui); font-size:.875rem; color:var(--ink-soft); letter-spacing:.02em; }
.fork-note strong{ color:var(--ruby); font-weight:600; }
/* premium ink card reads on a light section here */
.fork-section .path-card--ink{ color:var(--feat-ink); }

/* ---------------- THE EIGHT SIGNALS (wheel) ----------------
   The wheel IS the section. Copy is trim above and below it.
   Motion is asymmetric on purpose: a signal is taken quickly,
   released slowly, so the noise creeps back rather than snaps. */
.sw-section{ background:linear-gradient(var(--paper), var(--paper-deep)); position:relative; overflow:hidden;
  padding-block:clamp(4.5rem, 10vw, 8rem); }
/* the hero's dotted route continues into this section and arrives at the wheel */
.sw-route{ position:absolute; left:0; right:0; top:0; pointer-events:none; z-index:0; }
.sw-route svg{ width:100%; height:auto; display:block; }
.sw-route path{ fill:none; stroke:color-mix(in oklab, var(--ruby) 34%, transparent); stroke-width:1.4;
  stroke-dasharray:2 7; stroke-linecap:round; }

.sw-wash{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 52% at 50% 56%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 72%); }
.sw-inner{ position:relative; z-index:2; display:grid; justify-items:center; text-align:center; }
.sw-inner .eyebrow{ margin-bottom:1.7rem; }
.sw-inner h2{ font-size:clamp(30px, 5.4vw, 54px); line-height:1.1;
  max-width:26ch; margin-bottom:1.4rem; }
.sw-inner h2 .sw-l1{ display:block; }
.sw-inner h2 .sw-l2{ display:block; color:var(--ruby); }
.sw-lede{ margin-top:0; margin-bottom:clamp(2.25rem, 4.5vw, 3.5rem); max-width:46ch; }

.sw-wheelwrap{ position:relative; width:100%; max-width:780px; }

/* --- the noise: one curved band pressing in on the wheel --- */
.sw-noise{ opacity:.55; transform-box:view-box; transform-origin:450px 450px;
  transition:opacity 520ms ease-in; }
html.js .sw-wheelwrap:not(.is-inview) .sw-noise,
html.js .sw-wheelwrap:not(.is-inview) .sw-noise-label{ opacity:0; }
.sw-wheelwrap.is-inview .sw-noise{ transition:opacity 1.4s var(--ease-soft) 1.1s; }
.sw-wheelwrap.is-inview .sw-noise-label{ transition:opacity 1.4s var(--ease-soft) 1.3s; }
.sw-wheelwrap.is-active .sw-noise{ transform:scale(1.03); }
@media (prefers-reduced-motion: no-preference){
  .sw-noise{ transition:opacity 520ms ease-in, transform 520ms ease-in; }
  .sw-wheelwrap.is-active .sw-noise{ transition:opacity 400ms ease-out, transform 400ms ease-out; }
}
html.js .sw-wheelwrap:not(.is-inview) .sw-hubring{ stroke-dashoffset:1; }
.sw-hubring{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease-soft); }
.sw-hubring--in{ transition-delay:.15s; }
.sw-noise text{ font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; fill:var(--ink-soft); }
.sw-noise-label{ font-family:var(--font-ui); font-size:13px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; fill:var(--gold-text); text-anchor:middle; }
.sw-wheelwrap.is-active .sw-noise{ opacity:.10; transition:opacity 400ms ease-out; }
@media (prefers-reduced-motion: no-preference){
  .sw-noise{ animation:swSpin 240s linear infinite; }
  .sw-wheelwrap.is-active .sw-noise{ animation-play-state:paused; }
}
@keyframes swSpin{ to{ transform:rotate(360deg); } }

/* --- hub --- */
.sw-hubring{ fill:var(--surface); stroke:color-mix(in oklab, var(--gold) 34%, transparent); stroke-width:1; }
.sw-hubring--in{ fill:none; opacity:.6; }
@media (prefers-reduced-motion: no-preference){
  .sw-wheelwrap:not(.is-active) .sw-hub{ animation:swHubBreathe 7s var(--ease-soft) infinite; }
}
@keyframes swHubBreathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.008); } }
.sw-hub{ position:absolute; left:50%; top:50%; width:37.3%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center;
  text-align:center; padding:4%; pointer-events:none; }
.sw-hub-face{ grid-area:1 / 1; opacity:0; transition:opacity 300ms var(--ease-soft) 90ms; }
.sw-hub-face.is-on{ opacity:1; }
.sw-hub-head{ font-family:var(--font-display); font-weight:300; font-variation-settings:'opsz' 110;
  font-size:clamp(15px, 2.2vw, 26px); line-height:1.2; color:var(--ink); text-wrap:balance; }
.sw-hub-head em{ color:var(--ruby); }
.sw-hub-hint{ margin-top:1.1rem; font-family:var(--font-ui); font-size:.625rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:color-mix(in oklab, var(--ink-soft) 66%, transparent); }
.sw-hub-essence{ font-family:var(--font-ui); font-size:.625rem; font-weight:700; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-text); margin-bottom:.9rem; }
.sw-hub-q{ font-family:var(--font-display); font-style:italic; font-weight:300;
  font-variation-settings:'opsz' 110, 'SOFT' 60; font-size:clamp(15px, 2.2vw, 26px);
  line-height:1.22; color:var(--ruby); text-wrap:balance; }

/* --- segments --- */
.sw-hit{ fill:transparent; stroke:none; cursor:pointer; outline:none; }
.sw-slice{ pointer-events:none; outline:none; will-change:transform;
  filter:drop-shadow(0 0 0 rgba(28,26,23,0));
  transition:transform 520ms ease-in, filter 520ms ease-in; }
.sw-slice.is-on{ transition:transform 320ms cubic-bezier(.22,1,.36,1), filter 320ms cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 18px 44px rgba(28,26,23,.14)); }
.sw-wedge{ fill:var(--surface); stroke:color-mix(in oklab, var(--gold) 26%, transparent); stroke-width:.9;
  transition:fill 520ms ease-in, opacity 520ms ease-in, stroke 520ms ease-in; }
.sw-slice--alt .sw-wedge{ fill:color-mix(in oklab, var(--paper-deep) 82%, var(--surface)); }
.sw-slice.is-dim .sw-wedge{ opacity:.55; transition-duration:320ms; }
.sw-slice.is-on .sw-wedge{ fill:var(--ruby); stroke:color-mix(in oklab, var(--gold) 55%, transparent);
  transition-duration:320ms; transition-timing-function:cubic-bezier(.22,1,.36,1); }
/* the warm grade lives here, not in the source files: sepia pulls every photo
   toward the paper/gold palette, so mixed uploads still read as one series */
.sw-photo{ opacity:.10; filter:sepia(.55) saturate(.6) brightness(.96) contrast(.94);
  transition:opacity 520ms ease-in, filter 520ms ease-in; }
.sw-slice.is-on .sw-photo{ opacity:.92; filter:sepia(.42) saturate(.72) brightness(.97) contrast(.96);
  transition:opacity 400ms ease-out, filter 400ms ease-out; }
@media (prefers-reduced-motion: no-preference){
  .sw-slice.is-on .sw-photo{ animation:swSettle 3.2s var(--ease-soft) both; }
}
@keyframes swSettle{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.sw-scrim{ fill:var(--ruby); opacity:0; transition:opacity 520ms ease-in; }
.sw-slice.is-on .sw-scrim{ opacity:.62; transition:opacity 400ms ease-out; }
.sw-icon{ fill:none; stroke:#1B2418; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke 520ms ease-in; }
.sw-name{ font-family:var(--font-ui); font-size:13px; font-weight:700; letter-spacing:.14em;
  fill:var(--ink); text-rendering:geometricPrecision; transition:fill 520ms ease-in; }
.sw-essence{ font-family:var(--font-body); font-style:italic; font-size:13px; fill:#F5EFE6;
  text-rendering:geometricPrecision; opacity:0; transition:opacity 520ms ease-in; }
.sw-slice.is-on .sw-icon{ stroke:#F5EFE6; transition-duration:320ms; }
.sw-slice.is-on .sw-name{ fill:#F5EFE6; transition-duration:320ms; }
.sw-slice.is-on .sw-essence{ opacity:1; transition:opacity 400ms ease-out 60ms; }
.sw-slice.is-focus .sw-wedge{ stroke:var(--gold); stroke-width:2.4; }
.sw-slice.is-breathe .sw-wedge{ animation:swBreathe 1.8s var(--ease-soft) 1; }
@keyframes swBreathe{ 0%,100%{ fill:var(--surface); } 45%{ fill:color-mix(in oklab, var(--ruby) 14%, var(--surface)); } }

.sw-cta{ margin-top:clamp(2.25rem, 4.5vw, 3.5rem); display:grid; justify-items:center; gap:1.1rem; }
.sw-cta-fine{ font-size:1rem; line-height:1.6; color:var(--ink-soft); max-width:46ch; }

.sw-cta-fine.is-warm strong{ color:var(--ruby); font-weight:500; }
.sw-cta .btn.is-warm{ animation:swCtaWarm 1.6s var(--ease-soft) 1; }
@keyframes swCtaWarm{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-3px); } }

@media (max-width: 720px){
  .sw-section{ padding-block:clamp(3.5rem, 9vw, 5rem); }
  .sw-noise text{ font-size:24px; letter-spacing:.24em; }
  .sw-name{ font-size:17px; letter-spacing:.02em; }
  .sw-essence{ font-size:15px; }
  .sw-noise-label{ font-size:18px; }
  .sw-icon{ stroke-width:3.2; }
  .sw-hub{ width:39%; }
  .sw-hub-head, .sw-hub-q{ font-size:clamp(13px, 4vw, 26px); }
  .sw-hub-hint{ margin-top:.7rem; letter-spacing:.2em; }
  .sw-hub-essence{ margin-bottom:.55rem; letter-spacing:.24em; }
  .sw-cta .btn{ width:100%; max-width:22rem; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .sw-cta .btn.is-warm{ animation:none; }
}
@media (prefers-reduced-motion: reduce){
  .sw-slice, .sw-wedge, .sw-photo, .sw-scrim, .sw-icon, .sw-name, .sw-essence,
  .sw-hub-face, .sw-noise{ transition-duration:.01ms !important; transition-delay:0ms !important; }
  .sw-slice.is-breathe .sw-wedge{ animation:none; }
  html.js .sw-wheelwrap:not(.is-inview) .sw-noise,
  html.js .sw-wheelwrap:not(.is-inview) .sw-noise-label{ opacity:.55; }
  html.js .sw-wheelwrap:not(.is-inview) .sw-hubring{ stroke-dashoffset:0; }
  .sw-hubring{ transition:none; }
}

/* ---------------- FOUNDERS (your guides) ---------------- */
.founders-section{
  background:radial-gradient(90% 85% at 100% 0%, color-mix(in oklab, var(--feat-gold) 14%, transparent), transparent 55%), var(--feat-bg);
  color:var(--feat-ink); position:relative; overflow:hidden;
}
.founders-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center; }
.founders-figure{ position:relative; width:100%; max-width:430px; margin:0; }
.founders-figure .arch-wrap{ position:relative; }
.founders-figure .arch{ position:relative; aspect-ratio:4 / 4.7; border-radius:999px 999px var(--radius-card) var(--radius-card); overflow:hidden; box-shadow:0 44px 90px -46px #000; }
.founders-figure .ring{ position:absolute; inset:-14px; border:1px solid color-mix(in oklab, var(--feat-gold) 40%, transparent); border-radius:999px 999px calc(var(--radius-card) + 14px) calc(var(--radius-card) + 14px); pointer-events:none; }
.founders-figure figcaption{ margin-top:1.4rem; font-family:var(--font-ui); font-size:.8125rem; letter-spacing:.05em; color:color-mix(in oklab, var(--feat-soft) 85%, transparent); text-align:center; }
.founders-body .eyebrow{ margin-bottom:1.6rem; }
.founders-body h2{ color:var(--feat-ink); margin-bottom:1.4rem; }
.founders-body h2 em{ color:var(--feat-gold); }
.founders-body > p{ color:var(--feat-soft); }
.founder-bios{ margin-top:2.4rem; display:grid; }
.fbio{ padding:1.5rem 0; border-top:1px solid color-mix(in oklab, var(--feat-soft) 24%, transparent); }
.fbio-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.fbio h3{ color:var(--feat-ink); font-size:clamp(1.3rem, 1.2rem + .5vw, 1.6rem); }
.fbio .role{ font-family:var(--font-ui); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--feat-gold); white-space:nowrap; }
.fbio p{ color:var(--feat-soft); font-size:1.0313rem; max-width:58ch; }
.founders-hand{ margin-top:2.2rem; }
.founders-hand .hand{ color:var(--feat-gold); }
@media (max-width: 900px){
  .founders-grid{ grid-template-columns:1fr; }
  .founders-figure{ max-width:380px; margin-inline:auto; }
}

/* ---------------- VOICES faces + WHAT'S INSIDE figure ---------------- */
.voice-face{ width:64px; height:64px; margin-bottom:1.6rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--rule); }
.voice-face image-slot::part(empty){ font-size:0; }
.incl-figure{ margin:2.8rem 0 0; position:relative; max-width:440px; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-card); }
.incl-figure img{ width:100%; height:calc(100% + 70px); object-fit:cover; margin-top:-35px; filter:saturate(.85) brightness(.98); }
.incl-figure figcaption{
  position:absolute; right:clamp(.9rem, 3vw, 1.5rem); bottom:1rem;
  font-family:var(--font-hand); font-style:var(--hand-style); font-weight:var(--hand-weight);
  font-size:clamp(1.3rem, 1.15rem + .6vw, 1.7rem); line-height:1.3; letter-spacing:.005em;
  color:#F6F1E7; text-shadow:0 2px 24px rgba(0,0,0,.55); max-width:16ch; text-align:right;
}

/* ---------------- MAP arrival bloom ---------------- */
.stakes--map .map-ring, .stakes--map .map-end{ opacity:0; transition:opacity .7s var(--ease-soft); }
.stakes--map.is-arrived .map-end{ opacity:1; }
.stakes--map.is-arrived .map-ring{ opacity:1; transform-box:fill-box; transform-origin:center; animation:mapPulse 2.8s var(--ease-soft) infinite; }
@keyframes mapPulse{ 0%{ transform:scale(.55); opacity:.9; } 70%{ transform:scale(1.3); opacity:0; } 100%{ transform:scale(1.3); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .stakes--map .map-ring, .stakes--map .map-end{ opacity:1; animation:none; }
}