/* Claude's ten selected journeys inside the complete approved editorial page. */
html{scroll-behavior:auto}
#story-shell{position:relative;background:#030b1b}
#story-shell .world{z-index:0}
#story-shell canvas{opacity:1;transition:none}
#story-shell .ui button{background:none;border:0;cursor:pointer}
#story-shell .ui .pause{border:1px solid #c6dcec55}
#story-shell .ui .explore{min-height:44px}
#story-shell .ui .explore>span{border:0;border-radius:0;width:auto;height:auto;display:block;font-size:11px}
#story-shell .ui .explore>span:first-child{width:44px;height:44px;border:1px solid #c6dcec55;border-radius:50%;display:grid;place-items:center;font-size:16px}
#story-shell .preview select{display:inline-block;width:auto;border:0;border-radius:0;padding:0 4px}
#story-shell .preview select:focus{outline:2px solid #88e3ed;outline-offset:3px}
#story-shell .t .h{font-style:normal}
#story-shell .t .big{white-space:normal;text-shadow:none}
#story-shell .pill,#story-shell .cal .c{box-sizing:border-box}
#story-shell .steps{padding-left:0}
body>header{z-index:20}
#approach{position:relative;z-index:1}
@media(max-width:760px){#story-shell .preview{top:93px}#story-shell .preview button{padding:0 10px}#story-shell .titles{bottom:100px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-optin) #story-shell .track{height:auto;min-height:0}html:not(.motion-optin) #story-shell #stage{position:relative}}

/* Fit the composition to the actual browser pane, including short desktop windows. */
#story-shell #stage{height:100svh;min-height:0}
#story-shell .track{min-height:0}
#story-shell .t{max-width:100%}
#story-shell .t .h{text-wrap:balance}
#story-shell .t .big{font-size:clamp(56px,11.2vw,178px)}
#story-shell .titles{bottom:100px}
#story-shell .steps{bottom:94px;max-width:40%;flex-wrap:wrap;justify-content:flex-end}
#story-shell .preview{max-width:calc(100% - 260px);gap:10px}
#story-shell .preview select{flex:1;min-width:0;max-width:240px;min-height:44px}
#story-shell .preview button{min-height:44px;padding:0 12px}
#story-shell .pv-tag{white-space:nowrap}
#story-shell .source{max-width:25%}
#story-shell .bottom{bottom:max(22px,env(safe-area-inset-bottom))}
/* Keep all ten names readable in a side panel. */
@media(max-width:1000px){
 #story-shell .source,#story-shell .tagline,#story-shell .steps{display:none}
 #story-shell .preview{top:94px;bottom:auto;left:6%;right:6%;max-width:440px;margin-inline:auto;transform:none;padding:0 4px 0 12px}
 #story-shell .preview .pv-tag{display:none}
 #story-shell .preview select{max-width:none;font-size:12px}
 #story-shell .preview button{font-size:12px;padding:0 10px}
 #story-shell .titles{bottom:88px}
 #story-shell .t .h{font-size:clamp(30px,5.5vw,54px)}
 #story-shell .t .big{font-size:clamp(52px,10.6vw,104px)}
}
@media(max-width:760px){
 #story-shell .t .h{font-size:clamp(29px,8.2vw,46px);line-height:1.04}
 #story-shell .t .big{font-size:clamp(51px,16.5vw,100px);line-height:.98}
 #story-shell .t .over{font-size:9px;letter-spacing:.08em;line-height:1.4;margin-bottom:10px}
 #story-shell .titles{left:6%;right:6%;bottom:86px;height:auto}
 #story-shell .t{width:100%}
 #story-shell .preview{top:90px}
 #story-shell .track{height:430svh}
 .intro h2{font-size:clamp(43px,12vw,65px)}
 .service-list summary{gap:14px;min-height:44px}
 .service-list summary>span:nth-child(2){min-width:0}
 .service-list .plus{flex-shrink:0}
 .contact h2{font-size:clamp(48px,12vw,85px)}
 .contact-info{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #enquiry-form input,#enquiry-form select,#enquiry-form textarea{font-size:16px;min-height:48px}
 .dialog-top button{width:44px;height:44px}
 .footer-top nav a{min-height:44px;display:flex;align-items:center}
 .footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
 .mobile-menu>div{max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain}
 .intro,.section-heading,.services,.process-steps,.enquiry-layout{min-width:0}
 .section-label>span{min-width:0}
}
@media(max-height:620px){
 body>header{height:64px}
 #story-shell .preview{top:74px}
 #story-shell .titles{bottom:76px}
 #story-shell .t .h{font-size:clamp(26px,6vw,40px)}
 #story-shell .t .big{font-size:clamp(44px,12vw,90px)}
 #story-shell .bottom{bottom:max(14px,env(safe-area-inset-bottom))}
 #story-shell .t .over{margin-bottom:8px}
 .mobile-menu>div{top:64px;max-height:calc(100svh - 64px)}
}
@media(max-height:559px) and (min-aspect-ratio:5/4){
 #story-shell .source,#story-shell .tagline,#story-shell .steps{display:none}
 #story-shell .preview{top:70px;left:44%;right:4.2%;max-width:none;margin:0;transform:none}
 #story-shell .preview .pv-tag{display:none}
 #story-shell .preview select{font-size:11px;max-width:none}
 #story-shell .preview button{font-size:11px}
 #story-shell .titles{left:4.2%;right:auto;width:35%;bottom:86px}
 #story-shell .t .h{font-size:clamp(26px,3.6vw,40px)}
 #story-shell .t .big{font-size:clamp(36px,5vw,58px)}
 #story-shell .t .over{font-size:8px}
}
@media(prefers-reduced-motion:reduce){html:not(.motion-optin) #story-shell .track{height:auto}}

/* ===== review-ready refinements (this folder only) ===== */
#story-shell .sample-note{position:absolute;left:4.2%;top:152px;margin:0;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#9cc4d8;pointer-events:none;z-index:2;padding:5px 9px;border:1px solid #9fc4e030;border-radius:99px;background:#030b1b80;white-space:nowrap}
#story-shell .source em{display:none}
@media(max-width:1000px){#story-shell .sample-note{left:50%;transform:translateX(-50%);top:144px;font-size:9px;letter-spacing:.06em}}
@media(max-width:1000px) and (max-height:620px){#story-shell .sample-note{top:124px}}
@media(max-height:559px) and (min-aspect-ratio:5/4){#story-shell .sample-note{left:44%;transform:none;top:120px;font-size:8.5px}}
/* Short windows: smaller title band so the work keeps a readable size */
@media(max-height:620px){
 #story-shell .t .h{font-size:clamp(24px,5vw,34px)}
 #story-shell .t .big{font-size:clamp(40px,9vw,64px)}
}
@media(max-height:620px) and (min-width:761px) and (max-width:1000px){#story-shell .t .big{font-size:clamp(40px,7vw,60px)}}
/* Hologram cards (stories 34 and 89): more body so they read over the landscape */
#story-shell .m-holo{--bg:repeating-linear-gradient(0deg,rgba(70,217,242,.1) 0 1px,transparent 1px 4px),rgba(2,16,34,.66);--fg:#dcfaff;--mut:#9fe6f4}
/* Short, wider windows: the sample note joins the bottom bar so the sky stays free */
@media(max-height:620px) and (min-width:560px){#story-shell .sample-note{top:auto;bottom:max(26px,calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translateX(-50%)}}
@media(max-height:559px) and (min-aspect-ratio:5/4){#story-shell .sample-note{top:auto;bottom:24px;left:50%;transform:translateX(-50%)}}
/* Landscape phones are touch devices too: 16px fields (no focus zoom) and 44px dialog close */
@media(max-height:560px),(pointer:coarse){#enquiry-form input,#enquiry-form select,#enquiry-form textarea{font-size:16px}.dialog-top button{width:44px;height:44px}}

/* motion fallback (device reduced-motion default / persistent scene failure): calm still composition, no scroll-driven track */
html.motion-static #story-shell .track{height:auto!important;min-height:0!important}
html.motion-static #story-shell #stage{position:relative!important}
html.motion-static #story-shell .trace,html.motion-static #story-shell .explore{display:none}
html.motion-static #story-shell .atmosphere{opacity:0!important}