/* Website adaptation of the supplied Saudi Arcan system. Reference tokens stay intact. */
:root {
 --sand:var(--desert-sand); --muted:var(--graphite); --line:var(--iron);
 --gutter:max(clamp(20px,4vw,64px),calc((100vw - 1600px)/2));
 --section-space:clamp(64px,7vw,112px);
 --web-display:clamp(2.5rem,5vw,5.25rem);
 --web-heading:clamp(2rem,3.3vw,3.5rem);
 --web-body:clamp(.9375rem,.88rem + .15vw,1rem);
 --line-on-dark:color-mix(in srgb,var(--pearl) 22%,transparent);
 --ink-scrim:linear-gradient(180deg,transparent 15%,var(--ink) 100%);
 --pattern-iso:url('/brand-system/current/Patterns/pattern-iso.svg');
 --pattern-cubes:url('/brand-system/current/Patterns/pattern-cubes.svg');
}
html{background:var(--pearl);scroll-padding-top:132px}
body.brand-system{background:var(--pearl);color:var(--ink);font-family:var(--font-body);font-size:var(--web-body);line-height:var(--leading-relaxed);font-variant-numeric:tabular-nums}
.brand-system :is(button,input,select,textarea){font-family:inherit}
.brand-system #main :is(h1,h2,h3),.brand-system :is(.footer-invitation h2,.history-year,.nav-full,.service-needs span,.service-method strong){font-family:var(--font-display);letter-spacing:var(--tracking-display)}
.brand-system #main h1{font-size:var(--web-display);line-height:1.05;font-weight:400}
.brand-system #main h2{font-size:var(--web-heading);line-height:1.08;font-weight:400}
.brand-system #main h3{font-size:clamp(1.2rem,1.3vw,1.65rem);line-height:1.25;font-weight:600}
.brand-system #main :is(h1,h2) :is(strong,em,.type-emphasis){font-weight:600}
.brand-system #main :is(.film-copy h1,.about-page h1,.service-hero-copy h1){font-size:var(--web-display);line-height:1.05;letter-spacing:var(--tracking-display)}
.brand-system #main .film-copy h2,.brand-system #main .about-page h2{font-size:var(--web-heading);line-height:1.1;letter-spacing:var(--tracking-display)}
.brand-system #main .eyebrow,.brand-system .eyebrow{font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:500;line-height:1.7;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.brand-system #main :is(.film-description,.film-promise,.service-hero-intro,.about-page p:not(.eyebrow)){font-size:var(--web-body)!important;line-height:1.8}
.brand-system #main :is(.copy-section,.project-overview,.enquiry-summary) h2{font-size:clamp(1.65rem,2.3vw,2.5rem)}
.brand-system #main :is(.method-grid,.approach-steps,.process-flow,.space-steps,.business-steps) h3{font-size:1rem;letter-spacing:.12em;font-weight:600}
.brand-system :is(p,li,dd){overflow-wrap:break-word}
.brand-system :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--graphite);outline-offset:5px}
.brand-system :is(.header,.arcan-footer,.visual-process,.service-outputs,.about-beliefs) :is(a,button):focus-visible{outline-color:var(--desert-sand)}
/* A shared frame: the navigation, editorial content and footer align. */
.brand-system :is(.section,.page-hero,.copy-section,.wide-cta,.arcan-footer){padding-inline:var(--gutter)}
.brand-system #main :is(.section,.about-page .section){padding-block:var(--section-space)}
.brand-system #main .page-hero{padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(48px,6vw,96px)}
/* Keep the gutter outside the readable measure; never subtract it twice. */
.brand-system #main .film-copy{width:min(64vw,calc(760px + var(--gutter)));max-width:none;padding-inline:var(--gutter) 32px}
.brand-system #main .film-copy :is(h1,h2){max-width:14ch;overflow-wrap:normal;word-break:normal}
.brand-system #main .film-copy h2{max-width:20ch}
.brand-system #main .film-description{max-width:52ch}
@media(max-width:999px){.brand-system #main .film-copy{width:100%;max-width:820px;padding-inline:var(--gutter)}}
@media(min-width:1000px) and (max-height:950px){
 .brand-system #main .film-enhanced .film-copy{padding-block:120px 90px}
 .brand-system #main .film-enhanced .film-copy h1{font-size:clamp(3rem,4.2vw,4.5rem)}
 .brand-system #main .film-enhanced .film-copy h2{font-size:clamp(2.4rem,3.4vw,3.5rem)}
 html[lang=ar] .brand-system #main .film-enhanced .film-copy h1{font-size:clamp(2.1rem,3.2vw,3.3rem)!important;line-height:1.5!important}
 html[lang=ar] .brand-system #main .film-enhanced .film-copy h2{font-size:clamp(1.9rem,2.7vw,2.8rem)!important;line-height:1.5!important}
}
.brand-system .header{border-radius:var(--radius-xs);background:var(--ink);border-color:var(--line-on-dark);box-shadow:var(--shadow-sm);backdrop-filter:none;padding-inline:24px;gap:24px;transition:transform var(--duration-slow) var(--ease-standard),background-color var(--duration-normal) var(--ease-standard)}
.brand-system .header.header-scrolled{background:var(--ink);box-shadow:var(--shadow-sm)}
.brand-system .header .brand{border:0;padding:8px 0;padding-inline-end:24px}
.brand-system .header .brand img{width:164px;height:auto}
.brand-system .header .nav-symbol,.brand-system .header .header-language,.brand-system .header .menu-toggle{border-radius:var(--radius-xs);border-color:var(--line-on-dark);background:transparent;color:var(--pearl)}
.brand-system .header .nav-symbol svg{stroke-width:1.6}
.brand-system .header .nav-item[aria-current] .nav-symbol{background:var(--ink-80);border-color:var(--desert-sand)}
.brand-system .header nav .nav-item:hover .nav-symbol,.brand-system .header .header-language:hover{background:var(--ink-80);border-color:var(--pearl)}
.brand-system .header .nav-tooltip{border-color:var(--line-on-dark);background:var(--ink);font-size:var(--text-caption);letter-spacing:0}
.brand-system .header .nav-tooltip::after{display:none}
.brand-system .header nav{border-radius:var(--radius-xs)}
/* Controls are sharp and quiet; existing meaning and interaction stay native. */
.brand-system .button{border-radius:var(--radius-xs);background:var(--ink);color:var(--pearl);border:1px solid var(--ink);min-height:48px;padding:16px 24px;font-size:.75rem;line-height:1.5;font-weight:500;letter-spacing:.12em;text-transform:uppercase;box-shadow:none;transition:background-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.brand-system .button:hover{background:var(--ink-80);border-color:var(--ink-80);transform:none}
.brand-system :is(.arcan-footer,.visual-process,.service-outputs,.wide-cta,.practice-closing) .button{background:var(--desert-sand);border-color:var(--desert-sand);color:var(--ink)}
.brand-system :is(.arcan-footer,.visual-process,.service-outputs,.wide-cta,.practice-closing) .button:hover{background:var(--pearl);border-color:var(--pearl)}
.brand-system .text-link{font-family:inherit;letter-spacing:0;font-size:.875rem;line-height:1.6}
.brand-system :is(input,textarea,select){border:1px solid var(--iron);border-radius:var(--radius-xs);background:var(--pearl);color:var(--ink);box-shadow:none;min-height:48px}
.brand-system :is(input,textarea,select):focus{border-color:var(--graphite)}
.brand-system :is(.service-keywords li,.company-leadership li,.social-links>a,.social-pending,.gallery-dialog,.gallery-dialog button,.collection-layout button){border-radius:var(--radius-xs)}
.brand-system :is(.social-links>a:hover,.about-practice-card:hover .about-practice-image>img,.about-practice-card:focus-visible .about-practice-image>img){transform:none}
.brand-system .arcan-icon{stroke-width:1.6}
/* Practice cards become structured panels; generous typography sits above thin rules. */
.brand-system :is(.practice-offers,.architecture-audiences,.business-starting-points,.business-scope,.service-support,.consultancy-hero){background:var(--pearl)}
.brand-system :is(.visual-section-heading,.about-section-heading){gap:clamp(24px,5vw,80px);margin-bottom:48px}
.brand-system .visual-service-grid{gap:2px;background:var(--iron);border:1px solid var(--iron)}
.brand-system .visual-service{border:0;background:var(--pearl);padding:0;min-width:0}
.brand-system .visual-service-body{padding:clamp(24px,3vw,48px)}
.brand-system .visual-service .service-signature{padding-bottom:24px;border-bottom:1px solid var(--iron);margin-bottom:32px}
.brand-system .service-number{font-family:var(--font-sans);color:var(--graphite);font-size:var(--text-caption)}
.brand-system .service-keywords{gap:8px}
.brand-system .service-keywords li{background:var(--iron-50);color:var(--ink);padding:6px 10px;border:0}
.brand-system .service-visual figcaption,.brand-system .service-hero-media figcaption,.brand-system .about-panorama figcaption{background:var(--ink-scrim);color:var(--pearl);font-family:var(--font-body);font-size:var(--text-caption)}
.brand-system .architecture-offers .service-visual{position:relative}
.brand-system .architecture-offers .service-visual figcaption{position:absolute;bottom:.75rem;inset-inline-end:.75rem;max-width:calc(100% - 1.5rem);margin:0;padding:.4rem .65rem;background:var(--ink);font-size:.6875rem;line-height:1.5}
.brand-system .service-hero-copy{padding:64px 48px 64px var(--gutter)}
.brand-system .service-support-grid{gap:48px 64px}
.brand-system .service-support-card{border-color:var(--iron)}
.brand-system .service-output-grid{gap:2px;border:1px solid var(--line-on-dark);background:var(--line-on-dark)}
.brand-system .service-output-grid>li{border:0;border-radius:0;background:var(--ink);padding:32px}
.brand-system :is(.visual-process,.service-outputs,.about-beliefs){background-color:var(--ink);color:var(--pearl)}
.brand-system .visual-process::before{background-image:var(--pattern-iso);background-size:cover;background-repeat:no-repeat;opacity:.85;inset:-80px;transform:translate3d(0,var(--ambient-shift,0px),0)}
.brand-system .visual-process::after{background:none}
.brand-system .service-outputs::before{background:var(--pattern-cubes) center/cover no-repeat;inset:-48px;opacity:.8}
.brand-system .service-outputs{overflow:hidden}
.brand-system .process-node{background:var(--ink)!important;border-color:var(--line-on-dark);box-shadow:none!important;color:var(--desert-sand)}
.brand-system .process-node .arcan-icon{width:44px;height:44px}
.brand-system .capability-map a:hover .arcan-icon{transform:none}
/* About: equal practice weight, factual history and the supplied concept system. */
.brand-system #main .about-page :is(.about-hero,.company-story,.company-leadership,.company-location,.about-clients){background:var(--pearl)}
.brand-system #main .about-page .about-hero{padding-bottom:0}
.brand-system #main .about-page .about-practices{background:var(--iron-50)}
.brand-system .about-practice-cards{gap:2px;border:1px solid var(--iron);background:var(--iron)}
.brand-system .about-practice-copy{padding:clamp(24px,3vw,48px)}
.brand-system .about-practice-card{background:var(--pearl)}
.brand-system .about-practice-mark{background:var(--ink);border-color:var(--line-on-dark)}
.brand-system .about-beliefs{overflow:hidden;isolation:isolate}
.brand-system .about-beliefs::before{content:'';position:absolute;inset:-48px;background:var(--pattern-iso) center/cover no-repeat;pointer-events:none;z-index:-1}
.brand-system .about-page .purpose-diagram{background:none;border:0}
.brand-system .about-page .brand-concepts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto;align-items:center;gap:8px;padding:0;min-height:160px}
.brand-system .about-page .brand-concepts>span{display:flex;min-height:0;gap:16px;min-width:0;color:var(--pearl);font-size:.75rem;text-align:center}
.brand-system .brand-concepts img{display:block;width:100%;height:auto;aspect-ratio:1}
.brand-system .about-page .company-principles{gap:48px;padding-top:0}
.brand-system .about-page .company-principles article{border-color:var(--line-on-dark)}
.brand-system .about-page .company-history{border:0;padding-inline-start:0}
.brand-system .about-page .history-year{font-size:clamp(4rem,7vw,7rem);letter-spacing:var(--tracking-display);color:var(--ink)}
.brand-system .about-page .about-method{background:transparent}
.brand-system .about-page .client-ribbon{border:0}
.brand-system .about-page .location-panel{border-radius:var(--radius-xs);background:var(--ink) var(--pattern-cubes) center/cover no-repeat;border:1px solid var(--line-on-dark)}
/* Portfolio remains image-led with precise, unobtrusive controls. */
.brand-system :is(.portfolio-index,.project-overview,.gallery-overview){background-color:var(--pearl)}
.brand-system :is(.gallery-chapters a,.gallery-controls button,.gallery-toggle,.gallery-expand,.collection-controls button){border-radius:var(--radius-xs);font-family:var(--font-body);box-shadow:none}
.brand-system :is(.project-gallery,.portfolio-collection) :is(.eyebrow,figcaption){letter-spacing:.12em}
/* Contact gets a legible, intentional working surface. */
.brand-system .conversation-hero{background:var(--pearl)}
.brand-system .conversation-layout{border-top:1px solid var(--iron);gap:clamp(32px,6vw,96px)}
.brand-system .contact-form-wrap{padding:clamp(24px,3vw,48px);background:var(--iron-50);border:1px solid var(--iron)}
.brand-system .preview-notice{background:transparent;border:0;border-bottom:1px solid var(--iron);padding:0 0 24px;color:var(--graphite)}
.brand-system .conversation-step{background:transparent}
.brand-system .conversation-progress li{border-color:var(--iron)}
.brand-system .connection-cards{gap:2px;background:var(--iron);border:1px solid var(--iron)}
.brand-system .connection-cards>a{padding:32px;background:var(--pearl);border:0}
.brand-system .connection-cards>a:hover{background:var(--iron-50)}
.brand-system .enquiry-summary{background:var(--pearl);border:1px solid var(--iron);border-radius:var(--radius-xs)}
/* Footer is a brand ground, with the exact supplied lattice and full lockup. */
.brand-system .arcan-footer{background:var(--ink);color:var(--pearl);padding-top:var(--section-space)}
.brand-system .arcan-footer::before{inset:-64px;background:var(--pattern-cubes) center/cover no-repeat;opacity:.8}
.brand-system .footer-invitation{padding-bottom:48px;border-color:var(--line-on-dark)}
.brand-system .footer-invitation h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;letter-spacing:var(--tracking-display)}
.brand-system .footer-grid{gap:48px;padding-block:48px}
.brand-system .footer-grid .brand{padding-block:8px;display:inline-block}
.brand-system .footer-grid .brand img{width:188px}
.brand-system .footer-grid p{color:var(--iron)}
.brand-system .social-links{flex-wrap:wrap;gap:8px}
.brand-system .social-links>a,.brand-system .social-pending{width:44px;height:44px;border-color:var(--line-on-dark);border-radius:var(--radius-xs);color:var(--pearl)}
.brand-system .social-links>a:hover{background:var(--ink-80)}
.brand-system .footer-bottom{border-color:var(--line-on-dark)}
/* Arabic uses the supplied local subsets, never tracked or forced into Latin leading. */
html[lang=ar] body.brand-system,html[lang=ar] .brand-system :is(button,input,select,textarea,strong,.nav-full,.history-year),html[lang=ar] .brand-system #main :is(h1,h2,h3,.eyebrow),html[lang=ar] .brand-system .footer-invitation h2{font-family:var(--font-arabic)!important;letter-spacing:0!important}
html[lang=ar] .brand-system #main :is(h1,.film-copy h1,.service-hero-copy h1,.about-page h1){font-size:clamp(2rem,4.2vw,4rem)!important;line-height:1.55!important}
html[lang=ar] .brand-system #main :is(h2,.film-copy h2,.about-page h2){font-size:clamp(1.65rem,2.7vw,2.7rem)!important;line-height:1.65!important}
html[lang=ar] .brand-system #main h3{line-height:1.75!important;font-weight:600}
html[lang=ar] .brand-system #main :is(p:not(.eyebrow),.film-description,.film-promise){line-height:2!important}
html[lang=ar] .brand-system .button{letter-spacing:0;text-transform:none;font-size:.8125rem;line-height:1.9}
html[lang=ar] .brand-system .service-hero-copy{padding-inline:var(--gutter) 48px}
html[lang=ar] .brand-system .footer-invitation h2{font-size:clamp(1.6rem,2.7vw,2.7rem);line-height:1.65}
html[lang=ar] .brand-system .header .header-language{font-family:var(--font-sans)!important}
@media(max-width:1100px){
 .brand-system .header{padding:12px 18px;gap:16px}.brand-system .header .brand{padding:0}.brand-system .header .brand img{width:150px}
 .brand-system .header nav{background:var(--ink);border-color:var(--line-on-dark);box-shadow:var(--shadow-md)}
 .brand-system .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
 .brand-system .service-hero-copy{padding:48px 32px 48px var(--gutter)}
}
@media(max-width:760px){
 .brand-system #main :is(.section,.about-page .section){padding-block:64px}
 .brand-system .service-hero-copy,html[lang=ar] .brand-system .service-hero-copy{padding:40px var(--gutter)}
 .brand-system .visual-section-heading{margin-bottom:32px}
 .brand-system .service-support-grid{gap:32px}
 .brand-system .about-practice-cards{gap:24px;border:0;background:transparent}
 .brand-system .about-practice-card{border:1px solid var(--iron)}
 .brand-system .about-page .brand-concepts{gap:6px;min-height:120px}
 .brand-system .about-page .brand-concepts>span{font-size:.65rem;gap:8px}
 .brand-system .footer-invitation{align-items:flex-start}
 .brand-system .contact-form-wrap{padding:24px 16px}
 .brand-system .connection-cards>a{padding:24px}
}
@media(max-width:420px){
 .brand-system .header{padding-inline:12px;gap:8px}.brand-system .header .brand img{width:112px}
 .brand-system .header .menu-toggle{gap:6px;font-size:.6875rem;padding-inline:8px}
 .brand-system .header .header-language{width:44px;min-width:44px;height:44px}
 .brand-system .footer-grid{grid-template-columns:1fr;gap:32px}
 .brand-system .footer-invitation h2{font-size:1.9rem}
 .brand-system .brand-concepts{grid-template-columns:repeat(5,minmax(46px,1fr))!important;gap:4px!important}
 html[lang=ar] .brand-system .brand-concepts>span{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.brand-system .visual-process::before{transform:none!important}.brand-system :is(.button,.header,.nav-symbol){transition:none}}

/* Non-photographic backgrounds use supplied patterns, not illustrative gradients. */
.brand-system .service-digital-diagram{background-color:var(--ink);overflow:hidden;isolation:isolate}
.brand-system .service-digital-diagram::before{background:var(--pattern-cubes) center/cover no-repeat;inset:-48px;opacity:.7}
.brand-system .conversation-layout,.brand-system .conversation-aside{background:var(--pearl)}
.brand-system .conversation-progress li.active{color:var(--ink);border-color:var(--ink)}
.brand-system .footer-identity .brand{border:0}

/* Quieter pattern compositions: cropped edges, protected reading areas. */
.brand-system .visual-process::before{background-size:150% auto;background-position:80% center;opacity:.18;mask-image:linear-gradient(90deg,transparent 20%,black 100%)}
.brand-system .service-outputs::before{background-size:auto 130%;background-position:right center;opacity:.15;mask-image:linear-gradient(90deg,transparent 45%,black)}
.brand-system .about-beliefs::before{display:none}
.brand-system .service-digital-diagram::before{opacity:.18;background-size:auto 150%;mask-image:linear-gradient(135deg,transparent,black)}
.brand-system .about-page .location-panel{background-image:none}
.brand-system .about-panorama{isolation:isolate}
.brand-system .about-panorama::after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--pattern-iso) right center/auto 150% no-repeat;opacity:.28;mask-image:linear-gradient(90deg,transparent 65%,black)}
.brand-system .about-page .purpose-diagram{border:1px solid var(--line-on-dark);background:none;min-height:300px}
.brand-system .purpose-diagram .diagram-centre{border-color:var(--line-on-dark)}
/* A light invitation and a compact, solid footer read as separate destinations. */
.brand-system .contact-invitation{padding:64px var(--gutter);background:var(--iron-50);color:var(--ink)}
.brand-system .contact-invitation .footer-invitation{border:0;padding:0;gap:40px}
.brand-system .contact-invitation .eyebrow{color:var(--graphite)}
.brand-system .contact-invitation h2{font-size:clamp(1.8rem,2.7vw,2.8rem);max-width:24ch}
.brand-system .contact-invitation .button{background:var(--ink);border-color:var(--ink);color:var(--pearl)}
.brand-system .arcan-footer{padding-top:0;padding-bottom:24px}
.brand-system .arcan-footer::before{display:none}
.brand-system .footer-grid{padding-block:40px;gap:40px}
.brand-system .footer-grid .brand img{width:164px}
.brand-system .footer-grid :is(p,a){font-size:.8125rem}
.brand-system .footer-grid nav,.brand-system .footer-address{gap:8px}
.brand-system .footer-bottom{padding-top:20px}
@media(min-width:1000px){
 .brand-system .company-philosophy{grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px)}
 .brand-system .company-philosophy p{max-width:60ch}
 .brand-system .about-heading{grid-template-columns:1.2fr 1fr;gap:64px}
}
@media(max-width:760px){.brand-system .contact-invitation{padding-block:48px}.brand-system .footer-grid{gap:28px}}
/* The journal pairs an open editorial grid with a comfortable reading measure. */
.brand-system .journal-hero h1{max-width:18ch}
.brand-system .journal-hero>p:last-of-type{max-width:60ch;color:var(--graphite)}
.brand-system .journal-topics{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px}
.brand-system #main .journal-index{padding-top:0}
.brand-system .journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.brand-system .journal-card{display:block;color:inherit;border-top:1px solid var(--iron);text-decoration:none}
.brand-system .journal-card figure{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--ink)}
.brand-system .journal-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.brand-system .journal-card:hover img{transform:scale(1.025)}
.brand-system .journal-card>div{padding-block:28px}
.brand-system #main .journal-card h2{font-size:clamp(1.5rem,2vw,2.1rem);line-height:1.2;margin:16px 0}
.brand-system .journal-card p:not(.eyebrow){color:var(--graphite);max-width:48ch}
.brand-system .journal-card .text-link{display:inline-flex;margin-top:16px;gap:24px}
.brand-system .journal-article-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.brand-system .journal-article-hero h1{font-size:clamp(2.5rem,4.1vw,4.2rem)!important;max-width:19ch;margin-block:24px}
.brand-system .journal-article-hero .eyebrow{margin-top:40px}
.brand-system .journal-article-hero p:not(.eyebrow){max-width:54ch;color:var(--graphite)}
.brand-system .journal-article-hero figure{margin:0;height:100%;min-height:320px;max-height:500px}
.brand-system .journal-article-hero img{width:100%;height:100%;object-fit:cover}
.brand-system .journal-reading{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr);gap:clamp(32px,8vw,128px);border-top:1px solid var(--iron)}
.brand-system .journal-reading aside{position:sticky;top:140px;align-self:start;max-width:32ch}
.brand-system .journal-reading nav{display:grid;gap:16px;margin-bottom:32px}
.brand-system .journal-reading nav a{border-bottom:1px solid var(--iron);padding-bottom:12px;font-size:.875rem}
.brand-system .journal-prose{max-width:70ch}
.brand-system .journal-prose p{font-size:1.0625rem;line-height:1.9}
.brand-system .journal-prose .journal-intro{font-size:1.25rem;line-height:1.7;margin-top:0}
.brand-system .journal-prose section{padding-block:32px;border-top:1px solid var(--iron);scroll-margin-top:140px}
.brand-system #main .journal-prose h2{font-size:clamp(1.65rem,2.3vw,2.3rem);margin:16px 0}
.brand-system .journal-takeaway{padding:32px;background:var(--iron-50)}
.brand-system .journal-related{background:var(--iron-50)}
.brand-system .journal-related .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
html[lang=ar] .brand-system #main .journal-card h2{font-size:1.65rem!important}
@media(max-width:999px){.brand-system .journal-grid{grid-template-columns:1fr 1fr}.brand-system .journal-article-hero{grid-template-columns:1fr}.brand-system .journal-article-hero figure{height:320px}.brand-system .journal-reading{grid-template-columns:1fr}.brand-system .journal-reading aside{position:static;max-width:none}}
@media(max-width:600px){.brand-system .journal-grid,.brand-system .journal-related .journal-grid{grid-template-columns:1fr}.brand-system .journal-article-hero figure{height:240px;min-height:0}.brand-system .journal-takeaway{padding:24px}}
@media(prefers-reduced-motion:reduce){.brand-system .journal-card img{transition:none;transform:none!important}}
.brand-system .journal-hero,.brand-system .journal-article-hero{background:var(--pearl);color:var(--ink)}
.brand-system .journal-article-hero{position:relative;inset:auto;z-index:auto;border:0}

