:root{--orange:#dfac70;--black:#191713;--ink:#211e18;--paper:#f4ede0;--white:#fff8eb}
body{font-family:system-ui,sans-serif;background:#f4ede0;color:#211e18}
.nav,.site-footer{background:#191713;color:#fff8eb}.wordmark{display:inline-flex;gap:.5rem;align-items:center;letter-spacing:.16em;font-size:12px;font-weight:800;white-space:nowrap}.q-symbol{color:#dfac70;font:700 38px/.85 Georgia,serif}
.hero-image{background-image:url('assets/home.jpg');background-position:center 53%}.hero-shade{background:linear-gradient(270deg,#15120fee 0%,#15120fb0 45%,#15120f35 100%)}.hero-copy{position:relative;z-index:1}.hero-copy h1{font-size:clamp(3rem,8vw,8.2rem);line-height:1.08}.hero .hero-lead{color:#fff8eb}.q-monument{position:absolute;left:5%;bottom:10%;font:700 clamp(7rem,30vw,30rem)/.8 Georgia,serif;color:#ffe1ab48;pointer-events:none;transform:rotate(-12deg)}
.f-heading,.f-wrap{padding:clamp(28px,6vw,100px) clamp(20px,7vw,120px)}.f-heading{padding-top:clamp(130px,16vw,235px);background:#241e17;color:#fff8eb}.f-heading h1{font-size:clamp(2.5rem,8vw,7rem);line-height:1.14;margin:.18em 0}.f-heading p:last-child{max-width:55ch;color:#f0dcc2}.f-wrap{background:#f4ede0}.f-wrap.service-list .service-card{color:#211e18;border-color:#a89176}.f-wrap.service-list .service-card p{color:#514238}.f-photo{margin:0 0 24px}.f-photo img{display:block;width:100%;height:clamp(230px,49vw,640px);object-fit:cover;border-radius:4px}.f-photo figcaption{margin-top:10px;color:#69513b}.f-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px}.f-columns article,.contact-panel{border:1px solid #cbb99f;padding:clamp(18px,4vw,50px)}.contact-panel select{display:block;margin:10px 0 16px;padding:10px;border:1px solid #897358;font:inherit;max-width:100%}.project-card figure img{object-fit:cover}.project-card figcaption{color:#fff8eb}.skip{position:fixed;top:8px;right:8px;z-index:1000;background:white;color:black;padding:8px;transform:translateY(-150%)}.skip:focus{transform:none}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #d48a39;outline-offset:4px}.reveal{opacity:1;transform:none}.has-motion .reveal:not(.visible):not(:focus-within){opacity:0;transform:translateY(24px)}@media(max-width:650px){.hero-copy h1{font-size:clamp(2.6rem,11vw,4.25rem)}.q-monument{bottom:16%;left:3%}.hero-shade{background:linear-gradient(270deg,#15120fe9,#15120f75)}.f-heading h1{overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.has-motion .reveal:not(.visible){opacity:1;transform:none}}

/* Keep each action readable in its default and interactive states. */
.primary-btn,.primary-btn.large,.final-cta .primary-btn,.hero .primary-btn{background:#dfac70;color:#24170c}
.primary-btn:hover,.primary-btn:focus-visible,.final-cta .primary-btn:hover{background:#f3c98e;color:#24170c}
.mini-cta,.hero .text-btn,.outline-link.light{color:#fff8eb}
.mini-cta:hover,.mini-cta:focus-visible,.outline-link:hover,.outline-link:focus-visible{background:#dfac70;color:#24170c;border-color:#dfac70}
.featured-projects .outline-link:not(:hover):not(:focus-visible),.f-wrap .text-link{color:#211e18}
.final-cta .primary-btn,.contact-panel .primary-btn{width:max-content;max-width:100%}

.q-intro{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:18px;background:#191713;color:#fff8eb;pointer-events:none;animation:q-intro-exit 1.55s cubic-bezier(.7,0,.25,1) both}
.q-intro-mark{position:relative;display:grid;place-items:center;width:135px;height:135px;font:700 100px/.85 Georgia,serif;color:#dfac70;animation:q-mark-enter .65s cubic-bezier(.2,.7,.25,1) both}
.q-intro-mark::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #dfac7066;border-top-color:#dfac70;animation:q-orbit 1.1s ease-out both}
.q-intro-label{font:700 11px system-ui,sans-serif;letter-spacing:.32em;direction:ltr;animation:q-mark-enter .6s .14s both}
@keyframes q-mark-enter{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes q-orbit{from{transform:rotate(-140deg)}to{transform:rotate(40deg)}}
@keyframes q-intro-exit{0%,65%{clip-path:inset(0)}100%{clip-path:inset(0 0 100%);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.q-intro{display:none}}

/* Foreground colors belong to the surface, including inherited headings and links. */
.hero,.section-dark,.featured-projects,.about-band{color:#fff8eb}
.featured-projects .outline-link:not(:hover):not(:focus-visible){color:inherit;border-color:#c8b9a4}
.section-dark .service-card p,.about-copy p:not(.kicker),.featured-projects .project-intro p:not(.kicker){color:#dfd4c4}
.f-wrap.service-list .service-card .index,.statement>p:first-child{color:#76502f}
.service-card:hover,.service-card:focus-visible{background:#dfac70;color:#24170c}
.service-card:hover :is(p,.index),.service-card:focus-visible :is(p,.index),.f-wrap.service-list .service-card:is(:hover,:focus-visible) :is(p,.index){color:#24170c}
.service-card::before{content:none}
.final-cta .primary-btn{background:#24170c;color:#fff8eb}
.final-cta .primary-btn:is(:hover,:focus-visible){background:#3c2818;color:#fff8eb}
.project-card figcaption{background:linear-gradient(0deg,#17130ff5,#17130fbf 72%,transparent)}
.project-card i{opacity:1;transform:none}
.statement h2 span{color:#76502f}


/* Transparent emblem and Arabic labels. */
.wordmark{letter-spacing:0;gap:10px}
.brand-emblem{display:block;position:relative;aspect-ratio:1}
.brand-emblem img,.brand .brand-emblem img{display:block;width:100%;height:100%;object-fit:contain}
.wordmark .brand-emblem{width:38px;flex:none}
.q-intro-mark{width:116px;height:116px}
.q-intro-mark::before{content:none}
.q-intro-label{letter-spacing:0;direction:rtl;font-size:14px}
.q-monument{width:clamp(100px,24vw,320px);opacity:.22;transform:none}
.workshop-emblem{width:min(100%,165px)}
.kicker,.statement>p:first-child{letter-spacing:0}

body{font-family:Alexandria,system-ui,sans-serif}
.brand .wordmark-lettering{width:clamp(82px,9vw,125px);height:auto}
.wordmark{gap:8px}
.hero-copy h1,.section-head h2,.about-copy h2,.project-intro h2,.final-cta h2,.f-heading h1{letter-spacing:-.035em}
.hero-copy h1{font-size:clamp(2.75rem,7vw,7rem)}
.hero-copy .hero-lead{max-width:52ch;line-height:1.95}
.home-page .q-monument{inset-inline-start:auto;inset-inline-end:7%;opacity:.32}
.section-head,.project-intro{align-items:start}
.service-card{grid-template-columns:44px clamp(90px,14vw,175px) minmax(0,1fr) auto;padding:20px 14px;gap:clamp(10px,2vw,32px)}
.sector-thumb{display:block;width:100%;aspect-ratio:1.65;object-fit:cover}
.service-card h3{font-size:clamp(1.1rem,2.2vw,2rem)}
.workshop-feature{position:relative;margin:0;overflow:hidden}
.workshop-feature img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.workshop-feature figcaption{position:absolute;bottom:0;right:0;background:#211e18;color:#fff8eb;font-size:11px;padding:8px 12px}
.about-band{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(22px,6vw,90px)}
.f-heading h1{font-size:clamp(2.25rem,6vw,6rem)}
.f-wrap.project-grid{gap:20px}
.final-cta{min-height:0;padding-block:clamp(65px,9vw,145px)}
.final-cta h2{font-size:clamp(2.1rem,6vw,5.5rem)}
.q-intro{overflow:hidden;gap:16px;animation:q-intro-exit 2.2s cubic-bezier(.7,0,.25,1) both}
.intro-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#dfac7029 calc(20% - 1px) 20%);animation:intro-grid .65s both}
.intro-frame{display:grid;place-items:center;width:170px;aspect-ratio:1;position:relative}
.intro-orbit{position:absolute;inset:0;border:1px solid #dfac7060;border-top-color:#dfac70;border-radius:50%;animation:q-orbit 1.55s ease-out both}
.intro-orbit::after{content:"";position:absolute;top:11%;right:11%;width:7px;height:7px;background:#dfac70;border-radius:50%}
.intro-wordmark{width:138px;animation:q-mark-enter .65s .35s both}
.intro-line{width:138px;height:2px;background:#dfac70;transform-origin:right;animation:intro-line 1.1s .23s both}
@keyframes intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-grid{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}
@media(max-width:700px){.about-band{grid-template-columns:1fr}.workshop-feature img{aspect-ratio:1.5}.service-card{grid-template-columns:70px minmax(0,1fr) auto;gap:10px;padding-inline:0}.service-card .index{display:none}.service-card .card-arrow{display:block;font-size:16px}.service-card p{font-size:12px}.hero-copy h1{font-size:clamp(2.4rem,10vw,4rem)}}