/* 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}}

/* The same category bar stays at the same left anchor on every portfolio page. */
:root{--category-gutter:clamp(16px,2.1vw,40px)}
.portfolio>.gallery-toolbar,.fashion-eyebrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px 24px;direction:ltr;border-top:1px solid var(--line);padding-top:14px}
.portfolio>.gallery-toolbar{margin-inline:calc(var(--category-gutter) - 10px)}
.fashion-eyebrow{margin-inline:calc(var(--category-gutter) - var(--fashion-gutter))}
.gallery-toolbar .selection-label,.fashion-eyebrow>span{grid-column:2;grid-row:1;justify-self:end;min-width:0;line-height:14px}
.gallery-toolbar .filters,.fashion-sectors,html[dir="rtl"] .gallery-toolbar .filters,html[dir="rtl"] .fashion-sectors{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:baseline;direction:ltr;gap:22px;flex-basis:auto;margin:0;margin-inline-start:0;padding:0;white-space:nowrap;font-size:11px;letter-spacing:0}
.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,.fashion-sectors a,.gallery-toolbar .motion-controls button{font-size:11px;line-height:1.5;padding:6px 0;border-bottom:1px solid transparent}
.gallery-toolbar .motion-controls[hidden]{display:none}
html[dir="rtl"] .gallery-toolbar .selection-label,html[dir="rtl"] .fashion-eyebrow>span{direction:rtl}
@media(max-width:700px){
 :root{--category-gutter:16px}
 .portfolio>.gallery-toolbar,.fashion-eyebrow{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px auto;gap:4px 16px}
 .gallery-toolbar .selection-label,.fashion-eyebrow>span{grid-column:1/-1;grid-row:1;justify-self:start;line-height:14px;padding:0}
 .gallery-toolbar .filters,.fashion-sectors,html[dir="rtl"] .gallery-toolbar .filters,html[dir="rtl"] .fashion-sectors{grid-column:1;grid-row:2;justify-self:start;gap:18px;font-size:10px}
 .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,.fashion-sectors a,.gallery-toolbar .motion-controls button{font-size:10px;line-height:1.5}
}
@media(max-width:639px){.portfolio>.gallery-toolbar{margin-inline:calc(var(--category-gutter) - 7px)}}
@media(prefers-reduced-motion:reduce){.gallery-toolbar .motion-controls{display:none}}