/* =============================================================================
   CTFY · Programmes overview (/programs/, PRD pages/20) · page layer
   Builds on css/site.css and css/modules.css. Chapters: H4 field hero → porcelain constellation (hero moment: a dark
   chamber stage with four programme-family nodes on SVG hairlines and the flagship beneath) → where to start (flagship,
   price ladder) → four card groups → bridge → finale.
   The constellation is a visual chooser and is aria-hidden: every programme is also a normal card in its group below,
   so with the hairlines removed the page reads as an ordered card list. Hairlines draw by stroke-dashoffset only.
   Default CSS is the finished state (no-JS, reduced motion and html[data-motion="off"] show every line drawn).
   ============================================================================= */

#programmes,#start-here,#g-courses,#g-studio,#g-companies,#g-tech,#help{scroll-margin-top:96px}

/* ---------- Constellation ---------- */
.pg-family{padding-top:clamp(72px,8vw,120px)}
.pg-orbit{--gap:clamp(56px,7vw,104px)}
.pg-orbit__grid{display:grid;grid-template-columns:minmax(0,1fr) var(--gap) minmax(0,1.7fr) var(--gap) minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:stretch}
.pg-node--a{grid-area:1/1}.pg-node--b{grid-area:2/1}.pg-node--c{grid-area:1/5}.pg-node--d{grid-area:2/5}
.pg-orbit__lines--l{grid-area:1/2/3/3}.pg-orbit__lines--r{grid-area:1/4/3/5}
.pg-stage{grid-area:1/3/3/4;position:relative;isolation:isolate;display:grid;place-items:center;min-height:380px;margin:0;overflow:hidden;border-radius:var(--r-xl);
  background:var(--bg-1);border:1px solid var(--line-1);box-shadow:0 40px 80px -40px rgba(17,19,26,.6)}
.pg-stage picture{display:contents}
.pg-stage img{position:relative;width:min(92%,540px);height:auto}
.pg-stage__bloom{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 55% at 50% 52%,rgba(62,85,245,.42),rgba(62,85,245,.12) 58%,transparent 80%);animation:pg-breathe var(--breath,8s) var(--ease-in-out) infinite}
@keyframes pg-breathe{0%,100%{opacity:.94;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.pg-orbit__lines{width:100%;height:100%;overflow:visible}
.pg-orbit__lines path{fill:none;stroke:var(--champ-600);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:0}

/* nodes: paper cards, a dot where the hairline lands */
.pg-node{position:relative;display:grid;align-content:center;gap:10px;margin-block:12px;padding:clamp(18px,1.8vw,26px);border-radius:var(--r-l);
  background:var(--paper-1);border:1px solid var(--line-p);box-shadow:var(--lift-paper);color:var(--ink-2);text-decoration:none}
.pg-node__t{color:var(--ink-1);font:500 calc(var(--t-title) * 1.12 * var(--k-display))/1.1 var(--font-display);text-decoration:none}
.pg-node ul{display:grid;gap:2px}
.pg-node li a{display:inline-block;color:var(--ink-2);font:500 .875rem/1.5 var(--font-sans);text-decoration:none}
.pg-node li a:hover,.pg-node__t:hover{color:var(--theta-700)}
.pg-node--a::after,.pg-node--b::after,.pg-node--c::before,.pg-node--d::before{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--champ-600);box-shadow:0 0 0 3px rgba(142,118,70,.2)}
.pg-node--a::after,.pg-node--b::after{right:-3.5px}
.pg-node--c::before,.pg-node--d::before{left:-3.5px}
.pg-node--flag{justify-self:center;margin:clamp(40px,4vw,56px) auto 0;width:min(100%,360px);justify-items:center;text-align:center;border-color:rgba(142,118,70,.5)}
.pg-node--flag::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:clamp(40px,4vw,56px);background:var(--champ-600)}
.pg-node--flag b{color:var(--champ-600);font:300 var(--t-num-m)/1 var(--font-sans);letter-spacing:-.03em}
.pg-node--flag small{color:var(--ink-3);font-size:.875rem}

@media (min-width:1024px){
  .pg-stage{transform:translateY(-72px);margin-bottom:-72px}
}
/* tablet and phones: the stage becomes a band above a plain list of nodes, no hairlines */
@media (max-width:1023px){
  .pg-orbit__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:16px}
  .pg-stage{grid-area:auto;grid-column:1/-1;order:-1;min-height:0;aspect-ratio:16/9;margin-bottom:8px}
  .pg-node--a,.pg-node--b,.pg-node--c,.pg-node--d{grid-area:auto;margin:0}
  .pg-orbit__lines,.pg-node::after,.pg-node::before{display:none!important}
  .pg-node--flag{margin-top:16px}
  .pg-node--flag::before{display:none}
}
@media (max-width:599px){.pg-orbit__grid{grid-template-columns:minmax(0,1fr)}.pg-stage{aspect-ratio:16/10}}

/* entry: stage iris, then nodes rise 70ms apart, hairlines draw from the stage as their node appears */
.js .pg-orbit.is-pending{opacity:1;transform:none}
.js .pg-orbit.is-pending .pg-stage{clip-path:inset(10% round 32px);opacity:0}
.js .pg-orbit.is-pending .pg-stage img{opacity:0;transform:translateY(24px)}
.js .pg-orbit.is-pending .pg-node{opacity:0;transform:translateY(18px)}
.js .pg-orbit.is-pending .pg-orbit__lines path{stroke-dashoffset:400}
.pg-orbit.is-in .pg-stage{transition:clip-path 900ms var(--ease-out),opacity 500ms var(--ease-out)}
.pg-orbit.is-in .pg-stage img{transition:opacity 800ms var(--ease-out) 200ms,transform 800ms var(--ease-out) 200ms}
.pg-orbit.is-in .pg-node{transition:opacity 700ms var(--ease-out) calc(500ms + var(--i) * 70ms),transform 700ms var(--ease-out) calc(500ms + var(--i) * 70ms)}
.pg-orbit.is-in .pg-orbit__lines path{transition:stroke-dashoffset 700ms var(--ease-out) calc(600ms + var(--i) * 70ms)}

