:root{
  --void:#04091A;
  --deep:#0A1836;
  --navy:#0B1F4B;
  --line:#182A4F;
  --line-soft:#101E3C;
  --signal:#C9A84C;
  --signal-hot:#F2DCA4;
  --mist:#AEBFD8;
  --mist-dim:#8092AE;
  --paper:#F5F1E8;
  --paper-ink:#0B1F4B;
  --paper-mute:#57647F;

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --arabic:'Noto Kufi Arabic','Segoe UI',sans-serif;

  --gut:clamp(20px,5vw,84px);
  --maxw:1300px;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--void);
  color:var(--mist);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--display);font-weight:600;color:#fff;margin:0;text-wrap:balance;line-height:1.05;letter-spacing:-0.015em;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);width:100%;}

/* ============ the field ============
   It sits behind everything, but only the stage sections are transparent,
   so it is seen in full or not at all. Reading never happens over it. */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:overlay;
}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 95% at 50% 45%, rgba(4,9,26,0) 40%, rgba(4,9,26,.78) 100%);}
main,.nav,.foot{position:relative;z-index:3;}

/* reticle */
.retic{position:fixed;top:0;left:0;z-index:80;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0;transition:opacity .35s, transform .12s cubic-bezier(.16,1,.3,1);}
.retic svg{width:100%;height:100%;display:block;}
body.pointer-fine.stage-on .retic.on{opacity:.75;}
.retic.hot{transform:scale(1.45);opacity:1;}
@media(hover:none){.retic{display:none;}}

/* HUD, only while the field is on screen */
.hud{
  position:fixed;left:var(--gut);bottom:26px;z-index:40;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);display:flex;flex-direction:column;gap:7px;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
}
body.ready.stage-on .hud{opacity:1;}
.hud-row{display:flex;align-items:center;gap:10px;}
.hud-k{color:var(--mist-dim);opacity:.6;}
.hud-v{color:var(--signal);font-variant-numeric:tabular-nums;}
.hud-v.ar{font-family:var(--arabic);letter-spacing:0;font-size:11px;}
.hud-bar{width:88px;height:1px;background:var(--line);position:relative;overflow:hidden;}
.hud-bar i{position:absolute;inset:0 auto 0 0;background:var(--signal);width:0%;}
@media(max-width:1100px){.hud{display:none;}}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(4,9,26,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(-12px);
  transition:opacity .9s ease .9s, transform .9s cubic-bezier(.16,1,.3,1) .9s;
}
body.ready .nav{opacity:1;transform:none;}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand-mark{width:26px;height:26px;flex:none;}
.brand-txt{display:flex;flex-direction:column;line-height:1;gap:3px;}
.brand-txt b{font-family:var(--display);font-size:20px;font-weight:700;color:#fff;letter-spacing:.06em;}
.brand-txt span{font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--signal);}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{font-size:13.5px;text-decoration:none;color:var(--mist);transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-cta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--signal);border:1px solid rgba(201,168,76,.4);padding:10px 17px;transition:background .25s,color .25s;white-space:nowrap;}
.nav-cta:hover{background:var(--signal);color:var(--void);}
@media(max-width:940px){.nav-links{display:none;}}

/* ============ shared ============ */
.tag{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);display:flex;align-items:center;gap:11px;}
.tag::before{content:"";width:26px;height:1px;background:var(--signal);flex:none;opacity:.65;}
.ar{font-family:var(--arabic);direction:rtl;}

.btn{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;padding:16px 28px;display:inline-flex;align-items:center;gap:11px;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,color .25s,border-color .25s;}
.btn-gold{background:var(--signal);color:var(--void);font-weight:500;}
.btn-gold:hover{background:var(--signal-hot);transform:translateY(-3px);}
.btn-ghost{border:1px solid var(--line);color:var(--mist);}
.btn-ghost:hover{border-color:var(--signal);color:#fff;transform:translateY(-3px);}

/* ============ hero: a stage, field to the right, copy to the left ============ */
.hero{position:relative;min-height:clamp(620px,96vh,1000px);display:flex;align-items:center;background:transparent;}
.hero-grid{max-width:640px;display:flex;flex-direction:column;gap:28px;}

.line{display:block;overflow:hidden;}
.line > i{display:block;font-style:inherit;transform:translateY(108%);transition:transform 1.15s cubic-bezier(.16,1,.3,1);}
body.ready .line > i{transform:none;}
body.ready .l1 > i{transition-delay:.35s;}
body.ready .l2 > i{transition-delay:.47s;}

.fade{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);}
body.ready .fade{opacity:1;transform:none;}
body.ready .d1{transition-delay:.15s;}
body.ready .d2{transition-delay:.85s;}
body.ready .d3{transition-delay:1s;}
body.ready .d4{transition-delay:1.15s;}

