@font-face{font-family:"Portfolio Arabic";src:url("assets/fonts/portfolio-arabic-400.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Portfolio Arabic";src:url("assets/fonts/portfolio-arabic-500.woff") format("woff");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("assets/fonts/dm-serif-display.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
:root{
  color-scheme:light;
  --paper:#f6f6f1;
  --ink:#222c27;
  --muted:#626960;
  --forest:#284035;
  --line:#d2d6cc;
  --stage:#e3e7dd;
  --arabic:"Portfolio Arabic",Tahoma,Arial,sans-serif;
  --serif:"DM Serif Display",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--arabic);font-size:1.0625rem;line-height:1.85;-webkit-font-smoothing:antialiased}
::selection{color:var(--paper);background:var(--forest)}
a{color:inherit;text-underline-offset:6px}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{font-weight:500}
img{display:block;max-width:100%}
.page-width{width:min(1120px,calc(100% - 112px));margin-inline:auto}
.skip-link{position:absolute;inset-block-start:10px;inset-inline-start:24px;padding:12px 20px;background:var(--forest);color:var(--paper);z-index:50;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
/* A quiet masthead leaves room for the work. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:28px 23px;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;max-width:100%}
.wordmark{display:block;font-family:var(--serif);font-size:1.75rem;line-height:1.3;letter-spacing:-.7px}
.wordmark>span{color:var(--forest)}
.nav nav{display:flex;align-items:center;gap:32px}
.nav nav a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:.9375rem;text-decoration:none}
.nav nav a:hover{text-decoration:underline}
.nav-cta{color:var(--forest);font-weight:500}
.nav-cta span{font-family:Arial,sans-serif;font-size:1.25rem}
/* Unequal columns and a lower-set introduction make a compact opening. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10%;padding-block:67px 78px;align-items:end}
.eyebrow,.section-label{font-size:.875rem;color:var(--muted);font-weight:400}
.eyebrow>span,.section-label>span{margin-inline:10px;color:#93998f}
.hero h1{font-size:clamp(2.5rem,3.7vw,3.25rem);line-height:1.5;margin-top:19px;font-weight:500}
.hero h1 span{color:var(--forest)}
.hero-note{max-width:390px;padding-block-end:10px}
.hero-note p{color:var(--muted);line-height:1.95}
.text-link{display:inline-flex;align-items:center;gap:24px;padding-block:8px 6px;min-height:44px;border-bottom:1px solid currentColor;text-decoration:none;font-weight:500}
.hero-note .text-link{margin-top:22px;font-size:.9375rem}
.text-link span{font-family:Arial,sans-serif;transition:transform 180ms ease}
.text-link:hover span{transform:translateY(-3px)}
.hero-note .text-link:hover span{transform:translateY(3px)}
/* Original project imagery. */
.work{scroll-margin-top:24px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--ink);padding-block:16px 26px}
.section-meta{font-size:.875rem;color:var(--muted)}
.project{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:7.5%;align-items:start}
.project-image{background:var(--stage);padding:38px 32px 20px;min-width:0}
.project-preview{width:100%;margin-inline:auto;background:#fcfaf6;box-shadow:0 10px 25px #202e2612;border:1px solid #c4caba}
.preview-address{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;font:400 .75rem/1.4 var(--arabic);color:#5e6359;border-bottom:1px solid #d2d6cc;background:#f6f6f1}
.preview-caption{font-family:var(--serif);font-size:.875rem;color:var(--forest)}
.screenshot-window{display:block;position:relative;aspect-ratio:1200/630;overflow:hidden;background:#173f30}
.screenshot-window img{position:absolute;inset-inline-start:0;top:0;width:100%;max-width:none;height:auto}
.screenshot-window:focus-visible{outline-offset:4px;outline-color:var(--forest);z-index:1}
.project-image figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px;color:#5c6559;font-size:.75rem;line-height:1.65}
.project-image figcaption span[lang=en]{font-family:Arial,sans-serif;font-size:.75rem}
.project-copy{padding-top:30px;min-width:0}
.project-location{font-size:.875rem;color:var(--muted);margin-bottom:15px}
.project-copy h2{font:400 clamp(3.625rem,5.7vw,5rem)/.99 var(--serif);letter-spacing:-2.2px;text-align:right;width:fit-content;margin-bottom:30px}
.project-copy h2 em{display:inline-block;font-style:normal;font-size:.43em;line-height:1.25;letter-spacing:-.6px}
.project-copy h3{font-size:1.5rem;line-height:1.65;margin-bottom:15px}
.project-copy>p:not(.project-location){font-size:1rem;color:var(--muted);line-height:1.95;max-width:365px}
.project-details{margin:25px 0 18px;padding:0;border-top:1px solid var(--line)}
.project-details>div{display:grid;grid-template-columns:65px minmax(0,1fr);gap:14px;padding-block:11px;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.75}
.project-details dt{font-weight:500}
.project-details dd{margin:0;color:var(--muted)}
.project-link{font-size:1rem;color:var(--forest);margin-top:7px}
/* Services stay compact; the case study gets the visual space. */
.services{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10%;padding-block:112px 56px}
.section-intro h2{font-size:2.125rem;line-height:1.6;margin:16px 0 18px}
.section-intro>p:last-child{color:var(--muted);font-size:1rem;max-width:245px}
.services-list{border-top:1px solid var(--ink)}
.services-list article{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:26px;padding-block:26px 28px;border-bottom:1px solid var(--line);align-items:start}
.services-list h3{font-size:1.0625rem;line-height:1.8;font-weight:500}
.services-list p{font-size:1rem;color:var(--muted);line-height:1.85}
.process{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10%;padding-block:32px 96px}
.process-heading{padding-top:26px}
.process-heading h2{font-size:1.75rem;margin-top:10px;line-height:1.6}
.steps{counter-reset:step;list-style:none;padding:26px 0 0;margin:0;border-top:1px solid var(--line)}
.steps li{counter-increment:step;position:relative;padding-inline-start:42px;margin-bottom:25px}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:"0" counter(step);position:absolute;inset-inline-start:0;inset-block-start:2px;color:var(--muted);font:400 .8125rem/2 var(--serif)}
.steps h3{font-size:1rem;font-weight:500;margin-bottom:3px}
.steps p{font-size:1rem;color:var(--muted);line-height:1.85}
/* A single contact action and a readable number. */
.contact{background:var(--forest);color:var(--paper)}
.contact-inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:9%;padding-block:63px 66px}
.contact .section-label{color:#c6d0c3}
.contact h2{font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.6;margin:13px 0 12px}
.contact-copy>p:last-child{font-size:1rem;color:#d0d8cb;line-height:1.95}
.contact-action{display:flex;align-items:flex-start;flex-direction:column;gap:15px;justify-self:end}
.contact-link{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:14px 20px;min-height:52px;background:var(--paper);color:var(--forest);font-size:1rem;text-decoration:none;font-weight:500;border:1px solid transparent;transition:background 160ms ease,color 160ms ease}
.contact-link span{font:400 1.375rem/1 Arial,sans-serif}
.contact-link:hover{background:#e0e6d9}
.contact-link:focus-visible{outline-color:var(--paper)}
.contact-number{font-family:Arial,sans-serif;color:#d0d8cb;letter-spacing:1.4px;font-size:.875rem}
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding-block:24px;color:var(--muted);font-size:.8125rem}
.footer a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.footer a:hover{text-decoration:underline}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:intro-in 450ms ease-out both}
  .hero-note{animation:intro-in 500ms 70ms ease-out both}
  @keyframes intro-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:1050px){
  .page-width{width:calc(100% - 72px)}
  .hero{gap:7%;padding-block:52px 62px}
  .project{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:6%}
  .project-image{padding:28px 24px 18px}
  .project-copy{padding-top:12px}
  .project-copy h2{font-size:3.875rem;margin-bottom:24px}
  .project-image figcaption{margin-top:20px}
  .project-image figcaption span[lang=en]{display:none}
  .services,.process{gap:7%}
  .services-list article{grid-template-columns:1fr;gap:7px;padding-block:22px}
  .contact-inner{gap:6%}
}
@media(max-width:720px){
  .page-width{width:calc(100% - 40px)}
  .nav{padding-block:18px 15px;gap:15px;flex-wrap:wrap}
  .wordmark{font-size:1.5rem;letter-spacing:-.5px}
  .nav nav{gap:20px}
  .nav nav a{font-size:.875rem;gap:7px}
  .hero{grid-template-columns:1fr;gap:25px;padding-block:40px 49px}
  .hero h1{font-size:2.5rem;line-height:1.5;margin-top:15px}
  .hero-note{max-width:510px;padding:0}
  .hero-note p{font-size:1rem;line-height:1.95}
  .hero-note .text-link{margin-top:14px}
  .section-title{padding-block:14px 20px;gap:12px;flex-wrap:wrap}
  .section-meta{font-size:.8125rem}
  .project{grid-template-columns:1fr;gap:26px}
  .project-image{padding:26px 26px 18px}
  .project-preview{width:100%}
  .project-image figcaption{margin-top:20px;font-size:.75rem}
  .project-copy{padding-top:0;display:flex;flex-wrap:wrap;column-gap:20px;align-items:flex-start}
  .project-location{flex-basis:100%;order:0;margin-bottom:12px}
  .project-copy h2{order:2;flex:0 1 auto;max-width:100%;margin-inline-start:auto;font-size:3.5rem;line-height:1.05;margin-bottom:0}
  .project-copy h3{order:1;flex:1 1 120px;font-size:1.375rem;line-height:1.6;margin:0 0 16px}
  .project-copy>p:not(.project-location){order:3;flex-basis:100%;margin-top:22px;max-width:none}
  .project-details{order:4;flex-basis:100%;margin-top:22px;margin-bottom:14px}
  .project-details>div{grid-template-columns:65px minmax(0,1fr)}
  .project-link{order:5;align-self:flex-start;margin-top:0}
  .services{grid-template-columns:1fr;gap:26px;padding-block:73px 40px}
  .section-intro h2{font-size:1.875rem;margin-block:12px}
  .section-intro h2 br{display:none}
  .section-intro>p:last-child{max-width:450px}
  .services-list article{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px;padding-block:22px}
  .services-list h3{font-size:1rem}
  .process{grid-template-columns:1fr;gap:20px;padding-block:12px 57px}
  .process-heading{padding-top:0}
  .process-heading h2{font-size:1.625rem;margin-top:7px}
  .steps{padding-top:24px}
  .steps li{margin-bottom:24px}
  .contact-inner{grid-template-columns:1fr;gap:27px;padding-block:42px 45px}
  .contact h2{font-size:1.875rem}
  .contact-action{justify-self:start;gap:13px}
  .contact-link{padding:13px 18px}
  .footer{gap:8px 20px;padding-block:20px;font-size:.75rem}
  .footer>span:nth-child(2){flex-basis:100%;order:3}
}
@media(max-width:390px){
  .page-width{width:calc(100% - 36px)}
  .nav{row-gap:8px}
  .nav nav{justify-content:space-between;width:100%}
  .hero{padding-top:29px}
  .hero h1{font-size:2.25rem}
  .project-image{padding:21px 18px 17px}
  .preview-address{font-size:.75rem;padding-inline:9px}
  .preview-caption{display:none}
  .project-copy h2{font-size:3.125rem}
  .project-copy h3{font-size:1.25rem}
  .services-list article{grid-template-columns:1fr;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}