/* Phone refinements only. Desktop styles and animation geometry remain upstream. */
@media (max-width:640px){
 html{scroll-padding-top:125px;-webkit-text-size-adjust:100%}
 body{overflow-wrap:break-word}
 .jm-bar .jm-bar-inner,.jm-bar.jm-bar-on .jm-bar-inner{width:calc(100% - 40px);max-width:none;margin-top:max(12px,env(safe-area-inset-top));padding:4px 0;gap:12px;align-items:flex-start}
 .jm-bar .jm-identity{min-width:0;gap:4px;padding-top:5px}
 .jm-bar .name{font-size:15px;line-height:1.35}
 .jm-bar .jm-bar-title{display:block;font-size:12px;line-height:1.4}
 .jm-bar .jm-barnav{gap:0;margin-top:-3px}
 .jm-bar .jm-barlink{display:flex;align-items:center;min-height:30px;padding:4px 4px 4px 16px;font-size:14px;line-height:1.4}
 .jm-bar .jm-barlink[aria-current=page]::before{top:13px}
 .hero{padding:155px 20px 0}
 .hero #hero-title{font-size:clamp(29px,7.9vw,47px);line-height:1.08;letter-spacing:-.025em;max-width:100%}
 .hero .hero-bottom{padding-top:36px;gap:8px;grid-template-columns:minmax(0,1fr)}
 .hero .queen-slot{width:180px;min-height:190px}
 .hero .queen-slot .queen-stage{width:180px;height:240px;top:-38px;left:10px}
 .hero .hero-copy{width:100%;max-width:42ch;margin:0;font-size:16px}
 .hero .intro{font-size:16px;line-height:1.55;letter-spacing:-.006em;margin-bottom:20px}
 .hero .copy-footer{margin-top:20px;margin-bottom:32px}
 .hero .contact-sentence{font-size:17px;line-height:1.55}
 #direction-cycle{min-height:36px}
 .hero-bottom>.piece-prompt{font-size:13px;line-height:1.5}
 .logo-wall{padding:24px 20px 45px}
 .logo-wall h2,.career-section h2{font-size:clamp(30px,8vw,40px);line-height:1.12;letter-spacing:-.025em;margin:12px 0 28px}
 #clients{scroll-margin-top:120px}
 .clients-scroll{max-width:100%;padding-bottom:14px;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
 .clients-scroll .client-board{grid-template-rows:repeat(4,100px);grid-auto-columns:132px;gap:4px}
 .clients-scroll .client-feature{padding:16px;min-width:0}
 .clients-scroll .client-name{font-size:12px;line-height:1.35;max-width:75%}
 .clients-scroll .client-feature .client-story h3{font-size:25px;line-height:1.12;margin-bottom:7px}
 .clients-scroll .client-story p{font-size:12px;line-height:1.4}
 .clients-scroll .client-feature:hover .client-story,.clients-scroll .client-feature:focus-within .client-story,.clients-scroll .client-feature:hover .client-top,.clients-scroll .client-feature:focus-within .client-top{max-width:100%}
 .client-logo{padding:20px}
 .all-projects-link{font-size:15px;line-height:1.5;padding:12px 0;margin-top:18px;min-height:44px}
 .career-section{padding:20px 20px 0;margin-bottom:50px}
 .career-track{margin-top:35px}
 .career-track::before,.career-track .career-entry::before{left:30%}
 .career-track .career-entry{grid-template-columns:30% minmax(0,1fr);padding-bottom:58px}
 .career-track .career-date{font-size:clamp(20px,5.2vw,25px);line-height:1.3;padding-right:16px;letter-spacing:-.025em}
 .career-body{min-width:0;padding-left:20px}
 .career-track .career-position{font-size:15px;line-height:1.5}
 .career-track .career-entry p{font-size:14px;line-height:1.6;margin-top:12px}
 .about-main{padding:150px 20px 50px}
 .about-intro h1{font-size:clamp(42px,11vw,62px);line-height:1.06;margin-bottom:32px}
 .about-bio{margin-left:0;max-width:43ch;font-size:16px;line-height:1.6}
 .about-email{font-size:15px;max-width:100%;overflow-wrap:anywhere;min-height:44px;padding:10px 0}
 .about-offers{margin-top:52px}
 .about-service{grid-template-columns:32px minmax(0,1fr);gap:8px;margin-bottom:40px}
 .about-number{font-size:18px;padding-top:4px}
 .about-service h2{font-size:clamp(24px,6.5vw,30px);line-height:1.2;margin-bottom:14px}
 .about-service p{font-size:16px;line-height:1.6;margin-bottom:14px}
 .about-keywords{font-size:13px;line-height:1.7;gap:4px 8px}
 .about-keywords li+li::before{content:none}
 .about-contact{margin:55px 0 0 40px}
 .about-contact h2{font-size:clamp(30px,8.5vw,40px);line-height:1.1}
 .work-main{padding:150px 20px 55px}
 .work-main>h1{font-size:clamp(42px,11vw,60px);line-height:1.06;margin-bottom:32px}
 .work-search{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin-bottom:32px}
 .work-search>div{min-width:0;gap:8px}
 .work-search input{font-size:16px;min-height:46px}
 .work-search button{min-width:44px;min-height:44px}
 .work-meta{font-size:13px;gap:14px;line-height:1.5;margin-top:14px;flex-wrap:wrap}
 .work-card h2{font-size:29px;line-height:1.15;margin:10px 0}
 .work-card p{font-size:14px;line-height:1.55}
 .work-grid{gap:36px}
 .example-page .example-main{width:calc(100% - 40px);padding:145px 0 45px}
 .example-page .project-tools{margin-bottom:18px}
 .example-page .back{display:inline-flex;align-items:center;min-height:44px;font-size:14px;margin-bottom:16px}
 .example-page .project-tools .back{margin:0}
 .example-page .hero-media{aspect-ratio:auto}
 .example-page figure.media.hero-media{aspect-ratio:16/10}
 .example-page .hero-media img{max-width:100%;height:auto;max-height:none;object-fit:contain}
 .example-page .opening,.example-page .soas-opening{display:block;padding:28px 0 40px}
 .example-page .editorial-title{margin-bottom:24px;min-width:0}
 .example-page .opening h1,.example-page.soas-page .opening h1{font-size:clamp(36px,9.8vw,54px);line-height:1.1;letter-spacing:-.03em;margin:16px 0 0;max-width:100%;overflow-wrap:normal}
 .example-page .editorial-client{max-width:180px}
 .example-page .editorial-client .project-logo{max-width:100%;margin-bottom:0}
 .example-page .standfirst{font-size:17px;line-height:1.6;margin-bottom:22px}
 .example-page .overview,.example-page .editorial-overview{display:block;margin:24px 0}
 .example-page .overview>div{column-count:1;min-width:0}
 .example-page .overview p,.example-page.project-page .opening .overview p{font-size:16px;line-height:1.65;margin-bottom:18px}
 .example-page .overview dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;margin:26px 0 0;font-size:13px;line-height:1.6}
 .example-page .overview dl div{min-width:0;margin:0}
 .example-page .overview dt{font-size:12px}
 .example-page .overview dd{overflow-wrap:break-word}
 .example-page .preview-chip{display:inline-flex;align-items:center;min-height:44px;font-size:13px;padding:10px 15px}
 .example-page .narrative{width:100%;max-width:none;margin:30px 0 42px;padding:0}
 .example-page .narrative h2{font-size:28px;line-height:1.18;letter-spacing:-.02em;margin-bottom:18px}
 .example-page .narrative p,.example-page .narrative li{font-size:16px;line-height:1.65}
 .example-page .narrative p{margin-bottom:20px}
 .example-page .chapter{margin:45px 0 24px;padding:13px 14px;gap:11px;font-size:15px;line-height:1.5;min-width:0}
 .example-page .chapter svg{width:20px;height:20px;flex:0 0 20px}
 .example-page .chapter>span{min-width:0}
 .example-page .chapter+.narrative{margin-top:24px}
 .example-page .project-statement{margin:45px 0 55px}
 .example-page .project-statement h2{font-size:clamp(31px,8vw,42px);line-height:1.15}
 .example-page .project-statement p{font-size:14px;line-height:1.6}
 .example-page .project-media,.example-page.project-page .project-media{margin:28px 0 42px}
 .example-page .project-media.hero-media{margin:0}
 .example-page .original-media-spread{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:28px 0 42px}
 .example-page .original-media-spread .project-media{margin:0!important}
 .example-page .original-media-spread img{max-height:65svh!important;object-fit:contain!important}
 .example-page .portrait-media{width:min(100%,300px);margin:32px auto 45px!important}
 .example-page .portrait-media img,.example-page .portrait-media video{max-height:68svh;object-fit:contain}
 .example-page .film-media video{max-width:100%;height:auto}
 .example-page .motion-toggle{min-height:44px;padding:10px 15px;font-size:13px}
 .example-page .project-media figcaption,.example-page .process figcaption,.example-page .project-diagram figcaption{font-size:12px;line-height:1.6}
 .example-page .project-detail{margin:40px 0 50px;font-size:15px;line-height:1.65}
 .example-page .project-detail .case-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .example-page .project-detail>div:first-child:not(.case-grid){flex-wrap:wrap;gap:8px;font-size:12px}
 .example-page .project-diagram{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin:40px 0 50px;padding-bottom:12px}
 .example-page .project-diagram svg{min-width:620px;width:100%;height:auto}
 .example-page .process{max-width:100%;margin:35px 0 50px;grid-template-columns:minmax(0,1fr);gap:18px}
 .example-page .process>div{padding:22px 16px}
 .example-page .process h3{font-size:19px}
 .example-page .process p{font-size:15px;line-height:1.6}
 .example-page .soas-research{margin:40px 0 50px;padding:28px 0}
 .example-page .research-map{grid-template-columns:minmax(0,1fr);gap:30px}
 .example-page .research-heading h2{font-size:30px;line-height:1.16}
 .example-page .research-sources{max-width:100%}
 .example-page .research-sources>span{font-size:14px}
 .example-page .research-focus p,.example-page .research-answer p{font-size:30px;line-height:1.2}
 .example-page .research-delivery{font-size:13px;line-height:1.5}
 .example-page .soas-research figcaption{font-size:12px;line-height:1.6}
 .example-page .principles{width:100%;margin:20px 0 45px;gap:10px}
 .example-page .principles article{padding:20px}
 .example-page .principles p{font-size:15px;line-height:1.6}
 .example-page .results,.example-page .soas-results{max-width:100%;padding:28px 20px;margin:40px 0 50px}
 .example-page .results h2{font-size:clamp(30px,8vw,40px);line-height:1.15;margin:18px 0 28px}
 .example-page .editorial-metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:24px 0 0}
 .example-page .results .metric{margin:0;padding:0;min-width:0}
 .example-page .results .metric strong,.example-page.project-page .results .metric strong{font-size:clamp(48px,15vw,74px);line-height:1.1;overflow-wrap:anywhere}
 .example-page .results .metric p{font-size:14px;line-height:1.6;margin:10px 0 0}
 .example-page .results>p{font-size:13px;line-height:1.6;margin:24px 0 0}
 .example-page .example-footer{padding-top:28px;margin-top:45px;gap:18px}
 .example-page .example-footer>a{font-size:clamp(30px,8.5vw,44px);line-height:1.16;overflow-wrap:break-word}
 .example-page .footer-links{flex-direction:column;gap:2px;margin-top:12px}
 .example-page .example-footer .footer-links a{display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5}
}
@media (max-width:640px){
 .clients-scroll .client-board{grid-template-columns:var(--touch-columns,none);transition:grid-template-columns .5s cubic-bezier(.2,.75,.2,1)}
 .clients-scroll .client-feature{overflow:hidden}
 .clients-scroll .client-feature.is-touch-expanded .client-case-image{opacity:1;transform:translateX(0);width:44%}
 .clients-scroll .client-feature.is-touch-expanded .client-top,.clients-scroll .client-feature.is-touch-expanded .client-story,.clients-scroll .client-feature.is-touch-expanded:hover .client-top,.clients-scroll .client-feature.is-touch-expanded:hover .client-story,.clients-scroll .client-feature.is-touch-expanded:focus-within .client-top,.clients-scroll .client-feature.is-touch-expanded:focus-within .client-story{max-width:52%}
 .clients-scroll .client-feature.is-touch-expanded .client-name{max-width:100%}
 .clients-scroll .client-feature.is-touch-expanded .client-link>span:first-child{display:none}
 .clients-scroll .client-feature:not(.is-touch-expanded) .client-case-image{opacity:0;transform:translateX(30px)}
}
@media (max-width:640px){.clients-scroll .client-board.is-measuring{transition:none}}

@media(max-width:640px){.landing-section{height:135svh}.board-stage,.board-stage.is-approaching{height:100svh}}

/* Keep sideways gestures inside the project rail, never the document. */
@media (max-width:640px){
 html{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
 body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
 main{min-width:0;max-width:100%}
 .logo-wall{min-width:0;max-width:100%}
 .logo-wall .clients-window{width:calc(100% + 40px);max-width:calc(100% + 40px);margin-inline:-20px;min-width:0}
 .clients-window .clients-scroll{width:100%;min-width:0;max-width:100%;overscroll-behavior-x:contain}
 @supports (overflow:clip){html{overflow-x:clip}}
}

/* Unified expansion for tablet, phone, mouse and keyboard. */
@media(min-width:0px){.clients-scroll .client-board{grid-template-columns:var(--desktop-columns,none);transition:grid-template-columns .65s cubic-bezier(.16,1,.3,1)}.clients-scroll .client-board.is-desktop-measuring{transition:none}#clients .client-feature.is-touch-expanded .client-case-image{opacity:1;transform:translateX(0);width:44%}#clients .client-feature:not(.is-touch-expanded) .client-case-image{opacity:0;transform:translateX(30px)}}