/* Jabor Holding — single brand look (maroon, gold, cream). Layout: header → maroon hero with the gate → about → sectors → companies → chairman → contact */
:root{
  --maroon:#6B1230; --maroon-deep:#4E0C23; --gold:#A88A45; --gold-soft:#D9C38E;
  --cream:#FAF5EF; --sand:#F1E8DA; --ink:#2A1A1F; --muted:#6E5F63; --line:#E5DACB;
  --ar-display:"Aref Ruqaa", "Amiri", serif;
  --ar-body:"IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --en-display:"Cormorant Garamond", Georgia, serif;
  --en-body:"IBM Plex Sans", "Segoe UI", Helvetica, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--ar-body); font-size:16.5px; line-height:1.8}
html[lang="en"] body{font-family:var(--en-body); line-height:1.7}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--ar-display); font-weight:700; line-height:1.35; margin:0; text-wrap:balance}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-family:var(--en-display); font-weight:600; line-height:1.15}
p{margin:0; max-width:64ch}
.eyebrow{font-size:13px; font-weight:600; color:var(--gold); letter-spacing:.06em}
html[lang="en"] .eyebrow{text-transform:uppercase; letter-spacing:.14em}

/* header */
.top{background:var(--cream); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
.top .logo img{height:62px; width:auto}
.nav{display:flex; align-items:center; gap:22px; font-size:15px; flex-wrap:wrap}
.nav a{text-decoration:none; color:var(--ink)}
.nav a:hover{color:var(--maroon)}
.nav .lang{border:1px solid var(--gold); color:var(--maroon); padding:3px 12px; border-radius:20px; font-size:13.5px}
.menu-btn{display:none}

/* hero */
.hero{background:var(--maroon); color:var(--cream); position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; padding-block:72px 80px}
.hero h1{font-size:clamp(38px,6vw,68px); color:var(--cream)}
.hero p{color:#EBDCD0; font-size:18px; margin-top:18px}
.hero .gate{justify-self:center; width:min(300px,70%)}
.hero .cta{display:inline-block; margin-top:28px; background:var(--gold); color:var(--maroon-deep); text-decoration:none; font-weight:600; padding:11px 26px; border-radius:30px}
.hero .cta:hover{background:var(--gold-soft)}
.threshold{height:10px; background:var(--gold)}

/* sections */
section{padding-block:76px}
.head{display:flex; flex-direction:column; gap:8px; margin-bottom:34px}
.head h2{font-size:clamp(30px,4vw,42px); color:var(--maroon)}
.alt{background:var(--sand)}

.about{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.about p+p{margin-top:14px}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fact{border-top:3px solid var(--gold); background:#fff; padding:18px}
.fact b{display:block; font-family:var(--ar-display); font-size:22px; color:var(--maroon)}
html[lang="en"] .fact b{font-family:var(--en-display); font-size:24px}
.fact span{font-size:14px; color:var(--muted)}

.sectors{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.sector{background:#fff; padding:22px 18px; display:flex; flex-direction:column; gap:10px; border-bottom:3px solid var(--maroon)}
.sector svg{width:34px; height:34px}
.sector h3{font-size:21px; color:var(--maroon)}
.sector p{font-size:14.5px; color:var(--muted); line-height:1.7}

.companies{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.co{grid-column:span 2}
.co:nth-child(n+4){grid-column:span 3}
.co{background:var(--cream); border:1px solid var(--line); display:flex; flex-direction:column}
.co .img{aspect-ratio:16/9; background:var(--sand) url("symbol.svg") center/56px no-repeat; overflow:hidden}
.co .img img{width:100%; height:100%; object-fit:cover}
.co .body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.co h3{font-size:22px; color:var(--maroon)}
.co .tag{font-size:12.5px; color:var(--gold); font-weight:600}
.co p{font-size:14.5px; color:var(--muted); line-height:1.75}
.co a.more{margin-top:auto; color:var(--maroon); font-weight:600; font-size:14.5px; text-decoration:none}
.co a.more:hover{text-decoration:underline}

.chair{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:start}
.chair .photo{aspect-ratio:580/450; background:var(--maroon) url("symbol.svg") center/80px no-repeat; border-bottom:8px solid var(--gold)}
.chair .photo img{width:100%; height:100%; object-fit:cover}
.chair h3{font-size:26px; color:var(--maroon)}
.chair .role{color:var(--gold); font-weight:600; margin-top:4px}
.chair ul{margin:18px 0 0; padding-inline-start:20px; display:flex; flex-direction:column; gap:6px}
.chair li::marker{color:var(--gold)}
.edu{margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.edu div{background:#fff; padding:14px; font-size:14px; line-height:1.6}
.edu b{display:block; color:var(--maroon); font-weight:600}

/* contact */
.contact{background:var(--maroon); color:var(--cream)}
.contact .head h2{color:var(--cream)}
.contact .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px}
.contact dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px}
.contact dt{color:var(--gold-soft); font-size:14px}
.contact dd{margin:0}
.contact .ltr{direction:ltr; unicode-bidi:embed; font-variant-numeric:tabular-nums}
.contact .map{display:inline-block; margin-top:22px; border:1px solid var(--gold); color:var(--gold-soft); padding:9px 20px; border-radius:30px; text-decoration:none}
.contact .map:hover{background:var(--maroon-deep)}
.contact .brand img{width:min(420px,100%)}
footer{background:var(--maroon-deep); color:#D8C5BE; font-size:13.5px}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:16px}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

@media (max-width:900px){
  .hero .wrap,.about,.chair,.contact .grid{grid-template-columns:1fr}
  .hero .gate{width:180px; grid-row:1}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .companies{grid-template-columns:1fr 1fr}
  .co,.co:nth-child(n+4){grid-column:auto}
  .co:first-child{grid-column:1/-1}
  .chair .photo{max-width:360px}
}
@media (max-width:640px){
  .top .logo img{height:48px}
  .nav{display:none; position:absolute; inset-inline:0; top:100%; background:var(--cream); flex-direction:column; align-items:stretch; padding:12px 20px; border-bottom:1px solid var(--line); gap:12px}
  .nav.open{display:flex}
  .menu-btn{display:block; background:none; border:1px solid var(--line); border-radius:6px; padding:6px 12px; font:inherit; color:var(--maroon)}
  .companies,.edu,.facts{grid-template-columns:1fr}
  section{padding-block:56px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* chairman roles with company logos */
.chair ul.roles{list-style:none; padding:0; gap:10px}
.roles li{display:flex; align-items:center; gap:14px; background:#fff; padding:10px 14px; border-inline-start:3px solid var(--gold)}
.roles .lg{flex:none; width:96px; height:40px; display:flex; align-items:center; justify-content:center; gap:6px}
.roles .lg img{max-height:40px; max-width:100%; object-fit:contain}
.roles .lg:has(img+img) img{max-width:44px}
.roles .lg:empty{background:url("symbol.svg") center/26px no-repeat}
.roles b a{color:var(--maroon); text-decoration:none}
.roles b a:hover{text-decoration:underline}
.co .img .logo-img{object-fit:contain; padding:28px; background:#fff}
@media (max-width:640px){.roles .lg{width:64px}}
/* Doha skyline in the hero, Qatar map in contact */
.hero .wrap{position:relative; z-index:1; padding-bottom:210px}
.hero .skyline{position:absolute; inset-inline:0; bottom:0; width:100%; height:200px; display:block}
.contact .brand{display:flex; justify-content:center}
.qmap{width:min(300px,100%); height:auto}
.qn{fill:#D9C38E; opacity:.45; font:700 30px var(--ar-display)}
html[lang="en"] .qn{font-family:var(--en-display)}
.qd{fill:var(--cream); font:600 16px var(--ar-body)}
@media (max-width:640px){.hero .wrap{padding-bottom:140px} .hero .skyline{height:130px}}
/* opening sequence */
.intro{position:fixed; inset:0; z-index:100; background:var(--maroon); display:grid; place-items:center; overflow:hidden; perspective:1000px; cursor:pointer; animation:i-out .8s ease 5.5s forwards}
.imap{position:absolute; height:min(72vh,600px); width:auto; animation:i-mapin 1.1s ease both, i-dive 1.7s cubic-bezier(.65,0,.3,1) 1.5s forwards}
.iland{fill:#5A0F28; fill-opacity:0; stroke:var(--gold); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:i-draw 1.3s ease .1s forwards, i-fill .6s ease 1s forwards}
.ipin{fill:var(--gold-soft); opacity:0; animation:i-fade .3s ease 1.1s forwards}
.iring{fill:none; stroke:var(--gold-soft); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center; animation:i-pulse 1s ease-out 1.2s 2}
.icenter{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 20px}
.igate{width:clamp(110px,18vw,170px); opacity:0; transform-origin:50% 100%; animation:i-gate 1.1s cubic-bezier(.2,.8,.2,1) 2.7s forwards}
.ibar{opacity:0; transform:translateY(-26px); animation:i-bar .6s cubic-bezier(.3,1.4,.5,1) 3.4s forwards}
.iname{color:var(--gold-soft); font-size:15px; letter-spacing:.08em; opacity:0; animation:i-up .7s ease 3.7s forwards}
.itag{color:var(--cream); font-family:var(--ar-display); font-weight:700; font-size:clamp(30px,5vw,54px); line-height:1.3; opacity:0; animation:i-up .8s ease 3.9s forwards}
html[lang="en"] .itag{font-family:var(--en-display); font-weight:600}
.isky{position:absolute; inset-inline:0; bottom:0; transform:translateY(100%); animation:i-rise 1.2s cubic-bezier(.2,.8,.2,1) 2.8s forwards}
.isky .skyline{width:100%; height:clamp(120px,24vh,220px); display:block}
.iskip{position:absolute; top:18px; inset-inline-end:18px; background:none; border:1px solid rgba(217,195,142,.5); color:var(--gold-soft); border-radius:20px; padding:4px 14px; font:inherit; font-size:13px; cursor:pointer}
@keyframes i-mapin{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:none}}
@keyframes i-dive{to{opacity:0; transform:rotateX(58deg) scale(7)}}
@keyframes i-draw{to{stroke-dashoffset:0}}
@keyframes i-fill{to{fill-opacity:1}}
@keyframes i-fade{to{opacity:1}}
@keyframes i-pulse{from{opacity:.9; transform:scale(.4)}to{opacity:0; transform:scale(2.4)}}
@keyframes i-gate{from{opacity:0; transform:rotateX(75deg) scale(.5)}to{opacity:1; transform:none}}
@keyframes i-bar{to{opacity:1; transform:none}}
@keyframes i-up{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes i-rise{to{transform:none}}
@keyframes i-out{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
/* subsidiaries and distributed brands */
.brands{padding-bottom:64px}
.brands h3.sub{font-size:20px; color:var(--maroon); margin:8px 0 18px}
html[lang="en"] .brands h3.sub{font-size:22px}
.logo-grid{list-style:none; margin:0 0 44px; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
.logo-grid li{background:#fff; border:1px solid var(--line); height:88px; display:flex; align-items:center; justify-content:center; padding:14px}
.logo-grid img{max-height:100%; max-width:100%; object-fit:contain}
.marquee{overflow:hidden; direction:ltr; border-block:1px solid var(--line); background:#fff; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{list-style:none; margin:0; padding:18px 0; display:flex; width:max-content; animation:marq 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track li{flex:none; width:150px; height:64px; margin:0 18px; display:flex; align-items:center; justify-content:center}
.track img{max-height:64px; max-width:150px; object-fit:contain}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(3,1fr); gap:8px} .logo-grid li{height:64px; padding:8px} .track li{width:110px; margin:0 12px} .track img{max-width:110px; max-height:48px}}
@media (prefers-reduced-motion:reduce){.track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}.track li[aria-hidden]{display:none}}
/* smaller logos */
.co .img .logo-img{width:auto; height:auto; max-width:46%; max-height:44%; padding:0; margin:auto; background:none}
.co .img:has(.logo-img){background:#fff; display:flex}
.logo-grid{grid-template-columns:repeat(7,1fr); gap:10px}
.logo-grid li{height:62px; padding:12px 16px}
.track{padding:14px 0}
.track li{width:104px; height:40px; margin:0 20px}
.track img{max-height:40px; max-width:104px}
.roles .lg{width:72px; height:30px}
.roles .lg img{max-height:30px}
@media (max-width:640px){.logo-grid li{height:52px; padding:8px 10px} .track li{width:84px; margin:0 14px} .track img{max-width:84px; max-height:32px} .roles .lg{width:52px}}
.logo-grid img{max-width:82%; max-height:80%}
.co .img:has(.logo-img){aspect-ratio:16/7}
.co .img .logo-img{max-height:56%}
.logo-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
.logo-grid{display:flex; flex-wrap:wrap; justify-content:center}
.logo-grid li{flex:0 0 calc((100% - 50px)/6)}
@media (max-width:900px){.logo-grid li{flex-basis:calc((100% - 30px)/4)}}
@media (max-width:640px){.logo-grid li{flex-basis:calc((100% - 16px)/3)}}
.logo-grid li{padding:8px 16px} .logo-grid img{max-height:100%}
/* chairman's message on Qatar */
.qatar{background:var(--maroon-deep); color:var(--cream); position:relative; overflow:hidden}
.qatar .wrap{display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center}
.qatar .head h2{color:var(--cream)}
.qatar .eyebrow{color:var(--gold-soft)}
.qatar blockquote{margin:0; position:relative; padding-inline-start:28px; border-inline-start:3px solid var(--gold)}
.qatar blockquote::before{content:"”"; position:absolute; top:-46px; inset-inline-start:-6px; font:700 110px/1 Georgia,serif; color:var(--gold); opacity:.35}
html[lang="en"] .qatar blockquote::before{content:"“"}
.qatar blockquote p{color:#EBDCD0; font-size:17px}
.qatar blockquote p+p{margin-top:14px}
.qatar blockquote footer{margin-top:22px; display:flex; flex-direction:column}
.qatar blockquote footer b{font-family:var(--ar-display); font-size:24px; color:var(--gold-soft); font-weight:700}
html[lang="en"] .qatar blockquote footer b{font-family:var(--en-display); font-size:26px; font-weight:600}
.qatar blockquote footer span{font-size:14px; color:#CDB9B2}
.qpts{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.qpts div{border:1px solid rgba(217,195,142,.35); padding:18px; display:flex; flex-direction:column; gap:6px}
.qpts b{font-family:var(--ar-display); font-size:21px; color:var(--gold-soft); font-weight:700}
html[lang="en"] .qpts b{font-family:var(--en-display); font-size:23px; font-weight:600}
.qpts span{font-size:14.5px; color:#E3D3C8; line-height:1.7}
@media (max-width:900px){.qatar .wrap{grid-template-columns:1fr}}
@media (max-width:640px){.qpts{grid-template-columns:1fr}}
/* compact logo strip on company cards */
.co .img, .co .img:has(.logo-img){aspect-ratio:auto; height:96px; background:#fff url("symbol.svg") center/30px no-repeat; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line)}
.co .img:has(img){background-image:none}
.co .img img, .co .img .logo-img{width:auto; height:auto; max-width:60%; max-height:56px; object-fit:contain; margin:0; padding:0}
.co .img:has(img), .co .img:has(.logo-img){background-image:none}
.qatar blockquote::before{top:-24px; font-size:80px; opacity:.3}