:root{
--navy:#0A2C49;--navy2:#071F33;--navy3:#103B5E;--gold:#FFC62D;--gold2:#E8AE0E;
--bg:#F5F8FB;--card:#fff;--ink:#0A2C49;--muted:#4C6A84;--line:#DCE4EC;--soft:#EAF0F6;
--ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;--lat:'Roboto',Arial,sans-serif;
--r:16px;--sh:0 10px 30px rgba(10,44,73,.08);--sh2:0 18px 48px rgba(10,44,73,.16);--w:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ar);font-size:16.5px;line-height:1.8;-webkit-text-size-adjust:100%}
bdi{font-family:var(--lat)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:24px}
.sec{padding-block:72px}
.sec.alt{background:#fff}
.sec.navy{background:var(--navy);color:#fff}
.eyebrow{display:inline-block;font-size:13.5px;font-weight:700;color:var(--gold2);letter-spacing:.02em;margin-bottom:10px}
.navy .eyebrow{color:var(--gold)}
h2.t{font-size:clamp(26px,3.2vw,38px);line-height:1.4;font-weight:700}
h2.t::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--gold);margin-top:14px}
.center{text-align:center}.center h2.t::after{margin-inline:auto}
.lead{color:var(--muted);font-size:18px;margin-top:16px;max-width:760px}
.center .lead{margin-inline:auto}
.navy .lead{color:#C9D7E4}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 28px;border-radius:999px;border:2px solid transparent;font-weight:700;font-size:16px;line-height:1.3;cursor:pointer;transition:.2s;text-align:center}
.btn.gold{background:var(--gold);color:var(--navy)}.btn.gold:hover{background:var(--gold2);transform:translateY(-2px)}
.btn.navy{background:var(--navy);color:#fff}.btn.navy:hover{background:var(--navy3);transform:translateY(-2px)}
.btn.ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}.btn.ghost:hover{background:#fff;color:var(--navy)}
.btn.line{border-color:var(--navy);color:var(--navy);background:transparent}.btn.line:hover{background:var(--navy);color:#fff}
.btn.sm{min-height:42px;padding:6px 20px;font-size:15px}
.btn.full{width:100%}
/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.hd .logo img{height:40px;width:auto}
.nav{display:flex;gap:4px;margin-inline:auto}
.nav a{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15.5px;color:var(--muted);transition:.15s}
.nav a:hover{background:var(--soft);color:var(--navy)}
.nav a.on{background:var(--navy);color:#fff}
.burger{display:none;margin-inline-start:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--navy);position:relative;margin:auto;content:"";transition:.2s}
.burger span::before{position:absolute;top:-6px;left:0}.burger span::after{position:absolute;top:6px;left:0}
@media(max-width:1020px){
 .burger{display:block}
 .hd .cta-h{display:none}
 .nav{position:fixed;inset:76px 0 auto 0;background:#fff;flex-direction:column;padding:12px 20px 24px;border-bottom:1px solid var(--line);box-shadow:var(--sh2);transform:translateY(-130%);transition:.25s;margin:0;max-height:calc(100vh - 76px);overflow:auto}
 .nav.open{transform:none}
 .nav a{padding:14px 16px;font-size:17px}
 .nav .m-cta{display:flex;margin-top:10px}
}
@media(min-width:1021px){.nav .m-cta{display:none}}
/* hero */
.hero{position:relative;color:#fff;background:var(--navy);isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(7,31,51,.94) 0%,rgba(10,44,73,.86) 45%,rgba(10,44,73,.45) 100%)}
.hero .wrap{padding-block:clamp(72px,11vw,150px)}
.hero .tag{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;font-size:14px;padding:4px 16px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:clamp(32px,5vw,58px);line-height:1.35;font-weight:700;max-width:820px}
.hero .en{font-family:var(--lat);direction:ltr;text-align:left;color:var(--gold);font-size:clamp(16px,1.6vw,20px);margin-top:16px;max-width:760px}
.hero p.d{margin-top:20px;font-size:clamp(16px,1.5vw,19px);color:#D6E2EC;max-width:700px}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-strip{background:var(--navy2);color:#fff}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-strip div{padding:22px 20px;border-inline-start:1px solid rgba(255,255,255,.1);font-weight:600;font-size:15.5px;display:flex;gap:12px;align-items:center}
.hero-strip div:first-child{border-inline-start:0}
.hero-strip i{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
@media(max-width:800px){.hero-strip .wrap{grid-template-columns:1fr 1fr}.hero-strip div:nth-child(3){border-inline-start:0}}
/* page head */
.ph{background:var(--navy) url(/assets/towers.jpg) center/cover;position:relative;color:#fff;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(7,31,51,.95),rgba(10,44,73,.82));z-index:-1}
.ph .wrap{padding-block:clamp(48px,7vw,88px)}
.crumb{font-size:14px;color:#B9CADA;margin-bottom:12px}
.crumb a:hover{color:var(--gold)}
.ph h1{font-size:clamp(28px,4vw,46px);line-height:1.4;font-weight:700;max-width:900px}
.ph p.sub{margin-top:14px;font-size:18px;color:#D0DDE9;max-width:720px}
/* cards */
.grid{display:grid;gap:22px;margin-top:40px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:.25s;position:relative}
a.card:hover{box-shadow:var(--sh2);border-color:var(--gold)}
.card h3{font-size:19px;line-height:1.55;font-weight:700}
.card p{color:var(--muted);font-size:15.5px;margin-top:8px}
.ico{width:56px;height:56px;border-radius:14px;background:var(--navy);color:var(--gold);display:grid;place-items:center;margin-bottom:18px}
.ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .num{position:absolute;top:22px;inset-inline-end:24px;font-family:var(--lat);font-weight:700;font-size:14px;color:#9DB3C6}
.more{display:inline-flex;gap:6px;margin-top:14px;font-weight:700;color:var(--navy);font-size:15px;border-bottom:2px solid var(--gold)}
.why{display:flex;gap:18px;align-items:flex-start}
.nb{flex:none;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-family:var(--lat);font-weight:700;font-size:17px}
/* sectors tiles */
.tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;display:flex;align-items:flex-end;color:#fff;background:var(--navy) url(/assets/riyadh.jpg) center/cover;isolation:isolate;transition:.25s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,31,51,.95) 10%,rgba(7,31,51,.15) 75%)}
.tile:hover{box-shadow:var(--sh2)}
.tile .in{padding:24px}
.tile b{display:block;font-size:19px;line-height:1.5}
.tile span{display:block;color:#C9D7E4;font-size:14.5px;margin-top:4px}
.tile.t1{background-image:url(/assets/towers.jpg);background-position:30% 60%}
.tile.t2{background-image:url(/assets/riyadh.jpg);background-position:68% 40%}
.tile.t3{background-image:url(/assets/towers.jpg);background-position:80% 10%}
.tile.t4{background-image:url(/assets/riyadh.jpg);background-position:25% 55%}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;margin-top:40px}
.steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px}
.steps li h3{font-size:18px;margin-top:16px;line-height:1.55}
.steps li p{color:#C9D7E4;font-size:15px;margin-top:6px}
@media(max-width:1020px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:620px){.steps{grid-template-columns:1fr}}
/* cta band */
.cta{position:relative;color:#fff;isolation:isolate;background:var(--navy) url(/assets/towers.jpg) center 40%/cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(7,31,51,.96),rgba(10,44,73,.8))}
.cta .wrap{padding-block:clamp(56px,8vw,100px)}
.cta h2{font-size:clamp(26px,3.4vw,40px);line-height:1.45;max-width:820px}
.cta p{margin-top:18px;color:#D0DDE9;font-size:18px;max-width:780px}
.cta .btn{margin-top:30px}
/* trust */
.trust{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:28px}
.ph-box{border:2px dashed #BFCEDB;border-radius:12px;min-height:80px;display:grid;place-items:center;color:#8AA0B3;font-size:14px;text-align:center;padding:8px;background:#fff}
@media(max-width:900px){.trust{grid-template-columns:repeat(3,1fr)}}
.note{color:#8AA0B3;font-size:14px;margin-top:8px}
/* services list page */
.slist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
@media(max-width:1020px){.slist{grid-template-columns:1fr 1fr}}@media(max-width:680px){.slist{grid-template-columns:1fr}}
.slist .card small{display:block;font-family:var(--lat);direction:ltr;text-align:right;color:var(--muted);margin-top:6px;font-size:13.5px}
/* service page */
.svc{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
@media(max-width:1020px){.svc{grid-template-columns:1fr;gap:36px}}
.intro{font-size:18px;line-height:1.95;color:#1D4262;margin-top:18px}
.specs{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specs div{padding:18px 22px;border-bottom:1px solid var(--line)}
.specs div:nth-child(odd){border-inline-end:1px solid var(--line)}
.specs div:nth-last-child(-n+2){border-bottom:0}
.specs dt{font-size:13.5px;font-weight:700;color:var(--gold2)}
.specs dd{margin-top:2px;font-size:16px}
@media(max-width:620px){.specs{grid-template-columns:1fr}.specs div:nth-child(odd){border-inline-end:0}.specs div:nth-last-child(2){border-bottom:1px solid var(--line)}}
.tl{margin-top:30px}
.tl li{position:relative;display:flex;gap:20px;padding-bottom:28px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;top:48px;bottom:0;inset-inline-start:21px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl h3{font-size:19px;line-height:1.55}
.tl p{color:var(--muted);margin-top:6px;font-size:16px}
.side{position:sticky;top:100px}
@media(max-width:1020px){.side{position:static}}
.panel{background:var(--navy);color:#fff;border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh2);border-top:5px solid var(--gold)}
.panel h3{font-size:21px;line-height:1.5}
.pill{background:rgba(255,198,45,.12);border:1px solid rgba(255,198,45,.6);border-radius:12px;padding:10px 16px;font-size:15px;line-height:1.55}
.pill i{display:block;font-style:normal;font-size:12.5px;color:#B9CADA}
.rel{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.rel h4{font-size:15px;color:var(--gold2);margin-bottom:6px}
.rel a{display:block;padding:8px 0;font-size:15px;border-bottom:1px solid var(--soft);color:var(--navy)}
.rel a:last-child{border:0}.rel a:hover{color:var(--gold2)}
/* two col */
.two{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:start}
@media(max-width:1020px){.two{grid-template-columns:1fr;gap:36px}}
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--sh)}
.form.dark{background:var(--navy);color:#fff;border:0;border-top:5px solid var(--gold)}
.form h3{font-size:22px;margin-bottom:16px}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600}
input,select,textarea{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--line);background:#F7FAFC;padding:10px 16px;font-size:16px}
textarea{min-height:110px;resize:vertical}
.dark input,.dark select,.dark textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.dark input::placeholder{color:#9DB3C6}
.dark label{color:#D0DDE9}
.done{background:var(--gold);color:var(--navy);border-radius:12px;padding:14px 16px;font-weight:600;font-size:15px}
/* about / misc */
.pic{height:clamp(240px,34vw,420px);border-radius:20px;background:var(--navy) url(/assets/riyadh.jpg) center 50%/cover;box-shadow:var(--sh2)}
.fil{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.fil button{border:1px solid var(--muted);background:#fff;color:var(--muted);border-radius:999px;padding:6px 20px;font-weight:600;cursor:pointer}
.fil button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.ph-img{height:170px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:#8AA0B3;margin-bottom:16px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px}
details+details{margin-top:12px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:18px 0;font-weight:700;font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--lat);font-size:26px;line-height:1;color:var(--gold2)}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:18px;color:var(--muted)}
/* footer */
.ft{background:var(--navy2);color:#B9CADA;padding-block:64px 28px}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.6fr;gap:40px}
@media(max-width:1020px){.ft .cols{grid-template-columns:1fr 1fr}}@media(max-width:620px){.ft .cols{grid-template-columns:1fr}}
.ft img{height:44px;width:auto;margin-bottom:16px}
.ft h4{color:var(--gold);font-size:16px;margin-bottom:12px}
.ft a{display:block;padding:4px 0;font-size:15px}.ft a:hover{color:#fff}
.ft .fine{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;font-size:13.5px;opacity:.8}
/* modal */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(0,20,35,.65);display:flex;align-items:center;justify-content:center;padding:16px}
.scrim[hidden]{display:none}
.sheet{width:100%;max-width:500px;max-height:92vh;overflow:auto;background:#fff;border-radius:20px;border-top:6px solid var(--gold);padding:28px}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sheet h2{font-size:23px}
.x{border:0;background:var(--soft);width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer}
.toast{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:28px;background:var(--navy2);color:#fff;padding:12px 20px;border-radius:12px;border:1px solid var(--gold);max-width:calc(100% - 32px);font-size:15px}
.toast[hidden]{display:none}
.wa{position:fixed;z-index:40;bottom:22px;inset-inline-start:22px}
.dock{position:fixed;z-index:40;bottom:0;left:0;right:0;padding:10px 16px;background:linear-gradient(0deg,var(--bg) 60%,transparent);display:none}
@media(max-width:1020px){.dock{display:block}.ft{padding-bottom:96px}}
.js .reveal{opacity:0}
.js .reveal.in{opacity:1;transition:opacity .6s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}


/* ===== v2 professional structure ===== */
.topbar{background:var(--navy2);color:#C9D7E4;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;min-height:38px;align-items:center}
.topbar .en{font-family:var(--lat);direction:ltr}
.topbar b{color:var(--gold);font-weight:600}
@media(max-width:620px){.topbar .en{display:none}}
.nav .dd{position:relative}
.nav .dd>a::after{content:"";display:inline-block;margin-inline-start:7px;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px)}
.mega{position:absolute;top:100%;inset-inline-start:50%;transform:translate(50%,8px);opacity:0;visibility:hidden;transition:.2s;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);padding:18px;width:760px;display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:60}
[dir=rtl] .mega{inset-inline-start:auto;right:50%;left:auto;transform:translate(50%,8px)}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(50%,0)}
.mega a{display:flex!important;gap:12px;align-items:center;padding:10px 12px!important;border-radius:12px!important;font-size:14.5px!important;line-height:1.5;color:var(--navy)!important;background:none!important}
.mega a:hover{background:var(--soft)!important}
.mega .ico{width:38px;height:38px;border-radius:10px;margin:0;flex:none}.mega .ico svg{width:20px;height:20px}
.mega .all{grid-column:1/-1;justify-content:center;font-weight:700!important;border-top:1px solid var(--line);border-radius:0!important;margin-top:6px}
@media(max-width:1020px){.mega{display:none}.nav .dd>a::after{display:none}}
/* hero with form */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center}
@media(max-width:1100px){.hero .wrap{grid-template-columns:1fr}.hero .qcard{display:none}}
.qcard{background:#fff;color:var(--navy);border-radius:22px;padding:28px;box-shadow:var(--sh2);border-top:6px solid var(--gold)}
.qcard h3{font-size:21px;margin-bottom:4px}.qcard p{color:var(--muted);font-size:14.5px;margin-bottom:16px;line-height:1.6}
.qcard form{gap:12px}.qcard input,.qcard select{min-height:46px}
/* intro split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:1020px){.split{grid-template-columns:1fr;gap:36px}}
.frame{position:relative}
.frame .img{height:clamp(300px,36vw,460px);border-radius:24px;background:var(--navy) url(/assets/towers.jpg) 40% 50%/cover;box-shadow:var(--sh2)}
.frame::after{content:"";position:absolute;inset:auto auto -18px -18px;width:46%;height:46%;border:3px solid var(--gold);border-radius:24px;z-index:-1}
[dir=rtl] .frame::after{inset:auto -18px -18px auto}
.frame .badge{position:absolute;bottom:22px;inset-inline-start:-14px;background:var(--navy);color:#fff;border-radius:14px;padding:14px 20px;box-shadow:var(--sh2);border-inline-start:5px solid var(--gold);font-weight:700;line-height:1.5;max-width:230px}
.frame .badge span{display:block;color:var(--gold);font-weight:500;font-size:13px}
.checks{margin-top:24px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.checks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:3px;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2C49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* why dark cols */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden}
.cols4>div{padding:30px 26px;border-inline-start:1px solid rgba(255,255,255,.14)}
.cols4>div:first-child{border-inline-start:0}
.cols4 h3{font-size:18.5px;margin-top:16px;line-height:1.55}.cols4 p{color:#C0D0DE;font-size:15px;margin-top:8px}
@media(max-width:1020px){.cols4{grid-template-columns:1fr 1fr}.cols4>div:nth-child(3){border-inline-start:0}.cols4>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}}
@media(max-width:620px){.cols4{grid-template-columns:1fr}.cols4>div{border-inline-start:0!important;border-top:1px solid rgba(255,255,255,.14)}.cols4>div:first-child{border-top:0}}
/* services 3x3 card */
.sc{display:flex;flex-direction:column}
.sc p{flex:1}
.sc small{font-family:var(--lat);direction:ltr;text-align:right;color:var(--muted);font-size:13px;margin-top:4px;display:block}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* process connected */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative}
.proc li{position:relative;padding:0 18px;text-align:center}
.proc li::before{content:"";position:absolute;top:27px;inset-inline-start:-50%;width:100%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,198,45,.7) 0 8px,transparent 8px 16px)}
.proc li:first-child::before{display:none}
.proc .nb{width:56px;height:56px;margin:0 auto 18px;font-size:20px;position:relative;z-index:1;box-shadow:0 0 0 8px var(--navy)}
.proc h3{font-size:18px;line-height:1.55}.proc p{color:#C0D0DE;font-size:15px;margin-top:6px}
@media(max-width:900px){.proc{grid-template-columns:1fr 1fr;gap:34px 0}.proc li:nth-child(3)::before{display:none}}
@media(max-width:560px){.proc{grid-template-columns:1fr}.proc li::before{display:none}}
/* service page */
.facts{margin-top:-46px;position:relative;z-index:5}
.facts .wrap>div{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:20px;box-shadow:var(--sh2);border:1px solid var(--line);overflow:hidden}
.facts dl{padding:22px 24px;border-inline-start:1px solid var(--line)}
.facts dl:first-child{border-inline-start:0}
.facts dt{font-size:13px;font-weight:700;color:var(--gold2)}
.facts dd{margin-top:4px;font-size:15px;line-height:1.6;font-weight:600}
@media(max-width:1020px){.facts .wrap>div{grid-template-columns:1fr 1fr}.facts dl:nth-child(3){border-inline-start:0}.facts dl:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){.facts{margin-top:-30px}.facts .wrap>div{grid-template-columns:1fr}.facts dl{border-inline-start:0!important;border-top:1px solid var(--line)}.facts dl:first-child{border-top:0}}
.tabs{position:sticky;top:76px;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:34px}
.tabs .wrap{display:flex;gap:6px;overflow:auto}
.tabs a{padding:15px 18px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent}
.tabs a:hover{color:var(--navy);border-color:var(--gold)}
.scards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;counter-reset:x}
.scards li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;transition:.2s}
.scards li:hover{border-color:var(--gold);box-shadow:var(--sh)}
.scards li:first-child{grid-column:1/-1;background:var(--navy);color:#fff;border:0}
.scards li:first-child p{color:#C9D7E4}
.scards .nb{margin-bottom:14px}
.scards h3{font-size:18px;line-height:1.55}.scards p{color:var(--muted);font-size:15.5px;margin-top:6px}
@media(max-width:700px){.scards{grid-template-columns:1fr}}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pn a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;transition:.2s;display:block}
.pn a:hover{border-color:var(--gold);transform:translateY(-3px)}
.pn small{color:var(--gold2);font-weight:700;display:block}.pn b{display:block;line-height:1.5;margin-top:2px}
.pn a:last-child{text-align:left}
@media(max-width:620px){.pn{grid-template-columns:1fr}.pn a:last-child{text-align:right}}
/* groups */
.grp{margin-top:56px}.grp:first-child{margin-top:0}
.grp h2{font-size:24px;display:flex;align-items:center;gap:14px}
.grp h2::after{content:"";flex:1;height:1px;background:var(--line)}
.grp .grid{margin-top:22px}
/* values */
.val .ico{margin-bottom:14px}
/* footer upgrade */
.ftcta{background:var(--gold);color:var(--navy)}
.ftcta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:34px}
.ftcta h3{font-size:clamp(20px,2.4vw,28px);line-height:1.5}
.ft{padding-top:56px}
.up{position:fixed;z-index:40;bottom:22px;inset-inline-end:22px;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:var(--gold);cursor:pointer;box-shadow:var(--sh2);font-size:20px;opacity:0;pointer-events:none;transition:.2s}
.up.show{opacity:1;pointer-events:auto}
@media(max-width:1020px){.up{bottom:84px}}


/* ===== v3 motion ===== */
.pre,.pt,.cur,.progress{display:none}
.pre{position:fixed;inset:0;z-index:500;background:var(--navy2);place-items:center;align-content:center;gap:26px}
.pre-on .pre{display:grid}
.pre img{width:200px;height:auto}
.pre .bar{width:200px;height:3px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.pre .bar i{display:block;height:100%;background:var(--gold);transform-origin:right;transform:scaleX(0)}
.pt{display:block;position:fixed;inset:0;z-index:450;background:var(--navy);transform:translateY(100%);pointer-events:none;place-items:center}
.pt-on .pt{transform:none}
.pt img{width:150px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.9}
.progress{display:block;position:fixed;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--gold),#fff3c4);transform-origin:100% 50%;transform:scaleX(0);z-index:300}
.hd{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.hd.hide{transform:translateY(-110%)}
.hd.stuck{box-shadow:0 8px 30px rgba(10,44,73,.1)}
.tabs{transition:top .4s cubic-bezier(.16,1,.3,1)}
body.hd-hide .tabs{top:0}
.tabs a.on{color:var(--navy);border-color:var(--gold)}
/* split words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .22em;margin:-.12em 0 -.22em}
.wi{display:inline-block;will-change:transform}
h2.t::after{transform:scaleX(var(--bar,1));transform-origin:100% 50%}
.center h2.t::after{transform-origin:50% 50%}
/* hero layers */
.hero-bg{position:absolute;inset:-8% 0;z-index:-2}
.hero-bg i{position:absolute;inset:0;background:url(/assets/riyadh.jpg) center 40%/cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.18) translate(1.5%,0)}to{transform:scale(1.02) translate(-1.5%,0)}}
canvas.net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap,.cta .wrap{position:relative;z-index:1}
.shine{background:linear-gradient(100deg,#fff 0%,#fff 35%,var(--gold) 50%,#fff 65%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,20%{background-position:120% 0}80%,100%{background-position:-120% 0}}
.cue{position:absolute;bottom:26px;left:50%;z-index:2;width:28px;height:46px;margin-left:-14px;border:2px solid rgba(255,255,255,.55);border-radius:16px;display:none}
@media(min-width:1101px){.cue{display:block}}
.cue i{position:absolute;top:8px;left:50%;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(18px)}}
/* stats */
.stats{background:var(--navy2);color:#fff;padding-block:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:36px 24px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.1)}
.stat:first-child{border-inline-start:0}
.stat b{display:block;font-family:var(--lat);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1.1;color:var(--gold);direction:ltr}
.stat span{display:block;margin-top:6px;color:#C9D7E4;font-size:15px}
@media(max-width:800px){.stat-grid{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-inline-start:0}.stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}}
/* marquee */
.mqs{background:#fff;padding-block:48px;overflow:hidden;border-block:1px solid var(--line)}
.mq{overflow:hidden;direction:ltr}
.mq+.mq{margin-top:10px}
.mq-t{display:flex;width:max-content;white-space:nowrap}
.mq-t span{font-family:var(--lat);font-weight:900;font-size:clamp(44px,7vw,104px);line-height:1.15;letter-spacing:-.02em;color:#D9E3EC;padding-inline:.3em;text-transform:uppercase}
.mq-t span:nth-child(4n+1){color:var(--navy)}
.mq-t span em{font-style:normal;color:var(--gold);padding-inline:.35em}
.mq.r2 .mq-t span{color:var(--navy)}
.mq.r2 .mq-t span:nth-child(4n+1){color:#D9E3EC}
/* process line */
.proc li::before{display:none!important}
.proc .pl{position:absolute;top:27px;inset-inline:12.5%;height:2px;background:rgba(255,255,255,.15);border-radius:2px}
.proc .pl i{display:block;height:100%;background:var(--gold);transform-origin:100% 50%;transform:scaleX(0);box-shadow:0 0 14px rgba(255,198,45,.7)}
.proc .nb{background:#1B3F5E;color:#fff;border:2px solid rgba(255,255,255,.2);transition:.5s cubic-bezier(.16,1,.3,1)}
.proc li.on .nb,.no-js .proc .nb{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:scale(1.14);box-shadow:0 0 0 8px var(--navy2),0 0 28px rgba(255,198,45,.55)}
.proc li h3,.proc li p{transition:opacity .5s;opacity:.55}
.proc li.on h3,.proc li.on p{opacity:1}
@media(max-width:900px){.proc .pl{display:none}.proc li h3,.proc li p{opacity:1}}
/* cards: spotlight + tilt */
a.card::after,.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,198,45,.2),transparent 60%);opacity:0;transition:opacity .3s}
a.card:hover::after,.panel:hover::after{opacity:1}
.panel{position:relative;overflow:hidden}
.ico{transition:.4s cubic-bezier(.16,1,.3,1)}
a.card:hover .ico{background:var(--gold);color:var(--navy);transform:rotate(-8deg) scale(1.08)}
.more{transition:gap .3s}a.card:hover .more{gap:14px}
.tile .in{transition:transform .5s cubic-bezier(.16,1,.3,1)}.tile:hover .in{transform:translateY(-8px)}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,198,45,.22),transparent 60%);opacity:0;transition:.3s;z-index:-1}
.tile:hover::after{opacity:1}
/* buttons */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(130%);transition:transform .7s}
.btn:hover::before{transform:translateX(-130%)}
/* cursor */
@media(hover:hover) and (pointer:fine){
 .cur{display:block;position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--gold);border-radius:50%;pointer-events:none;z-index:350;opacity:0;transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s}
 .cur.on{opacity:1}
 .cur.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(255,198,45,.18)}
}
.frame .img{will-change:background-position}
@media(prefers-reduced-motion:reduce){.hero-bg i,.shine,.cue i{animation:none}.shine{color:#fff;background:none}}


/* ===== v4 a11y ===== */
:root{--goldtxt:#8A6100}
.eyebrow{color:var(--goldtxt)}.navy .eyebrow,.hero .eyebrow{color:var(--gold)}
.specs dt,.rel h4,.pn small{color:var(--goldtxt)}
.note,.ph-box{color:#5F7890}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:600;background:var(--gold);color:var(--navy);font-weight:700;padding:10px 18px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}
.qcard .qt{font-size:21px;line-height:1.5;margin-bottom:4px}
.form .ft2{font-size:22px;line-height:1.5;margin-bottom:16px}

@media(max-width:1020px){.nav .dd>a{display:block}}