/* ═══════════════════════════════════════════════════════════════════════
   LEGXIS — additive styles (patch v5)

   css/styles.css is the original legxis.com stylesheet, byte-for-byte. It is
   not edited. This file only adds what the new content needs: the staging
   bar, status chips, the instruments grid, compliance notes, the consent
   banner, and the interior-page layout. Same tokens, same fonts, same feel.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --pg-muted:rgba(244,240,232,.60);
  --pg-dim:rgba(244,240,232,.38);
  --pg-edge:rgba(244,240,232,.10);
  --pg-edge-hi:rgba(244,240,232,.20);
  --pg-amber:#F8B008;
}

/* ── staging bar ─────────────────────────────────────────────────────── */
.staging-bar{
  position:relative; z-index:900;
  background:#BF2318; color:#fff; text-align:center;
  font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; padding:9px 16px; line-height:1.55;
}
body:has(.staging-bar) #nav{top:calc(20px + 34px)}
@media(max-width:700px){ body:has(.staging-bar) #nav{top:calc(20px + 48px)} }

/* ── skip link ───────────────────────────────────────────────────────── */
.pg-skip{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  top:0; inset-inline-start:0; z-index:99999;
  background:#F4F0E8; color:#050505; padding:12px 18px; text-decoration:none;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.pg-skip:focus{
  width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
  top:12px; inset-inline-start:12px;
}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid #0AB8F8; outline-offset:3px; border-radius:4px;
}

