/* Shared design tokens keep the two palettes complete and consistent. */
:root{--surface:#111512;--surface-raised:#19201a;--ink-soft:#b2b8ad;--wash:rgba(196,165,109,.08);--shadow:0 20px 60px rgba(0,0,0,.15);--nav-glass:rgba(8,9,9,.86)}
:root[data-theme=light]{--bg:#faf9f6;--bg-2:#eeede6;--card:#fff;--text:#252d26;--muted:#60695e;--gold:#86662e;--gold-2:#b79351;--gold-3:#705222;--line:rgba(88,96,73,.19);--surface:#f0f1e9;--surface-raised:#fff;--ink-soft:#515e4d;--wash:rgba(134,102,46,.07);--shadow:0 20px 60px rgba(53,60,42,.07);--nav-glass:rgba(250,249,246,.9)}
body{background:var(--bg);color:var(--text)}
body,header,section,article,.info-card,.stat{transition:background-color .35s,color .35s,border-color .35s}
.nav,.nav.is-scrolled{background:var(--nav-glass);border-bottom:1px solid var(--line)}
.nav__inner{gap:20px}.theme-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:10px 14px;color:var(--text);font-size:12px;background:var(--wash);white-space:nowrap;order:2}.theme-toggle svg{width:19px;height:19px}.theme-toggle:hover{border-color:var(--gold);background:var(--surface)}.nav__inner>.btn3d{order:3}.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* Full artwork, original 1672:941 aspect. No cropped lettering or distorted skyline. */
.story__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 50px;align-items:center}
.story__body>*{min-width:0}.story__body .section-title{align-self:end}.story__body .import-copy{align-self:start}
.company-art{display:block;width:100%;height:auto!important;max-height:none;aspect-ratio:1672/941;object-fit:contain;grid-column:2;grid-row:1/3;filter:none;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#e9e2d3}
.story__body .import-copy p{font-size:16px;line-height:1.95}.story__body .import-copy p+p{margin-top:14px}
.content-section{position:relative}.section-title{max-width:100%;overflow-wrap:break-word}.section-overline{color:var(--gold)}
/* The methodology reads as a connected sequence of six individual stages. */
#build .info-grid{gap:20px;border:0;position:relative;margin-top:50px}
#build .info-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(140deg,var(--surface-raised),var(--surface));padding:34px;min-height:270px;isolation:isolate;overflow:hidden;box-shadow:var(--shadow)}
#build .info-card::before{position:absolute;inset:20px auto auto 26px;font:300 58px 'Inter',sans-serif;color:var(--gold);opacity:.14;margin:0;height:auto;pointer-events:none}
.feature-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line);border-radius:15px;background:var(--wash);color:var(--gold);margin-bottom:28px;transition:transform .4s,background .4s}
.feature-icon svg{width:27px;height:27px}.info-card:hover .feature-icon{transform:translateY(-4px) rotate(-5deg);background:var(--surface-raised)}
#build .info-card h3{font-size:22px;line-height:1.6;position:relative}#build .info-card p{font-size:15px;line-height:1.95;position:relative}
#build .info-card::after,.imported-stats .stat::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,0%),var(--wash),transparent);opacity:0;transition:opacity .4s;z-index:-1}
#build .info-card:hover::after,.imported-stats .stat:hover::after{opacity:1}
#build .info-card:hover{border-color:var(--gold);transform:translateY(-5px)}
/* Metrics form a spacious visual dashboard rather than a touching block of boxes. */
.imported-stats{gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:45px;counter-reset:metric}
.imported-stats .stat{counter-increment:metric;position:relative;isolation:isolate;overflow:hidden;min-height:235px;padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface-raised),var(--surface));box-shadow:var(--shadow);transition:transform .4s,border-color .4s}
.imported-stats .stat::before{content:'\00a0';font:10px 'Inter',sans-serif;letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:25px}
.imported-stats .stat b{font-size:clamp(36.8px,4vw,59.2px);font-weight:400;line-height:1.1;letter-spacing:-.06em;text-align:start;direction:ltr;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.imported-stats .stat span{display:block;font-size:14px;margin-top:18px;color:var(--text)}.imported-stats .stat p{font-size:12px;line-height:1.6;color:var(--muted)}
.imported-stats .stat:hover{transform:translateY(-6px);border-color:var(--gold)}
/* Vision and values: a distinct architectural panel immediately after the metrics. */
#finish{margin-block:25px 60px;padding:65px 48px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse at 0 0,var(--wash),transparent 70%),var(--surface);overflow:hidden;box-shadow:var(--shadow)}
#finish::before{content:'';position:absolute;top:-110px;left:-100px;width:400px;height:400px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 45px var(--wash),0 0 0 90px var(--wash);pointer-events:none}
#finish>.lead{font-size:clamp(20px,2.4vw,31px);line-height:1.85;color:var(--text);position:relative;max-width:880px;border-inline-start:3px solid var(--gold);padding-inline-start:26px}
#finish .info-grid{border:0;gap:16px}#finish .info-card{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:26px}#finish .info-card::before{display:none}#finish .feature-icon{width:42px;height:42px;margin-bottom:18px}#finish .feature-icon svg{width:22px;height:22px}#finish .subheading{position:relative;margin-top:45px;font-size:25px}#finish .import-copy{max-width:100%;columns:2;column-gap:40px}#finish .import-copy p{break-inside:avoid;font-size:16px}
#location .info-grid{gap:16px;border:0}#location .info-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:26px}#location .info-card::before{display:none}#location h3{font-size:20px}
.highlights{background:var(--bg-2)}.card{background:var(--surface);border-color:var(--line)}.card__art::after{background:linear-gradient(transparent 60%,var(--surface))}.card__copy p,.info-card p,.import-copy{color:var(--muted)}.proj details[open]{background:var(--surface);border-radius:12px}.project-photo{border-radius:14px}.proj__info{padding-inline:6px}.portrait{border-radius:14px;background:var(--surface)}.people-grid .info-card{border-radius:14px;background:transparent}.people-grid h3,.people-grid p{padding-inline:10px}
.cta{background:var(--surface)}.contact-links .info-card{background:var(--bg);border:1px solid var(--line);border-radius:14px}.contact-links{gap:14px;border:0}.cta__title{color:var(--text)}.contact-content>p{color:var(--muted)}.footer{background:var(--bg)}
[data-theme=light] .hero{background:radial-gradient(ellipse at 50% 40%,#e7dcc2,#f6f5ed 55%,#faf9f6 85%)}
[data-theme=light] .hero::after{background:linear-gradient(to top,var(--bg),transparent)}[data-theme=light] .hero__sub{color:var(--muted)}[data-theme=light] .hero__big{color:var(--text);text-shadow:0 10px 60px rgba(255,255,255,.9)}[data-theme=light] .hero__copy--two::before{background:radial-gradient(closest-side,rgba(250,249,246,.94),transparent)}
[data-theme=light] .hero-grid{background-image:linear-gradient(rgba(90,80,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(90,80,40,.06) 1px,transparent 1px)}
[data-theme=light] .scroll-cue{border-color:var(--gold)}[data-theme=light] .card__art img{filter:saturate(.7) brightness(.98)}[data-theme=light] .card.is-active .card__art img{filter:saturate(.85)}[data-theme=light] .project-photo{filter:saturate(.8)}[data-theme=light] .dots{background:rgba(60,70,40,.1)}[data-theme=light] .dot-btn{background:rgba(40,50,30,.25)}[data-theme=light] .paddle{background:var(--surface);color:var(--text)}
[data-theme=light] #partners{background:linear-gradient(var(--bg),var(--surface))}[data-theme=light] .partner img{filter:grayscale(1) brightness(.45);opacity:.8}[data-theme=light] .partner:hover img{filter:none;opacity:1}
[data-theme=light] .btn3d__face{color:#251e10}[data-theme=light] .webgl-unavailable{background-image:url('images/broca-logo-dark.png')}
@keyframes broca-enter{from{opacity:.2;translate:0 24px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){.info-card.in-view,.stat.in-view,.proj.in-view,.company-art.in-view{animation:broca-enter .8s both;animation-delay:var(--entry-delay,0ms)}}
@media(max-width:1000px){.story__body{gap:24px;grid-template-columns:1fr}.company-art{grid-column:1;grid-row:auto;max-width:760px;margin-top:12px;justify-self:center}#location .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#finish{width:calc(100% - 32px);padding:45px 28px}}
@media(max-width:650px){.nav__inner{gap:10px}.theme-toggle{padding:9px}.theme-toggle span{display:none}.nav__inner>.btn3d .btn3d__face{padding:10px 13px}.nav__links{margin-inline-start:0}.theme-toggle{margin-inline-start:auto}.imported-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.imported-stats .stat{padding:21px 16px;min-height:210px}.imported-stats .stat b{font-size:35.2px}.imported-stats .stat span{font-size:12px}#build .info-grid{gap:14px}#build .info-card{padding:26px;min-height:240px}#finish{padding:35px 20px;margin-bottom:30px}#finish>.lead{font-size:22px;padding-inline-start:17px}#finish .import-copy{columns:1}#finish .info-grid,#location .info-grid{grid-template-columns:1fr}.story__body .import-copy p{font-size:15px}.company-art{border-radius:12px}.contact-links b{font-size:16px}}
@media(prefers-reduced-motion:reduce){.info-card,.stat{transform:none!important}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Navigation, bilingual type and project interactions. */
body,button,input,textarea,select{font-family:'Cairo',sans-serif}.latin{font-family:'Inter','Cairo',sans-serif}
.nav{inset:16px 24px auto;max-width:1250px;margin-inline:auto;border:1px solid var(--line);border-radius:22px;background:var(--nav-glass);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.nav.is-scrolled{border:1px solid var(--line);background:var(--nav-glass)}.nav__inner{padding:12px 20px;min-height:72px;gap:14px;max-width:none}.brand-logo{width:105px;height:42px}.brand{flex-shrink:0}
.nav__links{order:1;margin-inline:auto;gap:4px;background:var(--wash);padding:5px;border:1px solid var(--line);border-radius:30px;font-size:12px}.nav__links a{padding:9px 15px;border-radius:24px;color:var(--ink-soft);transition:background .25s,color .25s}.nav__links a:hover,.nav__links a:focus-visible{color:var(--gold);background:var(--bg)}
.language-toggle,.theme-toggle{order:2;border:1px solid var(--line);background:transparent;min-height:39px;border-radius:12px;padding:8px 11px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--text);flex-shrink:0}.language-toggle{font-weight:700}.language-toggle:hover,.theme-toggle:hover{background:var(--wash);border-color:var(--gold)}.theme-toggle span{display:none}.theme-toggle svg{height:18px;width:18px}.nav__inner>.btn3d{order:3}.nav .btn3d__face{padding:11px 18px;font-size:12px}.menu-toggle{display:none}
.proj{position:relative;transition:filter .4s,opacity .4s,box-shadow .4s;transform:none!important;overflow:visible}.project-photo{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s,box-shadow .5s;transform-origin:center;border:1px solid var(--line)}
.project-details{margin-top:14px;border-top:1px solid var(--line)}.project-details-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:start;padding:17px 0;color:var(--gold);font-size:13px;gap:15px;cursor:pointer}.detail-plus{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:20px 'Inter',sans-serif;transition:transform .4s,background .4s}.project-details-toggle[aria-expanded=true] .detail-plus{transform:rotate(45deg);background:var(--wash);border-color:var(--gold)}
.project-details-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .35s;overflow:hidden}.details-open .project-details-panel{grid-template-rows:1fr;opacity:1}.project-details-inner{min-height:0;overflow:hidden}.project-details-inner .import-copy{margin:0;padding:0 18px;border-inline-start:2px solid var(--gold);font-size:14px;line-height:2}.project-details-inner .import-copy p:last-child{padding-bottom:18px}
.people-grid .info-card{position:relative;transition:opacity .4s,filter .4s,transform .4s}.portrait{transition:filter .5s,transform .6s,box-shadow .5s;transform-origin:center bottom}.people-grid .info-card:hover{background:transparent}
@media(hover:hover) and (pointer:fine){.proj-grid:has(.proj:hover) .proj:not(:hover){opacity:.5;filter:saturate(.3)}.proj:hover{z-index:3}.proj:hover .project-photo{transform:translateY(-10px) scale(1.035);filter:saturate(1) brightness(1.04);box-shadow:0 25px 55px rgba(0,0,0,.24)}.people-grid:has(.info-card:hover) .info-card:not(:hover){opacity:.48}.people-grid .info-card:hover{z-index:2;transform:translateY(-6px)}.people-grid .info-card:hover .portrait{filter:grayscale(0);transform:scale(1.025);box-shadow:0 20px 45px rgba(0,0,0,.16)}}
html[lang=en] .hero__title{font-family:'Cairo',sans-serif;font-size:clamp(34px,5vw,70px);letter-spacing:-.04em}html[lang=en] .hero__title span{display:block}html[lang=en] .hero__big{font-size:clamp(34px,6vw,82px)}html[lang=en] .story__text{font-size:clamp(36px,6vw,80px);line-height:1.3}html[lang=en] .story__body{text-align:start}html[lang=en] .section-title{letter-spacing:-.03em;line-height:1.25}html[lang=en] .stat{text-align:start}html[lang=en] .contact-links{text-align:start}html[lang=en] .hero__copy{bottom:10vh}html[lang=en] .hero__sub{max-width:650px;margin-inline:auto}
@media(max-width:1100px){.nav__links a{padding-inline:10px;font-size:11px}.nav__inner{gap:9px}.nav .btn3d__face{padding-inline:13px}}
@media(max-width:900px){.nav{inset:12px 14px auto;border-radius:18px}.nav__inner{padding:10px 14px;min-height:64px;gap:10px}.nav .brand{margin-inline-end:auto}.nav__links{display:none;position:absolute;top:calc(100% + 10px);inset-inline:0;margin:0;padding:12px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;flex-direction:column}.nav__links.is-open{display:flex}.nav__links a{padding:14px;font-size:14px;border-radius:10px}.menu-toggle{display:flex;order:4;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:5px;align-items:center;justify-content:center}.menu-toggle span{width:16px;height:1px;background:var(--text);transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.theme-toggle{margin-inline-start:0}.nav .btn3d{margin-inline-start:0}.brand-logo{width:90px;height:35px}}
@media(max-width:480px){.nav__inner{gap:7px;padding:10px}.nav .btn3d__face{font-size:10px;padding:10px}.language-toggle,.theme-toggle{min-height:36px;padding:7px 9px}.brand-logo{width:75px}.menu-toggle{width:34px;height:36px}.hero__copy{padding-inline:20px}.project-details-inner .import-copy{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.project-details-panel{transition:none}.proj:hover .project-photo,.people-grid .info-card:hover,.people-grid .info-card:hover .portrait{transform:none!important}}
/* Final hierarchy: clear stage numbering, quiet navigation and tactile actions. */
#build .info-card::before{inset:auto;inset-block-start:34px;inset-inline-end:32px;font:400 13px 'Inter',sans-serif;letter-spacing:.16em;color:var(--gold);opacity:.8;border:1px solid var(--line);border-radius:999px;padding:8px 12px;line-height:1;background:var(--wash);pointer-events:none}
#build .feature-icon{margin-inline-end:75px;margin-bottom:25px}#build .info-card{padding-top:32px}#build .info-card h3{max-width:95%}
.nav,.nav.is-scrolled{inset:18px 28px auto;max-width:1180px;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 35px rgba(0,0,0,.06);background:var(--nav-glass)}
.nav__inner{padding:13px 22px;gap:14px;min-height:76px}.nav__links{background:none;border:0;padding:0;gap:22px;border-radius:0}.nav__links a{position:relative;padding:12px 0;border-radius:0;font-size:12px;color:var(--ink-soft)}.nav__links a:hover,.nav__links a:focus-visible{background:none;color:var(--text)}
.nav__links a::after{content:'';position:absolute;bottom:3px;inset-inline-start:0;height:2px;background:var(--gold);width:100%;transform:scaleX(0);transform-origin:center;transition:transform .35s}.nav__links a[aria-current=location]{color:var(--gold)}.nav__links a[aria-current=location]::after,.nav__links a:hover::after{transform:scaleX(1)}
.language-toggle,.theme-toggle{background:none;border-color:transparent;border-radius:8px;min-width:32px;padding:8px}.language-toggle{border-inline-start:1px solid var(--line);border-radius:0;padding-inline-start:16px}.theme-toggle:hover,.language-toggle:hover{background:var(--wash);border-color:transparent}
.contact-button{position:relative;display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:44px;padding:11px 19px;background:var(--gold);color:var(--bg);border:1px solid var(--gold);border-radius:9px;line-height:1.4;font-weight:600;font-size:12px;transition:background .3s,box-shadow .3s,transform .3s;white-space:nowrap;isolation:isolate;overflow:hidden}
.contact-button svg{width:19px;height:19px;transition:transform .3s;flex-shrink:0}.contact-button:hover{background:var(--gold-2);box-shadow:0 5px 18px var(--wash);transform:translateY(-2px)}.contact-button:hover svg{transform:translateX(3px)}.contact-button:active{transform:translateY(0);box-shadow:none}.contact-button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.nav .contact-button{order:3;margin-inline-start:4px;gap:15px}
html[dir=rtl] .contact-button svg{rotate:180deg}.hero__copy{pointer-events:auto}.hero-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:25px}.hero-actions .contact-button{padding:14px 22px;min-height:48px;font-size:13px}.hero-secondary{font-size:13px;color:var(--ink-soft);padding-block:10px;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}.hero-secondary:hover{color:var(--gold);border-color:var(--gold)}
.reading-progress{position:fixed;inset:0 0 auto;height:2px;background:transparent;z-index:100;pointer-events:none;direction:ltr}.reading-progress span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--reading-progress,0));transform-origin:left;will-change:transform}
.content-section>.section-overline,.projects>.section-overline{opacity:.65}.content-section{scroll-margin-top:125px}.proj,.info-card{scroll-margin-top:125px}
@media(min-width:901px){.nav__links{display:flex}.brand-logo{width:100px;height:39px}}
@media(max-width:1100px) and (min-width:901px){.nav__links{gap:14px}.nav__inner{gap:8px}.nav__links a{font-size:11px}.nav .contact-button{padding:11px 13px;gap:9px}}
@media(max-width:900px){.nav,.nav.is-scrolled{inset:12px 14px auto;border-radius:13px}.nav__inner{min-height:64px;padding:10px 14px;gap:8px}.nav__links{display:none;background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:13px;gap:3px}.nav__links.is-open{display:flex}.nav__links a{padding:13px 14px;font-size:14px;border-radius:8px}.nav__links a::after{width:3px;height:18px;inset-inline-start:0;bottom:50%;translate:0 50%}.nav .contact-button{font-size:11px;padding:10px 13px;gap:10px;min-height:38px}.menu-toggle{border-color:transparent}.language-toggle{padding-inline-start:10px}}
@media(max-width:480px){#build .info-card::before{inset-block-start:27px;inset-inline-end:24px}.nav__inner{gap:4px;padding:9px 10px}.nav .contact-button{padding:9px 10px;gap:8px;font-size:10px}.nav .contact-button svg{width:14px;height:14px}.brand-logo{width:72px}.theme-toggle,.language-toggle{padding:6px;min-width:28px}.language-toggle{padding-inline-start:8px}.hero-actions{gap:20px;margin-top:20px}.hero-actions .contact-button{font-size:12px;padding:12px 18px}}
@media(prefers-reduced-motion:reduce){.contact-button:hover,.contact-button:hover svg{transform:none}.reading-progress span{will-change:auto}}
/* A shallow metal key: visible extrusion, restrained highlight, physical press. */
.nav .contact-button{--button-face:#d4b67c;--button-edge:#80602d;--button-ink:#302512;color:var(--button-ink);background:linear-gradient(165deg,#f0dfba 0%,var(--button-face) 52%,#bc9855 100%);border:1px solid #dcc18c;border-bottom-color:#b38b48;border-radius:10px;box-shadow:0 5px 0 var(--button-edge),0 9px 16px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.65);transform:translateY(-3px);transition:transform .18s ease,box-shadow .18s ease,filter .25s ease;overflow:visible}
.nav .contact-button:hover{background:linear-gradient(165deg,#f8e9cb,var(--button-face) 60%,#c7a05b);transform:translateY(-5px);box-shadow:0 7px 0 var(--button-edge),0 13px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.75)}
.nav .contact-button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--button-edge),0 3px 7px rgba(0,0,0,.12),inset 0 1px 3px rgba(90,55,10,.18)}
[data-theme=light] .nav .contact-button{--button-edge:#7a5e2f;box-shadow:0 5px 0 var(--button-edge),0 9px 15px rgba(104,77,30,.16),inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme=light] .nav .contact-button:hover{box-shadow:0 7px 0 var(--button-edge),0 13px 20px rgba(104,77,30,.18),inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme=light] .nav .contact-button:active{box-shadow:0 1px 0 var(--button-edge),0 3px 6px rgba(104,77,30,.12),inset 0 1px 3px rgba(90,55,10,.15)}
@media(prefers-reduced-motion:reduce){.nav .contact-button,.nav .contact-button:hover,.nav .contact-button:active{transform:none;transition:none}}
/* Services have their own reading space, with the same theme and language controls. */
.services-more{display:flex;align-items:center;gap:24px;margin-top:38px}.services-more p{color:var(--muted);font-size:14px}
.services-main{padding-top:170px;padding-bottom:90px}.services-page-heading{max-width:850px;margin-bottom:70px}.services-page-heading>.hero-secondary{display:inline-block;margin-bottom:35px}.services-page-heading .section-overline{justify-content:flex-start}.service-details-list{display:grid;gap:65px}
.service-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding-bottom:65px;border-bottom:1px solid var(--line);scroll-margin-top:130px}.service-detail:nth-child(even) .service-detail-art{order:2}.service-detail-art{aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}.service-detail-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s;filter:saturate(.8)}.service-detail-art:hover img{transform:scale(1.035)}.service-number{display:block;font:12px 'Inter',sans-serif;letter-spacing:.2em;color:var(--gold);margin-bottom:22px}.service-detail-copy h2{font-size:clamp(26px,3vw,42px);font-weight:600;line-height:1.5;margin-bottom:20px}.service-detail-copy p{font-size:18px;line-height:2;color:var(--muted);margin-bottom:28px}.service-detail-copy .hero-secondary{display:inline-block}.services-return{margin-top:50px;text-align:center}
/* Original brand colours remain visible in the dark theme, including on hover. */
:root:not([data-theme=light]) .partner img,:root:not([data-theme=light]) .partner:hover img{filter:none;opacity:1}
@media(max-width:750px){.services-main{padding-top:135px}.services-page-heading{margin-bottom:45px}.service-detail{grid-template-columns:1fr;gap:26px;padding-bottom:40px}.service-detail:nth-child(even) .service-detail-art{order:0}.service-detail-copy p{font-size:16px}.service-details-list{gap:40px}.services-more{align-items:flex-start;flex-direction:column;gap:14px}}
/* Partner marks: neutral at rest, faithful brand colours on interaction. */
:root:not([data-theme=light]) .partner img{filter:grayscale(1) brightness(0) invert(.78);opacity:.75}
:root[data-theme=light] .partner img{filter:grayscale(1) brightness(.45);opacity:.75}
:root .partner{transition:background .35s,border-color .35s;border-radius:10px}
:root .partner img{transition:filter .4s,opacity .4s,transform .4s}
:root .partner:hover{background:#f5f4f0;border-color:transparent}
:root:not([data-theme=light]) .partner:hover img,:root[data-theme=light] .partner:hover img{filter:none;opacity:1;transform:scale(1.06)}
/* Contact desk: primary channels, secondary credentials, intentional spacing. */
.cta{padding-block:100px;background:radial-gradient(ellipse at 85% 0,var(--wash),transparent 60%),var(--surface)}
.contact-content{max-width:1200px;text-align:start;width:100%}.contact-content .cta__title{font-size:clamp(34px,4.8vw,66px);line-height:1.5;max-width:800px;letter-spacing:-.035em}.contact-content .lead{margin-inline:0;max-width:760px;font-size:17px;line-height:2;margin-bottom:40px}
.contact-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-block:45px 36px}
.contact-links>.info-card{grid-column:span 3;display:flex;align-items:center;gap:20px;position:relative;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--bg);min-height:135px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s,background .3s}
.contact-links>.info-card:nth-child(n+3){grid-column:span 2;min-height:125px;padding:24px;gap:15px}
.contact-icon{display:grid;place-items:center;flex-shrink:0;width:50px;height:50px;border:1px solid var(--line);border-radius:14px;background:var(--wash);color:var(--gold);transition:background .3s,transform .3s}.contact-icon svg{width:24px;height:24px}
.contact-card-copy{min-width:0;flex:1}.contact-links span{font-size:12px;line-height:1.8;color:var(--muted)}.contact-links b{font:500 clamp(15px,1.65vw,23px) 'Cairo',sans-serif;letter-spacing:0;margin-top:8px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}.contact-links>.info-card:nth-child(n+3) b{font-size:17px}
.contact-arrow,.contact-seal{font:19px 'Inter',sans-serif;font-style:normal;color:var(--gold);align-self:flex-start;flex-shrink:0;transition:transform .3s;opacity:.7}.contact-seal{font-size:15px}
.contact-links>a:hover,.contact-links>a:focus-visible{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow);background:var(--surface-raised)}.contact-links>a:hover .contact-icon{background:var(--surface);transform:rotate(-5deg)}.contact-links>a:hover .contact-arrow{transform:translate(2px,-2px);opacity:1}.contact-links>a:hover b{color:var(--gold)}
.contact-content>p:not(.lead){display:inline-block;margin-top:16px;font-size:12px;line-height:1.8;color:var(--muted)}.contact-content>p:last-child{margin-inline-start:25px;padding-inline-start:25px;border-inline-start:1px solid var(--line)}
@media(max-width:1000px){.contact-links{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-links>.info-card,.contact-links>.info-card:nth-child(n+3){grid-column:auto;padding:24px;min-height:125px}.contact-links>.info-card:last-child{grid-column:1/-1}.contact-links b{font-size:18px}.contact-content .lead{font-size:16px}}
@media(max-width:600px){.cta{padding-block:65px}.contact-links{grid-template-columns:1fr;gap:12px;margin-top:30px}.contact-links>.info-card,.contact-links>.info-card:nth-child(n+3){grid-column:auto;padding:21px 18px;min-height:112px;gap:14px}.contact-icon{width:42px;height:42px;border-radius:12px}.contact-icon svg{width:21px;height:21px}.contact-links b,.contact-links>.info-card:nth-child(n+3) b{font-size:16px}.contact-content>p:not(.lead){display:block}.contact-content>p:last-child{margin-inline-start:0;padding-inline-start:0;border:0}.contact-arrow{font-size:16px}}
@media(hover:none){:root:not([data-theme=light]) .partner img,:root[data-theme=light] .partner img{filter:none;opacity:1}:root .partner{background:#f5f4f0;margin-inline:8px}}
@media(prefers-reduced-motion:reduce){.contact-links>a:hover,.contact-links>a:hover .contact-icon,.contact-links>a:hover .contact-arrow,:root .partner:hover img{transform:none}}
/* Company artwork: a complete image within a layered architectural frame. */
.company-visual{grid-column:2;grid-row:1/3;position:relative;min-width:0;width:100%;align-self:center;margin:0;padding:12px 12px 0;isolation:isolate}
.company-visual::before{content:'';position:absolute;inset:0 0 25px;border:1px solid var(--line);border-radius:24px;z-index:-1;background:linear-gradient(135deg,var(--wash),transparent 60%);transition:border-color .5s,transform .6s}
.company-visual::after{content:'';position:absolute;inset:12% 8% 8%;background:var(--gold);filter:blur(45px);opacity:.08;z-index:-2;transition:opacity .5s}
.company-visual-frame{position:relative;border-radius:15px;overflow:hidden;background:#e9e2d3;box-shadow:0 18px 45px rgba(0,0,0,.16);border:1px solid rgba(232,215,182,.35)}
.company-visual .company-art{display:block;grid-column:auto;grid-row:auto;width:100%;height:auto!important;max-height:none;aspect-ratio:1672/941;object-fit:contain;margin:0;border:0;border-radius:0;filter:none;box-shadow:none;transition:transform .9s cubic-bezier(.22,1,.36,1),filter .7s}
.company-visual-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.24) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.company-visual-corner{position:absolute;top:0;inset-inline-start:0;width:48px;height:48px;border-block-start:2px solid var(--gold);border-inline-start:2px solid var(--gold);border-start-start-radius:24px;pointer-events:none}
.company-visual figcaption{display:flex;align-items:center;gap:18px;padding:19px 7px 0;direction:ltr;color:var(--gold)}.company-visual figcaption span{font:9px 'Inter',sans-serif;letter-spacing:.24em;white-space:nowrap;opacity:.8}.company-visual figcaption i{height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent);opacity:.4}
@media(hover:hover) and (pointer:fine){.company-visual:hover::before{border-color:var(--gold);transform:translateY(-3px)}.company-visual:hover::after{opacity:.14}.company-visual:hover .company-art{filter:brightness(1.035)}.company-visual:hover .company-visual-frame::after{transform:translateX(130%)}}
[data-theme=light] .company-visual-frame{box-shadow:0 18px 45px rgba(103,83,41,.12)}
@media(max-width:1000px){.company-visual{grid-column:1;grid-row:auto;max-width:760px;justify-self:center;margin-top:12px}.company-visual .company-art{margin:0;max-width:none}}
@media(max-width:600px){.company-visual{padding:8px 8px 0}.company-visual::before{border-radius:19px;bottom:23px}.company-visual-frame{border-radius:12px}.company-visual-corner{width:35px;height:35px;border-start-start-radius:19px}.company-visual figcaption{padding-top:16px}.company-visual figcaption span{font-size:8px;letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){.company-visual::before,.company-visual-frame::after,.company-visual .company-art{transition:none}.company-visual-frame::after{display:none}.company-visual:hover::before{transform:none}}
/* Device layout layer: shared by home, services and projects. */
html{scroll-padding-top:115px}body{min-width:320px}img,svg,canvas{max-width:100%}.container{width:100%}.info-grid>*,.proj-grid>*,.people-grid>*,.service-detail>*,.contact-links>*{min-width:0}.nav__inner{min-width:0}.lead,.import-copy,.proj__info,.service-detail-copy{overflow-wrap:break-word}.hero-actions{flex-wrap:wrap}.project-details-toggle{min-height:48px}.gallery__ctrl{gap:15px}.gallery{overscroll-behavior-inline:contain}.footer{gap:24px;flex-wrap:wrap}.footer p{font-size:12px}.contact-card-copy b{direction:ltr;unicode-bidi:isolate;text-align:start}
@media(min-width:1600px){:root{--gutter:48px}.container{max-width:1320px}.nav,.nav.is-scrolled{max-width:1300px}.hero__copy{bottom:12vh}.hero__title{font-size:100px}.card{flex-basis:760px}.gallery__track{padding-inline:max(var(--gutter),calc((100vw - 1320px)/2 + var(--gutter)))}.content-section,.projects{padding-block:120px}}
@media(min-width:901px) and (max-width:1150px){.people-grid{gap:20px}.portrait{height:270px}.service-detail{gap:35px}.contact-links{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-links>.info-card,.contact-links>.info-card:nth-child(n+3){grid-column:auto}.contact-links>.info-card:last-child{grid-column:1/-1}}
@media(min-width:601px) and (max-width:900px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portrait{height:300px}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.imported-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.imported-stats .stat{padding:22px 16px}.imported-stats .stat b{font-size:36.8px}.card{flex-basis:82vw}.card__art{height:340px}.service-detail{gap:28px}.section-title{font-size:44px}}
@media(max-width:600px){:root{--gutter:20px}.hero{min-height:680px;height:100svh}.hero__copy,html[lang=en] .hero__copy{bottom:85px}.hero__copy--two{bottom:auto}.hero__title{font-size:clamp(34px,8.8vw,48px)}html[lang=en] .hero__title{font-size:clamp(28px,7.5vw,40px)}.hero__sub{font-size:14px;line-height:1.8}.hero__copy>.eyebrow{margin-bottom:10px}.hero-actions{gap:18px;margin-top:18px}.hero-index{left:16px}.story__pin{height:80svh;min-height:480px}.story__text{font-size:clamp(36px,9vw,54px);line-height:1.5}.story__body{gap:22px}.section-title{font-size:clamp(29px,7.5vw,37px)}.card{flex-basis:88vw}.card__art{height:235px}.card__copy h3{font-size:23px}.card__copy p{font-size:15px}.gallery__track{gap:12px}.gallery__ctrl{flex-wrap:wrap}.dots{gap:8px;padding:12px}.paddle{min-width:44px;min-height:44px}.proj-grid{grid-template-columns:1fr}.project-photo{aspect-ratio:4/3}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.portrait{height:auto;aspect-ratio:4/5}.people-grid h3{font-size:16px;line-height:1.8}.people-grid p{font-size:11px;line-height:1.8}.info-grid{grid-template-columns:1fr}.imported-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.imported-stats .stat b{font-size:33.6px}.contact-links{grid-template-columns:1fr}.service-detail-art{aspect-ratio:4/3}.services-main{padding-top:125px}.footer{flex-direction:column;align-items:flex-start;padding-block:28px}.contact-content .lead{font-size:15px}}
@media(max-width:360px){:root{--gutter:16px}.nav,.nav.is-scrolled{inset-inline:8px}.nav__inner{gap:2px;padding-inline:7px}.brand-logo{width:65px}.nav .contact-button{padding-inline:7px;gap:4px;font-size:9px}.nav .contact-button svg{display:none}.language-toggle,.theme-toggle{min-width:27px;padding:6px}.menu-toggle{width:30px}.imported-stats .stat{padding:18px 12px}.imported-stats .stat b{font-size:28.8px}.people-grid{grid-template-columns:1fr}.portrait{max-height:390px;object-fit:contain}.contact-links b,.contact-links>.info-card:nth-child(n+3) b{font-size:14px}.contact-icon{width:36px;height:36px}.contact-links>.info-card{gap:10px}}
/* Low-height landscape screens need room for both sculpture and text. */
@media(max-height:600px) and (min-width:601px){.hero{height:620px;min-height:620px}.hero__copy,html[lang=en] .hero__copy{bottom:65px}.hero__copy--two{bottom:auto}.hero__title{font-size:48px}.hero__sub{font-size:16px}.hero-actions{margin-top:14px}.hero-index{top:100px}.story__pin{height:600px}.nav,.nav.is-scrolled{top:8px}.nav__inner{min-height:60px;padding-block:8px}}
@supports(padding:max(0px)){.nav{margin-top:env(safe-area-inset-top)}.footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}}

/* Homepage Golden Reveal: no changes to the hero or headline layout. */
.golden-reveal{position:absolute;top:18%;left:50%;translate:-50% 0;width:min(55vw,480px);overflow:hidden;pointer-events:none}
.golden-reveal img{display:block;width:100%;height:auto}
.golden-reveal__sweep{position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 25%,var(--gold) 50%,transparent 75%);mix-blend-mode:screen;pointer-events:none}
@media(prefers-reduced-motion:reduce){.golden-reveal__sweep{display:none}}

/* Manual cinematic slides: natural document flow, stable tallest-slide sizing. */
#finish .broca-scroll-scene{margin-top:clamp(40px,5vw,64px)}
#finish .broca-scroll-scene > .subheading{margin-top:0;margin-bottom:28px}
#finish .broca-scroll-scene > .import-copy{columns:1;max-width:72ch}
#finish .broca-scroll-scene:not(.has-cinematic-slides) > .import-copy > p + p{margin-top:24px}
#finish .has-cinematic-slides > .info-grid,#finish .has-cinematic-slides > .import-copy{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:760px;margin:0 auto;gap:0;columns:auto;align-items:center;touch-action:pan-y pinch-zoom}
#finish .has-cinematic-slides > .info-grid > .info-card,#finish .has-cinematic-slides > .import-copy > p{grid-area:1 / 1;min-width:0;margin:0}
#finish .has-cinematic-slides > .info-grid > .info-card{padding:clamp(28px,4vw,48px);min-height:260px;display:flex;flex-direction:column;justify-content:center;animation:none;transition:border-color .3s,background .3s}
#finish .has-cinematic-slides > .import-copy > p{padding-block:24px}
#finish .broca-slide-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px;direction:rtl}
#finish .broca-slide-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--gold);background:var(--surface);font:inherit;cursor:pointer;transition:border-color .2s,opacity .2s}
#finish .broca-slide-controls button:hover{border-color:var(--gold)}
#finish .broca-slide-controls button:disabled{opacity:.3;cursor:default}
#finish .broca-slide-count{font:12px 'Inter',sans-serif;color:var(--muted);direction:ltr;font-variant-numeric:tabular-nums}
#finish .broca-scroll-scene:focus-visible,#finish .broca-slide-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(max-width:600px){#finish .has-cinematic-slides > .info-grid > .info-card{padding:28px 24px}}

/* Value creation: approved connected narrative, no slides. */
#finish .broca-value-copy{margin-top:clamp(40px,5vw,64px)}
#finish .broca-value-copy > .subheading{margin-top:0;margin-bottom:24px}
#finish .broca-value-copy > .import-copy{columns:1;max-width:100%}

/* Homepage heading overlines: remove decorative dash. */
#top .section-overline::before{content:none}

/* Methodology: reuse strategic values' manual slides and controls. */
#build .broca-methodology-slides{margin-top:50px}
#build .broca-methodology-slides.has-cinematic-slides > .info-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;max-width:760px;margin:0 auto;align-items:stretch;touch-action:pan-y pinch-zoom}
#build .broca-methodology-slides.has-cinematic-slides > .info-grid > .info-card{grid-area:1 / 1;min-width:0;margin:0;animation:none;transition:border-color .3s,background .3s}
#build .broca-slide-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px;direction:rtl}
#build .broca-slide-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--gold);background:var(--surface);font:inherit;cursor:pointer;transition:border-color .2s,opacity .2s}
#build .broca-slide-controls button:hover{border-color:var(--gold)}
#build .broca-slide-controls button:disabled{opacity:.3;cursor:default}
#build .broca-slide-count{font:12px 'Inter',sans-serif;color:var(--muted);direction:ltr;font-variant-numeric:tabular-nums}
#build .broca-methodology-slides:focus-visible,#build .broca-slide-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

/* Remove methodology card indices only. */
#build .info-card::before{content:none}

/* Give the two-line hero headline room for Arabic ascenders and descenders. */
.hero__copy--two .hero__big{line-height:1.5}

/* Direction-aware header, preserving its existing layout and palette. */
header#nav{transition:transform .28s var(--ease),opacity .22s ease,background .4s var(--ease),border-color .4s}
header#nav.is-scroll-hidden{transform:translateY(calc(-100% - 40px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){header#nav{transition:none}}

/* Breathing room between the closing hero headline and company introduction. */
#story > .story__body{padding-top:clamp(48px,6vw,88px)}

/* Allow narrow phones to fit the usable viewport, including the scrollbar. */
@media(max-width:360px){body{min-width:0}}

/* Local Thmanyah typography: headings only; preserve all existing metrics. */
@font-face{font-family:'Thmanyah Serif Display';src:url('fonts/thmanyahserifdisplay-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('fonts/thmanyahserifdisplay-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('fonts/thmanyahserifdisplay-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
h1,h2,h3,h4,h5,h6,[role='heading']{font-family:'Thmanyah Serif Display','IBM Plex Sans Arabic',serif!important}
h1,h2,[role='heading'][aria-level='1'],[role='heading'][aria-level='2']{font-weight:500!important}
h3,h4,h5,h6,[role='heading']:not([aria-level='1']):not([aria-level='2']){font-weight:400!important}
:is(h1,h2,h3,h4,h5,h6,[role='heading']) :is(strong,b){font-weight:700}
/* Phase two: Arabic text only; Display headings and numeric/icon faces stay intact. */
@font-face{font-family:'Thmanyah Serif Text';src:url('fonts/thmanyahseriftext-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Thmanyah Serif Text';src:url('fonts/thmanyahseriftext-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Thmanyah Serif Text';src:url('fonts/thmanyahseriftext-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
html[lang='ar'] body{font-family:'Thmanyah Serif Text','Cairo',sans-serif;font-weight:400}
html[lang='ar'] :is(button,input,textarea,select,label){font-family:'Thmanyah Serif Text','Cairo',sans-serif;font-weight:500}
html[lang='ar'] p{font-weight:400}
html[lang='ar'] :is(.nav__links a,.contact-button,.hero-secondary,.project-details-toggle,.eyebrow,label,.contact-card-copy > span,.stat > span){font-weight:500}
html[lang='ar'] :is(strong,b):not(.stat b){font-weight:700}
/* These elements inherited Cairo before phase two; keep their numerals and symbols identical. */
html[lang='ar'] .stat b{font-family:'Cairo',sans-serif}


/* BEGIN photographic hero visual: isolated replacement for the rejected drawing. */
.golden-reveal.hero-architecture-photo{top:6%;width:100%;height:clamp(300px,62svh,580px);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hero-architecture-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,transparent 20%,transparent 48%,var(--bg) 100%);pointer-events:none}
.golden-reveal .hero-architecture-photo__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.82) brightness(.83);transform-origin:center}
@media(max-width:600px){.golden-reveal.hero-architecture-photo{top:8%;width:100%;height:52svh}}
/* END photographic hero visual. */