/* Smithereens / compact reading scale. A bounded visual overlay over v22.
   Brand/media bytes, silent playback, controls and content remain unchanged. */
:root{--pad:max(24px,calc((100vw - 1100px)/2))}
.section-pad{padding:60px var(--pad)}
.header{height:94px;padding-block:18px}.header nav{gap:25px}.header .nav-contact{margin-left:10px}
.hero{height:auto;min-height:0;max-height:none}
.hero-content{padding:154px var(--pad) 112px}
.hero h1{font-size:clamp(80px,8.3vw,120px);line-height:.92;max-width:650px;letter-spacing:-.065em}
.hero h1 em{font-size:.49em;line-height:1.1;margin-top:18px}
.hero .eyebrow{margin-bottom:25px}
.hero-intro{margin-top:27px;gap:30px;max-width:650px}
.hero-intro p{font-size:14px;line-height:1.8;max-width:310px}
.hero-art{left:auto;right:max(12px,calc((100vw - 1100px)/2 - 45px));top:104px;bottom:58px;width:min(53vw,600px)}
.hero>.motion-state{top:109px;right:var(--pad);max-width:300px}
.hero-baseline{bottom:16px;min-height:50px}
.hero-grid{inset-inline:var(--pad)}.hero-side-label{right:max(20px,calc((100vw - 1100px)/2 - 23px));font-size:8px}
.section-top{margin-bottom:26px}
.showcase{padding-top:56px;padding-bottom:57px}
.showcase-heading{align-items:center;gap:35px;margin-bottom:25px}
.showcase h2{font-size:clamp(54px,5.1vw,76px);line-height:1.03;letter-spacing:-.055em}
.showcase-intro{max-width:310px}.showcase-intro>p:first-child{font-size:18px;line-height:1.5}
.showcase-intro .showcase-note{font-size:14px;line-height:1.7;margin-top:13px}
.showcase-toolbar{padding:12px 0;margin-bottom:22px}
.showcase-grid{width:100%;max-width:860px;margin-inline:auto;gap:38px 48px}
.showcase-item--wide{width:100%;max-width:860px;margin-inline:auto}
.showcase-item--portrait{width:100%;max-width:280px;justify-self:center}
.showcase-media--wide{aspect-ratio:1280/714}
.showcase-media--portrait{width:100%;aspect-ratio:720/1290;height:auto;max-height:none}
.showcase-media--portrait video{width:100%;height:100%;aspect-ratio:720/1290;object-fit:contain}
.showcase-item figcaption{padding-top:17px;gap:26px}
.showcase-item h3{font-size:clamp(30px,2.7vw,38px);line-height:1.1;letter-spacing:-.04em}
.showcase-item--portrait h3{font-size:32px;line-height:1.1}
.showcase-category{font-size:9px;line-height:1.7;margin-bottom:10px;letter-spacing:.08em}
.showcase-item figcaption>p{font-size:14px;line-height:1.75;max-width:310px}
.showcase-item--portrait figcaption>p{font-size:14px;margin-top:12px}
.showcase-end{max-width:860px;margin:30px auto 0;padding-top:18px}
.showcase-end p{font-size:12px;line-height:1.8;max-width:480px}
.group{padding-top:58px;padding-bottom:34px}.group .section-top{margin-bottom:28px}
.group-layout{gap:9%;grid-template-columns:1.05fr 1fr}
.group h2{font-size:clamp(46px,4.3vw,66px);line-height:1.08}
.group-copy .lead{font-size:21px;line-height:1.5;margin-bottom:18px}
.group-copy>p:not(.lead){font-size:15px;line-height:1.8;max-width:450px}
.group-world-link{margin-top:12px}.connection-drawing{margin-top:12px}.connection-drawing svg{height:75px}
.journey{padding-top:58px;padding-bottom:55px}
.journey-heading{gap:42px;margin-bottom:28px;grid-template-columns:1fr 1fr}
.journey h2{font-size:clamp(48px,4.8vw,72px);line-height:1.03;letter-spacing:-.05em}
.journey-heading p{font-size:15px;line-height:1.8;max-width:350px}
.journey-duration{margin-top:16px;font-size:10px}
.journey-film{max-width:920px;margin-inline:auto}.showcase-media--timeline{aspect-ratio:16/9}
.journey-film figcaption{font-size:12px;line-height:1.7;margin:12px 0 0}
.journey-milestones{max-width:920px;margin:27px auto 0;gap:24px}
.journey-milestones strong{font-size:15px;line-height:1.5}.journey-date{font-size:10px;letter-spacing:.05em;margin-bottom:8px}
.journey-next{max-width:920px;margin:24px auto 0;padding-top:17px}
.worlds{padding-top:59px;padding-bottom:56px}.worlds-heading{margin-bottom:24px;align-items:center}
.worlds h2{font-size:clamp(46px,4.8vw,70px);line-height:1.05}.worlds-heading>p{font-size:15px;line-height:1.8}
#worlds .world-selector{max-width:960px;margin:24px auto 20px!important}
#worlds .world-selector button{min-height:66px;padding:17px 22px;font-size:16px}
#worlds .world-selector button::after{left:22px;right:22px}
#worlds .world-stage{max-width:960px;margin-inline:auto;min-height:480px}
#worlds:not(.world-explorer-ready) .world-panel{min-height:480px}
#worlds .world-panel{padding:32px 36px}
#worlds .world-panel-meta{font-size:10px;letter-spacing:.09em}
#worlds .world-panel-copy{max-width:530px;padding-top:45px}
#worlds .world-panel-copy h3{font-size:clamp(43px,4.1vw,59px);line-height:1.02;margin-bottom:18px}
#worlds .world-panel-copy p{font-size:15px;line-height:1.75;max-width:420px}
#worlds .world-detail{min-height:44px;margin-top:17px;font-size:12px}
#worlds .world-panel::after{font-size:clamp(110px,13vw,190px)}
.concept-note{max-width:960px;margin:18px auto 0;font-size:12px;line-height:1.8}
.company-film-section{padding-top:57px;padding-bottom:55px}
.company-film-section .section-top{margin-bottom:28px}
.company-film-heading{margin-bottom:26px;gap:42px;align-items:center}
.company-film-section h2{font-size:clamp(46px,4.7vw,68px);line-height:1.05}
.company-film-heading>p{font-size:15px;line-height:1.8;max-width:360px}
.company-film-frame{max-width:920px;margin-inline:auto}
.scene-caption strong{font-size:clamp(22px,2.4vw,32px)!important;max-width:540px}
.company-film-concepts,.company-film-story,#story-panel{max-width:920px;margin-inline:auto}
#story-open{max-width:920px;width:100%;margin-inline:auto}
.company-film-concepts{font-size:12px;margin-top:16px}.company-film-story{padding-block:14px}
.company-film-story p,.company-film-story li{font-size:14px;line-height:1.8}
.approach{padding-top:57px;padding-bottom:54px}.approach .section-top{margin-bottom:28px}
.approach h2{font-size:clamp(46px,4.6vw,66px);line-height:1.06}
.approach-layout{gap:8%}.approach-intro p{font-size:15px;line-height:1.8;margin-top:21px}
.principles details{padding:19px 0}.principles summary{font-size:18px;min-height:28px}.principles p{font-size:14px;line-height:1.8}
.research-strip{margin-top:28px;padding-top:23px}.research-strip p{font-size:14px}
.contact{padding-top:57px;padding-bottom:55px}.contact .section-top{margin-bottom:27px}
.contact h2{font-size:clamp(46px,4.8vw,70px);line-height:1.04}.contact-heading{margin-bottom:16px}
.enquiry-layout{gap:8%;margin-top:28px}.enquiry-lead{font-size:23px!important}
.footer{padding-top:33px;padding-bottom:26px}.footer-word{font-size:clamp(48px,7.3vw,104px);margin-top:28px}
@media(min-width:1100px){.showcase h2 br{display:none}.showcase h2 em{margin-left:.15em}.showcase-heading{gap:50px}.showcase-intro>p:first-child{font-size:17px}}
@media(min-width:701px) and (max-width:1100px){
.hero-content{padding-top:158px;padding-bottom:112px}.hero h1{font-size:clamp(80px,10.3vw,108px)}
.hero-intro{max-width:310px;margin-top:23px}.hero-art{left:auto;right:-30px;width:53vw;top:145px;bottom:58px}
.hero>.motion-state{top:109px;max-width:300px}.hero-side-label{display:none}
.showcase h2{font-size:64px}.showcase-heading{gap:32px}.showcase-intro{max-width:290px}
.showcase-intro>p:first-child{font-size:17px}.showcase-intro .showcase-note{font-size:13px}
.showcase-grid{gap:34px 34px}.showcase-item--portrait{max-width:260px}
.group h2{font-size:50px}.journey h2{font-size:56px}.journey-heading{gap:28px}
.worlds h2{font-size:56px}.company-film-section h2{font-size:54px}.approach h2{font-size:52px}.contact h2{font-size:56px}
}
@media(max-width:700px){
:root{--pad:24px}.header{height:86px;padding-block:18px}.header nav{top:85px}
.section-pad{padding:44px var(--pad)}.section-top{margin-bottom:23px}
.hero{padding:0 0 16px}.hero-content{padding:122px var(--pad) 0}
.hero h1{font-size:clamp(58px,16vw,84px);line-height:.93;letter-spacing:-.06em}.hero h1 em{font-size:.49em;margin-top:16px}
.hero .eyebrow{font-size:9px;line-height:1.7;letter-spacing:.07em;margin-bottom:22px}
.hero-intro{margin-top:21px;max-width:none}.hero-intro p{font-size:14px;line-height:1.75;max-width:none}
.hero-actions{gap:14px 20px;margin-top:13px}.hero-explore,.hero-story{font-size:12px;min-height:44px}
.hero-art{position:relative;inset:auto;width:100%;height:235px;margin:0 0 -4px}#brand-sculpture{height:235px}
.hero>.motion-state{position:relative;inset:auto;margin:16px var(--pad) 0;max-width:none}.hero-baseline{position:relative;inset:auto;margin:0 var(--pad);padding-top:12px;min-height:50px}
.hero-baseline .scroll-cue,.motion-panel summary{min-height:44px}
.showcase{padding-top:42px;padding-bottom:44px}.showcase .section-top{margin-bottom:21px}.showcase-heading{margin-bottom:18px}
.showcase h2{font-size:clamp(46px,11.5vw,60px);line-height:1.02}.showcase h2 em{margin-left:0}
.showcase-intro{margin-top:13px}.showcase-intro .showcase-note{font-size:14px;line-height:1.7}
.showcase-toolbar{padding:12px 0;margin-bottom:19px}.showcase-playback{gap:15px}#showcase-motion{font-size:12px;min-height:44px}#showcase-status{font-size:11px;line-height:1.6;max-width:175px}
.showcase-grid{grid-template-columns:1fr;gap:32px}.showcase-item--wide{max-width:100%}
.showcase-item--portrait{width:100%;max-width:260px;margin-inline:auto}
.showcase-media--portrait{aspect-ratio:720/1290;max-height:none}.showcase-media-label{font-size:8px;line-height:1.6;padding:4px 7px}
.showcase-item figcaption{padding-top:15px}.showcase-item h3,.showcase-item--portrait h3{font-size:30px;line-height:1.1}
.showcase-item figcaption>p,.showcase-item--portrait figcaption>p{font-size:14px;line-height:1.75;margin-top:11px}
.showcase-category{font-size:9px;line-height:1.7;margin-bottom:8px;letter-spacing:.05em}
.showcase-end{margin-top:27px;padding-top:17px}.showcase-end p{font-size:12px;line-height:1.75}
.group{padding-top:44px;padding-bottom:31px}.group .section-top{margin-bottom:24px}.group-layout{grid-template-columns:1fr;gap:23px}
.group h2{font-size:clamp(40px,10vw,55px)}.group-copy .lead{font-size:20px;line-height:1.5;margin-bottom:17px}
.group-copy>p:not(.lead){font-size:14px;line-height:1.8}.group-world-link{margin-top:10px}.connection-drawing svg{height:65px}
.journey{padding-top:44px;padding-bottom:43px}.journey-heading{display:block;margin-bottom:23px}.journey h2{font-size:clamp(44px,11vw,60px);line-height:1.03}
.journey-heading>div{margin-top:19px}.journey-heading p{font-size:14px;line-height:1.75}.journey-duration{font-size:9px;margin-top:13px}
.journey-film{margin-inline:0}.journey-film figcaption{margin:11px 0 0;font-size:12px;line-height:1.7}.showcase-media--timeline{border:1px solid #ffffff1c}
.journey-milestones{margin-top:24px;gap:23px 22px}.journey-date{font-size:9px;line-height:1.7;letter-spacing:.04em}.journey-milestones strong{font-size:14px}
.journey-next{margin-top:22px;padding-top:17px}.journey-next p{font-size:12px}.journey-next a{font-size:12px;min-height:44px}
.worlds{padding-top:44px;padding-bottom:44px}.worlds h2{font-size:clamp(40px,10vw,55px)}.worlds-heading>p{font-size:14px;line-height:1.75;margin-top:17px}
#worlds .world-selector{margin:20px 0 16px!important}#worlds .world-selector button{min-height:68px;padding:12px 8px;font-size:clamp(11px,3.1vw,15px);gap:7px}
#worlds .world-selector button::after{left:8px;right:8px}
#worlds .world-stage{min-height:450px;margin-inline:0;border:1px solid #ffffff24}
#worlds:not(.world-explorer-ready) .world-panel{min-height:450px}
#worlds .world-panel{padding:22px 22px 26px}
#worlds .world-panel-meta{font-size:9px;line-height:1.6;gap:14px;letter-spacing:.05em}
#worlds .world-panel-copy{padding-top:38px;max-width:100%}
#worlds .world-panel-copy h3{font-size:clamp(34px,8.7vw,47px);line-height:1.04;margin-bottom:16px}
#worlds .world-panel-copy p{font-size:14px;line-height:1.75;max-width:100%}
#worlds .world-detail{margin-top:16px;font-size:12px;gap:25px;min-height:44px}
#worlds .world-panel::after{font-size:120px}.concept-note{font-size:12px;line-height:1.75;margin-top:16px}
.company-film-section{padding-top:44px;padding-bottom:43px}.company-film-section .section-top{margin-bottom:24px}
.company-film-section h2{font-size:clamp(40px,10vw,55px)}.company-film-heading{display:block;margin-bottom:23px}.company-film-heading>p{font-size:14px;line-height:1.75;margin-top:18px;max-width:none}
.company-film-frame{margin-inline:0}.company-film-stage{aspect-ratio:auto}.company-film-video{height:auto;aspect-ratio:16/9;object-fit:contain}
.scene-caption strong{font-size:23px!important}.scene-caption span{font-size:9px!important}.scene-captions{height:112px}
.company-film-caption{padding:10px 13px}.company-film-caption>span{font-size:11px;max-width:200px}
.company-film-concepts{font-size:12px;line-height:1.75;margin-top:14px}
.company-film-story p,.company-film-story li{font-size:14px;line-height:1.8}#story-panel{margin-inline:0}
.approach{padding-top:44px;padding-bottom:43px}.approach .section-top{margin-bottom:24px}.approach h2{font-size:44px}.approach-intro p{font-size:14px;line-height:1.75;margin-top:18px}
.approach-layout{gap:26px}.principles summary{font-size:17px}.principles p{font-size:14px;line-height:1.8}.principles details{padding:18px 0}
.research-strip{margin-top:25px;padding-top:21px}.research-strip p{font-size:14px;line-height:1.75}
.contact{padding-top:44px;padding-bottom:44px}.contact .section-top{margin-bottom:24px}.contact h2{font-size:clamp(40px,10vw,55px)}
.enquiry-layout{margin-top:24px}.enquiry-lead{font-size:22px!important}.footer{padding-top:29px;padding-bottom:24px}.footer-word{font-size:10.2vw;margin-top:24px}
}
@media(max-width:360px){
:root{--pad:22px}.hero-content{padding-top:120px}.hero h1{font-size:58px}.hero .eyebrow{font-size:8px}.hero-art,#brand-sculpture{height:215px}
.showcase h2{font-size:44px}.showcase-playback{gap:12px}#showcase-status{font-size:10px;max-width:135px}
.showcase-item h3,.showcase-item--portrait h3{font-size:29px}.journey h2{font-size:43px}.journey-milestones{gap:22px 18px}
#worlds .world-panel{padding:20px 18px 25px}#worlds .world-panel-copy h3{font-size:34px}.section-index{font-size:9px}
}
@media(min-width:701px) and (max-height:700px){.hero-content{padding-top:151px;padding-bottom:108px}.hero h1{font-size:clamp(78px,8.1vw,112px)}.hero-art{top:112px;bottom:55px}.hero-intro{margin-top:23px}}
/* Keep the single video-motion choice reachable before and during scrolling. */
.header{gap:14px}.header nav{margin-left:auto}
.header #showcase-motion{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:102px;max-width:112px;margin:0;padding:8px 12px;border:1px solid #b4aa9473;background:#1d241fe6;color:#f2f0e9;font:500 11px/1.4 var(--sans,Arial,sans-serif);text-align:center;white-space:normal;letter-spacing:0}
.header #showcase-motion:hover{background:#eeeae1;color:#101211;border-color:#eeeae1}
.header #showcase-motion:focus-visible{outline:2px solid #d5bd98;outline-offset:4px}
.header #showcase-motion[aria-pressed="true"]{border-color:#c5b08b99;background:#33372a;color:#f4efdf}
.header #showcase-motion[aria-pressed="true"]:hover{background:#eeeae1;color:#101211}
.header #showcase-motion>span{display:none}
.showcase-playback{justify-content:flex-end}.showcase-playback #showcase-status{max-width:330px}
@media(min-width:701px) and (max-width:1100px){.header{gap:12px}.header nav{gap:14px}.header nav a{font-size:10px}.header .nav-contact{margin-left:0;padding:9px 10px;gap:12px}.header #showcase-motion{min-width:88px;max-width:95px;padding:7px 9px;font-size:10px}}
@media(max-width:700px){.header{gap:8px}.header .brand{gap:8px}.header #showcase-motion{flex:0 0 80px;width:80px;min-width:0;max-width:80px;min-height:44px;padding:6px 8px;font-size:10px;line-height:1.35}.header .menu-button{flex:0 0 44px;min-width:44px;min-height:44px}.showcase-playback{justify-content:flex-start}.showcase-playback #showcase-status{max-width:none}}