/* Relay theme layer — warm charcoal, tan type accents, orange for CTAs and the cup */
:root{--void:#0e0d0c;--base:#0e0d0c;--base2:#1a1816;--panel:#1e1c1a;--surface:#2a2826;--border:#3a3836;--borderL:#5c5854;
--line:#3a3836;--line2:#2c2a28;--hair:rgba(240,236,230,.06);--glassA:rgba(240,236,230,.035);--glassB:rgba(240,236,230,.012);
--ink:#f0ece6;--ink2:#a9a298;--ink3:#8a847a;--ink4:#5c5854;--tan:#c8b89a;--tanD:#9a8e78;
--o:#F15A24;--oG:#FF7A45;--cy:var(--tan);--blue:var(--tan);--vio:var(--tan);--gold:#F9B233;--grn:#1AA37A;--acc:var(--tan);--teal:var(--tan);--tech:var(--tan);--green:var(--grn);
--glow:0 0 0 1px var(--border),0 24px 60px -30px rgba(0,0,0,.9)}
body{background:var(--base)}
body::before{background:radial-gradient(60% 40% at 50% -10%,rgba(200,184,154,.07),transparent 65%)}
body::after{opacity:.16;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .78 0 0 0 0 .74 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(#n)'/></svg>");background-size:160px 160px;mix-blend-mode:overlay;animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}
::selection{background:rgba(200,184,154,.35);color:#fff}
.d1,.d2,.stat .num{background:linear-gradient(174deg,#f0ece6 10%,#d9d2c6 55%,#9a8e78 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl{color:var(--tanD);letter-spacing:.2em;font-size:10px}
.tl::before{box-shadow:none;width:14px;height:1px;border-radius:0;background:var(--acc)}
.tl.a{--acc:var(--o);color:#F58A5E}.tl.t,.tl.b{--acc:var(--tan);color:var(--tan)}.tl.g{--acc:var(--grn);color:#7fc9a6}.tl.y{--acc:var(--gold);color:#F9B233}
.s.white{background:linear-gradient(180deg,#141210,#1a1816);backdrop-filter:none}
.s.dark{background:#0e0d0c}
.s+.s::before{background:var(--border)}
/* buttons — theme's 1px outline language, orange reserved for primary */
.btn{border-radius:4px;letter-spacing:.1em;font-weight:400}
.btn::after{display:none}
.btn.p{background:var(--o);color:#fff;border-color:var(--o);box-shadow:none}
.btn.p:hover{background:#ff6b36;border-color:#ff6b36;box-shadow:0 0 0 1px rgba(241,90,36,.35),0 12px 30px -14px rgba(241,90,36,.8)}
.btn.s{background:transparent;border-color:var(--borderL);color:var(--tan)}
.btn.s:hover{border-color:var(--tan);color:#fff;box-shadow:none;background:rgba(200,184,154,.06)}
.nlink::after{background:var(--tan)}
header.solid{background:rgba(14,13,12,.78);border-bottom-color:var(--border)}
/* corner marks + status bar */
.cm{position:fixed;width:20px;height:20px;opacity:.5;pointer-events:none;z-index:95;border:0 solid var(--borderL)}
.cm.tl_{top:16px;left:16px;border-top-width:1px;border-left-width:1px}.cm.tr_{top:16px;right:16px;border-top-width:1px;border-right-width:1px}
.cm.bl_{bottom:16px;left:16px;border-bottom-width:1px;border-left-width:1px}.cm.br_{bottom:16px;right:16px;border-bottom-width:1px;border-right-width:1px}
.status{position:fixed;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--tanD);opacity:.75;z-index:94;pointer-events:none;background:linear-gradient(0deg,rgba(14,13,12,.9),transparent)}
.status b{font-weight:400;color:var(--tan)}
@media(max-width:700px){.status{display:none}}
/* ── HERO: full-bleed relay stage ── */
.hero{background:#0e0d0c;padding:0;min-height:100svh;display:block}
.hero::before{display:none}
#relay{position:absolute;inset:0;z-index:0;cursor:crosshair;opacity:0;transition:opacity 1.6s ease}
#relay.ready{opacity:1}
#relay canvas{display:block;width:100%!important;height:100%!important}
#relay.hit{cursor:cell}
.hero .wrap{position:relative;z-index:2;min-height:100svh;display:grid;align-items:center;padding-top:110px;padding-bottom:110px;pointer-events:none}
.hero .wrap a,.hero .wrap button{pointer-events:auto}
.herogrid{grid-template-columns:minmax(0,.56fr) minmax(0,.44fr)}
.heroL .class{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tanD);margin-bottom:6px}
.heroL .rule{height:1px;background:var(--borderL);opacity:.6;margin-bottom:22px;width:min(100%,520px)}
.hero h1{margin:0}
.d1{font-size:clamp(44px,6.2vw,92px);font-weight:600;letter-spacing:-.045em}
.heroL .sub{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-top:16px}
.heroL .lede{margin-top:26px;color:var(--ink2)}
.heroL .ver{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--tanD);opacity:.7;text-transform:uppercase;margin-top:34px}
.telem{margin-top:22px}
.telem span{border-color:var(--border)!important}
/* readouts on the right — the theme's overlay buttons */
.readout{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-self:end;align-self:end;margin-bottom:12px}
.ro{display:flex;gap:14px;align-items:center;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:4px;background:rgba(30,28,26,.6);backdrop-filter:blur(6px);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);opacity:0;transform:translateX(10px);transition:opacity .7s,transform .7s,border-color .2s}
.ro.in{opacity:1;transform:none}
.ro b{font-weight:400;color:var(--tan)}
.ro i{width:6px;height:6px;border-radius:50%;background:var(--o);box-shadow:0 0 10px var(--o)}
.ro:hover{border-color:var(--tan)}
.hint{position:absolute;left:var(--pad);bottom:48px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink4);z-index:2;pointer-events:none}
@media(max-width:900px){.herogrid{grid-template-columns:1fr}.readout{align-items:flex-start;justify-self:start}.hero .wrap{align-items:end;padding-bottom:120px}}
/* cups elsewhere — warm paper, orange band, tan glow instead of cyan */
.cup .body{background:linear-gradient(96deg,rgba(200,184,154,.16) 0%,rgba(255,255,255,.03) 12%,transparent 26%),linear-gradient(100deg,#2a2622 0%,#f3eee6 20%,#FFFFFF 42%,#d8d0c2 66%,#8e857a 86%,#33302b 100%)}
.cup .rim{box-shadow:0 0 14px -3px rgba(200,184,154,.45)}
.cup .sh{background:radial-gradient(closest-side,rgba(200,184,154,.28),transparent)}
/* panels get the theme's 1px border + 4px radius */
.wall,.lidc,.reelfig,.cnode,.icc,.cbrief,.szspec,.xsec,.lane,.sopr{border-radius:4px}
.stat::before{background:var(--tan)}
.ecoc:hover .fig svg,.ecoc:hover .link{color:var(--tan);stroke:var(--tan)}
.scrollcue::after{background:linear-gradient(var(--tan),transparent)}
footer{border-top:1px solid var(--border)}

/* ── UAE delivery map (d3) ── */
.umap{position:relative;min-height:300px}
.umap svg{width:100%;height:auto;overflow:visible}
.umap-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4);border:1px dashed var(--border);border-radius:4px}
.umap.offline .umap-fallback{display:flex}
.ulbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--ink3)}
.ulbl.hi{fill:#FFD3B8;font-weight:500}.ulbl.t{fill:var(--gold);font-size:8.5px;letter-spacing:.1em}
.upulse{transform-origin:center;transform-box:fill-box;animation:upulse 2.8s ease-out infinite}.upulse.p2{animation-delay:1.4s}
@keyframes upulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
.uroutes{opacity:.95}