/* About: an editorial sequence within the shared Arcan composition. */
.about-page{--about-space:clamp(4rem,7vw,7rem)}
#main .about-page .section{padding-block:var(--about-space)}
#main .about-page h2{font-size:clamp(2rem,3.1vw,3rem);line-height:1.16;letter-spacing:-.035em}
#main .about-page p:not(.eyebrow){font-size:.9375rem;line-height:1.85}
#main .about-page .eyebrow{font-size:.75rem;line-height:1.65;letter-spacing:.12em}
#main .about-page .about-hero{padding:clamp(3rem,5vw,5rem) var(--gutter) 0;background:#fff}
.about-heading{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:clamp(2rem,6vw,6rem);margin-bottom:3rem}
#main .about-page h1{font-size:clamp(2.65rem,4.5vw,4.75rem);line-height:1.08;max-width:16ch;letter-spacing:-.045em;margin:0}
.about-lead{max-width:45ch;padding-bottom:.2rem}.about-lead>p{margin:0 0 2rem}
.about-jump-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem}.about-jump-links a{display:inline-flex;justify-content:space-between;gap:1rem;font-size:.8125rem;padding-block:.6rem;border-bottom:1px solid #14293c35}
.about-panorama{position:relative;margin:0;overflow:hidden;background:#e4e6e5}
.about-panorama img{display:block;width:100%;height:clamp(280px,32vw,480px);object-fit:cover;object-position:50% 55%}
.about-panorama figcaption{position:absolute;inset:auto 0 0;padding:3rem 1.5rem 1.2rem;color:white;background:linear-gradient(transparent,#102536c9);font-size:.75rem;line-height:1.6}
#main .about-page .company-story{background:#fff;grid-template-columns:.65fr 1.35fr;padding-block:3.5rem var(--about-space);align-items:start;gap:clamp(2rem,6vw,6rem)}
.about-page .company-history{padding-inline-start:1.5rem;border-color:#14293c30}
.about-page .history-year{font-size:clamp(4rem,7vw,6rem);line-height:1.1;display:block;letter-spacing:-.055em}
#main .about-page .company-story h2{font-size:clamp(1.65rem,2.3vw,2.3rem);margin:0 0 1.5rem}
.about-page .company-story p{max-width:63ch}.about-page .company-story p:last-child{margin-bottom:0}
#main .about-page .about-practices{background:#f0f2f1}
.about-section-heading{display:grid;grid-template-columns:1fr .8fr;gap:4rem;align-items:end;margin-bottom:3rem}
#main .about-page .about-section-heading h2{margin:0}.about-section-heading>p{max-width:39ch;margin:0;color:#52646e}
.about-practice-cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.about-practice-card{display:block;min-width:0;background:white;color:var(--ink)}
.about-practice-image{position:relative;overflow:hidden}.about-practice-image>img{width:100%;height:auto;aspect-ratio:16/10;display:block;object-fit:cover;transition:transform .65s ease}
.about-practice-mark{position:absolute;inset:auto auto 1.5rem 1.5rem;width:64px;height:64px;display:grid;place-items:center;background:#14293cf2;border:1px solid #e7d6be45;color:var(--sand)}
.about-practice-mark svg{width:38px;height:38px}
.about-practice-copy{padding:2rem}.about-practice-copy .eyebrow{margin-bottom:1rem}
#main .about-page .about-practice-copy h3{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:clamp(1.35rem,1.8vw,1.9rem);font-weight:600;line-height:1.3;margin:0 0 1rem}
.about-practice-copy h3>span{font-size:1.5rem;font-weight:400}.about-practice-copy>p:last-child{margin:0;max-width:40ch;color:#52646e}
.about-practice-card:hover .about-practice-image>img,.about-practice-card:focus-visible .about-practice-image>img{transform:scale(1.035)}
.about-beliefs{background:var(--ink);color:#fff;position:relative}
#main .about-page .company-philosophy{background:transparent;grid-template-columns:1fr 1fr;padding-bottom:3.5rem}
.about-page .company-philosophy h2{margin-bottom:1.5rem}.about-page .company-philosophy p{max-width:45ch}
.about-page .purpose-diagram{min-height:310px;border:0;background:linear-gradient(30deg,transparent 49.8%,#e7d6be2b 50%,transparent 50.2%),linear-gradient(150deg,transparent 49.8%,#e7d6be2b 50%,transparent 50.2%);padding:1rem;gap:1.5rem}
.about-page .purpose-diagram>span{min-height:115px}.about-page .purpose-diagram .diagram-centre{border:1px solid #e7d6be50;background:#1c3446}
#main .about-page .company-principles{background:transparent;padding-top:0;gap:3.5rem}
.about-page .company-principles article{position:relative;padding-top:2rem;border-top:1px solid #e7d6be35}
.about-page .company-principles article+article{border-inline-start:0;padding-inline-start:0}
.about-page .company-principles svg{width:42px;height:42px;color:var(--sand);margin-bottom:1.5rem}
.about-page .company-principles .eyebrow{color:var(--sand)}
#main .about-page .company-principles h2{font-size:clamp(1.65rem,2.1vw,2.1rem);margin-bottom:1.25rem}.about-page .company-principles p:not(.eyebrow){color:#cbd5dc;max-width:46ch}
#main .about-page .company-leadership{background:#fff;gap:2rem 5rem;align-items:start}
.about-page .company-leadership>.eyebrow{margin:0}.about-page .company-leadership>h2{margin:0}.about-page .company-leadership>div>p{margin-top:0}
.about-page .company-leadership ul{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0}.about-page .company-leadership li{font-size:.8rem;line-height:1.6;padding:.6rem .8rem;border:1px solid #14293c20;font-weight:500}
#main .about-page .about-method{background:transparent;grid-column:1/-1;padding:3rem 0 0;margin-top:1rem;border-top:1px solid #14293c25}
.about-page .method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;list-style:none;padding:0;margin:2rem 0 0}
.about-page .method-grid>li{position:relative;padding:0;border:0;font-weight:400}
.about-method-icon{display:block;width:48px;height:48px;color:#63747d;margin-bottom:1.5rem}.about-method-icon svg{width:100%;height:100%}
.about-step-number{position:absolute;inset-inline-end:0;top:.5rem;font-size:.75rem;color:#63747d}
#main .about-page .method-grid h3{font-size:1.25rem;margin:0 0 .8rem;font-weight:650}.about-page .method-grid p{max-width:32ch;margin:0;color:#52646e}
#main .about-page .about-clients{background:#f7f8f7;border:0}.about-page .clients-intro{margin-bottom:2rem;gap:4rem}.about-page .clients-intro>p{max-width:36ch}
.about-page .client-ribbon{margin-inline:calc(-1 * var(--gutter));}.about-page .client-grid{border:0}.about-page .client-grid>li{border:0}
#main .about-page .company-location{background:#fff;grid-template-columns:1fr 1fr;gap:4rem}.about-page .company-location h2{margin-bottom:1.75rem}.about-page .company-location p{max-width:39ch}
.about-page .location-panel{min-height:350px;aspect-ratio:4/3;border-radius:2px}.about-page .location-open{transition:background .25s ease}.about-page .location-panel:hover .location-open{background:#e7d6be15}
html[lang=ar] #main .about-page h1{font-size:clamp(2.25rem,4vw,4rem);line-height:1.5;max-width:none}
html[lang=ar] #main .about-page h2{font-size:clamp(1.8rem,2.8vw,2.7rem)!important;line-height:1.5!important;letter-spacing:0}
html[lang=ar] #main .about-page .company-story h2,html[lang=ar] #main .about-page .company-principles h2{font-size:clamp(1.5rem,2.1vw,2.1rem)!important}
html[lang=ar] .about-page .about-practice-mark{left:auto;right:1.5rem}
@media(max-width:900px){
 .about-heading{grid-template-columns:1fr;gap:2rem}.about-lead{max-width:58ch}.about-jump-links{gap:2rem}
 .about-section-heading{grid-template-columns:1fr;gap:1.5rem}.about-section-heading>p{max-width:50ch}
 .about-practice-cards{gap:1.25rem}.about-practice-copy{padding:1.5rem}
 #main .about-page .company-philosophy{gap:2.5rem}.about-page .purpose-diagram{min-height:280px;padding:0}
 #main .about-page .company-leadership{gap:2rem}.about-page .method-grid{gap:2rem}
}
@media(max-width:600px){
 #main .about-page .about-hero{padding-top:2.5rem}#main .about-page h1{font-size:clamp(2.3rem,9vw,3.3rem)}
 .about-heading{margin-bottom:2rem}.about-panorama img{height:300px;object-position:56% center}.about-panorama figcaption{padding-inline:1rem}
 #main .about-page .company-story{grid-template-columns:1fr;gap:2rem;padding-top:2.5rem}.about-page .company-history{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.25rem 1.5rem}.company-history .history-year{grid-row:1/3;grid-column:1}.about-page .company-history .eyebrow{grid-column:2;margin:0}.about-page .company-history>p:last-child{grid-column:2;margin:0}
 .about-practice-cards{grid-template-columns:1fr;gap:2rem}.about-practice-mark{width:52px;height:52px;inset-inline-start:1rem;bottom:1rem}.about-practice-mark svg{width:32px;height:32px}
 #main .about-page .company-philosophy,#main .about-page .company-principles,#main .about-page .company-leadership,#main .about-page .company-location{grid-template-columns:1fr;gap:2.5rem}
 .about-page .company-principles article{padding-block:1.5rem 0}.about-page .company-principles article+article{padding-top:1.5rem}
 .about-page .purpose-diagram{min-height:260px}.about-page .purpose-diagram>span{min-height:105px}
 .about-page .company-leadership>.eyebrow{margin-bottom:-1rem}
 .about-page .method-grid{grid-template-columns:1fr;gap:2rem}.about-page .method-grid>li{padding-inline-start:70px;min-height:90px}.about-method-icon{position:absolute;inset-inline-start:0;top:0;width:40px;height:40px}.about-step-number{position:static;display:block;margin-bottom:.6rem}
 .about-page .clients-intro{display:block}.about-page .clients-intro>p{margin-top:1.5rem}.about-page .location-panel{min-height:310px;aspect-ratio:auto}
}
@media(prefers-reduced-motion:reduce){.about-practice-image>img,.about-page .location-open{transition:none}.about-practice-card:hover .about-practice-image>img,.about-practice-card:focus-visible .about-practice-image>img{transform:none}}

/* One shared direction: purpose, vision, mission, in reading order. */
#main .about-page .company-direction{padding-block:clamp(4rem,6vw,6.5rem)}
#main .company-direction .direction-label{color:var(--desert-sand);margin:0 0 3rem}
.company-direction .direction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.company-direction .direction-grid>article{min-width:0;padding-inline:clamp(1.5rem,3vw,3.5rem);border-inline-start:1px solid var(--line-on-dark)}
.company-direction .direction-grid>article:first-child{padding-inline-start:0;border-inline-start:0}
.company-direction .direction-grid>article:last-child{padding-inline-end:0}
#main .about-page .company-direction h2{color:var(--pearl);font-size:clamp(2rem,3vw,3rem);line-height:1.2;margin:0 0 .75rem;letter-spacing:-.025em}
#main .about-page .company-direction .direction-question{color:var(--desert-sand);font-size:1rem;font-weight:500;line-height:1.6;margin:0 0 2rem}
#main .about-page .company-direction .direction-copy{color:var(--iron);font-size:1rem;line-height:1.85;max-width:43ch;margin:0}
@media(max-width:760px){
 .company-direction .direction-grid{grid-template-columns:1fr;gap:2rem}
 .company-direction .direction-grid>article,.company-direction .direction-grid>article:first-child{padding:2rem 0 0;border-inline-start:0;border-top:1px solid var(--line-on-dark)}
 #main .company-direction .direction-label{margin-bottom:2rem}
 #main .about-page .company-direction .direction-question{margin-bottom:1rem}
 #main .about-page .company-direction .direction-copy{max-width:55ch}
}

/* Three distinct chapters: leadership, client relationships, and visiting Riyadh. */
.brand-system #main .about-page .company-leadership{grid-template-columns:1fr 1fr;gap:3.5rem clamp(3rem,7vw,7rem);background:var(--pearl)}
.company-leadership .leadership-intro>.eyebrow{margin:0 0 1.75rem}
.company-leadership .leadership-intro>h2{margin:0 0 1.75rem;max-width:20ch}
.company-leadership .leadership-intro>p:last-child{color:var(--graphite);max-width:49ch;margin:0}
.about-page .company-leadership .leadership-commitments{list-style:none;padding:0;margin:0;display:grid;gap:0}
.about-page .company-leadership .leadership-commitments>li{display:grid;grid-template-columns:2rem 1fr;gap:1.25rem;padding:1.5rem 0;border:0;border-top:1px solid var(--iron);font-weight:400}
.about-page .leadership-commitments>li>span{font-size:.75rem;color:var(--graphite);padding-top:.3rem}
.brand-system #main .about-page .leadership-commitments h3{font-size:1.2rem;line-height:1.4;letter-spacing:-.015em;margin:0 0 .6rem}
.about-page .leadership-commitments p{color:var(--graphite);margin:0;max-width:48ch}
.brand-system #main .about-page .about-method{margin:0;padding-top:2.5rem;border-color:var(--iron)}
.brand-system #main .about-page section.about-clients{background:var(--iron-50);border-block:1px solid var(--iron)}
.about-page .clients-intro{grid-template-columns:1fr 1fr;align-items:end;gap:clamp(3rem,7vw,7rem);margin-bottom:3rem}
.about-page .clients-context p{color:var(--graphite);max-width:40ch;margin:0}
.about-page .clients-context .clients-work-link{margin-top:1.5rem}
.brand-system .about-page .about-clients .client-ribbon{margin-inline:0;background:transparent;border:0;padding-block:0}
/* Match the visible space above the heading and below the marks. Names sit
   within that lower breathing room instead of reserving an empty extra row. */
.about-page .about-clients .client-grid{padding-block:.5rem 0;row-gap:4.5rem}
.about-page .about-clients .client-grid>li{padding-block:0}
.about-page .about-clients .client-grid figure{position:relative}
.about-page .about-clients .client-logo{margin-bottom:0}
.about-page .about-clients .client-grid figcaption{position:absolute;inset-block-start:100%;inset-inline:0;margin:.75rem auto 0;min-height:0}
.about-page .about-clients .ribbon-viewport{padding-bottom:4.5rem;margin-bottom:-4.5rem}
@media print{.about-page .about-clients .client-grid figcaption{position:static}}
.brand-system #main .about-page section.company-location{background:var(--ink);color:var(--pearl);grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:start}
.brand-system #main .about-page .company-location .eyebrow{color:var(--desert-sand)}
.company-location .location-intro>.eyebrow{margin:0 0 1.75rem}
.brand-system #main .about-page .company-location h2{color:var(--pearl);margin:0 0 1.5rem}
.company-location .location-intro>p:not(.eyebrow){color:var(--iron);margin:0 0 2rem}
.brand-system .company-location .location-contact{background:var(--desert-sand);color:var(--ink);border-color:var(--desert-sand)}
.brand-system .company-location .location-contact:hover{background:var(--pearl);border-color:var(--pearl)}
.company-location .location-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.company-location .location-details>div{border-top:1px solid var(--line-on-dark);padding-top:1.5rem;min-width:0}
.company-location .location-address{grid-column:1/-1}
.company-location .location-details .eyebrow{margin:0 0 1rem}
.company-location .location-details address{font-style:normal;color:var(--pearl);font-size:1.125rem;line-height:1.8;max-width:39ch}
.company-location .location-details p:not(.eyebrow){margin:0;color:var(--iron)}
.company-location .location-address .text-link{display:inline-flex;gap:2rem;margin-top:1.5rem;color:var(--pearl);border-color:var(--line-on-dark)}
.company-location .location-email{color:var(--pearl);font-size:1rem;text-underline-offset:.35em;overflow-wrap:anywhere}
.brand-system .company-location :is(a,button):focus-visible{outline-color:var(--desert-sand)}
@media(max-width:900px){
 .brand-system #main .about-page .company-leadership,.brand-system #main .about-page section.company-location{grid-template-columns:1fr;gap:2.5rem}
 .about-page .clients-intro{grid-template-columns:1fr;gap:1.5rem;align-items:start}
 .about-page .clients-context p{max-width:55ch}
 .company-location .location-details{gap:1.75rem}
}
@media(max-width:600px){
 .brand-system #main .about-page .company-leadership .about-method{padding-top:2rem}
 .company-location .location-details{grid-template-columns:1fr}
 .about-page .company-leadership .leadership-commitments>li{gap:.75rem}
 .company-location .location-details address{font-size:1rem}
}

/* Separate promises, each expressed through an original concept study. */
.brand-system #main .about-page .about-promises{padding-bottom:0}
.brand-system #main .about-promises .about-heading{grid-template-columns:1.1fr 1fr;align-items:start;gap:clamp(2rem,6vw,6rem);margin-bottom:3.5rem}
.brand-system #main .about-promises h1{font-size:clamp(2.5rem,4.5vw,4.5rem);max-width:18ch}
.about-promises .about-lead{max-width:56ch}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,3rem)}
.promise-card{min-width:0}
.promise-card figure{margin:0;background:var(--iron-50);overflow:hidden}
.promise-card figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.promise-copy{position:relative;padding-top:1.5rem}
.promise-number{display:block;color:var(--graphite);font-size:.75rem;line-height:1.5;margin-bottom:.8rem}
.brand-system #main .about-page .promise-card h2{font-size:clamp(1.55rem,2.25vw,2.3rem);line-height:1.2;letter-spacing:-.025em;margin:0 0 1rem;color:var(--ink)}
.about-page .promise-card p{margin:0;max-width:44ch;color:var(--graphite)}
.brand-system #main .about-page .concept-caption{color:var(--graphite);font-size:.75rem!important;margin:2rem 0 0;padding-bottom:2rem;border-bottom:1px solid var(--iron)}
.practice-concept-label{position:absolute;inset-inline-end:1rem;bottom:1rem;background:var(--ink);color:var(--pearl);padding:.4rem .7rem;font-size:.6875rem;line-height:1.5}
html[lang=ar] .brand-system #main .about-page .promise-card h2{font-size:clamp(1.4rem,2vw,2rem)!important;line-height:1.6!important;letter-spacing:0}
@media(max-width:1000px){
 .brand-system #main .about-promises .about-heading{grid-template-columns:1fr;gap:2rem}
 .about-promises .about-lead{max-width:65ch}
}
@media(max-width:760px){
 .promise-grid{grid-template-columns:1fr;gap:2.5rem}
 .promise-card figure img{aspect-ratio:3/2}
 .brand-system #main .about-page .promise-card h2{font-size:2rem}
 .promise-copy{padding-top:1rem}
 .promise-number{margin-bottom:.5rem}
 .about-page .promise-card p{max-width:55ch}
 .brand-system #main .about-promises .about-heading{margin-bottom:2.5rem}
}