.hero h1{font-size:clamp(54px,8.8vw,124px);font-weight:600;letter-spacing:-0.03em;}
.hero h1 em{font-style:italic;font-weight:400;color:var(--signal);position:relative;}
.hero h1 em::after{content:"";position:absolute;left:.04em;right:.16em;bottom:.09em;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.16,1,.3,1) 1.25s;}
body.ready .hero h1 em::after{transform:scaleX(1);}
.hero-ar{font-family:var(--arabic);direction:rtl;font-size:clamp(15px,1.5vw,19px);color:var(--mist-dim);margin-top:-8px;}
.hero-lede{font-size:clamp(16px,1.35vw,19px);max-width:48ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
/* the hero copy sits on its own ground so the field never fights it */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(4,9,26,.97) 0%,rgba(4,9,26,.92) 38%,rgba(4,9,26,.4) 56%,rgba(4,9,26,0) 74%);}

.readout{position:absolute;right:var(--gut);bottom:44px;text-align:right;font-family:var(--mono);display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.readout-n{font-size:clamp(30px,3.6vw,48px);color:var(--signal);font-weight:500;font-variant-numeric:tabular-nums;line-height:1;}
.readout-l{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist-dim);}
.readout-s{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);display:flex;align-items:center;gap:8px;opacity:.9;}
.dot{width:5px;height:5px;background:var(--signal);border-radius:50%;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.2;}50%{opacity:1;}}

/* governorate probe */
.probe{position:fixed;z-index:50;pointer-events:none;transform:translate(14px,-50%);border-left:1px solid var(--signal);padding:8px 0 8px 13px;display:none;flex-direction:column;gap:3px;background:linear-gradient(90deg,rgba(4,9,26,.94),rgba(4,9,26,0));min-width:190px;}
.probe.on{display:flex;}
.probe-n{font-family:var(--display);font-size:23px;font-weight:600;color:#fff;line-height:1.1;}
.probe-ar{font-family:var(--arabic);direction:rtl;font-size:14px;color:var(--signal-hot);line-height:1.3;}
.probe-m{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--mist-dim);}
@media(max-width:900px){
  .hero{padding-block:120px 70px;}
  .hero::before{background:linear-gradient(180deg,rgba(4,9,26,.55) 0%,rgba(4,9,26,.9) 34%,rgba(4,9,26,.97) 100%);}
  .readout{position:static;align-items:flex-start;text-align:left;margin-top:48px;}
  .probe{display:none !important;}
}

/* ============ STAGE: the field takes the whole screen ============ */
.stage{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  text-align:center;
  padding-block:80px;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 46% at 50% 52%, rgba(4,9,26,.93) 0%, rgba(4,9,26,.72) 45%, rgba(4,9,26,0) 78%);
}
.stage-in{max-width:760px;display:flex;flex-direction:column;align-items:center;gap:22px;}
.stage-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--signal);display:flex;align-items:center;gap:14px;
}
.stage-k b{font-family:var(--arabic);direction:rtl;font-weight:400;font-size:13px;letter-spacing:0;color:var(--signal-hot);}
.stage-k::before,.stage-k::after{content:"";width:34px;height:1px;background:var(--signal);opacity:.55;}
.stage-h{font-size:clamp(34px,5.4vw,72px);line-height:1.06;}
.stage-h em{font-style:italic;font-weight:400;color:var(--signal);}
.stage-p{font-size:clamp(15.5px,1.25vw,18.5px);max-width:56ch;color:var(--mist);}
.stage-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-dim);margin-top:6px;}

/* an Open Design plate at the centre of a stage */
.stage.has-art{min-height:auto;padding-block:clamp(96px,13vh,170px);}
.stage-art{width:min(74vw,840px);margin:0 auto;}
.stage-art svg{width:100%;height:auto;display:block;}
.stage-art.wide{width:min(84vw,1000px);}
/* the plate holds still until it is actually on screen */
.stage-art:not(.lit) svg *{animation-play-state:paused !important;}
@media(max-width:820px){.stage-art,.stage-art.wide{width:94vw;}}

