/* Saudi Arcan: a compact scale with real weight contrast and steady reading copy. */

:root{--type-hero:clamp(2.25rem,1.55rem + 2.9vw,4.375rem);--type-section:clamp(1.875rem,1.3rem + 2vw,2.875rem);--type-small-heading:clamp(1.5rem,1.2rem + .9vw,1.875rem)}
body{font-kerning:normal;text-rendering:optimizeLegibility}
#main :is(h1,h2,h3){font-family:var(--font-display);font-weight:400;text-wrap:balance}
#main h1{font-size:var(--type-hero);line-height:1.16;letter-spacing:-.032em;overflow-wrap:break-word}
#main h2{font-size:var(--type-section);font-weight:500;line-height:1.2;letter-spacing:-.025em}
#main h3{font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem);font-weight:700;line-height:1.35;letter-spacing:-.015em}
#main :is(.copy-section,.project-overview,.enquiry-summary) h2{font-size:var(--type-small-heading);font-weight:650;line-height:1.3;letter-spacing:-.025em}
#main .portfolio-project h2{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.125rem);line-height:1.2}
#main .eyebrow{font-family:var(--font-body);font-weight:500;font-size:.875rem;line-height:1.6;letter-spacing:.11em}
#main :is(.copy-section,.about-intro,.section-intro,.contact-intro,.project-overview) p:not(.eyebrow){font-size:1rem;line-height:1.8;text-wrap:pretty}
#main :is(.copy-section,.about-intro,.project-overview) p{max-width:64ch}
#main .film-copy h1{font-size:clamp(2.25rem,1.75rem + 3.2vw,4.875rem);line-height:1.14;letter-spacing:-.035em}
#main .film-copy h2{font-size:clamp(2rem,1.45rem + 2.5vw,3.5rem);line-height:1.2;letter-spacing:-.025em}
#main .film-description{font-size:1rem;line-height:1.8;max-width:48ch;text-wrap:pretty}
#main .film-promise{font-size:1rem;line-height:1.7}
#main .client-grid figcaption{font-size:.875rem;line-height:1.55;min-height:3.1em}
.type-heading{word-spacing:.045em}
.type-word{display:inline-block;vertical-align:top;max-width:100%;overflow:clip;padding:.13em .035em;margin:-.13em -.035em}
.type-ink{display:inline-block;max-width:100%;vertical-align:top;overflow-wrap:anywhere}
@media(min-width:1000px) and (max-height:950px){
 #main .film-enhanced .film-copy h1{font-size:clamp(2.875rem,1.5rem + 3.2vw,4.375rem)}
 #main .film-enhanced .film-copy h2{font-size:clamp(2.375rem,1.3rem + 2.2vw,3.25rem)}
}
@media(max-width:600px){
 #main .eyebrow{font-size:.75rem;letter-spacing:.09em}
 #main .film-copy h1{font-size:clamp(2.25rem,1.1rem + 5.2vw,3rem)}
 #main .film-copy h2{font-size:clamp(2rem,1.1rem + 4.2vw,2.625rem)}
 #main .client-grid figcaption{min-height:4.65em}
}
@media(prefers-reduced-motion:reduce){.type-ink{transform:none!important;opacity:1!important;animation:none!important}}
@media print{.type-word{display:inline;overflow:visible;padding:0;margin:0}.type-ink{display:inline;transform:none!important;opacity:1!important}}

#main :is(h1,h2) :is(strong,em,.type-emphasis){font-weight:700;font-style:normal}
#main .about-hero h1>span:not(.type-emphasis){color:inherit}
#main .about-hero .type-emphasis{color:var(--ink)}

/* Uppercase is reserved for short structural labels and process titles. */
#main .eyebrow{text-transform:uppercase}
#main :is(.method-grid,.approach-steps) h3{text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
#main :is(.space-steps,.business-steps) h3{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem)}
#main :is(.about-intro,.section-intro,.contact-intro,.project-overview,.practice-pair,.space-situations,.space-steps,.business-steps,.business-scope,.approach-steps,.method-grid,.portfolio-project-copy) p:not(.eyebrow),
#main :is(.film-description,.film-promise,.service-row p,.clients-intro>p,.about-note,.invitation>div>p:not(.eyebrow)){font-size:.9375rem!important;line-height:1.8}