/* Direction C · Blocks: colour tiles on a bento grid, condensed heavy type */
:root{
  --cobalt:#2B36D9; --cobalt-soft:#DDE0FF; --pink:#FF8FC7; --butter:#FFE173; --mint:#9EE8C8;
  --ink:#14141A; --ink-2:#4A4A55; --paper:#FFFFFF; --mist:#F3F3F6; --bg:#E7EAFB;
  --display:"Archivo",system-ui,sans-serif; --text:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --max:1320px; --gut:clamp(16px,3vw,40px); --r:28px;
}
:root[lang="ar"]{
  --display:"Readex Pro","Archivo",system-ui,sans-serif; --text:"IBM Plex Sans Arabic","Archivo Narrow",system-ui,sans-serif;
}
*{box-sizing:border-box}
:root[lang="ar"] .only-en,:root:not([lang="ar"]) .only-ar{display:none !important}
html{-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 0% 0%,#C9CFFF 0%,transparent 70%),radial-gradient(55% 45% at 100% 30%,#FFD3EA 0%,transparent 70%),radial-gradient(60% 55% at 20% 100%,#CDF3E3 0%,transparent 70%),linear-gradient(160deg,#E4E8FF 0%,#F3E6F6 50%,#E6F6EF 100%)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.5}
:root[lang="ar"] body{line-height:1.8;font-size:17px}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.skip{position:absolute;top:-100px;inset-inline-start:16px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;z-index:30;text-decoration:none}
.skip:focus{top:16px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
:root[dir="rtl"] .arr{display:inline-block;transform:scaleX(-1)}

/* Header */
.site-head{position:sticky;top:0;z-index:20;padding-block:12px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border-radius:999px;padding-block:8px;padding-inline:20px 8px;box-shadow:0 8px 28px rgba(43,54,217,.14)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:24px;text-decoration:none;letter-spacing:-.02em;font-stretch:80%;min-height:44px;font-family:"Archivo",system-ui,sans-serif}
.mark{width:36px;height:36px;border-radius:12px;background:var(--cobalt);color:var(--butter);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:18px;font-stretch:80%}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{font-family:var(--display);font-weight:500;font-size:15px;text-decoration:none;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px}
.nav a:hover{background:var(--bg)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.bar-end{display:flex;align-items:center;gap:6px}
.lang{font-family:var(--display);font-weight:500;font-size:15px;text-decoration:none;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;border:2px solid var(--bg)}
.lang:hover{background:var(--bg)}
.bar .btn{min-height:44px;padding:0 20px;font-size:15px}
.bar .btn:hover{background:var(--pink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--display);font-weight:500;font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:grid;gap:4px;width:16px}
.menu summary i::before,.menu summary i::after{content:"";height:2px;border-radius:2px;background:currentColor}
.menu[open] summary{background:var(--cobalt)}
.menu-panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:var(--paper);border-radius:22px;box-shadow:0 16px 40px rgba(20,20,26,.18);padding:8px;display:grid;gap:2px;min-width:220px}
.menu-panel a{min-height:52px;display:flex;align-items:center;padding:0 18px;border-radius:16px;text-decoration:none;font-family:var(--display);font-weight:500;font-size:18px}
.menu-panel a:hover,.menu-panel a[aria-current="page"]{background:var(--bg)}
.menu-panel .btn{justify-content:center;margin-top:6px;font-weight:800}
@media (max-width:860px){.links,.bar-end > .btn{display:none}.menu{display:block}}
.bar{min-width:0}
.logo{min-width:0;flex-shrink:1}
.logo > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{flex:none}
.bar-end{flex:none}
@media (max-width:600px){
  .site-head{padding-block:10px}
  .bar{padding-block:6px;padding-inline:12px 6px;gap:8px}
  .logo{font-size:20px;gap:8px}
  .mark{width:32px;height:32px;border-radius:10px;font-size:16px}
  .lang{padding:0 12px;font-size:14px}
  .menu summary{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
  .menu summary i{width:18px}
  .menu-panel{max-width:calc(100vw - 32px)}
}

/* Tiles */
.tile{border-radius:var(--r);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden}
.t-cobalt{background:var(--cobalt);color:var(--paper)}
.t-pink{background:var(--pink)}
.t-butter{background:var(--butter)}
.t-mint{background:var(--mint)}
.t-ink{background:var(--ink);color:var(--paper)}
.t-photo{padding:0;min-height:240px;background:var(--ink)}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{position:absolute;left:16px;bottom:16px;right:16px;display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;align-self:flex-start;font-family:var(--display);font-weight:500;font-size:14px;padding:6px 14px;border-radius:999px;background:rgba(20,20,26,.1)}
.t-cobalt .chip,.t-ink .chip{background:rgba(255,255,255,.16)}
.t-photo .chip{background:var(--paper);color:var(--ink)}

/* Home hero */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.t-hero{grid-column:span 4;min-height:520px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.t-hero h1{font-family:var(--display);font-weight:900;font-stretch:72%;font-size:clamp(56px,8.6vw,132px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin:0}
:root[lang="ar"] .t-hero h1{font-weight:700;font-size:clamp(44px,6.4vw,96px);line-height:1.2;letter-spacing:0}
.t-hero h1 em{font-style:normal;color:var(--butter)}
.t-hero h1.fit{font-size:clamp(44px,6.4vw,96px);overflow-wrap:anywhere}
:root[lang="ar"] .t-hero h1.fit{font-size:clamp(40px,5.4vw,80px)}
.t-hero p{max-width:46ch;margin:28px 0 0;font-size:19px;color:var(--cobalt-soft)}
.t-side{grid-column:span 2;display:grid;gap:12px;grid-template-rows:3fr 2fr}
.big{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:clamp(34px,3.6vw,52px);line-height:.95;letter-spacing:-.02em;margin:12px 0 0}
:root[lang="ar"] .big{font-weight:700;line-height:1.25;letter-spacing:0;font-size:clamp(28px,3vw,42px)}
.small{font-size:16px;margin:10px 0 0}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--butter);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:800;font-size:17px;border:0;cursor:pointer}
.btn:hover{background:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--cobalt)}
.line-link{font-family:var(--display);font-weight:500;text-decoration:none;border-bottom:2px solid currentColor;min-height:36px;display:inline-flex;align-items:center}

/* Section heads */
h2{font-family:var(--display);font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(44px,6vw,88px);line-height:.9;letter-spacing:-.01em;margin:0}
:root[lang="ar"] h2{font-weight:700;line-height:1.25;letter-spacing:0;font-size:clamp(36px,4.6vw,64px)}
.sec{margin-top:96px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}

/* Post cards (views) */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.posts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.posts > .post{text-decoration:none;display:flex;flex-direction:column;gap:16px;min-height:300px;justify-content:space-between;transition:transform .2s;border-radius:var(--r);padding:clamp(20px,2.4vw,32px);background:var(--mint)}
.posts > .post:nth-child(4n+2){background:var(--ink);color:var(--paper)}
.posts > .post:nth-child(4n+3){background:var(--butter)}
.posts > .post:nth-child(4n){background:var(--pink)}
.posts > .post:hover{transform:translateY(-4px)}
.post-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.post-img:not([src]),.post-img[src=""]{display:none}
.post h3{font-family:var(--display);font-weight:800;font-stretch:85%;font-size:clamp(26px,2.8vw,40px);line-height:1.02;letter-spacing:-.02em;margin:0}
:root[lang="ar"] .post h3{font-weight:700;line-height:1.35;letter-spacing:0;font-size:clamp(22px,2.4vw,32px)}
.post p{margin:0;opacity:.8}
.post .row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:15px}
.round{flex:none;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:22px}
.posts > .post:nth-child(4n+2) .round{background:var(--pink);color:var(--ink)}
.empty{padding:28px 0;color:var(--ink-2)}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pager a{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:2px solid var(--ink);border-radius:999px;text-decoration:none;font-family:var(--display);font-weight:500}
.pager a[aria-current="page"]{background:var(--ink);color:var(--paper)}

/* Projects */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trio .tile{min-height:280px;display:flex;flex-direction:column}
.trio .proj-img{width:calc(100% + 2*clamp(24px,3vw,40px));max-width:none;margin:calc(-1*clamp(24px,3vw,40px)) calc(-1*clamp(24px,3vw,40px)) 24px;aspect-ratio:16/10;object-fit:cover}
.trio h3{font-family:var(--display);font-weight:800;font-stretch:85%;font-size:40px;line-height:1;margin:16px 0 12px}
:root[lang="ar"] .trio h3{font-weight:700;line-height:1.3}
.trio p{margin:0;flex:1}
.trio .go{font-family:var(--display);font-weight:800;text-decoration:none;margin-top:20px;display:inline-flex;min-height:32px;align-items:center}
.duo{display:grid;grid-template-columns:3fr 2fr;gap:12px;margin-top:12px}
.duo .t-photo{min-height:420px}
.duo .tile:not(.t-photo){display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.marquee{margin:12px 0 0;border-radius:var(--r);border:2px solid var(--ink);padding:20px 28px;display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--display);font-weight:800;font-stretch:85%;font-size:clamp(20px,2.2vw,28px);list-style:none}
.marquee .lead{color:var(--cobalt)}
.marquee a{text-decoration:none}
.marquee a:hover{color:var(--cobalt)}
.band{margin-top:96px;min-height:min(56vw,520px)}

/* Contact */
.contact{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.contact h2 em{font-style:normal;color:var(--pink)}
.contact .intro{color:#C8C8D2;margin:20px 0 0;max-width:40ch}
.contact .mail{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);overflow-wrap:anywhere;display:block;margin-top:24px;text-decoration:none}
.form{display:grid;gap:16px}
.field label{display:block;font-family:var(--display);font-size:15px;font-weight:500;margin-bottom:8px}
.field input,.field textarea{width:100%;min-height:52px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);color:var(--paper);border-radius:16px;padding:14px 16px;font:inherit}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--butter);outline:none}
.form .btn{justify-self:start}

