/* Final composition pass: preserve the hero and give each following section its own pace. */
.opening-story{padding-block:54px}
.opening-story-label .eyebrow{margin-bottom:18px}
.opening-story-body>.text-link{margin-top:20px}
.call-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(36px,5vw,72px);padding-block:88px 48px}
.call-sample-play{box-shadow:0 18px 50px #140d092b}
.call-sample-caption{padding:24px}
.call-sample-caption strong{font-size:clamp(25px,2.15vw,31px);text-wrap:balance}
.call-sample-caption>span{margin-top:9px}
.teacher-section{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(44px,6vw,86px);padding-block:92px;align-items:center}
.teacher-visual{width:100%;max-width:420px;justify-self:center;margin-right:0}
.portrait-frame{aspect-ratio:4/4.5;max-height:472px;border-radius:4px}
.portrait-line{display:none}
.teacher-copy h2{font-size:clamp(44px,4.5vw,64px);line-height:1.08}
.teacher-copy>p:not(.eyebrow){max-width:520px;margin-top:22px;line-height:1.7}
.teacher-realization{font-size:clamp(25px,2.3vw,31px);margin-block:25px;max-width:520px}
.teacher-signature{margin-top:24px}
.stories-section{padding-block:12px 82px}
.stories-heading{margin-bottom:36px;gap:36px}
.stories-heading>p{font-size:17px;line-height:1.65}
.story-play{aspect-ratio:auto;border-radius:4px;background:#f3ead8;color:#33291e}
.story-play:after{display:none}
.story-image{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e1d3}
.story-image img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.video-caption{position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:16px 18px;font-size:16px;line-height:1.5;background:#f3ead8;color:#33291e}
.opening-play-icon,.play-circle,.call-sample-icon{width:62px;height:62px;border:1px solid #fff9;background:#2b211cbf;color:#fff;font-size:20px;backdrop-filter:none}
.play-circle{top:calc((100% - 58px)/2)}
.opening-story-play:hover .opening-play-icon,.story-play:hover .play-circle,.call-sample-play:hover .call-sample-icon{background:#2b211ce8}
.story-theme{margin-top:20px}
.story blockquote{font-size:clamp(24px,2.1vw,29px);line-height:1.35;margin-block:12px 20px}
.story-credit{line-height:1.5}
.path-section{padding-block:82px}
.path-heading{margin-bottom:48px}
.path-track{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}
.path-stage h3{font-size:31px;line-height:1.15;min-height:72px}
.path-start h3{font-size:38px;color:#76531d}
.path-stage.active .path-node{background:#f4ead5;color:#76531d;border-color:#bca572;box-shadow:none}
.path-start .path-node,.path-start.active .path-node{background:#866022;color:#fff;border-color:#866022}
.path-upcoming h3,.path-integration h3{color:#685d50}
.path-stage>p:not(.eyebrow){font-size:16px;line-height:1.65;max-width:245px}
.path-start-button{font-size:15px;padding:15px 16px;min-height:50px;margin-top:22px;line-height:1.4}
.path-stage .text-link{font-size:16px;line-height:1.5}
.coming-soon{font-size:14px;border:1px solid #c9b997;border-radius:3px;padding:5px 9px;line-height:1.4}
.faq-section{padding-block:80px;gap:clamp(40px,6vw,85px)}
.faq-list summary{font-size:17px;line-height:1.5;padding-block:21px}
.faq-list details>div{font-size:16px;line-height:1.7}
.join-section{padding-block:80px}
.join-layout{gap:clamp(44px,6vw,86px)}
.registration-panel{border-radius:4px}
.join-copy{padding-top:20px}
.join-logo{width:150px;height:150px;object-fit:contain}
h2,h3{text-wrap:balance}
.dialog-top{align-items:center;gap:16px}
#video-context{font-size:16px;line-height:1.6;max-width:760px;margin:16px auto 0;color:#5e5347}
@media(min-width:561px) and (max-width:1080px){
 .teacher-section{gap:40px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .path-track{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:42px}
 .path-line{display:none}
 .path-stage h3{min-height:0;margin-bottom:16px}
 .path-node{margin-bottom:18px}
 .call-layout{column-gap:32px}
 .call-intro h2{font-size:clamp(43px,5.4vw,62px)}
}
@media(max-width:800px){
 .call-sample-caption{padding:20px}
 .teacher-copy h2{font-size:44px}
 .teacher-realization{font-size:25px}
 .faq-section{gap:32px}
 .opening-play-icon,.play-circle,.call-sample-icon{width:54px;height:54px;font-size:18px}
}
@media(max-width:560px){
 .opening-story{padding-block:40px;row-gap:24px}
 .opening-story-label .eyebrow{margin-bottom:16px}
 .opening-story-quote blockquote{font-size:28px;line-height:1.3}
 .opening-story-quote p{margin-top:20px}
 body.motion-scenes #shift{padding-block:64px 70px}
 #shift h2{font-size:46px}
 #shift .question-change{margin-top:28px;padding-top:25px}
 .call-layout{grid-template-columns:1fr;padding-block:64px 38px;row-gap:30px}
 .call-intro h2{font-size:48px}
 .call-sample-caption strong{font-size:26px}
 .teacher-section{grid-template-columns:1fr;padding-block:64px;gap:30px}
 .teacher-visual{max-width:340px}
 .portrait-frame{aspect-ratio:1/1;max-height:340px}
 .portrait-caption{padding-top:12px;gap:12px}
 .teacher-copy h2{font-size:46px}
 .teacher-copy>.eyebrow{margin-bottom:18px}
 .teacher-realization{font-size:26px;padding-left:18px}
 .stories-section{padding-block:8px 64px}
 .stories-heading{margin-bottom:30px}
 .stories-heading>p{margin-top:18px}
 .story blockquote{font-size:27px}
 .path-section{padding-block:64px}
 .path-heading{margin-bottom:36px}
 .path-track{grid-template-columns:1fr;gap:0}
 .path-stage{padding-bottom:34px}
 .path-stage h3{min-height:0;font-size:31px}
 .path-start h3{font-size:36px}
 .path-stage>p:not(.eyebrow){margin-top:12px}
 .path-stage .text-link{margin-top:16px}
 .path-start-button{margin-top:18px;padding-inline:13px;font-size:14px}
 .path-node{margin-bottom:0}
 .faq-section{padding-block:60px;gap:28px}
 .faq-heading h2{font-size:46px}
 .faq-list summary{font-size:17px;padding-block:20px}
 .join-section{padding-block:60px}
 .join-layout{gap:30px}
 .join-copy{padding-top:0}
 .join-copy h2{font-size:48px}
 .join-details{margin-top:22px}
 .join-logo{width:112px;height:112px;margin-top:22px}
 #video-context{font-size:15px;line-height:1.5}
}
@media(max-width:360px){
 .opening-story-quote blockquote{font-size:26px}
 .teacher-copy h2,#shift h2{font-size:42px}
 .path-stage{padding-left:62px}
 .path-start-button{padding-inline:10px;font-size:14px}
}
@media(min-width:561px){
 .story{display:flex;flex-direction:column}
 .story-play{flex-shrink:0}
 .story-credit{margin-top:auto}
}

/* Defect fixes: relative content has no sticky offset; decoration clips without a scroll container. */
body.motion-scenes .shift-sticky{top:0}
.join-section{overflow:clip}

.path-stage>p.course-meta{margin-top:12px;font-size:15px;font-weight:500;color:#76531d}

/* Give tablet testimonials a full row with the video beside its quotation. */
@media(min-width:561px) and (max-width:1080px){
 .stories-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
 .story{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto auto 1fr;column-gap:28px;min-width:0;padding-bottom:32px;border-bottom:1px solid var(--line)}
 .story:last-child{padding-bottom:0;border-bottom:0}
 .story-play{grid-column:1;grid-row:1 / 4;align-self:start}
 .story-theme{grid-column:2;grid-row:1;margin-top:0}
 .story blockquote{grid-column:2;grid-row:2;margin-block:12px 18px;font-size:clamp(24px,3vw,30px)}
 .story-credit{grid-column:2;grid-row:3;margin-top:0;align-self:start}
}

/* Readable native captions in the compact phone player. */
@media(max-width:560px){
 #story-video::cue{font-family:Arial,sans-serif;font-size:18px;line-height:1.35;color:#fff;background-color:rgba(0,0,0,.85);text-shadow:none}
}

@media(min-width:1081px){.path-track{grid-template-columns:1.2fr 1fr 1fr}}

/* Match hover direction to the action symbol. */
.button:hover span{transform:translateX(2px)}
.button[href^="#"]:hover span{transform:translateY(2px)}

/* A smaller phone header after scrolling; menu control retains its full size. */
@media(max-width:560px){
 .site-header{height:82px;min-height:0;padding-block:0;transition:height .3s ease,background .35s,border .35s}
 .site-header .brand{transform-origin:left center;transition:transform .3s ease}
 .site-header.compact{height:56px}
 .site-header.compact .brand{transform:scale(.667)}
}
@media(max-width:560px) and (prefers-reduced-motion:reduce){.site-header,.site-header .brand{transition:none}}