/* Fajer UR — 3D scroll-world home page.
   Everything is sized in --u (the design unit), so every screen from a laptop
   to a 4K TV shows the same composition. Portrait phones get their own unit
   and a bottom-anchored text layout. Direction A: night navy, orange = live power, dawn at the end. */

@font-face{font-family:"IBM Plex Sans";src:url(../fonts/plex-sans.woff2) format("woff2");font-weight:100 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --u:min(calc(100vw / 1600), calc(100vh / 900));
  --night:#060B16; --panel:#0E1728; --edge:rgba(255,255,255,.1);
  --txt:#EEF2F8; --sub:#B4C0D3; --tag:#8C9BB6; --or:#FF8A00; --amber:#FFB547;
  --sand:#F4EEE4; --sand2:#EADFCD; --ink:#1A2233; --ink2:#4B5568; --rust:#A55400;
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,Consolas,monospace;
  --pad:calc(120 * var(--u));
  color-scheme:dark;
}
html[lang=ar]{--sans:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,system-ui,sans-serif}
@media (max-aspect-ratio:4/5){:root{--u:calc(100vw / 430);--pad:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--txt);font:max(15px,calc(19 * var(--u)))/1.6 var(--sans)}
html[lang=ar] body{line-height:1.8}
h1,h2,h3,p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.skip{position:fixed;inset-inline-start:12px;top:-60px;background:var(--or);color:#1A0E00;padding:8px 12px;z-index:20;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- world layers ---------- */
.poster{position:fixed;inset:0;background:#0B1424 center/cover no-repeat;opacity:0;transition:opacity .6s}
html.no-webgl .poster,html.no-js .poster{opacity:1}
#world{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;opacity:0;transition:opacity 1.2s ease;touch-action:pan-y}
html.ready #world{opacity:1}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;z-index:1}
.scrim{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(6,11,22,.8) 0%,rgba(6,11,22,.45) 32%,rgba(6,11,22,0) 58%)}
html[dir=rtl] .scrim{background:linear-gradient(270deg,rgba(6,11,22,.8) 0%,rgba(6,11,22,.45) 32%,rgba(6,11,22,0) 58%)}
@media (max-aspect-ratio:4/5){.scrim,html[dir=rtl] .scrim{background:linear-gradient(0deg,rgba(6,11,22,.92) 0%,rgba(6,11,22,.6) 38%,rgba(6,11,22,0) 62%)}}

/* ---------- fixed HUD ---------- */
.hud-top{position:fixed;z-index:5;top:0;inset-inline:0;display:flex;align-items:flex-start;justify-content:space-between;padding:max(calc(26 * var(--u)),env(safe-area-inset-top,0px)) calc(56 * var(--u)) 0;pointer-events:none}
.hud-top > *{pointer-events:auto}
.logo{display:block;line-height:0}
.logo img{width:calc(96 * var(--u));height:calc(96 * var(--u));min-width:64px;min-height:64px}
.hud-actions{display:flex;gap:calc(10 * var(--u));align-items:center}
.lang,.wa{text-decoration:none;font-size:max(13px,calc(14 * var(--u)));padding:max(8px,calc(9 * var(--u))) max(12px,calc(16 * var(--u)));border-radius:99px;white-space:nowrap}
.lang{border:1px solid rgba(255,255,255,.2);background:rgba(6,11,22,.35);backdrop-filter:blur(6px)}
.wa{background:var(--or);color:#1A0E00;font-weight:600}
.lang:hover{border-color:rgba(255,255,255,.45)} .wa:hover{background:var(--amber)}

.rail{position:fixed;z-index:5;inset-inline-end:calc(40 * var(--u));top:50%;transform:translateY(-50%);display:grid;gap:calc(6 * var(--u))}
.rail button{all:unset;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:flex-end;padding:calc(6 * var(--u)) 0;font:500 max(11px,calc(12 * var(--u)))/1 var(--mono);letter-spacing:.12em;color:var(--tag)}
html[lang=ar] .rail button{letter-spacing:0;font-size:max(12px,calc(13 * var(--u)))}
.rail button em{position:absolute;inset-inline-end:calc(100% + 10px);white-space:nowrap;font-style:normal;opacity:0;transform:translateX(6px);transition:.25s;text-transform:uppercase}
html[dir=rtl] .rail button em{transform:translateX(-6px)}
.rail button span{display:inline-block;min-width:3ch;padding-inline-end:calc(12 * var(--u));border-inline-end:2px solid rgba(255,255,255,.18);transition:.25s}
.rail button:hover em,.rail button:focus-visible em,.rail button.on em{opacity:1;transform:none}
.rail button.on{color:var(--txt)}
.rail button.on span{border-color:var(--or);color:var(--or)}
html.past-world .rail{opacity:0;pointer-events:none;transition:opacity .4s}
@media (max-aspect-ratio:4/5){.rail{display:none}}

.meter{position:fixed;z-index:5;inset-inline-start:calc(56 * var(--u));bottom:max(calc(34 * var(--u)),env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:calc(10 * var(--u));font:500 max(11px,calc(12 * var(--u)))/1 var(--mono);letter-spacing:.14em;color:var(--tag);transition:opacity .4s}
html[lang=ar] .meter{letter-spacing:0}
.meter-v{color:var(--or);font-size:max(22px,calc(34 * var(--u)));letter-spacing:0;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:end}
.meter i{display:block;width:calc(160 * var(--u));height:2px;background:rgba(255,255,255,.14);margin-inline-start:calc(8 * var(--u))}
.meter b{display:block;height:100%;width:0;background:var(--or)}
html.past-world .meter{opacity:0}
@media (max-aspect-ratio:4/5){.meter{top:calc(72px + env(safe-area-inset-top,0px));bottom:auto;inset-inline-start:auto;inset-inline-end:16px}.meter i{display:none}.meter-v{font-size:22px}}

.tip{position:fixed;z-index:6;pointer-events:none;background:rgba(6,11,22,.86);border:1px solid rgba(255,138,0,.55);border-radius:6px;padding:7px 10px;font:500 13px/1.3 var(--sans);color:var(--txt);transform:translate(14px,14px);white-space:nowrap}
.tip small{display:block;font:11px/1.3 var(--mono);color:var(--tag);margin-top:2px}

/* ---------- 3D chapters ---------- */
main{position:relative;z-index:2}
.ch{min-height:130vh;display:flex;align-items:center;padding-inline:var(--pad) calc(240 * var(--u))}
.ch-hero{min-height:100vh}
.copy{position:relative;width:calc(680 * var(--u));min-width:min(100%,420px);display:grid;gap:calc(26 * var(--u))}
.ch-hero .copy{width:calc(920 * var(--u))}
/* drawing-style annotation: label ——— spec */
.eyebrow{display:flex;align-items:center;gap:calc(14 * var(--u));font:500 max(11px,calc(12.5 * var(--u)))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;border:1.5px solid var(--or);transform:rotate(45deg)}
.eyebrow i{flex:0 0 calc(72 * var(--u));min-width:28px;height:1px;background:linear-gradient(90deg,rgba(255,138,0,.7),rgba(255,138,0,.15))}
html[dir=rtl] .eyebrow i{background:linear-gradient(270deg,rgba(255,138,0,.7),rgba(255,138,0,.15))}
.eyebrow .spec{color:var(--tag);letter-spacing:.14em}
html[lang=ar] .eyebrow{font:600 max(13px,calc(15 * var(--u)))/1.4 var(--sans);letter-spacing:0}
html[lang=ar] .eyebrow .spec{font:500 max(11px,calc(12.5 * var(--u)))/1 var(--mono);letter-spacing:.14em}
/* headlines: light + strong, tight, one accent word on the scan line */
h1{font-size:calc(118 * var(--u));line-height:.92;letter-spacing:-.045em;font-weight:600}
h1 .ln{display:block}
h1 .lt{font-weight:250;color:#CDD6E4}
h1 .bd{font-weight:600}
h2{font-size:calc(88 * var(--u));line-height:.98;letter-spacing:-.04em;font-weight:300;color:#DCE3EE}
.hl{font-style:normal;font-weight:600;color:#fff;position:relative;display:inline-block}
.hl::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:max(3px,.065em);background:var(--or);box-shadow:0 0 14px rgba(255,138,0,.75);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.3,.7,.2,1) var(--d,400ms)}
html[dir=rtl] .hl::after{transform-origin:right}
.in .hl::after{transform:scaleX(1)}
html[lang=ar] h1{font-size:calc(100 * var(--u));line-height:1.28;letter-spacing:0}
html[lang=ar] h1 .lt{font-weight:400}
html[lang=ar] h2{font-size:calc(76 * var(--u));line-height:1.3;letter-spacing:0;font-weight:400}
html[lang=ar] .hl::after{bottom:-.06em}
/* sheet number behind each chapter, like a drawing sheet index */
.sheet{position:absolute;z-index:-1;top:calc(-170 * var(--u));inset-inline-start:calc(-18 * var(--u));font:100 calc(300 * var(--u))/1 "IBM Plex Sans",sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,138,0,.5);pointer-events:none;user-select:none}
html[dir=rtl] .sheet{inset-inline-start:auto;inset-inline-end:calc(-18 * var(--u))}
.copy > p:not(.eyebrow):not(.cue){color:#A3AFC2;max-width:31em;font-size:max(15px,calc(18.5 * var(--u)));line-height:1.65}
.lede{font-size:max(16px,calc(20 * var(--u)))!important;max-width:29em!important}
.cue{display:flex;align-items:center;gap:12px;font:500 max(11px,calc(12 * var(--u)))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tag);margin-top:calc(18 * var(--u))}
html[lang=ar] .cue{font:500 max(13px,calc(14 * var(--u)))/1.4 var(--sans);letter-spacing:0}
.cue span{width:1px;height:calc(46 * var(--u));min-height:28px;background:linear-gradient(var(--or),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.sysbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(6 * var(--u))}
.sysbtns button{all:unset;cursor:pointer;font-size:max(13px,calc(14 * var(--u)));padding:max(9px,calc(10 * var(--u))) max(13px,calc(16 * var(--u)));border:1px solid rgba(255,138,0,.5);border-radius:99px;color:var(--txt);background:rgba(6,11,22,.4);backdrop-filter:blur(4px)}
.sysbtns button:hover,.sysbtns button:focus-visible{background:rgba(255,138,0,.16)}
.sysbtns button::before{content:"+ ";color:var(--or)}

.places{display:grid;gap:10px;margin-top:calc(8 * var(--u))}
.place{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;padding:calc(14 * var(--u)) 0;border-top:1px solid var(--edge)}
.place .code{grid-row:span 2;font:500 max(11px,calc(12 * var(--u)))/1.4 var(--mono);letter-spacing:.14em;color:var(--or)}
.place h3{font-size:max(16px,calc(19 * var(--u)))}
.place p{color:var(--sub);font-size:max(13px,calc(15 * var(--u)))}

/* split headings: words rise in */
.split .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.in .split .w{opacity:1;transform:none;filter:none}
.ch .copy > :not(h1):not(h2){opacity:0;transform:translateY(14px);transition:opacity .8s ease .25s,transform .8s ease .25s}
.ch.in .copy > :not(h1):not(h2){opacity:1;transform:none}
html.no-js .ch .copy > *{opacity:1;transform:none}

@media (max-aspect-ratio:4/5){
  .ch{align-items:flex-end;padding:0 20px calc(40px + env(safe-area-inset-bottom,0px));min-height:140vh}
  .ch-hero{min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .copy{width:100%;min-width:0;gap:14px;position:sticky;bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  h1,html[lang=ar] h1{font-size:calc(50 * var(--u))}
  .sheet{font-size:calc(150 * var(--u));top:calc(-84 * var(--u))}
  h2,html[lang=ar] h2{font-size:calc(42 * var(--u))}
  .hud-top{padding:max(14px,env(safe-area-inset-top,0px)) 16px 0}
  .logo img{width:64px;height:64px}
  .ch-world{min-height:160vh}
}

/* ---------- panels after the world ---------- */
.panel{position:relative;padding:calc(140 * var(--u)) var(--pad);background:linear-gradient(180deg,rgba(6,11,22,0) 0,rgba(6,11,22,.9) calc(160 * var(--u)),rgba(6,11,22,.94) 100%)}
.panel-in{max-width:calc(1360 * var(--u));margin-inline:auto}
.sec-head{display:grid;gap:calc(14 * var(--u));max-width:calc(860 * var(--u));min-width:min(100%,420px);margin-bottom:calc(56 * var(--u))}
.sec-head h2{font-size:calc(60 * var(--u))}
html[lang=ar] .sec-head h2{font-size:calc(54 * var(--u))}
.sec-head p{color:var(--sub);font-size:max(15px,calc(20 * var(--u)))}
@media (max-aspect-ratio:4/5){.panel{padding:72px 20px}.sec-head h2,html[lang=ar] .sec-head h2{font-size:32px}}

/* how we work: the line draws itself */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(28 * var(--u));position:relative}
.steps::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:rgba(255,255,255,.12)}
.steps::after{content:"";position:absolute;top:0;inset-inline-start:0;height:2px;width:100%;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform 2.2s cubic-bezier(.3,.6,.2,1)}
html[dir=rtl] .steps::after{transform-origin:right}
.how.in .steps::after{transform:scaleX(1)}
.steps li{display:grid;gap:10px;align-content:start;padding-top:calc(30 * var(--u));position:relative;opacity:0;transform:translateY(16px);transition:opacity .7s ease calc(var(--i) * .35s + .2s),transform .7s ease calc(var(--i) * .35s + .2s)}
.steps li::before{content:"";position:absolute;top:-5px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--night);border:2px solid var(--or)}
.how.in .steps li{opacity:1;transform:none}
.steps .n{font:500 max(11px,calc(13 * var(--u)))/1 var(--mono);letter-spacing:.12em;color:var(--or)}
.steps h3{font-size:max(16px,calc(21 * var(--u)))}
.steps p{font-size:max(13px,calc(15 * var(--u)));color:var(--sub)}
@media (max-aspect-ratio:4/5){
  .steps{grid-template-columns:1fr;gap:0;padding-inline-start:22px}
  .steps::before,.steps::after{top:0;bottom:0;height:auto;width:2px;inset-inline-start:0;inset-inline-end:auto}
  .steps::after{transform:scaleY(0);transform-origin:top}
  .how.in .steps::after{transform:scaleY(1)}
  .steps li{padding:0 0 26px}
  .steps li::before{top:4px;inset-inline-start:-27px}
}

/* field photos: navy-orange duotone, full colour on hover/focus, parallax from world.js */
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(14 * var(--u))}
.ph{margin:0;position:relative;overflow:hidden;border-radius:8px;background:var(--or);aspect-ratio:4/3;isolation:isolate;cursor:default}
.ph img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode:multiply;transition:filter .5s ease;will-change:transform}
.ph::after{content:"";position:absolute;inset:0;background:var(--night);mix-blend-mode:lighten;pointer-events:none;transition:opacity .5s ease}
.ph:hover img,.ph:focus-visible img{filter:none;mix-blend-mode:normal}
.ph:hover::after,.ph:focus-visible::after{opacity:0}
.ph figcaption{position:absolute;inset:auto 0 0 0;z-index:1;padding:26px 12px 10px;font:500 max(11px,calc(13 * var(--u)))/1.35 var(--mono);color:#fff;background:linear-gradient(transparent,rgba(6,11,22,.9))}
html[lang=ar] .ph figcaption{font:500 max(13px,calc(15 * var(--u)))/1.5 var(--sans)}
@media (max-aspect-ratio:4/5){.photos{grid-template-columns:1fr 1fr;gap:8px}}

/* contact: daylight */
.contact{background:linear-gradient(180deg,rgba(6,11,22,0) 0,rgba(244,238,228,.96) calc(200 * var(--u)),var(--sand) 100%);color:var(--ink);padding-bottom:0;color-scheme:light}
.contact .sec-head p{color:var(--ink2)}
.contact .btn{margin-bottom:calc(28 * var(--u))}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:99px;text-decoration:none;font-weight:600;font-size:max(14px,calc(17 * var(--u)))}
.btn-p{background:var(--or);color:#1A0E00}
.btn-p:hover{background:var(--amber)}
.cards{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14 * var(--u))}
@media (max-aspect-ratio:5/4){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-aspect-ratio:4/5){.cards{grid-template-columns:1fr;gap:10px}}
.card{background:#FBF8F3;border:1px solid var(--sand2);border-radius:10px;padding:max(16px,calc(22 * var(--u)));display:grid;gap:6px;align-content:start}
.card dt{font:500 max(11px,calc(12 * var(--u)))/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
html[lang=ar] .card dt{font:600 max(13px,calc(14 * var(--u)))/1.4 var(--sans);letter-spacing:0}
.card dd{margin:0;font-size:max(16px,calc(19 * var(--u)));line-height:1.45;overflow-wrap:anywhere}
.card a{color:var(--ink);text-decoration-color:rgba(165,84,0,.45);text-underline-offset:3px}
html[dir=rtl] .card a[dir=ltr]{unicode-bidi:isolate;display:inline-block}

.foot{margin-top:calc(120 * var(--u));margin-inline:calc(-1 * var(--pad));padding:calc(36 * var(--u)) var(--pad) calc(36px + env(safe-area-inset-bottom,0px));background:var(--night);color:var(--sub);display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:3px solid var(--or)}
.foot img{width:96px;height:96px}
.foot p{font-size:14px}
.foot .small{font-size:13px;color:var(--tag);margin-top:4px}
.foot a{color:var(--txt)}
@media (max-aspect-ratio:4/5){.foot{margin-inline:-20px;padding-inline:20px}}

/* detail card */
.card-pop{position:fixed;z-index:7;inset-inline-end:calc(120 * var(--u));bottom:calc(90 * var(--u));width:calc(420 * var(--u));min-width:min(92vw,320px);background:rgba(9,16,30,.94);border:1px solid rgba(255,138,0,.45);border-radius:12px;padding:calc(26 * var(--u)) max(18px,calc(26 * var(--u)));display:grid;gap:10px;backdrop-filter:blur(8px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.card-pop[hidden]{display:none}
.card-x{all:unset;cursor:pointer;position:absolute;top:8px;inset-inline-end:12px;font-size:24px;line-height:1;color:var(--tag);padding:4px}
.card-n{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--or);text-transform:uppercase}
html[lang=ar] .card-n{font:600 13px/1.4 var(--sans);letter-spacing:0}
.card-pop h3{font-size:max(20px,calc(26 * var(--u)));line-height:1.25}
.card-pop p{color:var(--sub);font-size:max(14px,calc(16 * var(--u)))}
.card-pop .card-b{font:13px/1.5 var(--mono);color:var(--tag)}
@media (max-aspect-ratio:4/5){.card-pop{inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;min-width:0}}

@media (prefers-reduced-motion:reduce){
  #world{transition:none}
  .split .w,.ch .copy > *,.steps li,.steps::after{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .cue span{animation:none}
}

/* globe city labels (positioned by world.js) */
.glabel{position:fixed;left:0;top:0;z-index:3;pointer-events:none;margin:calc(-30 * var(--u)) 0 0 calc(14 * var(--u));padding:4px 10px;border-radius:99px;background:rgba(6,11,22,.72);border:1px solid rgba(255,138,0,.5);font:500 max(12px,calc(14 * var(--u)))/1.3 var(--sans);color:var(--txt);white-space:nowrap}
.glabel.home{background:var(--or);color:#1A0E00;border-color:var(--or);font-weight:600}
html.past-world .glabel{display:none}
html.no-meter .meter{opacity:0}
html.clean main,html.clean .hud-top,html.clean .rail,html.clean .meter,html.clean .scrim,html.clean .grain,html.clean .glabel{display:none!important}
html.no-webgl .meter{display:none}
.glabel.l2{margin-top:calc(6 * var(--u))}
.glabel.home{margin-top:calc(-44 * var(--u))}
.copy p,.sec-head p,.steps p,.place p{text-wrap:pretty}

/* no text selection while dragging the 3D world */
html.dragging,html.dragging *{-webkit-user-select:none;user-select:none;cursor:grabbing!important}
.ch{-webkit-user-select:none;user-select:none}

/* our right-click menu */
.ctx{position:fixed;z-index:30;min-width:280px;max-width:min(360px,calc(100vw - 16px));padding:6px;background:rgba(9,16,30,.96);border:1px solid rgba(255,138,0,.45);border-radius:10px;box-shadow:0 24px 50px -16px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4);backdrop-filter:blur(10px);font:14px/1.35 var(--sans);color:var(--txt);animation:ctxIn .14s ease-out}
.ctx[hidden]{display:none}
@keyframes ctxIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ctx hr{border:0;height:1px;background:rgba(255,255,255,.08);margin:5px 4px}
.ctx-i{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 10px;border-radius:6px}
.ctx-i small{font:12px/1 var(--mono);color:var(--tag);white-space:nowrap}
.ctx-i:hover,.ctx-i:focus-visible,.ctx-go button:hover,.ctx-go button:focus-visible{background:rgba(255,138,0,.14);outline:none}
.ctx-i.lead{color:var(--amber);font-weight:600}
.ctx-i.lead::before{content:"";width:7px;height:7px;border:1.5px solid var(--or);transform:rotate(45deg);flex:none;order:-1;margin-inline-end:-4px}
.ctx-i.wa span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#25D366;margin-inline-end:9px;vertical-align:1px}
.ctx-go{display:flex;flex-wrap:wrap;gap:4px;padding:6px 6px 4px}
.ctx-go span{width:100%;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--or);padding:2px 4px 6px}
html[lang=ar] .ctx-go span{font:600 12px/1.3 var(--sans);letter-spacing:0}
.ctx-go button{all:unset;cursor:pointer;font-size:12.5px;padding:5px 9px;border:1px solid rgba(255,255,255,.12);border-radius:99px;color:var(--sub)}
.toast{position:fixed;z-index:31;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--or);color:#1A0E00;font:600 14px/1.3 var(--sans);padding:10px 16px;border-radius:99px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.toast[hidden]{display:none}

/* daylight contact section: dark ink on sand */
.contact h2,.contact h3{color:var(--ink)}
.contact .sec-head h2{font-weight:400}
html[lang=ar] .contact .sec-head h2{font-weight:600}
.contact{background:linear-gradient(180deg,rgba(6,11,22,0) 0,rgba(244,238,228,.97) calc(110 * var(--u)),var(--sand) calc(180 * var(--u)))}
.contact .panel-in{padding-top:calc(40 * var(--u))}
.logo{border-radius:14px;transition:background .4s,box-shadow .4s}
html.daylight .logo{background:rgba(6,11,22,.88);box-shadow:0 0 0 6px rgba(6,11,22,.88)}

/* logo: large enough to read the wordmark and the Arabic line */
.logo img{width:calc(168 * var(--u));height:calc(168 * var(--u));min-width:112px;min-height:112px}
.hud-top{padding-top:max(calc(14 * var(--u)),env(safe-area-inset-top,0px))}
@media (max-aspect-ratio:4/5){.logo img{width:96px;height:96px;min-width:96px;min-height:96px}.meter{top:calc(108px + env(safe-area-inset-top,0px))}}

/* ---------- icons ---------- */
.ic{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.lang,.wa{display:inline-flex;align-items:center;gap:7px}
.lang .ic{opacity:.75}
.btn .ic{width:1.3em;height:1.3em;margin-inline-end:9px}
.sysbtns button{display:inline-flex;align-items:center;gap:8px}
.sysbtns button::before{content:none}
.sysbtns .ic{color:var(--or);width:1.25em;height:1.25em}
.place .code{display:inline-flex;align-items:center;gap:5px}
.place .code .ic{width:1.1em;height:1.1em}
.st-ic{display:grid;place-items:center;width:calc(46 * var(--u));height:calc(46 * var(--u));min-width:38px;min-height:38px;border:1px solid rgba(255,138,0,.4);border-radius:10px;background:rgba(255,138,0,.08);color:var(--or)}
.st-ic .ic{width:55%;height:55%}
.card dt{display:flex;align-items:center;gap:10px}
.chip{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,138,0,.13);color:var(--rust);flex:none}
.chip .ic{width:19px;height:19px}
.card-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;background:rgba(255,138,0,.14);border:1px solid rgba(255,138,0,.4);color:var(--or)}
.card-ic .ic{width:26px;height:26px}
.ctx-i{justify-content:flex-start}
.ctx-i .ic{color:var(--or);width:17px;height:17px}
.ctx-i .lbl{flex:1}
.ctx-i.lead::before{content:none}
.ctx-i.wa span::before{content:none}
.ctx-i.wa .ic{color:#25D366}
.ctx-go span{display:flex;align-items:center;gap:6px}
.ctx-go span .ic{width:14px;height:14px}
html[dir=rtl] .ctx-go span .ic,html[dir=rtl] .ic.flip{transform:scaleX(-1)}
/* scroll cue: a mouse with a moving wheel */
.cue .mouse{width:22px;height:22px;stroke:var(--or);fill:none;stroke-width:1.5;stroke-linecap:round;flex:none}
.cue .mouse .wheel{animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(4px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.cue .mouse .wheel{animation:none}}
.panel{padding-top:max(calc(210 * var(--u)),170px)}@media (max-aspect-ratio:4/5){.panel{padding-top:130px}}