/* Keep the home shortcut and menu in reach on every page. */
:root{--site-header-height:88px}
html{scroll-padding-top:calc(var(--site-header-height) + 20px)}
.header{position:sticky;top:0;z-index:20;height:var(--site-header-height);background:var(--paper);border-bottom:1px solid var(--line);direction:ltr;gap:18px}
.home-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:44px;color:var(--ink)}
.home-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.header .menu-button{flex:0 0 40px;margin:0}
html[dir="rtl"] .header .desktop-nav{direction:rtl}
.about-index{top:var(--site-header-height)}
.about-section{scroll-margin-top:64px}
@media(max-width:800px){
 :root{--site-header-height:64px}
 .header{padding:8px 12px;gap:8px}
 .header .wordmark{font-size:28px;letter-spacing:-1.8px;flex:1;min-width:0}
 .header .language-switch{margin:0;gap:3px;font-size:9px}
 .header .language-switch a{min-width:22px;padding-inline:2px}
 .header .language-switch a[lang="ar"]{font-size:11px}
 .home-button,.header .menu-button{flex-basis:36px;width:36px;height:44px;padding:4px}
 .header .menu-button span{width:22px;height:1px}
 .menu-dialog .wordmark{font-size:28px;letter-spacing:-1.8px}
 .menu-dialog nav{margin:30px 0 40px}
 .menu-dialog nav a,html[dir="rtl"] .menu-dialog nav a{font-size:26px;line-height:1.2;letter-spacing:-.7px;padding:19px 0}
 .menu-dialog nav a span,html[dir="rtl"] .menu-dialog nav a span{margin-inline-end:16px;font-size:9px}
 .about-page .about-hero h1,.about-page .about-film-copy h1{font-size:26px;line-height:1.15;letter-spacing:-.8px}
 .about-page .about-story h2,.about-page .about-service-intro h2,.about-page .about-process h2,.about-page .about-works-heading h2{font-size:24px;line-height:1.2;letter-spacing:-.6px}
 .about-page .about-invitation h2{font-size:26px;line-height:1.18;letter-spacing:-.7px}
 .about-page .about-story-copy .about-large-copy{font-size:16px;line-height:1.5;letter-spacing:-.2px}
 .about-page .about-film-copy .about-hero-lead{font-size:12px;line-height:1.7}
 .about-page .service-item h3{font-size:17px;line-height:1.3;letter-spacing:-.2px}
 .about-page .about-steps h3{font-size:18px;line-height:1.25;letter-spacing:-.3px}
 .about-page .case-copy h2{font-size:25px;letter-spacing:-.7px}
 .about-page .about-section-label{margin-bottom:22px}
 .about-page .about-section{padding-top:40px;padding-bottom:44px;scroll-margin-top:50px}
 .about-page .about-film-intro{gap:26px}
 .about-page .about-invitation-bottom{margin-top:24px}
 .fashion-heading h1{font-size:28px;line-height:1.15;letter-spacing:-.8px}
 .fashion-cover strong{font-size:20px;line-height:1.15}
 #fashion-title{font-size:28px;line-height:1.2;letter-spacing:-.7px}
 .sector-intro h2{font-size:26px;line-height:1.2;letter-spacing:-.7px}
 .detail-copy h2{font-size:26px;line-height:1.2;letter-spacing:-.7px}
 html[dir="rtl"] .about-page :is(h1,h2,h3){letter-spacing:normal;line-height:1.3}
}
@media(max-width:350px){.header{padding-inline:10px;gap:5px}.header .wordmark{font-size:24px;letter-spacing:-1.5px}.header .language-switch{gap:1px}}

/* Category links and the view switch share one baseline at every width. */
.portfolio>.gallery-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px 24px}
.gallery-toolbar .selection-label{grid-column:1;grid-row:1}
.gallery-toolbar .filters,html[dir="rtl"] .gallery-toolbar .filters{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:baseline;gap:22px;flex-basis:auto;margin:0;margin-inline-start:0;padding:0;white-space:nowrap}
.gallery-toolbar .motion-controls,html[dir="rtl"] .gallery-toolbar .motion-controls{grid-column:3;grid-row:1;display:flex;align-items:baseline;gap:0;margin:0;margin-inline-start:0;font-size:11px}
.gallery-toolbar .filters button,.gallery-toolbar .filters .filter-link,.gallery-toolbar .motion-controls button{font-size:11px;line-height:1.5;padding:6px 0}
.gallery-toolbar .motion-controls[hidden]{display:none}
@media(max-width:700px){
 .portfolio>.gallery-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
 .gallery-toolbar .selection-label{grid-column:1/-1;grid-row:1;padding-bottom:4px}
 .gallery-toolbar .filters,html[dir="rtl"] .gallery-toolbar .filters{grid-column:1;grid-row:2;justify-self:start;gap:18px}
 .gallery-toolbar .motion-controls,html[dir="rtl"] .gallery-toolbar .motion-controls{grid-column:2;grid-row:2;justify-self:end}
 .gallery-toolbar .filters button,.gallery-toolbar .filters .filter-link,.gallery-toolbar .motion-controls button{font-size:10px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.gallery-toolbar .motion-controls{display:none}}