/* ==========================================================
   Murooj Al-Hadara — "Port Manifest"
   Layout: steel-mist paper pages cut by ink "deck" bands; every
   service is a shipping container; motion = doors, routes, tides.
   ========================================================== */
:root{
  --ink:#0A1B2B;        /* night water, primary text */
  --ink-2:#12283C;      /* deck band */
  --ink-3:#1B3650;
  --paper:#F1F4F5;      /* steel mist page */
  --mist:#E2E8EB;       /* panels */
  --steel:#5A6A77;      /* muted text */
  --line:rgba(10,27,43,.14);
  --line-d:rgba(234,241,244,.14);
  --signal:#F2581C;     /* container orange / signal */
  --sea:#1C5D8C;        /* logo blue */
  --brass:#C99A2E;      /* logo gold */
  --on-dark:#EAF1F4;
  --on-dark-mute:#9CB0BF;
  --white:#FFFFFF;

  --f-display-ar:"Alexandria","Readex Pro",Tahoma,sans-serif;
  --f-display-en:"Alexandria","Readex Pro","Segoe UI",sans-serif;
  --f-stencil:"Big Shoulders Stencil Display","Big Shoulders Display","Arial Narrow",sans-serif;
  --f-body:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --gut:clamp(16px,4.2vw,64px);
  --max:1340px;
  --ease:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hdr:72px;
  color-scheme:light;
}
html[lang="ar"]{--f-display:var(--f-display-ar)}
html[lang="en"]{--f-display:var(--f-display-en)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:clamp(15px,1.05vw,17px);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[lang="en"] body{line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:var(--white)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.mono{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
html[lang="ar"] .mono{font-family:var(--f-body);letter-spacing:0;font-size:.82rem;text-transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
html[lang="ar"] .eyebrow{font-family:var(--f-body);letter-spacing:0;font-size:.86rem;font-weight:600}
.h-xl,.h-l,.h-m{font-family:var(--f-display);margin:0;text-wrap:balance;font-weight:700}
html[lang="en"] .h-xl,html[lang="en"] .h-l,html[lang="en"] .h-m{text-transform:uppercase;font-weight:800;letter-spacing:-.005em}
.h-xl{font-size:clamp(2.7rem,7.4vw,7rem);line-height:1.02}
html[lang="ar"] .h-xl{line-height:1.25}
.h-l{font-size:clamp(2rem,4.4vw,4rem);line-height:1.08}
html[lang="ar"] .h-l{line-height:1.3}
.h-m{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.25}
.lead{font-size:clamp(1.05rem,1.4vw,1.28rem);color:var(--steel);max-width:60ch}
.muted{color:var(--steel)}
.accent{color:var(--signal)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.8em;padding:.95em 1.5em;font-weight:600;font-size:.95rem;border:1.5px solid currentColor;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:var(--from,right);transition:transform .5s var(--ease);z-index:-1}
html[lang="en"] .btn::before{--from:left}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover{color:var(--white);border-color:var(--signal)}
.btn-solid{background:var(--signal);border-color:var(--signal);color:var(--white)}
.btn-solid::before{background:var(--ink)}
.btn-solid:hover{border-color:var(--ink)}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
html[lang="ar"] .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(5px)}
html[lang="ar"] .btn:hover .arr{transform:scaleX(-1) translateX(5px)}

/* ---------- header ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--white);transition:background .4s,color .4s,box-shadow .4s,transform .45s var(--ease)}
.hdr.scrolled{background:rgba(241,244,245,.88);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{width:44px;height:auto;transition:transform .6s var(--ease-out)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand b{display:block;font-family:var(--f-display-ar);font-size:1.15rem;line-height:1.1;font-weight:700}
.brand small{display:block;font-family:var(--f-display-en);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;font-weight:700}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-inline-start:auto}
.nav a{position:relative;font-weight:500;font-size:.95rem;padding-block:.4em}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .45s var(--ease)}
html[lang="en"] .nav a::after{--o:left}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-tools{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;align-items:center;gap:.4em;height:38px;padding-inline:.85em;border:1.5px solid currentColor;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;font-weight:500;transition:background .3s,color .3s}
.lang:hover{background:var(--signal);border-color:var(--signal);color:var(--white)}
.lang .ar-g{font-family:var(--f-display-ar);font-size:1rem;letter-spacing:0}
.burger{display:none;width:42px;height:38px;border:1.5px solid currentColor;position:relative}
.burger span{position:absolute;inset-inline:10px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:18px}.burger span:nth-child(3){top:24px}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-open .hdr{color:var(--white);background:transparent;box-shadow:none;backdrop-filter:none}

.mmenu{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 20px) var(--gut) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu ol{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.mmenu a{display:flex;align-items:baseline;gap:1rem;font-family:var(--f-display);font-size:clamp(2.1rem,9vw,3.4rem);line-height:1.25;transform:translateY(40px);opacity:0;transition:transform .7s var(--ease-out),opacity .5s,color .3s}
html[lang="en"] .mmenu a{text-transform:uppercase;font-weight:800}
.mmenu a .mono{color:var(--signal);font-size:.75rem}
.menu-open .mmenu a{transform:none;opacity:1}
.mmenu li:nth-child(2) a{transition-delay:.05s}.mmenu li:nth-child(3) a{transition-delay:.1s}.mmenu li:nth-child(4) a{transition-delay:.15s}.mmenu li:nth-child(5) a{transition-delay:.2s}
.mmenu a:hover{color:var(--signal)}
.mmenu-foot{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line-d);display:grid;gap:.3rem;color:var(--on-dark-mute)}
.mmenu-foot a{font-family:var(--f-mono);font-size:.95rem;direction:ltr;unicode-bidi:isolate;color:var(--on-dark)}

@media (max-width:960px){
  .nav{display:none}
  .burger{display:inline-block}
  .hdr-tools{margin-inline-start:auto}
  .brand small{display:none}
}

/* ---------- container-door page transition ---------- */
.doors{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;direction:ltr}
.doors i{flex:1;background:var(--ink-2);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px,rgba(0,0,0,.18) 16px 18px,transparent 18px 32px);position:relative;transform:translateX(0);transition:transform .75s var(--ease)}
.doors i::after{content:"";position:absolute;top:8%;bottom:8%;width:6px;border-radius:3px;background:linear-gradient(90deg,#7d8b95,#cfd8de,#6e7c86)}
.doors i:nth-of-type(1)::after{right:22px;box-shadow:-54px 0 0 0 #9aa7b0}
.doors i:nth-of-type(2)::after{left:22px;box-shadow:54px 0 0 0 #9aa7b0}
.doors i:nth-of-type(1){border-right:2px solid #050f18}
.doors b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--f-stencil);color:rgba(255,255,255,.85);font-size:clamp(1.6rem,4vw,3rem);letter-spacing:.06em;white-space:nowrap;transition:opacity .3s}
.doors b small{display:block;text-align:center;font-size:.45em;letter-spacing:.3em;color:var(--signal)}
html.doors-open .doors i:nth-of-type(1){transform:translateX(-101%)}
html.doors-open .doors i:nth-of-type(2){transform:translateX(101%)}
html.doors-open .doors b{opacity:0}
html:not(.js) .doors{display:none}
html.doors-closing .doors i{transform:translateX(0)!important}
html.doors-closing .doors b{opacity:1}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:clamp(600px,92vh,900px);color:var(--white);background:var(--ink);overflow:hidden;display:flex;flex-direction:column}
.hero-media{position:absolute;inset:0;animation:drift 38s ease-in-out infinite alternate}
.hero-media.flip{transform:scaleX(-1)}
.hero-media.flip{animation-name:driftFlip}
.slice{position:absolute;inset:-2px 0;background-size:cover;background-position:center;clip-path:inset(calc(var(--i) * 16.6667%) 0 calc((5 - var(--i)) * 16.6667%) 0);animation:sliceIn 1.25s var(--ease) both;animation-delay:calc(.15s + var(--i) * 85ms)}
.slice:nth-child(odd){--from:-105%}.slice:nth-child(even){--from:105%}
@keyframes sliceIn{from{transform:translateX(var(--from))}to{transform:none}}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-2%,1%)}}
@keyframes driftFlip{from{transform:scaleX(-1) scale(1.04)}to{transform:scaleX(-1) scale(1.12) translate(-2%,1%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(var(--shade-dir,270deg),rgba(10,27,43,.9) 0%,rgba(10,27,43,.55) 42%,rgba(10,27,43,.05) 75%),linear-gradient(0deg,rgba(10,27,43,.85),transparent 40%)}
html[lang="en"] .hero::before{--shade-dir:90deg}
.chart-grid{position:absolute;inset:0;z-index:1;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:120px 120px;mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 70%)}
.hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hdr) + 40px);padding-bottom:40px}
.hero .eyebrow{color:var(--brass)}
.hero h1{margin-block:.35em .3em;max-width:12ch}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.04em}
.hero h1 .ln>span{display:inline-block;animation:rise 1.1s var(--ease-out) both}
.hero h1 .ln:nth-child(1)>span{animation-delay:.55s}.hero h1 .ln:nth-child(2)>span{animation-delay:.7s}
.hero h1 em{font-style:normal;color:var(--signal)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{color:rgba(234,241,244,.82);max-width:46ch;animation:fade 1s .95s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem;animation:fade 1s 1.1s both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.compass{position:absolute;z-index:2;inset-inline-end:var(--gut);top:calc(var(--hdr) + 30px);width:clamp(90px,11vw,150px);opacity:.75;color:var(--white)}
.compass svg{width:100%;height:auto;display:block;transform:rotate(var(--rot,0deg));transition:transform .2s linear}
.instruments{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);background:rgba(10,27,43,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.instruments .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.inst{padding:1rem 0;padding-inline-end:1rem;display:grid;gap:.15rem;min-width:0}
.inst+.inst{border-inline-start:1px solid rgba(255,255,255,.14);padding-inline-start:1.2rem}
.inst .mono{color:var(--on-dark-mute);font-size:.68rem}
html[lang="ar"] .inst .mono{font-family:var(--f-body);letter-spacing:0;font-size:.78rem;text-transform:none}
.inst b{font-family:var(--f-mono);font-weight:500;font-size:clamp(.95rem,1.4vw,1.2rem);direction:ltr;unicode-bidi:isolate;text-align:start}
.inst b .blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
@media (max-width:760px){
  .instruments .wrap{grid-template-columns:1fr 1fr}
  .inst:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .inst:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .compass{display:none}
  .hero::before{background:linear-gradient(0deg,rgba(10,27,43,.95) 0%,rgba(10,27,43,.6) 55%,rgba(10,27,43,.3) 100%)}
}

/* ---------- ticker ---------- */
.ticker{background:var(--signal);color:var(--white);overflow:hidden;white-space:nowrap;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.ticker-track{display:inline-flex;gap:2.5rem;padding-block:.75rem;animation:marq 40s linear infinite}
html[lang="ar"] .ticker{font-family:var(--f-body);letter-spacing:0;font-size:.92rem;font-weight:500}
html[lang="ar"] .ticker-track{animation-name:marqR}
.ticker-track span{display:inline-flex;align-items:center;gap:2.5rem}
.ticker-track span::after{content:"";width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqR{to{transform:translateX(50%)}}

/* ---------- sections ---------- */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-dark{background:var(--ink);color:var(--on-dark)}
.sec-dark .lead,.sec-dark .muted{color:var(--on-dark-mute)}
.sec-mist{background:var(--mist)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:clamp(36px,5vw,64px)}
.sec-head>div{display:grid;gap:.9rem;max-width:760px;min-width:0}

/* intro statement */
.intro{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.statement{font-family:var(--f-body);font-size:clamp(1.55rem,2.9vw,2.6rem);line-height:1.5;margin:1.2rem 0 0;font-weight:600;text-wrap:pretty;letter-spacing:-.005em}
html[lang="en"] .statement{font-family:var(--f-body);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.js .statement.fill .w{color:rgba(10,27,43,.18);transition:color .25s}
.js .statement.fill .w.on{color:var(--ink)}
.statement .hl{color:var(--signal)!important}
.js .statement.fill .hl:not(.on){color:rgba(242,88,28,.25)!important}
.intro-side{display:grid;gap:1.2rem;min-width:0}
.photo-tag{position:relative;overflow:hidden;background:var(--ink)}
.photo-tag img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.photo-tag:hover img{transform:scale(1.05)}
.photo-tag figcaption{position:absolute;inset-inline-start:0;bottom:0;background:var(--paper);color:var(--ink);padding:.55em .9em;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:.8em}
html[lang="ar"] .photo-tag figcaption{font-family:var(--f-body);letter-spacing:0;font-size:.82rem;text-transform:none}
.photo-tag figcaption b{color:var(--signal);font-weight:600}
.intro-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.intro-facts div{padding:1rem 0;border-bottom:1px solid var(--line);display:grid;gap:.1rem}
.intro-facts div:nth-child(odd){padding-inline-end:1rem;border-inline-end:1px solid var(--line)}
.intro-facts div:nth-child(even){padding-inline-start:1rem}
.intro-facts b{font-family:var(--f-display-en);font-size:2.2rem;line-height:1;font-weight:800}
.intro-facts span{font-size:.88rem;color:var(--steel)}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* ---------- container yard ---------- */
.yard{position:relative;background:var(--paper)}
.yard-pin{overflow:hidden;padding-block:clamp(64px,8vw,110px) clamp(48px,6vw,80px)}
.yard.pinned .yard-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--hdr) + 10px) 30px}
.yard .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.yard-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gut);will-change:transform}
.yard:not(.pinned) .yard-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--signal) transparent}
.yard-progress{margin:28px var(--gut) 0;height:2px;background:var(--line);position:relative}
.yard-progress span{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--signal);transform:scaleX(var(--p,0));transform-origin:var(--o,right)}
html[lang="en"] .yard-progress span{--o:left}
.yard:not(.pinned) .yard-progress{display:none}