/* ---------- Where to start ---------- */
.pg-start{padding-top:var(--section-y-tight)}
.pg-flagship{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:stretch;padding:clamp(14px,1.6vw,20px);border-radius:var(--r-xl);--lens-fill:rgba(14,15,24,.55)}
.pg-flagship__media{position:relative;margin:0;min-height:420px;overflow:hidden;border-radius:var(--r-l)}
.pg-flagship__media picture{display:contents}
.pg-flagship__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.pg-flagship__badge{position:absolute;left:16px;top:16px}
.pg-flagship__body{display:grid;align-content:center;gap:16px;padding:clamp(12px,2vw,28px) clamp(8px,2vw,28px) clamp(12px,2vw,28px) 0}
.pg-flagship__price small{margin-left:.5em;color:var(--text-2);font:500 .9375rem/1 var(--font-sans);letter-spacing:0}
.pg-flagship .m-ticks li{padding:10px 0;color:var(--text-1);font-size:.9375rem}
.pg-flagship__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media (max-width:899px){.pg-flagship{grid-template-columns:minmax(0,1fr)}.pg-flagship__media{min-height:0;aspect-ratio:4/3}.pg-flagship__body{padding:8px 12px 16px}}
@media (max-width:599px){.pg-flagship__ctas .btn{width:100%}}

.pg-ladder{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.5vw,48px)}
.pg-ladder__step{position:relative;display:grid;align-content:start;gap:8px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--hair);color:var(--text-2)}
.pg-ladder__step b{color:var(--text-1);font:600 1.0625rem/1.3 var(--font-sans)}
.pg-ladder__n{color:var(--text-3);font:300 var(--t-num-m)/1 var(--font-sans);letter-spacing:-.03em}
.pg-ladder__price{color:var(--champ-400);font-weight:300;line-height:1}
.pg-ladder__step small{color:var(--text-2);font-size:.9375rem;line-height:1.6}
.pg-ladder__step.is-feat{border-color:rgba(203,179,132,.45);background:linear-gradient(180deg,rgba(62,85,245,.14),var(--surface))}
@media (min-width:900px){.pg-ladder__step+.pg-ladder__step::before{content:"";position:absolute;right:100%;top:50%;width:clamp(16px,2vw,28px);height:1px;background:var(--line-2)}}
@media (max-width:899px){.pg-ladder{grid-template-columns:minmax(0,1fr)}}

/* ---------- Groups ---------- */
.pg-groups{padding-top:0}
.pg-group{padding-top:clamp(64px,8vw,112px)}
.pg-group__head{margin-bottom:clamp(24px,3vw,40px)}
.pg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pg-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cards>li{display:flex;min-width:0}
.pg-cards .card{width:100%}
.pg-cards .card__media picture,.pg-wide .card__media picture{display:contents}
.pg-cards .card__text{margin-bottom:6px}
@media (max-width:1199px){.pg-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){.pg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.pg-cards,.pg-cards--4{grid-template-columns:minmax(0,1fr)}}
.pg-wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;padding:0;overflow:hidden}
.pg-wide .card__media{margin:0;height:100%;min-height:340px;aspect-ratio:auto;border-radius:0}
.pg-wide__body{display:grid;align-content:center;gap:14px;padding:clamp(24px,3vw,44px)}
.pg-wide .m-ticks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.pg-wide .m-ticks li{padding:10px 0;font-size:.9375rem}
.pg-tierline{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:6px;color:var(--text-1)}
.pg-tierline span{display:inline-flex;align-items:baseline;gap:8px;color:var(--champ-400);font:500 1.125rem/1.2 var(--font-sans)}
.pg-tierline b{color:var(--text-2);font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pg-tierline small{color:var(--text-3);font-size:.8125rem}
@media (max-width:899px){.pg-wide{grid-template-columns:minmax(0,1fr)}.pg-wide .card__media{min-height:0;height:auto;aspect-ratio:16/10}.pg-wide .m-ticks{grid-template-columns:minmax(0,1fr)}}

/* ---------- Bridge ---------- */
.pg-bridge .m-bridge__line{max-width:24ch}

/* ---------- Calm states ---------- */
[data-motion="off"] :is(.pg-stage,.pg-stage img,.pg-node,.pg-orbit__lines path){transition:none!important}
[data-motion="off"] .pg-stage__bloom{animation:none}
@media (prefers-reduced-motion:reduce){.pg-stage__bloom{animation:none}:is(.pg-stage,.pg-stage img,.pg-node,.pg-orbit__lines path){transition:none!important}}

/* ---------- Page overrides ---------- */
.hero--field .hero__main{max-width:920px}
.pg-stage img{mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(54% 56% at 50% 50%,#000 38%,transparent 100%);mask-image:radial-gradient(54% 56% at 50% 50%,#000 38%,transparent 100%)}
.pg-flagship__badge{background:rgba(10,12,18,.85);color:var(--champ-400);border:1px solid rgba(203,179,132,.45)}