/* Shared by both hero examples: tokens, type, top bar and the page below the hero. Fonts come from fonts.css. */
:root{
  --ink:#16181A;--paper:#F3EEE4;--warm:#FBF8F2;--stone:#6f6a60;--rule:#9C978C;--olive:#5F6B4E;--gold:#B39A62;--gold-hi:#f2d27a;
  --ease:cubic-bezier(.22,.61,.36,1);--gut:24px;--max:1240px;
  --ui:"Plex","Segoe UI",system-ui,sans-serif;--serif:"Cormorant","Amiri",Georgia,serif;
}
@media(min-width:900px){:root{--gut:56px}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{background:var(--paper);color:var(--ink);font:300 17px/1.8 var(--ui);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}
html[lang=ar] .en,html[lang=en] .ar{display:none!important}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.display{font-family:"Amiri",serif;font-weight:400;line-height:1.5}
html[lang=en] .display{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.01em}

/* top bar: sits over the hero, light on dark */
.bar{position:absolute;inset:0 0 auto 0;z-index:31;display:flex;align-items:center;gap:18px;padding:18px var(--gut);color:#f4efe4}
.bar .seal{width:34px;height:40px;flex:none}
.bar .who{font:400 15px/1 var(--ui);letter-spacing:.01em;white-space:nowrap}
html[lang=en] .bar .who{font:500 14px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase}
.bar nav{margin-inline-start:auto;display:flex;gap:28px;font:400 14px/1 var(--ui)}
html[lang=en] .bar nav{font:500 13px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase}
.bar nav a{opacity:.82;transition:opacity .3s}
.bar nav a:hover{opacity:1}
.bar .lang{font:500 12px/1 var(--serif);letter-spacing:.2em;border:1px solid rgba(244,239,228,.4);border-radius:99px;padding:9px 13px;transition:background .3s,color .3s}
.bar .lang:hover{background:#f4efe4;color:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 20px;border-radius:99px;background:var(--gold);color:#16181A;font:500 14px/1 var(--ui);transition:background .3s,transform .4s var(--ease)}
html[lang=en] .cta{font:600 13px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase}
.cta:hover{background:var(--gold-hi);transform:translateY(-1px)}
@media(max-width:820px){.bar nav{display:none}.bar{gap:12px;padding:14px var(--gut)}.bar .lang{margin-inline-start:auto}}

/* reveal on scroll below the hero (the hero has its own clock) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{transform:none;transition:opacity .25s linear}}

/* page below the hero */
section.pg{padding-block:clamp(64px,9vw,128px)}
.label{font:500 12px/1 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--olive);display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,52px)}
html[lang=ar] .label{font:400 15px/1 var(--ui);letter-spacing:0}
.label::after{content:"";height:1px;width:48px;background:var(--rule);opacity:.7}
.h2{font-size:clamp(32px,4.4vw,60px);max-width:16em}
html[lang=en] .h2{font-size:clamp(38px,5vw,72px)}

/* brand wall */
.wall{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px);grid-template-columns:repeat(12,1fr)}
.tile{position:relative;overflow:hidden;border-radius:22px;color:#fff;min-height:230px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(120% 100% at 30% 20%,var(--c1),var(--c2));grid-column:span 3;isolation:isolate;transition:transform .6s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile.big{grid-column:span 6;grid-row:span 2;min-height:480px}
.tile .wm{font:400 clamp(26px,3vw,40px)/1.1 "Amiri",serif}
html[lang=en] .tile .wm{font:400 clamp(26px,3vw,40px)/1.1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.tile .tmark{height:46px;width:auto;max-width:78%;object-fit:contain;object-position:left center}
html[dir=rtl] .tile .tmark{object-position:right center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:400 12.5px/1 var(--ui);padding:7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
html[lang=en] .chip{font:500 12px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.tile .lcard{display:inline-grid;place-items:center;background:#fff;border-radius:12px;padding:8px 14px;height:64px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tile .lcard img{height:100%;width:auto;max-width:200px;object-fit:contain}
.tile .more{font:400 14px/1.6 var(--ui);opacity:.78;max-width:18em}
.tile .packs{position:absolute;inset:auto 0 -8% 0;height:62%;z-index:-1;pointer-events:none}
.tile .packs img{position:absolute;bottom:0;height:100%;width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));transition:transform .8s var(--ease)}
.tile .packs img:nth-child(1){left:50%;margin-left:-62%;transform:rotate(-9deg) translateY(4%)}
.tile .packs img:nth-child(2){left:50%;margin-left:-30%;transform:rotate(0)  translateY(-2%);z-index:2}
.tile .packs img:nth-child(3){left:50%;margin-left:2%;transform:rotate(9deg) translateY(4%)}
.tile.big:hover .packs img:nth-child(1){transform:rotate(-13deg) translate(-3%,0)}
.tile.big:hover .packs img:nth-child(2){transform:translateY(-6%)}
.tile.big:hover .packs img:nth-child(3){transform:rotate(13deg) translate(3%,0)}
.tile.ph::after{content:"";position:absolute;inset:auto -10% -30% 30%;height:70%;border-radius:50%;background:rgba(255,255,255,.06);z-index:-1}
@media(max-width:900px){.tile,.tile.big{grid-column:span 12}.tile.big{min-height:420px;grid-row:auto}.tile{min-height:190px}}

/* regions */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(22,24,26,.2)}
.reg{padding:28px 24px 34px;border-inline-end:1px solid rgba(22,24,26,.14)}
.reg:last-child{border-inline-end:0}
.reg .n{font-size:clamp(34px,4vw,54px)}
.reg ul{margin-top:18px;display:grid;gap:8px;font:400 16px/1.4 var(--ui)}
.reg li{display:flex;align-items:center;gap:12px}
.reg li .rl{height:34px;width:auto;max-width:96px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.note{margin-top:22px;color:var(--stone);font-size:14px;max-width:44em}
@media(max-width:760px){.regions{grid-template-columns:1fr}.reg{border-inline-end:0;border-bottom:1px solid rgba(22,24,26,.14)}}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);counter-reset:s}
.steps li{padding-top:22px;border-top:1px solid var(--rule)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:400 15px/1 var(--serif);letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:18px}
.steps b{display:block;font:400 clamp(24px,2.4vw,32px)/1.4 "Amiri",serif;margin-bottom:8px}
html[lang=en] .steps b{font:400 clamp(28px,2.8vw,38px)/1.15 var(--serif)}
.steps span{color:#4a4c4d;font-size:17px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* closing */
.close{background:var(--ink);color:#f1ebdd;text-align:center;padding-block:clamp(72px,10vw,140px)}
.close .h2{margin-inline:auto}
.close .cta{margin-top:34px;min-height:52px;padding:0 34px;font-size:16px}
footer.ft{background:#101214;color:#9c978c;padding:26px var(--gut);font:300 13.5px/1.6 var(--ui);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}