/* mobile navigation */
.nav-burger{
  display:none;background:none;border:0;padding:10px;cursor:pointer;
  flex-direction:column;gap:5px;align-items:flex-end;
}
.nav-burger span{display:block;height:1px;background:var(--signal);transition:width .25s,transform .25s;}
.nav-burger span:nth-child(1){width:22px;}
.nav-burger span:nth-child(2){width:14px;}
.nav-burger[aria-expanded="true"] span:nth-child(1){width:22px;transform:translateY(3px) rotate(6deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){width:22px;transform:translateY(-3px) rotate(-6deg);}
.nav-panel{
  display:none;position:fixed;inset:56px 0 auto 0;z-index:59;
  background:rgba(4,9,26,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-soft);
  padding:26px var(--gut) 34px;
}
.nav-panel.open{display:flex;flex-direction:column;gap:2px;}
.nav-panel a{
  font-family:var(--display);font-size:29px;font-weight:600;color:#fff;text-decoration:none;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.nav-panel a:last-child{border-bottom:0;}
@media(max-width:940px){.nav-burger{display:flex;}}

/* ============ reading sections: opaque, the field is fully hidden ============ */
.sec{padding-block:clamp(84px,10.5vw,170px);background:var(--void);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);position:relative;z-index:2;}
.sec-head{display:flex;flex-direction:column;gap:22px;max-width:780px;margin-bottom:clamp(50px,6vw,86px);}
.sec-head h2{font-size:clamp(38px,5.4vw,74px);}
.sec-head h2 em{font-style:italic;font-weight:400;color:var(--signal);}
.sec-head p{font-size:clamp(15.5px,1.2vw,18px);max-width:58ch;}

.strip{background:var(--deep);border-bottom:1px solid var(--line-soft);position:relative;z-index:2;}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.metric{padding:40px 32px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;}
.metric:first-child{border-left:0;}
.metric-n{font-family:var(--display);font-size:clamp(34px,3.8vw,52px);font-weight:600;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.metric-n i{font-style:normal;color:var(--signal);}
.metric-l{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--mist-dim);}
@media(max-width:820px){
  .strip-grid{grid-template-columns:repeat(2,1fr);}
  .metric:nth-child(3){border-left:0;}
  .metric:nth-child(n+3){border-top:1px solid var(--line-soft);}
}

.chan{display:grid;grid-template-columns:92px 1fr auto;gap:0 34px;align-items:start;padding:34px 0;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit;position:relative;isolation:isolate;}
.chan:last-of-type{border-bottom:1px solid var(--line-soft);}
.chan::after{content:"";position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:0;bottom:0;background:linear-gradient(90deg,rgba(201,168,76,.08),rgba(201,168,76,0) 55%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1;}
.chan:hover::after{opacity:1;}
.chan-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--signal);padding-top:10px;opacity:.7;}
.chan-body{display:flex;flex-direction:column;gap:10px;}
.chan-body h3{font-size:clamp(25px,2.6vw,35px);font-weight:600;transition:color .25s;}
.chan:hover .chan-body h3{color:var(--signal-hot);}
.chan-body p{max-width:62ch;font-size:15px;}
.chan-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);padding-top:14px;text-align:right;white-space:nowrap;}
@media(max-width:780px){
  .chan{grid-template-columns:56px 1fr;gap:0 16px;}
  .chan-meta{grid-column:2;text-align:left;padding-top:6px;}
}

.paper{background:var(--paper);color:var(--paper-mute);border-bottom:1px solid var(--line-soft);padding-block:clamp(84px,10.5vw,170px);position:relative;z-index:2;}
.paper h2{color:var(--paper-ink);}
.paper .tag{color:#8A6B1C;}
.paper .tag::before{background:#8A6B1C;}
.paper-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start;}
.paper-lead{font-family:var(--display);font-size:clamp(26px,3.1vw,42px);line-height:1.22;color:var(--paper-ink);font-weight:500;}
.paper-lead em{font-style:italic;color:#8A6B1C;}
.paper-body{display:flex;flex-direction:column;gap:21px;font-size:16px;}
.paper-body strong{color:var(--paper-ink);font-weight:500;}
.sig{margin-top:16px;padding-top:24px;border-top:1px solid rgba(11,31,75,.15);display:flex;flex-direction:column;gap:4px;}
.sig b{font-family:var(--display);font-size:21px;color:var(--paper-ink);font-weight:600;}
.sig span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-mute);}
@media(max-width:880px){.paper-grid{grid-template-columns:1fr;}}