/* Separate everyday spaces from the portfolio and close with one invitation. */
.brand-system .architecture-audiences{background:var(--iron-50)}
.brand-system .architecture-invitation{background:var(--desert-sand);padding-block:var(--section-space)}

/* The two practice pages share section rhythm and one closing enquiry. */
.brand-system .business-starting-points{background:var(--iron-50)}
.brand-system .practice-invitation{background:var(--desert-sand);padding-block:var(--section-space)}

/* Mobile footer: paired navigation, clear contact details and comfortable touch targets. */
@media(max-width:760px){
 .brand-system .arcan-footer{padding-inline:20px;padding-bottom:24px}
 .brand-system .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;padding-block:36px 28px}
 .brand-system .footer-identity{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 16px}
 .brand-system .footer-identity .brand{grid-column:1;grid-row:1;padding:0;max-width:148px}
 .brand-system .footer-identity .brand img{width:148px;max-width:100%}
 .brand-system .footer-identity>p{grid-column:1/-1;grid-row:2;margin:0;max-width:32ch;font-size:14px;line-height:1.7}
 .brand-system .footer-identity .social-links{grid-column:2;grid-row:1;gap:8px;flex-wrap:nowrap;margin:0}
 .brand-system .footer-grid>nav{grid-column:auto;gap:0;padding-top:22px;border-top:1px solid var(--line-on-dark);align-items:stretch;min-width:0}
 .brand-system .footer-grid .eyebrow{font-size:11px;color:var(--sand);margin:0 0 12px;line-height:1.5}
 .brand-system .footer-grid>nav>a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:14px;line-height:1.5}
 .brand-system .footer-address{grid-column:1/-1;gap:10px;padding-top:24px;border-top:1px solid var(--line-on-dark);min-width:0;align-items:stretch}
 .brand-system .footer-address>.eyebrow{margin:0}
 .brand-system .footer-address>a[href^="mailto:"]{font-size:22px;line-height:1.5;min-height:44px;display:flex;align-items:center;align-self:flex-start;color:var(--pearl)}
 .brand-system .footer-address>p:not(.eyebrow){font-size:14px;line-height:1.8;margin:0;color:var(--iron)}
 .brand-system .footer-address>.text-link{align-self:flex-start;display:flex;min-height:44px;font-size:14px;gap:28px;padding:8px 0;margin:4px 0 0}
 .brand-system .footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px 8px;align-items:center;padding-top:20px}
 .brand-system .footer-bottom>a{display:flex;align-items:center;min-height:44px;font-size:12px;margin:0}
 .brand-system .footer-bottom>.language-switch{grid-column:1;grid-row:1;border-bottom:1px solid var(--line-on-dark)}
 .brand-system .footer-bottom>a[href="#top"]{grid-column:3;grid-row:1;justify-content:flex-end;border-bottom:1px solid var(--line-on-dark)}
 .brand-system .footer-bottom>a[href$="/privacy/"]{grid-column:2;grid-row:1;justify-content:center;text-align:center;min-height:44px;border-bottom:1px solid var(--line-on-dark)}
 .brand-system .footer-bottom>span{grid-column:1/-1;grid-row:2;text-align:center;font-size:11px;line-height:1.7;color:var(--iron)}
}
@media(max-width:359px){
 .brand-system .footer-identity{grid-template-columns:1fr}
 .brand-system .footer-identity .social-links{grid-column:1;grid-row:3}
 .brand-system .footer-grid{column-gap:16px}
}

/* Contact and location use the same paired columns as the footer navigation. */
.brand-system .footer-contact-group,.brand-system .footer-location-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.brand-system .footer-location-label{display:none}
@media(max-width:760px){
 .brand-system .footer-address{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border:0;padding:0;align-items:start}
 .brand-system .footer-contact-group,.brand-system .footer-location-group{border-top:1px solid var(--line-on-dark);padding-top:22px;gap:0}
 .brand-system .footer-location-label{display:block}
 .brand-system .footer-address .eyebrow{margin:0 0 12px}
 .brand-system .footer-contact-group>a{display:flex;align-items:center;min-height:44px;font-size:clamp(14px,4vw,22px);line-height:1.5;max-width:100%;overflow-wrap:anywhere;text-align:start}
 .brand-system .footer-location-group>p:not(.eyebrow){font-size:14px;line-height:1.8;margin:0;padding-top:6px;text-align:start}
 .brand-system .footer-location-group>.text-link{font-size:14px;min-height:44px;gap:18px;margin-top:12px;padding:8px 0;text-align:start}
}
@media(max-width:359px){.brand-system .footer-address{column-gap:16px}.brand-system .footer-contact-group>a{font-size:12px}}