/* Approved large-screen refinements; smaller viewports retain the existing layout. */
@media(min-width:2200px){
 .topbar nav a,.topbar .role{font-size:clamp(10px,.36vw,14px)!important}
 .topbar .wordmark,footer .wordmark{font-size:clamp(16px,.55vw,21px)!important}
 .hero-copy{width:clamp(390px,14vw,540px)}
 .hero h1{font-size:clamp(112px,3.7vw,144px)!important}
 .hero-copy .lead{font-size:clamp(16px,.58vw,22px)!important}
 .eyebrow{font-size:clamp(11px,.4vw,15px)!important}
 .round-link,.section-line a,.footer-mail,footer>div span{font-size:clamp(10px,.36vw,14px)!important}
 .grading-copy>p:not(.eyebrow),.about-copy,.process-card p,.series-intro>p:not(.eyebrow){font-size:clamp(15px,.53vw,20px)!important}
 footer>p{font-size:clamp(12px,.42vw,16px)!important}
 #work .project{height:clamp(292px,10vw,420px)}
 #work .project:is(.portrait,.retro,.group,.person) img{object-position:50% 0%}
 #work .project span b{font-size:clamp(10px,.36vw,14px)!important}
 #work .project span small{font-size:clamp(12px,.42vw,16px)!important}
 .brands-content h1{font-size:clamp(62px,2.2vw,84px)}
 .brands-content .brands-intro{font-size:clamp(15px,.55vw,21px)}
 .brand-logo-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:24px}
 .brand-logo-grid .brand-logo{flex:0 0 20%;height:130px;padding:18px 24px}
 .brand-logo-grid .brand-logo img{width:calc(var(--logo-width) * 1.3);height:calc(var(--logo-height) * 1.3)}
 .brand-logo-grid .brand-logo::after{display:block}
 .brand-logo-grid .brand-logo:nth-child(5n)::after{display:none}
}
@media(min-width:3000px){
 .brand-logo-grid .brand-logo{flex-basis:10%;height:160px;padding:20px 24px}
 .brand-logo-grid .brand-logo img{width:calc(var(--logo-width) * 1.5);height:calc(var(--logo-height) * 1.5)}
 .brand-logo-grid .brand-logo:nth-child(5n)::after{display:block}
 .brand-logo-grid .brand-logo:last-child::after{display:none}
}