/* Touch refinement. The mark, media gates and desktop film remain owned by
   their existing styles. Section navigation opens only when it is needed. */
.nav-sections-toggle{display:none}

@media(max-width:700px){
 :root{--nav-height:64px}
 .navigation{display:flex;height:var(--nav-height);padding:10px var(--gutter);gap:8px;isolation:isolate}
 .navigation .brand{min-height:44px;flex-shrink:0}
 .navigation .nav-contact{grid-column:auto;grid-row:auto;margin-left:auto;min-height:44px;gap:15px;padding:8px 10px;font-size:11px}
 .nav-sections-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;background:transparent;border:1px solid transparent;position:relative;margin-left:auto}
 .nav-sections-toggle::before,.nav-sections-toggle::after{content:"";position:absolute;width:18px;height:1px;background:currentColor;transition:transform .2s}
 .nav-sections-toggle::before{transform:translateY(-3px)}
 .nav-sections-toggle::after{transform:translateY(3px)}
 .nav-sections-toggle[aria-expanded="true"]{border-color:var(--line)}
 .nav-sections-toggle[aria-expanded="true"]::before{transform:rotate(45deg)}
 .nav-sections-toggle[aria-expanded="true"]::after{transform:rotate(-45deg)}
 .navigation nav{display:none;position:absolute;inset:100% 0 auto;margin:0;padding:0 var(--gutter) 7px;gap:8px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 20px #29292308}
 .navigation[data-sections-open="true"] nav{display:grid;grid-template-columns:1.25fr 1fr 1fr}
 .navigation nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:9px 0;font-size:12px;white-space:nowrap}
 .navigation nav a:first-child{justify-content:flex-start}
 .navigation nav a:last-child{justify-content:flex-end}
 .navigation nav a[aria-current]::after{bottom:7px}
 .work-tabs{min-height:52px;gap:6px;align-items:stretch;scroll-margin-top:calc(var(--nav-height) + 12px)}
 .work-tabs button{min-height:52px;padding:9px 4px;flex:1;gap:2px;font-size:10px}
 .work-tabs button span{font-size:12px;line-height:1.25;white-space:nowrap}
 .service-mobile-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0;margin:0;scrollbar-width:none}
 .service-mobile-picker button{width:100%;min-width:0;min-height:48px;white-space:normal;padding:11px 10px;text-align:left;line-height:1.35;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
 .service-mobile-picker button:last-child{grid-column:1/-1}
 .service-mobile-picker button::after{content:"";flex-shrink:0;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;opacity:.55}
 .service-mobile-picker button[aria-pressed="true"]::after{background:currentColor;opacity:1}
 .service-mobile-picker button:active{transform:translateY(1px)}
 .services-layout{gap:20px}
 .services-section{scroll-margin-top:0}
 .hero-link{scroll-margin-top:calc(var(--nav-height) + 12px)}
}

/* In a shallow viewport, let the artwork tabs scroll away so the study keeps
   the available height. Persistent navigation still provides the project CTA. */
@media(max-width:700px) and (max-height:500px){
 .work-tabs{position:static}
 [data-experience="touch"] .hero-copy{inset:18px var(--gutter) 16px}
 .hero-copy>.eyebrow{font-size:10px;max-width:none}
 .hero-copy h1{font-size:clamp(48px,11vw,65px);margin:17px 0 0;max-width:50%;line-height:.9}
 .hero-note{position:absolute;left:56%;top:53px;font-size:12px;max-width:24ch;line-height:1.5}
 [data-experience="touch"] .hero-link{left:56%;bottom:0;padding:11px 12px;gap:16px;min-height:44px;font-size:12px}
 .film-skip{display:none}
}

@media(min-width:701px) and (max-width:1050px){
 .navigation nav a{min-height:44px;display:flex;align-items:center;padding:9px 0}
 .navigation .brand{min-height:44px}
}

@media(prefers-reduced-motion:reduce){
 .nav-sections-toggle::before,.nav-sections-toggle::after{transition:none}
 .service-mobile-picker button:active{transform:none}
}