.box{--c:var(--signal);flex:0 0 clamp(268px,27vw,360px);scroll-snap-align:center;display:flex;flex-direction:column;color:var(--ink)}
.box-doors{position:relative;aspect-ratio:1/1.08;max-width:100%;perspective:1100px;background:#06111b;overflow:hidden;border:6px solid color-mix(in srgb,var(--c) 70%,#000);border-top-width:10px;border-bottom-width:12px}
.box-doors img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--ease-out);filter:saturate(1.05)}
.door{position:absolute;top:0;bottom:0;width:50%;background-color:var(--c);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,rgba(255,255,255,.07) 2px 4px,transparent 4px 13px,rgba(0,0,0,.08) 13px 15px,transparent 15px 22px),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12));transition:transform .95s var(--ease);backface-visibility:hidden;z-index:2}
.door-a{left:0;transform-origin:left center;border-right:1.5px solid rgba(0,0,0,.35)}
.door-b{right:0;transform-origin:right center}
.door::before,.door::after{content:"";position:absolute;top:4%;bottom:4%;width:5px;border-radius:3px;background:linear-gradient(90deg,#6f7d87,#dde4e8 45%,#7b8993);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.door-a::before{left:26%}.door-a::after{left:70%}
.door-b::before{left:26%}.door-b::after{left:70%}
.door-b i{position:absolute;top:46%;left:22%;width:34%;height:9px;background:linear-gradient(#cfd8de,#7b8993);border-radius:2px;transform:rotate(-8deg);transform-origin:left;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.code{position:absolute;z-index:3;top:9%;right:8%;left:8%;font-family:var(--f-stencil);color:rgba(255,255,255,.88);line-height:1;text-align:right;direction:ltr;pointer-events:none;transition:opacity .4s}
.code b{display:block;font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:800;letter-spacing:.04em}
.code b span{display:inline-block;border:2px solid currentColor;padding:0 .14em;margin-left:.15em}
.code small{display:block;font-size:clamp(.95rem,1.4vw,1.2rem);margin-top:.25em;font-weight:700}
.code em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;margin-top:.7em;opacity:.85}
.box:hover .door-a,.box:focus-visible .door-a,.box.open .door-a{transform:rotateY(-108deg)}
.box:hover .door-b,.box:focus-visible .door-b,.box.open .door-b{transform:rotateY(108deg)}
.box:hover .code,.box:focus-visible .code,.box.open .code{opacity:0}
.box:hover .box-doors img,.box.open .box-doors img{transform:scale(1)}
.box-cap{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem 1rem;align-items:start;padding:1.1rem .1rem 0}
.box-cap .num{font-family:var(--f-display-en);font-weight:800;font-size:2.2rem;line-height:.9;color:var(--c)}
.box-cap h3{margin:0;font-family:var(--f-display);font-size:1.25rem;line-height:1.35;font-weight:700;text-wrap:balance}
html[lang="en"] .box-cap h3{text-transform:uppercase;font-weight:800;font-size:1.35rem;line-height:1.1}
.box-cap p{grid-column:2/3;margin:.2rem 0 0;font-size:.9rem;color:var(--steel);line-height:1.6}
.box-cap .go{width:38px;height:38px;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.box:hover .go{background:var(--signal);border-color:var(--signal);color:var(--white)}
html[lang="ar"] .box-cap .go svg{transform:scaleX(-1)}

/* ---------- voyage route ---------- */
.voyage{position:relative;overflow:hidden}
.soundings{position:absolute;inset:0;pointer-events:none;font-family:var(--f-mono);font-size:.7rem;color:rgba(156,176,191,.22);direction:ltr}
.soundings span{position:absolute}
.voyage .chart-grid{opacity:.07;mask-image:none;-webkit-mask-image:none}
.voyage-grid{position:relative;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,100px)}
.voyage-aside{position:sticky;top:calc(var(--hdr) + 40px);align-self:start;display:grid;gap:1.2rem}
.voyage-aside .eyebrow{color:var(--brass)}
.route{position:relative;padding-inline-start:clamp(70px,9vw,120px)}
.route svg.path{position:absolute;top:0;inset-inline-start:0;width:clamp(60px,8vw,100px);height:100%;overflow:visible}
.route svg.path .base{fill:none;stroke:rgba(156,176,191,.3);stroke-width:1.5;stroke-dasharray:3 7}
.route svg.path .trail{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round}
.route .ship{position:absolute;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:2;color:var(--brass);will-change:transform}
.route ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,5vw,64px)}
.route li{position:relative;display:grid;gap:.3rem;padding-block:.4rem;opacity:.42;transition:opacity .5s}
.route li.on{opacity:1}
.no-js .route li,html:not(.js) .route li{opacity:1}
.route li .mono{color:var(--signal)}
.route li h3{margin:0;font-family:var(--f-display);font-size:clamp(1.3rem,2.1vw,1.85rem);font-weight:700;line-height:1.3}
html[lang="en"] .route li h3{text-transform:uppercase;font-weight:800;line-height:1.1}
.route li p{margin:0;color:var(--on-dark-mute);max-width:52ch}
@media (max-width:900px){.voyage-grid{grid-template-columns:1fr}.voyage-aside{position:static}}

/* ---------- signal flags ---------- */
.flags{padding-block:clamp(56px,7vw,96px);overflow:hidden;border-block:1px solid var(--line)}
.flags-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2.2rem}
.flag-rail{display:flex;width:max-content;animation:marq 46s linear infinite}
html[lang="ar"] .flag-rail{animation-name:marqR}
.flag-rail:hover{animation-play-state:paused}
.flag-set{display:flex}
.fv{display:flex;align-items:center;gap:1.1rem;padding-inline:clamp(22px,3vw,44px);border-inline-end:1px solid var(--line)}
.flag{width:66px;aspect-ratio:3/2;flex-shrink:0;box-shadow:0 0 0 1px rgba(10,27,43,.15);position:relative;animation:wave 3.2s ease-in-out infinite;transform-origin:left center}
html[lang="ar"] .flag{transform-origin:right center}
.fv:nth-child(2n) .flag{animation-delay:-1.2s}
.fv:nth-child(3n) .flag{animation-delay:-2s}
@keyframes wave{0%,100%{transform:perspective(200px) rotateY(0) skewY(0)}50%{transform:perspective(200px) rotateY(-14deg) skewY(2deg)}}
.flag-C{background:linear-gradient(#1D4C9B 0 20%,#fff 20% 40%,#D52B2B 40% 60%,#fff 60% 80%,#1D4C9B 80%)}
.flag-R{background:linear-gradient(#F4C400,#F4C400) center/100% 20% no-repeat,linear-gradient(#F4C400,#F4C400) center/13.3% 100% no-repeat,#D52B2B}
.flag-T{background:linear-gradient(90deg,#D52B2B 0 33.33%,#fff 33.33% 66.66%,#1D4C9B 66.66%)}
.flag-I{background:radial-gradient(circle at center,#111 0 26%,#F4C400 27%)}
.flag-S{background:linear-gradient(#1D4C9B,#1D4C9B) center/33.3% 50% no-repeat,#fff}
.flag-Q{background:#F4C400}
.fv b{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.3rem);white-space:nowrap;font-weight:700}
html[lang="en"] .fv b{text-transform:uppercase;font-weight:800}
.fv small{display:block;font-family:var(--f-mono);font-size:.66rem;color:var(--steel);letter-spacing:.1em}

/* ---------- distributors ---------- */
.dist{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-d)}
.dist>div{padding:clamp(28px,4vw,56px);display:grid;gap:.6rem;align-content:start;position:relative;overflow:hidden}
.dist>div+div{border-inline-start:1px solid var(--line-d)}
.dist .brandname{font-family:var(--f-display-en);font-weight:900;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.9;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px var(--on-dark);transition:color .5s,-webkit-text-stroke-color .5s}
.dist>div:hover .brandname{color:var(--brass);-webkit-text-stroke-color:var(--brass)}
.dist ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.dist li{border:1px solid var(--line-d);padding:.3em .8em;font-size:.86rem;color:var(--on-dark-mute)}
@media (max-width:760px){.dist{grid-template-columns:1fr}.dist>div+div{border-inline-start:0;border-top:1px solid var(--line-d)}}

/* ---------- ISO odometers ---------- */
.iso-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.iso{padding:1.4rem 0 1.4rem;padding-inline-end:1rem;display:grid;gap:.6rem;border-bottom:1px solid var(--line);min-width:0}
.iso+.iso{border-inline-start:1px solid var(--line);padding-inline-start:1.2rem}
.odo{display:flex;direction:ltr;justify-content:flex-start;font-family:var(--f-stencil);font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;height:1em;overflow:hidden}
html[lang="ar"] .odo{justify-content:flex-end}
.odo .col{display:flex;flex-direction:column;transition:transform 1.8s var(--ease-out)}
.odo .col span{height:1em;display:block}
.iso .mono{color:var(--signal)}
.iso p{margin:0;font-size:.92rem;color:var(--steel);line-height:1.5}
@media (max-width:900px){.iso-row{grid-template-columns:1fr 1fr}.iso:nth-child(3){border-inline-start:0;padding-inline-start:0}}
@media (max-width:420px){.odo{font-size:2.1rem}}

/* ---------- quote ---------- */
.quote{display:grid;grid-template-columns:.9fr 1.1fr;min-height:520px}
.quote-img{position:relative;overflow:hidden;min-height:340px}
.quote-img img{position:absolute;inset:0;width:100%;height:115%;object-fit:cover;will-change:transform}
.quote-body{padding:clamp(40px,6vw,96px) var(--gut);display:grid;align-content:center;gap:1.4rem;background:var(--ink-2);color:var(--on-dark)}
.quote-body blockquote{margin:0;font-family:var(--f-body);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.45;font-weight:500}
html[lang="en"] .quote-body blockquote{font-family:var(--f-body);font-weight:500;line-height:1.3}
.quote-body blockquote::before{content:"“";display:block;font-family:var(--f-display-en);font-size:5rem;line-height:.6;color:var(--signal);margin-bottom:.2rem}
html[lang="ar"] .quote-body blockquote::before{content:"”"}
.quote-body cite{font-style:normal;display:grid;gap:.1rem}
.quote-body cite b{font-size:1.1rem}
.quote-body cite span{color:var(--on-dark-mute);font-size:.9rem}
@media (max-width:860px){.quote{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--signal);color:var(--white);padding-block:clamp(72px,9vw,130px)}
.cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem 4rem;align-items:end}
.cta .h-xl{font-size:clamp(2.6rem,7vw,6.4rem)}
.cta-lines{display:grid;gap:.6rem}
.cta-lines a{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-bottom:1.5px solid rgba(255,255,255,.5);padding-block:.75rem;font-family:var(--f-mono);font-size:clamp(1rem,1.5vw,1.25rem);transition:padding .35s var(--ease),border-color .3s}
.cta-lines a span:last-child{direction:ltr;unicode-bidi:isolate}
.cta-lines a:hover{padding-inline:.6rem;border-color:var(--white)}
.cta-lines a small{font-family:var(--f-body);font-size:.85rem;opacity:.85}
.cta .btn{border-color:var(--white)}
.cta .btn::before{background:var(--ink)}
.cta .btn:hover{border-color:var(--ink)}
.cta-stripes{position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 18px,rgba(255,255,255,.7) 18px 20px,transparent 20px 36px)}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;padding-top:clamp(64px,8vw,110px)}
.ftr canvas{position:absolute;left:0;right:0;bottom:64px;width:100%;height:200px;pointer-events:none}
.ftr-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem 3rem}
.ftr h4{margin:0 0 1rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:500}
html[lang="ar"] .ftr h4{font-family:var(--f-body);letter-spacing:0;font-size:.9rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ftr ul a{color:var(--on-dark-mute);transition:color .3s}
.ftr ul a:hover{color:var(--signal)}
.ftr .ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--f-mono);font-size:.92rem}
.ftr-brand{display:grid;gap:1rem;align-content:start}
.ftr-brand img{width:84px}
.ftr-brand p{margin:0;color:var(--on-dark-mute);max-width:36ch;font-size:.93rem}
.wordmark{position:relative;z-index:1;font-family:var(--f-display-ar);font-weight:700;font-size:clamp(3.4rem,15vw,15rem);line-height:1.15;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(234,241,244,.22);margin-top:clamp(40px,6vw,80px);user-select:none}
html[lang="en"] .wordmark{font-family:var(--f-display-en);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,12.5vw,13rem);line-height:1}
.ftr-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding-block:1.3rem calc(1.3rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-d);font-size:.82rem;color:var(--on-dark-mute)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}}
@media (max-width:480px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- anchor / back to top ---------- */
.totop{position:fixed;z-index:40;inset-inline-end:max(16px,var(--gut));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s var(--ease-out),background .3s;box-shadow:0 8px 24px rgba(10,27,43,.25)}
.totop.show{opacity:1;transform:none}
.totop:hover{background:var(--signal)}
.totop svg.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.totop svg.ring circle{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:calc(151 - 151 * var(--p,0))}
.totop:hover svg.ring circle{stroke:var(--white)}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;background:var(--ink);color:var(--white);min-height:clamp(440px,64vh,640px);display:flex;overflow:hidden}
.phero-media{position:absolute;inset:0}
.phero-media .vs{position:absolute;inset:0 -1px;background-size:cover;background-position:center;clip-path:inset(0 calc((3 - var(--i)) * 25%) 0 calc(var(--i) * 25%));animation:vsIn 1.2s var(--ease) both;animation-delay:calc(.1s + var(--i) * 90ms)}
.phero-media .vs:nth-child(odd){--from:-105%}.phero-media .vs:nth-child(even){--from:105%}
@keyframes vsIn{from{transform:translateY(var(--from))}to{transform:none}}
.phero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,27,43,.92) 0%,rgba(10,27,43,.45) 60%,rgba(10,27,43,.35) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--hdr) + 40px);padding-bottom:clamp(36px,5vw,64px);gap:1rem}
.crumbs{display:flex;gap:.6rem;font-size:.85rem;color:var(--on-dark-mute)}
.crumbs a:hover{color:var(--signal)}
.crumbs span[aria-hidden]{color:var(--signal)}
.phero h1{margin:0;max-width:16ch}
.phero h1 .ln{display:block;overflow:hidden}
.phero h1 .ln>span{display:inline-block;animation:rise 1s .45s var(--ease-out) both}
.phero .lead{color:rgba(234,241,244,.82);animation:fade 1s .7s both}
.phero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.6rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:var(--brass);animation:fade 1s .85s both}

