:root{
  --navy:#1C2738; --navy-2:#243249; --navy-3:#31415D;
  --gold:#B08D57; --gold-deep:#8A6A36; --gold-soft:#D9C29A;
  --paper:#F7F4EE; --stone:#EFE9DE; --line:#E2DACB; --ink:#1C2738; --muted:#5B6270; --white:#fff;
  --ar:'Tajawal', Tahoma, 'Segoe UI', sans-serif;
  --en:'Montserrat', 'Segoe UI', Arial, sans-serif;
  --wrap:1200px; --head:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{overflow-x:clip;font-family:var(--ar);color:var(--ink);background:var(--paper);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[lang="en"] body,body[lang="en"],.lang-en{font-family:var(--en);font-size:16px;line-height:1.7}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:4px;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header */
.head{position:fixed;inset:0 0 auto;z-index:40;transition:background .3s ease}
.head .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head);gap:20px}
.head.solid,.page-inner .head{background:var(--navy)}
.brand img{height:50px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:#fff;text-decoration:none;font-weight:500;font-size:15px;opacity:.86;padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--gold)}
.nav .nav-lease{border:1px solid var(--gold);color:var(--gold-soft);padding:7px 16px;border-radius:4px;opacity:1}
.nav .nav-lease:hover,.nav .nav-lease[aria-current="page"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.lang-switch{color:#fff;text-decoration:none;font:600 13px var(--en);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 12px}
.lang-switch:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.lang-switch[lang="ar"]{font-family:var(--ar);font-size:14px}
.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;width:44px;height:44px}
.menu-btn svg{width:26px;height:26px}

/* buttons */
.btn{background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:4px;font-weight:700;text-decoration:none;font-size:16px;border:1.5px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.link{color:var(--gold-deep);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.on-dark .link{color:var(--gold-soft)}

/* typography */
.h1{font-size:clamp(36px,5.4vw,68px);font-weight:800;line-height:1.12}
.h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.25}
.h3{font-size:22px;font-weight:800;line-height:1.4}
.lang-en .h1,.lang-en .h2,.lang-en .h3{font-weight:700;letter-spacing:-.01em}
.lead{font-size:19px;color:var(--muted);max-width:62ch;margin-top:16px}
.on-dark{color:#fff}
.on-dark .lead{color:#C7CDD8}
.kicker{display:inline-block;color:var(--gold-deep);font-weight:700;font-size:15px;margin-bottom:10px}
.on-dark .kicker{color:var(--gold-soft)}
section{padding:104px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}

/* home hero */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--navy)}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 45%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,39,56,.6) 0%,rgba(28,39,56,0) 22%),linear-gradient(to left,rgba(28,39,56,.92) 0%,rgba(28,39,56,.6) 40%,rgba(28,39,56,0) 66%),linear-gradient(0deg,rgba(28,39,56,.85) 0%,rgba(28,39,56,0) 42%)}
[dir="ltr"] .hero::after{background:linear-gradient(180deg,rgba(28,39,56,.6) 0%,rgba(28,39,56,0) 22%),linear-gradient(to right,rgba(28,39,56,.92) 0%,rgba(28,39,56,.6) 40%,rgba(28,39,56,0) 66%),linear-gradient(0deg,rgba(28,39,56,.85) 0%,rgba(28,39,56,0) 42%)}
.hero .wrap{position:relative;z-index:1;padding-bottom:84px}
.hero .h1{max-width:14ch}
.hero p{margin-top:18px;font-size:clamp(17px,1.5vw,20px);max-width:50ch;color:#E9E4DA}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px}
.hero .lease-path{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.hero .lease-path:hover{color:var(--gold-soft)}

/* inner page hero */
.phero{position:relative;color:#fff;background:var(--navy);padding:calc(var(--head) + 88px) 0 72px;overflow:hidden}
.phero picture,.phero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,39,56,.95),rgba(28,39,56,.72))}
.phero .wrap{position:relative;z-index:1}
.phero .lead{color:#D2D7E0}
.crumbs{font-size:14px;color:var(--gold-soft);margin-bottom:14px}
.crumbs a{text-decoration:none;color:#C7CDD8}

/* department tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;display:block;border-radius:4px;overflow:hidden;aspect-ratio:4/5;text-decoration:none;color:#fff;background:var(--navy-2)}
.tile picture,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,39,56,.92) 0%,rgba(28,39,56,.2) 48%,rgba(28,39,56,0) 70%)}
.tile span{position:absolute;inset-inline:18px;bottom:16px;z-index:1;font-weight:800;font-size:19px;line-height:1.35}
.lang-en .tile span{font-weight:700;font-size:17px}
.tile small{display:block;font-weight:500;font-size:13px;color:var(--gold-soft);margin-top:2px}
.tile.icon-tile{display:grid;place-items:center;background:linear-gradient(160deg,var(--navy-2),var(--navy))}
.tile.icon-tile svg{width:64px;height:64px;color:var(--gold);margin-bottom:40px}
.tile.icon-tile::after{display:none}

/* map */
.mapsec{background:var(--navy)}
.bcmap{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:start}
.plan{background:#fff;border-radius:4px;padding:10px}
.plan svg{width:100%;height:auto;display:block}
.plan .u{transition:opacity .25s ease;opacity:.4}
.plan g.zone{cursor:pointer}
.plan g.zone:hover .u,.plan g.zone.on .u{opacity:.95}
.plan g.zone:focus{outline:none}
.plan g.zone:focus-visible .u{opacity:.95;stroke:var(--navy);stroke-width:3}
.plan text{font:700 46px var(--en);fill:var(--navy);paint-order:stroke;stroke:#fff;stroke-width:7px;pointer-events:none}
.zone-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.zone-tabs button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:700 16px var(--en);cursor:pointer}
.zone-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.zcard{background:var(--navy-2);border-radius:4px;overflow:hidden;color:#fff;position:sticky;top:calc(var(--head) + 20px)}
.zcard img{width:100%;aspect-ratio:16/10;object-fit:cover;height:auto}
.zbody{padding:24px 26px 28px}
.zhead{display:flex;align-items:center;gap:12px;color:var(--gold-soft);font-weight:700}
.zhead b{font-family:var(--en);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:18px}
.zbody h3{font-size:24px;font-weight:800;margin-top:12px;line-height:1.35}
.lang-en .zbody h3{font-weight:700;font-size:21px}
.zbody p{color:#C7CDD8;margin-top:8px}
.zdepts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.zdepts a,.zdepts span{border:1px solid rgba(217,194,154,.45);color:var(--gold-soft);padding:4px 12px;border-radius:999px;font-size:14px;text-decoration:none}
.zdepts a:hover{background:rgba(217,194,154,.12)}
.zfacts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.zfacts strong{display:block;font:700 22px var(--en);color:#fff}
.zfacts span{font-size:13px;color:#9AA3B2}
.znote{margin-top:16px;font-size:13.5px;color:#9AA3B2}

/* audience paths */
.paths{background:var(--stone)}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy)}
.path{padding:34px 30px 8px 0;border-inline-end:1px solid var(--line)}
[dir="rtl"] .path{padding:34px 0 8px 30px}
.path:last-child{border-inline-end:0}
.path + .path{padding-inline-start:30px}
.path h3{margin-top:4px}
.path p{color:var(--muted);margin:10px 0 22px}
.path .who{font-size:14px;font-weight:700;color:var(--gold-deep)}

/* visit */
.visit .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.mapbox{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/11;background:var(--navy-2);color:#fff;display:grid;place-items:center;text-align:center}
.mapbox picture,.mapbox picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.mapbox .inner{position:relative;z-index:1;padding:24px}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.addr{margin-top:18px;font-weight:700;font-size:18px}

/* departments page */
.dept-nav{position:sticky;top:var(--head);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.dept-nav .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:thin}
.dept-nav a{flex:none;text-decoration:none;font-size:14.5px;font-weight:700;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
.dept-nav a:hover{border-color:var(--gold)}
.dept{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.dept:nth-child(even) .dept-media{order:2}
.dept-media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--navy-2)}
.dept-media picture,.dept-media img{width:100%;height:100%;object-fit:cover}
.dept-media.icon-only{display:grid;place-items:center;background:linear-gradient(160deg,var(--navy-2),var(--navy))}
.dept-media.icon-only svg{width:96px;height:96px;color:var(--gold)}
.zone-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;border:1px solid var(--line);padding:4px 12px 4px 4px;border-radius:999px;background:#fff;margin-bottom:14px}
[dir="rtl"] .zone-badge{padding:4px 4px 4px 12px}
.zone-badge b{font-family:var(--en);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;list-style:none}
.chips li{background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:15px}
.catalog-note{background:var(--stone);border-radius:4px;padding:26px 28px;margin-top:56px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}

/* features list */
.feat{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--line)}
.feat li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.feat svg{width:40px;height:40px;color:var(--gold-deep)}
.feat h3{font-size:20px}
.feat p{color:var(--muted);margin-top:4px}

/* steps (true sequence) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.steps li{counter-increment:s;border-top:2px solid var(--gold);padding-top:18px}
.steps li::before{content:counter(s);font:700 30px var(--en);color:var(--gold-deep);display:block;margin-bottom:6px}
.steps h3{font-size:18px}
.steps p{color:var(--muted);font-size:15px;margin-top:4px}

/* forms */
.form-sec .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:32px;display:grid;gap:18px;position:relative}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:15px}
.field .opt{font-weight:400;color:var(--muted);font-size:13px}
.field input,.field select,.field textarea{font:inherit;font-weight:400;font-size:16px;border:1px solid #D3CABA;border-radius:4px;padding:12px 14px;background:#FCFBF8;color:var(--ink);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:2px solid rgba(176,141,87,.25)}
.field [aria-invalid="true"]{border-color:#B3261E}
.err{color:#B3261E;font-size:13.5px;min-height:0}
.hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.consent{font-size:13.5px;color:var(--muted)}
.form-status{font-size:15px;font-weight:700;min-height:1.6em}
.form-status.ok{color:#1E6B3A}.form-status.bad{color:#B3261E}
.aside-list{list-style:none;margin-top:26px;display:grid;gap:12px}
.aside-list li{display:flex;gap:12px;align-items:flex-start}
.aside-list svg{flex:none;width:22px;height:22px;color:var(--gold-deep);margin-top:4px}
.route-note{margin-top:26px;padding:18px 20px;border-inline-start:3px solid var(--gold);background:var(--stone);font-size:15px}

/* PRO */
.pro-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.pro-band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.pro-mark{font:700 clamp(40px,6vw,72px)/1 var(--en);letter-spacing:.02em}
.pro-mark span{color:var(--gold)}
.who-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:22px}
.who-list li{padding-inline-start:18px;position:relative}
.who-list li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* footer */
.foot{background:var(--navy);color:#C7CDD8;padding:64px 0 32px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot img{height:58px;width:auto}
.foot h2{font-size:15px;color:#fff;margin-bottom:12px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-soft)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8F98A8;font-size:14px}

/* WhatsApp */
.wa{position:fixed;inset-inline-start:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.wa svg{width:30px;height:30px;color:#fff}

/* pending-approval markers (preview only) */
.tbc{outline:2px dashed var(--gold);outline-offset:4px;position:relative}
.tbc::after{content:attr(data-tbc);position:absolute;top:-14px;inset-inline-end:-6px;background:var(--gold);color:var(--navy);font:700 11px var(--ar);padding:2px 8px;border-radius:999px;white-space:nowrap;z-index:5}
span.tbc{outline-offset:2px}

/* prose (privacy) */
.prose{max-width:72ch}
.prose h2{font-size:22px;margin:32px 0 8px}
.prose p,.prose li{color:#3B4250}
.prose ul{padding-inline-start:22px}

/* load moment */
@media (prefers-reduced-motion:no-preference){
  .plan.reveal g.zone .u{animation:lu 1.1s ease both;animation-delay:calc(var(--i) * .14s)}
  .plan.reveal g.zone.on .u{animation:lu2 1.1s ease both;animation-delay:calc(var(--i) * .14s)}
  @keyframes lu{0%{opacity:0}55%{opacity:.95}100%{opacity:.4}}
  @keyframes lu2{0%{opacity:0}100%{opacity:.95}}
}

/* responsive */
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  section{padding:76px 0}
  .bcmap,.visit .wrap,.form-sec .wrap,.pro-band .wrap,.dept{grid-template-columns:1fr;gap:32px}
  .dept:nth-child(even) .dept-media{order:0}
  .zcard{position:static}
  .path-grid{grid-template-columns:1fr}
  .path,.path + .path,[dir="rtl"] .path{padding:28px 0;border-inline-end:0;border-bottom:1px solid var(--line)}
  .feat{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{position:fixed;inset:var(--head) 0 auto;background:var(--navy);flex-direction:column;align-items:stretch;padding:12px 24px 28px;gap:4px;display:none;max-height:calc(100svh - var(--head));overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .nav-lease{margin-top:12px;text-align:center}
  .menu-btn{display:grid;place-items:center}
  .head{background:var(--navy)}
}
@media (max-width:600px){
  .wrap{width:min(var(--wrap),100% - 36px)}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile span{font-size:16px;inset-inline:12px;bottom:12px}
  .steps{grid-template-columns:1fr}
  .form{padding:22px}
  .form .row{grid-template-columns:1fr}
  .who-list{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero picture img{object-position:12% 45%}
  .hero::after,[dir="ltr"] .hero::after{background:linear-gradient(0deg,rgba(28,39,56,.96) 0%,rgba(28,39,56,.82) 45%,rgba(28,39,56,.25) 75%,rgba(28,39,56,.55) 100%)}
  .brand img{height:42px}
}