/* Inner pages */
.page-hero{min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;gap:20px}
.page-hero h1{font-family:var(--display);font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(52px,8vw,120px);line-height:.88;letter-spacing:-.02em;margin:0;max-width:16ch}
:root[lang="ar"] .page-hero h1{font-weight:700;line-height:1.2;letter-spacing:0;font-size:clamp(40px,6vw,88px)}
.page-hero p{margin:0;max-width:56ch;font-size:19px;color:var(--cobalt-soft)}
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px;margin-top:12px}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts li{border-radius:var(--r);padding:24px 28px;background:var(--paper)}
.facts li:nth-child(1){background:var(--butter)}
.facts li:nth-child(2){background:var(--pink)}
.facts li:nth-child(3){background:var(--mint)}
.facts span{display:block;font-family:var(--display);font-size:14px;font-weight:500;opacity:.7}
.facts b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.2}
:root[lang="ar"] .facts b{font-weight:700}
.prose{max-width:66ch;font-size:19px}
.prose p{margin:0 0 1.2em}
.prose h2{font-size:clamp(32px,3.6vw,48px);margin:1.6em 0 .5em}
.prose h3{font-family:var(--display);font-weight:800;font-size:26px;margin:1.6em 0 .5em}
.prose a{color:var(--cobalt);font-weight:600}
.prose ul,.prose ol{padding-inline-start:1.2em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.6em 0;padding:20px 24px;border-radius:20px;background:var(--butter)}
.prose code{background:var(--mist);border-radius:6px;padding:1px 6px;font-size:.9em}
.prose pre{background:var(--ink);color:var(--paper);border-radius:20px;padding:20px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose img{border-radius:20px;margin:1.6em 0}
.prose-tile{background:var(--paper)}
.article-body .prose{background:var(--paper);border-radius:var(--r);padding:clamp(24px,4vw,56px);max-width:860px;width:100%}

/* Article */
.article-hero{min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.article-hero h1{font-family:var(--display);font-weight:900;font-stretch:75%;font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-.02em;margin:0;max-width:20ch;text-transform:uppercase}
:root[lang="ar"] .article-hero h1{text-transform:none;font-weight:700;line-height:1.3;letter-spacing:0;font-size:clamp(32px,4.4vw,64px)}
.article-hero .summary{margin:20px 0 0;max-width:60ch;font-size:20px;color:var(--cobalt-soft)}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.cover{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r);margin-top:12px}
.cover:not([src]),.cover[src=""]{display:none}
.article-body{padding:clamp(32px,5vw,72px) 0;display:flex;justify-content:center}
.back{font-family:var(--display);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* Thanks */
.thanks{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.thanks .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
.site-foot{margin-top:72px;padding-bottom:16px}
.foot{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}
.foot .logo{color:var(--paper)}
.foot-brand p{color:#C8C8D2;margin:16px 0 24px;max-width:34ch}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h3{font-family:var(--display);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--butter);margin:0 0 12px}
:root[lang="ar"] .foot-cols h3{text-transform:none;letter-spacing:0;font-size:15px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot-cols a{text-decoration:none;min-height:36px;display:inline-flex;align-items:center;font-family:var(--display);font-weight:500;overflow-wrap:anywhere}
.foot-cols a:hover,.foot-bottom a:hover{color:var(--pink)}
.foot-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:20px;font-size:15px;color:#C8C8D2}
.foot-bottom a{text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
@media (max-width:960px){.foot{grid-template-columns:1fr}}
@media (max-width:600px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols > div:last-child{grid-column:1/-1}}

@media (max-width:960px){
  .t-hero,.t-side{grid-column:1/-1}
  .t-hero{min-height:0}
  .t-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .posts,.posts.three,.trio,.contact,.duo,.about{grid-template-columns:1fr}
  .posts > .post,.trio .tile{min-height:0}
  .duo .t-photo{min-height:300px}
}
@media (max-width:600px){
  .nav li.hide-sm{display:none}
  .t-side{grid-template-columns:1fr}
  .sec,.band{margin-top:64px}
}
/* Story and motion (home page, added by js/home.js) */
.t-hero{position:relative;isolation:isolate}
.t-hero > :not(.particles){position:relative;z-index:1}
.particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ch{display:block;font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:12px}
:root[lang="ar"] .ch{letter-spacing:0;text-transform:none;font-size:15px}
.ch-on-photo{position:absolute;top:16px;inset-inline-start:16px;z-index:2;background:var(--paper);padding:6px 14px;border-radius:999px;margin:0}
.contact .ch,.story .ch{color:var(--butter)}
.story-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:40;background:linear-gradient(90deg,var(--cobalt),var(--pink),var(--butter));transform:scaleX(0);transform-origin:left center}
:root[dir="rtl"] .story-progress{transform-origin:right center;background:linear-gradient(270deg,var(--cobalt),var(--pink),var(--butter))}
.story-rail{position:fixed;top:50%;inset-inline-end:18px;transform:translateY(-50%);z-index:15;display:grid;gap:6px;padding:10px 6px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 8px 28px rgba(43,54,217,.14)}
.story-rail a{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;text-decoration:none}
.story-rail a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.25;transition:all .3s}
.story-rail a.on::before{width:12px;height:12px;background:var(--cobalt);opacity:1;box-shadow:0 0 0 4px rgba(43,54,217,.18)}
.story-rail a:hover::before{opacity:.7}
.story-rail span{position:absolute;inset-inline-end:42px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:500;font-size:13px;padding:5px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s}
.story-rail a:hover span,.story-rail a:focus-visible span{opacity:1}
@media (max-width:1460px){.story-rail{display:none}}
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(255,143,199,.38) 0%,rgba(43,54,217,.14) 42%,transparent 70%);opacity:0;transition:opacity .6s;will-change:transform}
.cursor-glow.on{opacity:1}
html.anim .reveal{opacity:0;transform:translateY(48px) scale(.97);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.anim .reveal.in{opacity:1;transform:none}
html.anim .tilt.in{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity 1s;transition-delay:0s}
html.anim .tilt.hovering{transition:transform .12s linear}
.tilt{transform-style:preserve-3d;will-change:transform}
.shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.32),transparent 45%);opacity:0;transition:opacity .3s}
.tilt.hovering .shine{opacity:1}
.magnet{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s}
html.anim .t-photo img{transform:translate3d(0,var(--py,0),0) scale(1.14);transition:transform .2s linear}
html.anim .t-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
html.anim .t-hero h1 .w > span{display:inline-block;transform:translateY(110%) rotate(4deg);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
html.anim.loaded .t-hero h1 .w > span{transform:none}
/* Pinned story chapter */
body{overflow-x:clip}
.story{margin-top:96px}
.story-stage{min-height:560px;display:grid;align-items:end;isolation:isolate}
.story-canvas{display:none}
.story-copy{position:relative;z-index:2;max-width:640px}
.story-copy h2{font-size:clamp(34px,4vw,56px)}
.story-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.story-steps li{display:flex;gap:16px;align-items:baseline}
.story-steps .n{flex:none;font-family:var(--display);font-weight:500;font-size:14px;color:var(--butter);font-variant-numeric:tabular-nums}
.story-steps p{margin:0;font-family:var(--display);font-weight:800;font-stretch:85%;font-size:clamp(24px,2.8vw,40px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
:root[lang="ar"] .story-steps p{font-weight:700;line-height:1.45;letter-spacing:0;font-size:clamp(22px,2.4vw,34px)}
.story-meter{display:none}
html.story-on .story{height:560vh}
html.story-on .story-stage{position:sticky;top:96px;height:calc(100vh - 112px);height:calc(100svh - 112px);min-height:520px}
html.story-on .story-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0}
html.story-on .story-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(to top,rgba(20,20,26,.92),rgba(20,20,26,0));z-index:1;pointer-events:none}
html.story-on .story-steps{display:block;position:relative;min-height:6.5em}
:root[lang="ar"].story-on .story-steps{min-height:7.5em}
html.story-on .story-steps li{position:absolute;inset-inline:0;bottom:0;opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
html.story-on .story-steps li.on{opacity:1;transform:none;filter:none}
html.story-on .story-meter{display:block;position:absolute;top:40px;bottom:40px;inset-inline-end:32px;width:3px;border-radius:3px;background:rgba(255,255,255,.14);z-index:2;overflow:hidden}
.story-meter i{display:block;width:100%;height:100%;background:linear-gradient(var(--butter),var(--pink));transform-origin:top;transform:scaleY(var(--sp,0))}
@media (max-width:760px){html.story-on .story-meter{inset-inline-end:16px}}

/* Keyword ticker */
.ticker{margin-top:96px;background:var(--butter);border-radius:var(--r);padding-block:22px;overflow:hidden;transform:rotate(-1.6deg);direction:ltr}
.ticker-track{display:flex;width:max-content;gap:40px;align-items:center;animation:tick 40s linear infinite;will-change:transform}
.ticker-track span{font-family:"Archivo",system-ui,sans-serif;font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:40px}
.ticker-track span::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--cobalt)}
.ticker-track span:nth-child(3n)::after{background:var(--pink)}
.ticker-track span:nth-child(3n+1)::after{border-radius:4px;transform:rotate(45deg)}
.ticker-track .ar{font-family:"Readex Pro",sans-serif;font-weight:700}
@keyframes tick{to{transform:translateX(-50%)}}

/* Hero depth */
html.anim .t-hero > .chip{translate:calc(var(--hx,0) * -18px) calc(var(--hy,0) * -12px)}
html.anim .t-hero h1{translate:calc(var(--hx,0) * 16px) calc(var(--hy,0) * 10px);transition:translate .5s cubic-bezier(.2,.7,.2,1)}
html.anim .t-hero p{translate:calc(var(--hx,0) * -8px) calc(var(--hy,0) * -6px)}
html.anim .t-hero > .chip.in,html.anim .t-hero p.in{transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1),translate .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s),var(--d,0s),0s}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}