/* ---------- reveal (only below-the-fold items get .pre) ---------- */
.rv{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),clip-path 1.1s var(--ease)}
.rv.pre{opacity:0;transform:translateY(34px)}
.rv-img{transition:clip-path 1.2s var(--ease)}
.rv-img.pre{clip-path:inset(0 0 100% 0)}

/* ---------- about ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,100px);align-items:start}
.story-text{display:grid;gap:1.2rem;min-width:0}
.story-text p{margin:0;max-width:62ch}
.story-text .big{font-family:var(--f-display);font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.5;font-weight:500;color:var(--ink)}
html[lang="en"] .story-text .big{font-family:var(--f-body);line-height:1.35;font-weight:500}
.collage{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(60px,7vw,100px);gap:12px}
.collage figure{margin:0}
.collage .c1{grid-column:1/5;grid-row:1/4}
.collage .c2{grid-column:4/7;grid-row:3/6;box-shadow:0 0 0 10px var(--paper)}
.collage .c3{grid-column:1/4;grid-row:4/7}
.collage figure{position:relative;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.story{grid-template-columns:1fr}}

.charter{font-family:var(--f-display);font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.45;margin:0;max-width:24ch;font-weight:500;text-wrap:balance}
html[lang="en"] .charter{font-family:var(--f-display-en);text-transform:uppercase;font-weight:800;line-height:1.05;max-width:20ch}
.charter-row{display:grid;grid-template-columns:auto 1fr;gap:2rem 4rem;align-items:center}
.seal{width:clamp(130px,16vw,200px);aspect-ratio:1;position:relative}
.seal svg{width:100%;height:100%;animation:spin 30s linear infinite}
.seal img{position:absolute;inset:26%;width:48%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.charter-row{grid-template-columns:1fr}}

.letter{display:grid;grid-template-columns:1fr 1.1fr;background:var(--ink-2);color:var(--on-dark)}
.letter-img{position:relative;min-height:360px;overflow:hidden}
.letter-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.letter-body{padding:clamp(40px,6vw,96px) var(--gut);display:grid;gap:1.2rem;align-content:center}
.letter-body .basmala{font-family:var(--f-display-ar);color:var(--brass);font-size:1.3rem}
.letter-body p{margin:0;color:rgba(234,241,244,.86);max-width:58ch}
.sign{display:flex;align-items:center;gap:1rem;margin-top:.8rem;padding-top:1.2rem;border-top:1px solid var(--line-d)}
.sign svg{width:120px;height:44px;color:var(--brass)}
.sign b{display:block;font-size:1.1rem}
.sign span{color:var(--on-dark-mute);font-size:.88rem}
@media (max-width:860px){.letter{grid-template-columns:1fr}}

.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.value{padding:2rem 0;padding-inline-end:2rem;border-bottom:1px solid var(--line);display:grid;gap:.8rem;align-content:start;min-width:0}
.value:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line);padding-inline-start:2rem}
.value .flag{width:72px}
.value h3{margin:0;font-family:var(--f-display);font-size:1.6rem;font-weight:700}
html[lang="en"] .value h3{text-transform:uppercase;font-weight:800}
.value p{margin:0;color:var(--steel)}
.value .mono{color:var(--steel)}
@media (max-width:860px){.values{grid-template-columns:1fr 1fr}.value:not(:nth-child(3n+1)){border-inline-start:0;padding-inline-start:0}.value:nth-child(even){border-inline-start:1px solid var(--line);padding-inline-start:1.4rem}}
@media (max-width:520px){.values{grid-template-columns:1fr}.value:nth-child(even){border-inline-start:0;padding-inline-start:0}}

/* ---------- services page ---------- */
.svc-layout{display:grid;grid-template-columns:290px 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.manifest-idx{position:sticky;top:calc(var(--hdr) + 24px);border:1.5px solid var(--ink);background:var(--paper)}
.manifest-idx header{padding:.9rem 1rem;background:var(--ink);color:var(--white);display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em}
.manifest-idx ol{list-style:none;margin:0;padding:0}
.manifest-idx a{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;padding:.7rem 1rem;border-top:1px solid var(--line);font-size:.92rem;position:relative;transition:background .3s,color .3s}
.manifest-idx a .sw{width:12px;height:12px;background:var(--c)}
.manifest-idx a:hover{background:var(--mist)}
.manifest-idx a.on{background:var(--ink);color:var(--white)}
.manifest-idx .bar{height:3px;background:var(--line)}
.manifest-idx .bar span{display:block;height:100%;background:var(--signal);transform:scaleX(var(--p,0));transform-origin:var(--o,right)}
html[lang="en"] .manifest-idx .bar span{--o:left}
.svc{padding-block:clamp(40px,6vw,80px);border-top:2px solid var(--ink);scroll-margin-top:calc(var(--hdr) + 10px)}
.svc:first-child{border-top:0;padding-top:0}
.svc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;align-items:center;margin-bottom:1.4rem}
.svc-top .ccode{font-family:var(--f-stencil);font-weight:800;font-size:1.15rem;letter-spacing:.04em;direction:ltr;display:inline-flex;align-items:center;gap:.6rem}
.svc-top .ccode i{width:16px;height:16px;background:var(--c);display:inline-block}
.svc-top .mono{color:var(--steel)}
.svc h2{margin-bottom:1rem}
.svc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:1.6rem}
.svc-grid>*{min-width:0}
.svc-photo{position:relative;aspect-ratio:4/4.6;max-width:100%;overflow:hidden;background:var(--ink)}
.svc-photo.wide{aspect-ratio:16/7;grid-column:1/-1}
.svc-photo img{width:100%;height:100%;object-fit:cover}
.svc-photo::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:10px;background:var(--c)}
.svc-type{aspect-ratio:4/4.6;max-width:100%;background:var(--ink);color:var(--on-dark);display:grid;align-content:space-between;padding:1.6rem;position:relative;overflow:hidden}
.svc-type .tbrand{font-family:var(--f-display-en);font-weight:900;font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:.9;direction:ltr;text-align:left}
.svc-type .tbrand span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--brass)}
.svc-type .drums{display:flex;gap:10px;align-items:flex-end;direction:ltr}
.svc-type .drums i{width:22%;aspect-ratio:1/1.35;border-radius:6px/10px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 40%,rgba(0,0,0,.3)),var(--dc);position:relative}
.svc-type .drums i::before,.svc-type .drums i::after{content:"";position:absolute;inset-inline:0;height:3px;background:rgba(0,0,0,.35)}
.svc-type .drums i::before{top:30%}.svc-type .drums i::after{top:65%}
.mtable{width:100%;border-collapse:collapse;font-size:.95rem}
.mtable caption{text-align:start;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding-bottom:.6rem}
html[lang="ar"] .mtable caption{font-family:var(--f-body);letter-spacing:0;font-size:.85rem;text-transform:none}
.mtable th,.mtable td{text-align:start;padding:.75rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.mtable thead th{font-family:var(--f-mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;color:var(--steel);border-bottom:1.5px solid var(--ink)}
html[lang="ar"] .mtable thead th{font-family:var(--f-body);font-size:.8rem;letter-spacing:0}
.mtable td.n{font-family:var(--f-mono);color:var(--signal);width:3.2em;font-size:.82rem;padding-top:.95rem}
.mtable td b{display:block;font-weight:600}
.mtable td small{display:block;color:var(--steel);font-size:.86rem;line-height:1.55;margin-top:.15rem}
.mtable tbody tr{transition:background .25s}
.mtable tbody tr:hover{background:var(--mist)}
@media (max-width:1000px){.svc-layout{grid-template-columns:1fr}.manifest-idx{position:static}.manifest-idx ol{display:grid;grid-template-columns:1fr 1fr}.manifest-idx ol a{border-inline-start:1px solid var(--line)}}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}.svc-photo,.svc-type{aspect-ratio:4/3}}
@media (max-width:480px){.manifest-idx ol{grid-template-columns:1fr}}

