@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#092943;--blue:#245ee9;--muted:#647485;--light:#f0f4f8;--line:#dce3eb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--navy);background:#fff;font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid #58aaff;outline-offset:5px}.progress{position:fixed;top:0;left:0;height:3px;background:var(--blue);z-index:20;width:0}header{height:100px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:#ffffffed;backdrop-filter:blur(15px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:800;letter-spacing:1px;line-height:1.3}.brand small{display:block;font-size:10px;letter-spacing:2.3px;font-weight:500;margin-top:5px}.monogram{font-family:Arial;font-size:46px;letter-spacing:-6px;line-height:1}.monogram span{color:var(--blue);margin-right:4px}nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:600}nav a:hover{color:var(--blue)}.nav-cta{background:var(--navy);color:white;padding:12px 24px;border-radius:4px}.menu{display:none}.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:690px;padding:55px 6% 0;gap:6%;overflow:hidden;background:linear-gradient(115deg,#fff 40%,#eff5fd)}.hero-copy{padding:40px 0 50px;align-self:center}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--blue);display:block;margin-bottom:24px}h1,h2,h3{font-family:Manrope,Arial,sans-serif;line-height:1.15;letter-spacing:-1.5px;margin:0}h1{font-size:clamp(42px,4.7vw,76px);font-weight:800}em{font-style:normal;color:var(--blue)}.hero-copy>p{font-size:18px;max-width:500px;color:var(--muted);margin:27px 0 32px}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;border-radius:4px;padding:15px 23px;font-size:14px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.primary{background:var(--blue);color:#fff}.primary:hover{background:#164bd0}.outline{border-color:#b7c5d4;background:transparent}.hero-bottom{display:flex;align-items:center;gap:25px;font-size:13px;line-height:1.5;margin-top:48px}.hero-bottom strong{font-size:38px;margin-right:12px;font-weight:600;vertical-align:middle}.vertical{height:38px;border-left:1px solid #bfccda}.hero-visual{position:relative;align-self:end;padding:0 0 55px;animation:enter 1.2s both}.visual-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;padding:0 0 15px}.portrait{height:490px;overflow:hidden;background:#fff;border-radius:180px 180px 5px 5px;border:1px solid #dce5ee}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 16%;mix-blend-mode:multiply}.nameplate{position:absolute;bottom:32px;left:-30px;right:25px;background:var(--navy);color:#fff;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 20px 40px #09294320;border-left:5px solid var(--blue)}.nameplate small{font-size:10px;letter-spacing:2px;color:#aec4d8}.nameplate h2{font-size:30px;margin-top:8px;letter-spacing:-.5px}.personal{font-size:13px;line-height:1.5;color:#d8e4ed}.side-label{position:absolute;right:-35px;top:170px;writing-mode:vertical-rl;font-size:10px;letter-spacing:2px}.sector-strip{overflow:hidden;background:var(--navy);color:#fff;padding:21px 0}.sector-strip>div{display:flex;gap:40px;white-space:nowrap;width:max-content;font-size:13px;letter-spacing:2px;animation:marquee 45s linear infinite}.sector-strip b{color:#6d98ff}.section{padding:100px 6%}.about{display:grid;grid-template-columns:1fr 1fr;gap:10%}h2{font-size:clamp(32px,3.2vw,49px);font-weight:700;line-height:1.2}.about-text p{color:var(--muted);margin:0 0 20px}.about-text .large{font-size:23px;color:var(--navy);line-height:1.5}.text-link{display:inline-block;font-weight:700;border-bottom:1px solid var(--blue);padding-bottom:4px}.services{background:var(--light)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}.section-head>p{max-width:310px;color:var(--muted);margin:0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.service-card{background:white;border:1px solid #e0e7ef;transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column}.service-card:hover{transform:translateY(-7px);box-shadow:0 18px 35px #09294312}.service-img{position:relative;overflow:hidden;aspect-ratio:1.65;background:#d8e3ed}.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.service-card:hover img{transform:scale(1.065)}.service-img span{position:absolute;top:16px;left:16px;background:white;padding:5px 12px;font-size:12px;font-weight:700}.service-content{padding:26px;display:flex;flex-direction:column;flex:1}.service-content h3{font-size:21px;line-height:1.4;letter-spacing:-.5px}.service-content p{font-size:15px;color:var(--muted);margin:14px 0 23px}.service-content a{margin-top:auto;font-size:13px;font-weight:700;color:var(--blue);border-top:1px solid var(--line);padding-top:16px}.service-card:last-child{grid-column:auto}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.steps article{border-top:1px solid #b8c6d6;padding-top:28px}.steps span{font-size:40px;color:var(--blue);font-weight:500}.steps h3{font-size:21px;letter-spacing:-.5px;margin:22px 0 14px}.steps p{color:var(--muted);max-width:320px}.contact{background:var(--navy);color:white;display:grid;grid-template-columns:1fr 1fr;gap:12%}.contact .eyebrow{color:#8cb0ff}.contact h2{font-size:clamp(38px,4.5vw,66px)}.contact em{color:#91b3ff}.contact p{color:#b7c8d7;margin:24px 0}.contact-links{display:flex;flex-direction:column;gap:9px;font-size:20px}.contact form{background:#ffffff09;border:1px solid #ffffff20;padding:32px;border-radius:7px}.contact h3{font-size:25px;letter-spacing:-.5px}.contact form p{font-size:14px;margin:10px 0 22px}.contact label{display:block;font-size:13px;margin:15px 0 7px;color:#d6e1ec}input,select,textarea{width:100%;background:#fff;color:var(--navy);border:1px solid #a5b7ca;border-radius:3px;padding:12px 14px;font-size:15px}textarea{resize:vertical}.contact button{width:100%;margin-top:20px}footer{padding:40px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer p,footer>span{font-size:12px;color:var(--muted)}.floating-wa{position:fixed;bottom:24px;right:24px;z-index:15;display:flex;align-items:center;gap:9px;background:#158348;color:white;padding:13px 20px;border-radius:40px;box-shadow:0 6px 24px #0002;font-size:14px;font-weight:600}.floating-wa svg{width:24px;height:24px}.reveal{opacity:1;transform:none}.motion .reveal{opacity:0;transform:translateY(25px);transition:opacity .75s,transform .75s}.motion .reveal.visible{opacity:1;transform:none}.hero-copy{animation:enter .9s both}@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes marquee{to{transform:translateX(-50%)}}@media(min-width:1400px){header,.section,footer{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}}@media(max-width:1000px){.hero{gap:4%;min-height:600px}.portrait{height:440px}.personal{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.hero-bottom{gap:15px}.contact{gap:6%}nav{gap:20px}.section{padding-top:75px;padding-bottom:75px}}@media(max-width:700px){header{height:78px;padding:0 6%}.brand{font-size:15px}.monogram{font-size:38px}nav{display:none;position:absolute;top:78px;left:0;right:0;background:white;padding:25px 6%;box-shadow:0 10px 20px #0001;flex-direction:column;align-items:stretch}nav.open{display:flex}.menu{display:block;border:0;background:transparent;font-size:25px;color:var(--navy)}.hero{grid-template-columns:1fr;padding-top:15px;gap:5px}.hero-copy{padding:30px 0}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:18px}h1{font-size:44px;line-height:1.15}.hero-copy>p{font-size:16px}.hero-bottom{margin-top:30px}.hero-visual{width:85%;margin:15px auto 0}.portrait{height:380px}.nameplate{left:-15px;right:10px;padding:18px 24px}.nameplate h2{font-size:26px}.personal{display:block;font-size:11px}.visual-top{font-size:8px}.side-label{right:-25px}.about,.contact{grid-template-columns:1fr;gap:35px}.section{padding:60px 6%}h2{font-size:34px}.section-head{display:block}.section-head>p{margin-top:22px;max-width:none}.service-grid{grid-template-columns:1fr;gap:25px}.service-img{aspect-ratio:1.8}.steps{grid-template-columns:1fr;gap:25px}.steps article{display:grid;grid-template-columns:55px 1fr;column-gap:20px;padding-top:20px}.steps h3{margin:10px 0}.steps p{grid-column:2;margin-top:0}.contact form{padding:25px}.contact-links{font-size:18px}footer{flex-wrap:wrap;padding-bottom:95px}footer p{margin:0}.floating-wa{padding:12px 16px;bottom:16px;right:16px}.sector-strip>div{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion .reveal{opacity:1;transform:none}}
/* Cinematic service photography */
.service-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:-12px 0 25px}.service-toolbar>span{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--muted)}#motion-toggle{border:1px solid #b9c9db;background:transparent;color:var(--navy);padding:8px 14px;border-radius:30px;font-size:13px;cursor:pointer}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}.service-card{border-radius:9px;overflow:hidden;isolation:isolate}.service-img{aspect-ratio:1.65;background:var(--navy)}.service-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#061e3826,transparent 45%,#061e3855);pointer-events:none}.service-img img{transform:scale(1.06);animation:service-drift 16s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:50% 45%}.service-card.in-view .service-img img{animation-play-state:running}.service-card:nth-child(even) .service-img img{animation-direction:alternate-reverse;transform-origin:65% 45%;animation-duration:19s}.service-card:nth-child(3n) .service-img img{animation-duration:22s;transform-origin:35% 60%}.service-img span{z-index:1;border-radius:50%;padding:0;width:38px;height:38px;display:grid;place-items:center;top:20px;left:20px;backdrop-filter:blur(8px);background:#ffffffdf}.service-content{padding:28px 30px 25px}.service-content h3{font-size:25px;max-width:440px}.service-content p{font-size:16px}.service-content a{transition:color .25s,padding-left .25s}.service-card:hover .service-content a{padding-left:8px}.service-card:hover{box-shadow:0 24px 45px #09294320}.service-card:focus-within{box-shadow:0 0 0 3px #245ee966}.images-paused .service-img img{animation-play-state:paused!important}@keyframes service-drift{0%{transform:scale(1.04) translate3d(-.6%,0,0)}100%{transform:scale(1.16) translate3d(.6%,-1%,0)}}@media(max-width:700px){.service-grid{grid-template-columns:1fr;gap:28px}.service-content{padding:23px}.service-content h3{font-size:23px}.service-toolbar>span{font-size:10px;letter-spacing:1px}#motion-toggle{font-size:12px;padding:8px 12px}.service-img{aspect-ratio:1.5}}@media(prefers-reduced-motion:reduce){.service-img img{animation:none!important;transform:none}#motion-toggle{display:none}}
/* Saudi skyline and expanded photographic service galleries */
.hero{position:relative;isolation:isolate;background:#f5f9ff}.saudi-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.30;filter:saturate(.65)}.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fffefaeb 0%,#f9fcffd1 36%,#f4f8ff45 74%),linear-gradient(0deg,#f1f6ffb3,transparent 55%)}.hero-visual .portrait{background:#ffffffdc}.hero-copy>p{color:#40576c}.expand-photo{position:absolute;right:16px;bottom:16px;z-index:2;border:1px solid #ffffffaa;background:#ffffffed;color:var(--navy);border-radius:30px;padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer}.photo-strip{display:flex;gap:10px;padding:16px 20px 0}.photo-thumb{width:90px;height:61px;border:2px solid transparent;background:#eff4fa;border-radius:4px;overflow:hidden;padding:0;cursor:pointer;opacity:.65;transition:opacity .2s,border-color .2s}.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}.photo-thumb.selected{border-color:var(--blue);opacity:1}.photo-thumb:hover{opacity:1}.photo-caption{display:flex;justify-content:space-between;gap:15px;padding:10px 22px 0;color:var(--muted);font-size:12px}.photo-caption small{font-size:12px;white-space:nowrap}.service-content{padding-top:20px}.service-card:hover .photo-thumb img{transform:none}.service-card:hover .service-img img{transform:scale(1.06)}#photo-viewer{padding:52px 18px 15px;border:0;border-radius:8px;max-width:min(1000px,94vw);background:#fff;color:var(--navy);max-height:94dvh}#photo-viewer::backdrop{background:#03182be8;backdrop-filter:blur(6px)}#photo-viewer>img{display:block;width:auto;max-width:100%;height:auto;max-height:72dvh;margin:auto;object-fit:contain}#photo-viewer p{font-size:14px;text-align:center;margin:16px 6px 0}.viewer-close{position:absolute;right:18px;top:12px;background:#edf2f7;border:0;border-radius:4px;padding:6px 13px;font-size:13px;cursor:pointer}@media(max-width:700px){.saudi-backdrop{object-position:60% center;opacity:.25}.hero::after{background:linear-gradient(180deg,#fffefaea 0%,#f8fbffb3 50%,#f4f8ff66)}.photo-strip{padding-left:20px}.photo-thumb{height:55px;width:82px}.photo-caption{font-size:11px}.photo-caption small{font-size:11px}}
/* Skyline-led home banner and gentle gallery crossfades */
.hero{min-height:680px;display:block;padding-top:70px;padding-bottom:65px}.saudi-backdrop{opacity:1;filter:none;object-position:center 48%}.hero::after{background:linear-gradient(90deg,#f9fcfffa 0%,#f9fcfff0 28%,#f9fcffa8 47%,#f9fcff08 72%),linear-gradient(0deg,#e9f2fcaa,transparent 40%)}.hero-copy{max-width:720px;width:62%;padding:20px 0;position:relative;z-index:2}.hero h1{font-size:clamp(40px,4.5vw,67px);line-height:1.16;letter-spacing:-2px}.rotating-line{display:block;min-height:1.2em;overflow:hidden}.rotating-line em{display:block;transition:opacity .3s ease,transform .3s ease}.word-exit{opacity:0;transform:translateY(20px)}.hero-copy>p{max-width:470px;color:#314d65}.banner-motion{border:0;background:transparent;color:#476077;font-size:12px;padding:0;margin-top:20px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.hero-bottom{margin-top:26px}.hero-visual{position:absolute;right:6%;bottom:40px;width:300px;height:210px;display:flex;background:#fff;padding:0;border-radius:9px;box-shadow:0 18px 50px #061e3833;overflow:hidden;z-index:2}.hero-visual .visual-top,.hero-visual .side-label{display:none}.hero-visual .portrait{height:210px;width:135px;flex-shrink:0;border:0;border-radius:0;background:white}.hero-visual .portrait img{object-fit:cover;object-position:center 15%;mix-blend-mode:normal}.hero-visual .nameplate{position:static;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px 15px;border:0;box-shadow:none;background:var(--navy);flex:1}.nameplate h2{font-size:24px}.nameplate small{font-size:9px}.nameplate .personal{display:block;margin-top:18px;font-size:11px}.skyline-label{position:absolute;right:6%;top:35px;font-size:11px;letter-spacing:1.5px;font-weight:700;background:#ffffffde;padding:10px 16px;border-radius:3px;color:var(--navy)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.service-img img,.service-card.in-view .service-img img,.service-card:hover .service-img img{animation:none!important;transform:none;transition:opacity .7s ease!important}.service-img>.main-service-photo,.service-img>.alternate-service-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.alternate-service-photo{opacity:0}.service-img img.photo-visible{opacity:1}.service-img img.photo-hidden{opacity:0}.service-img img:not([src]){visibility:hidden}.photo-strip{overflow-x:auto;scrollbar-width:thin}.photo-thumb{flex-shrink:0}.progress{width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}header{backdrop-filter:none;background:#fffffff7}.service-card{scroll-margin-top:110px}.service-img{contain:layout paint}#banner-motion:focus-visible{outline:2px solid var(--blue);outline-offset:5px}@media(max-width:1000px){.hero{min-height:650px}.hero-copy{width:65%}.hero-visual{width:250px;right:4%}.hero-visual .portrait{width:105px}.hero h1{font-size:46px}.skyline-label{right:4%}}@media(max-width:700px){.hero{padding-top:36px;padding-bottom:28px;min-height:0;display:flex;flex-direction:column;gap:0}.hero-copy{width:100%;max-width:none;padding:20px 0}.hero h1{font-size:clamp(33px,8.5vw,44px);letter-spacing:-1.3px}.hero-copy>p{font-size:16px}.hero::after{background:linear-gradient(180deg,#f9fcfff5 0%,#f9fcffe8 28%,#f9fcff72 55%,#f9fcff0a 75%)}.saudi-backdrop{opacity:1;object-position:57% bottom}.hero-visual{position:relative;right:auto;bottom:auto;margin:100px 0 0 auto;width:255px;height:165px}.hero-visual .portrait{height:165px;width:105px}.hero-visual .nameplate{padding:16px}.nameplate h2{font-size:23px}.nameplate .personal{font-size:10px;margin-top:10px}.skyline-label{top:auto;bottom:211px;right:6%;font-size:9px;padding:6px 9px}.hero-bottom{font-size:12px;gap:15px}.hero-bottom strong{font-size:32px}.banner-motion{margin-top:16px}}@media(prefers-reduced-motion:reduce){.rotating-line em,.service-img img{transition:none!important}#banner-motion{display:none}}
@media(min-width:701px) and (max-width:1000px){.hero{min-height:720px}.hero-copy{width:67%}.hero h1{font-size:40px}.hero-visual{width:235px;height:175px;bottom:25px}.hero-visual .portrait{height:175px;width:95px}.hero-visual .nameplate{padding:15px}.nameplate h2{font-size:21px}}
/* Five-photo controls with lightweight thumbnails */
.photo-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:16px 20px 0;overflow:hidden}.photo-thumb{width:100%;height:auto;aspect-ratio:1.4;min-width:0}.photo-thumb img{width:100%;height:100%;object-fit:cover}.service-img{touch-action:pan-y}@media(max-width:700px){.photo-strip{padding:14px 16px 0;gap:6px}.photo-thumb{height:auto;min-height:40px;aspect-ratio:1.2}}