/* ── shared text bits ────────────────────────────────────────────────── */
.pg-lede{
  font-family:'Syne',sans-serif; font-size:clamp(15px,1.6vw,18px); line-height:1.7;
  color:var(--pg-muted); max-width:64ch;
}
.pg-note{
  border-left:2px solid var(--pg-edge-hi); padding:6px 0 6px 20px;
  color:var(--pg-muted); font-family:'Syne',sans-serif; font-size:14px;
  line-height:1.75; max-width:74ch;
}
.pg-note b{color:#F4F0E8; font-weight:600}
.pg-note a{color:#F4F0E8}
.pg-note-gap{border-left-color:var(--pg-amber)}
.pg-note-risk{border-left-color:#BF2318}

/* ── status chips ────────────────────────────────────────────────────── */
.pg-chip{
  display:inline-block; margin-left:10px; vertical-align:middle;
  font-family:'Montserrat',sans-serif; font-size:8px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:3px 8px;
  border-radius:999px; border:1px solid var(--pg-edge-hi); color:var(--pg-dim);
  white-space:nowrap;
}
/* One colour per state, ordered so the roadmap reads as a progression:
   planned (grey) → in development (blue) → contracting (gold) →
   pre-launch (magenta) → completed (green). Magenta rather than cyan because
   cyan sat too close to the development blue to be told apart at chip size;
   it is the same magenta as the hero splash. Ongoing is not a stage on that
   line, so it is bone-white with a live dot instead of a hue on the scale. */
.pg-chip-planned{border-color:rgba(244,240,232,.20); color:var(--pg-dim)}
.pg-chip-dev{border-color:#1A6FAD; color:#5eb0e8}
.pg-chip-contracting{border-color:#C09820; color:#e0bc55}
.pg-chip-prelaunch{border-color:#A83FC4; color:#DE8CF0}
.pg-chip-completed{border-color:#1E8C4E; color:#4fd18a}
.pg-chip-ongoing{border-color:rgba(244,240,232,.55); color:#F4F0E8}
.pg-chip-ongoing::before{
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:#F4F0E8; margin-inline-end:7px; vertical-align:middle;
  animation:pgPulse 2s ease-in-out infinite;
}
@keyframes pgPulse{0%,100%{opacity:1}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.pg-chip-ongoing::before{animation:none}}

/* Project tiles sit on the bone band, so Pre-launch needs a dark-on-light
   variant of the same cyan rather than the original's gold s-planning. */
.spv-status.s-prelaunch{
  background:rgba(155,43,184,.10); color:#8A22A6;
  border:1px solid rgba(155,43,184,.32);
}
.spv-status.s-prelaunch::before{background:#8A22A6; box-shadow:0 0 6px rgba(155,43,184,.5)}

/* ── instruments grid ────────────────────────────────────────────────── */
#instruments{padding:88px 0 96px; position:relative}
.pg-inst-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:44px;
}
@media(max-width:860px){.pg-inst-grid{grid-template-columns:1fr}}
.pg-inst{
  border:1px solid var(--pg-edge); border-radius:14px; padding:30px;
  background:rgba(244,240,232,.03); transition:border-color .25s, background .25s;
}
.pg-inst:hover{border-color:var(--pg-edge-hi); background:rgba(244,240,232,.05)}
.pg-inst h3{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(20px,2.2vw,26px); line-height:1.02; letter-spacing:-.01em;
  color:#F4F0E8; margin:0 0 14px;
}
.pg-inst p{font-family:'Syne',sans-serif; font-size:14px; line-height:1.7; margin:0 0 12px}
.pg-inst .is{color:#F4F0E8}
.pg-inst .isnot{color:var(--pg-muted); margin-bottom:0}
.pg-inst .isnot b{color:#BF2318; font-weight:700}

/* ── footer additions ────────────────────────────────────────────────── */
.pg-foot-corp{
  font-family:'Syne',sans-serif; font-size:11.5px; line-height:1.9;
  color:var(--pg-dim); margin-top:16px;
}
.pg-foot-corp b{color:var(--pg-muted); font-weight:600}
.pg-foot-corp a{color:var(--pg-dim); text-decoration:none}
.pg-foot-corp a:hover{color:#F4F0E8}
.pg-disc{
  margin-top:38px; padding-top:24px; border-top:1px solid var(--pg-edge);
  font-family:'Syne',sans-serif; font-size:11.5px; line-height:1.8;
  color:var(--pg-dim); max-width:96ch;
}
.pg-disc b{color:var(--pg-muted); font-weight:600}
.pg-foot-bot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:22px;
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--pg-dim);
}

/* ── cookie consent ──────────────────────────────────────────────────── */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:9500;
  background:#0b0b0b; border-top:1px solid var(--pg-edge-hi); padding:22px 0;
  transform:translateY(115%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cc.show{transform:none}
.cc-in{
  max-width:1360px; margin:0 auto; padding:0 28px; display:flex; gap:26px;
  align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
}
.cc p{font-family:'Syne',sans-serif; color:var(--pg-muted); font-size:13px;
  line-height:1.7; max-width:62ch; margin:0}
.cc-btns{display:flex; gap:10px; flex-wrap:wrap}
.cc .pill{padding:12px 22px; font-size:10px}
.cc-panel{display:none; width:100%; margin-top:20px; padding-top:20px;
  border-top:1px solid var(--pg-edge)}
.cc-panel.open{display:block}
.cc-row{display:flex; gap:14px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--pg-edge); font-family:'Syne',sans-serif;
  font-size:13px; color:var(--pg-muted); line-height:1.65}
.cc-row:last-of-type{border-bottom:0}
.cc-row input{margin-top:3px; accent-color:#F4F0E8; width:15px; height:15px; flex:none}
.cc-row b{color:#F4F0E8; font-weight:600; display:block; margin-bottom:2px}
@media(max-width:760px){
  .cc-in{flex-direction:column; gap:18px}
  .cc-btns{width:100%}
  .cc .pill{flex:1; justify-content:center; text-align:center}
}

/* ═══ INTERIOR PAGES ═══════════════════════════════════════════════════ */

.pg-hero{
  position:relative; padding:200px 0 90px; overflow:hidden;
  border-bottom:1px solid var(--pg-edge);
}
.pg-hero .wrap{position:relative; z-index:2}
.pg-hero-orb{
  position:absolute; width:720px; height:720px; border-radius:50%;
  filter:blur(120px); opacity:.16; pointer-events:none;
  top:-280px; right:-160px;
}
.pg-kicker{
  font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--pg-muted);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.pg-kicker::before{content:''; width:24px; height:1px; background:var(--pg-edge-hi); flex:none}
.pg-h1{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(40px,6.4vw,82px); line-height:.9; letter-spacing:-.02em;
  color:#F4F0E8; margin:0;
}
.pg-rule{height:2px; display:flex; width:100%}
.pg-rule i{flex:1}
.pg-rule i:nth-child(1){background:#0AB8F8} .pg-rule i:nth-child(2){background:#18C090}
.pg-rule i:nth-child(3){background:#F8B008} .pg-rule i:nth-child(4){background:#F00030}

.pg-sec{padding:76px 0; border-top:1px solid var(--pg-edge)}
.pg-sec:first-of-type{border-top:0}
.pg-h2{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,44px); line-height:.96; letter-spacing:-.015em;
  color:#F4F0E8; margin:0;
}
.pg-body{max-width:70ch; margin-top:24px}
.pg-body p{font-family:'Syne',sans-serif; font-size:15.5px; line-height:1.78;
  color:var(--pg-muted); margin:0 0 18px}
.pg-body p:last-child{margin-bottom:0}

/* definition rows */
.pg-dl{border:1px solid var(--pg-edge); border-radius:12px; overflow:hidden; margin-top:28px}
.pg-dl>div{display:grid; grid-template-columns:34% 1fr; gap:20px; padding:15px 22px;
  border-top:1px solid var(--pg-edge)}
.pg-dl>div:first-child{border-top:0}
.pg-dl .k{font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--pg-dim); padding-top:4px}
.pg-dl .v{font-family:'Syne',sans-serif; font-size:14.5px; line-height:1.65; color:#F4F0E8}
@media(max-width:700px){.pg-dl>div{grid-template-columns:1fr; gap:6px}}

/* split comparison */
.pg-split{margin-top:28px; border:1px solid var(--pg-edge); border-radius:12px; overflow:hidden}
.pg-split .hd,.pg-split .rw{display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:16px 22px}
.pg-split .hd{background:rgba(244,240,232,.05); font-family:'Montserrat',sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#F4F0E8}
.pg-split .rw{border-top:1px solid var(--pg-edge); font-family:'Syne',sans-serif;
  font-size:14px; color:var(--pg-muted); line-height:1.65}
@media(max-width:760px){
  .pg-split .hd,.pg-split .rw{grid-template-columns:1fr; gap:8px}
  .pg-split .rw span:first-child{color:#F4F0E8}
}

/* lists */
.pg-ticks{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.pg-ticks li{position:relative; padding-left:24px; font-family:'Syne',sans-serif;
  font-size:14.5px; line-height:1.7; color:var(--pg-muted); max-width:74ch}
.pg-ticks li::before{content:''; position:absolute; left:0; top:11px; width:8px; height:1px;
  background:var(--pg-edge-hi)}
.pg-ticks li b{color:#F4F0E8; font-weight:600}
.pg-steps{list-style:none; counter-reset:pgs; margin:24px 0 0; padding:0; display:grid; gap:14px}
.pg-steps li{counter-increment:pgs; position:relative; padding-left:36px;
  font-family:'Syne',sans-serif; font-size:14.5px; line-height:1.7;
  color:var(--pg-muted); max-width:74ch}
.pg-steps li::before{content:counter(pgs,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.1em; color:var(--pg-dim)}

/* forms */
.pg-form{margin-top:32px; max-width:620px}
.pg-field{margin-top:18px}
.pg-field label{display:block; font-family:'Montserrat',sans-serif; font-size:9.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pg-muted); margin-bottom:8px}
.pg-form input[type=text],.pg-form input[type=email],.pg-form textarea,.pg-form select{
  width:100%; background:rgba(244,240,232,.05); border:1px solid var(--pg-edge);
  border-radius:9px; color:#F4F0E8; font-family:'Syne',sans-serif; font-size:15px;
  padding:14px 16px; outline:none;
}
.pg-form input:focus,.pg-form textarea:focus,.pg-form select:focus{border-color:#F4F0E8}
.pg-form textarea{min-height:110px; resize:vertical}
.pg-form select option{background:#101010; color:#F4F0E8}
.pg-consent{display:flex; gap:12px; align-items:flex-start; margin-top:22px;
  font-family:'Syne',sans-serif; font-size:13px; color:var(--pg-muted);
  line-height:1.65; max-width:66ch; cursor:pointer}
.pg-consent input{margin-top:3px; accent-color:#F4F0E8; flex:none; width:15px; height:15px}
.pg-hp{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.pg-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* project tiles on interior pages */
.pg-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
@media(max-width:900px){.pg-cards{grid-template-columns:1fr}}
.pg-card{border:1px solid var(--pg-edge); border-radius:14px; padding:28px;
  background:rgba(244,240,232,.03); display:flex; flex-direction:column;
  transition:border-color .25s, background .25s}
.pg-card:hover{border-color:var(--pg-edge-hi); background:rgba(244,240,232,.05)}
.pg-card .accent{height:2px; width:48px; border-radius:2px; margin-bottom:22px}
.pg-card .n{font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.2em; color:var(--pg-dim)}
.pg-card h3{font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  text-transform:uppercase; font-size:24px; line-height:1.02; color:#F4F0E8; margin:14px 0 12px}
.pg-card p{font-family:'Syne',sans-serif; font-size:14px; line-height:1.7;
  color:var(--pg-muted); margin:0 0 22px}
.pg-card .pill{margin-top:auto; align-self:flex-start}

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

/* ── light-section overrides ─────────────────────────────────────────────
   #spvs uses the original's bone background (#F0EDE6). Anything of ours
   placed inside it must invert, or it renders white-on-white. */
#spvs .pg-lede{color:rgba(10,10,10,.62)}
#spvs .pg-note{color:rgba(10,10,10,.62); border-left-color:rgba(10,10,10,.22)}
#spvs .pg-note b{color:#0A0A0A}
#spvs .pg-note-gap{border-left-color:#C08A00}

/* visually hidden, still read by screen readers and search engines.
   §15.1 requires one clear H1 per page; the hero is a logo image. */
.pg-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── language switcher ───────────────────────────────────────────────── */
.lang-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.pg-langrow{display:flex;gap:10px;justify-content:center;margin-top:8px}
.pg-langrow .lang-btn{padding:8px 14px}

/* ── RTL: the original stylesheet already carries [dir="rtl"] rules and
   loads Cairo. These are the additions the new sections need. ─────────── */
[dir="rtl"] .pg-kicker::before{order:2}
[dir="rtl"] .pg-note{border-left:0;border-right:2px solid var(--pg-edge-hi);
  padding:6px 20px 6px 0}
[dir="rtl"] .pg-note-gap{border-right-color:var(--pg-amber)}
[dir="rtl"] .pg-note-risk{border-right-color:#BF2318}
[dir="rtl"] .pg-ticks li{padding-left:0;padding-right:24px}
[dir="rtl"] .pg-ticks li::before{left:auto;right:0}
[dir="rtl"] .pg-steps li{padding-left:0;padding-right:36px}
[dir="rtl"] .pg-steps li::before{left:auto;right:0}
[dir="rtl"] .pg-chip{margin-left:0;margin-right:10px}
[dir="rtl"] .pg-hero-orb{right:auto;left:-160px}
[dir="rtl"] .pg-inst .isnot b{margin-left:4px}
[dir="rtl"] .pg-foot-bot,[dir="rtl"] .pg-disc{text-align:right}
[dir="rtl"] .cc-row{text-align:right}
/* The logo is a wordmark and must never be mirrored (§15.2). */
[dir="rtl"] .hero-logo-img,[dir="rtl"] .foot-logo img,
[dir="rtl"] .reveal-x{transform:none!important}
/* Figures stay left-to-right inside RTL text so digits cannot reorder. */
[dir="rtl"] .pg-dl .v,[dir="rtl"] .spv-tag{unicode-bidi:plaintext}

/* ── vertical rhythm around the reveal ───────────────────────────────────
   The original reserved a 380px stage plus 80px padding for a section that
   is empty until it animates. Tightened so the portfolio and the instruments
   grid are not separated by a screenful of nothing. */
#reveal{padding:56px 48px}
#reveal .reveal-stage{height:300px}
@media(max-width:900px){
  #reveal{padding:44px 20px}
  #reveal .reveal-stage{height:auto; min-height:240px}
  #instruments{padding:60px 0 68px}
}

/* ── portfolio closing statement (sits on the bone band) ─────────────── */
.pg-portfolio-close{
  margin-top:64px; padding-top:40px;
  border-top:1px solid rgba(10,10,10,.14);
  display:grid; grid-template-columns:minmax(220px,34%) 1fr; gap:36px; align-items:start;
}
.pg-portfolio-close h3{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(24px,3vw,38px); line-height:.96; letter-spacing:-.015em;
  color:#0A0A0A; margin:0;
}
.pg-portfolio-close p{
  font-family:'Syne',sans-serif; font-size:15.5px; line-height:1.75;
  color:rgba(10,10,10,.62); margin:0; max-width:62ch;
}
@media(max-width:820px){
  .pg-portfolio-close{grid-template-columns:1fr; gap:18px; margin-top:44px; padding-top:30px}
}

/* ── confirmation modal ──────────────────────────────────────────────── */
.lx-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,5,5,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .32s ease;
}
.lx-modal[hidden]{display:none}
.lx-modal.show{opacity:1}
.lx-modal-card{
  position:relative; width:100%; max-width:520px; text-align:center;
  background:#0C0C0C; border:1px solid rgba(244,240,232,.14); border-radius:16px;
  padding:52px 40px 40px; overflow:hidden;
  transform:translateY(16px) scale(.98); transition:transform .38s cubic-bezier(.16,1,.3,1);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.lx-modal.show .lx-modal-card{transform:none}
.lx-modal-rule{position:absolute; top:0; left:0; right:0; height:2px; display:flex}
.lx-modal-rule i{flex:1}
.lx-modal-rule i:nth-child(1){background:#0AB8F8} .lx-modal-rule i:nth-child(2){background:#18C090}
.lx-modal-rule i:nth-child(3){background:#F8B008} .lx-modal-rule i:nth-child(4){background:#F00030}
.lx-modal-x{
  position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px;
  background:none; border:0; color:rgba(244,240,232,.45); font-size:15px; cursor:pointer;
  border-radius:50%; transition:color .2s, background .2s;
}
.lx-modal-x:hover{color:#F4F0E8; background:rgba(244,240,232,.08)}
.lx-modal-mark{width:54px; height:54px; object-fit:contain; margin:0 auto 22px; display:block}
.lx-modal-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,44px); line-height:.96; letter-spacing:-.015em;
  color:#F4F0E8; margin:0 0 16px;
}
.lx-modal-text{
  font-family:'Syne',sans-serif; font-size:15px; line-height:1.72;
  color:rgba(244,240,232,.68); margin:0 auto 14px; max-width:44ch;
}
.lx-modal-note{
  font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,240,232,.32);
  margin:0 0 28px;
}
.lx-modal .pill{min-width:150px; justify-content:center}
@media(max-width:560px){.lx-modal-card{padding:44px 24px 32px}}
@media(prefers-reduced-motion:reduce){
  .lx-modal,.lx-modal-card{transition:none}
}