@font-face{font-family:'Hacen Saudi Arabia';font-weight:400;font-style:normal;font-display:swap;src:local('Hacen Saudi Arabia Regular'),local('Hacen Saudi Arabia'),url(assets/fonts/HacenSaudiArabia-Regular.woff2) format('woff2'),url(assets/fonts/HacenSaudiArabia-Regular.woff) format('woff'),url(assets/fonts/HacenSaudiArabia-Regular.ttf) format('truetype'),url(assets/fonts/HacenSaudiArabia-Regular.otf) format('opentype')}
:root{--navy:#091731;--navy2:#102343;--gold:#9c7f43;--gold2:#c4a468;--gold3:#7a6232;--paper:#f4f1ea;--ink:#0f1d38;--mut:rgba(255,255,255,.74);--line:rgba(255,255,255,.14);--dl:#ddd6c8;--serif:'Hacen Saudi Arabia','Tajawal',Tahoma,Arial,sans-serif;--sans:'Tajawal',Tahoma,Arial,sans-serif}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--navy);color:#fff;font:400 17px/1.85 var(--sans);overflow-x:hidden;font-synthesis:none}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.35;margin:0}
.btn{display:inline-block;background:var(--gold);color:var(--navy);font:700 16px var(--sans);padding:13px 28px;border-radius:2px;border:1px solid var(--gold);cursor:pointer;transition:.25s}
.btn:hover{background:var(--gold2);border-color:var(--gold2)}
.btn.ghost{background:none;color:#fff;border-color:rgba(255,255,255,.55)}.btn.ghost:hover{background:#fff;color:var(--navy)}
/* header: full logo only here */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:10px 0;background:var(--navy);border-bottom:2px solid var(--gold);transition:box-shadow .3s}
.nav.s{box-shadow:0 8px 30px rgba(0,0,0,.35)}
.nav .wrap{display:flex;align-items:center;gap:32px}
.brand img{height:66px;width:auto}
.links{display:flex;gap:28px;margin-inline:auto;font-size:15px}
.links a{color:var(--mut);padding:4px 0;border-bottom:2px solid transparent;transition:.25s}
.links a:hover,.links a[aria-current]{color:#fff;border-color:var(--gold)}
.burger{display:none;background:none;border:1px solid var(--line);color:#fff;width:42px;height:42px;font-size:20px;cursor:pointer}
/* hero */
.hero{position:relative;display:block;min-height:0;padding:88px 0 0;background:var(--navy)}
.hero::before{content:"";display:block;width:100%;aspect-ratio:1902/915;background:url("assets/Layer3.png") center/100% 100% no-repeat}
.hero>.wrap{position:absolute;top:88px;bottom:0;left:0;right:0;display:flex;align-items:center}
.hero .wrap>*{animation:in 1s both}
@keyframes in{from{opacity:0;transform:translateY(30px)}}
.tag{display:inline-block;color:var(--gold2);font-size:15px;letter-spacing:.5px;margin-bottom:18px;padding-bottom:6px;border-bottom:1px solid var(--gold)}
.hero h1{font-size:clamp(24px,3.9vw,74px);line-height:1.3;max-width:760px}
.lead{color:var(--mut);font-size:clamp(13px,1.05vw,20px);max-width:560px;margin:clamp(10px,1.2vw,24px) 0 clamp(16px,2vw,38px)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
/* stats */
.stats{position:relative;z-index:2;margin-top:-48px;padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.3);border-top:4px solid var(--gold)}
.stat{padding:34px 24px;text-align:center;border-inline-start:1px solid var(--dl)}.stat:first-child{border:0}
.stat b{display:block;font:700 50px/1.2 var(--serif);color:var(--gold3)}.stat span{color:#41506b;font-size:15px}
/* sections */
section{padding:104px 0}
.light{background:var(--paper);color:var(--ink)}
.about{padding-top:150px;margin-top:-72px}
.head{max-width:620px;margin-bottom:52px}.head h2{font-size:clamp(32px,4vw,48px)}.head p{margin:12px 0 0;color:var(--mut)}
.head h2:after,.about h2:after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin-top:14px}
.about .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.about h2{font-size:clamp(32px,4vw,48px);margin-bottom:22px}.about p{color:#41506b;margin:0 0 16px}
.tabbox{background:var(--navy);color:#fff;padding:28px 32px;margin-top:26px;border-radius:2px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--mut);font:700 16px var(--sans);padding:10px 18px;cursor:pointer}
.tabs button[aria-selected=true]{color:#fff;border-color:var(--gold)}
.tabbox .pane{color:#fff;margin:0;font:400 20px/1.9 var(--sans)}.pane{display:none}.pane.on{display:block}
.pics{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:230px 230px;gap:14px}
.pics img{width:100%;height:100%;object-fit:cover;background:var(--navy2);border-radius:2px}
.pics img:first-child{grid-row:1/3}
/* services */
.svc{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);background:var(--navy2)}
.list{border-inline-end:1px solid var(--line);max-height:540px;overflow:auto}
.list button{display:block;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);color:var(--mut);font:500 17px var(--sans);padding:14px 26px;cursor:pointer;transition:.2s}
.list button:hover{color:#fff}
.list button[aria-current=true]{background:rgba(156,127,67,.16);color:#fff;box-shadow:inset -3px 0 var(--gold)}
.detail{padding:44px;min-height:420px;background:linear-gradient(rgba(16,35,67,.92),rgba(9,23,49,.95)),url(https://images.unsplash.com/photo-1505547828843-176834e42154?auto=format&fit=crop&w=1000&q=60) center/cover}
.detail h3{font-size:34px;color:var(--gold2);margin-bottom:12px}.detail p{color:var(--mut);margin:0 0 20px}
.detail ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.detail li{padding-inline-start:24px;position:relative}
.detail li:before{content:"";position:absolute;inset-inline-start:0;top:.95em;width:12px;height:2px;background:var(--gold)}
/* values */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.val{background:#fff;padding:32px 26px;border-top:3px solid var(--gold);box-shadow:0 10px 30px rgba(9,23,49,.08)}
.val h3{font-size:30px;color:var(--navy);margin-bottom:8px}.val p{margin:0;color:#41506b;font-size:16px}
/* band + footer */
.band{padding:110px 0;background:linear-gradient(90deg,rgba(9,23,49,.94),rgba(9,23,49,.72)),url(https://images.unsplash.com/photo-1436450412740-6b988f486c6b?auto=format&fit=crop&w=1800&q=60) center/cover,var(--navy2)}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.band h2{font-size:clamp(28px,3.6vw,44px)}.band p{color:var(--mut);margin:6px 0 0}
footer{background:#050c1b;padding:56px 0 26px;font-size:15px;color:var(--mut)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer p{margin:0;max-width:340px}
footer h4{font:700 21px var(--serif);color:#fff;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}footer a:hover{color:var(--gold2)}
.copy{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:14px}
.fab{position:fixed;bottom:22px;inset-inline-start:22px;width:54px;height:54px;border-radius:50%;background:var(--gold);display:grid;place-items:center;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.fab svg{width:24px;fill:var(--navy)}
/* contact page (kept) */
.phead{padding:170px 0 56px;background:linear-gradient(170deg,#0c1d3d,var(--navy))}
.phead h1{font-size:clamp(38px,5vw,60px)}.phead p{color:var(--mut);font-size:18px;max-width:560px;margin:12px 0 0}
.cgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;padding-block:72px}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);color:#fff;padding:18px 0;font:inherit;cursor:pointer}
div.row{cursor:default}
.row small{display:block;color:var(--gold2);font-size:14px;line-height:1.6}.row b{font-size:19px;font-weight:500}
.row em{font-style:normal;color:var(--mut);font-size:13px;white-space:nowrap}
.row:is(a,button):hover b{color:var(--gold2)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.map{min-height:460px;border:1px solid var(--line)}.map iframe{display:block;width:100%;height:100%;min-height:460px;border:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:6px}
.fwrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px}.fwrap h2{font-size:clamp(30px,3.6vw,42px)}.fwrap p{color:#41506b;margin:12px 0 0}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f{display:grid;gap:6px}.f.w{grid-column:1/-1}.f label{font-size:14px;font-weight:600}
.f input,.f select,.f textarea{width:100%;background:#fff;border:1px solid var(--dl);border-radius:0;padding:12px 14px;font:inherit;color:var(--ink)}
.f :focus-visible{outline:0;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.ok{grid-column:1/-1;border:1px solid var(--gold);padding:14px 18px;margin:0;color:var(--ink)}
#toast{position:fixed;bottom:26px;left:50%;translate:-50% 30px;background:var(--gold);color:var(--navy);padding:10px 24px;opacity:0;transition:.3s;z-index:90;pointer-events:none}
#toast.on{opacity:1;translate:-50% 0}
@media(max-width:900px){
.burger{display:block;margin-inline-start:auto}.nav>.wrap>.btn{display:none}
.brand img{height:54px}
.links{position:fixed;inset:0 0 auto;flex-direction:column;background:var(--navy);padding:96px 24px 28px;gap:16px;transform:translateY(-105%);transition:.35s;z-index:-1;font-size:18px;margin:0}.links.open{transform:none}
.about .wrap,.svc,.cgrid,.fwrap,.fgrid{grid-template-columns:1fr}
.hero{--ih:min(118vw,620px);padding:calc(76px + var(--ih)*.8) 0 100px;background:linear-gradient(180deg,rgba(9,23,49,0) 0,rgba(9,23,49,0) calc(76px + var(--ih)*.4),var(--navy) calc(76px + var(--ih)*.84)),url("assets/Layer3.png") 14% 76px/auto var(--ih) no-repeat,var(--navy)}.hero::before{display:none}.hero>.wrap{position:static;display:block}.hero h1{font-size:clamp(30px,8vw,44px)}.lead{font-size:17px}.stats{margin-top:-60px}.about{padding-top:130px}
.stats .wrap,.vals{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-inline-start:0}.stat{padding:24px 12px}.stat b{font-size:38px}
section{padding:72px 0}.list{max-height:260px;border:0;border-bottom:1px solid var(--line)}.detail{padding:30px 24px;min-height:0}
.pics{grid-template-rows:170px 170px}
form{grid-template-columns:1fr}.map,.map iframe{min-height:340px}
}
@media(max-width:520px){.vals{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}html{scroll-behavior:auto}}