/* STQ phone and tablet layouts. Desktop composition remains in site.css. */
@media(max-width:1000px){
 button,a,input,select,textarea{touch-action:manipulation}
 input,select,textarea{font-size:16px!important}
 .header{padding-inline:5%;gap:12px}
 .portfolio-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}
 .portfolio-filters button{flex:0 0 auto;min-height:44px;font-size:14px}
 .portfolio-toolbar{display:block}.portfolio-toolbar>span{display:block;margin-top:10px}
 .contact-layout{grid-template-columns:minmax(0,1fr);gap:40px}
 .contact-layout>*{min-width:0}
 .gallery-rail,.people-rail{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .category-bar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
 .category-bar .gallery-filter{flex:0 0 auto;width:auto;min-width:110px;min-height:48px;padding:12px 16px;font-size:14px}
 .animation-player{max-width:96vw;max-height:94dvh;overscroll-behavior:contain}
}
@media(max-width:760px){
 .header{height:88px;min-height:88px;padding:12px 16px;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:8px}
 .header .brand{position:static;grid-column:2;justify-self:center;transform:none;width:100px;height:54px;margin:0}
 .header-side{grid-column:1;min-width:0}.header-actions{grid-column:3;justify-self:end;min-width:0;margin-left:0}
 .menu-toggle{min-width:44px;min-height:44px;gap:8px;font-size:13px}
 .header-design{width:96px;max-width:96px;min-height:44px;padding:8px;font-size:13px}
 #main-menu.navigation{display:block;overflow-y:auto;overscroll-behavior:contain;height:100dvh;max-height:100dvh;padding:104px 6% max(28px,env(safe-area-inset-bottom));align-content:start}
 #main-menu[hidden]{display:none!important}
 #main-menu .menu-primary a{font-size:clamp(28px,8vw,44px);line-height:1.15;padding:7px 0;min-height:46px}
 #main-menu .menu-index{font-size:12px;min-width:32px}
 #main-menu .menu-secondary{margin-top:26px;padding:24px 0 0;border-left:0;border-top:1px solid #ccc}
 #main-menu .menu-secondary>*{top:auto}
 #main-menu .menu-secondary>p{font-size:12px;margin-bottom:16px}
 #main-menu .menu-secondary>a{min-height:44px;font-size:16px}
 #main-menu .menu-legal{display:flex;flex-wrap:wrap;gap:12px 20px}
 #home-page .hero{min-height:740px;height:100svh}
 #home-page .hero-content{inset:auto 6% 68px;display:flex;flex-direction:column;align-items:stretch}
 #home-page .hero .hero-meta{order:2;margin:22px 0 0;gap:14px;align-items:center}
 #home-page .hero .hero-title-block{order:0}
 #home-page .hero .hero-title-block h1{font-size:clamp(46px,12vw,76px);gap:5px;padding:0}
 #home-page .hero .hero-meta .view-project{font-size:17px;line-height:1.35}
 #home-page .hero .slide-panel{flex-basis:126px;width:126px}
 #home-page .hero .circle{width:44px;height:44px}
 #home-page .hero .playback button{font-size:14px;min-height:44px}
 #home-page .design-journey-cta{position:static;order:1;align-self:flex-start;margin-top:22px;padding:16px 22px;min-height:48px;font-size:16px}
 #home-page .scroll-cue{bottom:-44px;font-size:12px}
 .page-heading{padding-top:120px}.page-heading h1{font-size:clamp(42px,12vw,74px);overflow-wrap:anywhere}
 .heading-bottom{display:block}.heading-bottom p{font-size:16px;line-height:1.6}
 .portfolio-grid{grid-template-columns:minmax(0,1fr);gap:38px;padding-inline:6%}
 .portfolio-grid .portfolio-card{padding-top:0;min-width:0}
 .portfolio-caption p,.people-role,.people-toolbar>p,.people-filter select{font-size:14px}
 .portfolio-caption h2,.portfolio-film .portfolio-caption h3{font-size:28px}
 .film-scene{font-size:14px}.portfolio-film .film-scene{color:#666}
 .people-rail{--portrait-width:76vw;scroll-snap-type:x proximity}.people-open{width:44px;height:44px}
 .people-filter select{min-height:44px}.people-directory-heading>p,.people-perspective-bottom p,.people-careers-bottom p{font-size:16px;line-height:1.65}
 .project-facts{grid-template-columns:1fr 1fr}.project-facts dt{font-size:13px}.project-facts dd{font-size:16px;overflow-wrap:anywhere}
 .enquiry-form .form-row{grid-template-columns:1fr}.enquiry-form button[type=submit]{width:100%}
 .enquiry-form label,.enquiry-form legend{font-size:16px}.service-choice span{min-height:46px;display:flex;align-items:center}
 .studio-map iframe{height:280px}.stq-consent{font-size:14px!important}
 .animation-player{padding:16px;width:96vw}.animation-player-top{gap:12px}.animation-player-top button{min-height:44px;flex-shrink:0}
 .animation-player-bottom{flex-wrap:wrap}.animation-player-bottom a{min-height:44px;display:inline-flex;align-items:center}
 .process-page .journey-track{height:auto;min-height:1050px}
 .process-page .journey-scene{height:1050px;min-height:1050px}
 .process-page .journey-visual{top:205px;left:5%;width:90%;height:245px}
 .process-page .journey-copy{top:480px;bottom:auto;left:6%;width:88%}
 .process-page .journey-copy h2{font-size:38px}
 .process-page .journey-copy .journey-kicker{font-size:12px}
 .process-page .journey-copy .journey-lead{font-size:17px;line-height:1.5}
 .process-page .journey-copy .journey-body{font-size:16px;line-height:1.6}
 .process-page .journey-copy .journey-note{font-size:13px;line-height:1.5}
 .journey-playback{bottom:55px}.journey-playback button{font-size:14px;min-height:44px}
 .journey-scene-bottom{font-size:12px}
}
@media(max-width:360px){.header{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)}.header .brand{width:82px;height:46px}.header-design{width:88px;max-width:88px;font-size:12px}.menu-toggle #menu-label{display:none}.project-facts{grid-template-columns:1fr}}
@media(hover:none),(pointer:coarse){#stq-cursor,.custom-cursor,.gallery-cursor{display:none!important}.people-rail,.gallery-rail{cursor:auto}.image-link-label,.people-open{opacity:1;transform:none}}

@media(max-width:760px){
 .process-page{--journey-header:88px;--journey-nav:88px}
 .journey-jump{min-height:44px;font-size:12px}
 .contact-info a,.footer a{overflow-wrap:anywhere}
 .portfolio-film .film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:white;color:#002d66}
}

/* Keep long service and legal content readable within phone widths. */
@media(max-width:760px){
 .legal-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .legal-layout>div,.editorial-section>div,.accordion-body,.project-summary>p{min-width:0}
 .legal-layout h2{font-size:25px;line-height:1.3;overflow-wrap:anywhere}
 .legal-layout p,.accordion-body p,.accordion-body li{font-size:16px;line-height:1.75}
 .legal-layout a,.contact-channel a,.accordion-body a{overflow-wrap:anywhere}
 .page-topline .eyebrow,.next-page>.eyebrow{font-size:12px;line-height:1.5}
 .page-note,.project-facts dt,.portfolio-caption p,.gallery figcaption{font-size:14px}
 .founders-letter-copy p{font-family:var(--font-body,Arial,sans-serif);font-size:17px;line-height:1.8}
 .founders-letter-copy p:first-child{font-family:STQHand,'Segoe Print',cursive;font-size:29px}
 .project-summary>p{font-size:18px;line-height:1.7}
 .accordion-list summary>span{min-width:0;overflow-wrap:anywhere}
 .people-gallery-controls button,.gallery-arrows button{min-width:44px;min-height:44px}
 #main-menu .menu-legal a{min-height:44px;font-size:14px}
}
@media(max-width:400px){.accordion-body{margin-left:0}.role-facts{gap:20px}}