@font-face{font-family:'DM Mono';src:url('../assets/fonts/DMMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/fonts/Manrope-Semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/fonts/Manrope-Extrabold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Noto Arabic';src:url('../assets/fonts/NotoSansArabic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Arabic';src:url('../assets/fonts/NotoSansArabic-Bold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{--story-ink:#080d12;--story-text:#f4f3ee;--story-soft:#d2d8dc;--story-accent:#cadfde;--story-pad:clamp(24px,5vw,100px);--story-ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:110px;overflow-x:clip}
body{margin:0;color:var(--story-text);background:var(--story-ink);font-family:Manrope,'Noto Arabic',sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
html[lang=en] .project-language[lang=ar],html[lang=ar] .project-language[lang=en]{display:none!important}
html[lang=ar] body{font-family:'Noto Arabic',Manrope,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #e0efed;outline-offset:7px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
::selection{background:#d9e5e3;color:#080d12}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-skip{position:fixed;z-index:100;inset:12px auto auto 20px;padding:10px 18px;background:#fff;color:#111;transform:translateY(-180%)}.story-skip:focus{transform:none}
.story-world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:var(--story-ink);z-index:0}
.project-story main{position:relative;z-index:1}
.story-film{position:absolute;inset:0;transform-origin:center}
.story-film img,.story-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:var(--film-aspect)}
.story-film video{opacity:0;transition:opacity .6s}.story-video-ready .story-film video{opacity:1}
.story-fit-full .story-film img,.story-fit-full .story-film video{object-fit:contain}
.story-fit-full .story-film{transform:none!important}
.story-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,14,.56),rgba(5,9,14,.30) 35%,rgba(5,9,14,.62) 100%)}
.story-scrim{background-color:rgba(5,9,14,.14)}
.story-header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:100px;padding:20px var(--story-pad);background:linear-gradient(#080d12ed,#080d129c 65%,transparent)}
.story-back{display:flex;align-items:center;gap:14px;font-size:14px;white-space:nowrap}.story-back svg{width:20px}
.story-owner{font-size:15px;letter-spacing:-.02em}.story-tools{display:flex;gap:23px;align-items:center}
.story-tools button{display:flex;gap:8px;align-items:center;font-size:12px;padding:8px 0;min-height:44px;white-space:nowrap}.story-tools svg{width:16px;height:16px}
.story-opening{position:relative;min-height:110svh}
.story-opening .story-slide-surface{padding:clamp(155px,21svh,240px) var(--story-pad) 150px;display:flex;flex-direction:column;justify-content:center}
.opening-copy{width:100%}
.story-opening h1{font-size:clamp(68px,11.5vw,184px);line-height:1.02;font-weight:400;max-width:1200px;overflow-wrap:normal}
.opening-line{font-size:clamp(30px,3.4vw,55px);line-height:1.15;letter-spacing:-.035em;margin-top:30px;max-width:800px;text-wrap:balance}
.opening-intro{display:grid;grid-template-columns:minmax(0,660px) auto;justify-content:space-between;align-items:end;gap:40px;margin-top:60px}
.opening-intro>p{font-size:18px;line-height:1.8;color:#edf0f0;max-width:65ch}
.opening-intro>a{display:flex;justify-content:space-between;gap:50px;align-items:center;padding-bottom:12px;border-bottom:1px solid #b5c0c5;font-size:14px}
.opening-scope{display:flex;justify-content:space-between;gap:30px;margin-top:65px;padding-top:22px;border-top:1px solid #e2e8eb50;font-size:12px;color:#d5dde0}
.opening-scope>span{max-width:45%;text-align:end}
.story-chapter{min-height:105svh;position:relative;scroll-margin-top:25px}
.story-chapter .story-slide-surface{padding:150px var(--story-pad) 180px}
.chapter-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10vw;align-items:start;max-width:1600px;margin:auto}
.chapter-heading{position:sticky;top:160px}
.chapter-heading h2{font-size:clamp(40px,4.8vw,76px);max-width:650px;line-height:1.13}
.chapter-copy{min-width:0;max-width:760px}
.story-paragraph{font-size:clamp(16px,1.3vw,20px);line-height:1.9;color:#edf0f1;overflow-wrap:anywhere}
.story-paragraph+.story-paragraph{margin-top:35px}
.story-facts{margin:50px 0 0}
.story-facts>div{display:flex;flex-direction:column-reverse;padding:24px 0;border-top:1px solid #afbcc454;gap:8px}
.story-facts dd{margin:0;font-size:clamp(34px,3.4vw,56px);font-weight:400;line-height:1.16;letter-spacing:-.025em;text-align:start}
.story-facts dt{font-size:14px;line-height:1.7;color:#dce1e3;max-width:500px}
.story-decision{margin-top:65px}.story-decision h3,.story-tech h3{font-size:14px;letter-spacing:0;font-weight:400;line-height:1.7;color:#ccd4d8;margin-bottom:20px}
.story-decision blockquote{font-size:clamp(25px,2.5vw,39px);line-height:1.45;letter-spacing:-.025em;margin:0;font-weight:400;overflow-wrap:anywhere}
.story-tech{margin-top:55px}.story-tech ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.8;color:#dce4e5}
.story-evidence{font-size:14px;line-height:1.8;margin-top:30px;color:#e1e6e7}
.story-ending{position:relative;z-index:6;padding:120px var(--story-pad) 175px;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(transparent,#080d12 90%)}
.ending-note{max-width:740px;color:#c2cdd2;font-size:14px;line-height:1.8;margin-bottom:75px}
.next-project{display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;padding-bottom:35px;border-bottom:1px solid #c2cdd260}
.next-project>span{font-size:14px;grid-column:1}.next-project strong{grid-column:1;font-size:clamp(44px,7.8vw,120px);font-weight:400;letter-spacing:-.035em;line-height:1.12;min-width:0}
.next-project>svg{grid-column:2;grid-row:1/3;width:clamp(45px,7vw,110px);height:clamp(45px,7vw,110px)}
.ending-contact{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:48px;font-size:14px}
.ending-contact>a:first-child{display:flex;align-items:center;gap:30px}
.story-ruler{position:fixed;inset:auto var(--story-pad) 20px;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#080d12e8;box-shadow:0 12px 35px #0006}
.story-ruler a{position:relative;min-height:68px;padding:13px 15px 16px;display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:#c0cbd0}
.ruler-number{font-size:12px;line-height:1.5;color:#98a9b1;direction:ltr}
.story-ruler a>i{position:absolute;inset:auto 0 0;height:2px;transform:scaleX(0);transform-origin:left;background:#d7e9e6}
.story-ruler a[aria-current]{color:#fff}.story-ruler a[aria-current] .ruler-number{color:#e4f1ee}
.story-ruler a:hover,.story-ruler a:focus-visible{background:#1d2b32}
.media-status{position:fixed;bottom:105px;right:var(--story-pad);max-width:360px;font-size:12px;z-index:21;background:#080d12de}.media-status:not(:empty){padding:10px 15px}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] .opening-line,html[lang=ar] .next-project strong{letter-spacing:0;line-height:1.4}
html[lang=ar] .story-opening h1{font-size:clamp(60px,8.5vw,135px)}
html[lang=ar] .chapter-heading h2{font-size:clamp(36px,4vw,63px)}
html[lang=ar] .story-decision blockquote{letter-spacing:0;line-height:1.8}
html[lang=ar] .story-facts dd{text-align:right}
html[lang=ar] .story-ruler a>i{transform-origin:right}
html[lang=ar] .story-back svg{transform:rotate(180deg)}
@media(max-width:1000px){.story-owner{display:none}.chapter-layout{gap:6vw;grid-template-columns:.85fr 1.15fr}.story-ruler a{font-size:13px;padding-inline:10px;gap:6px}.opening-intro{grid-template-columns:1fr;gap:30px}.opening-intro>a{width:max-content;max-width:100%}}
@media(max-width:700px){
 html{scroll-padding-top:100px}.story-header{min-height:86px;padding:16px 22px;gap:18px;align-items:flex-start}
 .story-back{font-size:12px;gap:7px;min-height:40px}.story-tools{gap:15px;justify-content:flex-end;flex-wrap:wrap;max-width:210px;row-gap:0}
 .story-tools button{font-size:12px;min-height:44px;padding:5px 0}.story-tools svg{width:13px;height:13px}
 .story-opening .story-slide-surface{padding-top:150px;padding-bottom:125px}
 .story-opening h1{font-size:clamp(53px,13vw,90px);line-height:1.08;overflow-wrap:anywhere}
 .opening-line{font-size:clamp(27px,7vw,39px);margin-top:25px}.opening-intro{margin-top:35px}.opening-intro>p{font-size:16px;line-height:1.85}
 .opening-scope{display:block;margin-top:38px;font-size:12px}.opening-scope>span{display:block;text-align:start;max-width:none;margin-top:12px}
 .story-chapter{min-height:100svh}.story-chapter .story-slide-surface{padding-top:100px;padding-bottom:120px}.chapter-layout{display:block}.chapter-heading{position:relative;top:auto;margin-bottom:45px}.chapter-heading h2{font-size:clamp(34px,9vw,53px)}
 .story-paragraph{font-size:16px}.story-paragraph+.story-paragraph{margin-top:28px}.story-facts{margin-top:35px}.story-facts dd{font-size:38px}
 .story-decision{margin-top:45px}.story-decision blockquote{font-size:25px}.story-tech{margin-top:38px}
 .story-ending{padding-top:75px;padding-bottom:135px}.ending-note{margin-bottom:50px}.next-project strong{font-size:clamp(37px,10vw,60px)}.next-project{gap:18px}.next-project>svg{width:40px;height:40px}
 .ending-contact{flex-direction:column;align-items:flex-start;gap:25px;font-size:13px}
 .story-ruler{inset:auto 18px 15px;grid-template-columns:repeat(5,1fr)}.story-ruler a{min-height:50px;justify-content:center;align-items:center;padding:12px 0}.story-ruler a>.project-language{display:none!important}.ruler-number{font-size:13px}
 .media-status{bottom:80px;max-width:280px;right:22px}
 html[lang=ar] .story-opening h1{font-size:clamp(44px,11vw,76px);line-height:1.55}
 html[lang=ar] .chapter-heading h2{font-size:clamp(32px,8vw,50px)}
 html[lang=ar] .story-decision blockquote{font-size:23px}
}
@media(max-height:550px){.story-header{min-height:70px;padding-block:10px}.story-opening .story-slide-surface{padding-top:120px}.story-ruler{bottom:10px}.story-ruler a{min-height:45px;padding-block:8px}.media-status{bottom:70px}}
@media(min-width:701px) and (max-height:550px){.chapter-heading{top:110px}}
@media(prefers-reduced-motion:reduce){.story-film video{transition:none}}
html.motion-paused .story-film{transform:none!important}
@media print{.story-world,.story-header,.story-ruler,.story-tools,.pointer-light{display:none}body{background:#fff;color:#000}.story-opening,.story-chapter,.story-ending{min-height:0;padding:30px 0}.chapter-layout{display:block}.chapter-heading{position:static}.chapter-copy,.story-paragraph,.story-facts dt,.story-tech ul,.story-evidence,.ending-note{color:#000}.story-opening h1{font-size:40px}.chapter-heading h2{font-size:26px;margin-bottom:20px}.next-project strong{font-size:32px}}

/* Native-height panels retain all the prose before the supplied pinned exit. */
.story-slide-pin,.story-slide-surface{position:relative;width:100%}
.story-slide-surface{overflow:clip}
.story-opening .story-slide-pin,.story-opening .story-slide-surface{min-height:110svh}
.story-chapter .story-slide-pin,.story-chapter .story-slide-surface{min-height:105svh}
.story-slide-pin{isolation:isolate}
.story-slides-on .story-chapter .story-slide-surface{background:linear-gradient(180deg,rgba(5,9,14,0),rgba(5,9,14,.18) 120px,rgba(5,9,14,.18) calc(100% - 120px),rgba(5,9,14,0))}
.story-typewriter{position:relative;font-family:'DM Mono',monospace;font-size:clamp(25px,3vw,46px);line-height:1.4;letter-spacing:-.045em}
.story-typewriter-static{display:block;padding-inline-end:.75em}.story-typewriter-ink{display:none;position:absolute;inset:0}
.story-typewriter.is-typing .story-typewriter-static{opacity:0}
.story-typewriter.is-typing .story-typewriter-ink{display:block}
.typewriter-cursor{display:inline;color:#cadfde;margin-inline-start:.08em}
html[lang=ar] .story-typewriter{font-family:'Noto Arabic',sans-serif;letter-spacing:0;line-height:1.65}
@media(max-width:700px){.story-chapter .story-slide-pin,.story-chapter .story-slide-surface{min-height:100svh}.story-typewriter{font-size:clamp(23px,5.8vw,34px)}}
@media print{.story-slide-pin,.story-slide-surface{min-height:0!important;transform:none!important;opacity:1!important}.story-opening .story-slide-surface,.story-chapter .story-slide-surface{padding:30px 0}.story-typewriter-ink{display:none!important}.story-typewriter-static{opacity:1!important}}