/* ZOOSER | Global institutional website | Self-hosted static design system */
:root{color-scheme:dark;--bg:#040911;--panel:#0b1924;--panel2:#0f2531;--ink:#eef7fa;--muted:#bdccd5;--cyan:#69e7eb;--cyanStrong:#35c9db;--gold:#d9bd83;--hair:#53758355;--max:1180px;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:110px}
body{margin:0;min-width:300px;overflow-x:hidden;background:radial-gradient(ellipse at 80% -8%,#0d3944 0,transparent 38%),linear-gradient(180deg,#040911,#060e19 45%,#040910);color:var(--ink);font:16px/1.75 system-ui,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
@font-face{font-family:"Bahij TheSansArabic Plain";src:local("Bahij TheSansArabic Plain"),local("Bahij TheSansArabic");font-display:swap}
html[lang=ar] body{font-family:"Bahij TheSansArabic Plain",Tahoma,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:4px}
img{display:block;max-width:100%}
.skip{position:absolute;left:16px;top:-100px;background:#fff;color:#08171b;padding:10px 16px;z-index:100;border-radius:10px}
.skip:focus{top:10px}
.site-header{position:sticky;top:0;z-index:50;min-height:76px;border-bottom:1px solid #57839038;background:#050d17e9;backdrop-filter:blur(20px)}
.site-header-inner{max-width:calc(var(--max) + 64px);padding:14px 26px;margin:auto;display:flex;align-items:center;gap:clamp(16px,2.5vw,35px);justify-content:space-between}
.site-brand{flex-shrink:0;display:inline-flex;align-items:center}.site-brand img{width:160px;height:auto}
.site-nav{display:flex;align-items:center;gap:clamp(9px,1.6vw,21px);font-size:13px;font-weight:600;white-space:nowrap}
.site-nav a:hover,.footer-links a:hover{color:var(--cyan)}.site-nav a[aria-current=page]{color:var(--cyan)}
.site-nav .nav-cta{border:1px solid #d9bd8377;padding:8px 13px;border-radius:9px;color:var(--gold)}
.lang-link{border:1px solid #53758388;padding:6px 10px;border-radius:9px}
.mobile-menu{display:none}
.shell{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.eyebrow{font-size:12px;font-weight:750;color:var(--cyan);letter-spacing:.15em;text-transform:uppercase}
html[lang=ar] .eyebrow{letter-spacing:.06em}
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #ffffff18}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 72% 40%,#12606a2b,transparent 44%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:38px;align-items:center;min-height:540px;padding-block:clamp(65px,9vw,125px)}
.hero h1{font-size:clamp(40px,5vw,70px);line-height:1.19;letter-spacing:-.03em;font-weight:640;margin:12px 0 24px}
html[lang=ar] .hero h1{letter-spacing:0;line-height:1.34;font-weight:600}
.hero h1 em,.text-accent{font-style:normal;color:var(--cyan)}
.hero .lead{font-size:clamp(17px,1.6vw,21px);color:#d2e3eb;max-width:780px;line-height:1.85}
.hero-visual{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.hero-visual .visual-art{width:100%;aspect-ratio:4/4.7;border-radius:26px;object-fit:cover;object-position:58% center;border:1px solid #ffffff18;box-shadow:0 35px 100px #000a}
.hero-visual .visual-logo{position:absolute;bottom:20px;left:20px;width:150px;filter:drop-shadow(0 5px 17px #000)}
.chip-line{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.chip-line span{display:inline-flex;padding:7px 14px;color:#c8edef;border:1px solid #59b9bf55;background:#102b36a3;border-radius:100px;font-size:13px;font-weight:550}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:11px 19px;border:1px solid #68d8e585;border-radius:9px;font-weight:700;font-size:14px;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px);background:#19404a}
.btn.primary{background:var(--cyanStrong);color:#03151e;border-color:var(--cyanStrong)}
.btn.primary:hover{background:#96f8ff}
.btn.gold{border-color:#d8bc81a0;color:#f2dcaa}
.trust-band{border-block:1px solid #ffffff1c;background:#10232d85}
.trust-band .shell{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-block:17px;color:#d5e6e9;font-size:13px}
.trust-band span{display:flex;align-items:center;gap:8px}
.trust-band b{color:var(--cyan);font-size:14px}
.section{padding-block:clamp(58px,7vw,100px)}
.section.slim{padding-block:48px}
.section.alt{background:linear-gradient(140deg,#0b1f2a7b,#04101c)}
.section-header{max-width:820px;margin-bottom:34px}
.section h2{font-size:clamp(29px,3.3vw,45px);line-height:1.3;margin:12px 0 14px;font-weight:620}
html[lang=ar] .section h2{line-height:1.45}
.section-header p,.section .intro{color:var(--muted);font-size:17px}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{min-width:0;background:linear-gradient(145deg,#122b36c2,#07121dde);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(21px,2.5vw,33px);transition:border-color .2s,transform .2s}
.card:hover{border-color:#5fc7c88c}
.card h3{font-size:clamp(19px,1.7vw,23px);line-height:1.35;margin:0 0 14px}
.card p{color:#c7d8e1;margin:0;line-height:1.8;font-size:15px}
.card .card-icon{font-size:26px;color:var(--cyan);margin-bottom:20px;line-height:1}
.card .small-label{color:var(--gold);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:block}
.card a.inline{display:inline-block;margin-top:22px;color:var(--cyan);font-size:14px;font-weight:650}
.card .facts{padding-inline-start:18px;margin:14px 0 0;color:#cbdce5;font-size:14px}
.card .facts li{margin:8px 0}
.metric{font-size:clamp(30px,3vw,44px);font-weight:750;color:var(--cyan);line-height:1.1}
.metric-caption{color:var(--muted);font-size:13px;margin-top:11px}
.path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:step}
.path-item{padding:20px 15px;background:#0b1d27;border:1px solid #4b788143;border-radius:14px;min-width:0}
.path-item::before{counter-increment:step;content:counter(step,decimal-leading-zero);color:var(--cyan);font-size:13px;font-weight:800}
.path-item h3{font-size:16px;line-height:1.45;margin:13px 0 8px}
.path-item p{font-size:13px;color:var(--muted);margin:0}
.prose{max-width:860px;color:#d4e3e9;font-size:17px}
.prose p{margin:0 0 20px}
.keyline{border-inline-start:3px solid var(--cyan);padding-inline-start:22px;color:#e6f2f5;font-size:clamp(20px,2vw,26px);line-height:1.6;margin:34px 0}
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.person{min-width:0;border-radius:18px;border:1px solid var(--hair);background:#0c1d29;padding:16px}
.person img,.person .avatar{width:100%;height:215px;object-fit:cover;object-position:center 24%;border-radius:12px}
.person .avatar{display:grid;place-items:center;font-size:50px;color:#71e0e2;background:radial-gradient(circle at 70% 12%,#265768,#0c1b2a)}
.person h3{margin:17px 0 5px;font-size:21px}
.person strong{font-size:13px;color:var(--gold);display:block;line-height:1.5}
.person p{font-size:14px;line-height:1.75;color:#c4d6dd}
.photo-profile{display:grid;grid-template-columns:310px 1fr;gap:45px;align-items:center}
.photo-profile img{width:100%;border-radius:18px;aspect-ratio:3/3.7;object-fit:cover}
.contact-art{width:100%;border:1px solid var(--hair);border-radius:18px;overflow:hidden;position:relative}
.contact-art img{width:100%;height:auto}
.details-address{font-style:normal;line-height:1.8;overflow-wrap:anywhere}
.contact-action{display:flex;align-items:center;gap:10px;color:var(--cyan);font-weight:680;margin-top:17px;overflow-wrap:anywhere}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--hair);background:#0a1a25;border-radius:12px;padding:16px 22px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px}
.faq p{color:#c8dae3;margin:14px 0 0}
.banner-cta{display:flex;gap:28px;align-items:center;justify-content:space-between;border:1px solid #478e9770;padding:clamp(25px,4vw,44px);background:linear-gradient(120deg,#0b303a,#08151f);border-radius:20px}
.banner-cta h2{margin:0 0 10px;font-size:clamp(25px,3vw,39px)}
.banner-cta p{margin:0;color:#c3d8df}
.banner-cta .actions{margin:0;flex-shrink:0}
.site-footer{border-top:1px solid #42657455;background:#030910;padding:40px 0 26px}
.footer-main{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(2,1fr);gap:34px}
.footer-main img{width:150px;margin-bottom:12px}
.footer-main p,.footer-bottom{color:#9eb5c1;font-size:13px;line-height:1.8}
.footer-main h3{font-size:14px;margin:0 0 14px;color:#eed5a4}
.footer-links{display:grid;gap:8px;font-size:14px;color:#d7e7ed}
.footer-bottom{border-top:1px solid #ffffff1c;margin-top:35px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.notice{color:#a6bec9;font-size:13px;max-width:920px}
@media(max-width:1000px){.site-header-inner{padding:12px 20px}.site-brand img{width:140px}.site-nav{gap:9px;font-size:12px}.hero-inner{grid-template-columns:1.15fr .85fr}.grid.four{grid-template-columns:repeat(2,1fr)}.people{grid-template-columns:repeat(2,1fr)}.path{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.site-nav{display:none}.mobile-menu{display:block;position:relative}.mobile-menu summary{list-style:none;border:1px solid var(--hair);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:15px}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-links{position:absolute;inset-inline-end:0;top:52px;min-width:min(320px,calc(100vw - 40px));display:grid;gap:0;padding:12px;background:#071620;border:1px solid #46727c;border-radius:12px;box-shadow:0 20px 60px #000b}.mobile-links a{padding:12px;border-radius:6px;font-size:15px}.mobile-links a:hover{background:#15323c}.hero-inner{grid-template-columns:1fr;min-height:0;padding-block:55px 64px}.hero-visual{max-width:580px;width:100%;margin:auto}.hero-visual .visual-art{aspect-ratio:16/10}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{grid-column:1/-1}.banner-cta{flex-direction:column;align-items:flex-start}.photo-profile{grid-template-columns:220px 1fr;gap:25px}}
@media(max-width:520px){.shell{width:calc(100% - 36px)}.hero h1{font-size:36px}.hero .lead{font-size:16px}.chip-line{gap:7px}.chip-line span{font-size:12px;padding:6px 10px}.actions .btn{width:100%}.grid.two,.grid.three,.grid.four,.people,.photo-profile{grid-template-columns:1fr}.person img,.person .avatar{height:270px}.path{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-band .shell{gap:10px}.trust-band span{font-size:12px}.footer-main{grid-template-columns:1fr}.footer-main>div:first-child{grid-column:auto}.photo-profile img{max-width:300px}.section{padding-block:55px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.btn{transition:none}.btn:hover{transform:none}}

figure{margin:0;max-width:100%}

/* Photo-led contact visual, no scaled-down website mockup on small screens. */
.hero-inner:has(>div:only-child){grid-template-columns:minmax(0,1fr);min-height:380px;padding-block:75px}
.hero-inner:has(>div:only-child) >div{max-width:900px}
.contact-art img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}
@media(max-width:780px){.hero-inner:has(>div:only-child){min-height:auto;padding-block:58px}.contact-art img{height:auto;max-height:none;object-fit:contain;object-position:center}}

/* Launch patch: contact image is fully visible, without object-fit cropping. */
.contact-art{overflow:visible;isolation:isolate;margin:0;border-radius:18px;background:#020a13;box-shadow:0 14px 65px #0008}
.contact-art img{display:block;position:relative;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:18px}
.contact-art figcaption{padding:12px 18px;color:#b4d5db;font-size:13px;border-top:1px solid var(--hair);line-height:1.65}
.contact-art figcaption a{font-weight:650;color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.contact-section{padding-block:clamp(20px,3vw,40px)!important}
.contact-location-cards .card{display:flex;flex-direction:column;align-items:flex-start}
.contact-location-cards .contact-action{margin-top:auto;padding-top:22px;min-height:55px}
.contact-location-cards .card p{margin:0 0 5px}
.contact-location-cards .card p .contact-action{margin-top:0;padding-top:7px;min-height:0}
.footer-location-list{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:18px;max-width:410px}
.footer-location-list a{display:flex;gap:11px;align-items:flex-start;min-width:0;padding:10px 12px;border:1px solid #426e794f;border-radius:9px;background:#0c202b85;color:#d6eaf1;font-size:13px;line-height:1.5;transition:background .2s,border-color .2s}
.footer-location-list a:hover,.footer-location-list a:focus-visible{background:#143440;border-color:#60d8df;color:#fff}
.footer-location-list .pin{flex:0 0 20px;color:var(--cyan);font-size:18px;line-height:1.25;text-align:center}
.footer-location-list .loc-text{min-width:0;overflow-wrap:anywhere}
.footer-location-list .loc-text small{display:block;color:#9ebdca;font-size:12px;margin-top:3px}
.footer-main>div,.footer-links{min-width:0}
.footer-links a{overflow-wrap:anywhere}
.site-footer{position:relative;clear:both}
@media(max-width:780px){.contact-art{border-radius:12px}.contact-art img{border-radius:12px}.contact-art figcaption{font-size:12px}.contact-location-cards .card{min-height:0}}
@media(max-width:520px){.contact-art{overflow:hidden}.contact-art img{aspect-ratio:auto;min-height:0}.contact-section{padding-block:18px!important}}

/* The approved cinematic contact artwork contains drawn UI. These accessible links
   make its key interaction areas genuinely clickable on desktop. Live contact cards
   directly below remain primary controls on compact mobile screens. */
.contact-visual-frame{position:relative;overflow:hidden;border-radius:18px 18px 0 0}
.contact-visual-frame img{width:100%;height:auto;object-fit:contain;aspect-ratio:auto}
.contact-hotspot{display:block;position:absolute;z-index:2;border:1px solid transparent;border-radius:10px;outline-offset:3px;transition:background .2s,border-color .2s}
.contact-hotspot:hover,.contact-hotspot:focus-visible{background:#64e1e218;border-color:#83eaf0;box-shadow:0 0 0 4px #081d2766}
.hotspot-us{left:4%;top:40.2%;width:22%;height:22%}
.hotspot-sa{left:27%;top:40.2%;width:23%;height:22%}
.hotspot-mail{left:55%;top:43%;width:15%;height:5.8%}
.hotspot-phone{left:55%;top:50.4%;width:15%;height:5.8%}
.hotspot-whatsapp{left:55%;top:57.9%;width:15%;height:5.8%}
.hotspot-meeting{left:73%;top:83.6%;width:11.6%;height:6.4%}
.hotspot-message{left:85%;top:83.6%;width:11.8%;height:6.4%}
@media(max-width:780px){.contact-hotspot{display:none}.contact-visual-frame{border-radius:12px 12px 0 0}}

/* ZOOSER GLOBAL / 2026-10-13: show the complete cinematic asset on every page. */
.hero-visual{min-width:0;align-self:center;overflow:visible}
.hero-visual .visual-art{
  display:block;width:100%;height:auto!important;max-width:100%;
  aspect-ratio:auto!important;object-fit:contain!important;
  object-position:center center!important;border-radius:20px;
  background:#030914;box-shadow:0 24px 80px #000b;
}
@media(max-width:780px){
  .hero-visual{width:100%;max-width:700px;min-width:0;margin-inline:auto}
  .hero-visual .visual-art{width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
}

/* Visual consistency: use the full cinematic illustration in all institutional hero pages. */
@media(min-width:901px){
 .hero-inner:has(.hero-visual){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,46px)}
 .hero-visual .visual-art{display:block;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important}
}
@media(max-width:900px){
 .hero-visual .visual-art{width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}
}

/* International edition: visual polish and contact address integrity. */
.site-header{box-shadow:0 12px 40px rgba(0,0,0,.22)}
.site-nav a{transition:color .16s ease,border-color .16s ease,background .16s ease}
.hero h1{text-wrap:balance}
.hero .lead{max-width:860px}
/* Reduce blank above cinematic contact artwork without changing artwork aspect ratio. */
body:has(.contact-art) .hero{padding-top:clamp(45px,6vw,80px);padding-bottom:clamp(38px,4vw,60px)}
body:has(.contact-art) .hero h1{font-size:clamp(38px,4.8vw,65px);line-height:1.16}
body:has(.contact-art) .contact-section{padding-top:clamp(18px,2vw,30px);padding-bottom:clamp(24px,4vw,52px)}
.contact-visual-frame{container-type:inline-size}
.verified-address-overlay{position:absolute;z-index:3;pointer-events:none;left:11.1%;top:40.5%;width:16.2%;height:20.7%;padding:1%;border-radius:0 6px 6px 0;background:linear-gradient(120deg,#07121b,#091924 70%,#06111b);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.28cqw;color:#f5fbfe;line-height:1.25;text-align:start;font-size:1.03cqw;box-shadow:0 0 8px #03090d55}
.verified-address-overlay strong{font-weight:800;color:#ffffff;font-size:1.08em}
.verified-address-overlay span{display:block}
.verified-address-overlay~.contact-hotspot{z-index:4}
@media(max-width:780px){.verified-address-overlay{font-size:1.12cqw;gap:.12cqw;top:40.2%;height:21.8%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}