/* The palette is sampled from the supplied ZAKHARIF blue-grey mark. */
@font-face{font-family:'Plex Arabic';src:url('fonts/plex-arabic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('fonts/plex-arabic-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('fonts/plex-arabic-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
:root{--paper:#f5f7f8;--paper-deep:#e7edf0;--ink:#1c2d39;--muted:#60717c;--forest:#2d4657;--bronze:#728b9b;--line:#c8d3d9;--white:#fff}
body{background:var(--paper);color:var(--ink);font-family:'Plex Arabic',Tahoma,Arial,sans-serif;line-height:1.85}
html[lang="en"] body{font-family:Manrope,Arial,Helvetica,sans-serif;line-height:1.7}
::selection{background:#7890a0;color:#fff}
.site-header{background:rgba(245,247,248,.94);border-bottom-color:rgba(35,58,73,.14)}
.home .site-header:not(.scrolled){background:linear-gradient(180deg,rgba(13,30,43,.38),transparent);border-color:rgba(255,255,255,.28)}
.site-header.scrolled{box-shadow:0 10px 30px rgba(20,42,56,.08)}
.brand-emblem{border:1px solid rgba(255,255,255,.5);box-shadow:0 3px 15px rgba(11,27,38,.15)}
.brand-type,.brand-type small{font-family:Manrope,Arial,sans-serif}
.hero{background:#314a59}
.hero-shade{background:linear-gradient(90deg,rgba(9,31,45,.76),rgba(9,31,45,.35) 56%,rgba(9,31,45,.08)),linear-gradient(0deg,rgba(8,26,39,.42),transparent 34%)}
.hero h1{font-weight:400;max-width:860px;text-wrap:balance;text-shadow:0 2px 24px rgba(7,18,28,.12)}
.hero-intro{color:rgba(255,255,255,.92)}
.hero-kicker{letter-spacing:.19em}
.hero-bottom{border-top:1px solid rgba(255,255,255,.42);padding-top:17px}
.button{border-radius:2px;letter-spacing:.015em}
.button-light{background:#f8fafb;color:#1b303e}
.button-dark{background:var(--forest)}
.button-dark:hover{background:#1c3544}
.header-contact:hover{background:var(--forest);color:white}
.eyebrow{color:var(--bronze)}
.eyebrow-rule{background:var(--bronze)}
.display-title{color:var(--ink);text-wrap:balance}
.about-copy p,.business-copy p:not(.eyebrow),.rich-copy,.project-facts dt,.service-row-text p,.contact-line span,.about-note p{color:var(--muted)}
.services-section,.zak-about-principles{background:var(--paper-deep)}
.service-image,.project-card-media,.gallery-item,.service-row-image{background:#d5dfe4}
.project-card-text{border-color:var(--line)}
.project-card h3,.service-info h3{color:var(--ink)}
.card-arrow{background:#f7f9fa;color:var(--ink);border-radius:50%}
.process-section,.zak-about-services,.project-next{background:var(--forest);color:#f4f7f8}
.process-section .display-title,.zak-about-services .display-title{color:#f4f7f8}
.process-step>span{color:#b9cbd5}
.process-step p{color:rgba(255,255,255,.78)}
.spotlight-section{background:#324757}
.spotlight-section:before{background:linear-gradient(0deg,rgba(11,30,43,.68),transparent 72%)}
.spotlight-panel{background:var(--paper)}
.final-cta{background:#748d9e;color:#fff}
.site-footer{background:#192f3e;color:#f4f7f8}
.footer-overline,.footer-links p{color:#b7c9d4}
.footer-links a:hover{color:#d2e1e8}
.contact-form-panel{background:var(--paper-deep)}
.contact-social{border-top:1px solid var(--line);padding-top:22px;margin-top:26px}
.contact-social p{margin:0 0 15px;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--bronze);text-transform:uppercase}
.contact-social>div{display:flex;flex-wrap:wrap;gap:8px}
.contact-social a{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);font-size:12px;transition:background .25s,color .25s}
.contact-social a:hover{background:var(--forest);color:white}
.form-row input,.form-row textarea,.form-row select{border-bottom-color:#9baeb9}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-bottom-color:var(--forest)}
.filter-chip:hover,.filter-chip.active{background:var(--forest);border-color:var(--forest)}
.simple-hero,.project-hero{background:#314b5c}
.project-hero-shade,.simple-hero-shade{background:linear-gradient(0deg,rgba(10,31,44,.75),rgba(10,31,44,.04) 72%)}
.lightbox{background:rgba(11,25,35,.97)}
html[dir="rtl"] .display-title,html[dir="rtl"] .hero h1,html[dir="rtl"] .project-hero-content h1,html[dir="rtl"] .simple-hero-content h1,html[dir="rtl"] .final-cta h2{letter-spacing:0;line-height:1.42}
html[dir="rtl"] .hero h1{line-height:1.27}
@media(max-width:850px){.site-header{background:rgba(245,247,248,.97)}.home .site-header:not(.scrolled){background:linear-gradient(180deg,rgba(11,29,42,.45),transparent)}.hero-shade{background:linear-gradient(0deg,rgba(9,30,43,.68),rgba(9,30,43,.3) 60%,rgba(9,30,43,.18))}.hero-bottom{padding-top:12px}}
@media(max-width:600px){.hero-kicker{letter-spacing:.09em}.button{gap:18px}.section{padding-block:78px}.display-title{line-height:1.35}.footer-lockup{margin-bottom:22px}html[dir="rtl"] .hero h1{line-height:1.28}}