:root{
  --stage:#060A12; --haze:#0D1421; --panel:#111A2B;
  --beam:#8DB6E3; --beam-hot:#D5E7FA; --amber:#F2A93B; --amber-dim:#8A6222;
  --paper:#E8EDF5; --mute:#63728B;
  --rule:rgba(141,182,227,.15);
  --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--stage);color:var(--paper);
  font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
@media(max-width:760px){.wrap{padding:0 20px;}}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
section{padding:120px 0;position:relative;}
@media(max-width:760px){section{padding:80px 0;}}

/* bilingual */
html:not([lang="ar"]) .ar{display:none !important;}
html[lang="ar"] .en{display:none !important;}
html[lang="ar"]{direction:rtl;}
html[lang="ar"] body{font-family:'IBM Plex Sans Arabic',sans-serif;}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .rw-title,html[lang="ar"] .sv-name{font-family:'Noto Kufi Arabic',sans-serif;font-weight:900;letter-spacing:0;}
html[lang="ar"] .display,html[lang="ar"] h2{font-stretch:normal;line-height:1.16;}
html[lang="ar"] .eyebrow,html[lang="ar"] .btn{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:.03em;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ============ CURTAIN (opening sequence) ============ */
.curtain{position:fixed;inset:0;z-index:200;background:var(--stage);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease .35s,visibility .7s ease .35s;}
.curtain.up{opacity:0;visibility:hidden;}
.curtain-cue{color:var(--mute);text-align:center;}
.curtain-cue b{color:var(--amber);display:block;margin-bottom:10px;}
.curtain-bar{width:180px;height:1px;background:var(--rule);margin:18px auto 0;overflow:hidden;}
.curtain-bar i{display:block;height:100%;width:0;background:var(--amber);animation:fill 1.5s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes fill{to{width:100%;}}

/* ============ PROGRESS ============ */
.prog{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--beam),var(--amber));}

/* ============ TOP BAR ============ */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 40px;
  transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent;}
