@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSans-400.woff2) format('woff2')}
:root{--field:#0E0F0F;--line:#CFC7B8;--ink:#CFC7B8;--ink-quiet:rgba(207,199,184,.66)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--field);color:var(--ink)}
body{overflow:hidden;-webkit-text-size-adjust:100%;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scene{position:fixed;inset:0;overflow:hidden;
  --s:min(calc(60vw / 1163),calc(64vh / 700));
  --stage-x:33vw;--stage-y:8vh;--fade0:60vh;--fade1:72vh;
  --mark-w:clamp(120px,10vw,186px);--mark-x:12.5vw;
  --mark-base:calc(var(--stage-y) + 422.901 * var(--s))}
@media (orientation:portrait){
  .scene{--vh:1vh}
}
@supports (height:1svh){@media (orientation:portrait){.scene{--vh:1svh}}}
@media (orientation:portrait){
  .scene{--s:min(calc(85vw / 500),calc(47 * var(--vh) / 600));
    --stage-x:calc(7.5vw - 105 * var(--s));--stage-y:calc(7 * var(--vh));--fade0:calc(49 * var(--vh));--fade1:calc(56 * var(--vh));
    --mark-w:clamp(104px,31vw,170px);--mark-h:calc(var(--mark-w) * .2426);--mark-x:calc(var(--stage-x) + 164.45 * var(--s));
    --mark-base:calc(var(--fade1) + 6.5 * var(--vh) + var(--mark-h));
    --copy-top:calc(var(--mark-base) + 3.3 * var(--vh));
    --nodes-top:calc(var(--copy-top) + 27px + 5.4 * var(--vh))}
}
.stage{position:absolute;left:var(--stage-x);top:var(--stage-y);width:calc(1198 * var(--s));height:calc(1313 * var(--s));pointer-events:none;will-change:transform}
.dissolve{position:absolute;left:0;right:0;top:var(--fade0);bottom:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,15,15,0) 0,var(--field) calc(var(--fade1) - var(--fade0)),var(--field) 100%)}
.stage svg,.stage .plate{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.fade-guide{position:absolute;left:0;width:1px;top:var(--fade0);height:calc(var(--fade1) - var(--fade0));pointer-events:none;visibility:hidden}
#light{position:absolute;inset:0;width:0;height:0;display:block}
#rock-sketch{stroke:var(--line)}
#primary-mass{stroke-width:2.02}#structural-definition{stroke-width:1.35}#architectural-detail,#optional-hints{stroke-width:1.01}
.stage .plate{display:none}
.no-js .stage .plate,.fallback .stage .plate{display:block}
.no-js #light,.fallback #light{display:none}
.brand{position:absolute;left:var(--mark-x);top:var(--mark-base);width:var(--mark-w);margin:0;line-height:0;transform:translateY(-100%)}
.brand svg{display:block;width:100%;height:auto}
.brand #rock-wordmark{fill:var(--ink)}
.copy{will-change:opacity;position:absolute;left:var(--mark-x);top:calc(var(--mark-base) + clamp(26px,3.6vh,40px));margin:0;font-weight:400;
  font-size:clamp(17px,1.3vw,21px);line-height:1.6;letter-spacing:.01em;color:rgba(207,199,184,.82);white-space:nowrap}
.channels{will-change:opacity;position:absolute;left:var(--mark-x);bottom:9vh;margin:0;padding:0}
.nodes{display:flex;gap:8px;list-style:none;margin:0 0 0 -15.5px;padding:0}
.nodes a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:rgba(207,199,184,.52);transition:color .6s ease}
.nodes svg{width:13px;height:13px;fill:currentColor}
.nodes a:hover,.nodes a:focus-visible{color:var(--ink)}
.nodes a:focus-visible{outline:1px solid rgba(207,199,184,.6);outline-offset:-6px}
@media (orientation:portrait){
  #primary-mass{stroke-width:2.27}#structural-definition{stroke-width:1.51}#architectural-detail,#optional-hints{stroke-width:1.13}
  .brand{left:50%;transform:translate(-50%,-100%)}
  .copy{top:var(--copy-top);left:50%;transform:translateX(-50%);text-align:center;font-size:clamp(16px,4.3vw,19px)}
  .channels{bottom:auto;left:50%;transform:translateX(-50%);top:min(var(--nodes-top),calc(97 * var(--vh) - 92px))}
  .nodes{display:grid;grid-template-columns:repeat(8,24px);row-gap:4px;column-gap:0;margin:0}
  .nodes li{grid-column:span 2;display:flex;justify-content:center}
  .nodes li:nth-child(5){grid-column:2 / span 2}
  .nodes a{width:46px;height:44px}
  .nodes svg{width:14px;height:14px}
}
.js.intro .copy,.js.intro .channels{opacity:0}
.js.intro #rock-sketch path{stroke-dasharray:1 1.02;stroke-dashoffset:1.01}
@media (prefers-reduced-motion:reduce){.js.intro .copy,.js.intro .channels{opacity:1}.js.intro #rock-sketch path{stroke-dasharray:none;stroke-dashoffset:0}}
.plate-mode .scene{--s:1px;--stage-x:0px;--stage-y:0px;--fade0:100000px;--fade1:100001px}
.plate-mode .dissolve{display:none}
.plate-mode #rock-sketch,.plate-mode .brand,.plate-mode .copy,.plate-mode .channels{visibility:hidden}

.scene{--id-w:clamp(30px,calc((86vh - 180px) / 4.3),124px);--id-top:7vh;
  --id-ar:max(13px,calc(var(--id-w) * .1647));--id-en:max(10.5px,calc(var(--id-w) * .0996));
  --id-h:calc(var(--id-w) * 4.003 + var(--id-ar) * 1.25 + var(--id-en) * 1.15 + var(--id-w) * .03)}
.brand{left:calc(var(--mark-x) + var(--mark-w) / 2);top:var(--id-top);width:max-content;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:normal}
.brand-logo{margin:0;line-height:0}
.brand-logo img{display:block;width:var(--id-w);height:auto}
.entity{margin:calc(var(--id-w) * -.014) 0 0;display:flex;flex-direction:column;align-items:center;color:#FFFFFF;font-weight:400;white-space:nowrap}
.entity-ar{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:var(--id-ar);line-height:1.25}
.entity-en{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:var(--id-en);line-height:1.15;margin-top:calc(var(--id-w) * .03)}
.copy{top:calc(var(--id-top) + var(--id-h) + clamp(26px,3.6vh,40px))}
@media (orientation:portrait){
  .scene{--id-top:calc(var(--fade1) + 1.5 * var(--vh));
    --id-w:clamp(30px,calc((97 * var(--vh) - var(--fade1) - 6.5 * var(--vh) - 149px - 30px) / 4.003),96px);
    --copy-top:calc(var(--id-top) + var(--id-h) + 2.5 * var(--vh));
    --nodes-top:calc(var(--copy-top) + 27px + 2.5 * var(--vh))}
  .brand{left:50%;top:var(--id-top);transform:translateX(-50%)}
}

@media (orientation:portrait){
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:auto}
  .scene{position:relative;inset:auto;width:100%;min-height:calc(100 * var(--vh));height:var(--scene-h);
    --id-w:clamp(105px,28vw,120px);
    --id-top:calc(var(--fade1) + 3.5 * var(--vh));
    --copy-top:calc(var(--id-top) + var(--id-h) + 4 * var(--vh));
    --nodes-top:calc(var(--copy-top) + 27px + 4 * var(--vh));
    --scene-h:calc(var(--nodes-top) + 92px + 6 * var(--vh))}
  .channels{top:var(--nodes-top)}
  .dissolve{bottom:auto;height:calc(100 * var(--vh) - var(--fade0))}
  .scene::after{content:'';position:absolute;left:0;right:0;top:calc(100 * var(--vh));bottom:0;background:var(--field);pointer-events:none;z-index:0}
  .brand,.copy,.channels{z-index:1}
}

.entity{display:block;text-align:center;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.entity-ar,.entity-en{display:block;white-space:nowrap}
.entity-ar{line-height:1.6}
.entity-en{line-height:1.35;margin-top:.3em}
.scene{--id-h:calc(var(--id-w) * 4.003 + var(--id-ar) * 1.6 + var(--id-en) * 1.65)}

.scene{--copy-fs:clamp(17px,1.3vw,21px)}
@media (orientation:portrait){.scene{--copy-fs:clamp(16px,4.3vw,19px)}}
.scene{--id-ar:max(13px,calc(var(--copy-fs) * .8));--id-en:max(10.5px,calc(var(--copy-fs) * .62));
  --id-h:calc(var(--id-w) * 3.817 + var(--copy-fs) * 3.7 + var(--id-ar) * 1.6 + var(--id-en) * 1.65)}
.brand .copy{position:static;left:auto;top:auto;transform:none;margin:calc(var(--id-w) * -.2 + var(--copy-fs) * .9) 0 0;text-align:center;font-size:var(--copy-fs);color:#CFC7B8}
.entity{margin-top:calc(var(--copy-fs) * 1.2);color:#CFC7B8}
@media (orientation:portrait){.scene{--nodes-top:calc(var(--id-top) + var(--id-h) + 4 * var(--vh))}}
@media (orientation:landscape) and (max-height:520px){
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:auto}
  .scene{position:relative;inset:auto;width:100%;min-height:100vh;height:var(--scene-h);
    --id-w:clamp(84px,11.5vw,104px);--id-top:7vh;
    --nodes-top:calc(var(--id-top) + var(--id-h) + 7vh);--scene-h:calc(var(--nodes-top) + 44px + 9vh)}
  .channels{bottom:auto;top:var(--nodes-top)}
  .dissolve{bottom:auto;height:calc(100vh - var(--fade0))}
  .scene::after{content:'';position:absolute;left:0;right:0;top:100vh;bottom:0;background:var(--field);pointer-events:none;z-index:0}
  .brand,.channels{z-index:1}
}

.scene{--fade1:78vh;--feather:calc(var(--fade1) - var(--fade0))}
.dissolve{top:calc(var(--fade1) - var(--feather));background:linear-gradient(to bottom,rgba(14,15,15,0) calc(var(--feather) * 0),rgba(14,15,15,0.028) calc(var(--feather) * 0.1),rgba(14,15,15,0.104) calc(var(--feather) * 0.2),rgba(14,15,15,0.216) calc(var(--feather) * 0.3),rgba(14,15,15,0.352) calc(var(--feather) * 0.4),rgba(14,15,15,0.5) calc(var(--feather) * 0.5),rgba(14,15,15,0.648) calc(var(--feather) * 0.6),rgba(14,15,15,0.784) calc(var(--feather) * 0.7),rgba(14,15,15,0.896) calc(var(--feather) * 0.8),rgba(14,15,15,0.972) calc(var(--feather) * 0.9),var(--field) var(--feather),var(--field) 100%)}
@media (orientation:portrait){
  .scene{--id-w:clamp(46px,13vw,64px);--g0:calc(1.5 * var(--vh));
    --id-h:calc(var(--id-w) * 3.817 + var(--copy-fs) * 3.4 + var(--id-ar) * 1.6 + var(--id-en) * 1.65);
    --foot:max(1.75 * var(--vh),env(safe-area-inset-bottom));
    --arch-b:calc(100 * var(--vh) - var(--g0) - var(--id-h) - 2.5 * var(--vh) - 92px - var(--foot));
    --s:max(min(calc(85vw / 500),calc(47 * var(--vh) / 600),calc(var(--arch-b) / 768.510638)),calc(24 * var(--vh) / 600));
    --stage-y:calc(89.361702 * var(--s));--fade0:calc(625.531915 * var(--s));--fade1:calc(768.510638 * var(--s));--feather:calc(142.978723 * var(--s));
    --id-top:calc(var(--fade1) + var(--g0));
    --nodes-top:calc(var(--id-top) + var(--id-h) + 2.5 * var(--vh));
    --scene-h:calc(var(--nodes-top) + 92px + var(--foot))}
  .entity{margin-top:calc(var(--copy-fs) * .9)}
  .dissolve{height:calc(100 * var(--vh) - var(--fade1) + var(--feather))}
}
@media (orientation:landscape) and (max-height:520px){
  .dissolve{height:calc(100vh - var(--fade1) + var(--feather))}
}