.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);}
.cell{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-height:140px;transition:background .3s;}
.cell:hover{background:var(--deep);}
.cell-id{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--signal);opacity:.6;}
.cell b{font-family:var(--display);font-size:21px;font-weight:600;color:#fff;line-height:1.16;}
.cell span{font-size:12.5px;color:var(--mist-dim);line-height:1.5;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft);}
.step{padding:36px 28px 44px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:13px;position:relative;}
.step:last-child{border-right:0;}
.step::before{content:"";position:absolute;top:-1px;left:0;width:42px;height:2px;background:var(--signal);}
.step-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);}
.step h3{font-size:23px;font-weight:600;}
.step p{font-size:14px;}
@media(max-width:920px){
  .steps{grid-template-columns:1fr;}
  .step{border-right:0;border-bottom:1px solid var(--line-soft);}
  .step:last-child{border-bottom:0;}
}

.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);}
.brandcell{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:30px 24px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;transition:background .3s;}
.brandcell:hover{background:rgba(201,168,76,.06);}
.brandcell b{font-family:var(--display);font-size:26px;font-weight:600;color:#fff;line-height:1.1;}
.brandcell span{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--mist-dim);}

.ptab{width:100%;border-collapse:collapse;font-size:14.5px;}
.ptab th{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);text-align:left;font-weight:500;padding:0 18px 14px 0;border-bottom:1px solid var(--line);}
.ptab td{padding:18px 18px 18px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--mist);}
.ptab tr:hover td{background:rgba(201,168,76,.04);}
.ptab td.c{font-family:var(--display);font-size:21px;color:#fff;font-weight:600;white-space:nowrap;}
.ptab td.n{font-family:var(--mono);font-size:13px;color:var(--signal-hot);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ptab-scroll{overflow-x:auto;}
@media(max-width:760px){.ptab{min-width:640px;}}

.net{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft);}
.node{padding:38px 30px 42px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:14px;transition:background .3s;}
.node:last-child{border-right:0;}
.node:hover{background:var(--deep);}
.node-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.node-name{font-family:var(--display);font-size:26px;font-weight:600;color:#fff;}
.node-loc{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--signal);white-space:nowrap;}
.node p{font-size:14px;}
.node-link{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist-dim);text-decoration:none;margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;transition:color .2s;}
.node-link:hover{color:var(--signal);}
.node-link span{transition:transform .25s;}
.node-link:hover span{transform:translateX(4px);}
.node.self{background:rgba(201,168,76,.05);}
.node.self .node-loc{color:var(--signal-hot);}
@media(max-width:900px){
  .net{grid-template-columns:1fr;}
  .node{border-right:0;border-bottom:1px solid var(--line-soft);}
  .node:last-child{border-bottom:0;}
}

.reach-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;}
.reach-list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft);}
.reach-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:12px;}
.reach-row b{font-family:var(--body);font-size:16.5px;font-weight:400;color:#fff;display:flex;align-items:baseline;gap:10px;}
.reach-row span{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--mist-dim);white-space:nowrap;}
.reach-row span.on{color:var(--signal);}
@media(max-width:880px){.reach-grid{grid-template-columns:1fr;}}

/* closing stage doubles as the call to action */
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px;}

.foot{padding-block:60px 46px;background:var(--void);border-top:1px solid var(--line-soft);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:42px;border-bottom:1px solid var(--line-soft);}
.foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);margin:0 0 18px;font-weight:500;}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:14px;}
.foot-col a{text-decoration:none;transition:color .2s;}
.foot-col a:hover{color:var(--signal);}
.foot-bottom{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:34px;}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .rv,.fade{opacity:1;transform:none;}
  .line > i{transform:none;}
  .hero h1 em::after{transform:scaleX(1);}
  .stage{min-height:auto;padding-block:120px;}
}

