:root{--portfolio:#c6564d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font-family:Inter,Arial,sans-serif}header{position:absolute;top:0;width:100%;height:80px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;font-size:12px;z-index:3}a{color:inherit;text-decoration:none}header a:first-child{display:flex;align-items:center;gap:8px;font-size:25px;font-weight:700}#story{height:850vh}.stage{position:sticky;top:0;height:100svh;overflow:hidden}.copy{position:absolute;top:14%;left:7%;width:85%}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--quiet);font-weight:700}h1{font-size:clamp(30px,3.5vw,52px);font-weight:500;letter-spacing:-1.7px;margin:16px 0}#description{max-width:700px;font-size:16px;line-height:1.6;color:var(--quiet)}.scene{position:absolute;top:40%;left:50%;width:1000px;height:370px;perspective:1600px;transform:translateX(-50%)}.world{width:720px;height:290px;position:relative;transform-style:preserve-3d;transform-origin:center;will-change:transform}.board,.support{position:absolute;inset:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 0 var(--blue),0 18px 42px #24465c12;transform-style:preserve-3d}.board{z-index:4}.board-header{height:47px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);font-size:13px}.board-header b{color:var(--link)}#status{font-size:11px;padding:6px 10px;background:var(--surface);border-radius:8px}.table-header,.row{display:grid;grid-template-columns:125px 295px 135px 135px;align-items:center;padding:0 14px}.table-header{height:30px;font-size:10px;color:var(--quiet)}.row{height:58px;border-top:1px solid var(--line);position:relative;font-size:12px}.session{display:flex;gap:9px;align-items:center}.session em{font-style:normal;background:var(--blue);padding:4px 9px;border-radius:12px;font-size:11px}.row:nth-child(2) .session em{background:var(--green)}.row:nth-child(3) .session em{background:var(--surface);color:var(--link)}.requirement{font-size:10px;color:var(--link);margin-top:5px}.slot{border:1px dashed var(--line);border-radius:8px;width:120px;height:34px;display:flex;align-items:center;padding-left:10px;color:var(--quiet);font-size:10px}.board-footer{height:35px;display:flex;justify-content:space-between;padding:10px 16px;font-size:10px;color:var(--quiet)}.staff{z-index:5;transform-style:preserve-3d;position:absolute;left:750px;top:0;width:230px;height:310px;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:16px;font-size:12px}.staff>span{display:block;font-size:10px;color:var(--quiet);margin-top:7px}.person{position:absolute;left:16px;top:68px;width:120px;height:34px;background:var(--surface);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;justify-content:center;padding-left:10px;font-size:11px;will-change:transform}.person small{font-size:8px;color:var(--link);margin-top:2px}.support{padding:22px;box-shadow:0 5px 0 var(--edge),0 20px 40px #24465c12;opacity:0}.support strong{font-size:22px}.support p{color:var(--quiet);font-size:14px}.support div{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:14px}.programme{--edge:var(--blue)}.skills{--edge:var(--portfolio)}.prep{--edge:var(--prep)}.support strong{color:var(--edge)}nav{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px;background:var(--paper);border:1px solid var(--line);border-radius:14px}button{border:0;background:transparent;font:inherit;font-size:12px;white-space:nowrap;color:var(--quiet);padding:12px 16px;border-radius:9px;cursor:pointer}button[aria-current]{background:var(--surface);color:var(--ink)}button:hover{background:var(--surface)}:focus-visible{outline:2px solid var(--link);outline-offset:3px}.demo-note{position:absolute;bottom:102px;left:0;width:100%;text-align:center;font-size:10px;color:var(--quiet)}.progress{position:absolute;bottom:0;width:100%;height:3px;background:var(--line)}.progress i{display:block;height:100%;background:var(--blue);transform-origin:left}#explanation{background:var(--paper);padding:80px 7%}h2{font-size:36px;font-weight:500;letter-spacing:-1px}.explanation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:45px 0}.explanation-grid p{line-height:1.7;color:var(--quiet)}small{color:var(--quiet)}@media(max-width:1050px){.scene{transform:translateX(-50%) scale(.75);transform-origin:top center}}@media(max-width:760px){header>span{display:none}.copy{top:12%}h1{font-size:32px}#description{font-size:14px}.scene{top:40%;transform:translateX(-50%) scale(.68)}nav{width:94%;flex-wrap:wrap;justify-content:center;bottom:22px}button{font-size:10px;padding:9px 11px}.demo-note{bottom:112px}.explanation-grid{grid-template-columns:1fr}h2{font-size:29px}}@media(max-width:520px){.scene{transform:translateX(-50%) scale(.35);top:45%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#story{height:100svh}nav,.progress{display:none}.demo-note{bottom:30px}}

/* Sculptural session close-up. Raised surfaces retain the existing brand palette. */
.session-story{position:absolute;inset:-25px 0 0;perspective:1500px;pointer-events:none;z-index:8;transform-origin:50% 40%;will-change:transform,opacity}
.session-shell{position:absolute;left:240px;top:25px;width:510px;height:270px;transform-style:preserve-3d;transform:rotateX(24deg) rotateY(-14deg) rotateZ(-5deg)}
.session-lid,.procedure-card,.need-card{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 0 white inset,0 3px 0 var(--line),0 7px 0 var(--line),0 12px 0 var(--blue),15px 35px 55px #24465c22;backface-visibility:hidden;will-change:transform,opacity}
.session-lid{inset:0;padding:32px;transform-style:preserve-3d}.session-source,.procedure-card>span,.need-card>span{font-size:10px;letter-spacing:1.5px;color:var(--link);font-weight:700}.session-title{display:flex;align-items:center;gap:18px;margin:38px 0 28px}.session-title>b{font-size:19px}.session-title>strong{background:var(--blue);border-radius:15px;padding:12px 24px;font-size:30px;color:white;box-shadow:0 4px 0 var(--link)}.session-title>span{font-size:14px;color:var(--quiet)}.session-lid p{border-top:1px solid var(--line);padding-top:18px;font-size:14px}.session-lid p span{float:right;color:var(--quiet);font-size:11px}
.procedure-card{top:0;width:245px;height:155px;padding:24px;box-shadow:0 5px 0 var(--line),10px 22px 35px #24465c20}.procedure-card strong{display:block;font-size:23px;margin:21px 0 9px}.procedure-card small{font-size:10px}.procedure-second{left:265px}.need-card{top:160px;left:45px;width:420px;padding:25px 30px;box-shadow:0 6px 0 var(--blue),12px 25px 40px #24465c20}.need-card strong{display:block;font-size:28px;margin:15px 0}.need-card div{font-size:14px}.need-card b{display:inline-block;background:var(--surface);color:var(--link);padding:6px 14px;border-radius:8px;margin-left:12px}.need-card small{display:block;font-size:9px;margin-top:15px}
.person{box-shadow:0 2px 0 white inset,0 3px 0 var(--line),0 7px 12px #24465c15}.session em{box-shadow:0 2px 0 var(--line)}.board{box-shadow:0 2px 0 white inset,0 4px 0 var(--line),0 8px 0 var(--blue),0 22px 45px #24465c20}.staff{box-shadow:0 4px 0 var(--line),0 16px 30px #24465c12}
@media(prefers-reduced-motion:reduce){.session-story{display:none}}

/* Five-session roster and an explicit fold/landing chapter. */
#story{height:1050vh}.world{height:406px}.staff{height:458px}.row{background:var(--paper);transform-origin:50% 50%}.scene{height:470px}nav{max-width:96%;flex-wrap:wrap;justify-content:center}button{padding:11px 12px}.session-shell{transform-origin:0 0}
@media(min-width:761px){.scene{top:36%}}
@media(max-width:760px){.scene{top:38%}.demo-note{bottom:123px}}
@media(prefers-reduced-motion:reduce){#story{height:100svh}}

.row.matching{background:var(--surface);outline:2px solid var(--blue);outline-offset:-2px}.row.matching .requirement{font-weight:700}.person.candidate{background:var(--paper);border:2px solid var(--blue);box-shadow:0 0 0 5px var(--surface),0 8px 20px #24465c25}.solving #status{background:var(--blue);color:var(--paper)}

.programme-overview{position:absolute;top:75px;left:32px;right:32px}.programme-overview>strong{font-size:24px}.programme-overview>div{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.programme-overview span{padding:9px 12px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:13px;box-shadow:0 3px 0 var(--line)}.programme-overview small{font-size:11px}

.session-time{display:block;font-size:9px;color:var(--quiet);margin-bottom:2px}.flight-part{position:absolute;z-index:20;pointer-events:none;align-items:center;justify-content:center;white-space:nowrap;color:var(--ink);transform-origin:center}.flight-part-1{background:var(--blue);color:white;box-shadow:0 3px 0 var(--link)}.flight-part-2{color:var(--quiet)}
.study-launch{background:var(--paper);border:1px solid var(--line);font-weight:600;color:var(--link)}.material-study{width:96vw;max-width:1500px;height:94svh;max-height:1000px;border:1px solid var(--line);border-radius:24px;padding:0;background:var(--surface);color:var(--ink);overflow:hidden}.material-study::backdrop{background:#20394c99;backdrop-filter:blur(8px)}.study-heading{display:flex;justify-content:space-between;align-items:start;padding:26px 32px 0}.study-heading small{font-size:10px;letter-spacing:2px}.study-heading h2{font-size:28px;margin:12px 0 8px}.study-heading p{font-size:13px;color:var(--quiet);margin:0}.study-close{background:white;border:1px solid var(--line)}.study-canvas{height:calc(100% - 230px);min-height:200px;width:100%;touch-action:none}.study-canvas canvas{display:block;cursor:grab}.study-canvas canvas:active{cursor:grabbing}.study-controls{display:flex;justify-content:center;align-items:center;gap:25px;padding:12px 20px}.study-play{background:var(--link);color:white;min-width:160px}.study-controls label{display:flex;align-items:center;gap:12px;font-size:12px}.study-controls input{width:220px;accent-color:var(--link)}.study-count,.study-note{font-size:11px;color:var(--quiet)}.study-note{text-align:center}.material-study button:focus-visible{outline:2px solid var(--link)}@media(max-width:760px){header .study-launch{font-size:10px;padding:9px}header>a:nth-of-type(2){display:none}.study-heading{padding:20px}.study-heading h2{font-size:22px}.study-controls{gap:12px;flex-wrap:wrap}.study-controls input{width:130px}.study-canvas{height:calc(100% - 260px)}}

/* Fixed camera choices for the material study. */
.material-study .study-canvas { touch-action:auto; height:calc(100% - 280px); }
.material-study .study-canvas canvas, .material-study .study-canvas canvas:active { cursor:default; }
.study-views { display:flex; justify-content:center; gap:8px; padding:4px 16px 10px; }
.study-views button { border:1px solid #bdd1df; background:transparent; color:#32617c; border-radius:20px; padding:9px 16px; font:inherit; cursor:pointer; }
.study-views button[aria-pressed="true"] { background:#fff; border-color:#32617c; color:#194f75; box-shadow:0 3px 10px #32617c12; }
.study-views button:focus-visible { outline:3px solid #5dade2; outline-offset:3px; }
@media(max-width:700px) { .material-study .study-canvas { height:calc(100% - 310px); } .study-views button { font-size:13px; } }

/* The main story now shares one fixed-camera, lit 3D scene. */
body { background: #edf5f8; }
.stage { background: radial-gradient(ellipse at 68% 37%,#ffffff 0%,#f0f7fa 40%,#deebf2 100%); }
.copy { top:11%; left:6%; width:88%; z-index:2; pointer-events:none; }
h1 { max-width:980px; font-size:clamp(30px,3.8vw,58px); line-height:1.08; letter-spacing:-.045em; }
#description { max-width:730px; font-size:clamp(14px,1.1vw,17px); line-height:1.6; }
.planning-canvas { position:absolute; top:30%; bottom:105px; left:3%; right:3%; pointer-events:none; }
.planning-canvas canvas { display:block; width:100%; height:100%; }
.has-planning-3d .scene,.has-planning-3d .flight-part { visibility:hidden!important; opacity:0!important; pointer-events:none; }
.has-planning-3d nav { z-index:3; bottom:20px; gap:4px; background:#ffffffbf; border:1px solid #ffffff; border-radius:18px; padding:6px; box-shadow:0 8px 25px #234b6410; backdrop-filter:blur(16px); }
.has-planning-3d nav button { border:0; border-radius:12px; font-size:11px; min-height:40px; padding:10px 13px; }
.has-planning-3d nav button[aria-current] { background:#285f81; color:white; box-shadow:0 3px 8px #285f8128; }
.demo-note { bottom:82px; font-size:10px; }
@media(max-width:760px) {
 header { height:65px; } header>span { display:none; }
 .copy { top:10%; } #description { max-width:540px; } h1 { margin:12px 0; }
 .planning-canvas { top:32%; bottom:155px; left:2%; right:2%; }
 .has-planning-3d nav { width:94%; bottom:16px; }
 .has-planning-3d nav button { padding:8px 10px; min-height:38px; }
 .demo-note { bottom:118px; }
}
@media(prefers-reduced-motion:reduce) { .planning-canvas { bottom:65px; } .demo-note { bottom:30px; } }