/* All directions share the same navigation and touch layout on small screens. */
@media(max-width:768px){
 html{scroll-padding-top:88px;scrollbar-gutter:stable}
 .site-header{opacity:1;visibility:visible;pointer-events:auto;height:68px;padding-inline:22px}
 .site-header .menu-toggle{position:relative;width:44px;height:44px;padding:6px 9px;margin-right:-9px}
 .site-header .menu-toggle>span:not(.menu-label){position:absolute;left:9px;top:13px;width:26px;margin:0}
 .site-header .menu-toggle>span:nth-child(2){top:20px}
 .site-header .menu-label{position:absolute;top:29px;left:0;width:44px;text-align:center;font-size:9px}
 .menu-open .site-header .menu-toggle>span:first-child{transform:translateY(8px) rotate(45deg)}
 .menu-open .site-header .menu-toggle>span:nth-child(2){transform:translateY(1px) rotate(-45deg)}
 .form-opening,.spectrum-opening{display:none}
 .mobile-menu{inset:68px 0 0;padding:clamp(38px,calc(5svh + 10px),58px) 23px max(30px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
 #mobile-menu{background:var(--paper)}
 .variant-2 #mobile-menu{background:#fafbf8}
 .mobile-menu nav{gap:0;counter-reset:menu-item;border-bottom:1px solid rgba(22,34,52,.15)}
 .mobile-menu nav a{counter-increment:menu-item;display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:22px;align-items:baseline;min-height:74px;width:100%;font-size:clamp(29px,8.2vw,35px);line-height:1.3;letter-spacing:-.02em;padding:22px 0;border-top:1px solid rgba(22,34,52,.15);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .45s ease}
 .mobile-menu nav a:before{content:counter(menu-item,decimal-leading-zero);font:10px/1.4 LibreBaskerville,serif;letter-spacing:.04em;opacity:.48}
 .menu-open .mobile-menu nav a{opacity:1;transform:none;transition-delay:calc(var(--menu-order,0)*35ms)}
 .mobile-menu nav a:nth-child(2){--menu-order:1}.mobile-menu nav a:nth-child(3){--menu-order:2}.mobile-menu nav a:nth-child(4){--menu-order:3}.mobile-menu nav a:nth-child(5){--menu-order:4}.mobile-menu nav a:nth-child(6){--menu-order:5}
 .mobile-menu nav a.is-active{text-decoration:none}
 .mobile-menu nav a.is-active:before{opacity:1}
 .variant-12.navy-header-active .mobile-menu nav,.variant-12.navy-header-active .mobile-menu nav a{border-color:rgba(244,245,238,.18)}
 .spectrum-hero-copy{top:clamp(140px,25svh,210px)}
 .variant-sans .form-hero-layout{inset:118px 23px 70px}
 .form-service summary{min-height:76px}
 .form-fields label{min-width:0}
 .form-fields input,.form-fields textarea{max-width:100%;min-width:0}
 .company-copy{min-width:0;overflow-wrap:anywhere}
 .form-profile .company-copy dl{grid-template-columns:max-content minmax(0,1fr);column-gap:15px}
 .form-profile .company-copy dt{white-space:nowrap}
 .form-profile .company-copy dd{min-width:0}
 .work-caption h3{overflow-wrap:anywhere}
 .pagination{flex-wrap:wrap;gap:8px}
 .pagination a{min-width:40px;min-height:44px;text-align:center}
}
@media(max-width:768px) and (max-height:700px){
 .mobile-menu{padding-top:34px;padding-bottom:24px}
 .mobile-menu nav a{min-height:64px;padding-block:17px;font-size:29px}
}
@media(prefers-reduced-motion:reduce){.mobile-menu nav a{transition:none;transform:none}}
@media(max-width:360px){
 .form-hero h1{font-size:clamp(48px,15.6vw,56px)}
 .variant-sans .form-hero h1{font-size:clamp(49px,15.4vw,55px)}
 .form-profile h2 em{font-size:26px}
 .variant-sans .form-profile h2 em{font-size:25px}
 .form-service h3{font-size:26px}
 .form-contact h2{font-size:66px}
 .variant-sans .form-service h3{font-size:25px}
 .spectrum-hero h1{font-size:17.5vw}
}

/* Selected versions: quieter labels in the mobile navigation. */
@media(max-width:768px){
 :is(.variant-13,.variant-14) .mobile-menu nav a{font-size:clamp(26px,7.3vw,31px)}
}
@media(max-width:768px) and (max-height:700px){
 :is(.variant-13,.variant-14) .mobile-menu nav a{font-size:26px}
}