/* ================= interior pages ================= */
.hero-page{min-height:clamp(400px,58vh,600px);}
.hero-page h1{font-size:clamp(40px,6vw,82px);}
.hero-page .hero-grid{max-width:800px;}
.hero-page::before{background:linear-gradient(90deg,rgba(4,9,26,.97) 0%,rgba(4,9,26,.93) 44%,rgba(4,9,26,.5) 64%,rgba(4,9,26,0) 82%);}
@media(max-width:900px){.hero-page::before{background:linear-gradient(180deg,rgba(4,9,26,.6) 0%,rgba(4,9,26,.93) 30%,rgba(4,9,26,.97) 100%);}}

/* the citable answer block */
.answer{max-width:72ch;font-size:clamp(16px,1.2vw,18.5px);color:var(--mist);}
.facts{
  display:grid;grid-template-columns:190px 1fr;gap:0;
  border-top:1px solid var(--line-soft);margin:34px 0 0;font-size:14.5px;
}
.facts dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);padding:15px 20px 15px 0;border-bottom:1px solid var(--line-soft);
}
.facts dd{margin:0;padding:15px 0;border-bottom:1px solid var(--line-soft);color:var(--mist);}
@media(max-width:640px){
  .facts{grid-template-columns:1fr;}
  .facts dt{padding:16px 0 3px;border-bottom:0;}
  .facts dd{padding:0 0 16px;}
}

/* deliverable plate */
.plate{display:flex;flex-direction:column;gap:18px;}
.plate-art{
  width:100%;border:1px solid var(--line-soft);background:rgba(10,24,54,.4);
  padding:clamp(14px,2.4vw,32px);overflow-x:auto;
}
.plate-art svg{width:100%;height:auto;display:block;min-width:520px;}
.plate-note{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);
}

/* questions, as an accordion */
.faq{border-top:1px solid var(--line-soft);}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-item > summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(20px,1.9vw,25px);color:#fff;font-weight:600;
  line-height:1.2;transition:color .2s;
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary:hover{color:var(--signal-hot);}
.faq-item > summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.faq-x{position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;flex:none;}
.faq-x::before,.faq-x::after{
  content:"";position:absolute;background:var(--signal);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;
}
.faq-x::before{left:0;top:6px;width:14px;height:1.5px;}
.faq-x::after{left:6px;top:0;width:1.5px;height:14px;}
.faq-item[open] .faq-x::after{transform:rotate(90deg);opacity:0;}
.faq-item[open] > summary{color:var(--signal-hot);}
.faq-a{
  font-size:15.5px;max-width:70ch;padding:0 46px 26px 0;color:var(--mist);
  animation:faqIn .45s cubic-bezier(.16,1,.3,1);
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.faq-a{animation:none;}}

/* closing block on interior pages */
.sec-close{text-align:center;}
.close-in{display:flex;flex-direction:column;align-items:center;gap:24px;}
.close-in h2{font-size:clamp(34px,5vw,64px);}
.close-in h2 em{font-style:italic;font-weight:400;color:var(--signal);}
.close-in p{max-width:50ch;}

/* related */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);}
.rel a{
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:26px 24px;text-decoration:none;display:flex;flex-direction:column;gap:9px;
  transition:background .25s;min-height:132px;
}
.rel a:hover{background:var(--deep);}
.rel b{font-family:var(--display);font-size:21px;color:#fff;font-weight:600;line-height:1.15;transition:color .2s;}
.rel a:hover b{color:var(--signal-hot);}
.rel span{font-size:13px;color:var(--mist-dim);line-height:1.5;}

/* a page made of stacked .sec blocks should not double its borders */
.sec + .sec{border-top:0;}

/* index listing */
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);}
.idx a{
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:30px 28px 34px;text-decoration:none;display:flex;flex-direction:column;gap:10px;
  transition:background .25s;
}
.idx a:hover{background:var(--deep);}
.idx .idx-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);opacity:.75;}
.idx b{font-family:var(--display);font-size:clamp(22px,2.2vw,27px);color:#fff;font-weight:600;line-height:1.14;transition:color .2s;}
.idx a:hover b{color:var(--signal-hot);}
.idx span{font-size:13.5px;color:var(--mist-dim);line-height:1.55;}

/* panel signup */
.form-wrap{border:1px solid var(--line-soft);padding:clamp(22px,3vw,44px);background:rgba(10,24,54,.4);}
.form-wrap .frm-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);margin-bottom:20px;}


