/* =============================================================================
   CTFY · Neuroscience of Change (/programs/leadership/, PRD pages/25) · programme layer
   Builds on css/site.css and css/modules.css. The .prog-* rules are copied from the 28-Day Reset template
   (css/pages/28-day-reset.css §1–§4, §6) and keep their class names; .ldr-* / .cyc* are page-only.

   PAGE-ONLY · the change cycle (PRD 25 §4.3): an SVG ring with four nodes at 12 / 3 / 6 / 9 o'clock
   (Understand, Regulate, Practise, Integrate), drawn clockwise by stroke-dashoffset on measured paths
   (pathLength=1). Nodes pop by transform/opacity, the matching step row lights .25 → 1, and a closing arc
   returns to the start. Regulate (the Theta Chamber step) carries a stronger bloom that breathes afterwards.
   Plays once on view (≈4.8 s). Default CSS is the finished, closed loop with every row lit, so reduced motion,
   the G4 toggle and no-JS show the full cycle. The SVG is aria-hidden; the <ol> carries the text.
   ============================================================================= */

#why,#how,#formats,#start{scroll-margin-top:96px}

/* ---------- §1 · Programme hero ---------- */
.prog-hero .hero__main{max-width:640px}
.prog-hero .crumbs{margin-bottom:24px}
.prog-hero__portrait picture{display:contents}
.prog-facts{margin-top:28px}
.prog-facts .chip{min-height:40px;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.prog-facts .chip:hover{background:rgba(22,26,38,.62);border-color:rgba(255,255,255,.22)}}
@media (pointer:coarse){.prog-facts .chip{min-height:44px}}
@media (max-width:767px){.prog-facts{margin-top:22px;gap:8px}}
.hero__lead a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}

/* ---------- §2 · Statement (M02) ---------- */
.prog-statement{padding-block:var(--section-y-tight)}
.prog-statement .m-lightup__quote{max-width:25ch}

/* ---------- §3 · Why + feel list ---------- */
.prog-why{padding-top:var(--section-y-tight)}
.prog-why__aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.prog-why__detail{aspect-ratio:16/10;border-radius:var(--r-l)}
.prog-included .m-feel__list li{align-items:center}
.prog-included .m-feel__list .icon{transform:none}
@media (min-width:1024px){.prog-why__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (max-width:1023px){.prog-why .m-split__media{order:0}}

/* ---------- §6 · Bridge ---------- */
.prog-bridge .m-bridge__line{max-width:24ch}

/* ---------- PAGE-ONLY · How it works: the change cycle ---------- */
.ldr-how__head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.ldr-how__head .t-lead{max-width:56ch}
.cyc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:center}
.cyc__ring{position:relative;isolation:isolate;width:min(520px,100%);aspect-ratio:1;margin-inline:auto}
.cyc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cyc__orbit{fill:none;stroke:var(--line-2);stroke-width:1.5}
.cyc__arc{fill:none;stroke:var(--theta-400);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cyc__node{transform-box:fill-box;transform-origin:center}
.cyc__halo{fill:rgba(62,85,245,.22)}
.cyc__dot{fill:var(--bg-1);stroke:var(--theta-300);stroke-width:2}
.cyc__node text{fill:var(--text-1);font:600 17px/1 var(--font-sans);pointer-events:none}
.cyc__node .cyc__label{fill:var(--text-2);font:500 19px/1 var(--font-sans);letter-spacing:.02em}
.cyc__node--chamber .cyc__dot{fill:var(--theta-500);stroke:var(--theta-300)}
.cyc__bloom{transform-box:fill-box;transform-origin:center}
.cyc__core{position:absolute;z-index:-1;inset:30%;display:grid;place-items:center;color:var(--theta-300)}
.cyc__core .icon{width:28px;height:28px}
.cyc__corebloom{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(62,85,245,.34),rgba(62,85,245,.12) 55%,transparent)}
/* steps list: number dot, heading, body; a hairline links the dots */
.cyc__steps{position:relative;display:grid;gap:clamp(22px,2.6vw,32px);margin:0;padding:0;list-style:none}
.cyc__steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,rgba(107,125,255,.6),rgba(107,125,255,.18))}
.cyc__step{position:relative;display:grid;gap:8px;padding-left:64px;min-width:0}
.cyc__step h3{color:var(--fg-1)}
.cyc__step p{max-width:42ch;color:var(--fg-2)}
.cyc__step a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}
.cyc__n{position:absolute;left:0;top:-4px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-1);border:1px solid var(--theta-400);color:var(--text-1);font:600 .9375rem/1 var(--font-sans)}
.cyc__step:nth-child(2) .cyc__n{background:var(--theta-500);box-shadow:0 0 18px var(--theta-glow)}
@media (max-width:1023px){
  .cyc{grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,7vw,48px)}
  .cyc__ring{width:min(78vw,520px)}
}
@media (max-width:599px){
  .cyc__node .cyc__label{display:none}
  .cyc__node text{font-size:22px}
  .cyc__arc{stroke-width:3.5}
  .cyc__core .icon{width:22px;height:22px}
}

/* sequence (≈4.8 s): arc 1 (0.9 s) → node 2 + row 2 → arc 2 → node 3 + row 3 → arc 3 → node 4 + row 4 → closing arc (1.2 s) */
.js .cyc.is-pending{opacity:1;transform:none}
.js .cyc.is-pending .cyc__arc{stroke-dashoffset:1}
.js .cyc.is-pending .cyc__node{opacity:0;transform:scale(.3)}
.js .cyc.is-pending .cyc__node:first-of-type{opacity:1;transform:none}
.js .cyc.is-pending .cyc__step{opacity:.72}
.js .cyc.is-pending .cyc__corebloom,.js .cyc.is-pending .cyc__core .icon{opacity:0}
.cyc.is-in .cyc__arc{transition:stroke-dashoffset 900ms linear calc(300ms + var(--i) * 900ms)}
.cyc.is-in .cyc__arc--close{transition-duration:1200ms}
.cyc.is-in .cyc__node{transition:opacity 260ms var(--ease-out) calc(300ms + var(--i) * 900ms),transform 460ms var(--ease-pop) calc(300ms + var(--i) * 900ms)}
.cyc.is-in .cyc__step{transition:opacity 600ms var(--ease-out) calc(300ms + var(--i) * 900ms)}
.cyc.is-in .cyc__corebloom,.cyc.is-in .cyc__core .icon{transition:opacity 1200ms var(--ease-out) 200ms}
@keyframes cyc-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cyc.is-in .cyc__bloom{animation:cyc-breath var(--breath,10s) var(--ease-in-out) 4.6s infinite}

/* ---------- PAGE-ONLY · Two formats ---------- */
.ldr-formats .m-split__copy p strong{color:var(--ink-1);font-weight:600}
.ldr-formats .m-split__ctas{margin-top:clamp(20px,2.4vw,32px)}

/* ---------- Calm states ---------- */
[data-motion="off"] .cyc *,[data-motion="off"] .prog-rhythm::before{transition:none!important}
[data-motion="off"] .cyc__bloom{animation:none!important}
@media (prefers-reduced-motion:reduce){.cyc *{transition:none!important}.cyc__bloom{animation:none!important}}