/* ---------- certificates ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.cert{display:grid;gap:1rem;text-align:start;perspective:900px}
.cert-frame{position:relative;background:var(--white);padding:12px;box-shadow:0 1px 0 var(--line),0 24px 50px -24px rgba(10,27,43,.35);transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--ease-out),box-shadow .5s;transform-style:preserve-3d}
.cert:hover .cert-frame{box-shadow:0 1px 0 var(--line),0 40px 70px -28px rgba(10,27,43,.5)}
.cert-frame img{width:100%;aspect-ratio:218/310;object-fit:cover;object-position:top}
.cert-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);background-size:250% 100%;background-position:var(--sx,120%) 0;pointer-events:none;mix-blend-mode:soft-light}
.cert-meta{display:grid;gap:.2rem}
.cert-meta .std{font-family:var(--f-stencil);font-weight:800;font-size:1.7rem;line-height:1;direction:ltr;text-align:start}
html[lang="ar"] .cert-meta .std{text-align:right}
.cert-meta b{font-weight:600}
.cert-meta span{color:var(--steel);font-size:.9rem}
.cert-btn{all:unset;cursor:zoom-in;display:block}
.cert-btn:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
@media (max-width:900px){.certs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.certs{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(6,14,22,.92);display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-height:86vh;width:auto;max-width:min(92vw,720px);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.94);transition:transform .5s var(--ease-out)}
.lightbox.open img{transform:none}
.lightbox button{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));inset-inline-end:16px;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.6);color:var(--white);font-size:1.4rem}
.lightbox p{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:var(--on-dark);margin:0;font-size:.9rem}
.license-band{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 3rem;align-items:center;padding:clamp(24px,3vw,40px);border:1.5px solid var(--ink);background:var(--white)}
.license-band .no{font-family:var(--f-stencil);font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;direction:ltr}
.license-band p{margin:0;color:var(--steel)}
.license-band b{display:block;font-size:1.15rem;color:var(--ink)}
@media (max-width:760px){.license-band{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.contact-grid>*{min-width:0}
.panel{background:var(--ink);color:var(--on-dark);padding:clamp(24px,3.4vw,44px);display:grid;gap:1.4rem;position:relative;overflow:hidden}
.panel .row{display:grid;gap:.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line-d)}
.panel .row:last-of-type{border-bottom:0;padding-bottom:0}
.panel .row .mono{color:var(--brass)}
html[lang="ar"] .panel .row .mono{font-family:var(--f-body);letter-spacing:0;font-size:.85rem;text-transform:none}
.panel .val{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.panel .val a,.panel .val .t{font-family:var(--f-mono);font-size:clamp(1.05rem,1.8vw,1.4rem);direction:ltr;unicode-bidi:isolate;word-break:break-all}
.panel .val a:hover{color:var(--signal)}
.copy{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-d);padding:.35em .7em;color:var(--on-dark-mute);transition:all .3s}
html[lang="ar"] .copy{font-family:var(--f-body);letter-spacing:0;font-size:.8rem}
.copy:hover{border-color:var(--signal);color:var(--signal)}
.copy.ok{background:var(--signal);border-color:var(--signal);color:var(--white)}
.panel address{font-style:normal;color:var(--on-dark)}
.panel .clock{font-family:var(--f-stencil);font-size:clamp(2.6rem,5vw,4rem);font-weight:800;line-height:1;direction:ltr;text-align:start;color:var(--white)}
html[lang="ar"] .panel .clock{text-align:right}
.radar{position:absolute;inset-inline-end:-80px;top:-80px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(201,154,46,.25);background:repeating-radial-gradient(circle,transparent 0 30px,rgba(201,154,46,.12) 30px 31px);pointer-events:none}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(242,88,28,.35),transparent 25%);animation:spin 4s linear infinite}
.wa{display:inline-flex;align-items:center;gap:.6rem;background:#1FAF55;color:var(--white);padding:.8em 1.2em;font-weight:600;transition:transform .3s var(--ease-out)}
.wa:hover{transform:translateY(-3px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.4rem}
.field{display:grid;gap:.35rem;position:relative;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(10,27,43,.35);padding:.7em 0;border-radius:0;outline:none;width:100%;transition:border-color .3s}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:left 10px center,left 4px center;background-size:6px 6px;background-repeat:no-repeat}
html[lang="en"] .field select{background-position:right 4px center,right 10px center;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%)}
.field::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .45s var(--ease)}
html[lang="en"] .field::after{--o:left}
.field:focus-within::after{transform:scaleX(1)}
.field input[type="tel"],.field input[type="email"]{direction:ltr;text-align:start}
html[lang="ar"] .field input[type="tel"],html[lang="ar"] .field input[type="email"]{text-align:right}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.form-msg{font-size:.92rem;color:var(--steel)}
.form-msg.ok{color:#1d7a43}.form-msg.err{color:#b23a1e}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .doors{display:none}
  .rv.pre,.rv-img.pre{opacity:1;transform:none;clip-path:none}
}
.ftr-bottom .credit a{font-family:var(--f-display-en);font-weight:800;letter-spacing:.08em;color:var(--on-dark);border-bottom:1px solid var(--brass);padding-bottom:1px;transition:color .3s,border-color .3s}
.ftr-bottom .credit a:hover{color:var(--signal);border-color:var(--signal)}
/* brand words: always fit their box (Alexandria is wide) */
.dist>div,.svc-type{container-type:inline-size}
.dist .brandname{display:block;direction:ltr;text-align:left;white-space:nowrap;font-size:clamp(1.8rem,12.5cqi,4.6rem);line-height:1.05;letter-spacing:-.02em;font-weight:800}
html[lang="ar"] .dist .brandname{text-align:right}
.svc-type .tbrand{font-size:clamp(1.6rem,12cqi,3.6rem);line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.dist .brandname{color:var(--on-dark);-webkit-text-stroke:0}
.dist>div:hover .brandname{color:var(--brass);-webkit-text-stroke:0}
.svc-type .tbrand span{color:var(--brass);-webkit-text-stroke:0}
.wordmark{color:rgba(234,241,244,.07);-webkit-text-stroke:0}