/* These aids belong to narrow screens; desktop case layouts stay intact. */
/* Fixed menu layers must use the viewport, not the header's grid area. */
@media(max-width:800px){
 body>header{min-height:92px}
 body>header.menu-open{transform:none;will-change:auto;transition:none}
 body>header .header-main #nav{grid-area:auto;inset:0;width:100vw;max-width:none}
 body>header:not(.menu-open) .header-main .languages{display:none}
 body>header.menu-open .header-main .languages{display:flex;grid-area:auto;width:max-content;max-width:calc(100vw - 40px);top:auto;right:auto;bottom:calc(32px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}
}
@media(max-width:600px){body>header{min-height:72px}}
@media(min-width:601px) and (max-width:1000px){
 .long-gallery.duo,.long-gallery.trio,.long-gallery.fixed-three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .long-comparison .long-block-galleries{grid-template-columns:1fr;gap:32px}
 .long-comparison .long-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
 .long-gallery.fixed-five{grid-template-columns:repeat(3,minmax(0,1fr))}
 .long-gallery.adaptation{grid-template-columns:1.638225256fr .5625fr}
}
@media(max-width:600px){
 html{scroll-padding-top:88px}
 body:not(.editor-page) main>section{padding-inline:20px;padding-block:72px}
 body:not(.editor-page) header{padding:14px 20px;gap:16px}
 .brand img{width:36px;height:auto}
 .menu-toggle{min-width:44px;min-height:44px}
 .menu-open .brand{top:18px;left:20px}.menu-open .menu-toggle{top:14px;right:20px}
 .header-main .languages button{min-width:44px;min-height:44px}
 body:not(.editor-page) main>.hero{padding-top:30px;padding-bottom:64px;min-height:0}
 .hero h1{font-size:clamp(32px,8.6vw,48px);line-height:1.12;margin:28px 0 24px}
 .hero .role{font-size:15px;line-height:1.65}.hero .intro{font-size:21px;line-height:1.5}
 .hero-bottom{margin-top:32px}.buttons{margin-top:24px}.button{min-height:48px;padding:12px 18px}
 .eyebrow{margin-bottom:24px;font-size:12px;gap:12px}.eyebrow>span{white-space:normal}
 .section-heading{gap:20px;margin-bottom:32px}.section-heading h2,.process-heading h2{font-size:clamp(32px,8.6vw,46px);line-height:1.08;overflow-wrap:break-word}
 .section-heading p{font-size:16px;line-height:1.6;margin:0}
 .work-grid{grid-template-columns:minmax(0,1fr);row-gap:36px}.project-top{margin-top:16px;gap:14px;align-items:start}.project-top>span{font-size:19px;line-height:1.35;min-width:0}.project-top>small{font-size:12px;flex-shrink:0}
 .work-grid .project .cover .caption{font-size:12px;left:12px;bottom:12px;padding:4px 8px}
 #about .portrait{width:min(100%,360px)}#about .about-content{gap:28px}#about .text .big{font-size:25px;line-height:1.35}
 .services{gap:12px}.service{padding-block:24px}.service-heading h3{font-size:23px}.service p{font-size:16px;line-height:1.65}
 .experience-item .experience-row{grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:'identity toggle' 'period toggle';gap:10px 12px;padding-block:24px}.experience-row .experience-period{font-size:14px;justify-self:start}.experience-row>.experience-toggle{align-self:start}.experience-identity h3{font-size:21px}.experience-details{padding:0 0 26px}
 .contact h2{font-size:clamp(28px,7.5vw,42px);line-height:1.2;margin-top:30px;overflow-wrap:break-word}.contact-title-line{display:inline}.contact-title-line:not(:last-child)::after{content:' '}.contact p{font-size:16px;margin-block:28px}.contact-list{gap:12px 24px;font-size:19px}.contact-list a{display:inline-flex;align-items:center;min-height:44px}
 .back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:44px;padding:10px 14px;font-size:13px}
 .case-page .back{margin-bottom:24px;min-height:44px;align-content:center}
 .case-page .case-title{font-size:clamp(30px,8.5vw,46px);line-height:1.12;margin:20px 0;overflow-wrap:break-word}
 .case-role{font-size:14px;line-height:1.7;margin-bottom:28px;overflow-wrap:break-word}
 .case-main-film{margin:28px 0 36px}.long-case-content .case-challenge-idea{grid-template-columns:minmax(0,1fr);gap:28px;margin:36px 0}
 .long-case-content .case-story-block{margin:40px 0}.long-case-content .case-challenge-idea .case-story-block{margin:0}
 .long-case-content .case-story-block h2,.long-block h2{font-size:21px;line-height:1.3;margin-bottom:16px}
 .long-case-content .case-story-block p,.long-block-copy p{font-size:16px;line-height:1.7;margin-bottom:16px;overflow-wrap:break-word}
 .long-block{margin:40px 0}.long-editorial{grid-template-columns:minmax(0,1fr);gap:16px}.long-block-copy:empty{display:none}
 .long-block-galleries,.long-gallery-group{min-width:0}
 .long-gallery,.long-gallery.duo,.long-gallery.trio,.long-gallery.fixed-three,.long-gallery.fixed-five{grid-template-columns:minmax(0,1fr);gap:18px}
 .long-gallery.portraits{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .long-comparison .long-block-galleries{grid-template-columns:minmax(0,1fr);gap:30px}.long-comparison .long-gallery-group{margin:0}.long-comparison h3{font-size:17px;margin-bottom:12px}
 .long-gallery.adaptation{grid-template-columns:minmax(0,1fr);gap:22px}.long-gallery.adaptation>figure:nth-child(2){width:min(82%,300px);justify-self:center}
 .long-gallery figcaption{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
 .case-lightbox{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:10px;border-radius:10px}.case-lightbox>img{max-height:calc(100dvh - 110px);touch-action:pan-y pinch-zoom}.case-viewer-bar{gap:12px;justify-content:space-between;margin-top:12px;padding-bottom:env(safe-area-inset-bottom)}.case-viewer-bar button{width:44px;height:44px;padding:8px;flex-shrink:0}.case-viewer-bar [data-count]{font-size:14px;font-variant-numeric:tabular-nums}
 .editor-page header{display:flex;flex-wrap:wrap;padding:16px;gap:10px}.editor-page header h1{font-size:20px;width:100%;margin:0 0 6px}.editor-page header button,.editor-page header .link{min-height:44px;font-size:14px;padding:10px 12px}
 .editor-page main{padding:20px 16px}.editor-page input,.editor-page textarea,.editor-page select{font-size:16px}.editor-page input:not([type=checkbox]):not([type=color]),.editor-page select{min-height:44px}.editor-page .project-workspace{grid-template-columns:minmax(0,1fr)}.editor-page .project-edit,.editor-page .media-edit{padding:16px}.editor-page .project-preview{padding:16px;position:static;max-height:none}
}
@media(hover:none),(pointer:coarse){
 .reel-player .reel-controls button,.long-case-content .reel-controls button{width:44px;height:44px;min-width:44px;min-height:44px}
 .reel-player .reel-audio{top:10px;right:10px}.reel-player .reel-full{right:10px;bottom:10px}
 .reel-player .reel-volume{display:none}.reel-player .reel-play{left:50%!important;top:50%!important}
 .reel-player .reel-watch-circle{width:80px;height:80px;font-size:14px}
 .reel-player.player-ready:not(.is-watch-prompt):not(.is-playing) .reel-play,.reel-player.player-ready:not(.is-watch-prompt):not(.is-playing) .reel-controls{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
 .reel-error{left:10px;right:10px;bottom:60px;padding:10px;font-size:14px!important;line-height:1.5}
}

/* Galleries reflow into rows instead of keeping a horizontal strip. */
.long-case-content,.long-block,.long-block-galleries,.long-gallery-group,.long-gallery{min-width:0;max-width:100%}
@media(max-width:1000px){
 .long-gallery.icon-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:22px;overflow:visible;scroll-snap-type:none;padding:0}
 .long-gallery.storyboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;gap:16px}
}
@media(max-width:600px){
 .long-gallery.icon-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .long-gallery.storyboard-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* Keep each storyboard frame beside its final version on phones and tablets. */
@media(max-width:1000px){
 .long-comparison .long-block-galleries{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
 .long-comparison .long-gallery.storyboard-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .long-comparison .long-gallery-group{margin:0;min-width:0}
 .long-comparison h3{font-size:14px;line-height:1.4;min-height:2.8em;margin-bottom:12px}
 .long-comparison .case-image-open{aspect-ratio:16/9}
 .long-comparison .case-image-open img{width:100%;height:100%;object-fit:contain}
}

/* The desktop logo animation is reframed as a separate square on phones. */
@media(max-width:800px){
 body:not(.editor-page) main>.hero{display:flex;flex-direction:column;padding-top:24px}
 .hero>.eyebrow{order:0}.hero>h1{order:1}.hero>.role{order:2}.hero>.hero-bottom{order:4;margin-top:12px}
 .hero>.hero-background{display:block;position:relative;inset:auto;z-index:0;order:3;flex:none;width:min(100%,360px);height:auto;aspect-ratio:1;margin:8px auto 0;transform:none;max-width:100%}
 .hero>.hero-background .hero-video{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
}

/* Animated WebP avoids mobile video autoplay restrictions and native Play UI. */
.hero-background .hero-video[hidden]{display:none}
@media(max-width:800px){
 .hero>.hero-background .hero-video{display:none}
 .hero-mobile-animation{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
}