.top.stuck{background:rgba(6,10,18,.92);backdrop-filter:blur(14px);border-bottom-color:var(--rule);padding:13px 40px;}
@media(max-width:760px){.top,.top.stuck{padding-inline:20px;}}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:32px;filter:drop-shadow(0 0 16px rgba(141,182,227,.55));}
.brand b{font-size:13px;font-weight:800;letter-spacing:.24em;font-stretch:118%;}
.top nav{display:flex;gap:30px;}
.top nav a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#B4C2D8;position:relative;padding:3px 0;}
.top nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:inline-start;transition:transform .3s;}
.top nav a:hover::after{transform:scaleX(1);}
.top-right{display:flex;align-items:center;gap:16px;}
.clock{color:var(--beam);border:1px solid var(--rule);padding:6px 11px;border-radius:2px;}
.clock i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-inline-end:8px;animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.2;}}
.lang{background:none;border:1px solid var(--rule);color:var(--paper);padding:7px 13px;border-radius:2px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;transition:.25s;}
.lang:hover{border-color:var(--amber);color:var(--amber);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{width:22px;height:1.5px;background:var(--paper);display:block;transition:.3s;}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(max-width:1040px){
  .top nav{position:fixed;inset:0;background:rgba(6,10,18,.98);backdrop-filter:blur(16px);
    flex-direction:column;justify-content:center;align-items:center;gap:28px;
    opacity:0;visibility:hidden;transition:.4s;}
  .top nav.open{opacity:1;visibility:visible;}
  .top nav a{font-size:22px;}
  .clock{display:none;}
  .burger{display:flex;z-index:1;}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:150px;}
.hero-photo{position:absolute;inset:-8% 0;background-size:cover;background-position:center 42%;opacity:.48;filter:saturate(1.2) contrast(1.06);will-change:transform;}
.hero-tint{position:absolute;inset:0;background:
  radial-gradient(ellipse 120% 75% at 50% -12%, rgba(141,182,227,.24), transparent 62%),
  linear-gradient(180deg, rgba(6,10,18,.5) 0%, rgba(6,10,18,.7) 46%, var(--stage) 97%);}
.beams{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;}
.beam{position:absolute;top:-14vh;left:50%;width:15vw;height:136vh;
  background:linear-gradient(180deg, rgba(213,231,250,.45) 0%, rgba(141,182,227,.15) 44%, transparent 80%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  transform-origin:50% 0;filter:blur(6px);opacity:0;
  animation:beamIn 1.6s ease 1.2s forwards, sway 14s ease-in-out infinite alternate 1.2s;}
@keyframes beamIn{to{opacity:1;}}
@keyframes sway{from{transform:translateX(-50%) rotate(var(--a));}to{transform:translateX(-50%) rotate(calc(var(--a) + var(--s))) scaleY(1.06);}}
.b1{--a:-36deg;--s:5deg;} .b2{--a:-17deg;--s:-4deg;opacity:.9;} .b3{--a:2deg;--s:5deg;}
.b4{--a:20deg;--s:-6deg;} .b5{--a:38deg;--s:4deg;}
.haze{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.hero-inner{position:relative;z-index:3;width:100%;}
.eyebrow{color:var(--beam);display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--amber);flex:none;}
.display{font-size:clamp(44px,9vw,146px);font-weight:800;font-stretch:122%;line-height:.9;letter-spacing:-.025em;text-transform:uppercase;margin:0;}
.line{display:block;overflow:hidden;}
.line span{display:block;transform:translateY(112%);}
.go .line span{animation:riseUp 1.05s cubic-bezier(.16,.9,.24,1) forwards;}
.go .l1 span{animation-delay:1.35s;} .go .l2 span{animation-delay:1.48s;}
@keyframes riseUp{to{transform:translateY(0);}}
.glow{color:transparent;-webkit-text-stroke:1.5px var(--beam);text-shadow:0 0 36px rgba(141,182,227,.5);}
html[lang="ar"] .glow{-webkit-text-stroke-width:1px;}
.lead{max-width:560px;margin:28px 0 0;color:#A9B9D0;font-size:17px;line-height:1.72;opacity:0;}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 56px;opacity:0;}
.go .lead{animation:fadeUp .9s ease 1.95s forwards;}
.go .ctas{animation:fadeUp .9s ease 2.1s forwards;}
@keyframes fadeUp{from{transform:translateY(16px);}to{opacity:1;transform:none;}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:2px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  background:var(--amber);color:#150D02;border:1px solid var(--amber);transition:.28s cubic-bezier(.2,.8,.2,1);}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(242,169,59,.26);}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(232,237,245,.26);}
.btn.ghost:hover{border-color:var(--beam);color:var(--beam);box-shadow:none;}

/* cue ticker */
.cuebar{position:relative;z-index:3;border-block:1px solid var(--rule);background:rgba(6,10,18,.6);
  backdrop-filter:blur(6px);overflow:hidden;padding:13px 0;opacity:0;}
.go .cuebar{animation:fadeUp .8s ease 2.3s forwards;}
.cuetrack{display:flex;gap:44px;width:max-content;animation:roll 46s linear infinite;}
html[lang="ar"] .cuetrack{animation-name:rollRtl;}
@keyframes roll{to{transform:translateX(-50%);}}
@keyframes rollRtl{to{transform:translateX(50%);}}
.cuetrack em{font-style:normal;color:var(--mute);display:flex;align-items:center;gap:10px;white-space:nowrap;}
.cuetrack em b{color:var(--amber);font-weight:600;}
.cuetrack em::after{content:"";width:4px;height:4px;background:var(--rule);border-radius:50%;margin-inline-start:34px;}
.cuebar:hover .cuetrack{animation-play-state:paused;}

/* ============ CLIENT MARQUEE ============ */
.clients{padding:38px 0;border-bottom:1px solid var(--rule);overflow:hidden;}
.cl-track{display:flex;gap:56px;width:max-content;animation:roll 40s linear infinite;}
html[lang="ar"] .cl-track{animation-name:rollRtl;}
.cl-track span{white-space:nowrap;color:#7B8CA6;font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

/* ============ SECTION HEADS ============ */
.head{max-width:660px;margin-bottom:56px;}
.head h2{font-size:clamp(30px,4.6vw,60px);font-weight:800;font-stretch:112%;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 18px;}
.head p{color:var(--mute);margin:0;font-size:16.5px;}
.rv{opacity:0;transform:translateY(24px);}
.rv.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}

/* ============ SERVICES — the rig list ============ */
.rig{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:start;}
.rig-list{border-top:1px solid var(--rule);}
.sv{display:flex;align-items:center;gap:18px;padding:19px 14px;border-bottom:1px solid var(--rule);
  cursor:pointer;position:relative;transition:padding .35s,background .35s;}
.sv::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--amber);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.sv.on{padding-inline-start:26px;background:linear-gradient(90deg,rgba(141,182,227,.07),transparent 72%);}
html[lang="ar"] .sv.on{background:linear-gradient(270deg,rgba(141,182,227,.07),transparent 72%);}
.sv.on::before{transform:scaleY(1);}
.sv-ch{color:var(--mute);flex:none;width:28px;transition:color .3s;}
.sv.on .sv-ch{color:var(--amber);}
.sv-name{font-size:18.5px;font-weight:700;font-stretch:108%;transition:color .3s;}
.sv.on .sv-name{color:var(--beam-hot);}
.sv-dot{margin-inline-start:auto;width:7px;height:7px;border-radius:50%;background:#22304A;flex:none;transition:.3s;}
.sv.on .sv-dot{background:var(--amber);box-shadow:0 0 12px var(--amber);}

.rig-detail{position:sticky;top:110px;border:1px solid var(--rule);background:
  linear-gradient(160deg,var(--panel),rgba(13,20,33,.4));border-radius:3px;padding:34px;min-height:330px;}
.rig-detail .ic{width:46px;height:46px;color:var(--amber);margin-bottom:22px;}
.rig-detail .ic svg{width:100%;height:100%;}
.rig-detail h3{font-size:24px;font-weight:800;font-stretch:110%;margin:0 0 12px;}
.rig-detail p{color:#94A5BF;margin:0;font-size:15.5px;line-height:1.75;}
.rig-detail .chan{color:var(--mute);margin-bottom:20px;}
.fade-swap{animation:swapIn .45s ease;}
@keyframes swapIn{from{opacity:0;transform:translateY(10px);}}
.sv-mob{display:none;color:#94A5BF;font-size:14.5px;padding:0 14px 18px;margin-top:-8px;}
@media(max-width:960px){
  .rig{grid-template-columns:1fr;gap:0;}
  .rig-detail{display:none;}
  .sv{padding-block:16px 6px;border-bottom:none;}
  .sv-mob{display:block;border-bottom:1px solid var(--rule);padding-bottom:18px;}
  .sv-dot{display:none;}
}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:80px;}
.stat{background:var(--stage);padding:34px 26px;text-align:center;}
.stat b{display:block;font-size:clamp(32px,4.6vw,54px);font-weight:800;font-stretch:118%;
  color:var(--beam-hot);line-height:1;letter-spacing:-.02em;font-family:'Archivo',sans-serif;}
.stat span{display:block;color:var(--mute);margin-top:10px;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ============ RUNNING ORDER ============ */
.order{border-top:1px solid var(--rule);}
.row{position:relative;display:grid;grid-template-columns:60px 150px 1fr 220px;gap:24px;align-items:center;
  padding:26px 16px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background .35s,padding .35s;}
.row::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--amber);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.row:hover{background:linear-gradient(90deg,rgba(141,182,227,.07),transparent 72%);padding-inline-start:28px;}
html[lang="ar"] .row:hover{background:linear-gradient(270deg,rgba(141,182,227,.07),transparent 72%);}
.row:hover::before{transform:scaleY(1);}
.rw-cue{color:var(--beam);}
.rw-meta{color:var(--mute);}
.rw-title{font-size:19.5px;font-weight:700;font-stretch:108%;line-height:1.28;}
.row:hover .rw-title{color:var(--beam-hot);}
.rw-client{color:var(--mute);font-size:13px;text-align:end;}
.rw-thumb{display:none;}
@media(max-width:960px){
  .row{grid-template-columns:52px 1fr;gap:6px 16px;padding:22px 10px;}
  .rw-meta,.rw-title,.rw-client{grid-column:2;}
  .rw-client{text-align:start;}
  .rw-thumb{display:block;grid-column:1/-1;margin-top:14px;height:170px;border-radius:3px;background-size:cover;background-position:center;}
}
.preview{position:fixed;top:0;left:0;width:340px;height:222px;z-index:40;pointer-events:none;
  border:1px solid var(--rule);border-radius:3px;background-size:cover;background-position:center;
  opacity:0;transform:translate(-50%,-50%) scale(.93) rotate(-2.5deg);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 70px rgba(0,0,0,.65);}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2.5deg);}
@media(max-width:960px){.preview{display:none;}}

/* ============ WHY ============ */
.why{display:grid;grid-template-columns:1fr 480px;gap:70px;align-items:start;}
.why ul{list-style:none;margin:0;padding:0;}
.why li{display:flex;gap:22px;padding:26px 0;border-top:1px solid var(--rule);}
.why li .n{color:var(--amber);flex:none;padding-top:4px;}
.why li h4{margin:0 0 7px;font-size:17.5px;font-weight:700;font-stretch:106%;}
.why li p{margin:0;color:var(--mute);font-size:15px;}
.why-vis{position:relative;border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
.why-vis img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;}
.why-cap{position:absolute;inset-inline:0;bottom:0;padding:20px;background:linear-gradient(0deg,rgba(6,10,18,.92),transparent);color:#C6D3E6;}
@media(max-width:1000px){.why{grid-template-columns:1fr;gap:40px;}}

/* ============ ARCHIVE ============ */
.arch{border-block:1px solid var(--rule);padding:0;overflow:hidden;background:var(--haze);}
.arch-in{padding:90px 0 0;}
.arch-strip{display:flex;gap:14px;width:max-content;animation:roll 55s linear infinite;margin-top:50px;padding-bottom:90px;}
html[lang="ar"] .arch-strip{animation-name:rollRtl;}
.arch-strip div{width:290px;height:190px;border-radius:3px;background-size:cover;background-position:center;
  filter:grayscale(.5) brightness(.75);transition:.5s;flex:none;border:1px solid var(--rule);}
.arch-strip div:hover{filter:none;transform:scale(1.04);}
/* The dimming above is a hover effect, and a touch screen never hovers — on a phone the
   strip just stayed washed out. These photographs are the strongest proof of the work
   on the whole page, so on touch devices they are shown at full strength from the start. */
@media (hover: none){
  .arch-strip div{filter:none;}
}

/* ============ CONTACT ============ */
.contact{display:grid;grid-template-columns:1fr 500px;gap:70px;align-items:start;}
.clist{list-style:none;margin:38px 0 0;padding:0;}
.clist li{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--rule);}
.clist .ic{width:19px;height:19px;color:var(--amber);flex:none;margin-top:3px;}
.clist a,.clist .val{display:block;font-size:15.5px;font-weight:600;}
.clist a:hover{color:var(--beam);}
.clist .sub{display:block;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;}
.form{border:1px solid var(--rule);background:linear-gradient(160deg,var(--panel),rgba(13,20,33,.4));border-radius:3px;padding:34px;}
.field{margin-bottom:20px;}
.field label{display:block;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;}
.field input,.field select,.field textarea{width:100%;background:rgba(6,10,18,.65);border:1px solid var(--rule);
  color:var(--paper);padding:13px 15px;border-radius:2px;font-size:15px;transition:border-color .25s;}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--beam);outline:none;}
.form .btn{width:100%;justify-content:center;}
.sent{color:var(--amber);text-align:center;margin-top:14px;font-size:14px;}
@media(max-width:1000px){.contact{grid-template-columns:1fr;gap:44px;}}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--rule);padding:50px 0 40px;}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--rule);}
.f-soc{display:flex;gap:12px;}
.f-soc a{width:38px;height:38px;border:1px solid var(--rule);border-radius:2px;display:grid;place-items:center;color:#9CADC6;transition:.25s;}
.f-soc a:hover{border-color:var(--amber);color:var(--amber);}
.f-legal{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px;color:var(--mute);}

/* ---- office map ---- */
/* Sits inside the contact column, so it borrows the same border and radius as the
   cards around it rather than introducing a second visual language. */
.map-card{display:block;margin-top:22px;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .25s ease;}
.map-card:hover{border-color:rgba(255,255,255,.34);}
/* No grayscale filter here. It looked deliberate on a desktop, where hovering brought
   the colour back — but a phone has no hover, so the map simply stayed grey and read as
   broken. A map is a wayfinding tool before it is a design element. */
.map-cta{display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;font-size:12px;letter-spacing:.04em;opacity:.75;}
.map-cta::after{content:"↗";opacity:.7;}
html[lang="ar"] .map-cta::after{content:"↖";}