/*
Theme Name: M Elwesemy First Page
Author: M Elwesemy
Description: Bilingual Arabic and English homepage in navy, gold and white. Contact links and architectural concept illustration.
Version: 1.1.0
Text Domain: melwesemy-first-page
*/

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f7f6f2;color:#132638;font-family:Arial,Tahoma,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #a67b31;outline-offset:5px}.wrap{width:min(1240px,88%);margin:auto}.top{background:#102638;color:#d6dfdf;font-size:12px;letter-spacing:.07em;padding:9px 0}.top .wrap{display:flex;justify-content:space-between}header{background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid #e4e6e5}.nav{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:92px}.brand{display:flex;gap:15px;align-items:center}.mark{font-size:30px;font-weight:800;color:#a78041;border-inline-start:4px solid #a78041;padding-inline-start:12px;letter-spacing:-2px}.brand strong{display:block;font-size:18px;letter-spacing:.09em}.brand small{display:block;font-size:9px;letter-spacing:.22em}nav{display:flex;gap:27px;align-items:center;font-size:13px}nav a:hover{color:#996d2b}.language{border:1px solid #cbd0d1;background:transparent;padding:7px 13px;border-radius:2px}.hero{background:#102638;color:white;overflow:hidden;position:relative}.hero-grid{display:grid;grid-template-columns:1.03fr 1fr;min-height:630px;align-items:center;gap:50px}.eyebrow{color:#b89152;letter-spacing:.2em;font-size:11px;font-weight:700;text-transform:uppercase;display:flex;gap:12px;align-items:center}.eyebrow:before{content:'';height:1px;width:32px;background:currentColor}h1{font-size:clamp(42px,4.8vw,70px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:25px 0}h1 em{font-style:normal;color:#dbb979}.intro{max-width:470px;font-size:16px;color:#c3d0d5;line-height:1.8}.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 23px;font-size:13px;font-weight:700;border:1px solid #a88246;background:#b58a48;color:#102638;gap:16px}.btn.outline{background:transparent;color:#fff;border-color:#63717a}.btn:hover{background:#d4ae70;color:#102638}.hero-art{align-self:stretch;position:relative;display:flex;align-items:center;justify-content:center}.hero-art svg{width:100%;height:100%;min-height:500px}.art-label{position:absolute;bottom:27px;inset-inline-start:20px;border-inline-start:2px solid #bc9558;padding-inline-start:15px;font-size:10px;color:#afc1ca;letter-spacing:.16em}.ribbon{background:#e9e5dc;border-bottom:1px solid #d7d2c8}.ribbon .wrap{display:flex;justify-content:space-between;gap:25px;padding:22px 0;font-size:11px;letter-spacing:.12em;color:#46535a}.ribbon span:before{content:'+';color:#a78041;margin-inline-end:12px}section{padding:88px 0}h2{font-size:clamp(32px,3.4vw,46px);font-weight:400;letter-spacing:-.03em;line-height:1.15;margin:18px 0 25px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.copy{color:#5e6970;font-size:16px}.text-link{font-size:13px;font-weight:700;border-bottom:1px solid #b58a48;display:inline-block;padding-bottom:7px;margin-top:20px}.services{background:#fff}.section-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:37px}.section-head p{max-width:340px;color:#657179;font-size:14px}.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d6dcdd;border-bottom:1px solid #d6dcdd}.card{padding:30px 33px 37px;border-inline-end:1px solid #d6dcdd}.card:first-child{padding-inline-start:0}.card:last-child{border:0}.num{font-size:11px;color:#977444;letter-spacing:.13em}.icon{display:block;width:56px;height:56px;margin:28px 0;color:#a78041}.card h3{font-size:21px;font-weight:400;margin-bottom:10px}.card p{color:#67737a;font-size:14px;margin-bottom:0}.process{padding:58px 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:35px}.step strong{display:block;font-size:16px}.step p{font-size:13px;color:#657179}.contact{background:#102638;color:white}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact p{color:#c0cdd4}.details{border-top:1px solid #415362;margin-top:25px}.detail{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #415362;font-size:14px;flex-wrap:wrap}.detail small{color:#a6b6bf}.detail a{direction:ltr;display:inline-block}.detail a:hover{color:#dbb979}footer{background:#0a1d2b;color:#adbbc2;padding:27px 0;font-size:11px}.foot{display:flex;justify-content:space-between;gap:20px}.foot strong{color:white;font-weight:400}.float-wa{position:fixed;bottom:22px;inset-inline-end:22px;background:#fff;border:1px solid #d0d9d7;border-radius:30px;padding:10px 19px;box-shadow:0 6px 22px #0002;font-size:12px;z-index:7;color:#102638}.float-wa span{color:#22855b;margin-inline-end:7px}[dir=rtl] h1,[dir=rtl] h2{letter-spacing:0;line-height:1.4}[dir=rtl] .eyebrow,[dir=rtl] .ribbon .wrap{letter-spacing:0}[dir=rtl] .brand{direction:ltr}[dir=rtl] .brand strong{letter-spacing:.03em}.skip{position:absolute;top:-80px;background:white;color:#102638;padding:10px;z-index:20}.skip:focus{top:0}
@media(max-width:950px){nav{gap:15px}nav .nav-link{display:none}.hero-grid{gap:15px;min-height:580px}.about-grid{gap:40px}.contact-grid{gap:40px}.card{padding:25px 20px}.ribbon .wrap{font-size:9px}.hero-art svg{min-height:480px}}@media(max-width:640px){.top{font-size:10px}.top .top-email{display:none}.nav{min-height:78px;gap:10px}.brand strong{font-size:15px}.brand small{font-size:8px}.mark{font-size:25px}.language{font-size:12px}.hero-grid{grid-template-columns:1fr;padding-top:48px;gap:0}.hero-art{height:330px}.hero-art svg{min-height:0}.hero h1{font-size:47px}.intro{font-size:15px}.art-label{bottom:12px;font-size:8px}.ribbon .wrap{flex-wrap:wrap;gap:12px;justify-content:start}.ribbon span{width:45%}section{padding:57px 0}.about-grid,.contact-grid{grid-template-columns:1fr;gap:20px}.section-head{display:block}.cards{grid-template-columns:1fr}.card,.card:first-child{padding:26px 0;border-inline-end:0;border-bottom:1px solid #d6dcdd}.icon{margin:15px 0;height:38px}.card h3{margin-top:10px}.steps{grid-template-columns:1fr;gap:12px}.foot{flex-direction:column;gap:8px}.float-wa{bottom:15px;inset-inline-end:15px}.detail{font-size:13px}}

/* Letterhead identity */
:root{--navy:#001e46;--gold:#d79a1c;--ink:#08234a}body{background:#fff;color:var(--ink)}header{box-shadow:0 3px 14px #001e4607;position:relative}html{scroll-padding-top:25px}.wrap{width:min(1280px,90%)}.brand-row{display:flex;align-items:center;justify-content:space-between;padding:24px 0 22px;gap:30px}.original-brand{display:block;width:min(450px,48%);line-height:0}.original-brand img{display:block;width:100%;height:auto}.header-contact{display:flex;flex-direction:column;gap:9px;font-size:14px;color:#001d46}.header-contact a{display:flex;align-items:center;gap:13px;direction:ltr}.contact-circle{background:linear-gradient(135deg,#e8b84e,#d08b0c);color:#00244e;width:29px;height:29px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px}.brand-rule{height:3px;background:linear-gradient(to right,#d4910b 0%,#ffc84c 41%,#001b42 41%,#001b42 77%,#d4910b 77%);margin:0 5%}.nav{min-height:62px;gap:20px}.nav-end{display:flex;align-items:center;gap:20px}.nav-cta{font-size:12px;font-weight:700;color:#001d46}.language{font-size:12px;border-color:#d8dfe6;color:#001e46;padding:6px 12px}.hero{background:#fbfcfd;color:#001e46;border-bottom:1px solid #e6eaf0}.hero:before{content:'';position:absolute;inset:0;background:url(assets/world-map.png) center 50%/100% auto no-repeat;opacity:.55;pointer-events:none}.hero:after{content:'';position:absolute;bottom:0;right:0;width:30%;height:13px;background:linear-gradient(100deg,#d18c0b,#f7c660,#d18c0b);clip-path:polygon(4% 0,100% 0,100% 100%,0 100%)}.hero-grid{position:relative;min-height:630px;gap:35px;z-index:1}.hero-grid>div:first-child{padding:45px 0 55px}.eyebrow{color:#a67212;font-size:10px;letter-spacing:.16em}h1{font-size:clamp(43px,4.5vw,67px);font-weight:600;letter-spacing:-.05em;margin:27px 0}h1 em{color:#b97e10}.intro{color:#5b6d81;font-size:16px;max-width:460px}.btn{background:#00234b;border-color:#00234b;color:#fff;padding:15px 25px}.btn:hover{background:#bd861c;border-color:#bd861c;color:#fff}.btn.outline{background:transparent;color:#00234b;border-color:#b9c4cf}.btn.outline:hover{background:#edf1f5}.hero-art{height:630px}.hero-art:before{content:'';position:absolute;width:80%;height:75%;border:1px solid #d9e2ea;transform:skewY(-8deg);background:linear-gradient(135deg,#eef3f744,#fff9);z-index:-1}.hero-art svg{max-height:630px;filter:drop-shadow(16px 22px 15px #001b4210)}.art-label{color:#6b7c8e;border-color:#d79a1c;bottom:30px}.ribbon{background:#fff;border-bottom:1px solid #e4e8ed}.ribbon .wrap{font-size:10px;color:#1b3659;letter-spacing:.11em;padding:24px 0}.ribbon span:before{color:#d19725}#about{position:relative}.section-side-label{position:absolute;top:55%;left:12px;writing-mode:vertical-rl;color:#bec8d2;font-size:9px;letter-spacing:.2em}.about-grid{gap:90px}.copy{color:#607084;font-size:15px}h2{color:#00234b;font-weight:500}.services{background:#f5f7fa}.card{border-color:#d5dde7}.cards{border-color:#d5dde7}.card h3{font-weight:500;color:#00234b}.card p,.section-head p,.step p{color:#65758a}.icon,.num{color:#af7d21}.process{background:#fff}.steps{gap:55px}.step{border-top:2px solid #dbb76c;padding-top:18px}.contact{background:#00234b;position:relative;overflow:hidden}.contact:after{content:'';position:absolute;right:-60px;bottom:-70px;width:260px;height:380px;background:linear-gradient(110deg,#e1a124,#f5cf73,#bd7d0b);transform:rotate(38deg);opacity:.13;pointer-events:none}.contact h2{color:#fff}.contact .eyebrow{color:#e4bc62}.contact .btn{background:linear-gradient(105deg,#d29a28,#edc768);border:0;color:#00234b}.contact-grid{position:relative;z-index:1}.details{margin-top:0}.detail{padding:21px 0}.brand-band{background:#001f45 url(assets/letterhead-footer.png) right bottom/auto 100% no-repeat;border-top:3px solid #e4b03e;border-bottom:3px solid #e4b03e;min-height:135px;display:flex;align-items:center}.band-content{display:flex;flex-direction:column;align-items:start;gap:10px;color:white;font-size:13px}.band-content>span{letter-spacing:.08em;font-size:12px;font-weight:bold;max-width:40%}.band-content>a{font-size:13px;background:#001f45;padding:2px 7px}footer{background:#fff;color:#65758a;padding:24px 0}footer strong{color:#00234b!important}.float-wa{border-color:#d1dbe4}.contact .details{align-self:center}[dir=rtl] .hero-grid>div:first-child{padding:35px 0}[dir=rtl] .original-brand{direction:ltr}[dir=rtl] .header-contact{direction:ltr}[dir=rtl] .band-content>span{letter-spacing:0}
@media(min-width:1500px){.hero-grid,.hero-art{min-height:680px}.hero-art{height:680px}}
@media(max-width:950px){nav .nav-link{display:inline}.nav-cta{display:none}.hero-art{height:560px}.hero-grid{min-height:560px}.header-contact{font-size:12px}.brand-row{padding:20px 0}.hero h1{font-size:48px}.hero-art svg{min-height:0}.about-grid{gap:40px}}
@media(max-width:640px){.wrap{width:90%}.brand-row{padding:17px 0;gap:10px}.original-brand{width:88%;max-width:430px}.header-contact{display:none}.brand-rule{margin:0 5%;height:3px}.nav{min-height:55px}.nav-end{gap:0}nav{gap:16px;font-size:11px}.language{font-size:11px;padding:5px 8px}.hero-grid{display:block;padding-top:0;min-height:0}.hero-grid>div:first-child{padding:39px 0 15px}h1,.hero h1{font-size:44px;line-height:1.1}.eyebrow{font-size:8px;letter-spacing:.09em}.hero .intro{font-size:14px;max-width:100%}.hero-art{height:350px;max-width:360px;margin:auto}.hero-art svg{height:350px;max-height:350px}.hero-art:before{width:75%;height:75%}.art-label{bottom:13px;font-size:7px}.hero:before{background-size:210% auto;opacity:.45}.actions{margin-top:25px;gap:9px}.btn{font-size:12px;padding:13px 17px}.ribbon .wrap{font-size:8px;gap:12px;padding:18px 0}.section-side-label{display:none}h2{font-size:32px}.about-grid{gap:8px}.copy{font-size:14px}.brand-band{min-height:115px;background-position:65% bottom;background-size:auto 100%}.band-content>span{max-width:54%;font-size:9px}.band-content>a{font-size:11px}.foot{font-size:9px}.float-wa{font-size:11px;padding:9px 15px}[dir=rtl] .hero-grid>div:first-child{padding:28px 0 10px}[dir=rtl] h1{font-size:41px;line-height:1.3}}