/* ================= navigation dropdowns ================= */
.nav-links .menu{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0;}
.nav-links .menu > li{position:relative;}
.nav-links .menu a{
  display:block;font-size:13.5px;line-height:1.2;text-decoration:none;color:var(--mist);
  transition:color .2s;padding:16px 0;white-space:nowrap;
}
.nav-links .menu > li > a{display:flex;align-items:center;gap:7px;}
.nav-links .menu > li.menu-item-has-children > a::after{
  content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .25s,opacity .2s;
}
.nav-links .menu > li:hover > a,
.nav-links .menu > li:focus-within > a{color:#fff;}
.nav-links .menu > li:hover > a::after{opacity:1;transform:rotate(45deg) translateY(1px);}
.nav-links .menu .current-menu-item > a,
.nav-links .menu .current-menu-ancestor > a{color:var(--signal);}

.nav-links .sub-menu{
  position:absolute;top:100%;left:-24px;margin:0;padding:12px 0;list-style:none;
  min-width:290px;background:rgba(4,9,26,.98);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line-soft);border-top:1px solid var(--signal);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),visibility .28s;
  z-index:70;
}
.nav-links .menu > li:hover > .sub-menu,
.nav-links .menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.nav-links .sub-menu a{padding:10px 26px;font-size:14px;color:var(--mist);}
.nav-links .sub-menu a:hover,.nav-links .sub-menu a:focus-visible{
  color:var(--signal-hot);background:rgba(201,168,76,.07);
}
/* a long list opens as two columns instead of a scroll */
.nav-links .sub-menu:has(> li:nth-child(10)){min-width:580px;columns:2;column-gap:0;}
.nav-links .sub-menu:has(> li:nth-child(10)) > li{break-inside:avoid;}

/* mobile: the same menu, opened out */
.nav-panel .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.nav-panel .menu > li{border-bottom:1px solid var(--line-soft);padding:4px 0 10px;}
.nav-panel .menu > li:last-child{border-bottom:0;}
.nav-panel .menu > li > a{
  font-family:var(--display);font-size:27px;font-weight:600;color:#fff;text-decoration:none;
  display:block;padding:10px 0 6px;
}
.nav-panel .sub-menu{
  list-style:none;margin:0;padding:0 0 6px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 18px;
}
.nav-panel .sub-menu a{
  font-size:13.5px;color:var(--mist-dim);text-decoration:none;display:block;padding:6px 0;
}
.nav-panel .sub-menu a:hover{color:var(--signal);}
.nav-panel{max-height:calc(100vh - 56px);overflow-y:auto;}

/* ================= interior page hero, rebuilt ================= */
.hero-page{
  position:relative;background:var(--void);
  border-bottom:1px solid var(--line-soft);
  padding-block:clamp(56px,7vw,104px) clamp(52px,6vw,92px);
  overflow:hidden;
}
.hero-page::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,var(--signal),rgba(201,168,76,0) 42%);
  opacity:.5;
}
.hero-page-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.hero-page-copy{display:flex;flex-direction:column;gap:22px;min-width:0;}
.hero-page h1{font-size:clamp(38px,5.2vw,72px);letter-spacing:-0.025em;}
.hero-page .hero-lede{font-size:clamp(15.5px,1.2vw,18px);max-width:46ch;}
.hero-page .hero-actions{margin-top:4px;}
.hero-page-art{min-width:0;}
.hero-page-art svg{width:100%;height:auto;display:block;max-height:420px;}
@media(max-width:900px){
  .hero-page-grid{grid-template-columns:1fr;gap:34px;}
  .hero-page-art{order:-1;max-width:440px;}
}

/* the first content section should not double the rule under the hero */
.hero-page + .sec{border-top:0;}

/* ================= one idea per screen =================
   A stage carrying an Open Design drawing owns the screen alone: opaque ground,
   so the particle field is never behind a technical illustration. */
.stage.has-art{
  background:var(--void);
  min-height:auto;
  padding-block:clamp(90px,11vh,150px);
}
.stage.has-art::before{display:none;}
.stage.has-art .stage-in{gap:26px;max-width:820px;}
.stage-art{width:min(66vw,760px);margin:0 auto;}
.stage-art.wide{width:min(74vw,880px);}
.stage-art svg{width:100%;height:auto;display:block;}
@media(max-width:820px){.stage-art,.stage-art.wide{width:92vw;}}